Layout form login yang terletak ditengah sudah sering kita temukan dan sangat banyak tutorial yang mengupasnya. Kali ini kita akan mencoba jenis form login dropdown.
Dalam perancangan login tersebut, kita menggunakan framework front-end Bootstrap versi 3 keatas. Bagi anda yang belum mengdownload Bootstrap, tenang saja....kita akan sertakan source code secara lengkap bersama dengan librari framework Bootstrap.
Gambar dibawah ini adalah target output yang akan kita buat:
 |
| Gambar.1 |
Pada gambar.1, saat user mengklik menu login, makan akan muncul efek dropdown yang berisikan textfield untuk username dan password beserta tombol login.
Langkah-langkah pembuatan
Buatlah sebuah file html, dalam hal ini kita berinama dropdownlogin.html. Kemudian copy paste script berikut diantara tag <head>...</head> :
<link rel="stylesheet" href="assets/css/bootstrap.css">
<script src="assets/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<script src="assets/js/bootstrap.min.js"></script>
Script.1
Script diatas bertujuan untuk memanggil librari Bootstrap. Karena dalam perancangannya, kita menggunakan bantuan libari untuk menata layoutnya.
Kemudian, tambahkan script berikut tepat dibawah Script.1 diatas :
<style type="text/css">
.navbar-default .navbar-nav > li.clr1 a{
color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
color:#fff;
background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
color: #fff;
background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
color: #fff;
background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
color: #fff;
background: #29AAE2;
}
.navbar-default{
background-color: #3b5998;
font-size:18px;
}
.navbar-default .navbar-brand {
color: #ffffff;
font-weight:bold;
}
.navbar-default .navbar-text {
color:#ffffff;
}
a{
color: #FFC107;
text-decoration: none;
}
</style>
Script.2
Script.2 tersebut digunakan untuk css perancangan navigation bar bagian atas dan juga digunakan untuk navbar yang berada dibawah. Navbar pada hakikatnya diperuntukkan untuk pembuatan navigasi menu, namun kita bisa memanipulasinya sebagai footer. Untuk merubah warna navbar yang kita kehendaki, silahkan baca Tutorial DTC Group : Pusat Ilmu.
Tahap berikutnya, kita akan membuat menu-menu pada navbar bagian atas. Tempat script berikut dibawah tag <body> :
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="about.html">Programming</a></li>
<li class="clr3"><a href="courses.html">English</a></li>
<li class="clr4 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
<ul class="dropdown-menu" style="padding: 20px 10px 5px 10px; width:300px;">
<li>
<form action="login.php" method="POST">
<div class="form-group">
<input type="email" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary" name="login">Login</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Script.3
Perhatikan script.3 diatas, bagian menu yang diawali dengan <li>...</li> untuk login berbeda dengan menu lainnya. Pada menu login, terdapat class dropdown toggle dan dropdown-menu, hal inilah yang membuat munculnya efek menu dropdown login.
Kemudian, langkah terakhir adalah membuat footernya, copy paste script berikut tepat dibawah scrip.3 :
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
</div>
</div>
Proses perancangan telah selesai, sehingga output seperti Gambar.1 akan muncul.
