Dropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL

Dropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL Oleh: Gilang Sonar Amanu

Saya mau coba share lagi, tutorial sederhana namun sering bgt digunakan untuk berbagai kasus. Mungkin bisa berguna khususnya bagi pemula CI'ers.. HeheheTutorial saya kali ini membahas bagaimana membuat dropdown berhubungan / Sync Dropdown berdasarkan relasi dari tabel database dengan menggunakan Framewor...

Saya mau coba share lagi, tutorial sederhana namun sering bgt digunakan untuk berbagai kasus. Mungkin bisa berguna khususnya bagi pemula CI'ers.. Hehehe Tutorial saya kali ini membahas bagaimana membuat dropdown berhubungan / Sync Dropdown berdasarkan relasi dari tabel database dengan menggunakan Framework Codeigniter (CI) versi 2.x.x. Contoh sederhananya seperti dibawah ini. Saya punya Relasi Tabel berikut :

Dari relasi Tabel diatas, saya ingin membuat suatu dropdown yang berhubungan antara dropdown Kelas Dan Dropdown Siswa. Misal, saya memilih Kelas Y pada dropdown Kelas, maka pada dropdown siswa akan muncul pilihan nama siswa yang terdapat pada kelas Y. Contoh penampakannya seperti yang dibawah ini :

Okee.. saya pikir ilustrasinya cukup, langsung aja ke intinya..

Dengan menggunakan CI, maka kita harus membuat script yang dibagi 3, Model-View-Controller (MVC). Disini saya asumsikan kalian sudah mengerti configurasi dasar penggunaan CI. Jadi ga akan saya jelaskan disini. Script Model (sinkron_model.php) : db->query("select * from tbl_kelas"); return $q; } function nm_siswa($id) { $q = $this->db->query("select * from tbl_siswa_kelas left join tbl_kelas on tbl_siswa_kelas.id_kelas=tbl_kelas.id_kelas where tbl_siswa_kelas.id_kelas='$id'"); return $q; } } Script View (depan.php & siswa.php) Buat folder baru dengan nama folder sinkron pada path berikut : application/views/. Lalu Save kedua file tadi didalam folder sinkron. Berikut adalah isi dari kedua file tersebut : depan.php <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"> <style> body{ font-family:Tahoma; font-size:12px; } select{ padding:5px; border:1px solid #666666; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 ;

} <script type="text/javascript"> $("#id_kelas").change(function(){ var id_kelas = {id_kelas:$("#id_kelas").val()}; $.ajax({ type: "POST", url : "index.php/sinkron/siswa", data: id_kelas, success: function(msg){ $('#siswa').html(msg); } }); });

siswa.php Pilih Siswa : <select name="id_desa" id="id_desa"> result_array())>0) { echo "- Pilih Nama Siswa -"; foreach($siswa->result_array() as $k) { echo "Kelas ".$k['nama_kelas']." - ".$k['nama_siswa']."";

} } else{ echo "- Data Belum Tersedia -"; } ?> Dan terakhir, kita akan membuat Script controllernya dengan nama file sinkron.php. Berikut ini isinya :

Script Controller (sinkron.php) load->helper(array('url','form')); $this->load->database(); $this->load->model('sinkron_model'); } function index() { $data['kelas'] = $this->sinkron_model->nm_kelas(); $this->load->view('sinkron/depan',$data); } function siswa() { $id = $this->input->post('id_kelas'); $data['siswa'] = $this->sinkron_model->nm_siswa($id); $this->load->view('sinkron/siswa',$data); } } Dari contoh diatas, kita melihat terdapat script AJAX pada file depan.php. Yup.. itu merupakan script yang digunakan untuk pemanggilan data dropdown berdasarkan relasi database yang kita buat. Dari pemilihan pada dropdown kelas, kita mengirimkan id_kelas ke function nm_siswa pada sinkron_model.php dan di deklarasikan kedalam variabel $id . Pada function tersebut, terdapat query untuk menampilkan daftar siswa dengan clausa Where Id_Kelas = $id yang post dari pemilihan dropdown kelas tadi. Jika berhasil, maka daftar siswa berdasarkan kelas yang dipilih akan muncul pada Dropdown Siswa.

Sekian.. semoga membantu kawan-kawan semua.. = www.gilangsonar.com =

Tentang Penulis Gilang Sonar Amanu Do It Do It Do It