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.

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

    BalasHapus
  3. yes, you have to do join table

    BalasHapus
  4. mas, kok databasenya ndk bisa di import, padahal sudah di compress

    BalasHapus
  5. Thanks mas, sangat membantu

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

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

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

      Hapus
    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

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

      Hapus
    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

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

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

      Hapus
    8. jquerynya belum di load sepertinya

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

      Hapus
  7. Solved mas ternyata jquery nya ditempat saya belum diganti, terima kasih ya

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

    BalasHapus
    Balasan
    1. seperti ini http://prntscr.com/cdpeut

      Hapus
    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.

      Hapus
  9. Ini yg lagi ane cari2, terimakasih kang tutorialnya sangat bermanfaat

    BalasHapus
  10. saya jg ga muncul kabupaten nya gimana yah jquary sesuai dari semua download itu

    BalasHapus
  11. naah sekarang kalau diibalik gmn kang ??

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

    BalasHapus
  12. Itu buat insert bagaimana untuk updatenya ? Sebelumnya terima kasih buat tutornya.

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

    BalasHapus
  14. Punya code untuk edit datanya gan? saya cari2 referensi belum nemu nih.

    BalasHapus

Posting Komentar

Lebih baru Lebih lama