[Yii Framework] Membuat Operasi CRUD dengan Ajax Request dan Tampilan Dialog

Operasi CRUD, ya kita dapat membuatnya dengan mudah menggunakan Yii Framework. Dengan memanfaatkan code generate dari gii, kita dapat membuat operasi CRUD tanpa menyentuh coding sedikitpun.. jelas itu akan menghemat banyak waktu kita bukan??

Tapi bagaimana jika kita dituntut untuk membuat operasi CRUD dengan menggunakan ajax request yang tampilannya tiap proses nya ditampilkan dengan menggunakan dialog?? susah?? nggak juga kok.. anda cukup memodifikasi beberapa baris code pada code hasil generate gii dan anda bisa menjalankannya dengan ajax.. Tapi bagaimana caranya??  yah, mari kita bahas..

Pertama, silahkan anda buat operasi CRUD pada suatu tabel dengan menggunakan code generate..

Setelah itu pastikan semua operasi berjalan dengan lancar dan tanpa kendala.. Jika anda sudah melakukan hal tersebut, sekarang mari kita modifikasi agar  CRUD ajaxRequest dapat berjalan. Okeh, saya akan menerapkan ajax CRUD pada halaman admin(manage) yang sudah di generate oleh yii, kenapa?? karena halaman ini memiliki navigasi untuk melakukan semua operasi(Create, Read, Update, Delete). Jadi untuk melakukannya pada halaman lain, silahkan anda modifikasi saja..

Pertama yang perlu kita modifikasi adalah bagian controller. Pada bagian controller, kita harus memberikan suatu kondisi tentang apa yang akan terjadi jika terjadi ajaxRequest pada suatu operasi. Pada actionView, yang awalnya seperti ini :

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

Rubah 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),
         ));
     }
 }

Okeh, selanjutnya pada actionCreate(), yang awalnya seperti berikut :

public function actionCreate()
 {
    $model=new MJenisbahanpustaka;
    if(isset($_POST['MJenisbahanpustaka']))
    {
        $model->attributes=$_POST['MJenisbahanpustaka'];
        if($model->save())
          $this->redirect(array('view','id'=>$model->kdBahanPustaka));
    }

     $this->render('create',array(
        'model'=>$model,
     ));
 }

menjadi seperti berikut :

public function actionCreate()
 {
    $model=new MJenisbahanpustaka;
    if(isset($_POST['MJenisbahanpustaka']))
    {
        $model->attributes=$_POST['MJenisbahanpustaka'];
        if($model->save())
          $this->redirect(array('view','id'=>$model->kdBahanPustaka));
    }

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

Dan pada actionUpdate(), yang awalnya seperti brikut:

public function actionUpdate($id)
{
    $model=$this->loadModel($id);
    if(isset($_POST['MJenisbahanpustaka']))
    {
        $model->attributes=$_POST['MJenisbahanpustaka'];
        if($model->save())
          $this->redirect(array('view','id'=>$model->kdBahanPustaka));
    }
    $this->render('update',array(
       'model'=>$model,
    ));
}

Menjadi seperti berikut :

public function actionUpdate($id)
{
     $model=$this->loadModel($id);
     if(isset($_POST['MJenisbahanpustaka']))
     {
         $model->attributes=$_POST['MJenisbahanpustaka'];
         if($model->save())
            $this->redirect(array('view','id'=>$model->kdBahanPustaka));
     }

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

Sedangkan untuk delete emang udah pake ajax request, jadi ga perlu kita bahas ya..

Selanjutnya yang perlu kita modifikasi adalah tampilannya agar dapat kita buat menjadi ajaxRequest pada link navigasi nya..

Pada tampilan, untuk membuat navigasi yang mengarahkan pada actionCreate anda dapat memasukkan code berikut pada halaman form anda:

<?php echo Chtml::ajaxLink('Create',Yii::app()->createUrl('namaController/create',
     array('asDialog'=>1)),array('type'=>'POST',
      'url'=>'js:$(this).attr("href")',
      'update'=>'#idtampilan'));
?>

Sedangkan pada CGridView anda harus modifikasi pada bagian buttonnya menjadi seperti berikut :

<?php $this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'mjenisbahanpustaka-grid',
   'dataProvider'=>$model->search(),
   'filter'=>$model,
   'columns'=>array(
       'namaAttribut1',
       'namaAttribute2',
       'namaAttribute3',
       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',
                    ),
                 ),
              ),
            'update'=>array(
                 'url'=>'Yii::app()->createUrl("namaController/update", 
                  array("id"=>$data->namaAttribute,"asDialog"=>1))',
                 'options'=>array(
                      'ajax'=>array(
                      'type'=>'POST',
                       'url'=>"js:$(this).attr('href')",
                      'update'=>'#idtampilan',
                 ),
              ),
            ),
         ),
      ),
 ),
)); ?>

Lalu tambahkan code berikut untuk menampung dialog nya :

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

Selesai.. Selamat mencoba..

Semoga membantu.. 😀

[Yii Framework] Membuat Pagination dengan CLinkPager

Pagination, kalo kita make CListView atau CGridView tentunya kita ga perlu susah-susah mikirin gimana caranya membuat pagination karena emang hal itu sudah tersedia langsung oleh CLIstView ataupun CGridView. Tapi ada beberapa kondisi dimana biasanya kita tidak menggunakan control tersebut, tetapi ingin membuat pagination.. yah, Yii sendiri sudah menyediakan cara untuk mempermudah kita melakukan hal tersebut.. yaitu menggunakan CLinkPager..

Bagaimana cara menggunakannya?? okeh, mari kita bahas..

Misal anda menggunakan sql query untuk menampilkan data seperti berikut :

 $sql='SELECT * FROM namaTabel';
 
 $dataProvider=new CSqlDataProvider($sql,array(
   'keyField' => 'id',
   'totalItemCount'=>namaTabel::model()->count(),
   'pagination'=>array(
       'pageSize'=>8,
    ),
 ));

Setelah itu mari kita buat pagination nya seperti berikut :

 $page = new CPagination(namaTabel::model()->count());
 $page->pageSize = 8;

Penjelasan :

  • totalItemCount merupakan jumlah nilai yang akan ditampilkan, jadi kalo pun query anda menghasilkan 100 nilai, tapi anda set cuma 30 nilai maka yang akan nampil cuma 30 nilai.
  • pageSize baik di $dataProvider maupun di pagination digunkan untuk mengeset total nilai yang akan di tampilkan perhalaman.

Ket : pastikan Cpagination memiliki nilai yang sama dengan ‘totalItemCount’ yang terdapat pada $dataProvider. Dan pastikan juga pageSize yang ada pada pagination sama dengan pageSize yang ada pada $dataProvider.

Sedangkan untuk menampilkannya, berikut caranya :

<?php
   foreach ($dataProvider->data as $ia=>$iia)
   {
?>
   Nama Attribut 1 : <?php echo $iia['attribute1'] ?>
   Nama Attribut 2 : <?php echo $iia['attribute2'] ?>
   Nama Attribut 3 : <?php echo $iia['attribute3'] ?>
<?php 
  }
  $this->widget('CLinkPager',array('pages'=>$page));
?>

Yah, jika apa yang anda lakukan telah berhasil, maka data akan ditampilkan sesuai dengan paginationnya..

Selesai.. Selamat mencoba..

Semoga membantu.. 😀

%d bloggers like this: