Form Login adalah form yang digunakan sebagai pengaman atau penyaring user, apabila di form login user memasukan username dan passwordnya dengan benar maka program akan lanjut ke form berikutnya, tapi apabila di form login user memasukan username dan passwordnya salah akan ada pemberitahuan dari program tersebut.
Sekarang kita akan mulai membuat kode program.
Head
<link rel="stylesheet" href="style.css" /> <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript"> <!-- Javascript code here --> </script>
Body
<div class="lg-container"> <h1>Admin Area</h1> <form action="waka-login.php" id="lg-form" name="lg-form" method="post"> <div> <label for="username">Username:</label> <input type="text" name="username" id="username" placeholder="username"/> </div> <div> <label for="password">Password:</label> <input type="password" name="password" id="password" placeholder="password" /> </div> <div> <button type="submit" id="login">Login</button> </div> </form> <div id="message"></div> </div>
Kode html diatas sederhana sekali, yang paling penting yaitu field text username dan password, serta sebuah div dengan id message yang akan menampung pesan/respon.
$(document).ready(function(){ $("#login").click(function(){ var action = $("#lg-form").attr('action'); var form_data = { username: $("#username").val(), password: $("#password").val(), is_ajax: 1 }; $.ajax({ type: "POST", url: action, data: form_data, success: function(response) { if(response == "success") $("#lg-form").slideUp('slow', function(){ $("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>'); }); else $("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>'); } }); return false; }); });
Jadi logikanya ketika kita melakukan klik pada tombol Login, maka javascript akan mengirim request Ajax ke file waka-login.php untuk mengetahui user dan password yang dimasukan benar atau tidak.
Jika salah maka menampilkan pesan error, jika benar maka akan terjadi slide, dan muncul pesan redirecting…
* Semua itu bisa anda rubah sesuai dengan keperluan anda nantinya.
Setelah struktur html selesai kita saat nya kita percantik halaman ini dengan css
body{ background-image:url(bg.png); font-family: 'Oleo Script', cursive; } .lg-container{ width:275px; margin:100px auto; padding:20px 40px; border:1px solid #f4f4f4; background:rgba(255,255,255,.5); -webkit-border-radius:10px; -moz-border-radius:10px; -webkit-box-shadow: 0 0 2px #aaa; -moz-box-shadow: 0 0 2px #aaa; } .lg-container h1{ font-size:40px; text-align:center; } #lg-form > div { margin:10px 5px; padding:5px 0; } #lg-form label{ display: none; font-size: 20px; line-height: 25px; } #lg-form input[type="text"], #lg-form input[type="password"]{ border:1px solid rgba(51,51,51,.5); -webkit-border-radius:10px; -moz-border-radius:10px; padding: 5px; font-size: 16px; line-height: 20px; width: 100%; font-family: 'Oleo Script', cursive; text-align:center; } #lg-form div:nth-child(3) { text-align:center; } #lg-form button{ font-family: 'Oleo Script', cursive; font-size: 18px; border:1px solid #000; padding:5px 10px; border:1px solid rgba(51,51,51,.5); -webkit-border-radius:10px; -moz-border-radius:10px; -webkit-box-shadow: 2px 1px 1px #aaa; -moz-box-shadow: 2px 1px 1px #aaa; cursor:pointer; } #lg-form button:active{ -webkit-box-shadow: 0px 0px 1px #aaa; -moz-box-shadow: 0px 0px 1px #aaa; } #lg-form button:hover{ background:#f4f4f4; } #message{width:100%;text-align:center} .success { color: green; } .error { color: red; }
Untuk memproses username dan password yang diinput user, kita membutuhkan PHP, berikut code php yang digunakan, disini tidak melakukan pengecekan pada database, karena ini hanya konsep, query yang diperlukan nantinya bisa diletakan di file PHP itu juga.
<?php $is_ajax = $_REQUEST['is_ajax']; if(isset($is_ajax) && $is_ajax) { $username = $_REQUEST['username']; $password = $_REQUEST['password']; if($username == 'demo' && $password == 'demo') { echo "success"; } } ?>
LIVE DEMO DOWNLOAD SOURCE CODE
Username: wakaka
Password: design
Saya berharap kode ini akan berguna dalam proyek PHP Anda. Semoga berhasil!