Chain Selected atau biasa disebut dropdown berantai biasanya sering digunakan untuk validasi input agar data yang disimpan konsisten berdasarkan pilihan sebelumnya.
Chain selected banyak digunakan misalnya untuk pemilihan wilayah kelurahan dimana sebelumnya harus memilih kecamatan, kabupaten dan provinsi terlebih dahulu, atau pemilihan program studi berdasarkan jenjang program studi.
Pada artikel kali ini akan dijelaskan bagaimana cara membuat chain selected pemilihan wilayah kelurahan berdasarkan kecamatan, kabupaten dan provinsi yang telah dipilih sebelumnya, sebagai gambaran umum berikut contoh tampilan chain select.
Untuk membuat chain selected di codeigniter dibutuhkan jquery, adapun langkah-langkahnya adalah sebagai berikut :
- Siapkan database dan tabel yang dibutuhkan yaitu tabel propinsi, kabupaten, kecamatan dan kelurahan. Pada contoh ini penulis sudah menyertakan data wilayah se-Indonesia dari database KPU.
- Atur konfigurasi dasar codeigniter meliputi base_url, database, dan default route.
- Buat model yang dibutuhkan dalam hal ini minimal membuat tiga fungsi di dalam model yaitu fungsi untuk mengambil data provinsi, data kabupaten berdasarkan provinsi yang dipilih, data kecamatan berdasarkan kabupaten yang terpilih dan data kelurahan berdasarkan kecamatan yang terpilih, berikut screenshoot coding model nya
- Buat controller, pada bagian controller akan terdapat tiga buah fungsi yaitu , fungsi pilih kabupaten yang akan dijalankan ketika user memilih salah satu provinsi, fungsi pilih_kecamatan yaitu fungsi yang akan dijalankan ketika user memilih salah satu kabupaten dan fungsi kelurahan yang akan dijalankan ketika user memilih salah satu kecamatan, berikut penggalan script-nya :
Tampak dari penggalan script diatas meskipun user disuguhi tampilan tambah data seperti pada gambar pertama, kenyataannya aplikasi menjalankan tiga buah tampilan (file php) yaitu v_drop_down_kabupaten.php, v_drop_down_kecamatan.php, dan v_drop_down_kelurahan.php.Adapun pemicu utama dari chain select adalah dropdown provinsi sehingga ketika user memilih salah satu provinsi maka akan menjalankan fungsi ajax OnChange tampilKabupaten, berikut potongan script pada dropdown pilihan provinsi.
Perhatikan pada setiap komponen dropdown akan memiliki name dan id, pada gambar diatas name=”provinsi_id” akan berfungsi sebagai pengirim data ke database, sedangkan id=”provinsi_id” akan berfungsi sebagai id element yang diberikan action oleh user dalam hal ini memilih, kemudian action tersebut akan menjalankan fungsi javascript tampilKabupaten.
Pun pada komponen dropdown kabupaten akan memiliki name dan id dan ketika user memilih salah satu kabupaten akan memicu menjalankan javascript pada event OnChange, dan begitupula pada komponen dropdown kecamatan.
Dari uraan diatas maka anda harus membuat javascript untuk menangani ketiga event OnChange tersebut, dibagian bawah form penambahan data.
- Sebelum membuat javascript OnChange, load terlebih dahulu jquery sesuaikan dengan versi yang anda miliki.
- Kemudian buat javascript untuk meng-handle event onchange pada komponen select
- Berikutnya buat tiga buah view dalam hal ini :v_drop_down_kabupten, v_drop_down_kecamatan dan v_drop_down_kelurahan, adapun isinya adalah sebagai berikut :v_drop_down_kabupten.php
v_drop_down_kecamatan.php
v_drop_down_kelurahan.php
- Jalankan
- Untuk mempelajari silahkan download file kerjanya
Post a Comment