Lelah sekali rasanya hari ini bolak-balik ke tempat klien, yang buntut-buntutnya malah gak jadi ketemu. Yaw, mungkin beginilah rasanya punya klien yang super sibuk, harus bisa mengalah dan sedikit lapang dada dengan kesibukan si klien. Padahal semua persiapannya sudah matang, dari MOU sampai konsep desain, sampai terpaksa tugas kampus dan pekerjaan yang lainnya saya telantarkan. Sampai rumah, liat tugas kampus yang masih numpuk jadi tambah malas saja, dan akhirnya tidur menjadi alternatif saya untuk melepas lelah :D.
Setelah bangun, akhirnya saya kepikiran untuk membuat sebuah auto refresh dropdown dengan CI + jQuery, sekalian juga belajar jQuery karena ilmu saya di jQuery masih sangat-sangat cetek. “Apa sih auto refresh dropdown itu?”. Saya juga kurang tau apa nama yang tepat untuk kode iseng-iseng ini :D. Intinya, ada dua dropdown yang saling berhubungan. Dimana jika kita memilih salah satu isi dari dropdown pertama, maka akan muncul sub pilihan dari dropdown pertama tersebut di dropdown kedua. Konsepnya sama seperti dropdown menu yang berisikan sub-sub menu. Dengan bantuan jQuery, maka tidak akan adanya refresh pada halaman web, sehingga otomatis akan memperkecil penggunaan bandwidth hosting. OK deh, daripada ruwet sama penjelasannya, mending kita langsung aja ke cara pembuatannya.
1. Seperti biasa, siapkan file-file framework di direktori htdocs komputer masing-masing.
2. Buat sebuah Controller, dengan kode seperti di bawah ini dan simpan dengan nama 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'));
$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);
}
}
3. Pada contoh kali ini, saya menggunakan 2 buah tabel. Kemudian dilanjutkan dengan membuat sebuah file Model dengan kode seperti di bawah ini, dan simpan dengan nama 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;
}
}
4. Yang terakhir, jangan lupa untuk membuat file View untuk menampilkan output-nya. Disini saya membuat 2 buah file output. Yang pertama dengan nama file depan.php yang berfungsi untuk menampilkan tampilan awal sekaligus dropdown yang pertama.
<title>Auto Refresh 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>
5. Dan file View yang kedua dengan nama file siswa.php, berfungsi untuk menampilkan dropdown yang kedua sesuai dengan parameter yang dikirim dengan method POST dari dropdown pertama. File siswa.php ini ditampilkan tanpa melakukan refresh terhadap halaman web, konsepnya seperti ditempelkan begitu saja pada file depan.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>
Nah, gampang kan penerapannya? Kalau masih bingung, silahkan tinggalkan komentar di kotak komentar :D. Dibawah postingan ini sudah saya sediakan demo file dan link untuk mendownload kode lengkapnya. Semoga bisa menambah wawasan rekan-rekan yang kebetulan lagi bergulat dengan CodeIgniter dan jQuery :).
Happy Blogging and Keep Coding
Cheerrrss….!!!!
bisa minta tlong dijelaskan lagi mas fungsi siswa.php
kok ada tu buat apa?
select name=”id_desa” id=”id_desa” tu buat apa ya mas?
itu cuma untuk penamaan aja mas, pas buat tutorial ini saya menggunakan proyek lama yang pernah saya buat…
jadinya lupa ganti deh namanya.. 😀
mas, mau nanya nih,, kalo buat triple dropdown kaya kasus ane gini misal
Kabupaten>>Kecamatan>>Kelurahan
apa perlu tambah 1 view lg ?
iya, ditambah 1 view utk kelurahannya.
trus di dropdown kecamatan diberikan id utk menjalankan fungsi dari jquery yg akan memanggil view kelurahan..
konsepnya hampir sama dengan yg memanggil view kelurahan
mas klo mo dijadikan satu view gimana mas??
setuju sama wahyu, kalo mau dijadiin 1 form aja gimana mas??
ini ada tutorialnya, sudah saya perbaiki….
http://gedelumbung.com/?p=1499
mas klo misalnya ada sebuah kasus, dimana ada tabel negara, propinsi, kota. setiap tabel terelasi satu sama lain. untuk membaut combox nya bagaimana?
mohon pencerahannya….
pake teknik normalisasi database aja mas…
ini tutorialnya sudah saya perbaiki, menjadi lebih multiple data…
http://gedelumbung.com/?p=1499
pak master pas udah keluar data malahsiswa trus di klik mau menuju isi_krs kok eror yaa not found gt apa ada setinganyg perlu ditambahkan???mohon bantuannya saya masih newbie yg pengen banget belajar CI
terimakasih 😀
gan, kalo boleh kasih masukan.
tiap tutor nya ada screenshotnya dong gan ?
Gan, kalo koneksi databasenya gimana, apa yang harus diubah. Tengkyu
gimana cara post yang siswa nya? soalnya sewaktu saya mau insert, post dari siswanya tidak terbaca? apa harus ditampung dulu pada variabel? gmn caranya?
Maaf Mas, saya kan baru belajar kombinasi jquery di ci..
boleh tanya cara awal nempatin jquery di ci itu gimana ya, trus pemanggilannya gimana..?
terima kasih 🙂
mas gede kok pas aq ganti sesuai dengan database dan tabelq kok combobox yang kedua gak muncul knapa ya?? tolong dijawab dong.. makasih mas gede semoga amal ibadahmu diterima
udah muncul combobox yang kedua tapi isinya kok kosong ya, kanapa ya ?? mohon pencerahannya. makasih 🙂
Terimakasih atas infonya ni gan, jadi nambah pengetahuan baru buat saya
Jangan lupa kunjungi juga web kami ya gan 🙂