[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…😀

9 Responses to [Yii Framework] Menampilkan Data dengan Dialog

  1. maasssttaaaaa saya mw nanya,,
    klo yang “asDialog”=>1 ini buat apah yh??
    makasii sebelum nyah =D

  2. sory mbak baru bales.. itu cuma utk mastiin kalo variabel nya ada (tidak kosong).. jadi dia akan ngebuka dialog baru..

  3. Panda Taruma says:

    Bit… kalo misalnya buat ngatasi duplicate primary key gimana? misal saya masukan id primarykey yang sama, pastikan error tuh… nah untuk mencegahnya ane gunain tuh di rulesnya.. nah yang ane tanyakan gimana biar pesan errornya itu muncul dialog…

    thanks bit…

  4. saya belum pernah coba juga gan.. tapi menurut saya sih itu akan ngerepotin user gan..

  5. segitiga says:

    gan, kog malah gak nongol ya cjuidialognya,,, itu kenapa ya ?

    padahal saya sudah ikut seperti diatas

  6. Ok Nice Share Bit, I have to my mind, i have to my said, Iam from birthday Karang Asih City..

  7. xy says:

    sama ga bisa nongol cjuidealognya ???

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: