Membuat Combobox Bertingkat Pada PHP dan MySQL, Filter Prodi

Membuat combobox bertingkat untuk filter prodi berdasarkan fakultas..? Yaa.. itulah tema pada tutorial singkat kali ini. Penginputan dengan combobox merupakan salah satu jenis item model penginputan yang dilakukan berdasarkan option/pilihan pada form input data. Option atau pilihan pada combobox biasanya ditentukan berdasarkan kebutuhan tiap-tiap form, ada yang meletakan select option combobox pada sintaks PHP dan ada juga yang mengabil select option combobox dari database.

Pada kesempatan kali ini saya akan membagikan inspirasi source code tentang salah satu contoh penginputan select option combobox bertingkat untuk filter salah satu program studi berdasarkan fakultas pada suatu Univeristas. Combobox bertingkat ini terdiri dari 2 (dua) combobox yaitu combobox pertama untuk pemilihan fakultas dan combobox kedua untuk pemilihan program studi (Prodi), yang mana combobox kedua akan disabled (terkunci alias tidak berfungsi) sebelum combobox pertama dipilih. Contoh gambar seperti berikut:

Model penginputan filter combobox bertingkat juga dapat diterapkan pada contoh kasus lainnya, misal: pemilihan daerah tertentu, divisi bagian dan sub bagian pada instansi tertentu dan lain sebagainya.

Lihat juga: Membuat Kode Unik Otomatis Pada PHP dan MySQL

Bagaimana  membuat combobox bertingkat untuk filter prodi berdasarkan fakultas.?. Berikut adalah langkah-langkah membuat combobox bertingkat pada PHP dan MySQL:

• Pertama : Siapkan terlebih dahulu sebuah database pada php myadmin (contoh nama database: kampus).
• Kedua : Siapkan 2 (dua) buah tabel pada database kampus untuk filter data (contoh tabel database: fakultas dan prodi). Tabel database fakultas untuk memilih data fakultas dan tabel database prodi untuk filter data program studi. Contoh gambar seperti berikut:

• Tiga : Buatlah sebuah halaman form php untuk proses filter data (contoh dalam tutorial ini: index.php) dan ketikan sintaks source code php seperti berikut:

<?php

//Koneksi dan Menentukan Database Di Server

$server="localhost";

$user="root";

$pass="";

$db="kampus";

$konek=mysql_connect($server,$user,$pass) or die ("KONEKSI GAGAL");

$konek_database=mysql_select_db($db) or die ("DATABASE TIDAK BISA DIBUKA");

?>

<div class='row'>

<div class='col-sm-12 col-xs-12 col-md-12'>

<form action="" method="post">

<!-- Pembuatan Combobox Pertama/Pemilihan Fakultas -->

<div class="form-group">

<label">Fakultas</label>

<div class="col-sm-4">

<select id="fakultas" name="fakultas">

<option> Silahkan Pilih..</option>

                <?php

                $query = mysql_query("SELECT * FROM fakultas ORDER BY id_fakultas");

                while ($row = mysql_fetch_array($query)) {

                ?>

                    <option value="<?php echo $row['fakultas']; ?>">

                         <?php echo $row['fakultas']; ?>

                    </option>

                <?php } ?>

</select>

</div>

</div>

<!-- Pembuatan Combobox Kedua/Pemilihan Prodi -->

<div class="form-group">

<label>Program Studi</label>

<div class="col-sm-4">

<select id="prodi" name="prodi">

                <option value="">Silahkan Pilih..</option>

                <?php

                $query = mysql_query("SELECT

                                        *

                                      FROM

                                        prodi

                                        INNER JOIN fakultas ON prodi.id_fakultas = fakultas.id_fakultas ORDER BY id_prodi");

                while ($row = mysql_fetch_array($query)) {

                ?>

                    <option id="prodi" class="<?php echo $row['fakultas']; ?>" value="<?php echo $row['prodi']; ?>">

                        <?php echo $row['prodi']; ?>

                    </option>

<?php } ?>

</select>

</div>

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

<!--//kodingbuton.com-->

<script src="js/jquery-1.10.2.min.js"></script>

<script src="js/jquery.chained.min.js"></script>

        <script>

            $("#prodi").chained("#fakultas");

        </script>

 

• Empat: Buatkan folder penyimpanan file index.php tersebut (contoh nama folder: filter-prodi) dan letakan pada folder htdocs yang terletak pada folder xampp yang telah ter-instal pada komputer kalian, contoh: (C:\xampp\htdocs\filter-prodi). Apabilah semua proses telah berhasil maka akan tampak seperti gambar berikut:

 Keterangan ** :

1. Komponen proses pengkodean yang di simulasikan pada tutorial ini menggunakan bootstrap.min untuk file css dan javascrip-nya. Silahkan  sesuaikan dengan projek pembuatan aplikasi yang anda kerjakan. 
2. Teks yang berlatar belakan kuning merupakan tahapan-tahapan pengkodean.
3. Teks yang berlatar belakang hijau 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.
   
4. Teks berlatar belakang merah merupakan script yang akan meng-eksekusi  combobox bertingkat untuk filter prodi berdasarkan fakultas.
5. Semua komponen dan sitaks tersebut dapat diperoleh secara gratis dengan cara: di Download disini...
   

 

Demikian tutorial tentang membuat combobox bertingkat pada PHP dan MySQL, semoga bermanfaat dan memberi inspirasi buat proses pembuatan coding website yang dikerjakan...!

Apabila ada source code yang tidak berjalan, error atau  tidak sesuai,, silahkan isi kolom komentar pada bagian bawah tutorial ini...!.