Code PHP : Mengecek Username dan Email dengan AJAX PHP

Posted on

Untuk rekan-rekan , perlu kamu ketahui bahwa setiap aplikasi web yang bekerja dengan AJAX bekerja secara asynchronously, artinya yakni mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman browser kita, melainkan hanya mengerjakan penggantian di bagian web yang hendak di ubah. AJAX (Asynchronouse JavaScript and XML) diperkenalkan oleh James Garrent dari Adaptive Path di tahun 2005 dan mulai popular ketika digunakan oleh Google di tahun 2005.
Di hari istimewa ini tepat tanggal 12 bulan 12 tahun 2012, saya ingin berbagi script php yaitu skrip yang bagi mengecek username dan email yang telah terdaftar dan tersimpan pada database dengan Object XMLHTTPRequest, yaitu pengecekan dapat dilakukan tanpa mesti me-load seluruh halaman web. 

Properti – properti pada  XMLHTTPRequest:

  • Onreadystatechange : Mengangani event setiap kali status berubah.
  • Ready state : 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete.
  • resrponseText : reponse yang dikembalikan pada format string
  • Status    : 404 = “Not Found”, 200 = ‘OK’.
  • StatusText : “Not Fount” atau ”OK”
<html>
<head>
<title>code php bagi Mengecek Ketersediaan Username dan Email dengan AJAX</title>
<script type=“text/javascript”>

var RO = RequestObject();
function RequestObject(){
var browser = navigator.appName;
if(browser == ‘Microsoft Internet Explorer’)
return new ActiveXObject(‘Microsoft.XMLHTTP’)
else
return new XMLHttpRequest();
}
function cekKetersediaan(target){
var username = document.getElementById(‘username’).value;
var email = document.getElementById(’email’).value;
if(target ==‘username’ && username !=“){
RO.open(‘get’‘cek-username-email.php?username=’+username+‘&email=0’, true);
}else if(target ==’email’ && email !=”){
RO.open(‘get’‘cek-username-email.php?username=0&email=’+email, true);
}else{
alert(‘Masukan ‘+target);
}
RO.onreadystatechange = function() {
if((RO.readyState ==4) && (RO.status == 200)){
var hasil =RO.responseText;
if( hasil == ‘1’){
document.getElementById(‘hasil-cek’).style.color =‘#FF0000’;
document.getElementById(‘hasil-cek’).innerHTML =target+‘ tak terdapat’;
}else{
document.getElementById(‘hasil-cek’).style.color =‘#000000’;
document.getElementById(‘hasil-cek’).innerHTML =target+‘ terdapat’;
}
}
}
RO.send(null);
return false;
}

</script>
</head>
<body>
<body>
<div>
<p>&nbsp;</p>
<h1>Cek disini Username dan Email</h1>
<div>
<table border=“0” cellspacing=“0” cellpadding=“0” id=“tbl”>
<tr>
<td>Username</td>
<td><input name=“username” type=“text” id=“username” size=“30” /></td>
<td><a href=“#” onclick=“return cekKetersediaan(‘username’);”>Cek Ketersediaan Username</a></td>
</tr>
<tr>
<td>Email</td>
<td><input name=“email” type=“text” id=“email” size=“30” /></td>
<td><a href=“#” onclick=“return cekKetersediaan(’email’);”>Cek Ketersediaan Email</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td id=“hasil-cek”></td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>
</script>

Untuk rekan-rekan yang tertarik dapat download skrip / kodenya di download disini.
Demikianlah Tutorial ajax php dari saya, semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *