Tutorial CodeIgniter + jQuery : Membuat Auto Refresh Dropdown Dengan CI dan jQuery

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….!!!!

Download Aplikasi

18 comments

  1. hqm Reply

    bisa minta tlong dijelaskan lagi mas fungsi siswa.php
    kok ada tu buat apa?

    • Gede Lumbung Post authorReply

      itu cuma untuk penamaan aja mas, pas buat tutorial ini saya menggunakan proyek lama yang pernah saya buat…
      jadinya lupa ganti deh namanya.. 😀

  2. akmal Reply

    mas, mau nanya nih,, kalo buat triple dropdown kaya kasus ane gini misal
    Kabupaten>>Kecamatan>>Kelurahan
    apa perlu tambah 1 view lg ?

    • Gede Lumbung Post authorReply

      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

  3. maulana Reply

    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….

  4. mia Reply

    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 😀

  5. agus setyawan Reply

    Gan, kalo koneksi databasenya gimana, apa yang harus diubah. Tengkyu

  6. belajar Reply

    gimana cara post yang siswa nya? soalnya sewaktu saya mau insert, post dari siswanya tidak terbaca? apa harus ditampung dulu pada variabel? gmn caranya?

  7. Wahyu Purnomo Reply

    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 🙂

  8. dandelion Reply

    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

    • dandelion Reply

      udah muncul combobox yang kedua tapi isinya kok kosong ya, kanapa ya ?? mohon pencerahannya. makasih 🙂

  9. Anonymous Reply

    Terimakasih atas infonya ni gan, jadi nambah pengetahuan baru buat saya
    Jangan lupa kunjungi juga web kami ya gan 🙂

Leave a Reply

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