Membuat Combobox Bertingkat Filter Empat Tabel Pada PHP dan MySQL merupakan sebuah postingan tutorial yang menjawab sebuah komentar pada postingan sebelumnya tentang Membuat Combobox Bertingkat Pada PHP dan MySQL, Filter Prodi. Namun, dalam postingan kali ini saya akan membuat contoh penerapan dalam pemilihan wilayah daerah.
Model penginputan filter combobox bertingkat pada contoh penerapan combobox ini sama dengan postingan Combobox Bertingkat yang dibuat sebelumnya namun kali ini menggunakan proses filter dengan 4 (empat) table sekaligus dengan fungsi yang sama yaitu combobox kedua, ketiga dan seterusnya akan disabled (terkunci alias tidak berfungsi) sebelum combobox pertama dan kedua dipilih. Contoh gambar seperti berikut:
Bagaimana membuat combobox
bertingkat untuk filter 4 (empat) tabel pada PHP dan MySQL.?. Berikut adalah
langkah-langkah membuat combobox bertingkat pada PHP dan MySQL:
Pertama: Siapkan terlebih
dahulu sebuah database pada php myadmin (contoh nama database: wilayah).
<?php
$conn=($GLOBALS["___mysqli_ston"] =
mysqli_connect("localhost", "root", "")) or
die("Tidak Terkoneksi");
$db=mysqli_select_db($GLOBALS["___mysqli_ston"],
"wilayah") or die ("Database Tidak Terdeteksi");
?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta
charset="utf-8">
<meta
http-equiv="x-ua-compatible" content="ie=edge">
<title> kodingbuton.com
</title>
<meta
name="description" content="">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://fonts.googleapis.com/css?family=Play:400,700"
rel="stylesheet">
<link
rel="stylesheet" href="css/bootstrap.min.css">
<link
rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class='col-sm-6 col-xs-6 col-md-6'>
<br>
<div class="hpanel">
<h4>Combobox Bertingkat Filter Empat Tabel </h4>
</div>
<hr>
<form action=""id="loginForm"
method="post">
<!-- Pembuatan Combobox Pertama/Pemilihan provinsi -->
<div class="form-group">
<label class="control-label" for="1">Pilihan
Satu</label>
<select id="provinsi" name="provinsi"
class="form-control">
<option>Pilih..</option>
<?php
$query = mysqli_query($GLOBALS["___mysqli_ston"], "SELECT
* FROM provinsi ORDER BY id_provinsi");
while ($row = mysqli_fetch_array($query)) {
?>
<option value="<?php echo $row['provinsi'];
?>"><?php echo $row['provinsi']; ?></option>
<?php } ?>
</select>
</div>
<!-- Pembuatan Combobox Kedua/Pemilihan kab_kot -->
<div class="form-group">
<label class="control-label" for="2">Pilihan
Dua</label>
<select id="kab_kot" name="kab_kot"
class="form-control">
<option value="">Pilih..</option>
<?php
$query = mysqli_query($GLOBALS["___mysqli_ston"], "SELECT
* FROM kab_kot INNER JOIN provinsi ON kab_kot.id_provinsi =
provinsi.id_provinsi ORDER BY id_kab_kot");
while ($row = mysqli_fetch_array($query)) {
?>
<option id="kab_kot" class="<?php echo
$row['provinsi']; ?>" value="<?php echo $row['kab_kot'];
?>"><?php echo $row['kab_kot']; ?></option>
<?php } ?>
</select>
</div>
<!-- Pembuatan Combobox Ketiga/Pemilihan kecamatan -->
<div class="form-group">
<label class="control-label" for="2">Pilihan
Tiga</label>
<select id="kecamatan" name="kecamatan"
class="form-control">
<option value="">Pilih..</option>
<?php
$query = mysqli_query($GLOBALS["___mysqli_ston"], "SELECT
* FROM kecamatan INNER JOIN kab_kot ON kecamatan.id_kab_kot =
kab_kot.id_kab_kot INNER JOIN provinsi ON kab_kot.id_provinsi =
provinsi.id_provinsi ORDER BY id_kecamatan");
while ($row = mysqli_fetch_array($query)) {
?>
<option id="kecamatan" class="<?php echo
$row['kab_kot']; ?>" value="<?php echo $row['kecamatan'];
?>"><?php echo $row['kecamatan']; ?></option>
<?php } ?>
</select>
</div>
<!-- Pembuatan Combobox Ketiga/Pemilihan kelurahan/desa -->
<div class="form-group">
<label class="control-label" for="2">Pilihan
Tiga</label>
<select id="des_kel" name="des_kel"
class="form-control">
<option value="">Pilih..</option>
<?php
$query = mysqli_query($GLOBALS["___mysqli_ston"], "SELECT
* FROM des_kel INNER JOIN kecamatan ON des_kel.id_kecamatan = kecamatan.id_kecamatan INNER JOIN kab_kot ON
kecamatan.id_kab_kot = kab_kot.id_kab_kot INNER JOIN provinsi ON
kab_kot.id_provinsi = provinsi.id_provinsi ORDER BY id_des_kel");
while ($row = mysqli_fetch_array($query)) {
?>
<option id="des_kel" class="<?php echo
$row['kecamatan']; ?>" value="<?php echo $row['des_kel'];
?>"><?php echo $row['des_kel']; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<input name="simpan" class="btn btn-success"
type="submit" id="simpan" value="Simpan" />
<input name="batal" class="btn btn-danger"
type="reset" id="batal" value="Batal" />
</div>
</form>
</div>
</div>
</div>
</body>
<!--//kodingbuton.com-->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.chained.min.js"></script>
<script>
$("#kab_kot").chained("#provinsi");
$("#kecamatan").chained("#kab_kot");
$("#des_kel").chained("#kecamatan");
Keterangan **:
- Komponen proses koding yang disimulasikan pada tutorial ini menggunakan bootstrap.min untuk file css dan javascrip-nya. Silahkan sesuaikan dengan projek pembuatan aplikasi yang anda kerjakan.
- Teks yang berlatar belakang orange merupakan tahapan-tahapan pengkodean.
- Teks yang berlatar belakang ungu merupakan javascript komponen tambahan dalam proses filter combobox bertingkat berupa: (jquery.chained.min.js dan jquery-1.10.2.min.js). Kedua komponen ini merupakan file penting dalam proses filter data.
- Teks berlatar belakang hijau merupakan script yang akan meng-eksekusi combobox bertingkat untuk filter data berdasarkan combobox pilihan pertama.
Semua komponen dan kodingan
tersebut dapat diperoleh secara gratis dengan cara: di Download disini...
Jangan lupa kunjungi juga beragam kodingan
aplikasi Disini.
Demikian tutorial tentang
membuat combobox bertingkat filter 4 (empat) tabel pada PHP dan MySQL, semoga
bermanfaat dan memberi inspirasi buat proses pembuatan koding website yang sedang dikerjakan...!
Post a Comment