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

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

  1. wahyu says:

    mas kok saya klo klik tombol update gak mau muncul dialog nya, tapi klo klik view dulu baru klik update baru mau muncul, bingung
    mohon pencerahannya mas😀

  2. wahyu says:

    saya perjelas mas errornya, jadi saya di tblUser/admin saya klik view itu muncul dialognya, trus dialog nya gak diclose langsung klik update baru bisa muncul dialog updatenya.
    klo baru pertma buka tblUser/admin langsung klik update gak keluar dialog updatenya, abis ntu saya klik view dialognya jg gak keluar.

    mohon pencerhannya mas😀

  3. wah, kenapa ya? code ny udah sama dg punya saya gan? klo ga coba post aja code yg CGridView ny coba..

  4. wahyu says:

    hemm, udah sama kok mas
    nih code CGridView :
    ======================================================
    widget(‘zii.widgets.grid.CGridView’, array(
    ‘id’=>’tbl-user-grid’,
    ‘dataProvider’=>$model->search(),
    ‘filter’=>$model,
    ‘columns’=>array(
    ‘id’,
    ‘username’,
    ‘password’,
    ’email’,
    array(
    ‘class’=>’CButtonColumn’,
    ‘buttons’=>array(
    ‘view’=>array(
    ‘url’=>’Yii::app()->createUrl(
    “tblUser/view”,array(“id”=>$data->id,”asDialog”=>1))’,
    ‘options’=>array(
    ‘ajax’=>array(
    ‘type’=>’POST’,
    ‘url’=>”js:$(this).attr(‘href’)”,
    ‘update’=>’#idtampilan’,
    ),
    ),
    ),
    ‘update’=>array(
    ‘url’=>’Yii::app()->createUrl(
    “tblUser/update”,array(“id”=>$data->id,”asDialog”=>1))’,
    ‘options’=>array(
    ‘ajax’=>array(
    ‘type’=>’POST’,
    ‘url’=>”js:$(this).attr(‘href’)”,
    ‘update’=>’#idtampilan’,
    ),
    ),
    ),
    ),
    ),
    ),
    )); ?>

  5. apa ya? uda sama.. kalo code controller di actionupdate ny gamana gan?

  6. wahyu says:

    nih mas actionupdate nya :

    public function actionUpdate($id)
    {
    $model=$this->loadModel($id);

    // Uncomment the following line if AJAX validation is needed
    // $this->performAjaxValidation($model);

    if(isset($_POST[‘TblUser’]))
    {
    $model->attributes=$_POST[‘TblUser’];
    if($model->save())
    $this->redirect(array(‘view’,’id’=>$model->id));
    }

    /*$this->render(‘update’,array(
    ‘model’=>$model,
    ));*/
    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,
    ));
    }

    }

  7. #iddialog ny udah cocok belum gan dengan id yang ada di view?

  8. wahyu says:

    udah mas
    nih actionview nya

    public function actionView($id)
    {
    /*$this->render(‘view’,array(
    ‘model’=>$this->loadModel($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),
    ));
    }
    }

  9. waduh, apa ya..
    saya jga bingung nih gan..🙂
    coba buat utk tabel lain, jalan ga dy ny gan??

  10. wahyu says:

    siap mas, tak coba deh😀

  11. wahyu says:

    tetep gak bisa mas yang update nya :bingungs

  12. wahyu says:

    ralat mas, udah bisa sekarang, bikin table baru lagi baru bisa, padahal script copy paste dari update yang gak bisa, tapi malah sekarang kok bisa ya ?

  13. hehe, dlu ane jga prnah ngalamin kyak gtu punya temen gan. Tapi trnyata browser ny yg ga support. Tpi ga tau jga klo kasus kasus kek agan itu knapa..

  14. lutfi says:

    hai gan mau tanya..
    kenapa kalau pada form yg ada widget cjuidatepicker, dialog popup nya kok ndak mau muncul ya?
    Terima kasih jawabannya..

  15. o0nie says:

    Mau tanya kalau misal kita mau setelah actionCreate langsung ke cgridview dan isi cgridview otomatis refresh tanpa harus redirect ke view bagamaina ya?

    Thx

  16. coba tambahin ini di controller ny setelah data di save:
    if($model->save())
    {
    if(!isset($_GET[‘ajax’]))
    $this->redirect(isset($_POST[‘returnUrl’]) ? $_POST[‘returnUrl’] : array(‘admin’));
    }

    • o0nie says:

      Mas, kalau mau close dialog dan loading isi grid dengan ajax bagaimana ya?
      Saya mau buat aplikasi seperti topik Membuat Entry Data One to Many Relation dengan Tabel Dinamis tapi dibuat dengan crud ajax untuk insert, update, delete. Karena agak kesulitan untuk update dan delete dengan jappendo.

      thx

  17. @lutfi : saya pernah baca juga issue sperti itu di forum yii, mngkin karna ada js yg bentrok gan..

    • lutfi says:

      hasil googling..ternyata ndak cm cjuidatepicker tp jg semua widget yg pake jquery, solusinya Nambahin script Yii::app()->clientScript->scriptMap=array(‘jquery.js’)=>’false’,);
      Resiko utk datepicker nya ndak bisa jalan namun untuk beberapa widget lain bs jalan
      Atau kalau mau langsung bs pake extensi utk gii yg hasilnya mirip artikel agan,tp pop up nya dia pake fancybox mungkin bisa kalau di masukin datepicker..(hihi ane belum nyoba di kompie cm nyobain demonya..), nama extensinya ajaxcrudgiitemplate..ok sekian..

  18. o0nie says:

    ok thx for reply🙂

  19. @oonie: mksd ny gimana ya?
    coba agan lihat contoh code refresh cgridview di halaman admin hasil generate yii.. itu dy nunjukin cara loading gridview..

  20. ARCHAEOPHOENIX says:

    cara bikin kayak ini gimana mas?

  21. pake jquery aja gan..
    kalo mau cpet pake jappendo… coba search nya aja di jappendo d blog saya gan…
    kalo yg pake jquery ada di wiki ny yii framework kalo ga salah gan..

  22. asep says:

    kalo kasus saya gini gan, semua CJuidialog normal berjalan mulus, cuma masalahnya
    pass create/update yang ada validasai (contoh kasus jika ada textfield yang kosong) maka validasinya kembali ke form boiasa gan, gmn ya biar validasinya muncul di CJuidialog…?
    Mungkin temen2 ada masalah yg sama juga dengan kasus ini…?
    Mohon bantuannya

  23. wah, saya sendiri jujur belum pernah dan belum tahu caranya gan..
    saya sendiri sering kesulitan kalo menerapkan jquery yang udah komplek di Yii.. perlu bnyak belajar javascript lagi.. mngkin ada teman2 lain yg bisa bantu…🙂

  24. Dayat says:

    sblmNya mkash dh share ilmunya mas,, hehehe

    ini ane coba tapi gak pke dialog,,lgsung ke form biasa..
    nah unikNya baris data pertama (di cgridview) kalo di klik update gak da aksi apa2,,
    untuk baris ke 2 bisa masuk form update tapi gak ajax..
    kena validasi if (Yii::app()->request->isAjaxRequest).
    baris lainya normal semua..

    m’af panjang,, mohon pencerahanNya..

  25. wah, agak susah cek kesalahannya kalo gitu gan.. coba pake firebug gan, ntar kliatan disana pesen error dari javascript nya..

  26. dayat says:

    udah pke firebug mas,,
    yg baris ke 2 tu linkNya dah bener,, tp gak tau kenapa kog dinaggap aksi biasa(bukan ajax),,
    jadi kalo di klik ya dpet form update doank,, desainYa ilang (kn pke renderPartial)

  27. wah, kurang tau juga kok bisa gitu mas..

  28. Dayat says:

    hehe,, saya juga bingung,,
    ya dah lah saya coba2 lagi,, spa tw da solusi..

  29. afri says:

    gan gw mau tanya,
    gw ada 1 tabel & 1 form di satu halaman, nah gw ingin mengambil nilai-nilai yang ada di tabel, untuk di tampilin di form. berdasar kan klik link primary key di tabel?? tanpa reload halaman.. mohon bantuannya gan…

  30. maksud ny gmana gan? udah coba postingan saya di atas? itu juga tanpa reload halaman..

  31. agus says:

    saya dah nyoba tp lom berhasil gan, untuk link untuk ngarahin ke action create itu di tempatkan di halaman ‘admin’ ya? tp pas saya tes munculnya malah tanda #, trs #iddialog diisi dengan nilai berapa mas? maaf nih saya masih mulai belajar yii

  32. maaf gan ane newbie masih belajar
    udah coba tutorial di atas dan berhasil gan,, kerenn
    tp knp ya ketika di form saya tambahin CJuiDatePicker form dialog create n update nya gk muncul??
    ada solusi buat akalin nya gan??

    • memang sering muncul masalah ketika mnggunakan ajax dan di dalamnya terdapat cjuidatepicker atau control yg mengandung javascript lainnya.. pada ajax nya di action yang di panggil gunakan renderPartial gan..

  33. sandi says:

    mas, carany bikin modal bootstrap untuk view update create bagaimana ya?
    terus script ini ditaruh dimana ya? mohon pencerahannya. terimakasih.
    beginWidget(‘zii.widgets.jui.CJuiDialog’, array(
    ‘id’=>’iddialog’,
    ‘options’=>array(
    ‘title’=>’Detail view’,
    ‘autoOpen’=>false, //important!
    ‘modal’=>false,
    ‘width’=>’auto’,
    ‘height’=>’auto’,
    ),
    ));
    ?>

    endWidget();?>

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: