Combobox bertingkat php mysql

Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel AJAX, Artikel javascript, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Table of Contents Show

Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP
Membuat Database MySQL
Membuat Combobox Bertingkat
Demikianlah Artikel Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

Judul : Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP
link : Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

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

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>

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

Dewan Komputer

</a>

</nav>

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

<label>Provinsi</label>

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

</select>

</div>

<label>Kabupaten</label>

</select>

</div>

<label>Kecamatan</label>

</select>

</div>

<label>Kelurahan</label>

</select>

</div>

<hr>

</div>

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

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

</div>

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

$(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,

Pertama adalah ajax yang berfungsi untuk mengisi combobox provinsi.
Kedua adalah ajax yang berfungsi untuk mengambil data kabupaten jika combobox provinsi berubah.
Ketiga adalah ajax yang berfungsi untuk mengambil data kecamatan jika combobox kabupaten berubah dan mengisinya pada combobox kecamatan.
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

Sekian postingan saya tentang Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP.

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

Demikianlah Artikel Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP

Sekianlah artikel Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Combobox Bertingkat Filter Daerah dengan Ajax dan PHP dengan alamat link https://dev-create.blogspot.com/2021/03/cara-membuat-combobox-bertingkat-filter.html