Chained Dropdown Codeigniter

Chained Dropdown Codeigniter
http://harviacode.com/2017/02/06/chained-dropdown-codeigniter/
Hallo… sahabat harviacode, mohon maaf lama banget vakum menulis. Belakangan banyak project
yang harus diselesaikan, jadi tidak sempat menulis. Saya mendapatkan banyak pertanyaan tentang
bagaimana menggunakan chained dropdown pada codeigniter.
Dengan chained dropdown, kita bisa membuat select yang tergantung pada select lain tanpa
dipusingkan dengan ajax yang banyak. Misalnya kita membuat pilihan provinsi, lalu saat provinsi
dipilih, akan ditampilkan kota yang ada dalam provinsi tersebut, lalu ketika kota dipilih akan
ditampilkan kecamatan yang ada pada kota tersebut dst..
Sebenarnya kita sudah pernah membahas hal ini di . Nah pada kesempatan ini, kita bahas versi CI
nya. Baik, biar tidak penasaran, langsung saja kita mulai.
Pertama, kita siapkan database (anda bisa mendownloadnya di link di bawah). Kita membuat tabel
provinsi, kota dan kecamatan
Kedua, Atur koneksi di database.php serta load url helper melalui autoload ya.
Kita buat Model bernama Chain_model.php dengan kode sbb :
1 <?php
2
3 defined('BASEPATH') OR exit('No direct script access allowed');
4
5 class Chain_model extends CI_Model {
6
7 public function get_provinsi()
8 {
9 $this->db->order_by('nama_provinsi', 'asc');
10 return $this->db->get('provinsi')->result();
11 }
12
13 public function get_kota()
14 {
15 // kita joinkan tabel kota dengan provinsi
16 $this->db->order_by('nama_kota', 'asc');
17 $this->db->join('provinsi', 'kota.id_provinsi_fk = provinsi.id_provinsi');
18 return $this->db->get('kota')->result();
19 }
20
21 public function get_kecamatan()
22 {
23 // kita joinkan tabel kecamatan dengan kota
24 $this->db->order_by('nama_kecamatan', 'asc');
25 $this->db->join('kota', 'kecamatan.id_kota_fk = kota.id_kota');
26 return $this->db->get('kecamatan')->result();
27 }
28
29
30 // untuk edit ambil dari id level paling bawah
31 public function get_selected_by_id_kecamatan($id_kecamatan)
32 {
33 $this->db->where('id_kecamatan', $id_kecamatan);
34 $this->db->join('kota', 'kecamatan.id_kota_fk = kota.id_kota');
35 $this->db->join('provinsi', 'kota.id_provinsi_fk = provinsi.id_provinsi');
36 return $this->db->get('kecamatan')->row();
37 }
38
39 }
Kita buat Controller bernama Chain.php dengan kode sbb :
1 <?php
2
3 defined('BASEPATH') OR exit('No direct script access allowed');
4
5 class Chain extends CI_Controller {
6
7 public function __construct()
8 {
9 parent::__construct();
10 $this->load->model('Chain_model');
11 }
12
13 // untuk add
14 public function index()
15 {
16 $data = array(
17 'provinsi' => $this->Chain_model->get_provinsi(),
18 'kota' => $this->Chain_model->get_kota(),
19 'kecamatan' => $this->Chain_model->get_kecamatan(),
20 'provinsi_selected' => '',
21 'kota_selected' => '',
22 'kecamatan_selected' => '',
23 );
24 $this->load->view('chain', $data);
25 }
26
27 // untuk edit
28 public function edit()
29 {
30 // realnya ambil data dari database, misalnya kita dapatkan data sbb:
31 $id_kecamatan = 4;
32 // kita ambil data selected nya untuk selected option
33 $selected = $this->Chain_model->get_selected_by_id_kecamatan($id_kecamatan);
34
35 $data = array(
36 'provinsi' => $this->Chain_model->get_provinsi(),
37 'kota' => $this->Chain_model->get_kota(),
38 'kecamatan' => $this->Chain_model->get_kecamatan(),
39 'provinsi_selected' => $selected->id_provinsi,
40 'kota_selected' => $selected->id_kota,
41 'kecamatan_selected' => $selected->id_kecamatan,
42 );
43 $this->load->view('chain', $data);
44 }
45
46 public function aksi_form()
47 {
48 // datanya bisa kita insert ke DB atau yang lain
49 // di sini saya hanya menampilkan datanya saja
50 var_dump($this->input->post());
51 }
52 }
Kita buat View bernama Chain.php dengan kode sbb :
1 <!doctype html>
2 <html>
3 <head>
4 <title>Chain Dropdown - harviacode</title>
5 <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css')
6 ?>"/>
7 </head>
8 <body>
9 <div class="container">
10 <div class="col-md-6">
11 <h2>Chain Dropdown Example</h2>
12 <form action="<?php echo site_url('chain/aksi_form') ?>" method="post">
13 <div class="form-group">
14 <label>Provinsi</label>
15 <select class="form-control" name="provinsi" id="provinsi">
16 <option value="">Please Select</option>
17 <?php
18 foreach ($provinsi as $prov) {
19 ?>
20 <option <?php echo $provinsi_selected == $prov->id_provinsi ?
21 'selected="selected"' : '' ?>
22 value="<?php echo $prov->id_provinsi ?>"><?php echo $prov-
23 >nama_provinsi ?></option>
24 <?php
25 }
26 ?>
27 </select>
28 </div>
30 <label>Kota</label>
31 <select class="form-control" name="kota" id="kota">
33 <?php
34 foreach ($kota as $kot) {
35 ?>
36 
37 <option <?php echo $kota_selected == $kot->id_provinsi_fk ?
39 class="<?php echo $kot->id_provinsi_fk ?>" value="<?php echo
40 $kot->id_kota ?>"><?php echo $kot->nama_kota ?></option>
41 <?php
42 }
43 ?>
44 </select>
45 </div>
47 <label>Kecamatan</label>
48 <select class="form-control" name="kecamatan" id="kecamatan">
50 <?php
51 foreach ($kecamatan as $kec) {
52 ?>
53 
54 <option <?php echo $kecamatan_selected == $kec->id_kecamatan ?
56 class="<?php echo $kec->id_kota_fk ?>" value="<?php echo $kec-
57 >id_kecamatan ?>"><?php echo $kec->nama_kecamatan ?></option>
58 <?php
59 }
60 ?>
61 </select>
62 </div>
64 <input type="submit" class="btn btn-primary" value="Simpan">
65 </div>
66 </form>
67 </div>
68 </div>
69 <script src="<?php echo base_url('assets/js/jquery-1.10.2.min.js') ?>"></script>
70 <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>
</script>
</body>
</html>
OK selesai, jalankan kode tersebut melalui browser, dan cobalah memilih provinsi jawa barat,
maka pada pilihan kota hanya akan ditampilkan kota di jawa barat. Jika kita pilih jawa timur, hanya
akan ditampilkan kota di jawa timur. Demikian juga dengan kecamatan. Mudah bukan, selamat
mencoba.
DOWNLOAD
Jika ada masalah, silahkan tulis di kolom komentar ya. Terima kasih telah berkunjung ke
harviacode.com.
Membuat Dropdown Select Data Wilayah
Seluruh Indonesia CI3
Tanpa banyak basa basi, pada postingan kali ini saya ingin membahas sedikit, bagaimana cara membuat
dropdown select wilayah (meliputi : provinsi, kabupaten, kecamatan, desa) yang ada di seluruh
indonesia.
Spesifikasi :
 Php 5.4
 Mysql
 Codeigniter 3.0
 Jquery
Database
Download terlebih dahulu database nama-nama wilayah di seluruh indonesia, DOWNLOAD DISINI.
Buat database baru dengan nama "wilayah_indo".
Config
ubah di autoload.php menjadi :
$autoload['libraries'] = array('database'); (baris 63)
$autoload['helper'] = array('url','html'); (baris 91)
Ubah di config.php menjadi :
$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ?

's' : '') . '://';
$newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
$config['base_url'] = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

(baris 20)
$config['encryption_key'] = 'abcdefghijklmnopqrstuvwxyz'; (baris 312)

Nama database : wilayah_indo
Ubah di routes.php menjadi :

$route['default_controller'] = 'wilayah'; (bais 52)
Code
Setelah database di download dan codeigniter sudah di atur, barulah kali ini kita mulai membuat
kodenya. Pertama kita buat terlebih dahulu sebuah controller sederhana dengan nama "Wilayah.php".
<?php
if (!defined('BASEPATH'))exit('No direct script access allowed');
class Wilayah extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper(array('url',''));
$this->load->model('m_wilayah');
$this->load->database();
}
function index() {
$data['provinsi']=$this->m_wilayah->get_all_provinsi();
$data['path'] = base_url('assets');
$this->load->view('wilayah', $data);
}
function add_ajax_kab($id_prov){
$query = $this->db-
>get_where('wilayah_kabupaten',array('provinsi_id'=>$id_prov));
$data = "<option value=''>- Select Kabupaten -</option>";
foreach ($query->result() as $value) {
$data .= "<option value='".$value->id."'>".$value-
>nama."</option>";
}
echo $data;
}
function add_ajax_kec($id_kab){
$query = $this->db-
>get_where('wilayah_kecamatan',array('kabupaten_id'=>$id_kab));
$data = "<option value=''> - Pilih Kecamatan - </option>";
>nama."</option>";
}
echo $data;
}
function add_ajax_des($id_kec){
$query = $this->db-
>get_where('wilayah_desa',array('kecamatan_id'=>$id_kec));
$data = "<option value=''> - Pilih Desa - </option>";
>nama."</option>";
}
echo $data;
}
}
?>
Kedua kita buat model baru dengan nama "M_wilayah.php".
<?php
if (!defined('BASEPATH'))exit('No direct script access allowed');
class M_wilayah extends CI_Model {
function __construct() {
parent::__construct();
}
function get_all_provinsi() {
$this->db->select('*');
$this->db->from('wilayah_provinsi');
$query = $this->db->get();
return $query->result();
}
}
?>
Lalu yang terakhir kita buat view baru dengan nama "wilayah.php".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="description" content="Data seluruh wilayah indonesia dari mulai
provinsi, kabupaten, kecamatan dan desa. By : http://kang-cahya.com" />
<meta name="author" content="Cahya Dyazin" />
<title>Wilayah Indonesia</title>
<link rel="icon" type="image/png" href="<?php echo $path; ?>/favicon.png">
<script src="<?php echo $path; ?>/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#provinsi").change(function (){
var url = "<?php echo
site_url('wilayah/add_ajax_kab');?>/"+$(this).val();
$('#kabupaten').load(url);
return false;
})
$("#kabupaten").change(function (){
site_url('wilayah/add_ajax_kec');?>/"+$(this).val();
$('#kecamatan').load(url);
return false;
})
$("#kecamatan").change(function (){
site_url('wilayah/add_ajax_des');?>/"+$(this).val();
$('#desa').load(url);
return false;
})
});
</script>
</head>
<body align="center">
<h1>Data Seluruh wilayah di indonesia</h1>
<p>Provinsi :</p>
<select name="prov" class="form-control" id="provinsi">
<option>- Select Provinsi -</option>
<?php foreach($provinsi as $prov){
echo '<option value="'.$prov->id.'">'.$prov->nama.'</option>';
} ?>
</select>
<p>Kabupaten :</p>
<select name="kab" class="form-control" id="kabupaten">
<option value=''>Select Kabupaten</option>
</select>
<p>Kecamatan :</p>
<select name="kec" class="form-control" id="kecamatan">
<option>Select Kecamatan</option>
</select>
<p>Desa :</p>
<select name="des" class="form-control" id="desa">
<option>Select Desa</option>
</select>
<hr>
<footer>2015 | Codeigniter 3 | By, <a href="http://kang-cahya.com"
rel="dofollow">Cahya Dyazin</a></footer>
</body>
</html>
Jika semuanya sudah di buat. Pada saat di Run di browser, maka tampilannya akan tampak seperti
gambar di bawah ini.
Sangat sederhana :) . Mungkin jika anda masih bingung, anda bisa mendownload langsung sintaknya
lengkapnya DISINI.
Jangan lupa komentarnya yah :)

Mungkin cukup sekian dulu tutorial kali ini, terimakasih :)
Re-post : http://www.kang-cahya.com/2016/09/dropdown-select-data-wilayah-seluruh.html

Chained Dropdown Codeigniter

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chained Dropdown Codeigniter

Uploaded by

Copyright:

Available Formats

Chained Dropdown Codeigniter

Kita buat Model bernama Chain_model.php dengan kode sbb :

Buat database baru dengan nama "wilayah_indo".

Ubah di config.php menjadi :

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ?

$newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);

$config['base_url'] = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

$config['encryption_key'] = 'abcdefghijklmnopqrstuvwxyz'; (baris 312)

Ubah di routes.php menjadi :

class Wilayah extends CI_Controller {

Kedua kita buat model baru dengan nama "M_wilayah.php".

class M_wilayah extends CI_Model {

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Jangan lupa komentarnya yah :)

You might also like