Javascript Pemrograman PHP Web

Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

March 26, 2019
dewan
38 Comments

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

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(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>

<nav class="navbar navbar-dark bg-primary fixed-top">
  <a class="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;">© <?php echo date('Y'); ?> Copyright:
	    <a href="https://dewankomputer.com/"> Dewan Komputer</a>
	</div>
</div>

 

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

<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(){
      	var provinsi = $("#provinsi").val();
          	$.ajax({
          		type: 'POST',
              	url: "get_kabupaten.php",
              	data: {provinsi: provinsi},
              	cache: false,
              	success: function(msg){
                  $("#kabupaten").html(msg);
                }
            });
        });

        $("#kabupaten").change(function(){
      	var kabupaten = $("#kabupaten").val();
          	$.ajax({
          		type: 'POST',
              	url: "get_kecamatan.php",
              	data: {kabupaten: kabupaten},
              	cache: false,
              	success: function(msg){
                  $("#kecamatan").html(msg);
                }
            });
        });

        $("#kecamatan").change(function(){
      	var kecamatan = $("#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

 

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)
function getSelectText(selId) {
      var sel = document.getElementById(selId);
      var i = sel.selectedIndex;
      var selected_text = sel.options[i].text;
      return selected_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..

 

 

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

    Reply

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

      Reply

  2. cara masukin nama daerah ke database nya gimana mas kalau mau disimpan, soalnya value pada select nya kan id bukan namanya

    Reply

    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;

      Reply

      1. Halo Kak,
        Boleh dibantu jelasin. Script ini,
        var nama_provinsi = $(‘#provinsi option:selected’).text();

        untuk menggantikan yang ini ya,

        var provinsi = $(“#provinsi”).val();

        yg di ajax nya???

        Thanks

        Reply

        1. iya untuk menggantikan yg itu, contohnya :jika
          var nama_provinsi = $(‘#provinsi option:selected’).text();
          //akan mengambil teks yg tertampil di combobox dalam kasus ini Jakarta
          sedangkan
          var provinsi = $(“#provinsi”).val();
          //akan mengambil valuenya yaitu 12345

          Reply

          1. taruh koding dimana yang var nama_provinsi = $(‘#provinsi option:selected’).text(); di index.php apa di get_provinsi.php apa buat baru file saya bingung soalnya muncul id bukan nama

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

    ada tutorial full scriptnya?

    Reply

    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”);

      Reply

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

    1. tinggal hapus ajax provinsi on change dan kabupatyen on change dan kecamatan blangwswung di tampilkan di awal load halaman…

      Reply

    1. bedanya cuma di routingnya mas kaya select data biasa kalo mau bikin api kalo untuk js & ajaxnya sama,
      kebetulan saya tidak main CI tpi laravel tpi intinya ttep sama

      Reply

  9. assalamualaikum mau nanya bisa diupdate blog lagi gan yang buat id yang tersimpan bukan nama terus saya juga bingung disimpan dimana apakah di get_provinsi di index.php apa buat file lagi tolong diupdate lagi soalnya banyak orang bertanya malah disimpan id didatabase bukan nama provinsi kabupaten kecamatan kelurahan

    Reply

    1. memang rata2 provinsi, kabupaten, kecamatan, kelurahan itu yg tersimpan id karena seharusnya menggunakan relasi tabel di databasenya,
      tapi jika ttep ingin nama yg tersimpan jangan pake form submit tapi menggunakan AJAX
      jadi mainnya di javascript yg tentu saja javascriptnya ada di index.php
      //untuk mendapatkan id_provinsi
      var id_provinsi = $(‘#provinsi’).val();
      //untuk mendapatkan nama provinsi
      var nama_provinsi = $(‘#provinsi option:selected’).text();

      AJAX untuk simpan bisa dilihat di postingan ini sama saja yg pntg dipahami dulu tahu script javascript itu yg mana dan PHP itu yg seperti apa
      https://dewankomputer.com/2019/04/09/membuat-crud-expert-pencarian-dengan-jquery-ajax-bootstrap-modal-sweetalert-dan-wysihtml5-pada-php-part-2-action-simpan-preview-edit-hapus/

      Reply

  10. mas, misal sy punya form edit kayak gini..

    Provinsi

    <select class="form-control" name="id_prov" id="ubahProv" value="”>

    kemudian untuk pemanggilan value id provinsinya agar nanti bisa ter-select, script di mana ya yang harus di ubah? ini kah..?
    $(“#provinsi”).change(function(){
    var provinsi = $(“#provinsi”).val();
    $.ajax({
    type: ‘POST’,
    url: “get_kabupaten.php”,
    data: {provinsi: provinsi},
    cache: false,
    success: function(msg){
    $(“#kabupaten”).html(msg);
    }
    });
    });

    terima kasih sebelumnya atas responsenya..

    Reply

      1. siap mas, $(“#provinsi”) jadi $(“#ubahProv”) sudah sy rubah sebelumnya..
        tadi hanya salah copy di komentar.. hehe

        “dan value nya bukan pas di select tpi di option”
        untuk pernyataan ini, sudah sy coba masukkan di get_provinsi.php nya menggunakan kondisi

        while ($rows = $res1->fetch_assoc())
        {
        if($rows[‘id_prov’] == $get_id)
        {
        echo “”.$rows[‘nama’].””;
        }
        else
        {
        echo “”.$rows[‘nama’].””;
        }
        }

        hanya masih bingung, cara memanggil value dari database yang sudah ada itu bagaimana.. hehe..
        sy masukkan value $get_id nya manual (misal: 36/Banten), akhirnya yg pilihan kabupaten tidak bisa dipilih/muncul.. hehe

        mohon petunjuk..

        Reply

        1. “cara memanggil value dari database yang sudah ada” maksudnya?
          kode lengkapnya aja masukkan di pastebin daripada bingung

          Reply

          1. masih bingung juga untuk penggunaan let ubahProv = $(“#ubahProv”).val(ubahProv);
            sy otak-atik juga tidak mau.. hahaha
            mungkin masnya bisa bantu sy? 😀
            ini lagi bantu rekan kerja untuk penelitian..
            in sya Allah ke depan juga butuh bantuan masnya buat menyempurnakan..
            ini no sy xxxx-xxxx-xxxx
            minta tlg masnya hubungi sy ya.. terima kasih

          2. ada banyak cara sebenernya
            cara 1
            1. di semua ajaxnya, pada data: {selected: selected} dan variabel selected default 0.
            2. jika pada klik edit selected terisi sesuai id provinsi dari data yg mau di edit.
            3. pada masing2 file php itu saat echo option ditambahin selected jika id provinsinya sama
            contoh :
            $get_id= $_POST[‘selected’];

            if($rows[‘id_prov’] == $get_id)
            echo ““;
            } else {
            echo ““;
            }
            4. begitu juga di yg kabupaten, kecamatan, kelurahan

            cara 2
            tambah di ajaxnya saat success
            success: function(msg) {
            $(“#provinsi”).html(msg);
            $(“#provinsi”).val(36).change();
            }
            di provinsi on change
            success: function(msg) {
            $(“#kabupaten”).html(msg);
            $(“#kabupaten”).val(3602).change();
            }
            dst…

          3. sudah sy otak-atik mas.. tp krna msh minim ilmu ttg jquery, malah auto pusing.. hehe

            nanti sy butuh bantuan masnya buat menyempurnakan session, pembuatan php mailer buat pendaftaran, sama combobox bertingkat ini karna penggunaannya juga buat lain (misal: pemilihan ruang.. selanjutnya ke bed pasien)..
            tinggal bikin editnya yg kesusahan 😀

          4. siyap.. terima kasih penjelasannya mas..
            akan sy coba otak-atik dulu..
            tapi misal masnya ada waktu untuk membantu sy, masnya bisa wa sy di nomor td..
            sebelum dan sesudahnya, sy ucapkan banyak terima kasih atas ilmunya.. 🙂
            jazakallah khairan katsiran..

  12. Pingback: Cara Membuat dan Mengisi Combobox dengan PHP dan Javascript - Dewan Komputer

  13. jika option sudah terpilih semua… lalu option atas dirubah… jika ingin option di bawah2 hilang gmn kak kode nya?

    Reply

    1. jika menggunakan jquery maka tinggal nambah baris ini di function yang men trigger nya
      $(“#kecamatan”).empty();
      $(“#kelurahan”).empty();

      Reply

Leave a Reply

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

nine + 13 =