Membuat select (combo box) dinamis dengan Ajax dan

Codeigniter
April 23,2016 Sandro Brayen Dibaca 15978 kali Javascript

Apa kabar semuanya, semoga dalam keadaan sehat dan baik baik saja.
Pada artikel kali ini saya akan membagikan tutorial cara membuat menu select
(combo box) dinamis menggunakan ajax dan php.

1. Intro

Kita tau bersama bahwa menu select atau combo box sangat diperlukan didalam
membuat aplikasi. Bukan hanya sebagai pelengkap saja, melainkan menu select
sudah merupakan sebuah kebutuhan didalam setiap form inputan.

Selain 'input', select juga pasti akan anda jumpai pada setiap form yang
berhubungan dengan registrasi, survei, kuis, maupun form administratif lainnya.
Maka dari itu setiap programmer diharuskan dan wajib tau penggunaan menu ini,
dan yang paling penting adalah 'bisa dinamis'.

Misalnya bayangkan jika dalam aplikasi terdapat 3 buah menu select, dan memiliki
kondisi dimana pilihan/option yang ada pada menu ke-3 hasilnya bergantung pada
apa yang dipilih pada menu ke-2, dan pilihan/option yang ada pada menu ke-2
bergantung pada apa yang dipilih pada menu pertama.

Prakteknya (dahulu), agar bisa memenuhi kondisi ini, masing masing menu akan
disiapkan kedalam 3 buah halaman yang berbeda.
Ketika user memilih data pada menu select pertama, browser akan mengalihkan
(mereload) halaman ke halaman menu select kedua.
Dan data yang dipilih oleh user pada menu select pertama akan dijadikan sebagai
parameter pada select yang kedua, agar supaya halaman menu select yang kedua
dapat menghasilkan pilihan data sesuai pilihan menu pertama. Begitupun setelah
user memilih data pada menu kedua, browser akan mengalihkan ke halaman menu
select ke tiga.

Cara diatas memang merupakan metode atau praktik untuk menghasilkan menu
dinamis, tapi masih bukanlah cara paling efisien.
Karena jika hanya menggunakan parameter 'dinamis' nya saja, jelas cara diatas sah-
sah saja. Tapi bagaimana jika perameter lainnya mulai diterapkan? misalnya: user
firendly, resource, performa, dan waktu. Parameter parameter inilah sangat
diperlukan oleh aplikasi aplikasi modern era ini, bukan hanya sekedar 'dinamis'
saja.
Terima kasih banyak dengan hadirnya Ajax (Asynchronous JavaScript and
XML)! Karena dengan kehadirannya, menu yang harus kita pisahkan didalam 3
halaman tadi, sekarang sudah bisa kita tampilkan secara bersama-sama didalam 1
halaman saja. Ketika memilih data pada menu pertama,pilihan pada menu select
kedua akan langsung muncul tanpa perlu lagi direload atau mengalihkan halaman.
Karena request perpindahan halaman seperti cara diatas sudah digantikan dengan
cara Asynchronous request.

Sebagai latihan kita kali ini kita akan menggunakan kasus pemilihan provinsi,
kabupaten/kota, kecamatan lalu kelurahan/desa.

Masing masing pilihan disiapkan pada menu yang berbeda.

Berikut ini urutan proses pada menu yang akan kita buat.

1. Halaman menyajikan 4 buah pilihan menu select.

yaitu provinsi, kabupaten/kota, kecamatan lalu kelurahan/desa.
2. Saat halaman pertama kali dimuat/ditampilkan, menu provinsi telah tersedia
data dan siap untuk dipilih. Dan menu lainnya masih belum memiliki data pilihan.
3. Kerika user memilih data pada menu provisi, menu 'kabupaten/kota' akan
mengasilkan pilihan data daftar kabupaten/kota kota sesuai provinsi yang dipilih
pada menu provinsi.
4. Begitupun ketika user memilih data pada menu 'kabupaten/kota', menu
'kecamatan' akan memuat pilihan data sesuai kabupaten/kota yang dipilih.
5. Begitu seterusnya hingga menu 'kelurahan/desa' menghasilkan data sesuai
kecamatan yang dipilih.

2. Mempersiapkan Kelengkapan Project

Pada tutorial kali ini kita akan menggunakan framework kesayangan kita yaitu
framework Codeigniter , dan untuk manghandel Ajax kita akan menggunakan libary
Jquery.
Dan pastinya untuk mengasilkan data tentu diperlukan databasenya. Untuk
database nya silahkan download datanya disini. Dan silahkan diekstrak.

Buka phpmyadmin. Buat database baru dengan nama apa saja, misalnya 'latihan'.
Lalu import file indonesia.sql yang kamu download tadi kedalamnya.
Jika berhasil, database kamu akan memiliki table-table seperti gambar dibawah ini.
Penjelasan table

provinces = Povinsi
regencies = Kabupaten- kota
districts = kecamatan
villages = kelurahan - Desa

Sekarang, buat folder project baru pada localhost kamu. Buat folder apa nama apa
saja, misalnya folder 'latihan'. Lalu ekstrak file file codeigniter didalam nya.
buka folder application/config lalu edit file database.php.
Atur nama databasenya,username,dan password.

buka folder application/config lalu edit file config.php.

atur base url nya menjadi
$config['base_url'] = 'http://localhost/latihan';

Buat file php baru sebagai controller didalam folder application/controllers buat
dengan nama misalnya Select.php
Sekarang buat file php baru sebagai model didalam folder application/models buat
dengan nama misalnya Model_select.php
Buat file php baru sebagai view didalam folder application/views buat dengan
nama misalnya view_select.php
Sebagai assetnya, kita akan menggunakan 'bootstrap' sebagai bantuan CSS.
Buat folder seperti ini 'assets/bootstrap' lalu didalamnya file file Bootstrap dan
jQuery

3. Coding

buka file pada application/controllers/Select.php

lalu masukan code berikut ini.

<?php

Class Select extends CI_Controller

function __construct(){
parent::__construct();

$this->load->database();

$this->load->helper(array('url'));

$this->load->model('model_select');

function index(){

$data['provinsi']=$this->model_select->provinsi();

$this->load->view('view_select',$data);

function ambil_data(){
}

buka file pada application/views/views_select.php

lalu masukan code berikut ini.

<html>

<head>

<title>Latihan Select dnanmis</title>

<link rel="stylesheet" type="text/css" href="<?php echo
base_url('assets/bootstrap/css/bootstrap.min.css') ?>">
<script type="text/javascript" src="<?php echo
base_url('assets/bootstrap/jquery.min.js') ?>"></script>

</head>

<body>

<div class='container'>

<div class='row'>

<div class='col-md-5'>

<h3>Menu Select Dinamis</h3>

<div class='form-group'>
<label>Provinsi</label>
<select class='form-control' id='provinsi'>
<option value='0'>--pilih--</option>
<?php
foreach ($provinsi as $prov) {
echo "<option value='$prov[id]'>$prov[name]</option>";
}
?>
</select>
</div>

<div class='form-group'>
<label>Kabupaten/kota</label>
<select class='form-control' id='kabupaten-kota'>
<option value='0'>--pilih--</option>
</select>
</div>

<div class='form-group'>
<label>Kecamatan</label>
<select class='form-control' id='kecamatan'>
<option value='0'>--pilih--</option>
</select>
</div>
<div class='form-group'>
<label>Kelurahan/desa</label>
<select class='form-control' id='kelurahan-desa'>
<option value='0'>--pilih--</option>
</select>
</div>

</div>

</div>

</div>

</body>

</html>

buka file pada application/models/Models_select.php

lalu masukan code berikut ini.

<?php

Class Model_select extends CI_Model

{

function __construct(){

parent::__construct();

function provinsi(){

$this->db->order_by('name','ASC');
$provinces= $this->db->get('provinces');
return $provinces->result_array();

function kabupaten($provId){
}

function kecamatan($kabId){

function kelurahan($kecId){

Sekarang buka browser kamu lalu buka

http://localhost/latihan/index.php/select
Kamu akan mendapatkan hasil seperti ini
Pada menu provinsi telah tersedia hasilnya.
Tapi belum pada menu yang lainnya

Kembali file kepada file application/controllers/Select.php

Lalu tambahkan beberapa code didalamnya sehingga jadi seperti ini

<?php

Class Select extends CI_Controller

{
function __construct(){

parent::__construct();

$this->load->database();

$this->load->helper(array('url'));

$this->load->model('model_select');

function index(){

$data['provinsi']=$this->model_select->provinsi();

$this->load->view('view_select',$data);

function ambil_data(){

$modul=$this->input->post('modul');
$id=$this->input->post('id');

if($modul=="kabupaten"){
echo $this->model_select->kabupaten($id);
}
else if($modul=="kecamatan"){

}
else if($modul=="kelurahan"){

}
}

}
Pada file application/models/Models_select.php
Tambahkan juga code didalamnya

<?php

Class Model_select extends CI_Model

{

function __construct(){

parent::__construct();

function provinsi(){

$this->db->order_by('name','ASC');
$provinces= $this->db->get('provinces');

return $provinces->result_array();

function kabupaten($provId){

$kabupaten="<option value='0'>--pilih--</pilih>";

$this->db->order_by('name','ASC');
$kab= $this->db->get_where('regencies',array('province_id'=>$provId));

foreach ($kab->result_array() as $data ){

$kabupaten.= "<option value='$data[id]'>$data[name]</option>";
}

return $kabupaten;
}

function kecamatan($kabId){

function kelurahan($kecId){

kembali kepada file application/views/views_select.php

lalu tambahkan kode berikut ini

<script type="text/javascript">

$(function(){

$.ajaxSetup({
type:"POST",
url: "<?php echo base_url('index.php/select/ambil_data') ?>",
cache: false,
});

$("#provinsi").change(function(){

var value=$(this).val();
if(value>0){
$.ajax({
data:{modul:'kabupaten',id:value},
success: function(respond){
$("#kabupaten-kota").html(respond);
}
})
}

});
$("#kabupaten-kota").change(function(){
});

$("#kecamatan").change(function(){
});

})

</script>

Refresh browser kamu. Sekarang ketika kamu memilih sebuah provinsi, maka
daftar kabupaten dan kota sudah tersedia untuk dipilih
Kini waktunya menyelesaikan sisa codingnya
file application/controllers/Select.php

<?php

Class Select extends CI_Controller

function __construct(){

parent::__construct();

$this->load->database();

$this->load->helper(array('url'));

$this->load->model('model_select');

function index(){

$data['provinsi']=$this->model_select->provinsi();

$this->load->view('view_select',$data);

function ambil_data(){

$modul=$this->input->post('modul');
$id=$this->input->post('id');
if($modul=="kabupaten"){
echo $this->model_select->kabupaten($id);
}
else if($modul=="kecamatan"){
echo $this->model_select->kecamatan($id);

}
else if($modul=="kelurahan"){
echo $this->model_select->kelurahan($id);
}
}

file application/models/Models_select.php

<?php

Class Model_select extends CI_Model

{

function __construct(){

parent::__construct();

function provinsi(){

$this->db->order_by('name','ASC');
$provinces= $this->db->get('provinces');

return $provinces->result_array();
}

function kabupaten($provId){

$kabupaten="<option value='0'>--pilih--</pilih>";

$this->db->order_by('name','ASC');
$kab= $this->db->get_where('regencies',array('province_id'=>$provId));

foreach ($kab->result_array() as $data ){

$kabupaten.= "<option value='$data[id]'>$data[name]</option>";
}

return $kabupaten;

function kecamatan($kabId){
$kecamatan="<option value='0'>--pilih--</pilih>";

$this->db->order_by('name','ASC');
$kec= $this->db->get_where('districts',array('regency_id'=>$kabId));

foreach ($kec->result_array() as $data ){

$kecamatan.= "<option value='$data[id]'>$data[name]</option>";
}

return $kecamatan;
}

function kelurahan($kecId){
$kelurahan="<option value='0'>--pilih--</pilih>";

$this->db->order_by('name','ASC');
$kel= $this->db->get_where('villages',array('district_id'=>$kecId));

foreach ($kel->result_array() as $data ){

$kelurahan.= "<option value='$data[id]'>$data[name]</option>";
}

return $kelurahan;
}

file application/views/views_select.php

<html>

<head>

<title>Latihan Select dnanmis</title>

<link rel="stylesheet" type="text/css" href="<?php echo

base_url('assets/bootstrap/css/bootstrap.min.css') ?>">
<script type="text/javascript" src="<?php echo
base_url('assets/bootstrap/jquery.min.js') ?>"></script>

<script type="text/javascript">

$(function(){

$.ajaxSetup({
type:"POST",
url: "<?php echo base_url('index.php/select/ambil_data') ?>",
cache: false,
});

$("#provinsi").change(function(){

var value=$(this).val();
if(value>0){
$.ajax({
data:{modul:'kabupaten',id:value},
success: function(respond){
$("#kabupaten-kota").html(respond);
}
})
}

});

$("#kabupaten-kota").change(function(){
var value=$(this).val();
if(value>0){
$.ajax({
data:{modul:'kecamatan',id:value},
success: function(respond){
$("#kecamatan").html(respond);
}
})
}
})

$("#kecamatan").change(function(){
var value=$(this).val();
if(value>0){
$.ajax({
data:{modul:'kelurahan',id:value},
success: function(respond){
$("#kelurahan-desa").html(respond);
}
})
}
})

})

</script>

</head>

<body>

<div class='container'>

<div class='row'>

<div class='col-md-5'>
<h3>Menu Select Dinamis</h3>

<div class='form-group'>
<label>Provinsi</label>
<select class='form-control' id='provinsi'>
<option value='0'>--pilih--</option>
<?php
foreach ($provinsi as $prov) {
echo "<option value='$prov[id]'>$prov[name]</option>";
}
?>
</select>
</div>

<div class='form-group'>
<label>Kabupaten/kota</label>
<select class='form-control' id='kabupaten-kota'>
<option value='0'>--pilih--</option>
</select>
</div>

<div class='form-group'>
<label>Kecamatan</label>
<select class='form-control' id='kecamatan'>
<option value='0'>--pilih--</option>
</select>
</div>

<div class='form-group'>
<label>Kelurahan/desa</label>
<select class='form-control' id='kelurahan-desa'>
<option value='0'>--pilih--</option>
</select>
</div>

</div>

</div>

</div>
</body>

</html>

Berikut ini adalah hasil akhirnya.

Demikian tutorial kita pada artikel kali ini.
Semoga bisa bermanfaat untuk kita semua.