Cara membuat script login dengan Jquery ajax dan php

Sambil mengerjakan script - script PHP, berikut kami coba sempatkan menulis tutorial Cara membuat script login dengan menggunakan JQUERY AJAX. Penggunaan AJAX tanpa bantuan JQUERY akan membuat kita harus mengetik banyak kode Javascript sehingga tentunya akan menyulitkan juga terutama untuk para pemula, dengan pemanfaat JQUERY, kode Javascript yang harus kita ketikkan menjadi lebih ringkas, dan itulah tentunya keuntungan kita menggunakan Javascript Framework JQUERY

 

Langkah - langkah yang dilakukan untuk membuat script login dengan JQUERY AJAX adalah sebagai berikut :

1. Menyiapkan JQUERY

Untuk menggunakan fungsi AJAX pada JQUERY, terlebih dahulu kita harus menyiapkan JQUERY dengan cara mendownloadnya kemudian kita simpan dalam komputer kita bersebelahan dengan script - script tutorial kita supaya tutorial ini dapat dijalankan pada komputer lokal meskipun tidak terkoneksi ke internet. Pada contoh script dibawah sudah kami siapkan Jquery lengkap dengan contoh project tutorial kita kali ini


2. Membuat form login » index.php

Script ini akan digunakan sebagai sarana untuk memasukkan username dan password ketika hendak login, berikut contoh script index.php sebagai halaman login

<html>
	<head>
		<title>Login dengan Jquery AJAX</title>
		<style type="text/css">
			#login{
				font:bold 16px Tahoma,Verdana;
				display:block;
				border:#7596c0 1px solid;
				width:400px;
				height:280px;
				margin-left:auto;
				margin-right:auto;
				border-radius:5px;
				background-color:#98c1f3;
				box-shadow: 5px 5px 5px rgb(150, 149, 149); 
				visibility:visible;
				color:#e9ecf0;
			}
			h3{
				font:bold 20px Tahoma,Verdana;
				margin:0 0 0 0;
				padding:0 0 0 0;
				color:#2572d2;
				text-align:center;
				line-height:50px;
				border-bottom:#ffffff 1px solid;
			}
			#inner{
				margin:0 20px 0 20px;
			}
			input.txt{
				font:normal 14px Tahoma,Verdana;
				padding:10px;
				margin:5px 0 5px 0;
				width:100td_persen;
				background-color:#dee9f6;
			}
			input.btn{
				font:bold 14px Tahoma,Verdana;
				padding:10px;
				margin:5px 0 10px 0;
				width:100td_persen;
				text-align:center;
			}
		</style>
		<script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
		<script type="text/javascript" src="login.js">//memanggil script ajax</script>
	</head>
	<body>
		<div id="login">
			<h3>LOGIN ADMINISTRATOR</h3>
			<div id="inner">
				 
				<input type="text" class="txt" placeholder="Username anda" id="txt_username"/>
				 
				<input type="password" class="txt" placeholder="Password anda" id="txt_password"/>
				<input type="button" class="btn" name="btn" id="btnLogin" onclick="check_login();" value="Login"/>
			</div>
		</div>
	</body>
</html>

3. Membuat script AJAX » login.js

Script ini merupakan script Jvascript AJAX yang akan menggunakan fungsi AJAX pada JQUERY dengan susunan script sebagai berikut :

function check_login()
{
	//Mengambil value dari input username & Password
	var username = $('#txt_username').val();
	var password = $('#txt_password').val();
	//Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda
	var url_login	 = 'http://localhost/tutorial/login.php';
	var url_admin	 = 'http://localhost/tutorial/admin.php';
	
	//Ubah tulisan pada button saat click login
	$('#btnLogin').attr('value','Silahkan tunggu ...');
	
	//Gunakan jquery AJAX
	$.ajax({
		url		: url_login,
		//mengirimkan username dan password ke script login.php
		data	: 'var_usn='+username+'&var_pwd='+password, 
		//Method pengiriman
		type	: 'POST',
		//Data yang akan diambil dari script pemroses
		dataType: 'html',
		//Respon jika data berhasil dikirim
		success	: function(pesan){
			if(pesan=='ok'){
				//Arahkan ke halaman admin jika script pemroses mencetak kata ok
				window.location = url_admin;
			}
			else{
				//Cetak peringatan untuk username & password salah
				alert(pesan);
				$('#btnLogin').attr('value','Coba lagi ...');
			}
		},
	});
}

Dengan penjelasan - penjelasasn seperti pada contoh diatas, kami berharap pembaca sekalian dapat memahami maksud dari masing - masing line script yang kita gunakan

4. Membuat script pemrosesan » login.php

Script login.php merupakan script php sederhana yang kami gunakan untuk melakukan pengecekan kebenaran username dan password pada database, jika username dan password benar, maka script dibawah akan mencetak kata "ok", sedangkan jika username dan password salah maka akan dicetak kata "Username atau Password Salah !"

<?php
session_start();
//koneksi ke database
$conn = mysql_connect('localhost','root','kutukupret');
$db	  = mysql_select_db('tutorial',$conn);
if(isset($_POST['var_usn']) AND isset($_POST['var_pwd'])){
	$username = addslashes($_POST['var_usn']);
	$password = addslashes($_POST['var_pwd']);
	$check    = mysql_query('select * from admin where Usn="'.$username.'" AND Pwd="'.$password.'" ');
	if(mysql_num_rows($check)==0){
		echo 'Username atau Password Salah !';
	}
	else{
		$_SESSION['login']['usn'] = $username;
		$_SESSION['login']['pwd'] = $password;
		echo 'ok';
	}
}
?>

Pesan login diatas selanjutnya yang akan diambil oleh script login.js, dimana kalo script diatas mencetak kata "ok", maka user akan langsung diarahkan ke halaman berikutnya, sebaliknya jika script diatas mencetak pesan kesalahan, maka script login.js akan memberikan javascript alert sebagai tanda peringatan kesalahan username dan password

5. Membuat script halaman admin » admin.php

<?php
session_start();
if(isset($_GET['logout']) AND $_GET['logout']=='1'){
	unset($_SESSION['login']);
	session_destroy();
}
if(!isset($_SESSION['login'])){
	header('location: index.php');
}
else{
	echo '<h3>SELAMAT DATANG : '.$_SESSION['login']['usn'].'</h3>';
	echo 'Halaman ini kita asumsikan sebagai halaman Administrator, dimana halaman ini hanya bisa diakses ketika Admin sudah login';
	echo '<br/><a href="?logout=1">LOGOUT</a>';
}
?>

Script diatas kita asumsikan sebagai halaman administrator yang mengharuskan user untuk login terebih dahulu ketika hendak mengakses halaman ini

Untuk mencoba script - script diatas tanpa adanya perubahan direktory, sebaiknya kita tempatkan script - script diatas pada folder dengn nama tutorial pada direktory web server komputer anda.

Download script login dengan JQUERY Ajax

Sekian dulu tutorial kali ini, semoga tulisan kami dapat bermanfaat sebagai sarana belajar anda, Terimakasih dan Salam kreatif


Komentar pembaca

adhityathanks kk, masih newbie :D ada sedikit kendala ni kk, gmna bikin halaman login tersebut, bisa dipake dismua halaman. trus logout nya ga ilang" di halaman tersebut, hehe klo banyak tanya maaf ya, soalnya masih newbie. :) terimakasihposting pada :2013-06-05 19:11:31
AdminAditya, Pada dasarnya session akan berlaku selama script masih berada dalam satu server yang sama. Ketika proses login sudah sukses dan sudah dibuat session loginnya, kita hanya cukup melakukan pengecekan keberadaan session tersebut pada script yang lainnya. Contoh:
if(isset($_SESSION['login'])){
	echo '<a href="ke_script_logout.php">Logout</a>
		  <a href="profile_member.php">Profile</a>
		  <a href="#">Ganti password</a>';
}
Pasang script diatas pada setiap script yang akan melakukan pengecekan session login. jangan lupa untuk menjalankan fungsi session_start() pada bagian atas script jika script yang digunakan berdiri sendiri.
Selamat mencoba
posting pada :2013-06-05 20:25:45
Denmas YonoSaya mau nanya bang admin pada baris : window.location = url_admin; window.location = url_admin, berarti url admin kita bisa dilihat orang yach ? biar bs kita sembunyikan url_admin caranya gimana? soalnya ak liat hampir semua tutorial semacam ini juga url_admin nya ditaro dijavascript. Terimakasih bang....saya tunggu jawabannya.posting pada :2013-07-01 11:11:38
AdminSdr Yono, Pada dasarnya kita tidak perlu kuatir dengan masalah url_admin selama kita bisa melakukan filter dan security pada inputnya. Kalo mau menyembunyikan url tersebut, script tersebut kita arahkan pada script tertentu. Kemudian dari script tersebut dilakukan pemrosesan dengan cara redirecting atau cara lainnya untuk masuk ke halaman admin, dimana url halaman adminnya dituliskan dalam script php dan akan dijadikan respon terhadap ajax. Contoh, ketika login sukses, script php akan memberikan jawaban yang berisi alamat url Admin.posting pada :2013-07-01 17:29:51
Suryamaaf kak saya masih newbie,, cara ngubah username ama pass dimana ya??posting pada :2013-07-24 20:05:17
AdminSdr Surya, Contoh diatas bisa dicoba dengan username admin1 dan paswordnya admin1, atau bisa juga dengan username admin2 dan passwordnya admin2 . Adapun cara untuk merubah username dan passwordnya bisa langsung diedit pada tabel admin jika file admin.sql sudah di import kedalam database anda.posting pada :2013-07-25 10:50:47
ariefkok saya gak ngerti ya kak..posting pada :2013-11-05 11:20:38
Joni JontorTerima kasih mas tutornya :D , sukses selalu.posting pada :2013-11-07 21:35:42
HasyimMas, Kok Script tidak berfungsi, ketika sy kelik button cuma sampai di "silahkan tunggu" tidak ada pesan error atau salah passwornya? Mohon penjelasannya, saya sudah sesuaikan dengan data di atas, maklum saya new nie....posting pada :2013-11-21 23:46:57
AdminCoba cek lagi alamat url script, pada javascript terdapat variabel alamat url, sesuaikan dengan setting pada komputer anda.posting pada :2013-11-22 06:58:32
aditkk, klo buat register pengecekan pass dengan verify pass mesti sama gmana yah?? thx a lot.posting pada :2013-11-23 11:15:31
Iqbalalamat url udh tk sesuaikan dgn alamat localhost tpi tetep gk mau jalan gmna mas ?posting pada :2013-12-03 15:08:22
ODIgan itu username dan passwordnya apa ?posting pada :2013-12-03 20:41:56
AdminSdr Iqbal, untuk penelusuran lebih lanjut silahkan dicek menggunakan plugin Mozilla firefox, namanya Firebug. Sdr ODI, username admin1 dan password admin1 , atau user admin2 password admin2posting pada :2013-12-05 21:49:28
Bagus SetyawanTerima kasih mas... Berhasil saya terapkan pada CodeIgniter. Sangat bermanfaat sekali.posting pada :2014-01-01 20:21:29
yunikk admin.. pas yuni cobain d localhost knpa ya munculny "silahkan Tunggu....", knpa ga mau masuk2 ke admin.php kk admin? posting pada :2014-04-02 11:50:43
AdminSdr Yuni, silahkan coba buka script login.js, lihat bagian var url_login = 'http://localhost/tutorial/login.php'; var url_admin = 'http://localhost/tutorial/admin.php'; Periksa kembali apakah script login.php berada pada folder tutorial/login.php ? Jika pada komputer anda berada pada lokasi folder yang berbeda, silahkan sesuai dengan nama folder anda. Kemungkinan lain dari kesalahan tersebut adalah koneksi ke databasenya, mohon periksa juga koneksi database anda.posting pada :2014-04-03 07:49:08
sandricoba ah ..kumplit bangett dari komentarnya jg udah berbobot apalagi isinya thanksposting pada :2014-05-10 09:33:57
AnnisatislaTerima kasih gan :) posting pada :2014-07-03 10:01:34
ernomau ikut tanya juga, bagaimana jika contoh yang di berikan di akses dari pc lain bagaimana setingannya untuk url_login dan url_admin karena percobaan yang saya lakukan cuma tampil login saja lalu loading tetapi kalo di pc lokal normal posting pada :2014-10-23 13:20:01
efendimak tak kening woy dek rema reposting pada :2014-11-20 07:50:12
indahterima kasih, untuk ilmunya.. :)posting pada :2014-12-24 10:51:11
Ary EJFANice share yah, sangat bermanfaat <a href="http://sinarmas-rent.com">Rental Mobil Palembang</a> <a href="http://desa-coding.com">Jasa Website Palembang</a> <a href="http://aryejfa.com">Tutorial Programming Indonesia</a>posting pada :2015-09-27 14:29:49
deddy rahmanmasih bingung dengan tutorialnyaposting pada :2016-01-28 09:31:05
Donji HarukoNice info artikelnya <a href="http://mitsubishipalembangsumsel.com">mitsubishi palembang</a> <a href="http://aventphilipsindo.com">avent philips indonesia</a> <a href="http://kerja-palembang.id">lowongan kerja palembang</a>posting pada :2016-03-28 15:13:11
SlametMakasih Gan, Saya Klik Iklannya Buat donasi Agan heheheh posting pada :2016-06-17 04:01:37
Endang KurniawanThanks brooposting pada :2017-01-30 13:55:49
         
     
         
 
         
   
         
   
 

Tulis komentar