Setelah beberapa hari ini saya posting tentang Android, kali ini saya akan kembali berbagi sedikit tentang tutorial CodeIgniter + jQuery. Sebenarnya tutorial kali ini merupakan lanjutan dari tutorial yang sebelumnya tentang Auto Refresh Dropdown dengan CodeIgniter dan jQuery, dimana pada tutorial tersebut banyak yang mengeluhkan tentang data yang akan ditampilkan terbatas jumlahnya. Maka dari itu, saya akan mencoba untuk membuat dropdown yang serupa, namun dengan data yang tak terbatas sesuai dengan isi data di database. Konsep manajemen database pada tutorial kali ini menerapkan teknik denormalisasi berupa hirarki menu, yang merupakan kebalikan dari teknik normalisasi. Tutorial ini saya coba dengan menggunakan framework CodeIgniter dan jQuery Live, dengan studi kasus site map pulau bali. Nah, berikut cara pembuatannya :
1. Seperti biasa, siapkan terlebih dahulu file-file framework CodeIgniter di direktori htdocs rekan-rekan. Agar sedikit hemat akan penggunaan file, saya hanya menggunakan 1 controller, 1 model dan 1 view.
2. Buat sebuah Controller dengan nama multi_dropdown.php, yang terdiri dari 2 function seperti di bawah ini :
class multi_dropdown extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper(array('url'));
$this->load->database();
$this->load->model(array('dropdown_model'));
}
function index()
{
$data['daerah'] = $this->dropdown_model->ambil_data(0);
$this->load->view('multi-dropdown/home_dropdown',$data);
}
function cari_daerah()
{
$kode = $this->input->post('kode_parent');
$data['daerah'] = $this->dropdown_model->ambil_data($kode);
$num_rows = $data['daerah']->num_rows();;
if($num_rows > 0)
{?>
<select class="parent_daerah">
<?php
foreach($data['daerah']->result() as $d)
{?>
<option value="<?php echo $d->kode_daerah; ?>"><?php echo $d->nama_daerah; ?></option>
<?php
}?>
</select>
<?php
}
else
{
echo '<div class="hasil">Datanya masih kosong mas brow....!!!!</div>';
}
}
}
3. Dilanjutkan dengan pembuatan Model dengan nama dropdown_model.php, yang hanya terdiri 1 function untuk mengambil data sesuai dengan kode parent yang terpilih.
class dropdown_model extends CI_Model
{
function __construct()
{
parent::__construct();
}
public function ambil_data($kode)
{
$q = $this->db->query("select * from tbl_kota where parent_daerah=$kode");
return $q;
}
}
4. Dan yang terakhir dan yang paling sulit, ialah pembuatan View :p dengan nama home_dropdown.php. Disini kita akan bermain-main dengan beberapa API dari jQuery.
<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery.livequery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#loading').ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
});
$('.parent_daerah').livequery('change', function() {
$(this).nextAll('.parent_daerah').remove();
$(this).nextAll('.hasil').remove();
$.post("<?php echo base_url(); ?>index.php/multi_dropdown/cari_daerah", {kode_parent: $(this).val(),
}, function(response){
setTimeout("selesaiMuatData('tampil_daerah', '"+escape(response)+"')", 300);
});
return false;
});
});
function selesaiMuatData(kode, response){
$('#'+kode).append(unescape(response));
}
</script>
<div id="loading" style="display:none"><img src="<?php echo base_url(); ?>asset/images/loading.gif" /><br />Memuat Data...</div>
<p align="center">Site Map Pulau Bali</p>
<div id="content">
<div id="tampil_daerah">
<select class="parent_daerah">
<?php
foreach($daerah->result_array() as $d)
{?>
<option value="<?php echo $d['kode_daerah'];?>"><?php echo $d['nama_daerah'];?></option>
<?php
}?>
</select>
</div>
</div>
Jalankan via web browser dan jika tidak ada masalah :D, maka rekan-rekan sudah berhasil Membuat Multi Level Dropdown Dinamis Dengan CI dan jQuery. Bagi yang masih belum jelas, di bawah postingan ini sudah saya sediakan link untuk melihat hasil jadinya sekaligus link untuk men-download source kodenya. OK deh, semoga bisa bermanfaat untuk rekan-rekan yang kebetulan mencari metode alternatif dari tutorial serupa yang pernah saya posting dulu
Happy Blogging and Keep Coding
Cheerrrss….!!!!
[to_like]
[/to_like]
Pertamax. Hehe. Akhirnya ShoutMix nya bisa juga, thx gan.
bli punya contoh web sekolah, klo ada d sher dong. aku lagi cari buat referensi tugas sekolah nih…sebelumnya terimakasih ya…keren artikel dan tutorialnya
ama CRUD multilevelmenunya sekalian dong bang 😀
apabila mau mengambil nama daerahnya lalu disimpan ke dalam database caranya gimana? Misalkan Jembrana dan Mrana akan diambil namanya untuk disimpan dlm mysql. Apakah memakai $this->input->post(‘nama_daerah’)?
berhasil gaan .. 😀
sukses terusss , teruuus berkaryaa . cemungut ! 😀
semoga niat baikmu dibalas hai gede lumbung…dan rejekimu ditambah brlipat2…Amin!
mas, mau request donk. minta contoh transaksi yg mengunakan detail di CI. misalnya 1x transaksi tapi bisa banyak produk.
Gan! Sebelumnya perkenalkan saya seorang programmer nubie. Makasih banyak atas source code2nya.. Bagus2 bgt, Priceless!!, Berharga sekali, tapi Agan ngasih ke kita2 dengan GRATIS! Berharga bgt buat saya yang masih nubie..
Semoga kebaikan Agan ini dibalas Allah SWT puluhan kali lipat 🙂 , semoga ilmu Agan makin bertambah banyak dengan membagi-bagikan seperti ini, dan Agan bukan hanya gede lumbung, tetapi juga GEDE REJEKI dan GEDE ilmu, Nuhun Gan! PS: Add facebook saya ya? 🙂
Maksih mas bro
muakaaaasih banget mas :DDD
mantap ini website , berbaginya tidak setengah setengah maksih,,
[edited by admin]
mas gimana kalau muti dropdown yang nyambungi 2 combobox yang pakai 2 tabel. mohon bantuannya. makasih semoga amal badahmu membawa barakah. amin 🙂
mas gimana kalau nyambungin 2 combobox dg tabely 2 gmn ya sehingga hasily sama kayak diatas?? sy coba beberapa tutorial tp ndk ada yg berhasil semuanya selalu di combobox ke-2 tidak muncul alias kosong padahal scripty udah benar. gmn ya mohon bantuany makasih mas gede semoga amal ibadah mu diterima amin 🙂