Tutorial jQuery : Membuat Fitur “Live Check Email” Dengan jQuery

Cobaan dan tragedi terus menerpa saya minggu-minggu ini. Setelah kemarin dibuat malu oleh seorang dagang nasi, kini laptop saya yang terkena musibah. Laptop hitam merk Acer (Akan CEpat Rusak) yang telah menemani saya hampir selama 2 tahun ini tiba-tiba layarnya tidak mau menyala, tetapi lampu indikator powernya bisa menyala. Setelah saya tengok ke bawah, ternyata kipas processornya K.O. Mau bongkar, tapi gak ada waktu. Mengingat saya lagi banyak dikejar deadline pekerjaan + jadwal KKN yang padat. Tapi syukurlah, masih ada PC di kamar yang bisa dihandalkan untuk bekerja. Mudah-mudahan saja tidak bernasib sama dengan si laptop :D.

Nah, sambil mengisi waktu istirahat KKN, kali ini saya akan membagikan sebuah tutorial sederhana tentang AJAX. “Live Check Email”, sebuah fitur pengecekan ketersediaan email secara otomatis tanpa memerlukan refresh pada halaman web. Ini biasanya sering kita temui ketika akan melakukan pendaftaran online yang membutuhkan email sebagai validasinya dan kebetulan fitur ini saya gunakan ketika membuat sebuah website reservasi hotel 1 bulan yang lalu. Pembuatannya lumayan sederhana, kita akan menggunakan fitur ajaxComplete() yang dimiliki oleh jQuery. Cekidot gan.

1. Buat sebuah form sederhana, dengan 1 textfield untuk memasukkan alamat email.

<div id="content"><form>
<div><label>Masukkan Email :</label>
<input id="email" class="inp" name="email" size="35" type="text" />
</div>
</form></div>

2. Sekarang saatnya menuju ke bagian pemanfaatan API dari jQuery untuk membuat fitur pengecekan email dengan metode AJAX. Hampir sama dengan postingan saya beberapa bulan lalu, tentang pengiriman data ke server via AJAX. Cuma kali ini butuh sedikit ada modifikasi, dimana kita perlu menangkap result yang dihasilkan. Sehingga dihasilkan sebuah kondisi, apa email yang dimasukkan tersedia atau sudah terpakai.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$("#email").change(function()
	{
		var email = $("#email").val();
		$("#stts").html('Sedang mengcek email...');
		$.ajax({
			type: "POST",
			url: "cek.php",
			data: "email="+ email,
			success: function(hasil){
			$("#stts").ajaxComplete(function(event, request){

				if(hasil == 'yes')
				{
					$("#stts").html('<img src="tersedia.jpg" align="absmiddle"> <font color="blue"><b>Email Tersedia</b></font>');
				}
				else  if(hasil == 'no')
				{
					$("#stts").html('<img src="tidak-tersedia.jpg" align="absmiddle"> <font color="red"><b>Email Tidak Tersedia</b></font>');
				}
		   });
		   }

		  });
	return false;
	});

});
</script>

3. Dan yang terakhir, kita akan melakukan koneksi ke database untuk mengecek apakah email yang dimasukkan tersedia. Status yang dihasilkan, dikirimkan ke file utama dengan metode AJAX.

<?php
include('koneksi.php');
if(isset($_POST['email']))
{
	$email = mysql_real_escape_string($_POST['email']);
	$cek = mysql_query("SELECT * FROM member WHERE email='$email'");
	if(mysql_num_rows($cek))
	{
		echo 'no';
	}
	else
	{
		echo 'yes';
	}
}
?>

Gampang kan cara pembuatannya…??? Bisa juga diterapkan di CodeIgniter, tinggal memisahkannya ke dalam Controller, Model dan View saja. OK deh, semoga postingan di siang hari ini bisa bermanfaat untuk rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like][/to_like]