Membuat combobox bertingkat dengan javascript

Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang kesukaan saya yaitu ajax. Dan kali ini saya akan membahas tentang combobox bertingkat/tree yang terdiri dari 4 combobox yang mana combobox pertama yaitu provinsi jika dipilih maka akan muncul kabupaten yang ada pada provinsi yang dipilih dan kemudian jika dipilih maka kecamatan akan terfilter sesuai kabupaten yang dipilih sampai pada tingkat kelurahan. Cara berikut tidak hanya digunakan pada filter daerah namun juga bisa digunaka nuntuk keperluan lain seperti filter divisi dan sub divisi, kepala bagian dan sub kepala bagian dan masih banyak lagi.

Untuk sekarang ini saya suka membuat aplikasi dengan ajax karena jika dengan ajax semua bisa kita buat tanpa loading yang memberatkan aplikasi. Jika sobat ingin melihat tutorial saya lainnya tantang ajax ada banyak bisa sobat cari pada blog ini. Langsung saja saya contohka cara membuat combobox bertingkat ini.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

Membuat combobox bertingkat dengan javascript

2. Buat tabel karena datanya sangat banyak sobat bisa download file .sql dibawah ini dan imporkan pada database sobat

daerah.sql

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1=newmysqli(HOST,USER,PASS,DB1);

?>

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

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

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js. Dan karena kita menggunakan Popover dari bootstrap maka wajib untuk memasukkan librari bootstrap.

3. Masih di file index.php sobat tambahkan kode dibawah pada tag <body>…</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<nav class="navbar navbar-dark bg-primary fixed-top">

  <aclass="navbar-brand"href="index.php"style="color: #fff;">

    Dewan Komputer

  </a>

</nav>

<div class="container mb-5">

<h2 align="center"style="margin: 60px 10px 10px 10px;">Dewan Demo Combobox Bertingkat Daerah Indonesia</h2><hr>

<div class="row">

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

<div class="form-group">

<label>Provinsi</label>

<select class="form-control"name="provinsi" id="provinsi">

<option value="">Pilih Provinsi</option>

</select>

</div>

<div class="form-group">

<label>Kabupaten</label>

<select class="form-control"name="kabupaten" id="kabupaten">

<option value=""></option>

</select>

</div>

<div class="form-group">

<label>Kecamatan</label>

<select class="form-control"name="kecamatan" id="kecamatan">

<option value=""></option>

</select>

</div>

<div class="form-group">

<label>Kelurahan</label>

<select class="form-control"name="kelurahan" id="kelurahan">

<option value=""></option>

</select>

</div>

</div>

</div>

<hr>

</div>

<div class="navbar bg-dark fixed-bottom">

<div style="color: #fff;">© <?phpechodate('Y');?>Copyright:

    <ahref="https://dewankomputer.com/">Dewan Komputer</a>

</div>

</div>

4. Masih di index.php, selanjutnya kita buat ajaxnya sebagai berikut

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<script type="text/javascript">

$(document).ready(function(){

       $.ajax({

            type: 'POST',

           url:"get_provinsi.php",

           cache:false,

           success:function(msg){

              $("#provinsi").html(msg);

            }

        });

       $("#provinsi").change(function(){

       varprovinsi= $("#provinsi").val();

           $.ajax({

           type:'POST',

               url:"get_kabupaten.php",

               data:{provinsi:provinsi},

               cache: false,

               success:function(msg){

                  $("#kabupaten").html(msg);

                }

            });

        });

        $("#kabupaten").change(function(){

       varkabupaten=$("#kabupaten").val();

           $.ajax({

           type:'POST',

               url:"get_kecamatan.php",

               data:{kabupaten: kabupaten},

               cache:false,

               success:function(msg){

                  $("#kecamatan").html(msg);

                }

            });

        });

        $("#kecamatan").change(function(){

       varkecamatan=$("#kecamatan").val();

           $.ajax({

           type:'POST',

               url:"get_kelurahan.php",

               data:{kecamatan: kecamatan},

               cache:false,

               success:function(msg){

                  $("#kelurahan").html(msg);

                }

            });

        });

     });

</script>

Pada script diatas terlihat ada 4 ajax,

  1. Pertama adalah ajax yang berfungsi untuk mengisi combobox provinsi.
  2. Kedua adalah ajax yang berfungsi untuk mengambil data kabupaten jika combobox provinsi berubah.
  3. Ketiga adalah ajax yang berfungsi untuk mengambil data kecamatan jika combobox kabupaten berubah dan mengisinya pada combobox kecamatan.
  4. Terakhir adalah ajax untuk mengisi combobox kelurahan jika combobox kecamatan dipilih.

5. Selanjutnya adalah membuat file get_provinsip.php yang berfungsi untuk mengambil data provinsi yang kemudian ditampilkan pada combobox provinsi yang dipanggil oleh ajax diatas. Scriptnya adalah sebagai berikut :

<?php

include'koneksi.php';

echo"<option value=''>Pilih Provinsi</option>";

$query="SELECT * FROM provinsi ORDER BY nama ASC";

$dewan1= $db1->prepare($query);

$dewan1->execute();

$res1=$dewan1->get_result();

while ($row=$res1->fetch_assoc()){

echo"<option value='".$row['id_prov']."'>". $row['nama']."</option>";

}

?>

6. Selanjutnya adalah membuat file get_kabupaten.php yang berfungsi untuk mengambil data kabupaten dan mengisinya pada combobox yang dipanggil oleh ajax saat poengguna memilih provinsi

<?php

include'koneksi.php';

$provinsi=$_POST['provinsi'];

echo"<option value=''>Pilih Kabupaten</option>";

$query ="SELECT * FROM kabupaten WHERE id_prov=? ORDER BY nama ASC";

$dewan1=$db1->prepare($query);

$dewan1->bind_param("i",$provinsi);

$dewan1->execute();

$res1=$dewan1->get_result();

while($row=$res1->fetch_assoc()) {

echo"<option value='".$row['id_kab']."'>".$row['nama']."</option>";

}

?>

7. Selanjutnya adalah membuat file get_kecamatan.php yang berfungsi untuk mengisi combobox kecamatan saat combobox kabupaten dipilih

<?php

include'koneksi.php';

$kabupaten=$_POST['kabupaten'];

echo"<option value=''>Pilih Kecamatan</option>";

$query ="SELECT * FROM kecamatan WHERE id_kab=? ORDER BY nama ASC";

$dewan1=$db1->prepare($query);

$dewan1->bind_param("i",$kabupaten);

$dewan1->execute();

$res1=$dewan1->get_result();

while($row=$res1->fetch_assoc()) {

echo"<option value='".$row['id_kec']."'>".$row['nama']."</option>";

}

?>

8. Terakhir adalah membuat file get_kelurahan.php yang berfungsi untuk megisi combobox kelurahan saat combobox kecamatan dipilih

<?php

include'koneksi.php';

$kecamatan=$_POST['kecamatan'];

echo"<option value=''>Pilih Kelurahan</option>";

$query ="SELECT * FROM kelurahan WHERE id_kec=? ORDER BY nama ASC";

$dewan1=$db1->prepare($query);

$dewan1->bind_param("i",$kecamatan);

$dewan1->execute();

$res1=$dewan1->get_result();

while($row=$res1->fetch_assoc()) {

echo"<option value='".$row['id_kel']."'>".$row['nama']."</option>";

}

?>

9. Jika sobat telah mengikuti langkah-langkah diatas seharusnya aplikasi sudah berjalan dengan sempurna seperti gambar dibawah

Membuat combobox bertingkat dengan javascript

10. SAAT MENYIMPAN DATA

Karena di comboboxnya valuenya adalah id jadi jika sobat membuat untuk form tentu yg tersimpan adalah id seperti id_prov, id_kab, id_kec, id_kel. Memang normalnya seperti itu, makanya untuk provinsi, kabupaten, kecamata, kelurahan itu bagusnya menggunakan relasi tabel. Jika sobat hanya menyimpan namanya maka sobat pasti akan kesulitan saat ingin membuat fitur edit. Terus bagaimana untuk menampilkan namanya? Sobat bisa menggunakan JOIN pada query saat ingin menampilkan data.

Namun jika sobat benar-benar ingin menyimpan nama saja, sobat TIDAK BISA menggunakan FORM SUBMIT. Gunakanlah AJAX juga untuk menyimpan datanya. Di AJAX sendiri juga ada fitur seperti form submit yaitu .serialize(), NAMUN untuk AJAX yg saya bicarakan sekarang menggunakan FormData contohnya bisa dilihat di link dibawah lihat pada function simpanData(). PAHAMI dan RESAPI terlebih dahulu karena jika pelum pahan script AJAXnya pasti akan kebingungan ke depannya.

Membuat CRUD Expert, Upload & Filter/Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 2 ACTION SIMPAN, PREVIEW, EDIT, HAPUS

Terus cara mengambil value NAMA bagaimana? Ada banyak cara,  contohnya

1. Menggunakan DOM Javacript (bisa menggunakan var/let)

//menggunakan DOM javascript

let id_provinsi=document.getElementById(provinsi).value;

let nama_provinsi= document.getElementById(provinsi).options[e.selectedIndex].text;

2. Menggunakan JQuery seperti dibawah (bisa menggunakan var/let)

//untuk mendapatkan id_provinsi

let id_provinsi=$(#provinsi’).val();

//untuk mendapatkan nama provinsi

let nama_provinsi=$(#provinsi option:selected’).text();

untuk kabupaten, kecamatan, kelurahan sama saja

3. Bisa menggunakan custom function di javascript. Jadi sobat buat function di javascript jadinya seperti dibawah

//Membuat Custom function (sekali bikin bisa untuk berkali-kali pakainya cukup panggil nama functionnya)

functiongetSelectText(selId){

      varsel= document.getElementById(selId);

      vari=sel.selectedIndex;

      varselected_text= sel.options[i].text;

      returnselected_text;

}

//untuk mengambil value namanya-nya

let provinsi= getSelectText(provinsi);

let kabupaten=getSelectText(kabupaten);

let kecamatan=getSelectText(kecamatan);

let kelurahan=getSelectText(kelurahan);

Jadi ada banyak cara kodingnya namun jangan dibikin bingung, cukup pilih salah satu saja intinya pahami dulu scriptnya jangan main copas saja. Copas boleh dan sah-sah saja tapi sobat harus tahu apa yang di copas okee…

Saya hanya memberikan dasarnya saja jadi jika sobat ingin menggabungkan dengan aplikasi yang sedang sobat buat silahkan berkreasi sendiri supaya menjadi lebih bagus lagi.

Sekian postingan saya tentang Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..