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 MySQL1. 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 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,
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 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.
Terus cara mengambil value NAMA bagaimana? Ada banyak cara, contohnya 1. Menggunakan DOM Javacript (bisa menggunakan var/let)
2. Menggunakan JQuery seperti dibawah (bisa menggunakan var/let)
untuk kabupaten, kecamatan, kelurahan sama saja 3. Bisa menggunakan custom function di javascript. Jadi sobat buat function di javascript jadinya seperti dibawah
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.. |