Membuat Login berbasis Ajax dengan jQuery dan PHP MySQL
Langkah pertama kita buat database beserta table nya, berikut ini kodenya :
CREATE DATABASE test;
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(20) NOT NULL,
password varchar(32) NOT NULL,
PRIMARY KEY (id)
);
INSERT INTO user (id,username,password)
VALUES (NULL,'admin',MD5('admin'));
Selanjutnya kita buat file yang berisi form login, kita beri nama “index.php”, berikut kodenya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Login dengan jQuery dan PHP MySQL</title>
<script type="text/javascript" src="js/jquery.min.js"></script> <!-- load library jquery -->
<script type="text/javascript" src="js/jquery.form.js"></script> <!-- load jquery form plugin -->
<script type="text/javascript">
$(document).ready(function() {
$('#ajax-status').hide();
$('#message').hide();
$('#form-login').ajaxForm({
target: '#message',
success: function() {
$('#message').show();
}
});
});
$(function(){
$('#ajax-status').ajaxStart(function(){
$('#message').hide();
$(this).fadeIn('fast');
$(this).html('processing...');
});
$('#ajax-status').ajaxSuccess(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ajax-status"></div>
<div id="message"></div>
<form id="form-login" action="login.php" method="post">
<p>Username : <input type="text" name="username" id="username" /></p>
<p>Password : <input type="password" name="password" id="password" /></p>
<p><input type="submit" name="submit" id="submit" value="Login" /></p>
</form>
</body>
</html>
Dan berikut ini file “login.php” nya :
<?php
mysql_connect("localhost", "root", ""); //konek ke server mysql
mysql_select_db("test"); //konek ke databasenya
if(isset($_POST['submit'])){
$username = $_POST['username'];
$password = md5($_POST['password']);
//pengecekan username
$cek_username = mysql_query("SELECT * FROM user WHERE username = '$username'");
//jika username tidak ditemukan
if(mysql_num_rows($cek_username) == 0){
echo "Maaf, username yang Anda masukan tidak terdaftar!";
}
//jika username ditemukan
else {
//pengecekan password
$cek_password = mysql_query("SELECT * FROM user WHERE username = '$username' AND password = '$password'");
//jika password dan username berbeda
if(mysql_num_rows($cek_password) == 0){
echo "Maaf, password yang Anda masukan tidak sesuai!";
}
//jika password dan username sesuai
else {
echo "Anda berhasil login!";
//tambahkan variable session dan aksi lainnya disini
echo "<script>setTimeout(function(){ window.location = 'index.php'; }, 2000);</script>"; //redirect dalam 2 detik
}
}
}
?>
Selesai, untuk tampilan silahkan modifikasi sendiri ya.
Proses login ini masih sangat sederhana, demi keamanan disarankan untuk memodifikasinya kembali.
Hasilnya bisa dilihat di sini http://www.sandy.web.id/demo/ajax-login/
Klik di sini untuk download full script nya.
Jika menemukan kesulitan, jangan sungkan untuk bertanya 
20 Comments
yan
saya tambahkan :
$_SESSION['user_hrd'] =$data[user_hrd];
header(“location:hrd/index.php”);
gagal login “Warning: Cannot modify header information – headers already sent by (output started”
kenapa ya
sandy
itu karena fungsi header, coba redirect nya pake javascript :
window.location='hrd/index.php';yan
ada solusi lain engga ?
sandy
error itu dikarenakan fungsi header, sebelum fungsi header ga boleh ada output lain (echo).
solusinya coba tambah ini di paling atas:
<?php ob_start(); ?>
dan ini di paling bawah
<?php ob_flush(); ?>
yan
sya sudah coba bisa, tapi halaman yang utama tidak muncul malah muncul isinya sajah itu juga hasilnya di dalam form login.
sandy
ya maka dari itu saya sarankan redirect pake javascript tadi, atau pake script seperti ini :
<meta http-equiv="refresh" content="0;url=hrd/index.php">karena output nya itu masuk ke form, jadi kalo redirect pake header itu pasti halaman yang dituju keluarnya di form tadi.
yan
hasil nya none bro tetap ada di form loginnya , sebelum pake header saya juga pake itu
sandy
yang javascript udah dicoba? coba deh, saya selalu pake javascript untuk redirect dan ga pernah gagal.
yan
script lengkapnya gmna ?
sebenrnya udh berhasil, cuma hasil pagenya muncul di bawah form login yang disembunyikan oleh ajax, jadi engga muncul page utamanya.,
sandy
script lengkapnya gini :
<script>window.location='hrd/index.php';</script>kumant
Ini webnya pak sandy dosen perancangan web ya hahaha ???
yan
Masih gagal Bro,
pake : window.location=’hrd/index.php’;
sandy
coba pake ini bro
echo "<script>setTimeout(function(){ window.location = 'hrd/index.php'; }, 2000);</script>"; //redirect dalam 2 detik
udah di tes di halaman demo disini
Roes Wibowo
Salam kenal.. Blognya cukup menarik..
yan
mantap , thank you bro, !
sandy
sama2 bro..
sandy
@Roes Wibowo : Salam kenal juga…
Fery Ardiant
nice share bro,,
sukses.
arbalest
setelah code “//tambahkan variable session dan aksi lainnya disini”
kok jadi error ya :
Warning: session_register() [function.session-register]: Cannot send session cache limiter – headers already sent
arbalest
maksudnya setelah ditambahkan variable session, jd error..
Leave a Comment