Anda di halaman 1dari 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>
<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>
<!-- End Form Login -->

</body>
</html>

Ketik juga Kode css-nya :

.header{ height: auto; border-bottom: 2px solid blue; margin-bottom: 50px; padding: 10px; }
.judul1{ text-align: center; color: red; }
.judul2{ text-align: center; color: blue;}
.logo1{ margin-left: 45%; width: 90px; height: 90px; }

Catatan/ Keterangan :
1. Contoh halaman login dibuat dengan menggunakan bootstrap html dan css.
2. Desain dapat dirubah sesuai dengan selera masing-masing.
3. Desain yang dapat di rubah-rubah seperti background dsb.
4. Contoh diatas belum termasuk kode php untuk proses loginya(hanya tampilan saja)
5. Jangan lupa harus banyak latihan agar ingat kodenya.
6. Jika ada yang kurang jelas silahkan bertanya keteman atau gurunya langsung.
7. Kode yang diawali dengan <-- dan diakhiri dengan --> seperti <!-- End Form Login -->
Adalah komentar ( boleh diketik atau tidak)
8. Untuk merubah desain tinggal modifikasi kode css-nya saja.

Sekali lagi.. ingat! Banyak latihan disetiap kesempatan, mumpung ada waktu daripada menyesal.