Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

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.

 

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

daerah.sql

 

Membuat Combobox Bertingkat

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

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

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>

 

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

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 :

 

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

 

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

 

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

 

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

 

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

 

 

10 thoughts on “Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

  1. Kalau ingin mengunci wilayah sesuai user login gimana min?

    Misalnya gini :
    User 1 wilayanya aceh, berarti data tepilih harus aceh, tapi untuk kabupaten nya terbuka sesuai wilayah yang terkunci tersebut dari propinsi aceh.

    1. kolom provinsi terisi sesuai session provinsi dan event diganti dari sebelumnya on provinsi change jadi saat window di load/document ready

    1. menggunakan jquery bisa dengan
      var nama_provinsi = $(‘#provinsi option:selected’).text();
      atau
      var nama_provinsi = $(‘#provinsi’).find(‘option:selected’).text();

      bisa juga pake DOM javascript
      var e = document.getElementById(“provinsi”);
      var nama_provinsi = e.options[e.selectedIndex].text;

  2. cara input ke db biar jadi nama provinsi, kabupaten,kecamatan gmanaya?
    biar bukan id nya yang masuk?

    ada tutorial full scriptnya?

    1. pake javascript buat ngambil textnya
      buat function di javascript
      function getSelectText(selId) {
      var sel = document.getElementById(selId);
      var i = sel.selectedIndex;
      var selected_text = sel.options[i].text;
      return selected_text;
      }

      dan untuk mengambil value-nya
      let provinsi = getSelectText(“provinsi”);
      let kabupaten = getSelectText(“kabupaten”);
      let kecamatan = getSelectText(“kecamatan”);
      let kelurahan = getSelectText(“kelurahan”);

          1. Mksd saya script untuk mengambil namanya buka idnya soalnya kalo d simpan d database yang di simpan id nya

Leave a Reply

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

15 − 10 =