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..

Dari tutorial sebelumnya kita akan mempunyai 2 file yaitu 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>
<script src="jquery.js" type="text/javascript"></script>
<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>

dan file “ajax.php” yang berisi seperti ini:

<?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>";
}
}
?>

Langkah pertama agar data kabupaten diperoleh dari database adalah menyiapkan database. Disini kita ambil contoh menggunakan DBMS MySQL, pertama kita buat database dengan nama “test”, kemudian dalam database “test” tersebut kita buat table “kabupaten” dan mengisinya seperti pada file “ajax.php” diatas.

create table kabupaten (
id_kabupaten int not null primary key,
id_propinsi int,
nama_kabupaten varchar2(30)
);
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('1','1','Subang');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('2','1','Karawang');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('3','1','Bandung');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('4','2','Cilacap');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('5','2','Semarang');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('6','2','Brebes');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('7','3','Surabaya');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('8','3','Malang');
insert into kabupaten(id_kabupaten,id_propinsi,nama_kabupaten) values('9','3','Banyuwangi');

Setelah database siap dan data kabupaten siap, selanjutnya kita hanya perlu mengubah sedikit file “ajax.php” agar bisa mengakses database “test” untuk mendapatkan data kabupaten di tabel “kabupaten”.

Isi file “ajax.php” menjadi:

<?php
if(isset($_GET) && $_GET['op']=='generatecombokabupaten') {
$prop = $_GET['prop'];
//konek ke mysql
$conn = mysql_connect("localhost","root","");
$db = mysql_select_db("test",$conn);
//get data
$statement = mysql_query("select * from kabupaten where id_propinsi='$prop' order by nama_kabupaten asc", $conn);
while($arr = mysql_fetch_array($statement)) {
echo "<option value='".$arr['id_kabupaten']."'>".$arr['nama_kabupaten']."</option>";
}
}

Selamat mencoba, semoga bermanfaat