Form Login dengan Otentikasi User mengguanakan AJAX

819

Masih menggunakan teknik SESSION PHP, pada projek kali ini melibatkan AJAX (Asynchronouse JavaScript & XML), pake nama panjang takut disangka AJAX FC 🙂 … yang akan melakukan otentikasi user (user authentication) ke back-end. AJAX akan membawa parameter username dan password yang di-inputkan user melalui form login.

Back-End disini berupa skrip PHP yang akan mengecek user yang sedang login.  Jika berhasil, username dan password akan disimpan dalam variabel SESSION agar bisa di-cek atau dipakai di halaman admin serta akan memberikan respon string atau text ‘0000’.

Agar perkerjaan lebih simple kita gunakan kembali kebaikan jQuery dengan The Write Less, Do More-nya … eta asa ku keukeuh 🙂 bahasa belanda :Red

Baca juga postingan terkait sebelumnya:
–    Membuat Form Login Untuk Membatasi Hak Akses Dengan Session PHP
–    Cara Mudah Membuat Modal window dan Mask sederhana dengan jQuery

Sekilas gambaran dari contoh projek:

user-auth

Potongan skrip:

<?php

session_start();

//Jika Session masih ada, halaman akan di redirect ke halaman admin.php

if(isset($_SESSION[‘user’]) && isset($_SESSION[‘pwd’])){

header(“Location: admin.php”);
exit();

}

?>

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>User Authentication</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”jquery-1.8.2.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function() {

$(‘#login’).click(function(){

var username =$(‘#username’).val();
var password =$(‘#password’).val();
if(username==”){

alert(‘Masukan username!’);
return false;

}else if(password==”){

alert(‘Masukan password!’);
return false;

}

showMask();
$.ajax({

type: ‘POST’,
url:’svr-login.php’,
data: { user:username, pwd:password },
success: function(response) {

//untuk aplikasi -> ganti nilai delay mejadi 0

var delay=2000;

$(‘.modal’).delay(delay).slideUp(400,function(){

$(‘#mask’).fadeOut(500, function(){

//jika login sukses, halaman akan di redirect ke halaman admin

if( response ==’0000′ ){

self.location =’admin.php’;

}else{

alert(response);

}

});

});

}

});

return false;

//Mask digunakan ketika proses autentikasi sedang berlangsung

function showMask(){

$(“<div id=’mask’ class=’close’></div>”).appendTo(‘body’);
$(‘body’).append(“<div id=’modal’ class=’modal’>Sedang di proses. Silahkan tunggu beberapa saat…</div>”);

$(‘#mask’).css({ ‘display’ : ‘block’, opacity : 0});
$(‘#mask’).fadeTo(500,0.8);

var window_width = $(window).width();
var window_height = $(window).height();
var height = $(‘#modal’).outerHeight();
var width = $(‘#modal’).outerWidth();
var top = (window_height-height)/2;
var left = (window_width-width)/2;

$(‘#modal’).css({‘top’ : ‘2%’,’left’ : left});
$(‘#modal’).fadeIn(500);

}

});

});
</script>

</head>

<body>
<h3>Form Login dengan Otentikasi user menggunakan AJAX</h3>
<div>
<form action=”#” method=”post” name=”fLogin”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Username</td>
<td><input type=”text” name=”username” id=”username”></td>
</tr>
<tr>
<td>Password</td>
<td><input type=”password” name=”password” id=”password”></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” name=”login” id=”login” value=”Login”></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Skrip selengkapnya dapat ada download disini.

–SELAMAT MENCOBA–