Mengisi List Menu dengan AJAX

BY IN AJAX Comments Off on Mengisi List Menu dengan AJAX

Mengapa menggunakan AJAX?
Dengan AJAX, kita bisa mengambil data dari database tanpa harus refresh halaman. Hal ini tentu saja memberikan beberapa keuntungan
diantaranya proses query database menjadi jauh lebih cepat, jika dibanding cara lama, karena sebenarnya ada proses server side yang sedang berjalan, hanya saja user tidak sempat merasakannya, seolah-olah prosesnya hanya terjadi diclient.
Berikut ini adalah salah satu aplikasi AJAX yang saya gunakan yaitu mengambil harga kamar hotel sesuai dengan tipe kamar hotel yang dipilih user. User akan memilih tipe kamar lewat Select Menu, lalu program akan langsung mengambil nilai yang bersesuaian dengan yang dipilih user. Aplikasi ini nanti bisa kita modifikasi untuk aplikasi lainnya, misalnya anda ingin menampilkan nilai siswa tanpa harus refresh halaman. Hal itu bisa saja kita lakukan dengan AJAX.

Langkah pertama:
Kita include Java Scriptnya di bagian tag head

<script src=”selectrate.js”></script>

Langkah kedua:
Pada bagian List Menu, kita tambahkan method showRate. Method ini dipanggil dari file javascript yang kita include pada bagian head. Isi dari List Menu bisa saja kita isi dengan kode PHP. Karena sudah sangat umum, cara untuk mengisi List Menu dengan PHP tidak kita bahas disini.

<select name=”txt_roomtype” onChange=”showRate(this.value)”>

berikutnya, kita gunakan tag div dengan id txtHint, dimana di dalam tag ini nantinya akan kita munculkan harga yang sesuai dengan tipe kamar yang dipilih user.

<div id=”txtHint”>
Pilih Tipe Kamar untuk mengeluarkan Rate</div>

Langkah ketiga:
Kita akan menulis script AJAX, lalu beri name selectrate.js. Ada tiga hal yang perlu kita perhatikan disini:
1. variabel url, diisi dengan file php yang akan kita buat untuk menciptakan hubungan koneksi dengan MySQL Database.
2. Perhatikan parameter str, adalah nilai yang dipassing dari even onChange, dengan kata lain, str ini nanti adalah kunci untuk query SQL yang akan kita lakukan di file php yang akan kita buat. contoh nama file: hotelajax.php
3. Parameter q nantinya berisi nilai str, yang dapat kita ambil dengan variabel server $_GET.
Dari penjelasan ini, kita dapat memahami prinsip AJAX untuk aplikasi ini dengan mudah. Berikut adalah script AJAX

var xmlHttp

function showRate(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert (“Browser does not support HTTP Request”)
return
}
var url=”hotelajax.php”
url=url+”?q=”+str
url=url+”&sid=”+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open(“GET”,url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
{
document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}

Langkah keempat:
Kita akan menulis script PHP dengan nama hotelajax.php untuk mengeksekusi query SQL. Perhatikan parameter q yang dijadikan filter query adalah sesuai dengan pilihan user.

<?php
if (isset($_GET[‘q’]))
{
$q=$_GET[“q”];
$sql=”SELECT * FROM roomtype WHERE roomtype = ‘”.$q.”‘”;
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
$rate=$row[‘rate’];
echo “<input name=txt_rate type=text value=$rate size=15 readonly>”;
}
}
?>

Sebenarnya masih banyak aplikasi AJAX yang lebih rumit jika dibandingkan aplikasi sederhana diatas. Semoga informasi ini berguna untuk membantu rekan2 developer dalam memahami AJAX.




Comments are closed.