Membuat form login menggunakan jquery memiliki kelebihan saat login tidak perlu reload halaman. Selain itu kita juga bisa memberikan efek secara live di halaman tersebut, seperti animasi loading dan keterangan login gagal atau berhasil.
Berikut langkah-langkah yang harus dilakukan untuk membuat login menggunakan jquery.
- Buatlah 5(lima) file php berikut menggunakan notepad (notepad++ recommended) dengan nama koneksi.php, index.php, login.php, otentifikasi.php, dan dashboard.php serta buat database dengan nama "login" dan juga download library dari jquery.js
- Buat tabel dengan nama “user” dengan spek seperti berikut
- Kemudian buka file koneksi.php kemudian ketikan script berikut
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "login";
// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>
- Untuk script index.php
<html>
<head>
<meta charset="utf-8"/>
<title>Login Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<?php
include "login.php";
?>
</body>
</html>
- Untuk script login.php
<script>
$(document).ready(function () {
$("#msgbox").hide();
$("#login").click(function()
{
$("#msgbox").show();
$(".form_loading").show();
$("#msgbox").removeClass().addClass('messagebox').text('Loading....').css({"color":"black"}).fadeIn(1000);
$.post("otentifikasi.php",{ pos:$("#state").val(),username:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
{
if(data=='yes')
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('Berhasil Login.....').addClass('messageboxok').css({"color":"green"}).fadeTo(1000,1,
function()
{
$(".form_loading").delay(2000);
$(".form_login").delay(1000).animate({top:'-700px'}).hide(0)
$("#username").val("");
$("#password").val("");
document.location='dashboard.php';
});
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('Gagal Login...').addClass('messageboxerror').css({"color":"red"}).fadeTo(1000,1);
setInterval(3000)
$("#username").val("");
$("#password").val("");
$(".form_loading").delay(3000).fadeOut(100);
}); }
});
return false; //not to post the form physically
});
})
</script>
<div style='border:2px solid #CCC;border-radius:10px;width:400px;margin-left:35%;height:180px'>
<div style='padding-top:35px;padding-left:60px'>
<table width='100%'>
<tr>
<td style='color:black'>
Username
</td>
<td>
<input type="text" id="username" size="25" class='input_text'/>
</td>
</tr>
<tr height='10px'><tr>
<tr>
<td style='color:black'>
Password
</td>
<td>
<input type="password" id="password" size="25" class='input_text'/>
</td>
</tr>
<tr height='10px'><tr>
<tr>
<td align='right' colspan='2'>
<span id='msgbox'></span>
<input type="button" id="login" value="Login" class='input_button' style='margin-right:40px'/>
</td>
</tr>
</table>
</div>
</div>
- Script otentifikasi.php
<?php session_start(); include "koneksi.php"; if($_POST['username']!="" || $_POST['password']!="" ){ $username=htmlspecialchars($_POST['username'],ENT_QUOTES); $password=$_POST['password']; //Cek username dan password $result=mysql_query("SELECT * FROM user WHERE username='".$username."' AND password='".$password."'"); if (mysql_num_rows($result)>0) { $data=mysql_fetch_array($result); echo "yes"; //Session set $_SESSION['akses']=$data['akses']; }else { echo "no"; } } else { echo "no"; }?>
- Script dashboard.php
<?php
session_start();
if ($_SESSION['akses']=='admin') {
echo "Halaman Administrator";
} else {
echo "Halaman Operator";
}
?>
- Kemudian masukan file-file tersebut ke dalam satu folder beri nama “login”, sehingga akan tampil seperti berikut :
Semoga bermanfaat :)
0 comments:
Post a Comment