ComboBox Dinamis dengan jQuery dan AJAX sering kita jumpai di aplikasi website. Biasanya pada aplikasi website berupa e-commerce, dimana biasanya ComboBox Dinamis dengan AJAX digunakan untuk form pengisian nama kota dan kabupaten si pembeli. Bagaimana implementasinya? Mari kita bahas.Baiklah kita mulai saja. Pertama kita buat dulu databasenya. Saya membuat dengan nama test dan terdiri dari 2 table yakni provinsi dan kota. Berikut query-nya:
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; -- -- Database: `test` -- -- -------------------------------------------------------- -- -- Table structure for table `kota` -- CREATE TABLE `kota` ( `id_kota` int(5) NOT NULL auto_increment, `nama_kota` varchar(100) NOT NULL, `id_provinsi` int(5) NOT NULL, PRIMARY KEY (`id_kota`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=8 ; -- -- Dumping data for table `kota` -- INSERT INTO `kota` VALUES (1, 'Kuningan', 1); INSERT INTO `kota` VALUES (2, 'Cirebon', 1); INSERT INTO `kota` VALUES (3, 'Tegal', 2); INSERT INTO `kota` VALUES (4, 'Surabaya', 3); INSERT INTO `kota` VALUES (5, 'Solo', 2); INSERT INTO `kota` VALUES (6, 'Semarang', 2); INSERT INTO `kota` VALUES (7, 'Sidoarjo', 3); -- -------------------------------------------------------- -- -- Table structure for table `provinsi` -- CREATE TABLE `provinsi` ( `id_provinsi` int(5) NOT NULL auto_increment, `nama_provinsi` varchar(100) NOT NULL, PRIMARY KEY (`id_provinsi`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ; -- -- Dumping data for table `provinsi` -- INSERT INTO `provinsi` VALUES (1, 'JAWA BARAT'); INSERT INTO `provinsi` VALUES (2, 'JAWA TENGAH'); INSERT INTO `provinsi` VALUES (3, 'JAWA TIMUR');Kemudian lanjut ke coding. Kita buat sintak untuk koneksi ke database, beri nama file koneksi.php.
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
?>
Kemudian buat file index.php untuk menyajikan data Combobox dengan isi nama provinsi.
<html>
<head>
<title>Combo Dinamis</title>
</head>
<body>
<?php
include("koneksi.php");
$query = mysql_query("SELECT * FROM provinsi");
echo "<select name='prov' onchange='ambil_kota($(this).val())'>";
while( $data = mysql_fetch_array( $query ) ){
echo "<option value='".$data['id_provinsi']."'>".$data['nama_provinsi']."</option>";
}
echo "</select>";
?>
<div class="kota"></div>
</body>
</html>
Kemudian lanjut ke bagian jQuery. Kita masukkan File jQuery ke dalam root project kita. Jika belum punya silahkan download disini. http://code.jquery.com/jquery-1.7.2.min.js. Setelah itu tambahkan beberapa baris script pada head index. Menjadi seperti berikut:
<html>
<head>
<title>Combo Dinamis</title>
<script language="javascript" src="jquery-1.7.2.js"></script>
</head>
<body>
<?php
include("koneksi.php");
$query = mysql_query("SELECT * FROM provinsi");
echo "<select name='prov' onchange='ambil_kota($(this).val())'>";
while( $data = mysql_fetch_array( $query ) ){
echo "<option value='".$data['id_provinsi']."'>".$data['nama_provinsi']."</option>";
}
echo "</select>";
?>
<div class="kota"></div>
</body>
</html>
Setelah itu kita buat terlebih dahulu script untuk mengambil data kota berdasarkan id_provinsi. Kita buat dalam file getdata.php.
<?php
include("koneksi.php");
$id_prov = $_GET['id_prov'];
$query = mysql_query("SELECT * FROM kota WHERE id_provinsi ='$id_prov'");
echo "<select name='kota'>";
while( $data = mysql_fetch_array( $query ) ){
echo "<option value='".$data['id_kota']."'>".$data['nama_kota']."</option>";
}
echo "</select>";
?>
Lanjut, kita gunakan metode AJAX untuk mendapatkan datanya tanpa harus refresh halaman. Tambahkan sintak berkut ke file index.php.
<script>
$(document).ready(function(){
});
function ambil_kota(id_prov){
$.ajax({
url: "getdata.php?id_prov="+id_prov,
success: function(msg){
$('.kota').html(msg);
},
dataType: "html"
});
}
</script>
Secara keseluruhan akan menjadi seperti berikut:
<html>
<head>
<title>Combo Dinamis</title>
<script language="javascript" src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
});
function ambil_kota(id_prov){
$.ajax({
url: "getdata.php?id_prov="+id_prov,
success: function(msg){
$('.kota').html(msg);
},
dataType: "html"
});
}
</script>
</head>
<body>
<?php
include("koneksi.php");
$query = mysql_query("SELECT * FROM provinsi");
echo "<select name='prov' onchange='ambil_kota($(this).val())'>";
while( $data = mysql_fetch_array( $query ) ){
echo "<option value='".$data['id_provinsi']."'>".$data['nama_provinsi']."</option>";
}
echo "</select>";
?>
<div class="kota"></div>
</body>
</html>
Sekarang silahkan Anda mencoba. Jika kita mengganti nama provinsinya, maka akan tampil secara otomatis kota-kota yang berada dalam provinsi tersebut.
Download Combobox Dinamis dengan jQuery dan AJAX
2 comments:
mas mau tanya, andai sudah jadi nah mau diinsert ke database tuh combobox, tapi yang ke insert cuma yang atas bagaimana caranya agar semua combobox terinsert ke database
Mungkin maksudnya supaya nilai dari dua combobox itu masuk ke database ya? Kalau kasus yang saya berikan antara table provinsi dan kota memiliki relasi 1 to many. Jadi id_provinsi pada table provinsi berelasi dengan id_provinsi pada table kota. Jadi cukup memasukan kotanya saja. Nanti dipanggil dengan SQL JOIN.
Bisa juga dengan memasukkan dua-duanya dengan membuat variable tipe POST. Kira-kira begini:
$kota = $_POST['kota'];
$provinsi = $_POST['prov'];
Nanti tinggal diinsert aja ke Database.
Post a Comment