Membuat form login menggunakan bootstrap dan jquery
Jika kita mengunjungi sebuah website maka hal pertama yang dapat kita lihat adalah tampilan website, tampilan yang menarik tentunya akan membuat pengunjung merasakan kenyamanan dalam melakukan surfing. Bagi para web developer, BOOTSTRAP bukanlah hal yang asing, framework front-end ini mudah untuk digunakan dan tentunya akan mempercantik halaman website. Kali ini kita akan belajar membuat form login sederhana menggunakan bootstrap+jquery.
Berikut ini langkah-langkahnya.
1. Buatlah sebuah folder dengan nama "login" dan simpan dalam folder "htdocs".
2. Buka notepad dan copy paste kode dibawah ini.
<html>
<head>
<title>LOGIN</title>
</head>
<body>
</body>
</html>
Simpan file dengan nama "index.php" dan letakkan pada folder "login".
3. Kunjungi halaman situs bootstrapcdn dan arahkan kursor anda pada "complete css", klik tanda panah untuk expand halaman. Copy link HTML.
buka file "index.php" pada folder "login" lalu sisipkan HTML code pada diantara <head> dan </head>
4. Kunjungi halaman situs jquery dan klik "uncompressed". Copy link HTML.
buka file "index.php" pada folder "login" lalu sisipkan HTML code diatas </body>
5. Sekarang file "index.php" anda sudah terhubung dengan bootstrap dan jquery secara online, langkah berikutnya
adalah membuat tampilan login menggunakan library bootstrap.
Kunjungi situs ini tutorial bootstrap
buka file "index.php" dan copy paste kan kode dibawah ini.
<html>
<head>
<title>LOGIN</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row m-5">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4 class="text-center">Login</h4>
</div>
<div class="card-body">
<div id="pesan"></div>
<form method="post">
<div class="form-group mt-5">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password" placeholder="Password" required>
</div>
<div class="text-center mt-5">
<p id="submit" class="btn btn-md btn-primary">Login</p>
</div>
</form>
</div>
<div class="card-footer">
<p class="text-center text-muted">@2020 myfirstweb</p>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#pesan').html("");
$('#submit').click(function(){
var username=$('#username').val();
password=$('#password').val();
if(username!=="" && password!==""){
if(username==="admin" && password==="1234"){
$('#pesan').html('<div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Success!</strong> Login berhasil</div>');
}
else{
$('#pesan').html('<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>Warning!</strong> Login gagal</div>');
}
}
else{
$('#pesan').html('<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>Warning!</strong> Username dan password tidak boleh kosong</div>');
}
});
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 4000);
});
</script>
</body>
</html>
6. Buka browser anda dan ketikkan pada kolom address "http://localhost/login". Cobalah untuk login dengan username=admin dan password=1234.
Demikianlah cara membuat form login menggunakan bootstrap dan jquery. Selamat mencoba,,, :)
Comments
Post a Comment