Cara Membuat Combobox Bertingkat di PHP

Cara Membuat Combobox Bertingkat Di PHP
1 0
Read Time:7 Minute, 22 Second

Cara Membuat Combobox Bertingkat di PHP— Hai semua kali ini iniilmu.com akan memberikan tutorial cara membuat combobox bertingkat pada php.

Combobox bertingkat adalah combobox yang saling berhubungan antara combobox yang satu dengan combobox lainnya.

Langkah pertama yang dilakukan kita akan membuat database. disini saya membuat database dengan nama wilayah.

Membuat Database

sekarang kita telah memiliki sebuah database dengan nama database wilayah, langkah selanjutnya kita akan membuat 4 (empat) buat tabel yang terdiri dari tabel

  1. Provinces
Struktur Table Provinces

2. Tabel Regencies

Stuktur Tabel Regencies

3. Tabel Districts

Struktur Tabel Districts

4. Tabel Villages

Stuktur Tabel Villages

Setelah selesai membuat database beserta tabel-tabel yang diperlukan selanjutnya kita membuat folder di dalam htdocs, disini saya membuat folder dengan nama combobox_bertingkat.

Langkah Selanjutnya kita akan membuat file config.php, ikuti source code dibawah ini:

<?php 

$con = mysqli_connect('localhost','root','','wilayah')or die(mysqli_error($con));
if (!$con) {
    echo "Koneksi Gagal!";
}


?>

Berikutnya kita akan membuat tampilan combobox, buat file baru dengan nama index.php

<?php 
include "config.php";
?>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Combobox Bertingkat</title>
</head>

<body>

    <div class="container-fluid">
        <div class=" row justify-content-md-center">

            <div class="col-md-6">
                <br>
                <div class="card" style="width: 100%;">
                    <div class="card-body">
                        <h5 class="card-title text-center">Combobox Bertingkat</h5>
                        <h6 class="card-subtitle mb-2 text-muted text-center">ClasCode | iniilmu.com</h6>
                        <form>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Provinsi</label>
                                <select class="form-control" id="id_provinsi">
                                    <option>---Pilih Provinsi---</option>
                                    <?php
                                        $sql = mysqli_query($con,"SELECT * FROM provinces order by name ASC") or die(mysqli_error($con));
                                        while ($dt = mysqli_fetch_array($sql)) {
                                    ?>
                                        <option value="<?php echo $dt['id'] ?>"><?php echo $dt['name'] ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Kabupaten</label>
                                <select class="form-control" id="id_kabupaten">
                                    <option>---Pilih Kabupaten---</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Kecamatan</label>
                                <select class="form-control" id="id_kecamatan">
                                    <option>---Pilih Kecamatan---</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Kelurhan/Desa</label>
                                <select class="form-control" id="id_kelurahan">
                                    <option>---Pilih Kelurahan---</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

   
</body>

</html>

setelah membuat file index.php, coba jalankan aplikasi kalian dengan cara menuliskan localhost/combobox_bertingka, jika berhasil maka akan tampil seperti pada gambar dibawah ini:

Combobox Bertingkat

Selanjutnya masukan script dibawah ini pada file index.php

<script>
        $(document).ready(function(){
            $('#id_provinsi').on('change',function(){
                var id_provinsi = $(this).val();
                $.ajax({
                    url:'ambil_data.php',
                    type:"POST",
                    data:{
                        modul:'Kabupaten',
                        id:id_provinsi
                    },
                    success:function(respond){
                        $("#id_kabupaten").html(respond);
                    },
                    error:function(){
                        alert("Gagal Mengambil Data");
                    }
                })
            })

            $('#id_kabupaten').on('change',function(){
                var id_provinsi = $(this).val();
                $.ajax({
                    url:'ambil_data.php',
                    type:"POST",
                    data:{
                        modul:'Kecamatan',
                        id:id_provinsi
                    },
                    success:function(respond){
                        $("#id_kecamatan").html(respond);
                    },
                    error:function(){
                        alert("Gagal Mengambil Data");
                    }
                })
            })

            $('#id_kecamatan').on('change',function(){
                var id_provinsi = $(this).val();
                $.ajax({
                    url:'ambil_data.php',
                    type:"POST",
                    data:{
                        modul:'Kelurahan',
                        id:id_provinsi
                    },
                    success:function(respond){
                        $("#id_kelurahan").html(respond);
                    },
                    error:function(){
                        alert("Gagal Mengambil Data");
                    }
                })
            })
        });

    </script>

pada srcipt diatas yang perlu diperhatikan adalah id yang ada pada setiap combobox harus sama dengan yang dituliskan pada script ajax.

selanjutnya kita akan membuat file baru dengan nama ambil_data.php

<?php 
include "config.php";

$id = $_POST['id'];
$modul = $_POST['modul'];

if ($modul=='Kabupaten') {
    $sql = mysqli_query($con,"SELECT * FROM regencies where province_id='$id' order by name ASC")or die(mysqli_error($con));
    $kabupaten='<option>---Pilih Kabupaten---</option>';
    while ($dt = mysqli_fetch_array($sql)) {
        $kabupaten.='<option value="'.$dt['id'].'">'.$dt['name'].'</option>';
    }

    echo $kabupaten;
}elseif($modul=='Kecamatan'){
    $sql = mysqli_query($con,"SELECT * FROM districts where regency_id='$id' order by name ASC")or die(mysqli_error($con));
    $kecamatan='<option>---Pilih Kecamatan---</option>';
    while ($dt = mysqli_fetch_array($sql)) {
        $kecamatan.='<option value="'.$dt['id'].'">'.$dt['name'].'</option>';
    }

    echo $kecamatan;
}elseif ($modul=='Kelurahan') {
    $sql = mysqli_query($con,"SELECT * FROM villages where district_id='$id' order by name ASC")or die(mysqli_error($con));
    $kelurahan='<option>---Pilih Kelurahan---</option>';
    while ($dt = mysqli_fetch_array($sql)) {
        $kelurahan.='<option value="'.$dt['id'].'">'.$dt['name'].'</option>';
    }

    echo $kelurahan;
}

?>

jadi, keselurahan file index.php seperti dibawah ini:

<?php 
include "config.php";
?>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Combobox Bertingkat</title>
</head>

<body>

    <div class="container-fluid">
        <div class=" row justify-content-md-center">

            <div class="col-md-6">
                <br>
                <div class="card" style="width: 100%;">
                    <div class="card-body">
                        <h5 class="card-title text-center">Combobox Bertingkat</h5>
                        <h6 class="card-subtitle mb-2 text-muted text-center">ClasCode | iniilmu.com</h6>
                        <form>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Provinsi</label>
                                <select class="form-control" id="id_provinsi">
                                    <option>---Pilih Provinsi---</option>
                                    <?php
                                        $sql = mysqli_query($con,"SELECT * FROM provinces order by name ASC") or die(mysqli_error($con));
                                        while ($dt = mysqli_fetch_array($sql)) {
                                    ?>
                                        <option value="<?php echo $dt['id'] ?>"><?php echo $dt['name'] ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Kabupaten</label>
                                <select class="form-control" id="id_kabupaten">
                                    <option>---Pilih Kabupaten---</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Kecamatan</label>
                                <select class="form-control" id="id_kecamatan">
                                    <option>---Pilih Kecamatan---</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Kelurhan/Desa</label>
                                <select class="form-control" id="id_kelurahan">
                                    <option>---Pilih Kelurahan---</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function(){
            $('#id_provinsi').on('change',function(){
                var id_provinsi = $(this).val();
                $.ajax({
                    url:'ambil_data.php',
                    type:"POST",
                    data:{
                        modul:'Kabupaten',
                        id:id_provinsi
                    },
                    success:function(respond){
                        $("#id_kabupaten").html(respond);
                    },
                    error:function(){
                        alert("Gagal Mengambil Data");
                    }
                })
            })

            $('#id_kabupaten').on('change',function(){
                var id_provinsi = $(this).val();
                $.ajax({
                    url:'ambil_data.php',
                    type:"POST",
                    data:{
                        modul:'Kecamatan',
                        id:id_provinsi
                    },
                    success:function(respond){
                        $("#id_kecamatan").html(respond);
                    },
                    error:function(){
                        alert("Gagal Mengambil Data");
                    }
                })
            })

            $('#id_kecamatan').on('change',function(){
                var id_provinsi = $(this).val();
                $.ajax({
                    url:'ambil_data.php',
                    type:"POST",
                    data:{
                        modul:'Kelurahan',
                        id:id_provinsi
                    },
                    success:function(respond){
                        $("#id_kelurahan").html(respond);
                    },
                    error:function(){
                        alert("Gagal Mengambil Data");
                    }
                })
            })
        });

    </script>

</body>

</html>

Sekian Cara membuat combobox bertingkat di PHP, selamat mencoba.

jika masih kurang paham bisa meilhat video nya disini dan link download source code ada pada link video tersebut.

Silahkan tinggal komentar di kolom komentar, jika ingin bertanya mengenai Tutorial Combobox bertingkat.

Happy
Happy
100 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Jenis-jenis operator C++ Previous post Tutorial C++ #04 Jenis-jenis Operator Pada C++
Cara Menambah Text Field dengan Javascript Next post Cara Menambah Text Field dengan Javascript

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *