Log Of Oyazhuryachna

Membuat Chain Selected dengan CodeIgniter

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.

chain_select

Untuk membuat chain selected di codeigniter dibutuhkan jquery, adapun langkah-langkahnya adalah sebagai berikut :

  1. 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.
  2. Atur konfigurasi dasar codeigniter meliputi base_url, database, dan default route.
  3. 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 nyaambil_provinsiambil_kabupatenambil_kecamatanambil_kelurahan
  4. 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 :controller_chain_selectTampak 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.drop_down_prop

    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.

  5. Sebelum membuat javascript OnChange, load terlebih dahulu jquery sesuaikan dengan versi yang anda miliki.load_jquery
  6. Kemudian buat javascript untuk meng-handle event onchange pada komponen selectscript_tampil_kab script_tampil_kec script_tampil_kel
  7. 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_dd_kabupatenv_drop_down_kecamatan.php
    v_dd_kecamatanv_drop_down_kelurahan.php
    v_dd_kelurahan
  8. Jalankan
  9. Untuk mempelajari silahkan download file kerjanya

DOWNLOAD VIA DROPBOX

DOWNLOAD VIA GOOGLE DRIVE

, , ,

20 thoughts on “Membuat Chain Selected dengan CodeIgniter

  • […] Pada contoh kali ini penulis membuat contoh CRUD sederhana dengan tambahan bootstrap sebagai tampilan dan jquery untuk membuat chain select. […]

  • Ilsa says:

    Mas,
    Mau tanya donks, kalau dari script yang ini:
    public function ambil_kabupaten($kode_prop){
    $this->db->where('id_provinsi',$kode_prop);

    untuk $kode_prop nya itu berfungsi atau terkait dengan script yang mana ya mas?apakah itu menandakan/menyatakan bahwa: fungsi kabupaten = $kode_prop, maka pada database dimana id_provinsi yang dipilih jalankan fungsi ambil_kabupaten ini. Kira2 logikanya begitu ya mas?

    Soalnya saya nambahkan dropdown baru, — Pilih RW — dan — Pilih RT –, buat bapak saya mas biar mudah, maklum sdh udzur.

    saya tambahkan tabel nomor rw dan tabel nomor rt, didalam tabel tsb :

    Tabel nomor rw -> id_rw | nmr_rw

    Tabel nomor_rt -> id_rt | nmr_rt | id_rw

    Tapi setelah saya tambahkan script untuk memunculkan dropdown rw dan rt, rw nya dapat ditarik datanya, sedangkan untuk rt tidak terpanggil, hanya ada tulisan : — Belum Ada Nomor RT —

    padahal saya sudah tambahkan di javascript, controller, model dan viewnya. Kira-kira ada yang kurang nda ya mas?

    Mohon maaf jikan mengganggu, terimakasih atas kesediaan waktunya mas jika berkenan untuk membantu.

    Terima Kasih.

    • Ilsa says:

      Sudah dapat mas, ternyata saya salah menulis id, yang seharusnya rw_id malah saya tulis rt_id dibagian javascriptnya di file v_tambah_mahasiswa, cuma kok nda keluar semua ya nomor RT nya, kalau saya pilih RW hanya 1 RT yang keluar dan itupun salah ID, seharusnya berada di RW X malah yg keluar RT di RW Y.

      Padahal di tabel RT saya ada 15 RT, dan di RW X terdapat 6 RT tp yang keluar cuma satu RT, dan itupun salah RW. Salah dimana ya mas?

      Terima kasih mas jika berkenan mencerahkan pikiran saya 😉

  • ilham says:

    databasenya error
    g bisa di upload bang

  • ARIADI says:

    Mas, Saya mengikuti langkah2 di atas dengan sedikit modifikasi. Namun ketika pilihannya select boxnya hanya punya satu nilai atau opsi maka dia tidak dapat memilih, atau javascript onchange nya tidak bekerja. Itu bgmana ya Mas? thx

  • Muhammad Ichsan says:

    maaf mungkin pertanyaan gue agak oot dikit..

    ini kan saat input data ke dalam database yang masuk itu id provinsi,id kabupaten dst..

    tapi seumpama yang di inginkan itu data yang masuk kedalam database itu nama provinsi,nama kabupaten..

    bukan idnya yang masuk..

    itu di atur di mananya yah??

  • Marheni says:

    Assalamualaikum, mas boleh minta link download yang ngga error? maaf sebelum nya saya masih belajar.
    Tolong kirim ke marhenisetyowatii@gmail.com . Terimakasih sebelum nya

  • alex says:

    link na eror

  • indi says:

    maaf sebelumnya saya msih bingung sma yg kode $kode_prop, soalnya di program saya ga muncul namanya.
    misalnya saya cuman buat 2 chain, provinsi dan kabupaten, tpi nama kabupatennya tidak muncul setelah memilih nama provinsi.
    tolong penjelasannya..

  • Agun Gunawan says:

    Mas itu kan buat add data ya ,, kalo semisal buat editnya gmn ya ,, jadi data yang sudah di pilih cara menampilkannya gmn ya .. tolong dijawab

  • toni says:

    saya bingung unt proses selected setelah data di simpan kemudian di edit. di taruh dimana yaa

    Untuk selected provinsi,kabupaten,kecamatan,desa terpilih

  • Selvi says:

    Terima kasih kak, sangat membantu

Leave a Reply

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