[Yii Framework] Menampilkan Data dengan Dialog

Selain dapat menampilkan data secara langsung pada suatu halaman, kita juga dapat menampilakn data lewat dialog. Kali ini saya akan paparkan langkah-langkah menampilkan data melalui CJuiDialogView pada aplikasi kita, melalui CGridView. Berikut langkah-langkahnya :

Pertama buat terlebih dahulu fungsi untuk melakukan CRUD data pada tabel yang anda inginkan. Saran saya lebih baik anda buat dengan menggunakan generate code menggunakan gii karena saya membuat tutorial ini dengan menggunakan code hasil generate dari gii, paling tidak anda lebih mudah mengikuti apa yang saya post..

Jika sudah melakukan instruksi di atas, sekarang buka menu admin(manage) yang ada pada aplikasi anda lalu buka controllernya. Pada actionView ubah code yang tadinya seperti berikut:

public function actionView($id)
{
   $this->render('view',array(
     'model'=>$this->loadModel($id),
    ));
}

menjadi seperti berikut :

public function actionView($id)
{
 if (Yii::app()->request->isAjaxRequest)
 { 
     $this->renderPartial('view', 
       array('model'=>$this->loadModel($id),),false,true);
     if (!empty($_GET['asDialog'])) 
       echo CHtml::script('$("#iddialog").dialog("open")');
     Yii::app()->end();
 }
 else
 {
    $this->render('view',array(
     'model'=>$this->loadModel($id),
 ));
 }
}

Penjelasan : Kode di atas digunakan untuk menampilkan data dalam bentuk dialog ketika user melakukan request dengan ajaxRequest. Disana terdapat code #iddialog yang gunanya adalah untuk menampilkan dialog. #iddialog sendiri adalah id dari dialog yang akan kita tampilkan nanti..

 

Setelah melakukan tahapan di atas, sekarang silahkan anda buka file tampilan action tersebut, yaitu pada “admin.php”. Tambahkan code CjuiDialog pada halaman tersebut seperti berikut :

<?php
    $this->beginWidget('zii.widgets.jui.CJuiDialog', array( 
        'id'=>'iddialog',
        'options'=>array(
           'title'=>'Detail view',
           'autoOpen'=>false,
           'modal'=>false,
           'width'=>'auto',
           'height'=>'auto',
        ),
   ));
?>
<div id="idtampilan"></div>
<?php $this->endWidget();?>

 

Setelah itu pada CGridView anda, rubah menjadi seperti berikut :

<?php $this->widget('zii.widgets.grid.CGridView', array(
 'id'=>'nama-grid',
 'dataProvider'=>$model->search(),
 'filter'=>$model,
 'columns'=>array(
 'attribute1',
 'attribute2',
 'attribute3',
 array(
     'class'=>'CButtonColumn',
     'buttons'=>array('view'=>
           array(
              'url'=>'Yii::app()->createUrl("namacontroller/view", array("id"=>$data->namaattribute,"asDialog"=>1))',
              'options'=>array( 
                  'ajax'=>array(
                       'type'=>'POST',
                       'url'=>"js:$(this).attr('href')", 
                       'update'=>'#idtampilan',
                   ),
                ),
             ),
          ),
       ),
    ),
)); ?>

 

Selesai…

Pada contoh di atas kita akan menampilkan view dg menggunakan dialog ketika user menekan tombol yang ada masing-masing baris data. Terdapat masalah dimana kita biasanya tidak dapat menggunakan CButtonDialog yang terdapat pada CGridView, nah jika terjadi hal tersebut, kita dapat membuat sendiri link khusus yang digunakan untuk melakukan pekerjaan tersebut dengan menggunakan ajaxLink. Kurang lebih contohnya seperti berikut :

<?php $this->widget('zii.widgets.grid.CGridView', array(
 'id'=>'nama-grid',
 'dataProvider'=>$model->search(),
 'filter'=>$model,
 'columns'=>array(
     'attribute1',
     'attribute2',
     'attribute3',
      array(
         'type'=>'raw',
         'value'=>'Chtml::ajaxLink(
             "Detail",Yii::app()->createUrl("namacontroller/view", 
             array("id"=>$data->attribute1,"asDialog"=>1)),
             array("type"=>"POST",
                 "url"=>"js:$(this).attr(\'href\')",
                 "update"=>"#idtampilan"))',
      ),
   ),
)); ?>

Selesai… Selamat mencoba…

Semoga membantu… 😀