Membuat Chain Selected Data Wilayah Seluruh Indonesia CI3

Kali ini saya ingin berbagi database nama wilayah seluruh indonesia dari mulai provinsi, kabupaten, kecamatan dan desa. Selain itu saya juga ingin sekaligus berbagi bagaimana cara membuat sebuah drop dow berantai, tapi kadang orang menyebutnya dengan chain selected, dynamic combobox dan lain sebagainya. Tanpa banyak basa basi mari kita langsung simak bahasan di bawah ini.

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)

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.

Wilayah.phpM_wilayah.phpwilayah.php

application/controllers/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>";
      foreach ($query->result() as $value) {
          $data .= "<option value='".$value->id."'>".$value->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>";
      foreach ($query->result() as $value) {
          $data .= "<option value='".$value->id."'>".$value->nama."</option>";
      }
      echo $data;
  }
 }
?>

application/models/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();
  }
 }
?>

application/view/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 (){
                var url = "<?php echo site_url('wilayah/add_ajax_kec');?>/"+$(this).val();
                $('#kecamatan').load(url);
                return false;
            })
   
   $("#kecamatan").change(function (){
                var url = "<?php echo 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.

Membuat Dropdown Select Data Wilayah Seluruh Indonesia CI3

Full Code Referensi

10 comments

AnonymousAugust 23, 2015 at 3:08 PM
jejak om
UnknownJanuary 8, 2016 at 2:23 AM
mas mo nanya koq gak bisa jalan ya di PHP Version 5.5.9
Hendi Santika's BlogJanuary 15, 2016 at 10:51 AM
Gmn caranya supaya yg tersimpan ke db transaksiitu adalah nama wilayahnya bukan ID nya?

Kemudian pas mw diedit itu option selected nya gmn??

Thanks
Hendi Santika's BlogJanuary 24, 2016 at 8:08 PM
Wah saya sudah coba kalo itu mah.
value="' . $prov->id . '">' . $prov->nama .
Menjadi
value="' . $prov->nama . '">' . $prov->nama .

Itu menyebabkan ke combo selenajutnya tidak aktif alias tidak ada pilihan kab, kec dan desa.

Khan ID nya dipake buat ajax.

Kemudian untuk selected juga sama.

Mungkin bang Cahya bisa mempraktekannya dari contoh di atas. Supaya saya dapat mengikuti dan melihat implementasinya. Soalnya saya sudah coba tidak berhasil..

Mohon pencerahannya.
Hendi Santika's BlogJanuary 25, 2016 at 5:58 AM
Saya sudah mencoba input ID wilayahnya saja ke Tabel transaksi.
Nah untuk join tabel nya gmn? Agak jelimet juga. Hehehee ....

Saya punya masalah di edit yg saya katakan di atas.

Mungkin mas cahya bisa memberikan contoh yg aplikatifnya dari kasus data wilayah ini.
Blogger RSUD TenriawaruDecember 7, 2021 at 6:25 PM
mas gimana caranya jika pilihanya bisa diketik untuk pencariannya.. Terimakasih