Membaca data otomatis dengan Ajax

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:
  1. HTML
  2. JavaScript
  3. PHP
Dengan menggunakan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan. 


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
Share on Google Plus

About Kurnia Rahman

Kurnia Rahman Agus - Programmer lepas yang mengisi hari-harinya dengan memberikan ilmu kepada siswa-siswi di salah satu SMK di Pekanbaru. Beliau aktif di beberapa komunitas seperti Blogger Bertuah dan Baleno Club Riau.

3 comments :

  1. Maksih sob buat tutorialnya :D
    nice pisan euy

    ReplyDelete
  2. Terimakasih sebelumnya saya ucapkan. Saya sudah coba di komputer kantor dengan mozilla v.6 dan berhasil. ketika saya bawa ke rumah, dengan mozilla yang ada adalah v.3, muncul di halaman screen.php nya keterangan undefined.
    Mohon penjelasannya. Terimakasih.

    ReplyDelete

Terima kasih telah berkunjung, Semoga Bermanfaat..