AJax PHP : Cara Praktis Mendeteksi Event Keystroke pada Textbox dengan Menggunakan Ajax PHP

Posted on

Di ketika sahabat mendaftarkan sebuah email atau facebook, ketika sahabat memasukkan tempat tinggal email sahabat ketika pendaftaran lalu tiba-tiba ada pesan yang mengatakan bahwa email tersebut telah terdaftar ?? saya yakin sahabat pernah menemukan hal semacam itu ataupun yang merip dengan kasus di atas. Jadi seandainya sahabat mempunyai form pendaftaran di suatu laman dan terdapat field username atau email yang tentu saja isinya tak boleh sama dengan yang telah terdaftar. Nah kita menjalankan pengecekan username secara seketika di ketika form masih diisi dengan menggunakan Ajax.
Oke tanpa terlalu banyak basa-basi seketika saja kita pergi Ke TKP … !!!

Form Pendaftaran

Pertama-tama-tama kita bikin form pendaftarannya terlebih dahulu. Dan didalam tersebut kita pasang manfaat Ajaxnya. Oke sekarang ini cobalah kode berikut dan simpan dengan nama formajax.html:

<html>
<head>
<script language=”javascript”>
var XMLHTTPRequestObject = false;
if (window.XMLHttpRequest)
{   
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {     XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHttp”);
} function getusername(dataSource) {   
if (XMLHttpRequestObject) {        
XMLHttpRequestObject.open(“GET”, dataSource);
XMLHttpRequestObject.onreadystatechange = function()    
{       
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
if (XMLHttpRequestObject.responseText == “terdaftar”)
{                
var target = document.getElementById(“target”);
target.innerHTML = “<div>Maaf, username <b>”+input.value+”</b> telah dimanfaatkan,silahkan pilih yang lain.</div>”;
} else {                
var target = document.getElementById(“target”);
target.innerHTML = “<div>OK</div>”;
}}}
XMLHttpRequestObject.send(null);
} }
function cekusername(keyEvent) { keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
var target = document.getElementById(“target”);
target.innerHTML = “<div></div>”;
if (input.value) {
getusername(“cekusername.php?qu=” + input.value);
} }}
</script>
</head>
<body>
<h4>Silahkan isi Username “Ivan” dan cobalah isi dengan username lainnya</h4>
<form>
Username: <input type=”text” name=”username” onkeyup =”cekusername(event)” />
<Br />
<div id=”target”>
</div>
</form>
</body>
</html>


Penjelasan mengenai formajax.html. Pertama-tama-tama di awal script kita mempunyai:

var XMLHTTPRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHttp”);
}

Script diatas adalah manfaat basic Ajax bagi membangun XMLHttpRequest. kita telah pernah membahas hal ini di artikel saya sebelumnya mengenai dasar-dasar Ajax. Jadi sahabat baca lagi, saya tak akan menerangkannya lagi. Setelah itu terdapat manfaat function getusername(dataSource) Nah manfaat ini bagi mengambil hasil dari file PHP kita dan menampilkannya di pada div yang kita inginkan. Guna ini dipanggil belakangan karena itu nanti saja akan saya terangkan. Kemudian kita mempunyai manfaat function cekusername(keyEvent), nah ini adalah manfaat bagi mengecek event kita di form tersebut.
Di form dibagian bawah kita memanggil manfaat tersebut lewat atribut onkeyup =”cekusername(event)“. Ini berarti ketika kita menulis sesuatu di field Username, ketika tombol terangkat karenanya manfaat cekusername(event) dijalankan.

Lalu di manfaat cekusername(event) terdapat kode input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;, ini berarti kita membangun variabel input yang isinya yakni text yang telah kita masukkan. Setelah itu kita cek seandainya tombol terangkat (dengan kode if (keyEvent.type == “keyup”) {) karenanya kita panggil manfaat get username(“cekusername.php?qu=” + input.value);. Yang berarti kita memanggil manfaat getusername dengan mengirimkan file php yang akan kita panggil bagi menjalankan pengecekan.

Kini mari kita bikin file php nya. Buatlah file php dengan nama cekusername.php dan isilah dengan kode berikut ini:

<?
$username=$_GET[“qu”];
if ($username==”ivan”)
{
echo “terdaftar”;
}
else
{
echo “ok”;
}
?>

Di manfaat getusername kita menyimpan file PHP kita kedalam variabel datasource dan kita memanggil file PHP kita dengan kode XMLHttpRequestObject.open(“GET”, dataSource);. Didalam file PHP kita menjalankan pengecekan sederhana apakah variabel qu isinya dhimas. Seandainya ya kita tampilkan text “terdaftar” seandainya tak kita tampilkan text “ok”.

Misal kita akan menulis “ivan”. Karenanya ketika kita baru mengetik huruf “i”, karenanya seluruh manfaat dijalankan dan XMLHttpRequestObject.open(“GET”, dataSource); memanggil file cekusername.php dengan isi cekusername.php?qu=i, kemudian di cek di PHP dan karena “i” tak sama dengan “ivan” karenanya hasilnya yakni teks “ok”. Kemudian baru kita cek if (XMLHttpRequestObject.responseText == “terdaftar”) yang berarti seandainya teks yang ditampilkan “terdaftar” karenanya kita akan tampilkan pesan bahwa username ivan telah terdaftar didalam div yang mempunyai id target.

Karena teks yang ditampilkan yakni “ok” karenanya yang dijalankan yakni kode berikutnya yaitu menampilkan teks “OK” didalam div yang mempunyai id target. Kemudian kita meneruskan mengetik “v”, proses tersebut kemudian diulangi kembali, hingga kita mengetik “ivan” yang didalam kode PHP menghasilkan teks “terdaftar”

Sahabat dapat bayangkan betapa berat proses yang dijalankan. Di praktek sesungguhnya, didalam file PHP nya sahabat menjalankan pengecekan ke database mysql apakah username yang diketikkan telah ada di database atau belum. Bagaimana pusing? tentu saja, karena Ajax memang rumit.

NB :
Seandainya sahabat membangun program pendaftaran registrasi yang sesungguhnya, sahabat tetap mesti menjalankan pengecekan username menggunakan pemrograman server seperti PHP, ASP dll. Baru seandainya sahabat telah membuatnya sahabat dapat tambahkan pemanis dengan membangun pengecekan tambahan menggunakan Ajax. Gunakan Ajax hanya selaku pelengkap.

Silahkan dicoba dan alangkah baiknya sebelum mencoba sahabat paham dasar-dasarnya dulu, karena 90% kode diatas adalah basic dari Ajax. Selamat mencoba karena orang yang tekun berusahalah yang akan memperoleh hasil yang bagus.

   Sedikit motivasi bikin sahabat dan ini adalah kata motivasi yang selalu saya ingat BAHWA TIDAK ADA HAL YANG SULIT JIKA KITA MAU BELAJAR.

Leave a Reply

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