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".
Kedua kita buat model baru dengan nama "M_wilayah.php".
Lalu yang terakhir kita buat view baru dengan nama "wilayah.php".
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
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.
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
Nice share gan!
BalasHapusSekarang kasusnya saya ingin input value2 tersebut ke dalam sebuah tabel. Gmn caranya? Karena yg ada dalam option tersebut hanya kode2 saja.
Mohon pencerahannya gan.
did you have to join to the table (provinsi, kabupaten, kecamatan, desa) in order to appear as the name (provinsi, kabupaten, kecamatan, desa)
BalasHapusyes, you have to do join table
BalasHapusmas, kok databasenya ndk bisa di import, padahal sudah di compress
BalasHapuscoba pakai cara run query aja
HapusThanks mas, sangat membantu
BalasHapussama sama :)
Hapusterimakasih banyak min
BalasHapussama sama jg gan :)
Hapusmin, itu kok yg dropdown kabupaten, kecamatan dan desa tidak bisa tampil ya??
BalasHapusmohon pencerahannya
errornya apa ?
Hapusga muncul isi dari table nya dan tidak ada pilihan lainnya setelah milih dari provinsi
Hapuscoba lihat di console inspect element browser ada error apa
Hapusmunculnya ini,
HapusFailed 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
coba klik error Uncaught ReferenceError: data_provinsi is not defined (index):41 , lalu lihat detail errornya apa
Hapusmunculnya itu,
HapusFailed 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
yang error di scriptnya,
Hapus(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {data_provinsi
};}}}})
kasusnya gan @susilo harjo di bawah ini sepertinya sama...
Hapuskalau belum solved nanti hari minggu saya perbaharui lagi artikelnya :)
jquerynya belum di load sepertinya
Hapusbuka ini https://github.com/dyazincahya/dropdown-wilayah-indonesia-codeigniter
HapusSama ngga muncul knapa ya
BalasHapusSolved mas ternyata jquery nya ditempat saya belum diganti, terima kasih ya
BalasHapussama-sama gan :)
Hapusgan kalo mau makai data ini untuk input data ke database gimana ya? contoh mau buat alamat id memakai data ini.. mohon bantuannya gan
BalasHapusseperti ini http://prntscr.com/cdpeut
Hapussimpan ID wilayahnya (prov, kab, kec dan des) aja. nanti pada saat nampilin datanya tinggal di join saja ke tabel wilayahnya.
Hapus.
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.
MANTAB JIWA!!
BalasHapusIni yg lagi ane cari2, terimakasih kang tutorialnya sangat bermanfaat
BalasHapussaya jg ga muncul kabupaten nya gimana yah jquary sesuai dari semua download itu
BalasHapusnaah sekarang kalau diibalik gmn kang ??
BalasHapusBuat edit data, otomatis yang keluar kan dari desa ke provinsi..
Itu buat insert bagaimana untuk updatenya ? Sebelumnya terima kasih buat tutornya.
BalasHapus@rickyseldjatem : ndak perlu di tampah ataupun di perbaharui lagi datanya, kaera data wilayahnya sudah lengkap
BalasHapusPunya code untuk edit datanya gan? saya cari2 referensi belum nemu nih.
BalasHapusbuat crud lengkap sekalian boleh...
BalasHapuskalo mau di simpan nama nya dimana yg di rubah pak?
BalasHapusPosting Komentar