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) :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Sinkron_model extends CI_Model{
function __construct()
{
parent::__construct();
}
function nm_kelas()
{
$q = $this->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
<title>Sync Dropdown</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<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 ;
}
</style>
<div id="kelas">
Pilih Kelas :
<select name="id_kelas" id="id_kelas">
<?php
echo "<option>- Pilih Nama Kelas -</option>";
foreach($kelas->result_array() as $k)
{
echo "<option value='".$k['id_kelas']."'>Kelas ".$k['nama_kelas']."</option>";
}
?>
</select>
</div>
<div id="siswa">
</div>
<script type="text/javascript">
$("#id_kelas").change(function(){
var id_kelas = {id_kelas:$("#id_kelas").val()};
$.ajax({
type: "POST",
url : "<?php echo base_url(); ?>index.php/sinkron/siswa",
data: id_kelas,
success: function(msg){
$('#siswa').html(msg);
}
});
});
</script>
siswa.php
Pilih Siswa :
<select name="id_desa" id="id_desa">
<?php
if(count($siswa->result_array())>0)
{
echo "<option>- Pilih Nama Siswa -</option>";
foreach($siswa->result_array() as $k)
{
echo "<option value='".$k['id_siswa']."'>Kelas ".$k['nama_kelas']." - ".$k['nama_siswa']."</option>";
}
}
else{
echo "<option>- Data Belum Tersedia -</option>";
}
?>
</select>
Dan terakhir, kita akan membuat Script controllernya dengan nama file sinkron.php. Berikut ini isinya :
Script Controller (sinkron.php)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Sinkron extends CI_Controller {
function __construct()
{
parent::__construct();
$this->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..
