夢の翼
Pernahkah kamu ke sebuah forum diskusi, dan saat mendaftar/registrasi, saat setelah kita menulis username atau email di form registrasi maka username atau email yang kamu masukin langsung di check ke database dan kamu langsung dapat tahu hasilnya apakah sudah digunakan oleh orang lain atau belum.
Cara ini sangat membantu user dalam menginput sesuatu tanpa harus menunggu mensubmit form-nya terlebih dahulu. Gw baru saja mempelajarinya beberapa hari lalu di kantor yang gw urus aplikasinya. Sekarang gw pengen sharing apa yang gw dapet. Ini masih sangat sederhana. Tidak perlu begitu mengerti, ini juga hasil copas gw(dari w3school) dan gw modifikasi sesaui kebutuhan gw.
Tutorial ini membutuhkan beberapa file(supaya rapih saja). kita mulai…
Buat sebuah table dan copas contoh table ini:
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');
File pertama adalah config Files:
Simpan dengan nama : “config.php”
Simpan dengan nama : “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]");
?>
file kedua adalah file javascript untuk AJAX
simpan dengan nama “ajax.js”
simpan dengan nama “ajax.js”
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="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="OK, value belum digunakan!!!"; // Tambahkan Image bila diingnkan di dalam string
}
else
{
document.getElementById("imgTry").innerHTML="Value sudah ada!!!"; // Tambahkan Image bila diingnkan di dalam string
}
}
}
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="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="OK, value belum digunakan!!!"; // Tambahkan Image bila diingnkan di dalam string
}
else
{
document.getElementById("imgTry").innerHTML="Value sudah ada!!!"; // Tambahkan Image bila diingnkan di dalam string
}
}
}
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;
}
Terakhir Halaman pemanggil…
Simpan dengan nama terserah yang penting extensinya “.php”
Simpan dengan nama terserah yang penting extensinya “.php”
<?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 -DEMO-</title>
<script language="javascript" src="ajax.js"></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>
<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" onblur="Checker()" /> <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 -DEMO-</title>
<script language="javascript" src="ajax.js"></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>
<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" onblur="Checker()" /> <span id="imgTry"> </span>
</label>
</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
yang perlu diperhatikan adalah:
di dalam tag untuk textbox terdapat perintah untuk memanggil fungsi “checker” yaitu memanggil fungsi di dalam file “ajax.js”. gw memakai opsi “onblur” yang artinya memamanggil fungsi saat kursor sudah tidak di dalam text field tersebut. Sedangkan berikutnya, terdapat :
di dalam tag untuk textbox terdapat perintah untuk memanggil fungsi “checker” yaitu memanggil fungsi di dalam file “ajax.js”. gw memakai opsi “onblur” yang artinya memamanggil fungsi saat kursor sudah tidak di dalam text field tersebut. Sedangkan berikutnya, terdapat :
Adalah tempat nantinya hasil dari pengecekan ditulis.
Tips :
Untuk mempercantik, biasanya pada saat pengecekan diberi gambar animasi untuk menandakan sedang “loading”. bagian itu terdapat di dalam “ajax.js” pada line:
document.getElementById("imgTry").innerHTML="Checking!!";
Dan biasanya juga pada bagian hasil-ditambahkan gambar yang menarik untuk mempercantik tampilan.
Extra :
DEMO
Download Full Files
Pada contoh yang bisa di download, didemonstrasikan hasil dari tutorial di atas, dan juga ditambah extra opsi “onkeyup” yang artinya setiap karakter baru tertulis, maka akan dicek ke dalam database.
Popularity: 10% [?]
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.
