Membuat Combobox Bertingkat Dengan Cakephp

36 views

Sudah sekian usang aku tidak buat tutorial di Jagocoding.com, alasannya ialah sibuk kerja dan pekerjaan lainnya. Tetapi, walaupun sibuk, aku berusaha untuk menyempatkan waktu untuk mengisi konten di situs tercinta ini. Insya Allah untuk ke depannya aku mulai aktif lagi mengisi konten, tidak hanya mengecek traffict, komentar, dan email dari pengguna Jagocoding.com saja, he he he..

Ok, tutorial berikut ini adalah, yang pasti, selalu, aku sajikan tutorial untuk pengguna CakePHP, Karena CakePHP is The Best PHP Framework, yang mana kita dapat menciptakan aplikasi sangat rapid/cepat dan higienis (clean) dibandingkan dengan framework lain.

Kamu niscaya pernah melihat sebuah form yang memungkinkan pengguna untuk mengisikan kategori yang ada di dalam sebuah combobox, dan kita memungkinkan untuk menentukan sub kategori. Teknik ini disebut chaining combobox, linked combobox, atau dalam bahasa Indonesianya boleh disebut dengan combobox berantai, combobox bertingkat. Banyak penamaan yang lain untuk istilah ini. Di dalam tutorial ini, kita akan mempelajari bagaimana cara menciptakan combobox tersebut dengan menggunakan metode AJAX. Pada tutorial ini kita akan menggunakan jQuery untuk Javascriptnya dan CakePHP untuk Framework yang akan kita pakai.

Untuk tumpuan kasus pada tutorial ini, kita akan menciptakan sebuah combobox berantai untuk menentukan kategori yang memiliki sub kategori, dan sub kategori tersebut memiliki sub kategori juga.

Yang harus pertama kali dibentuk ialah database. Kita akan buat terlebih dahulu sebuah database berjulukan categories. Copy script berikut ini di SQL editor kamu, kita akan buat table yang berisi data kategori-kategori berantai.

---- Struktur dari tabel `categories`--CREATE TABLE IF NOT EXISTS `categories` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `category` varchar(30) NOT NULL,  `parent_id` int(11) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;---- Dumping data untuk tabel `categories`--INSERT INTO `categories` (`id`, `category`, `parent_id`) VALUES(1, 'Kamera', 0),(2, 'Komputer', 0),(3, 'Kamera Pocket', 1),(4, 'Kamera SLR', 1),(5, 'Kamera Polaroid', 1),(6, 'Hardware', 2),(7, 'Software', 2),(8, 'Mother Board', 6),(9, 'Graphic Card/VGA', 6),(10, 'Hardisk', 6),(11, 'Microsoft Windows 8', 7),(12, 'Adobe Photoshop CS6', 7);

 

Ada pertanyaan? Ya, apa itu parent_id? U got the point!

Parent Id dipakai di sini sebagai id kategori yang akan dijadikan induk dari kategori tersebut, sehingga dengan begitu setiap kategori yang memiliki parent_id yang sama, maka kategori tersebut merupakan kelompok dari kategori yang disebut parent itu. Ketika kita trace, maka Adobe Photoshop ialah sub kategori dari Software, alasannya ialah Software memiliki id = 7, dan software ialah sub kategori dari komputer, yaitu memiliki id = 2. Jadi, selain kita pelajari mengenai combobox bertingkat, aku akan share juga mengenai apa itu list threaded, yang artinya data berantai/tree, dan sangat akrab kaitannya nanti bila diimplementasikan terhadap combobox bertingkat.

Controller

Buatlah sebuah controller gres bernama: CategoriesController yang berisi instruksi sebagai berikut:

<?phpclass CategoriesController extends Controller {var $uses = array('Category');}

 

Controller – Function Index()

Kita akan membutuhkan function untuk menampilkan form. Buatlah sebuah function di dalam CategoriesController yaitu function index(). Buatlah function dengan instruksi menyerupai berikut ini:

function index() {$category_options = $this->Category->find('list', array('fields' => array('id', 'category'),'conditions' => array('parent_id' => 0)));$this->set('category_options',$category_options);}

 

$this->Category->find('list') ialah instruksi dari CakePHP yang berfungsi untuk mendapat data dari model Category dengan format list yang dipakai untuk combobox. Field id digunakan untuk value dari combobox, dan field category digunakan sebagai display field dari combobox. Conditions yaitu diambil kategori utama, yaitu parent_id = 0.

View – /Categories/index.ctp

Setelah itu, kita buat view untuk function index(), yaitu index.ctp, dan simpan di dalam folder Categories di view. Isi dengan instruksi berikut ini:

<h2>Pilih Kategori</h2><?phpecho $this->Form->create('Category');echo $this->Form->input('category1', array('id' => 'Category1', 'label' => 'Kategori', 'options' => $category_options, 'empty' => 'Semua Kategori'));echo $this->Form->input('category2', array('id' => 'Category2', 'label' => 'Sub Kategori 1', 'options' => array(), 'empty' => 'Semua Kategori'));echo $this->Form->input('category3', array('id' => 'Category3', 'label' => 'Sub Kategori 2', 'options' => array(), 'empty' => 'Semua Kategori'));echo $this->Form->input('category_id', array('id' => 'CategoryId', 'type' => 'text'));echo $this->Form->submit('Simpan');echo $this->Form->end();?>

Perhatikan element input yang terakhir, yaitu input yang id-nya “CategoryId”. Itu dibentuk untuk menampung data dan yang akan disubmit oleh form dan disimpan ke database. Sedangkan input field yang lain (Category1, Category2, Category3) itu hanya untuk memanipulasi struktur kategori dengan diimplementasikan menjadi combobox berantai yang kita bahas ini. Jadi, ketiga input field tersebut tidak disimpan ke dalam database.

Sekarang, kita akan buat function-function javascript untuk menciptakan teknik Combobox bertingkat ini.

Javascript

Sekarang kita akan buat instruksi javascriptnya, jangan lupa jQuery sudah terinstal dan sudah diload terebih dahulu oleh aplikasi kamu. Jika jQuery sudah ada, silakan tambahkan javascript berikut ini di file index.ctp dan letakkan di atas instruksi di atas.

<script type="text/javascript">function getSubCat(element,parent_id){$.ajax({url: "<?php echo $this->Html->url(array('action' => 'ajax_get_sub_cat')); ?>",data: {parent_id: parent_id},success: function(html){$(element).html(html);getCategoryValue();}});}function getCategoryValue(){if($("#Category3").val()!=''){$("#CategoryId").val($("#Category3").val());}else if($("#Category2").val()!=''){$("#CategoryId").val($("#Category2").val());}else if($("#Category1").val()!=''){$("#CategoryId").val($("#Category1").val());}else{$("#CategoryId").val('');}}function resetSubCat(element){$(element).html('<option value="">Semua Kategori</option>');}</script>

Sekarang aku akan menjelaskan semua function yang ada pada instruksi di atas.  Kode ini aku buat dinamis, sehingga kita tidak membatasi berapa jumlah sub kategori yang akan digunakan.

function getSubCat()

Function ini aku buat dinamis, sehingga dibentuk satu function saja. Jadi, walaupun ada 10 sub kategori, function dibentuk cuma satu saja dan dipanggil sebanyak 10 kali. Function ini memanggil file dengan metode ajax, dan mengirimkan variable parent_id sehingga akan mengeluarkan callback berupa html yaitu option-option combobox yang berisi data categories yang parent_id-nya ialah variable yang dikirim tersebut.

function getCategoryValue()

Function ini berfungsi untuk mengeset nilai ke dalam input field category_id yang akan dikirimkan dan dimasukkan ke dalam database. Dicek satu persatu dari setiap combobox sehingga menghasilkan nilai yang sesuai dan dimasukkan ke dalam field $(“#CategoryId”)

function resetSubCat()

Function ini sengaja aku buat, alasannya ialah memang ada insiden dikala sudah muncul sub kategori yang kedua, ketiga, dan seterusnya dan kita mengubah kategori utama, maka nilai dari sub kategori – sub kategori itu belum direset ulang. Jadi, function ini ialah function untuk reset ulang nilai combobox dari sub sub kategori.

 

Setelah function-function javascript dibuat, terapkan function-function javascript tersebut pada setiap element input pada event onchange, sehingga kodenya diubah menjadi menyerupai berikut ini (perhatikan pada event onchange):

<h2>Pilih Kategori</h2><?phpecho $this->Form->create('Category');echo $this->Form->input('category1', array('id' => 'Category1', 'label' => 'Kategori', 'options' => $category_options, 'empty' => 'Semua Kategori', 'onchange' => 'getSubCat("#Category2", this.value); resetSubCat("#Category2"); resetSubCat("#Category3");'));echo $this->Form->input('category2', array('id' => 'Category2', 'label' => 'Sub Kategori 1', 'options' => array(), 'empty' => 'Semua Kategori', 'onchange' => 'getSubCat("#Category3", this.value)'));echo $this->Form->input('category3', array('id' => 'Category3', 'label' => 'Sub Kategori 2', 'options' => array(), 'empty' => 'Semua Kategori','onchange'=>'getCategoryValue()'));echo $this->Form->input('category_id', array('id' => 'CategoryId', 'type' => 'text'));echo $this->Form->submit('Simpan');echo $this->Form->end();?>

Selanjutnya kita buat controller untuk mendapat callback ajax yang sudah kita panggil tadi. Ikuti terus, hanya di Jagocoding.com, hehe..

Controller – Function ajax_get_sub_cat()

Buatlah function gres pada controller CategoriesController dengan nama function ajax_get_sub_cat(). Selengkapnya di bawah ini:

function ajax_get_sub_cat(){$this->layout = 'ajax';$category_options = $this->Category->find('all', array('fields' => array('id', 'category'),'conditions' => array('parent_id' => $this->params['url']['parent_id'])));$this->set('category_options',$category_options);}

Seperti yang sudah kita bahas di atas, function akan mengambil variable berupa variable request url yang didefinisikan di file view yaitu variable parent_id, yang akan menjadi conditions untuk menampilkan data categories.

Ok, selanjutnya kita buat file view untuk function ini.

View – /Categories/ajax_get_sub_cat.ctp

Sederhana, file ini kita buat dan masukkan instruksi di bawah ini:

<option value="">Semua Kategori</option><?php foreach ($category_options as $c): ?><option value="<?php echo $c['Category']['id']; ?>"><?php echo $c['Category']['category']; ?></option><?php endforeach; ?>

 

Okee baiklah aku tahu sebagian ada yang malas membaca dari awal, hehe..

Ya udah, alasannya ialah aku termasuk salah satu orang paling baik sedunia, jadi aku kasih deh instruksi lengkapnya dan (bahkan) source codenya. Baik kan? Tapi kau harus tetep baca, alasannya ialah membaca ialah salah satu kunci dari kecerdasan.

 


Controller – CategoriesController.php

<?phpclass CategoriesController extends Controller {var $uses = array('Category');function index() {$category_options = $this->Category->find('list', array('fields' => array('id', 'category'),'conditions' => array('parent_id' => 0)));$this->set('category_options',$category_options);}function ajax_get_sub_cat(){$this->layout = 'ajax';$category_options = $this->Category->find('all', array('fields' => array('id', 'category'),'conditions' => array('parent_id' => $this->params['url']['parent_id'])));$this->set('category_options',$category_options);}}

View – /Categories/index.ctp

<?php echo $this->Html->script('jquery-1.9.1.min'); ?><script type="text/javascript">function getSubCat(element,parent_id){$.ajax({url: "<?php echo $this->Html->url(array('action' => 'ajax_get_sub_cat')); ?>",data: {parent_id: parent_id},success: function(html){$(element).html(html);getCategoryValue();}});}function getCategoryValue(){if($("#Category3").val()!=''){$("#CategoryId").val($("#Category3").val());}else if($("#Category2").val()!=''){$("#CategoryId").val($("#Category2").val());}else if($("#Category1").val()!=''){$("#CategoryId").val($("#Category1").val());}else{$("#CategoryId").val('');}}function resetSubCat(element){$(element).html('<option value="">Semua Kategori</option>');}</script><h2>Pilih Kategori</h2><?phpecho $this->Form->create('Category');echo $this->Form->input('category1', array('id' => 'Category1', 'label' => 'Kategori', 'options' => $category_options, 'empty' => 'Semua Kategori', 'onchange' => 'getSubCat("#Category2", this.value); resetSubCat("#Category2"); resetSubCat("#Category3");'));echo $this->Form->input('category2', array('id' => 'Category2', 'label' => 'Sub Kategori 1', 'options' => array(), 'empty' => 'Semua Kategori', 'onchange' => 'getSubCat("#Category3", this.value)'));echo $this->Form->input('category3', array('id' => 'Category3', 'label' => 'Sub Kategori 2', 'options' => array(), 'empty' => 'Semua Kategori','onchange'=>'getCategoryValue()'));echo $this->Form->input('category_id', array('id' => 'CategoryId', 'type' => 'text'));echo $this->Form->submit('Simpan');echo $this->Form->end();?>

View – /Categories/ajax_get_sub_cat.ctp

<option value="">Semua Kategori</option><?php foreach ($category_options as $c): ?><option value="<?php echo $c['Category']['id']; ?>"><?php echo $c['Category']['category']; ?></option><?php endforeach; ?>

 

Ok, tutorial selesai. Selamat berguru ya, jangan lupa bila ada pertanyaan, silakan komentar saja di bawah

Stand By With Me, 
cheyuz@jagocoding.com

 
Author: 
    author
    No related post!