Cara mudah membuat Form login dengan Bootstrap dilengkapi dengan gambar, formulir login aplikasi dengan css
rpl-smkwitar ~ Aplikasi berbasis web semakin marak di era digitalisasi dewasa ini, perkembangan teknologi menyudutkan kita untuk ikut andil dalam berkontribusi dalam memanfaatkan teknologi. Aplikasi web semakin berjamur dan banyak digunakan untuk memudahkan pekerjaan, sempat terkilas di benak kalian untuk mencoba membuatnya? Mungkin iya atau tidak ya hehe, umumnya jika kalian terjun atau menjalankan pendidikan di dunia IT mau tidak mau pasti bergelut dengan aplikasi berbasis web.
Membuat aplikasi berbasis web mungkin terlalu luas ya, karena yang akan di share dalam artikel ini hanya sebatas membuat Form Login dengan Bootstrap, form login biasa digunakan untuk autentikasi sebelum masuk ke dalam sistem, yang menjadi autentikasi disini adalah username dan password.
Halaman login ini berekstensi (dot) php yang sebetulnya merupakan contoh yang disediakan oleh Bootstrap sendiri, hanya sedikit saya manipulasi dan kalian juga dapat ubah kembali sesuai keinginan kalian. Jika kalian berekspektasi bahwa form login ini memiliki fungsi yang sudah terkoneksi dengan database, sepertinya kalian sangat keliru karena ini merupakan desain halaman login nya saja. Tapi tidak menutup kemungkinan di artikel selanjutnya saya pasti share form login yang sudah berfungsi dan terkoneksi dengan basis data.
Berikut koding program desain halaman form login dengan menggunakan Bootstrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Aplikasi SMK | Log in</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/checkbox_radio_bootstrap.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition" style="background:url(pattern.png) repeat-x #007bff left bottom;align-items:center;flex-direction:column;justify-content:center;">
<div class="content">
<div class="login-box">
<div class="login-logo">
<img src="avatar.png" width="22%"><br />
<b>FORM LOGIN</b>
</div>
<div class="login-box-body">
<p class="login-box-msg">Login untuk memulai sesi</p>
<form action="#" method="post">
<div class="form-group has-feedback">
<input type="text" id="username" class="form-control" placeholder="Username" name="username" required="required">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" id="pass" class="form-control" placeholder="Password" name="password" required="required">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<div class="checkbox checkbox-xs">
<label>
<input type="checkbox" class="cek">
<i class="fa fa-lg icon-checkbox"></i>
Tampilkan Password
</label>
</div></div>
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Log In</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.cek').click(function(){
if($(this).is(':checked')){
$('#pass').attr('type','text');
}else{
$('#pass').attr('type','password');
}
});
});
</script>
</body>
</html>
Saya bantu sedikit dalam menerapkannya, setelah kalian download:
- Ekstrak terlebih dahulu dan kalian akan mendapatkan 4 file, 1 folder, 2 gambar dan 1 file login.
- Saya asumsikan kalian juga sama membuat projekna dengan bantuan aplikasi XAMPP, copy kan kedua file tersebut ke dalam folder htdocs dan buat folder baru sebagai projek kalian di C:\xampp\htdocs\folder_kalian
- Buka browser mau Mozilla Firefox, Google Chrome atau apapun yang kalian suka, ketikan di address bar, localhost/folder_kalian/login.php
Jika ada yang kalian bingungkan yuk kita kupas di kolom komentar, demikian cara membuat form login sederhana dengan Bootstrap, lain waktu kita bahas agar form login tersebut dapat berfungsi ya. Semangat terus belajarnya, salam ngoding.
COMMENTS