Artikel

Membuat select (combo box) dinamis dengan Ajax dan Codeigniter

    Dibaca 97259 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.