Membuat Dropdown Select Data Wilayah Seluruh Indonesia CI3

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>";
      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;
  }
 }
?>

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 (){
                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

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

33/Post a Comment/Comments

  1. Nice share gan!

    Sekarang kasusnya saya ingin input value2 tersebut ke dalam sebuah tabel. Gmn caranya? Karena yg ada dalam option tersebut hanya kode2 saja.

    Mohon pencerahannya gan.

    ReplyDelete
  2. did you have to join to the table (provinsi, kabupaten, kecamatan, desa) in order to appear as the name (provinsi, kabupaten, kecamatan, desa)

    ReplyDelete
  3. mas, kok databasenya ndk bisa di import, padahal sudah di compress

    ReplyDelete
  4. min, itu kok yg dropdown kabupaten, kecamatan dan desa tidak bisa tampil ya??
    mohon pencerahannya

    ReplyDelete
    Replies
    1. ga muncul isi dari table nya dan tidak ada pilihan lainnya setelah milih dari provinsi

      Delete
    2. coba lihat di console inspect element browser ada error apa

      Delete
    3. munculnya ini,
      Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/ci/data-wilayah/assets/js/jquery-2.1.4.min.js
      Uncaught ReferenceError: $ is not defined (index):7
      Uncaught ReferenceError: $ is not defined (index):23
      Uncaught ReferenceError: data_provinsi is not defined (index):41

      Delete
    4. coba klik error Uncaught ReferenceError: data_provinsi is not defined (index):41 , lalu lihat detail errornya apa

      Delete
    5. munculnya itu,
      Failed to load resource: the server responded with a status of 404 (Not Found)
      Uncaught ReferenceError: $ is not defined (index):7
      Uncaught ReferenceError: $ is not defined (index):23
      Uncaught ReferenceError: data_provinsi is not defined (index):41

      Delete
    6. yang error di scriptnya,
      (function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {data_provinsi
      };}}}})

      Delete
    7. kasusnya gan @susilo harjo di bawah ini sepertinya sama...
      kalau belum solved nanti hari minggu saya perbaharui lagi artikelnya :)

      Delete
    8. jquerynya belum di load sepertinya

      Delete
    9. buka ini https://github.com/dyazincahya/dropdown-wilayah-indonesia-codeigniter

      Delete
  5. Solved mas ternyata jquery nya ditempat saya belum diganti, terima kasih ya

    ReplyDelete
  6. gan kalo mau makai data ini untuk input data ke database gimana ya? contoh mau buat alamat id memakai data ini.. mohon bantuannya gan

    ReplyDelete
    Replies
    1. seperti ini http://prntscr.com/cdpeut

      Delete
    2. simpan ID wilayahnya (prov, kab, kec dan des) aja. nanti pada saat nampilin datanya tinggal di join saja ke tabel wilayahnya.
      .
      tapi kalau nama wilayahnya mau di simpan langsung juga gpp, cuma nanti resikonya ketika pada saat di tabel wilayah ada perubahan, maka ke tabel temppan agan nyimpen nama wilayah nya ga bakal sync.

      Delete
  7. Ini yg lagi ane cari2, terimakasih kang tutorialnya sangat bermanfaat

    ReplyDelete
  8. saya jg ga muncul kabupaten nya gimana yah jquary sesuai dari semua download itu

    ReplyDelete
  9. naah sekarang kalau diibalik gmn kang ??

    Buat edit data, otomatis yang keluar kan dari desa ke provinsi..

    ReplyDelete
  10. Itu buat insert bagaimana untuk updatenya ? Sebelumnya terima kasih buat tutornya.

    ReplyDelete
  11. @rickyseldjatem : ndak perlu di tampah ataupun di perbaharui lagi datanya, kaera data wilayahnya sudah lengkap

    ReplyDelete
  12. Punya code untuk edit datanya gan? saya cari2 referensi belum nemu nih.

    ReplyDelete

Post a Comment

Previous Post Next Post