Dropdown bertingkat dapat diartikan sebagai dropdown yang saling ketergantungan kepada nilai yang lebih tinggi atau yang berhubungan.
Setelah disibukkan dengan membuat artikel mengenai beasiswa, akhirnya saya memulai lagi untuk berbagi tutorial di bidang web development. Well, Pada kesempatan kali ini, saya ingin berbagi tutorial mengenai cara membuat dropdown bertingkat dengan menggunakan jQuery dan Ajax. Studi kasus dalam tutorial ini adalah wilayah di Indonesia.
Tidak jarang, kita sering melihat dropdown bertingkat baik dalam pemrograman web maupun pemrograman mobile. Dropdown bertingkat dapat diartikan sebagai dropdown yang saling berhubungan tergantungan kepada nilai yang lebih tinggi atau yang berhubungan. Misalnya, dalam kasus kita kali ini, saat kita memilih provinsi, maka data kabupaten/kota di bawahnya akan otomatis menampilkan data kabupaten/kota yang ada pada provinsi tersebut. Contoh lainnya misalnya saat kita memilih jenis ponsel, kemudian data dalam dropdown akan otomatis menapilkan ponsel berdasarkan jenis ponsel yang kita pilih.
Dengan teknologi sekarang, dropdown bertingkat ini dapat dilakukan secara server-side. Artinya, kita tidak perlu me-refresh halaman pencarian kita. Perhatikan cuplikasi gambar di bawah ini:
Ringkasan
File yang akan dibuat pada latihan kita kali ini ada 3 (tiga) file, yaitu:
- index.php
- koneksi.php
- loadData.php
Tabel yang dibuat adalah tabel db_kependudukan.
Langkah 1: Siapkan database dan data wilayah Indonesia
Buatlah sebuah database dengan nama "db_kependudukan" (tanpa tanda petik)! Kemudian import data wilayah berikut ke dalam database "db_kependudukan" yang tadi sudah dibuat.
Download data wilyah Indonesia:
[lock][Download ##download##][/lock]
Langkah 2: Buat file koneksi ke database
Salin script berikut ini dan simpan dalam folder yang proyek kawan-kawan dengan nama "koneksi.php"
[<?php
$hostname = "localhost";
$dbusername = "root"; /*Nama username database Anda*/
$dbpassword = ""; /*Password database Anda*/
$dbname = "db_kependudukan"; /*Nama database Anda*/
$koneksi = mysqli_connect($hostname, $dbusername, $dbpassword, $dbname);
if(!$koneksi){
echo "Koneksi ke database gagal!";
}
?>]
Langkah 3: Membuat file index
Langkah selanjutnya adalah membuat file index sebagai halaman awal kita nanti. Buatlah sebuah file dengan nama "index.php" dan salin script berikut:
[<?php
require_once('koneksi.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Wilayah</title>
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
function loadKabupaten() {
var id_provinsi = $('#provinsi').val();
$.ajax({
type: 'GET',
url: 'loadData.php',
data: "id_provinsi=" + id_provinsi,
success: function(data){
if(data.length > 0){
$('#kabupaten').html(data);
} else {
$('#kabupaten').html("<option>Pilih Kabupaten/Kota</option>");
$('#kecamatan').html("<option>Pilih Kecamatan</option>");
$('#kelurahan').html("<option>Pilih Kelurahan/Desa</option>");
}
}
});
}
function loadKecamatan() {
var id_kabupaten = $('#kabupaten').val();
$.ajax({
type: 'GET',
url: 'loadData.php',
data: "id_kabupaten=" + id_kabupaten,
success: function(data){
$('#kecamatan').html(data);
}
});
}
function loadKelurahan() {
var id_kecamatan = $('#kecamatan').val();
$.ajax({
type: 'GET',
url: 'loadData.php',
data: "id_kecamatan=" + id_kecamatan,
success: function(data){
$('#kelurahan').html(data);
}
});
}
</script>
<style type="text/css">
.select {
width: 200px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Nama Provinsi</td>
<td>
<select id="provinsi" onchange="loadKabupaten()" class="select">
<option value="0">Pilih Provinsi</option>
<?php
$tableQry = mysqli_query($koneksi, "SELECT * FROM provinces");
while($dataProvinsi = mysqli_fetch_array($tableQry)){
?>
<option value="<?php echo $dataProvinsi['id']; ?>"><?php echo $dataProvinsi['name']; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Nama Kabupaten/Kota</td>
<td>
<select id="kabupaten" onchange="loadKecamatan()" class="select">
<option>Pilih Kabupaten/Kota</option>
</select>
</td>
</tr>
<tr>
<td>Nama Kecamatan</td>
<td>
<select id="kecamatan" onchange="loadKelurahan()" class="select">
<option>Pilih Kecamatan</option>
</select>
</td>
</tr>
<tr>
<td>Nama Kelurahan/Desa</td>
<td>
<select id="kelurahan" class="select">
<option>Pilih Kelurahan/Desa</option>
</select>
</td>
</tr>
</table>
</body>
</html>]
Membuat File untuk Me-load Data Wilayah
[Updated - 06 April 2017] Langkah selanjutnya adalah membuat file yang akan me-load data wilayah saat kita memilih wilayah induk. Misalnya, saat kita memilih Provinsi Jawa Barat; maka wilayah anaknya akan menampilkan semua Kabupaten/Kota yang berada di Provinsi Jawa Barat; begitu juga seterusnya.
Buatlah sebuah file dengan nama loadData.php dan simpan bersama file latihan kita kali ini! Berikut adalah skripnya:
[<?php
require_once('koneksi.php');
$id_provinsi = @$_GET['id_provinsi'];
$id_kabupaten = @$_GET['id_kabupaten'];
$id_kecamatan = @$_GET['id_kecamatan'];
if(isset($id_provinsi)){
$tableQry = mysqli_query($koneksi, "SELECT * FROM regencies WHERE province_id = '$id_provinsi'");
while ($dataKabupaten = mysqli_fetch_array($tableQry)) {
echo "<option value=" . $dataKabupaten['id'] . ">" . $dataKabupaten['name'] . "</option>";
}
}
if(isset($id_kabupaten)){
$tableQry = mysqli_query($koneksi, "SELECT * FROM districts WHERE regency_id = '$id_kabupaten'");
while ($dataKecamatan = mysqli_fetch_array($tableQry)) {
echo "<option value=" . $dataKecamatan['id'] . ">" . $dataKecamatan['name'] . "</option>";
}
}
if(isset($id_kecamatan)){
$tableQry = mysqli_query($koneksi, "SELECT * FROM villages WHERE district_id = '$id_kecamatan'");
while ($dataKelurahan = mysqli_fetch_array($tableQry)) {
echo "<option value=" . $dataKelurahan['id'] . ">" . $dataKelurahan['name'] . "</option>";
}
}
?>]
COMMENTS