Minggu, 07 Oktober 2012

Chained Dropdown Jquery di CodeIgniter 2.1.2


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.





Persiapan Database Chained Dropdown

Pertama-tama download framework codeigniter versi terbaru (v 2.1.2) dengan klik link ini: Download Codeigniter 2.1.2. Extract framework codeigniter 2.1.2 di dalam folder htdocs > dropdown. Agar praktek berjalan dengan sempurna, jangan lupa untuk memakai versi web server dengan PHP 5.3, seperti xampp versi 1.7.7! Sekarang kita akan membuat database dropdown_berantai dengan tabel usertabel provinsi untuk data dropdown provinsi dan tabel kota untuk data dropdown kota. Berhubung record databasenya banyak karena data provinsi dan data kotanya asli, kamu bisa download file sqlnya dengan klik tombol berikut:
Setelah kamu download file sql di atas, buat database baru dengan namadropdown_berantai. Kemudian import melalui phpmyadmin ke dalam database dropdown_berantai tadi. Maka tampilan ERD (Entitiy Relationship Diagram) database dropdown_berantai seperti gambar di bawah ini:



Contoh 

Konfigurasi Awal Framework Codeigniter

Setting autoloader.php pada folder htdocs > dropdown > application > configuntuk melakukan pemanggilan otomatis library atau helper yang mana sudah ada di dalam framework codeigniter 2.1.2. Kita akan memanggil library databaselibrary table sertahelper url dan helper form dengan mengubah file autoloader.php menjadi kode di bawah ini:
$autoload['libraries'] = array('database', 'table'); // melakukan load library database dan tabel html
...
$autoload['helper'] = array('url', 'form'); // emanggil helper url dan form
Kemudian setting config.php yang masih di satu folder dengan autoloader.php menjadi kode di bawah ini:
$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:

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:

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.


tutorial codeigniter 2 1 2input form dropdown dengan value database pada codeigniter,codeigniter tutorial new 2012standar pemangilan tabel di codeignitertutorial ci 2 1 2,membuat search dengan codeigniter 2 1contoh drop down codeigniter 2dropdown php,form dropdown codeigniter yang ada foreign key nyacontoh erd human resource system databaseMenampilkan database ke Combobox (PHP JQUERY)codeigniter chained drop downdownload chain select ajax codeignitercontoh tombol reset pada codeigniter,membuat print di ciMenampilkan data dari database ke Combobox (PHP JQUERY),codeigniter jquery sql formmembuat tombol reset pada codeigniterquery sql untuk menampilkan data dari database pada cidownload codeigniterform input codeigniter yang ada foreign key nyacara menggunakan CI 2 1 2cara membuat login dengan codeigniter 2 1 2template web code ignitercara menggunakan form dropdown codeigniterChained DropDown dengan Jquery dan Codeigniterjquery and codeigniter 2 1 tutorialmembuat form dan tabel codeigniter jqueryjquery form dropdown from database,maksud dari $autoload[helper] = array(url file);
 

2 komentar:

  1. nice sangat membantu script saya ternyata kurang di bagian
    .....
    $this->namamodel->namafunction($this->input->post('nama field'));
    ......

    hanya kurang script itu untung nemu blog ini terima kasih banyak

    BalasHapus
  2. ada tutiroal input berantai dengan butoon search

    BalasHapus