You are on page 1of 3

Materi : Desain Interface 1

Sub Materi : Membuat Halaman Login
Nama File : index.php
Disimpan di folder ujikom

Contoh Output1 :

Ketiklah Contoh kode program dibawah ini:

<!doctype html>
<html>
<head>
<title>Apikasi Data Inventaris Barang</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/custom2.css">
<script src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<img src="image/smkn2.png" class="logo1">
<h2 class="judul1"> APLIKASI INVENTARIS DATA BARANG</h2>
<H4 class="judul2"> SMK NEGERI 2 PURWAKARTA</H4>
</div>

<!-- Form Login -->
<div class="col-md-offset-4 col-md-3">
<h4 class="judul1"> Login Administrator</h4>

judul2{ text-align: center. Jika ada yang kurang jelas silahkan bertanya keteman atau gurunya langsung. Jangan lupa harus banyak latihan agar ingat kodenya.} . border-bottom: 2px solid blue. padding: 10px.judul1{ text-align: center. Kode yang diawali dengan <-. } Catatan/ Keterangan : 1.header{ height: auto. Desain yang dapat di rubah-rubah seperti background dsb. 2. 6. color: blue. } .End Form Login --> . margin-bottom: 50px. Desain dapat dirubah sesuai dengan selera masing-masing. height: 90px. Contoh diatas belum termasuk kode php untuk proses loginya(hanya tampilan saja) 5. <div class="well"> <form action="" method="POST"> <div class="form-group"> <label>Username</label> <input type="userame" class="form-control" name=”username”> </div> <div class="form-group"> <label >Password</label> <input type="password" class="form-control" name=”password”> </div> <input type="submit" class="btn btn-sm btn-primary" name=”login” value="Login"> <input type="reset" class="btn btn-sm btn-danger" value="Reset"> </form> </div> </div> <!-. width: 90px. Contoh halaman login dibuat dengan menggunakan bootstrap html dan css. 3. 4. color: red.logo1{ margin-left: 45%.dan diakhiri dengan --> seperti <!-. 7.End Form Login --> </body> </html> Ketik juga Kode css-nya : . } .

Sekali lagi. .. Adalah komentar ( boleh diketik atau tidak) 8. Untuk merubah desain tinggal modifikasi kode css-nya saja. mumpung ada waktu daripada menyesal. ingat! Banyak latihan disetiap kesempatan.