Our Blog

Untuk melakukan proses login, kita dapat juga memanfaatkan AJAX untuk mengirimkan variabel yang dimasukkan user dan melakukan proses pengecekan dengan PHP. Langsung saja, kita buat dulu fungsi AJAXnya di halaman login.

function Authorize(){

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e){
// Something went wrong
alert(“Your browser cannot support AJAX!”);
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
/* use this if you want to get rid animation faster */
/*
var ajaxDisplay1 = document.getElementById(‘Middle’);
if (ajaxDisplay1.style.display == ‘block’) {
ajaxDisplay1.style.display = ‘none’;
}
*/
/* use this if you want to fade the animation */
setTimeout(function() {
$(‘#Middle’).fadeOut(‘slow’);
}, 1000);

var ajaxDisplay = document.getElementById(‘Result’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}

window.location.href = ajaxRequest.responseText;

setTimeout(function() {
$(‘#Result’).fadeOut(‘slow’);
}, 3000);

}
else
{
var ajaxDisplay = document.getElementById(‘Middle’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = “<img src=images/loading_bar.gif>”;
}
}

//gathers all the variables
var userid = document.getElementById(‘userid’).value;
var username = document.getElementById(‘username’).value;
var password = document.getElementById(‘password’).value;

var queryString = “?userid=” + userid + “&username=” + username + “&password=” + password;

ajaxRequest.open(“GET”, “login_process.php” + queryString, true);
ajaxRequest.send(null);
}

Ada dua point penting yang akan kita pelajari disini.

Yang pertama adalah meletakkan loading image pada posisi tertentu di halaman web, pada saat fungsi AJAX dieksekusi. Loading image yang biasanya berbentuk gif animator, akan ditampilkan selama fungsi AJAX masih dieksekusi. Biasanya kita meletakkan loading image ini pada bagian yang sama dengan output AJAX. Namun kita bisa meletakkannya pada bagian yang lain.
Pada contoh diatas, loading image diletakkan pada bagian Middle, maka kita perlu sisipkan kode HTML berikut:

<div id=”Middle” style=”position: absolute; left: 500px; top: 230px; width: 235px; padding: 15px; display: none;”>
</div>

Yang kedua, adalah meredirect web ke halaman user saat otorisasi berhasil. Beberapa teman mengatakan adalah tidak mungkin / sulit melakukan proses redirect dengan AJAX. Ternyata hal tersebut dapat dilakukan dengan cukup mudah. Yaitu cukup dengan menyisipkan perintah berikut:

window.location.href = ajaxRequest.responseText;

dimana yang kita kirim dari PHP adalah URL, sesaat setelah proses otorisasi berhasil, sebagaimana contoh berikut:

<?php
if($login->do_login($_GET[‘userid’],$_GET[‘username’],$_GET[‘password’]))
{
echo “main.php”;
}
else
{
echo “login.php”;
}
?>

Semoga bermanfaat.

By: Wahyu Kurniawan