Pada saat anda mendaftarkan sebuah email atau facebook, ketika anda memasukkan alamat email anda saat pendaftaran lalu tiba-tiba ada pesan yang mengatakan bahwa email tersebut telah terdaftar ?? saya yakin anda pernah menemukan hal semacam itu ataupun yang merip dengan kasus di atas. 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.
Oke tanpa terlalu banyak basa-basi langsung saja kita berangkat Ke TKP ... !!!
Penjelasan mengenai formajax.html. Pertama-tama pada awal script kita memiliki:
Script diatas merupakan fungsi dasar Ajax untuk membuat XMLHttpRequest. kita sudah pernah membahas hal ini pada artikel saya sebelumnya 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.
Lalu pada fungsi cekusername(event) terdapat kode input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;, ini berarti kita membuat variabel input yang isinya adalah text yang sudah kita masukkan. Setelah itu kita cek jika tombol terangkat (dengan kode if (keyEvent.type == "keyup") {) maka kita panggil fungsi get username("cekusername.php?qu=" + input.value);. Yang berarti kita memanggil fungsi getusername dengan mengirimkan file php yang akan kita panggil untuk melakukan pengecekan.
Sekarang mari kita buat file php nya. Buatlah file php dengan nama cekusername.php dan isilah dengan kode berikut ini:
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 qu isinya dhimas. Jika ya kita tampilkan text "terdaftar" jika tidak kita tampilkan text "ok".
Misal kita akan menulis "ivan". Maka ketika kita baru mengetik huruf "i", maka semua fungsi dijalankan dan XMLHttpRequestObject.open("GET", dataSource); memanggil file cekusername.php dengan isi cekusername.php?qu=i, kemudian di cek di PHP dan karena "i" tidak sama dengan "ivan" 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 ivan 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 "v", proses tersebut kemudian diulangi kembali, hingga kita mengetik "ivan" 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.
NB :
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. Selamat mencoba karena orang yang tekun berusahalah yang akan mendapatkan hasil yang baik.
Sedikit motivasi buat anda dan ini merupakan kata motivasi yang selalu saya ingat BAHWA TIDAK ADA HAL YANG SULIT JIKA KITA MAU BELAJAR.
Oke tanpa terlalu banyak basa-basi langsung saja kita berangkat Ke TKP ... !!!
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 "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>
<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 "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 pada awal script kita memiliki:
var XMLHTTPRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
Script diatas merupakan fungsi dasar Ajax untuk membuat XMLHttpRequest. kita sudah pernah membahas hal ini pada artikel saya sebelumnya 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.
Lalu pada fungsi cekusername(event) terdapat kode input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;, ini berarti kita membuat variabel input yang isinya adalah text yang sudah kita masukkan. Setelah itu kita cek jika tombol terangkat (dengan kode if (keyEvent.type == "keyup") {) maka kita panggil fungsi get username("cekusername.php?qu=" + input.value);. Yang berarti kita memanggil fungsi getusername dengan mengirimkan file php yang akan kita panggil untuk melakukan pengecekan.
Sekarang mari kita buat 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";
}
?>
$username=$_GET["qu"];
if ($username=="ivan")
{
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 qu isinya dhimas. Jika ya kita tampilkan text "terdaftar" jika tidak kita tampilkan text "ok".
Misal kita akan menulis "ivan". Maka ketika kita baru mengetik huruf "i", maka semua fungsi dijalankan dan XMLHttpRequestObject.open("GET", dataSource); memanggil file cekusername.php dengan isi cekusername.php?qu=i, kemudian di cek di PHP dan karena "i" tidak sama dengan "ivan" 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 ivan 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 "v", proses tersebut kemudian diulangi kembali, hingga kita mengetik "ivan" 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.
NB :
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. Selamat mencoba karena orang yang tekun berusahalah yang akan mendapatkan hasil yang baik.
Sedikit motivasi buat anda dan ini merupakan kata motivasi yang selalu saya ingat BAHWA TIDAK ADA HAL YANG SULIT JIKA KITA MAU BELAJAR.