Pada kesempatan kali ini, kita akan membahas mengenai bagaimana mengisi ComboBox secara otomatis ketika ComboBox yang lain memilih data. Masalah tersebut mungkin bisa dibilang masalah sederhana bagi para website developer senior. Namun,
bagi kita sebagai developer junior bahkan mungkin masih newbie (pemula) hal tersebut merupakan masalah yang cukup serius.
bagi kita sebagai developer junior bahkan mungkin masih newbie (pemula) hal tersebut merupakan masalah yang cukup serius.
Mengisi ComboBox otomatis yang dimaksud yaitu ketika kita memilih data pada suatu ComboBox A, maka ComboBox B akan terisi option sesuai dengan data yang dipilih pada ComboBox A. Sebagai contoh, terdapat 3 (tiga) ComboBox dengan nama Prov, Kab, dan Kec. dimana ComboBox Prov sudah terisi daftar provinsi di Indonesia, sedangkan ComboBox Kab dan Kec dalam keadaan kosong. Ketika ComboBox Prov memilih data, maka ComboBox Kab akan secara otomatis terisi sedangkan ComboBox Kec masih dalam keadaan kosong. Kemudian ketika ComboBox Kab dipilih data, maka ComboBox Kec akan secara otomatis juga terisi data sesuai dengan data yang dipilih pada ComboBox Kab.
Bagaimana cara yang dapat dilakukan untuk mengatasi masalah di atas? jQuery merupakan sebuah library JavaScript yang berisi kumpulan fungsi-fungsi yang membantu kita dalam menuliskan suatu kode. Dengan memanfaatkan jQuery perihal di atas dapat kita atasi dengan lebih mudah.
Untuk membuat pengisian ComboBox secara otomatis, lakukan langkah-langkah berikut:
Pertama, siapkan jQuery yang akan kita gunakan fungsi-fungsinya. Jika sahabat belum memiliki, dapat mengunduhnya DI SINI.
Selanjutnya buatlah sebuah project website pada web server sahabat. Misalnya AppServ buatlah folder dengan nama COMBOBOX pada folder WWW atau pada folder HTDOCS untuk XAMPP. Dalam pembahasan ini, web server yang digunakan adalah AppServ sehingga folder yang digunakan adalah WWW.
Letakkan file jquery yang sudah diunduh / didownload ke dalam folder tersebut.
Buatlah sebuah file 'index.php' pada folder COMBOBOX kemudian buka menggunakan notepad atau notepad++ atau aplikasi sejenis selanjutnya ketik kode berikut:
<html>
<head><title>suruhbelajar.blogspot.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
//apabila terjadi event onchange terhadap object <select id=propinsi>
$("#propinsi").change(function(){
var propinsi = $("#propinsi").val();
$.ajax({
url: "ambilkota.php",
data: "propinsi="+propinsi,
cache: false,
success: function(msg){
//jika data sukses diambil dari server kita tampilkan
//di <select id=kota>
$("#kota").html(msg);
}
});
});
$("#kota").change(function(){
var kota = $("#kota").val();
$.ajax({
url: "ambilkecamatan.php",
data: "kota="+kota,
cache: false,
success: function(msg){
$("#kec").html(msg);
}
});
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost","root","admin");
mysql_select_db("indonesia");
?>
Pilih Provinsi :<br>
<select name="propinsi" id="propinsi">
<option>--Pilih Provinsi--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$propinsi = mysql_query("SELECT * FROM area where idkot='' ORDER BY nama");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[idprov]\">$p[nama]</option>\n";
}
?>
</select>
<br>Pilih Kabupaten/Kota :<br>
<select name="kota" id="kota">
<option>--Pilih Kabupaten/Kota--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$kota = mysql_query("SELECT * FROM area where idkot<>'' and idkec='' ORDER BY nama");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[idkab]\">$p[nama]</option>\n";
}
?>
</select>
<br>Pilih Kecamatan :<br>
<select name="kec" id="kec">
<option>--Pilih Kecamatan--</option>
</select>
</body>
</html>
Selanjutnya, buatlah file 'ambilkota.php' pada folder COMBOBOX kemudian buka dan ketikan kode berikut:
<?php
mysql_connect("localhost","root","admin");
mysql_select_db("indonesia");
$propinsi = $_GET['propinsi'];
$kota = mysql_query("SELECT idkot,nama FROM area WHERE idprov='$propinsi' and idkec='' and idkot<>'' order by nama");
echo "<option>-- Pilih Kabupaten/Kota --</option>";
while($k = mysql_fetch_array($kota)){
echo "<option value=\"".$k['idkot']."\">".$k['nama']."</option>\n";
}
?>
Selanjutnya, buatlah file 'ambilkecamatan.php' kemudian buka dan ketikan kode berikut:
<?php
mysql_connect("localhost","root","admin");
mysql_select_db("indonesia");
$kota = $_GET['kota'];
$kec = mysql_query("SELECT idkec,nama FROM area WHERE idkot='$kota' and idkec<>'' order by nama");
echo "<option>-- Pilih Kecamatan --</option>";
while($k = mysql_fetch_array($kec)){
echo "<option value=\"".$k['idkec']."\">".$k['nama']."</option>\n";
}
?>
Selanjutnya, buatlah database pada phpmysqmin dengan nama 'INDONESIA' kemudian lakukan IMPORT database yang sudah disediakan DI SINI.
Buka browser sahabat dan ketikan 'localhost/combobox' dalam address bar dan lihat hasilnya.
Ulasan di atas menggunakan koneksi dengan konfigurasi:
Server : localhost
User : root
Password: admin
Database : indonesia
Setingan bisa disesuaikan dengan web server yang telah terinstall di komputer sahabat-sahabat semua. Untuk contoh project full source code dapat diunduh / didownload melalui link yang terletak di tengah artikel.
Untuk kritik, saran, dan pertanyaan dapat sahabat kirim melalui komentar di bawah. Semoga ulasan ini bermanfaat. Terima kasih.
Password: suruhbelajar.blogspot.com
Ulasan di atas menggunakan koneksi dengan konfigurasi:
Server : localhost
User : root
Password: admin
Database : indonesia
Setingan bisa disesuaikan dengan web server yang telah terinstall di komputer sahabat-sahabat semua. Untuk contoh project full source code dapat diunduh / didownload melalui link yang terletak di tengah artikel.
Untuk kritik, saran, dan pertanyaan dapat sahabat kirim melalui komentar di bawah. Semoga ulasan ini bermanfaat. Terima kasih.
Password: suruhbelajar.blogspot.com
gan maaf, file databasenya kok ga ada ya?
ReplyDeletecoba link downloadnya diganti selain drive. error
ReplyDelete