Dec 8, 2011
Ajax atau Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web untuk membuat aplikasi web lebih baik, lebih cepat di akses, dan lebih interaktif. Tapi AJAX bukan merupakan bahasa pemrograman yang baru.
Untuk mempelajari Ajax, sebelumnya kita harus punya pengetahuan dasar dulu tentang:
- HTML
- JavaScript
- PHP
Oke, sekian tentang pengelana Ajax, sekarang mari kita bahas apa yang ada di judul. Berhubung di kantor ada project kecil, membuat program antrian. Dan program antrian itu dibuat berbasis web. Masalahnya, bagaimana menampilkan Nomor Antrian di display utama secara otomatis?? Karena data antrian tersebut diambil dari Database. Yap, sudah seharian ini saya mencari cara bagaimana Data yang ada di Database dapat dibaca secara otomatis tanpa me-refresh halaman. akhirnya nemu juga di http://www.w3schools.com/ , meskipun tutorialnya disana gka begitu detail. dengan pengetahuan programing yang gak seberapa , saya coba untuk memodifikasi code tersebut. Dan , alhasil ` Alhamdulillah yah Sukses!!! data antrian dapat berubah otomatis ketika nomor antrian dipanggil.
Cara nya gimana? gampang, pertama buat file screen.php. gini nih code nya:
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET","main.php",true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
setTimeout( "loadXMLDoc()", 1000 );
}
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}
document.getElementById('copy').innerHTML=xmlhttp.response;
document.getElementById("sound_element").innerHTML=
"<embed src='"+sound_file_url+"' hidden=true autostart=true loop=false>";
}
</script>
<link rel="stylesheet" type="text/css" href="../css/antrian.css" />
</head>
<body onLoad="loadXMLDoc()"><center>
<table align="center" width="60%" height="100%" border=0>
<tr><td height="4%" colspan="2" align="center"><jenis>Antrian Nomor</jenis> </td></tr>
<tr>
<th height="95%" valign="top"><div id="copy"> </div>
</th></tr><tr><td height="1%"><br/> <marquee>Terima Kasih telah menunggu</marquee></td></tr>
</table>
<div id="sound_element"></div></center>
</body>
</html>
Pada halaman screen.php ini ada code xmlhttp.open("GET","main.php",true); maksudnya file main.php akan di cek secara otomatis jika ada perubahan. Nah, langkah selanjutnya adalah buat file main.php sebagai fungsi menampilkan datanya. gini nih code nya:
<angka><?php
include "../include/koneksi.php";
$waktu= date ("Y-m-d");
$query = mysql_query("select * from antrian2 where flag=2 and waktu like'%$waktu%' ORDER by no_antrian DESC LIMIT 1");
while($d = mysql_fetch_array($query)){
?>
<?php echo $d['no_antrian'];
?>
<?php
}
?>
</angka>
Okeh, selesai. sekarang tinggal jalankan file screen.php! Kalo mau lihat versi demo nya klik disini