夢の翼
Beberapa tahun yang lalu( 
) gw menuliskan tutroial membuat live checking dengan AJAX, Well waktu itu gw lagi ngebut dengan belajar dasar beberapa bahasa baru, sehingga belum begitu mengerti beberapa framework Javascript seperti jQuery, mootols, etc.
Sekitar setahun kemudian(sekarang ) gw mulai banyak berkecimpung dalam dunia scripting selain juga dalam server side programing dengan PHP. Dan mulailah mempelajari sedikit demi sedikit tentang javascript framework.
Dari kesekian banyak, gw memilih jQuery untuk dipelajari dan diterapkan di project keseharian gw. Kenapa? entah, I just like it 
.
Setelah sekitar 1 tahun, mungkin gw pengen memperbaharui tutorial gw yang dulu, dan mencoba memperlihatkan semudah apa sih AJAX dengan jQuery. Coba mari kita bandingkan.
Gw menggunakan beberapa file dari tutorial sebelumnya, seperti config file, checker file hanya ada sedikit yang di rubah.
Langkah Buatnya:
Pertama: Buat Table dengan spesifikasi sbb:
CREATE TABLE IF NOT EXISTS `ajax_demo` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`value` VARCHAR(23) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
INSERT INTO `ajax_demo` (`id`, `value`) VALUES
(1, 'aku'),
(2, 'kamu'),
(3, 'dia'),
(4, 'saya'),
(5, 'anda'),
(6, 'kami'),
(7, 'you'),
(8, 'we');
`id` INT(11) NOT NULL AUTO_INCREMENT,
`value` VARCHAR(23) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
INSERT INTO `ajax_demo` (`id`, `value`) VALUES
(1, 'aku'),
(2, 'kamu'),
(3, 'dia'),
(4, 'saya'),
(5, 'anda'),
(6, 'kami'),
(7, 'you'),
(8, 'we');
Kedua, buat file “config.php”
<?php
/*
Just connecting to DB... or use your config File ^_^
*/
mysql_connect("[YOUR_DB_HOST]","[YOUR_DB_USERNAME]","[YOUR_DB_PASSWORD]");
mysql_select_db("[DBNAME]");
?>
/*
Just connecting to DB... or use your config File ^_^
*/
mysql_connect("[YOUR_DB_HOST]","[YOUR_DB_USERNAME]","[YOUR_DB_PASSWORD]");
mysql_select_db("[DBNAME]");
?>
Ketiga, Buat file utamanya:
<?php
include("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX jQuery -DEMO-</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$().ready(function()
{
/*
Set Focus on load agar langsung texbox terfokus
*/
$('#txtValue').focus();
/*
Triger untuk OnBlur pada jQuery Dapat diganti dengan beberapa cara lain,
Untuk lebih jelasnya lihat dokumentasi jQuery:
http://api.jquery.com/category/events/
*/
$('#txtValue').blur(function(){
/*
Mengganti SPAN kosong menjadi gif untuk loading
*/
$('#imgTry').html("<img src='6nr0un50.gif' /> Checking!!");
/*
Proses AJAX
*/
$.ajax
({
type: 'POST', /* Cara mengesend Data, ada POST atau GET */
url: "checker.php", /* Target/ file tujuan untuk mengeksekusi*/
data: "value="+$('#txtValue').val(),/* Query String/Data yang akan dikirimkan*/
success: function(data) /* Apabila sukses lakukan perintah berikut */
{
if(data=='OK') /* Apabila yang direturn adalah string 'OK'(read file "checker.php") */
{
/*
Ganti String pada span ber ID 'imgTry' yang sebelumnya berisi gambar loading menjadi string
*/
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else /* Apabila yang direturn selain string 'OK'(read file "checker.php") */
{
/*
Ganti String pada span ber ID 'imgTry' yang sebelumnya berisi gambar loading menjadi string
*/
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
})
});
</script>
<style type="text/css">
body,td,th {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 12px;
color: #333;
}
td {
border: 1px solid #999;
}
</style></head>
<body>
<p>Data yang bisa digunakan:</p>
<?php
$query = mysql_query("SELECT * FROM ajax_demo")or die(mysql_error());
?>
<table width="134" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="30">No</td>
<td width="358">Value</td>
</tr>
<?php
while($result = mysql_fetch_row($query))
{
?>
<tr>
<td><?php echo $result[0]; ?></td>
<td><?php echo $result[1]; ?></td>
</tr>
<?php
}
?>
</table>
<p>Ketikan Kata yang Diinginkan, Apabila Kata yang ada di ketikan ada di dalam kolom value di atas, maka akan muncul pesan error</p>
<p>Ketikan kata, kemudian tekan Tab untuk mengeksekusinya </p>
<form id="form1" name="form1" method="post" action="">
<table width="452" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="107">On Blur</td>
<td width="333">
<label>
<input type="text" name="txtValue" id="txtValue" /> <span id="imgTry"> </span>
</label>
</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
include("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX jQuery -DEMO-</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$().ready(function()
{
/*
Set Focus on load agar langsung texbox terfokus
*/
$('#txtValue').focus();
/*
Triger untuk OnBlur pada jQuery Dapat diganti dengan beberapa cara lain,
Untuk lebih jelasnya lihat dokumentasi jQuery:
http://api.jquery.com/category/events/
*/
$('#txtValue').blur(function(){
/*
Mengganti SPAN kosong menjadi gif untuk loading
*/
$('#imgTry').html("<img src='6nr0un50.gif' /> Checking!!");
/*
Proses AJAX
*/
$.ajax
({
type: 'POST', /* Cara mengesend Data, ada POST atau GET */
url: "checker.php", /* Target/ file tujuan untuk mengeksekusi*/
data: "value="+$('#txtValue').val(),/* Query String/Data yang akan dikirimkan*/
success: function(data) /* Apabila sukses lakukan perintah berikut */
{
if(data=='OK') /* Apabila yang direturn adalah string 'OK'(read file "checker.php") */
{
/*
Ganti String pada span ber ID 'imgTry' yang sebelumnya berisi gambar loading menjadi string
*/
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else /* Apabila yang direturn selain string 'OK'(read file "checker.php") */
{
/*
Ganti String pada span ber ID 'imgTry' yang sebelumnya berisi gambar loading menjadi string
*/
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
})
});
</script>
<style type="text/css">
body,td,th {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 12px;
color: #333;
}
td {
border: 1px solid #999;
}
</style></head>
<body>
<p>Data yang bisa digunakan:</p>
<?php
$query = mysql_query("SELECT * FROM ajax_demo")or die(mysql_error());
?>
<table width="134" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="30">No</td>
<td width="358">Value</td>
</tr>
<?php
while($result = mysql_fetch_row($query))
{
?>
<tr>
<td><?php echo $result[0]; ?></td>
<td><?php echo $result[1]; ?></td>
</tr>
<?php
}
?>
</table>
<p>Ketikan Kata yang Diinginkan, Apabila Kata yang ada di ketikan ada di dalam kolom value di atas, maka akan muncul pesan error</p>
<p>Ketikan kata, kemudian tekan Tab untuk mengeksekusinya </p>
<form id="form1" name="form1" method="post" action="">
<table width="452" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="107">On Blur</td>
<td width="333">
<label>
<input type="text" name="txtValue" id="txtValue" /> <span id="imgTry"> </span>
</label>
</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
Keempat, Buat file Checkernya(‘checker.php’). file ini yang tugasnya mengexecute dan mengecek ke database saat AJAX calling di execute.
<?php
/*
Checker File...
Digunakan untuk konek ke DB mengecek dan mengembalikan ke Javascript
untuk ditampilkan di HTML secara live tanpa reloading
*/
require_once("config.php");
$value = $_REQUEST['value'];
$q = mysql_query("SELECT * FROM ajax_demo WHERE value='$value'")or die(mysql_error());
$sum = mysql_num_rows($q); // Untuk mencari berapa jumlah record dari hasil Query
if($sum==0) // Value belum ada
{
echo "OK";
}
else // Value sudah ada
{
echo "NO";
}
//---------- Finish... hanya seperti ini ---------------
?>
/*
Checker File...
Digunakan untuk konek ke DB mengecek dan mengembalikan ke Javascript
untuk ditampilkan di HTML secara live tanpa reloading
*/
require_once("config.php");
$value = $_REQUEST['value'];
$q = mysql_query("SELECT * FROM ajax_demo WHERE value='$value'")or die(mysql_error());
$sum = mysql_num_rows($q); // Untuk mencari berapa jumlah record dari hasil Query
if($sum==0) // Value belum ada
{
echo "OK";
}
else // Value sudah ada
{
echo "NO";
}
//---------- Finish... hanya seperti ini ---------------
?>
Okay… That’s All untuk file-filenya.
Mari kita telaah sedikit demi sedikit.
Mari kita lihat pada header di file utama terdapat javascript di bagian headernya kurang lebih:
$().ready(function()
{
/*
Set Focus on load agar langsung texbox terfokus
*/
$('#txtValue').focus();
$('#txtValue').blur(function(){
$('#imgTry').html("<img src='6nr0un50.gif' /> Checking!!");
//Proses AJAX dimulai
$.ajax
({
type: 'POST',
url: "checker.php",
data: "value="+$('#txtValue').val(),
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
})
});
{
/*
Set Focus on load agar langsung texbox terfokus
*/
$('#txtValue').focus();
$('#txtValue').blur(function(){
$('#imgTry').html("<img src='6nr0un50.gif' /> Checking!!");
//Proses AJAX dimulai
$.ajax
({
type: 'POST',
url: "checker.php",
data: "value="+$('#txtValue').val(),
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
})
});
baris awal dimulai dengan syntax:
$().ready(function(){
/*
All code here
*/
});
/*
All code here
*/
});
Maksudnya adalah lakukan semua code pada saat halaman sudah terload seluruhnya.
Pada perintah pertama pada fungsi ready function:
$('#txtValue').focus();
Maksudnya kita mengeset kursor pada textbox ber id “txtValue” pada saat halaman selesai di load. Gunakan tanda kress untuk memilih “id” dari element HTML.
Berikutnya adalah tempat dimana AJAX akan di execute saat textbox kehilangan focus/blur. Pada jQuery tidak lagi dibutuhkan penambahan atribut “onBlur” pada element. tetapi dapat langsung dilakukan pada header halaman/include script.
$('#txtValue').blur(function(){
// Do Something here
});
// Do Something here
});
Di atas dapat diartikan pada saat textbox ber-ID ‘txtValue’ kehilangan fokus, lakukan fungsi/perintah yang sudah ditentukan pada bagian “// Do Something here”.
Untuk menggunakan AjAX, kita tinggal panggil satu fungsi dari object jQUERY, cara pakainya simple seperti berikut ini:
$.ajax
({
type: 'POST',
url: "checker.php",
data: "value="+$('#txtValue').val(),
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
({
type: 'POST',
url: "checker.php",
data: "value="+$('#txtValue').val(),
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
Untuk:
type: 'POST'
Menggunakan type method pengiriman data POST, selain POST ada juga cara pengiriman data secara “GET”
Untuk:
url: "checker.php"
URL kemana data akan dikirim/di proses
Untuk:
data: "value="+$('#txtValue').val()
Mengirimkan data yang akan di kirim dalam bentuk Query String. Gunakan method “val()” untuk memperoleh value dari sebuah element.
Untuk:
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
Proses yang dilakukan saat AJAX berhasil
Kurang lebih begitulah pemanggilan AJAX dengan jQuery, mari coba kita bandingkan dengan koding javascript manual
Manual:
var xmlhttp;
function Checker()
{
var theValue = document.getElementById("txtValue").value; //Ambil value dari "id" textbox(Yang dilihat id bukan name-nya)
if(theValue!="")
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
document.getElementById("imgTry").innerHTML="<img src='6nr0un50.gif' /> Checking!!";
var url="checker.php";
url=url+"?value="+theValue;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.responseText=="OK")
{
document.getElementById("imgTry").innerHTML="<img src='arrived.jpg'> OK, value belum digunakan!!!";
}
else
{
document.getElementById("imgTry").innerHTML="<img src='unArrived.jpg'> Value sudah ada!!!";
}
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function Checker()
{
var theValue = document.getElementById("txtValue").value; //Ambil value dari "id" textbox(Yang dilihat id bukan name-nya)
if(theValue!="")
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
document.getElementById("imgTry").innerHTML="<img src='6nr0un50.gif' /> Checking!!";
var url="checker.php";
url=url+"?value="+theValue;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.responseText=="OK")
{
document.getElementById("imgTry").innerHTML="<img src='arrived.jpg'> OK, value belum digunakan!!!";
}
else
{
document.getElementById("imgTry").innerHTML="<img src='unArrived.jpg'> Value sudah ada!!!";
}
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
jQuery
$().ready(function()
{
$('#txtValue').blur(function(){
$('#imgTry').html("<img src='6nr0un50.gif' /> Checking!!");
//Proses AJAX dimulai
$.ajax
({
type: 'POST',
url: "checker.php",
data: "value="+$('#txtValue').val(),
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
})
});
{
$('#txtValue').blur(function(){
$('#imgTry').html("<img src='6nr0un50.gif' /> Checking!!");
//Proses AJAX dimulai
$.ajax
({
type: 'POST',
url: "checker.php",
data: "value="+$('#txtValue').val(),
success: function(data)
{
if(data=='OK')
{
$('#imgTry').html('<img src="arrived.jpg"> OK, value belum digunakan!!!');
}
else
{
$('#imgTry').html('<img src="unArrived.jpg"> Value sudah ada!!!');
}
}
});
})
});
Apabila dilihat di atas, coding manual yang pertama gw menggunakan proses GET, karena kalau menggunakan proses POST lebih panjang lagi Codingnya.
Untuk yang kedua menggunakan jQuery jauh lebih simple. Walau mungkin beberapa beginner Javascript akan menemukan sesuatu yang unik dalam codingnya yang berbasis OOP javascript. Tetapi well gw pikir memang sebuah awall membutuhkan waktu untuk pembiasaan.
Pada awalnya gw juga agak asing. Bagaimana bisa dalam sebuah method terdapat function(misal pada “$(‘#txtValue’).blur(function(){ /*isi fungsi*/ });”), dan bahkan dalam function tersebut bisa ada function lagi(ajax pada Success). Dan masih banyak kalau mau mendalami lebih lanjut
Akhirnya semoga membantu, dan silahkan dinikmati full code-nya, dapat di download disini 
Popularity: 1% [?]
Share it with your friens
This Blog
My name is Rizky Gunawan, graduated(Waw, thanks God I can graduated :P ) from Computer Science Major. My Hobby is Coding, and my speciality is web development using PHP. Currently I'm working on some press company in Indonesia as Internal Software Developer.
