Berbagai macam cara digunakan untuk masuk ke halaman yang memerlukan autentikasi. Kali ini sedikit contoh sederhana untuk melakkukan login dengan PHP menggunakan jQuery sebagai fasilitas login menggunakan MySQL sebagai tempat menyimpan informasi login.
Pertama-tama harus membuat file koneksi ke MySQL :
<?php
$hostname = 'localhost'; // Hostname
$dbname = 'database'; // Nama Database
$username = 'username'; // Username Database
$password = 'db_password'; // Database password
// Koneksi ke databse
$koneksi = mysqli_connect($hostname, $username, $password, $dbname) or DIE('Koneksi ke server gagal !');
?>CREATE TABLE IF NOT EXISTS `user_login` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`email` varchar(50) NOT NULL,
`password` varchar(25) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;Untuk ujicoba isi tabel tersebut dengan data, misalkan :
INSERT INTO `user_login`(`email`, `password`) VALUES ('antefer2284@gmail.com','123456789')Selanjutnya diperlukan javascript yang menggunakan jQuery library untuk elakukan proses login. simpan menggunakan nama init.js :
// Animasi loading
img1 = new Image(16, 16);
img1.src="images/spinner.gif";
img2 = new Image(220, 19);
img2.src="images/ajax-loader.gif";
// Ketika DOM telah siap
$(document).ready(function(){
// Munculkan modal box ketika "LOGIN" di klik
$("#login_link").click(function(){
$('#login_form').modal();
});
// Ketika melakukan login
$("#status > form").submit(function(){
// Sembuyikan tombol "Login"
$('#submit').hide();
// Tampilkan animasi loading
$('#ajax_loading').show();
// 'this' mengacu pada form login
var str = $(this).serialize();
// -- Memulai AJAX Call --
$.ajax({
type: "POST",
url: "do-login.php", // kirim login info ke halaman do-login.php
data: str,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
// Tampilkan tombol 'Submit'
$('#submit').show();
// Sembunyikan animasi loading
$('#ajax_loading').hide();
if(msg == 'OK') // LOGIN OK?
{
var login_response = '<div id="logged_in">' +
'<div style="width: 350px; float: left; margin-left: 70px;">' +
'<div style="width: 40px; float: left;">' +
'<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
'</div>' +
'<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+
"Selamat anda berhasil masuk! <br /> Silahkan tunggu untuk masuk ke member area...</div></div>";
$('a.modalCloseImg').hide();
$('#simplemodal-container').css("width","500px");
$('#simplemodal-container').css("height","120px");
$(this).html(login_response); // Refers to 'status'
// Setelah 3 detik redirect ke halaman member area
setTimeout('go_to_private_page()', 3000);
}
else // ERROR?
{
var login_response = msg;
$('#login_response').html(login_response);
}
});
}
});
// -- Akhir AJAX Call --
return false;
});
});
function go_to_private_page()
{
window.location = 'berhasil.php'; // Members Area
}
kemudian untuk proses login dibuat file PHP dan disimpan dalam bentuk do-login.php :
<?php
$config = array();
// memunculkan semua eror kecuali notifikasi
error_reporting(E_ALL ^ E_NOTICE);
// Start session
session_id();
session_start();
header('Cache-control: private'); // IE 6 FIX
include('config.inc');
$email = mysqli_real_escape_string($koneksi, $_POST['email']);
$pass = mysqli_real_escape_string($koneksi, $_POST['password']);
$login = mysqli_query($koneksi,"select email, password from user_login where (email like '" . $email . "') and (password like '" . $pass . "')");
// ambil data dari database informasi tentang user
while ($row = mysqli_fetch_object($login)) {
$tipe = $row->tipe;
$config['email'] = $row->email;
$config['password'] = $row->password;
}
$_SESSION['tipe'] = $tipe;
if($_POST['action'] == 'user_login')
{
$post_email = mysqli_real_escape_string($koneksi, $_POST['email']);
$post_password = mysqli_real_escape_string($koneksi, $_POST['password']);
// cek username dan password
if($post_email == $config['email'] && $post_password == $config['password'])
{
// Jika tidak ada eror? register session dan arahkan user ke halaman pribadi mereka
$_SESSION['username'] = $username;
echo 'OK';
}
else
{
$auth_error = '<div id="notification_error">Maaf informasi login yang diberkan salah !!!.</div>';
echo $auth_error;
}
}
?>
Buat contoh halaman yang akan dituju jika autentikasi berhasil dan untuk contoh ini diberi nama berhasil.php :
<?php
// Inialize session
session_start();
// cek jika username belum ada di session maka lompat ke halaman utama
if (!isset($_SESSION['username'])) {
header('Location: index.php');
}else{
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Member Area</title>
<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />
</head>
<body>
Ini adalah halaman jika berhasil melakukan autentikasi<br />
<span style='font-size: 15px;'><a href='logout.php'>KELUAR</a></span>
</body>
</html>
<?php
}
?>
Untuk melakukan proses Logout dari halaman hasil autentikasi dibuat sebuah file logout.php :
<?php
// Inialize session
session_start();
if(isSet($_SESSION['username']))
{
unset($_SESSION['username']);
header("Location: index.php");
exit;
}else{
header('Location: index.php');
}
?>
Yang terakhir adalah halaman utama jika belum melakukan autentikasi disimpan ke index.php :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Contoh sederhana proses login menggunakan PHP, AJAX, dan MySQL</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.simplemodal.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>
<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />
</head>
<body>
Contoh Login menggunakan PHP, Ajax, dan MySQL<br />
<span style="font-size: 15px;"><a id="login_link" href="#">LOGIN</a></span>
<div id="login_form" style='display:none'>
<div id="status" align="left">
<center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1>
<div id="login_response"><!-- spanner --></div> </center>
<form id="login" action="javascript:alert('success!');">
<input type="hidden" name="action" value="user_login">
<input type="hidden" name="module" value="login">
<label>Username</label><input type="text" name="email"><br />
<label>Password</label><input type="password" name="password"><br />
<label> </label><input value="Login" name="Login" id="submit" class="big" type="submit" />
<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif"> Proses...
</div>
</form>
</div>
</div>
</body>
</html>
Untuk Demo dan file-file pelengkap seperti stylesheet.css, jquery.simplemodal.js, beserta file gambar dapat didownload di bawah ini : Demikian sedikit contoh mengenail Login serderhana dengan PHP, jQuery dan MySQL dan tentunya dapat dilakukan berbagai modifikasi sesuai kebutuhan.
