Cek User ID dengan Ajax

Posted on Updated on


Biasanya kalau kita mendaftar di yahoo atau sejenisnya, ketika kita register kemudian memasukkan user id yang kita inginkan, maka biasanya program akan mengecek terlebih dahulu apakah id tersebut sudah ada yang menggunakan atau tidak. Cara membuatnya adalah dengan ajax. Jadi setelah kita mengetik user id di  inputan, lalu kita pindah fokusnya atau event onblur, maka langsung Ajax jalan untuk masuk ke database di server untuk mengecek user id di database.

Misal kita memiliki sturktur tabel user sebagai berikut.

1
2 — Table structure for table `tabeluser`
3
4
5 CREATE TABLE `tabeluser` (
6 `userid` varchar(20) NOT NULL,
7 `nama` varchar(50) NOT NULL,
8 PRIMARY KEY (`userid`)
9 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
10
11
12 — Dumping data for table `tabeluser`
13
14
15 INSERT INTO `tabeluser` (`userid`, `nama`) VALUES
16 (‘drz’, ‘mazadie’),
17 (‘nyr’, ‘Nurmi’);


— Table structure for table `tabeluser`

CREATE TABLE `tabeluser` (
`userid` varchar(20) NOT NULL,
`nama` varchar(50) NOT NULL,
PRIMARY KEY (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


— Dumping data for table `tabeluser`

INSERT INTO `tabeluser` (`userid`, `nama`) VALUES
(‘drz’, ‘mazadie’),
(‘nyr’, ‘Nurmi’);

Berikut kode Ajax untuk membuat mengecek user id tersebut, cekid.html

1 <html>
2 <head>
3
4 var drz, kata, x;
5 function cekid(){
6 kata = document.getElementById(“userid”).value;
7 if(kata.length>2){
8 document.getElementById(“teks”).innerHTML = “checking…”;
9 drz = buatajax();
10 var url=“cekid.php”;
11 url=url+“?q=”+kata;
12 url=url+“&sid=”+Math.random();
13 drz.onreadystatechange=stateChanged;
14 drz.open(“GET”,url,true);
15 drz.send(null);
16 }else{
17 fokus();
18
19 }
20 }
21
22 function buatajax(){
23 if (window.XMLHttpRequest){
24 returnnew XMLHttpRequest();
25 }
26 if (window.ActiveXObject){
27 returnnew ActiveXObject(“Microsoft.XMLHTTP”);
28 }
29 return null;
30 }
31
32 function stateChanged(){
33 var data;
34 if (drz.readyState==4){
35 data=drz.responseText;
36 document.getElementById(“teks”).innerHTML = data;
37 }
38 }
39
40 function fokus(){
41 document.getElementById(“userid”).focus();
42 }
43
44 </head>
45 <body style=“font-family:verdana;font-size:9pt”>
46 <form>
47 User ID : <input type=text name=userid id=userid onblur=cekid()>
48 <span id=teks style=“color:red;font-size:8pt”></span> <br>
49 Email : <input type=text name=email>
50 </form>
51 </body>
52 </html>

<html>
<head>

var drz, kata, x;
function cekid(){
kata = document.getElementById(“userid”).value;
if(kata.length>2){
document.getElementById(“teks”).innerHTML = “checking…”;
drz = buatajax();
var url=”cekid.php”;
url=url+”?q=”+kata;
url=url+”&sid=”+Math.random();
drz.onreadystatechange=stateChanged;
drz.open(“GET”,url,true);
drz.send(null);
}else{
fokus();

}
}

function buatajax(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}

function stateChanged(){
var data;
if (drz.readyState==4){
data=drz.responseText;
document.getElementById(“teks”).innerHTML = data;
}
}

function fokus(){
document.getElementById(“userid”).focus();
}

</head>
<body style=”font-family:verdana;font-size:9pt”>
<form>
User ID : <input type=text name=userid id=userid onblur=cekid()>
<span id=teks style=”color:red;font-size:8pt”></span> <br>
Email : <input type=text name=email>
</form>
</body>
</html>

Kemudian di sisi server kita membuat script PHP untuk melakukan
pengecekan ke database. Kita beri nama cekid.php

1 <?php
2 mysql_connect(“localhost”,“root”,“”);
3 mysql_select_db(“test”);
4
5 $id = $_GET[‘q’];
6
7 $query = mysql_query(“select userid from tabeluser where userid=’$id'”);
8
9 if(mysql_num_rows($query)==0){
10 echo“$id belum ada yang pakai”;
11 }else{
12 echo“$id sudah ada yang pakai”;
13 }
14 ?>
view plain | print | ?

<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“test”);

$id = $_GET[‘q’];

$query = mysql_query(“select userid from tabeluser where userid=’$id'”);

if(mysql_num_rows($query)==0){
echo “$id belum ada yang pakai”;
}else{
echo “$id sudah ada yang pakai”;
}
?>

Coba lakukan pengetesan dengan memasukan user id yang telah terdaftar di tabel database

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s