Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL
Rizaldi Maulidia Achmad
Pada kesempatan kali ini, saya akan coba share tutorial yang hampir sama dengan tutorial sebelumnya. Yaitu mengenai membuat yang namanya Chained Dropdown (sering disebut juga dengan dropdown bertingkat / combo box bertingkat / select berantai / combo box berantai dan masih banyak lagi). Hanya saja pada tutorial sebelumnya menggunakan PHP Native (Murni PHP), sedangkan pada tutorial kali kita akan menggunakan Framework Codeigniter 3 (Versi 3).
Sebelum lanjut ke tutorial pembuatannya, saya akan jelaskan apa itu chained dropdown, Chained Dropdown adalah 2 buah dropdown / combo box yang keduanya saling terhubung atau berelasi. Misalnya saya memiliki combo box Provinsi dan combo box Kota. Nah combo box kota tadi isi pilihannya akan menyesuaikan dengan apa yang dipilih pada combo box provinsi. Jadi pilihan pada combo box kota tergantung apa yang dipilih pada combo box provinsi. Kurang lebih seperti itu gambaran mengenai chained dropdown ini. Sekarang kita lanjut ke langkah-langkah pembuatannya.
DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – PERSIAPAN
- Buat sebuah folder dengan nama chained_dropdown lalu simpan pada folder xampp/htdocs/
- Buat sebuah folder dengan nama images, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
- Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
- Download plugin JQUERY, klik link berikut : Download.
- Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/js/.
- Download gambar loading, klik link berikut : Download.
- Copy and paste file loading.gif yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/images/.
- Download Framework Codeigniter, klik link berikut : download.
- Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/chained_dropdown.
- Ekstrak file codeigniter_v3.7z nya.
STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
- Buat sebuah database dengan nama mynotescode
- Buat sebuah tabel dengan nama provinsi. Struktur tabelnya sebagai berikut :
CREATE TABLE IF NOT EXISTS `provinsi` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama` varchar(100) NOT NULL, PRIMARY KEY (`id`) );
- Buat sebuah tabel lagi dengan nama kota. Struktur tabelnya sebagai berikut :
CREATE TABLE IF NOT EXISTS `kota` ( `id` int(11) NOT NULL AUTO_INCREMENT, `id_provinsi` int(11) NOT NULL, `nama` varchar(100) NOT NULL, PRIMARY KEY (`id`) );
STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.
- Buka folder xampp/htdocs/chained_dropdown/application/config/
- Buka file config.php
Cari kode berikut$config['base_url'] = '';Ubah kode tersebut jadi seperti ini :$config['base_url'] = 'http://localhost/chained_dropdown/';
Kode diatas digunakan untuk menset baseurlnya.
Lalu simpan file tersebut. - Buka file autoload.php
Cari kode berikut ini :$autoload['libraries'] = array(); $autoload['helper'] = array();
Ubah jadi seperti ini :
$autoload['libraries'] = array('database'); $autoload['helper'] = array('url');Kode diatas digunakan untuk memuat (menload) class database dan url.
Lalu simpan file tersebut. - Buka file routes.php
Cari kode berikut ini :$route['default_controller'] = 'welcome';
Ubah jadi seperti ini :
$route['default_controller'] = 'form';
Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi form.
Lalu simpan file tersebut. - Buka file database.php
Cari kode berikut ini :'hostname' => 'localhost', 'username' => '', 'password' => '', 'database' => '',
Ubah jadi seperti ini :
'hostname' => 'localhost', // Nama host 'username' => 'root', // Username 'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja 'database' => 'mynotescode', // Nama databasenya
Kode diatas digunakan untuk koneksi ke database.
Lalu simpan file tersebut.
STEP 4 – BUAT MODEL
#1 Pertama kita akan membuat model untuk provinsi. Buat sebuah file dengan nama ProvinsiModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class ProvinsiModel extends CI_Model {
public function view(){
return $this->db->get('provinsi')->result(); // Tampilkan semua data yang ada di tabel provinsi
}
}
Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘provinsi’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel provinsi. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data provinsi.
#2 Kedua kita akan buat model untuk kota. Buat sebuah file dengan nama KotaModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class KotaModel extends CI_Model {
public function viewByProvinsi($id_provinsi){
$this->db->where('id_provinsi', $id_provinsi);
$result = $this->db->get('kota')->result(); // Tampilkan semua data kota berdasarkan id provinsi
return $result;
}
}
Hampir sama seperti fungsi view() di model provinsi. Hanya saja, pada fungsi viewByProvinsi() disini, kita akan menampilkan semua data kota berdasarkan provinsinya. Pada kode diatas terdapat kode $this->db->where(‘id_provinsi’, $id_provinsi);, kode ini yang berguna untuk menyeleksi data kota berdasarkan provinsi. Jadi tidak akan semua kota yang munculnya. Pada fungsi ini juga, kita membutuhkan parameter $id_provinsi, id tersebut adalah ID Provinsi yang nantinya akan kita ambil dari controller.
STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/controllers/. Berikut ini kodenya :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Form extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('ProvinsiModel');
$this->load->model('KotaModel');
}
public function index(){
$data['provinsi'] = $this->ProvinsiModel->view();
$this->load->view('form', $data);
}
public function listKota(){
// Ambil data ID Provinsi yang dikirim via ajax post
$id_provinsi = $this->input->post('id_provinsi');
$kota = $this->KotaModel->viewByProvinsi($id_provinsi);
// Buat variabel untuk menampung tag-tag option nya
// Set defaultnya dengan tag option Pilih
$lists = "<option value=''>Pilih</option>";
foreach($kota as $data){
$lists .= "<option value='".$data->id."'>".$data->nama."</option>"; // Tambahkan tag option ke variabel $lists
}
$callback = array('list_kota'=>$lists); // Masukan variabel lists tadi ke dalam array $callback dengan index array : list_kota
echo json_encode($callback); // konversi varibael $callback menjadi JSON
}
}
Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘ProvinsiModel’); dan kode $this->load->model(‘KotaModel’);, kode tersebut berfungsi untuk memuat (meload) model provinsi dan kota (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.
Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘provinsi’] = $this->ProvinsiModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model provinsi (ProvinsiModel.php) lalu memasukannya ke dalam array data dengan index provinsi ($data[‘provinsi’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘form’, $data);. Kode tersebut berfungsi untuk memuat (meload) file form.php yang ada di folder views (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.
Fungsi yang kedua yaitu public function listKota(). Fungsi ini berguna untuk menampilkan data kota berdasarkan provinsi yang dikirim oleh Ajax dari form. Alur dari request dengan ajax ini adalah Pertama, kita telah memberi sebuah kode dengan event onchange pada combo box provinsi. Kode tersebut akan mengeksekusi kode ajax yang digunakan untuk mengirim data ID Provinsi yang diplih oleh user ke file option_kota.php. Di file tersebut akan dilakukan proses query sql untuk menampilkan data kota berdasarkan ID Provinsi yang di kirim tadi. Lalu file fungsi listKota() ini akan menghasilkan sebuah tag-tag option kota yang kemudian di konversi menjadi JSON untuk nantinya di ambil kembali hasil JSON tadi oleh AJAX. Lalu AJAX akan me-replace isi dari tag select kota sesuai JSON yang diterima tadi dari option_kota.php.
STEP 6 – BUAT FORM
Selanjutnya kita akan buat sebuah file untuk menampilkan form dropdown provinsi dan kota. Buat file baru dengan nama form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/views/. Berikut ini kode dan tampilannya :
<html>
<head>
<title>Chained Dropdown</title>
</head>
<body>
<h1>Chained Dropdown</h1>
<hr>
<table cellpadding="8">
<tr>
<td><b>Provinsi</b></td>
<td>
<select name="provinsi" id="provinsi" style="width: 200px;">
<option value="">Pilih</option>
<?php
foreach($provinsi as $data){ // Lakukan looping pada variabel siswa dari controller
echo "<option value='".$data->id."'>".$data->nama."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><b>Kota</b></td>
<td>
<select name="kota" id="kota" style="width: 200px;">
<option value="">Pilih</option>
</select>
<div id="loading" style="margin-top: 15px;">
<img src="images/loading.gif" width="18"> <small>Loading...</small>
</div>
</td>
</tr>
</table>
<!-- Load librari/plugin jquery nya -->
<script src="<?php echo base_url("js/jquery.min.js"); ?>" type="text/javascript"></script>
<script>
$(document).ready(function(){ // Ketika halaman sudah siap (sudah selesai di load)
// Kita sembunyikan dulu untuk loadingnya
$("#loading").hide();
$("#provinsi").change(function(){ // Ketika user mengganti atau memilih data provinsi
$("#kota").val().hide(); // Sembunyikan dulu combobox kota nya
$("#loading").show(); // Tampilkan loadingnya
$.ajax({
type: "POST", // Method pengiriman data bisa dengan GET atau POST
url: "<?php echo base_url("index.php/form/listKota"); ?>", // Isi dengan url/path file php yang dituju
data: {id_provinsi : $("#provinsi").val()}, // data yang akan dikirim ke file yang dituju
dataType: "json",
beforeSend: function(e) {
if(e && e.overrideMimeType) {
e.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(response){ // Ketika proses pengiriman berhasil
$("#loading").hide(); // Sembunyikan loadingnya
// set isi dari combobox kota
// lalu munculkan kembali combobox kotanya
$("#kota").html(response.list_kota).show();
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError); // Munculkan alert error
}
});
});
});
</script>
</body>
</html>
Pada kode diatas terdapat kode foreach($provinsi as $data){, kode tersebut akan manampilkan satu per satu data provinsi sampai data provinsi yang terakhir.
echo “<option value='”.$data->id.”‘>”.$data->nama.”</option>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel provinsi.
Akan saya jelaskan sedikit mengenai AJAX nya, karena sebagian besar sudah saya jelaskan lewat kode diatas dengan komentar.
url: diisi dengan url file yang akan ditujutype: diisi dengan method yang ingin digunakan. isi dengan GET atau POSTdata: data yang akan dikirim ke file yang ditujusuccess : function(){}: ketika proses pengiriman selesai, lakukan aksierror : function(){}: ketika terjadi error, lakukan aksi
untuk penjelasan lebih lengkap mengenai atiribut yang ada di JQUERY AJAX, klik disini (Anda akan masuk ke halaman Iklan terlebih dahulu, Tunggu 5 detik lalu klik tombol SKIP AD yang ada di pojok kanan atas).
Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.
Happy Coding ^_^
SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Chained select box using codeigniter mysql, membuat chained dropdown bertingkat dengan codeigniter dan mysql, membuat dropdown berantai dengan codeigniter, tutorial chained dropdown dengan codeigniter dan mysql, chain dropdown dengan codeigniter, chained dropdown dengan codeigniter, membuat dropdown bertingkat dengan codeigniter
POST YOUR COMMENTS