Minggu depan UTS sudah menanti, banyak pula tugas-tugas kuliah yang harus dikerjakan. Salah satunya ialah citra digital, yang lumayan bikin lelah untuk mencari gambar-gambar sampling-nya. Setelah keliling di beberapa refrensi web yang disajikan google dengan mesin pencarinya, akhirnya saya terdampar juga di website STIKOM Bali. Dan saya baru tau kalau STIKOM Bali sudah mempunyai Sistem Informasi Online (SION) untuk mahasiswanya. Terbesit keinginan untuk melihat apa saja fitur di dalamnya, jadilah saya menghubungi salah seorang teman saya yang kebetulan kuliah di sana untuk menanyakan + meminjam username dan password-nya. Fiturnya lumayan sipz lah, dimana ada fitur untuk melihat tunggakan pembayaran dari mahasiswa, sehingga masalah keuangan benar-benar transaparan. Sungguh berbanding terbalik dengan yang terjadi di kampus saya :(.
Yang cukup mencuri perhatian saya ketika pertama kali mengakses aplikasi SION tersebut adalah halaman login-nya yang menggunakan AJAX. Dimana tidak ada refresh halaman sama sekali ketika terjadinya proses login. Cukup keren juga, dan saya terinsipirasi juga untuk membuatnya. Pada postingan kali ini, saya akan mencoba untuk menjelaskan cara pembuatan login AJAX sederhana dengan jQuery dan PHP.
1. Kita awali dengan membuat form login-nya terlebih dahulu, beserta beberapa layer pendukung-pendukungnya.
<div id="konten"> <div id="hasil"></div> <form id="frmlogin" name="frmlogin" action="login.php" method="post"> <table> <tr><td>Username</td><td>: <input type="text" name="username" id="username" class="input-teks" /></td></tr> <tr><td>Password</td><td>: <input type="text" name="password" id="password" class="input-teks" /></td></tr> <tr><td></td><td><input type="submit" value="Masuk" id="tombollogin" class="input-tombol"/></td></tr> </table> </form> </div>
2. Kita lanjutkan dengan memanfaatkan API dari jQuery untuk melakukan pertukaran data. Sebenarnya konsep login AJAX ini hampir sama dengan tutorial pengecekan email via AJAX yang sudah saya posting beberapa waktu yang lalu. Berikut script hasil oprekan saya 🙂 :
<script>
$(document).ready(function() {
$("#tombollogin").click(function() {
var aksilogin = $("#frmlogin").attr('action');
var datalogin = {
username: $("#username").val(),
password: $("#password").val()
};
$.ajax({
type: "POST",
url: aksilogin,
data: datalogin,
success: function(aksi)
{
if(aksi == '1')
$("#frmlogin").slideUp('slow', function() {
$("#hasil").html("<p class='berhasil' align='center'>Anda Berhasil Login<br>Halaman akan dialihkan dalam 5 detik...<meta http-equiv='refresh' content='5; url=http://gedelumbung.com'></p>");
});
else
$("#frmlogin").slideUp('slow', function() {
$("#hasil").html("<p class='gagal' align='center'>Username atau Password salah...!!! <br> <a onClick=buka(); style='cursor:pointer;'>Ulangi Lagi<a></p>");
});
document.frmlogin.username.value = "";
document.frmlogin.password.value = "";
}
});
return false;
});
});
function buka()
{
$('#frmlogin').slideDown();
}
</script>
3. Yang terakhir, kita akan membuat sebuah file php yang berfungsi untuk proses validasi ketika user memasukkan username dan password. Berhubung saya lagi malas untuk berhubungan dengan database :D, maka saya buatkan username dan password yang statis.
<?php
$username = $_POST['username'];
$password = $_POST['password'];
if($username == 'lumbung' && $password == 'lumbung')
{
echo "1";
}
else
{
echo "0";
}
?>
4. Jika masih ada yang bingung dengan bagaimana caranya untuk melakukan validasi dengan data yang terdapat di dalam database, berikut saya berikan contohnya :
<?php
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$cek = mysql_query("SELECT * FROM member WHERE username='$username' and password='$password'");
if(mysql_num_rows($cek)==1)
{
echo 1;
}
else
{
echo 0;
}
?>
Sederhana dan mudah kan cara pembuatannya. Kalau yang ingin mencoba dan men-download hasil akhirnya, di bawah postingan ini sudah saya sediakan link-nya. OK deh, semoga sedikit tutorial sederhana ini bisa bermanfaat untuk rekan-rekan.
Happy Blogging and Keep Coding
Cheerrrss….!!!!
[to_like]
[/to_like]
gan,kok dia g mau ngedirect ke halaman yang udah ada di script ya???
padahal loginnya sudah sukses….
mas klo boleh usul, coba mas sekali-kali bikin tutorial / modu yg isinya membahas tentang membuat web berbasis CI dr mulai disain database sampai ke coding webnya sampai selesai…
aku selalu baca update tutorial yg mas posting. aku justru bingung gmn cara nyatuin jd satu web..maklum masih awam buuuanget….
itu aja mas usulanya tolong di pertimbangkan ya…..hehehe ( ngarep.com)
usulnya bagus sekali mas, nanti saya usahakan untuk mencari studi kasus yg pas dlu, website apa yg kira-kira akan dibuat step by step-nya…
sekarang masih ada kesibukan jg :D, jadinya yaw terpaksa posting yang ringan-ringan dulu…
wah kang kalo bisa lebih detail donk 😀
misal script nya disimpan dengan nama dan file apa gitu
salam dari nubi 🙂
ada usulan dikit nih… gimana kalau semua postingan yang udah dibuat, dijadikan sebuah buku, melihat materinya kayanya sangat layak dijadikan buku. boleh dong sekali-kali open source mania dapat duit hasil keringatnya….
om gede lumbung
ane minta tolong dong
ituh kan di function success kita parsing 1 variable
kalo ane mau 2 variable gmna om..?
thanks om
dibuat jadi array bang,
ntar tinggal di explode satu persatu
udah ane coba bang
ga bisa
hahahaa
misal ginih
ni datanya
echo $status = (array(
“st” => 0,
“msg” => “succses”
));
ni function successnya
success: function(status){
if (status.st == 0){
alert(status.msg);
}
}
Gimana ya… masih bingung… coba dibikin video tutorialnya..
mojmoj.tk
permasalahan:
$(“#hasil”).html(“Anda Berhasil LoginHalaman akan dialihkan dalam 5 detik…”);
Mas, ID hasil dari mana yaa?
sedangkan dari view yang mas postingkan ga ada id hasil
sya tunggu jawabannya, terimakasih
Zaenal
setelah baris
tambahkan dengan
makasi atas koreksinya
di source yg bisa di download sudah ada lengkap, yang di postingan ini saya kelupaan menambahkannya
Terimakasih, sudah saya tambahkan
itu bisa pake tag juga
Semoga semakin sukses ya 🙂
Klau implementasi sessionnya gmana nambahinnya mas?