Membuat Combobox Dinamis Dengan Codeigniter

Kali ini saya akan membuat tutorial bagaimana cara membuat combobox dinamis dengan codeigniter. Apa sih yang dimaksud combobox dinamis itu? combobox dinamis ini bisa dibilang adalah combobox yang isinya dapat berubah atau dinamis sesuai dengan parameter tertentu. Sebagai contoh gampangnya, jika anda ingin membuat pilihan seperti kota dan kecamatan, maka ketika anda memilih kota tertentu pada combobox kota, maka data yang akan muncul pada combobox kecamatan adalah semua data kecamatan yang ada dikota tersebut.

Sekarang langsung saja kita akan mulai tutorial ini, pertama-tama yang perlu dipersiapkan adalah database kota dan kecamatan terlebih dahulu. Kali ini saya akan menggunakan database MySql. Buatlah tabel pada database tersebut dengan nama tabel “Kota” dan “Kecamatan”. Struktur dari tabel Kota dapat anda lihat pada gambar dibawah ini.

Isi tabel diatas dengan data sebagai berikut :

Combobox Dinamis dengan Jquery Ajax

Setelah database siap, maka kita akan mulai membuat combobox dinamis tersebut. Langkah pertama buatlah controller dengan nama “site” (untuk penamaan bebas). Isi controller tersebut dengan kode dibawah ini.

Sedikit penjelasan dari kode diatas, pada controller diatas terdiri dari dua function yaitu index dan function get_kecamatan. Function index merupakan function default untuk controller “site” ketika controller tersebut diakses. 

Pada saat awal diakses, controller ini hanya mengirimkan data kota saja, data kecamatan tidak dikirim dulu karena tujuan kita adalah hanya menampilkan kecamatan sesuai dengan kota yang dipilih. Sedangkan untuk function get_kecamatan ini berfungsi untuk mengambil data kecamatan sesuai kota yang dipilih. 

Function ini akan dipanggil pada halaman view ketika user memilih combobox kota. Function ini dipanggil dengan menggunakan jQuery Ajax. Setelah anda buat controller seperti diatas, maka buatlah file model dengan nama “m_model” dan isikan dengan code seperti pada gambar dibawah ini. 

Sedikit penjelasan untuk kode diatas, terdapat dua function pada model tersebut. Keduanya berfungsi untuk mengambil data dari database, satu untuk data kota dan satu lagi untuk data kecamatan berdasarkan kota yang dipilih.

Kemudian, buat view untuk form combobox dinamis yang akan ditampilkan dengan nama “view1”. Isikan kode seperti gambar dibawah ini.

Sedikit penjelasan untuk kode diatas, pada kode diatas terdapat dua combobox, yang pertama untuk kota dan yang kedua untuk kecamatan, tapi seperti yang anda lihat, untuk kecamatan kita biarkan kosong, tetapi pada combobox kota kita tambahkan event onchange. 

Jadi ketika user memilih kota, maka akan memanggil fungsi javascript get_kecamatan() yang isinya berupa jQuery Ajax. Pada fungsi javascript tersebut terlihat bahwa kita akan mengirimkan id_kota pada controller “site” dan function “get_kecamatan”. 

Kemudian hasil dari eksekusi tersebut akan dikeluarkan pada tag div “div_kecamatan”. Intinya, apapun hasil keluaran (echo) yang ada pada fungsi get_kecamatan di controller “site”, itulah yang akan ditampilkan pada bagian dari “div_kecamatan”. 

Setelah semuanya selesai, anda dapat menjalankannya di browser anda dan hasilnya seperti gambar dibawah ini.

Dari hasil gambar diatas terlihat bahwa jika kita memilih kota jakarta barat maka di combobox kecamatan yang muncul hanya kecamatan yang ada di jakarta barat yaitu Tanjung Duren, Tomang dan Grogol, Sedangkan jika kita memilih kota Surabaya maka pada combobox kecamatan akan muncul kecamatan Rungkut Kidul dan Gubeng saja.

Demikian tutorial tentang combobox dinamis pada codeigniter dengan memanfaatkan jquery ajax dari saya, dan jika ingin mendownload keseluruhan file hasil codingan diatas anda dapat mendownloadnya disini. Sedangkan untuk databasenya bisa anda download disini.

Jika anda masih bingung dan butuh penjelasan lebih lanjut silahkan hubungi saya melalui komentar dibawah ini.

Tweet

Subscribe to receive free email updates: