Sabtu, 29 Oktober 2011

Mendeteksi event keystroke pada textbox dengan menggunakan Ajax

Diposting oleh Saling Berbagi di 12.55 Label:

Judulnya mungkin agak aneh, karena saya sendiri bingung apa judul yang cocok. Jadi jika anda memiliki form pendaftaran pada suatu website dan terdapat field username atau email yang tentu saja isinya tidak boleh sama dengan yang sudah terdaftar. Nah kita melakukan pengecekan username secara langsung pada saat form masih diisi dengan menggunakan Ajax. Untuk gampangnya silahkan anda lihat apa yang akan kita buat disini.
Oke, anda sudah lihat yang akan kita buat kan? Sebelumnya pastikan anda paham mengenaidasar-dasar Ajax terlebih dahulu. Teknik mengetahui apakah username sudah terdaftar apa belum dengan mengugnakan Ajax akan mempermudah pengunjung yang ingin mendaftar di website anda. Kita memanfaatkan atribut javascript onkeyup pada textbox untuk memanggil fungsi Javascriptnya. Oh iya kita memerlukan PHP untuk melakukan pengecekan apakah username sudah terdaftar apa belum.

Form Pendaftaran

Pertama-tama kita buat form pendaftarannya terlebih dahulu. Dan didalam tersebut kita pasang fungsi Ajaxnya. Oke sekarang 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> sudah dipakai,  
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 "dhimas" 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>
Sekarang saya akan jelaskan terlebih dahulu mengenai formajax.html. Pertama-tama pada awal script kita memiliki:
var XMLHTTPRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
Itu merupakan fungsi dasar Ajax untuk membuat XMLHttpRequest. saya sudarh pernah menerangkan hal ini pada artikel saya mengenai dasar-dasar Ajax. Jadi anda baca lagi, saya tidak akan menerangkannya lagi. Setelah itu terdapat fungsi function getusername(dataSource) Nah fungsi ini untuk mengambil hasil dari file PHP kita dan menampilkannya di dalam div yang kita inginkan. Fungsi ini dipanggil belakangan karena itu nanti saja akan saya terangkan. Kemudian kita memiliki fungsi function cekusername(keyEvent), nah ini merupakan fungsi untuk mengecek event kita pada form tersebut.
Pada form dibagian bawah kita memanggil fungsi tersebut melalui atribut onkeyup ="cekusername(event)". Ini berarti ketika kita menulis sesuatu di field Username, ketika tombol terangkat maka fungsi cekusername(event) dijalankan. Nah pada fungsicekusername(event) terdapat kode input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;, ini berarti kita membuat variabelinput yang isinya adalah text yang sudah kita masukkan. Setelah itu kita cek jika tombol terangkat (dengan kode if (keyEvent.type == "keyup") {) maka kita panggil fungsigetusername("cekusername.php?qu=" + input.value);. Yang berarti kita memanggil fungsi getusername dengan mengirimkan file php yang akan kita panggil untuk melakukan pengecekan. Nah sekarang kita buat file phpnya dulu. Buatlah file php dengan nama cekusername.php dan isilah dengan kode berikut ini:
<?
$username=$_GET["qu"];
if ($username=="dhimas"){
echo "terdaftar";
} else {
echo "ok";
}
?>
Pada fungsi 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 melakukan pengecekan sederhana apakah variabel quisinya dhimas. Jika ya kita tampilkan text "terdaftar" jika tidak kita tampilkan text "ok".
Misal kita akan menulis "dhimas". Maka ketika kita baru mengetik huruf "d", maka semua fungsi dijalankan dan XMLHttpRequestObject.open("GET", dataSource); memanggil file cekusername.php dengan isi cekusername.php?qu=d, kemudian di cek di PHP dan karena "d" tidak sama dengan "dhimas" maka hasilnya adalah teks "ok". Kemudian baru kita cek if (XMLHttpRequestObject.responseText == "terdaftar") yang berarti jika teks yang ditampilkan "terdaftar" maka kita akan tampilkan pesan bahwa username dhimas sudah terdaftar didalam div yang memiliki id target.
Karena teks yang ditampilkan adalah "ok" maka yang dijalankan adalah kode berikutnya yaitu menampilkan teks "OK" didalam div yang memiliki id target. Kemudian kita meneruskan mengetik "h", proses tersebut kemudian diulangi kembali, hingga kita mengetik "dhimas" yang didalam kode PHP menghasilkan teks "terdaftar"
Anda bisa bayangkan betapa berat proses yang dijalankan. Pada praktek sesungguhnya, didalam file PHP nya anda melakukan pengecekan ke database mysql apakah username yang diketikkan sudah ada di database atau belum. Bagaimana pusing? tentu saja, karena Ajax memang rumit.
Jika anda membuat aplikasi pendaftaran registrasi yang sesungguhnya, anda tetap harus melakukan pengecekan username menggunakan pemrograman server seperti PHP, ASP dll. Baru jika anda sudah membuatnya anda bisa tambahkan pemanis dengan membuat pengecekan tambahan menggunakan Ajax. Gunakan Ajax hanya sebagai pelengkap.
Silahkan dicoba dan alangkah baiknya sebelum mencoba anda mengerti dasar-dasarnya dulu, karena 90% kode diatas merupakan dasar dari Ajax. Jika anda pusing istirahat dulu sebentar, kemudian coba lagi pelan-pelan karena Ajax bukan sesuatu yang mudah untuk dipelajari.

0 komentar:

Posting Komentar

Terimakasih atas kunjungan dan komantar Anda.

newer post older post Home
Langganan: Posting Komentar (Atom)