Bagaimana Cara Membuat Chained Dropdown Di Codeigniter
Di tutuorial kali ini saya akan membahas mengenai drop down di CI, yaitu Bagaimana Cara Membangun Chained Dropdown Di Codeigniter sebetulnya merancang chained dropdown pun dapat sekiranya tak menggunakan codeigniter.
Yang di maksud chained dropdown yaitu, dropdwon yang bergantung dengan dropdown lainya, misal sekiranya kita memilih provinsi tertentu karenanya dropdown turunanya hanya akan menampilkan value bergantung dari value apa yang di pilih di dropdown awalnya.
sebelumnya di harapkan teman-teman merancang dahulllu databasenya ya, saya hanya memberikan contoh penggunaanya saja, jadi di sini saya akan merancang chained dropdown memilih provinsi dan kota yang mana sekiranya memilih provinsi tertntu karenanya di dropdown berikutnya akan tampil kota merujuk pada provinsi tersebut dan kecamatan merujuk pada kota tersebut.
Bagus kita mulai saja , Kita bikin Model bernama Chain_model.php :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chain_model extends CI_Model {
public function get_provinsi()
{
$this->db->order_by('nama_provinsi', 'asc');
return $this->db->get('provinsi')->result();
}
public function get_kota()
{
// kita joinkan tabel kota dengan provinsi
$this->db->order_by('nama_kota', 'asc');
$this->db->join('provinsi', 'kota.id_provinsi_fk = provinsi.id_provinsi');
return $this->db->get('kota')->result();
}
public function get_kecamatan()
{
// kita joinkan tabel kecamatan dengan kota
$this->db->order_by('nama_kecamatan', 'asc');
$this->db->join('kota', 'kecamatan.id_kota_fk = kota.id_kota');
return $this->db->get('kecamatan')->result();
}
// bagi modifikasi ambil dari id level sangat bawah
public function get_selected_by_id_kecamatan($id_kecamatan)
{
$this->db->where('id_kecamatan', $id_kecamatan);
$this->db->join('kota', 'kecamatan.id_kota_fk = kota.id_kota');
$this->db->join('provinsi', 'kota.id_provinsi_fk = provinsi.id_provinsi');
return $this->db->get('kecamatan')->row();
}
}
Kita bikin Controller bernama Chain.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chain extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('Chain_model');
}
// bagi add
public function index()
{
$data = array(
'provinsi' => $this->Chain_model->get_provinsi(),
'kota' => $this->Chain_model->get_kota(),
'kecamatan' => $this->Chain_model->get_kecamatan(),
'provinsi_selected' => '',
'kota_selected' => '',
'kecamatan_selected' => '',
);
$this->load->view('chain', $data);
}
// bagi modifikasi
public function modifikasi()
{
// realnya ambil data dari database, misalnya kita dapatkan data sbb:
$id_kecamatan = 4;
// kita ambil data selected nya bagi selected option
$selected = $this->Chain_model->get_selected_by_id_kecamatan($id_kecamatan);
$data = array(
'provinsi' => $this->Chain_model->get_provinsi(),
'kota' => $this->Chain_model->get_kota(),
'kecamatan' => $this->Chain_model->get_kecamatan(),
'provinsi_selected' => $selected->id_provinsi,
'kota_selected' => $selected->id_kota,
'kecamatan_selected' => $selected->id_kecamatan,
);
$this->load->view('chain', $data);
}
public function aksi_form()
{
// datanya dapat kita insert ke DB atau yang lain
// di sini saya hanya menampilkan datanya saja
var_dump($this->input->post());
}
}
kita bikin view chain.php :
<!doctype html>
<html>
<head>
<title>Chain Dropdown</title>
<link rel=stylesheet href=<?php echo base_url('assets/bootstrap/css/bootstrap.css') ?>/>
</head>
<body>
<div class=container>
<div class=col-md-6>
<h2>Chain Dropdown Example</h2>
<form action=<?php echo site_url('chain/aksi_form') ?> method=post>
<div class=form-group>
<label>Provinsi</label>
<select class=form-control name=provinsi id=provinsi>
<option value=>Please Select</option>
<?php
foreach ($provinsi as $prov) {
?>
<option <?php echo $provinsi_selected == $prov->id_provinsi ? 'selected=selected' : '' ?>
value=<?php echo $prov->id_provinsi ?>><?php echo $prov->nama_provinsi ?></option>
<?php
}
?>
</select>
</div>
<div class=form-group>
<label>Kota</label>
<select class=form-control name=kota id=kota>
<option value=>Please Select</option>
<?php
foreach ($kota as $kot) {
?>
<!--di sini kita tambahkan class berisi id provinsi-->
<option <?php echo $kota_selected == $kot->id_provinsi_fk ? 'selected=selected' : '' ?>
class=<?php echo $kot->id_provinsi_fk ?> value=<?php echo $kot->id_kota ?>><?php echo $kot->nama_kota ?></option>
<?php
}
?>
</select>
</div>
<div class=form-group>
<label>Kecamatan</label>
<select class=form-control name=kecamatan id=kecamatan>
<option value=>Please Select</option>
<?php
foreach ($kecamatan as $kec) {
?>
<!--di sini kita tambahkan class berisi id kota-->
<option <?php echo $kecamatan_selected == $kec->id_kecamatan ? 'selected=selected' : '' ?>
class=<?php echo $kec->id_kota_fk ?> value=<?php echo $kec->id_kecamatan ?>><?php echo $kec->nama_kecamatan ?></option>
<?php
}
?>
</select>
</div>
<div class=form-group>
<input type=submit class=btn btn-primary value=Simpan>
</div>
</form>
</div>
</div>
</body>
<html>
lalu letakan script berikut sebelum penutup body:
<script src=“<?php echo base_url(‘assets/js/jquery-1.10.2.min.js’) ?>”></script>
<script src=“<?php echo base_url(‘assets/js/jquery.chained.min.js’) ?>”></script>
<script>
$(“#kota”).chained(“#provinsi”); // disini kita hubungkan kota dengan provinsi
$(“#kecamatan”).chained(“#kota”); // disini kita hubungkan kecamatan dengan kota
</script>
sekarang ini coba di jalankan, nah project jadi dan juga database dan jquerynya dapat di unduh DISINI
baiklah itu saja dari saya mengenai
Sumber https://kursuswebsite.org
