JQuery Ajax dengan mengakses database

Postingan kali ini adalah sambungan dari postingan sebelumnya tentang contoh penggunaan JQuery Ajax, karena saya sudah berjanji pada mas firma. Jika tertarik, sebaiknya teman-teman membaca postingan sebelumnya karena disini saya tidak akan mengulang dari awal, hanya melanjutkan.

Pada postingan sebelumnya diberikan contoh bagaimana cara menggunakan JQuery Ajax untuk meng-generate combo box (html select) kabupaten secara otomatis, namun data kabupaten didapat dari hard-code. Pada postingan kali ini saya akan berikan contoh bagaimana jika data kabupaten didapat dari database.

Langsung saja..

Men-generate Otomatis Option HTML Menggunakan JQuery Ajax

Misalkan kita ingin isi dari combo box (select) di generate otomatis isinya ketika ada event terhadap suatu komponen lain. Dalam contoh disini misalkan kita akan meng-generate combo box kabupaten ketika combo box propinsi dipilih.

Misalkan ada file “latihan.html” yang berisi seperti ini:

<select id="comboPropinsi" name="comboPropinsi">
<option value=""></option>
<option value="1">Jawa Barat</option>
<option value="2">Jawa Tengah</option>
<option value="3">Jawa Timur</option>
</select>
</br>
<select id="comboKabupaten" name="comboKabupaten">
</select>

Kita ingin combo box kabupaten diisi sesuai dengan propinsi yang dipilih oleh user di combo box propinsi. Kita akan menggunakan ajax jquery untuk melakukan hal ini. Kopi kan source code javascript berikut di bagian atas file “latihan.html”

<script type="text/javascript">
$(document).ready(function(){
 //apabila terjadi event onchange terhadap object <select id=comboPropinsi>
 $("#comboPropinsi").change(function(){
 var prop = $("#comboPropinsi").val();
 $.ajax({
 url: "ajax.php",
 data: "op=generatecombokabupaten&prop="+prop,
 cache: false,
 success: function(msg){
 //jika data sukses diambil dari server kita tampilkan
 //di <select id=comboKabupaten>
 $("#comboKabupaten").html(msg);
 }
 });
 });
 });
</script>

Oya, sebelumnya teman2 harus download dulu library jquery nya disini, simpan file library jquery yang telah di download tersebut di folder yang sama dengan file “latihan.html”. Misalkan nama file library jquery yang di-download adalah “jquery.js”, jangan lupa untuk menambahkan script ini di bagian paling atas file “latihan.html”:

<script src="jquery.js" type="text/javascript"></script>

Saya akan menjelaskan fungsi ajax di jquery dibawah ini. Sebelumnya, bagi yang belum tahu, dengan ajax kita bisa me request ke server tanpa harus me load semua halaman web seperti biasanya. Request bisa berupa method GET ataupun POST, tapi biasanya jika tidak didefiniskan maka defaultnya adalah method GET yang dipakai.

$.ajax({
 url: "ajax.php",
 data: "op=generatecombokabupaten&prop="+prop,
 cache: false,
 success: function(msg){
 $("#comboKabupaten").html(msg);
 }
 });

fungsi ajax memiliki 4 parameter yang harus diisi yaitu:

1. URL : file di server yang menjadi tujuan request

2. data : berisi parameter yang akan dikirim ke file di server tersebut

3. cache : bisa bernilai true atau false, apakah menggunakan cache atau tidak

4. success : isi dengan suatu fungsi javascript. jika request sukses dan server mengembalikan respon maka akan menjalankan fungsi javascript yang ada di dalam parameter success ini.

Oke, balik lagi ke tutorialnya. Setelah file “latihan.html” telah selesai dibuat, simpan di folder web server teman2, misalnya di folder “htdocs” bagi yang menggunakan web server apache. Setelah itu teman2 harus membuat file “ajax.php” yang berfungsi untuk menangani request dari file “latihan.html”. Di file “ajax.php” ini akan di-generate isi dari combo box kabupaten berdasarkan propinsi yang dipilih user di file “latihan.html”. Berikut isi file “ajax.php”:

<?php
if(isset($_GET) && $_GET['op']=='generatecombokabupaten') {
$prop = $_GET['prop'];
if($prop==1) { //jika user memilih propinsi jawa barat
echo "<option value='1'>Subang</option>";
echo "<option value='2'>Karawang</option>";
echo "<option value='3'>Bandung</option>";
}
else if($prop==2) { //jika user memilih propinsi jawa tengah
echo "<option value='4'>Cilacap</option>";
echo "<option value='5'>Semarang</option>";
echo "<option value='6'>Brebes</option>";
}
else if($prop==3) { //jika user memilih propinsi jawa timur
echo "<option value='7'>Surabaya</option>";
echo "<option value='8'>Malang</option>";
echo "<option value='9'>Banyuwangi</option>";
}
}
?>

Setelah selesai membuat file “ajax.php”, simpan file tersebut satu folder dengan file “latihan.html”. Setelah itu teman2 bisa menguji tutorial ini di browser, jika semua file disimpan di root folder web server, coba ketikkan “http://localhost/latihan.html” di address bar browser teman2. Mula2 akan muncul combo box propinsi dan combo box kabupaten, combo box kabupaten tidak ada isi nya. Cobakan untuk memilih salahsatu propinsi di combo box propinsi, jika combo box kabupaten terisi options berarti kita telah berhasil menerapkan ajax jquery.

Untuk saat ini tutorialnya ini dulu, semoga bermanfaat