$config['base_url'] = 'http://localhost/dropdown/'; // ini adalah contoh url dasar menuju codeigniter
...
$config['index_page'] = ''; // kosongkan index_page
Buka file database.php, masih di satu folder dengan file autoloader.php dan config.php dan ubah seperti kode di bawah ini:
$db['default']['username'] = 'root'; // user databasemu
$db['default']['password'] = 'password'; // password databasemu
$db['default']['database'] = 'dropdown_berantai'; // nama database chained dropdown
Buka juga file routes.php, masih di folder htdocs > dropdown >application > config dan ubah seperti kode di bawah ini:
$route['default_controller'] = "dropdown"; // halaman indeks
$route['grab_kota'] = "dropdown/grab_kota"; // jquery dropdown kota
$route['tambahuser'] = "dropdown/tambah"; // halaman tambah user
$route['edituser/(:num)'] = "dropdown/edit/$1"; // halaman edit user
$route['404_override'] = '';
Kembali ke folder utama framework codeigniter atau folder htdocs > dropdown. Karena situs yang saya buat di localhost berada di alamat: “http://localhost/dropdown/“, maka kembali ke folder htdocs > dropdown. Buat file .htaccess (karena tidak dapat melakukan rename langsung ke ekstensi file atau merename file menjadi “.htaccess” di windows maka lebih baik buat menggunakan code editor seperti notepad++) dan isi dengan kode berikut:
RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
Oke, sampai di sini
setting konfigurasi awal framework codeigniter 2.1.2 sebelum masuk ke pemrograman mvc-nya.
Code Controller Untuk Chained Dropdown
Buka folder htdocs > dropdown > application > controllers, ada controller welcome.php. Controller welcome.php lebih baik dihapus agar tidak bingung dalam belajar. Kemudian masih di dalam folder controllers, buat file php baru dengan namadropdown.php. Edit file controller dropdown.php dengan kode berikut:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dropdown extends CI_Controller {
// constructor controller dropdown dan load model "dropdown_model"
function __construct()
{
parent::__construct();
$this->load->model('dropdown_model');
}
// funtion index sebagai halaman utama, menampilkan data user
function index()
{
// Awal - cara menggunakan library html pada codeigniter 2.1.2
$this->table->set_heading(array('Nama User', 'Provinsi', 'Kota', 'Edit?'));
$datausers = $this->dropdown_model->get_users();
foreach($datausers as $user):
$this->table->add_row(array($user->nama_user, $user->nama_provinsi, $user->nama_kota, '<a href="'.base_url().'edituser/'.$user->id_user.'">Edit Data</a>'));
endforeach;
$tmpl = array(
'table_open' => '<table align="center" border="1" cellpadding="4" cellspacing="0">',
'heading_row_start' => '<tr>',
'heading_row_end' => '</tr>',
'heading_cell_start' => '<th>',
'heading_cell_end' => '</th>',
'row_start' => '<tr>',
'row_end' => '</tr>',
'cell_start' => '<td>',
'cell_end' => '</td>',
'row_alt_start' => '<tr>',
'row_alt_end' => '</tr>',
'cell_alt_start' => '<td>',
'cell_alt_end' => '</td>',
'table_close' => '</table>'
);
$this->table->set_template($tmpl);
// Akhir - cara menggunakan library html pada codeigniter 2.1.2
$this->load->view('view_index');
}
// function untuk mengambil data dropdown kota menggunakan jquery post
function grab_kota()
{
if($_POST)
{
$result = $this->dropdown_model->get_kota($this->input->post('provinsi'));
if(is_array($result))
{
// jika hasil query array maka looping hasil query
foreach ($result as $row)
{
echo '<option value="'.$row->id_kota.'">'.$row->nama_kota.'</option>';
}
}
else
{
// tampilkan jika data hasil query kosong
echo '<option value="">Tidak ada data</option>';
}
}
}
// fungsi untuk registrasi atau menambahkan user
function tambah()
{
// cek apakah merupakan post dari form add user
if($_POST)
{
$add= $this->dropdown_model->add_userdata($this->input->post('nama'),$this->input->post('provinsi'),$this->input->post('kota'));
if($add)
{
print"<script>alert('Berhasil menambah user');</script>";
redirect('','refresh');
}
else
{
print"<script>alert('Gagal menambah user');</script>";
redirect('','refresh');
}
}
else
{
$ambil_provinsi = $this->dropdown_model->get_provinsi();
if(is_array($ambil_provinsi))
{
foreach ($ambil_provinsi as $barisprovinsi)
{
$list_provinsi['']= 'Silahkan pilih provinsi';
$list_provinsi[$barisprovinsi->id_provinsi]= $barisprovinsi->nama_provinsi;
}
$data['list_provinsi'] = $list_provinsi;
}
else
{
$data['list_provinsi'] = array('' => 'Tidak ada data');
}
$data['list_kota'] = array('' => 'Pilih provinsi dulu');
$this->load->view('view_add',$data);
}
}
// fungsi untuk edit user yang sudah didaftarkan
function edit($id)
{
// cek apakah merupakan post dari form edit user
if($_POST)
{
$edit= $this->dropdown_model->edit_userdata($this->input->post('id_user'),$this->input->post('nama'),$this->input->post('provinsi'),$this->input->post('kota'));
if($edit)
{
print"<script>alert('Edit berhasil');</script>";
redirect('','refresh');
}
else
{
print"<script>alert('Edit gagal');</script>";
redirect('','refresh');
}
}
else
{
$datauser = $this->dropdown_model->get_userdata($id);
if($datauser)
{
foreach ($datauser as $row)
{
$data['id']= $row->id_user;
$data['nama']= $row->nama_user;
$data['provinsi']= $row->id_provinsi;
$data['kota']= $row->id_kota;
}
$ambil_provinsi = $this->dropdown_model->get_provinsi();
if(is_array($ambil_provinsi))
{
foreach ($ambil_provinsi as $barisprovinsi)
{
$list_provinsi[$barisprovinsi->id_provinsi]= $barisprovinsi->nama_provinsi;
}
$data['list_provinsi'] = $list_provinsi;
}
else
{
$data['list_provinsi'] = array('' => 'Tidak ada data');
}
$ambil_kota = $this->dropdown_model->get_kota($data['provinsi']);
if(is_array($ambil_kota))
{
foreach ($ambil_kota as $bariskota)
{
$list_kota[$bariskota->id_kota]= $bariskota->nama_kota;
}
$data['list_kota'] = $list_kota;
}
else
{
$data['list_kota'] = array('' => 'Tidak ada data');
}
$this->load->view('view_edit',$data);
}
else
{
show_404();
}
}
}
}
Code Model Untuk Chained Dropdown
Setelah membuat controller, sekarang kita akan membuat file model yang mana sebagai interaksi dengan database. Masuk ke folder htdocs > dropdown > application > models, buat file dropdown_model.php dan edit dengan code berikut:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dropdown_model extends CI_Model{
// function untuk mendapatkan data daftar user
function get_users()
{
$this->db->select('*');
$this->db->from('tabel_user');
$this->db->join('tabel_provinsi', 'tabel_user.id_provinsi = tabel_provinsi.id_provinsi');
$this->db->join('tabel_kota', 'tabel_user.id_kota = tabel_kota.id_kota');
$query = $this->db->get();
if ($query->num_rows() > 0)
{
return $query->result();
}
else
{
return false;
}
}
// function untuk mendapatkan data untuk dropdown provinsi
function get_provinsi()
{
$this->db->order_by("nama_provinsi", "asc");
$query = $this->db->get('tabel_provinsi');
if($query->num_rows() > 0)
{
return $query->result();
}
else
{
return FALSE;
}
}
// function untuk mendapatkan data untuk dropdown kota, sesuai $id provinsi
function get_kota($id)
{
$this->db->select('*');
$this->db->order_by("nama_kota", "asc");
$this->db->from('tabel_kota');
$this->db->join('tabel_provinsi', 'tabel_kota.id_provinsi = tabel_provinsi.id_provinsi');
$this->db->where('tabel_kota.id_provinsi', $id);
$query = $this->db->get();
if($query->num_rows() > 0)
{
return $query->result();
}
else
{
return FALSE;
}
}
// function untuk menginput data registrasi atau menambahkan user
function add_userdata($nama, $provinsi, $kota)
{
$add = array(
'id_user' => '',
'nama_user' => $nama,
'id_provinsi' => $provinsi,
'id_kota' => $kota
);
$input = $this->db->insert('tabel_user', $add);
if($input)
{
return TRUE;
}
else
{
return FALSE;
}
}
// function untuk mendapatkan data user untuk diedit, sesuai $id user yang akan diedit
function get_userdata($id)
{
$this->db->select('*');
$this->db->from('tabel_user');
$this->db->join('tabel_provinsi', 'tabel_user.id_provinsi = tabel_provinsi.id_provinsi');
$this->db->join('tabel_kota', 'tabel_user.id_kota = tabel_kota.id_kota');
$this->db->where('id_user', $id);
$query = $this->db->get();
if ($query->num_rows() > 0)
{
return $query->result();
}
else
{
return false;
}
}
// function untuk mengedit data user dari form edit user
function edit_userdata($id, $nama, $provinsi, $kota)
{
$edit = array(
'nama_user' => $nama,
'id_provinsi' => $provinsi,
'id_kota' => $kota
);
$this->db->where('id_user', $id);
$update = $this->db->update('tabel_user', $edit);
if($update)
{
return TRUE;
}
else
{
return FALSE;
}
}
}
Code View Untuk Chained Dropdown
Masuk ke folder htdocs > dropdown > application > views, buat fileview_index.php dan edit dengan code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Dropdown</title>
</head>
<body>
<h2 align="center">Data User, Provinsi dan Kota</h2>
<br/>
<?=$this->table->generate();?>
<br/><br/>
<div align="center"><a href="<?=base_url()?>tambahuser"><b>>> Klik untuk menambah data <<</b></a></div>
<br/><br/>
<hr/>
<div align="center">Page rendered in <b>{elapsed_time}</b> seconds</div>
</body>
</html>
Kamu lihat bagian “$this->table->generate();“, itu adalah implementasi helper tabel html yang mana sudah tersedia di dalam framework codeigniter 2.1.2. Buat file baru lagi dengan nama view_add.php sebagai template formulir untuk menambahkan user. Edit file view_add.php dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Dropdown Add</title>
<script src="<?=base_url();?>public/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#provinsi").change(function(){
var provinsi = {provinsi:$("#provinsi").val()};
$.ajax({
type: "POST",
url : "<?php echo base_url(); ?>grab_kota",
data: provinsi,
success: function(callback){
$('#kota').html(callback);
}
});
});
});
</script>
</head>
<body>
<h2 align="center">Add Data User</h2>
<br/>
<?=form_open()?>
<label for="nama" style="margin-left: 30%; float: left; width: 200px;">Nama User:</label>
<?php
$data_nama = array('placeholder' => 'Masukkan Nama', 'name' => 'nama', 'id' => 'nama');
echo form_input($data_nama);
?>
<br/><br/>
<label for="provinsi" style="margin-left: 30%; float: left; width: 200px;">Pilih Provinsi:</label>
<?php
echo form_dropdown('provinsi', $list_provinsi, '', 'id = "provinsi"');
?>
<br/><br/>
<label for="kota" style="margin-left: 30%; float: left; width: 200px;">Pilih Kabupaten/Kota:</label>
<?php
echo form_dropdown('kota', $list_kota, '', 'id = "kota"');
?>
<br/><br/>
<div style="margin-left: 50%">
<?php
$reset = array('name' => 'Reset', 'value' => 'Reset', 'class' => 'button');
$submit = array('name' => 'Submit', 'value' => 'Tambah', 'class' => 'button');
?>
<?=form_reset($reset);?> <?=form_submit($submit);?>
</div>
<?=form_close()?>
<br/><br/><hr/>
<div align="center">Page rendered in <b>{elapsed_time}</b> seconds</div>
</body>
</html>
Sekali lagi, buat file baru dengan nama view_edit.php sebagai template formulir untuk edit user. Edit file view_edit.php dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Dropdown Edit</title>
<script src="<?=base_url();?>public/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#provinsi").change(function(){
var provinsi = {provinsi:$("#provinsi").val()};
$.ajax({
type: "POST",
url : "<?php echo base_url(); ?>grab_kota",
data: provinsi,
success: function(callback){
$('#kota').html(callback);
}
});
});
});
</script>
</head>
<body>
<h2 align="center">Edit Data User</h2>
<br/>
<?=form_open()?>
<?=form_hidden('id_user', $id);?>
<label for="nama" style="margin-left: 30%; float: left; width: 200px;">Nama User:</label>
<?php
$data_nama = array('placeholder' => 'Masukkan Nama', 'value' => $nama, 'name' => 'nama', 'id' => 'nama');
echo form_input($data_nama);
?>
<br/><br/>
<label for="provinsi" style="margin-left: 30%; float: left; width: 200px;">Pilih Provinsi:</label>
<?php
echo form_dropdown('provinsi', $list_provinsi, $provinsi, 'id = "provinsi"');
?>
<br/><br/>
<label for="kota" style="margin-left: 30%; float: left; width: 200px;">Pilih Kabupaten/Kota:</label>
<?php
echo form_dropdown('kota', $list_kota, $kota, 'id = "kota"');
?>
<br/><br/>
<div style="margin-left: 50%">
<?php
$reset = array('name' => 'Reset', 'value' => 'Reset', 'class' => 'button');
$submit = array('name' => 'Submit', 'value' => 'Edit', 'class' => 'button');
?>
<?=form_reset($reset);?> <?=form_submit($submit);?>
</div>
<?=form_close()?>
<br/><br/><hr/>
<div align="center">Page rendered in <b>{elapsed_time}</b> seconds</div>
</body>
</html>
Praktek dan Mengoperasikan Hasil Tutorial
Setelah melakukan coding di atas, kamu bisa mencoba situs tutorial ini dengan mengakses: “http://localhost/dropdown/” di browser kamu. Maka muncul daftar user yang mana tampilannya seperti di bawah ini:
Gambar list data di atas menjelaskan data user, sebagai contoh record nomor 1, yakni user dengan nama
Roes Wibowo berasal dari provinsi
Daerah Istimewa Yogyakarta dengan alamat di kota
Yogyakarta, dan seterusnya.
Klik link di bagian bawah tabel untuk mencoba menambah data. Kamu akan melihat daftar dropdown kota muncul sesuai dropdown provinsi yang kamu pilih. Tampilan form tambah user seperti gambar di bawah ini:
Untuk mencoba mengedit, klik link “Edit Data“. Kamu akan melihat data dropdown provinsi maupun dropdown kota seperti data yang ada di record database namun kamu masih bisa mengubah data ke provinsi dan kota lainnya. Tampilan yang muncul seperti gambar di bawah ini:
Ingat ya: “Apa yang kita peroleh saat ini bukanlah dari apa yang kita lewati, tetapi apa usaha kita di masa lalu“. Tetap latihan – latihan dan latihan! Membuat tutorial seperti ini juga tidak mudah, maka dari itu kalo kamu copy-paste (copas) tutorial yang ada di blog ini, hargai karya/tulisan saya dengan kasih link balik ke blog ini (http://Roes-Wibowo.com) ini sebagai referensi. Jangan lupa like, tweet dan share ya. Tinggalkan komentar kalo kamu ada kesulitan dari tutorial di atas. Oke, sekian tutorial codeigniter dalam kasus chained dropdown atau dropdown berantai jquery di codeigniter 2.1.2.
Apa yang saya bahas di artikel ini? Saya akan coba membahas lebih dalam tentang pengetahuan array di pemrograman PHP. Sebelumnya, apa itu array di pemrograman php? Array adalah urutan data, atau lebih tepat kita sebut runtutan data.
Apa kelebihan Zurb Foundation 3 dibanding CSS Frameworks lainnya? Coba lihat artikel perbandingan antara: 
Kesempatan kali ini saya akan memberikan tutorial codeigniter tentang dropdown berantai dengan jquery di codeigniter 2.1.2. Biasanya hal ini juga disebut chained dropdown jquery. Arti kata chainedyaitu berantai, dalam artian adabeberapa dropdown yang saling berhubungan. Kasus yang sering kita temui adalah saat melakukan registrasi ada pilihan dropdown provinsi dandropdown kota, yang mana daftar dropdown kota mengikuti dropdown provinsi yang dipilih. Itulah yang akan saya bahas kali ini, yaitu penggunaandropdown berantai antara dropdown provinsi dan dropdown kota atau kabupaten di kasus form registrasi user menggunakan jquery dan codeigniter 2.1.2.
