Tutorial jQuery : Membuat Login Via AJAX Dengan jQuery dan PHP

1. Kita awali dengan membuat form login-nya terlebih dahulu, beserta beberapa layer pendukung-pendukungnya.

<div id="konten">
<form id="frmlogin" action="login.php" method="post">
<table>
<tbody>
<tr>
<td>Username</td>
<td>: <input id="username" class="input-teks" name="username" type="text" /></td>
</tr>
<tr>
<td>Password</td>
<td>: <input id="password" class="input-teks" name="password" type="text" /></td>
</tr>
<tr>
<td></td>
<td><input id="tombollogin" class="input-tombol" type="submit" value="Masuk" /></td>
</tr>
</tbody>
</table>
</form></div>

2. Kita lanjutkan dengan memanfaatkan API dari jQuery untuk melakukan pertukaran data. Sebenarnya konsep login AJAX ini hampir sama dengan tutorial pengecekan email via AJAX yang sudah saya posting beberapa waktu yang lalu. Berikut script hasil oprekan saya :

<script>
$(document).ready(function() {
	$("#tombollogin").click(function() {

		var aksilogin = $("#frmlogin").attr('action');
		var datalogin = {
			username: $("#username").val(),
			password: $("#password").val()
		};

		$.ajax({
			type: "POST",
			url: aksilogin,
			data: datalogin,
			success: function(aksi)
			{
				if(aksi == '1')
					$("#frmlogin").slideUp('slow', function() {
						$("#hasil").html("<p class='berhasil' align='center'>Anda Berhasil Login<br>Halaman akan dialihkan dalam 5 detik...<meta http-equiv='refresh' content='5; url=http://gedelumbung.com'></p>");
					});
				else
					$("#frmlogin").slideUp('slow', function() {
						$("#hasil").html("<p class='gagal' align='center'>Username atau Password salah...!!! <br> <a onClick=buka(); style='cursor:pointer;'>Ulangi Lagi<a></p>");
					});
				document.frmlogin.username.value = "";
				document.frmlogin.password.value = "";
			}
		});
		return false;
	});

});
function buka()
{
	$('#frmlogin').slideDown();
}
</script>

3. Yang terakhir, kita akan membuat sebuah file php yang berfungsi untuk proses validasi ketika user memasukkan username dan password. Berhubung saya lagi malas untuk berhubungan dengan database , maka saya buatkan username dan password yang statis.

<?php
		$username = $_POST['username'];
		$password = $_POST['password'];
		if($username == 'lumbung' && $password == 'lumbung')
		{
			echo "1";
		}
		else
		{
			echo "0";
		}

?>

4. Jika masih ada yang bingung dengan bagaimana caranya untuk melakukan validasi dengan data yang terdapat di dalam database, berikut saya berikan contohnya :

<?php
		$username = mysql_real_escape_string($_POST['username']);
		$password = mysql_real_escape_string($_POST['password']);
		$cek = mysql_query("SELECT * FROM member WHERE username='$username' and password='$password'");
		if(mysql_num_rows($cek)==1)
		{
			echo 1;
		}
		else
		{
			echo 0;
		}
?>

Sederhana dan mudah kan cara pembuatannya. Kalau yang ingin mencoba dan men-download hasil akhirnya, di bawah postingan ini sudah saya sediakan link-nya. OK deh, semoga sedikit tutorial sederhana ini bisa bermanfaat untuk rekan-rekan.
Happy Blogging and Keep Coding