[Yii Framework] Select Data From Dialog
August 16, 2012 40 Comments
Control apa yang anda gunakan untuk memasukkan data yang berasa dari master? yah, lebih tepat nya hubungannya 1 to many lah.. Kadang orang-orang menggunakan radio button, tetapi kebanyakan orang menggunakan dropdownlist.. Lalu bagaimana jika data nya sangat banyak sehingga orang pusing kalo pake dropdownlist?? Ada autocomplete kok,, jadi sekalinya kita ngetik, data master akan di filter dengan sendiri nya… hmmm.. pilihan tepat… Â Tapi bagaimana jika dalam suatu tabel master memiliki banyak filter untuk memudahkan user?
Misal nih.. kita ingin select wilayah hingga level kelurahan. Untuk memudahkan user, kita ingin agar dapat memilih suatu kelurahan dengan filter berdasarkan provinsi, kabupaten/kota, kecamatan, hingga kelurahan… Tentunya auto complete menjadi kurang cocok dalam kasus ini.. Karena itu solusi yang digunakan biasa nya adalah menggunakan dialog yang menampilkan tabel master, dan dari dialog tersebut kita dapat melakukan filter langsung sesuai field-field yang kita inginkan.. Kemudian setelah menemukan datanya.. kita tinggal memilih data yang ada di dialog dan done… data pun masuk ke dalam field..
Yah, kalo dari penjelasan di atas masih membingungkan.. anda bisa lihat gambaran apa yang ingin saya paparkan dari gambar berikut :
pada form kita menyediaakn fitur untuk user memilih wilayah.. Setelah user memilih “Pilih Wilayah”, maka akan muncul dialog seperti berikut :
User dapat mem-filter data di atas dengan menggunakan filter yang tersedia dan juga dapat melihat dengan pagination.. Jika data nya sudah di temukan, maka user tinggal memilih data tersebut dengan klik link “Pilih” yang ada pada masing-masing row. Kemudian data yang dipilih pun akan masuk ke dalam field :
Okeh, sekarang bagaimana cara membuatnya?
Perttama-tama pada form anda tambahkanlah control seperti berikut :
<div class="row">
<?php echo $form->labelEx($model,'wilayah'); ?>
<?php
echo $form->hiddenField($model,'wilayah');
echo CHtml::textField('wilayah_text','',array('size'=>60));
echo Chtml::ajaxLink('Pilih Wilayah',Yii::app()->createUrl('namaController/namaAction'),
array('update'=>'#wilayahfield'),array("id"=>'wilayah'));
?>
<div id="wilayahfield" style="visibility: hidden;"></div>
<?php echo $form->error($model,'wilayah'); ?>
</div>
Pada tampilan di atas, kita membuat membuat sebuah tipe inputan “hidden” untuk nilai “wilayah” dan satu buah textfield dengan nama “wilayah_text”. Kenapa hidden? ini sama seperti kasus auto increment. Kita sebenarnya menginput kode dari suatu tabel master ke dalam database kita, tetapi kita ingin menampilkan pada user bukan kode nya, tapi isi dari tabel tersebut. Untuk itu kita menyediakan sebuah textfield yang tidak akan disimpan guna menampilkan data dari tabel master, dan field wilayah kita buat tipe hidden yang menyimpan kode dari tabel master, dibuat hidden karena user tidak perlu tahu dan agar tak membingungkan user.
Selain itu kita juga menyediakan sebuah ajaxlink yang isinya akan memanggil sebuah action dan dimana ketika sukses hasil dari ajaxlink tersebut akan mengupdate tag html yang memiliki id = “wilayahfield”.
Kemudian setelah membuat itu pada form, kita kemudian membuat action pada suatu controller yang akan berjalan ketika di request setelah memilih tombol ajaxlink di atas.. Jadi pada controller anda masukkan code berikut :
public function actionNamaaction()
{
$model=new Demography('search');
$model->unsetAttributes(); // clear any default values
if(isset($_GET['Demography']))
$model->attributes=$_GET['Demography'];
$this->renderPartial('getwilayah',array(
'model'=>$model,
),false,true);
Yii::app()->end();
}
Kemudian pada view, buat sebuah file getwilayah.php lalu buat code berikut
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id' => 'bandsdialog3',
'options' => array(
'autoOpen' => true,
'title' => 'Pilih Wilayah',
'modal' => false,
'width' => '600',
))
);
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'user-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
'propinsi',
'kota',
'kecamatan',
'kelurahan',
'kodepos',
array(
'header'=>'Pilih',
'type'=>'raw',
'value'=>'CHtml::link("Pilih","",array(
"onClick"=>CHtml::ajax(array(
"url"=>Yii::app()->createUrl("namaController/selectwilayah",array("id"=>$data->primaryKey)),
"dataType"=>"json",
"success"=>"function(data){
$(\"#Namamodel_wilayah\").val(data.satu);
$(\"#wilayah_text\").val(data.dua);
$(\"#bandsdialog3\").remove();
}")
),"id"=>"child".$data->primaryKey,"style"=>"cursor:pointer;"))',
),
),
));
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
Okeh, kode di atas akan menampilkan cgridview dimana dapat kita lakukan filter, pagination, juga dapat kita pilih nilainya.. Cara memilih nilainya sendiri juga menggunakan AJAX.. disana kita memanggil sebuah action dari sebuah controller dimana memiliki sebuah parameter dengan primary key data yang telah terpilih.. kemudian setelah sukses dijalankan, AJAX terssebut akan mengupdata field dengan id “Namamodel_wilayah”, “wilayah_text” dan menghapus “bandsdialog3”.
Nah, sekarang kita tinggal membuat action yang di request oleh ajax di atas… Untuk itu pada controller buatlah sebuah action seperti berikut :
public function actionSelectdemografi($id)
{
$satu='';
$dua='';
$model=Namamodel::model()->findByPk($id);
$satu=$model->primaryKey;
$dua=$model->propinsi.' - '.$model->kota.' - '.$model->kecamatan.' - '.$model->kelurahan;
echo CJSON::encode(array
(
'satu'=>$satu,
'dua'=>$dua,
));
Yii::app()->end();
}
Kode di atas akan mengembalikan 2 buah nilai, yang pertama nilai isi dari tabel wilayah dan yang kedua mengembalikan primary key…
Selesai…
Selamat mencoba… Semoga membantu… 😀
Sabitlabscode 
Komentar