December 2, 2011
by Sabit Huraira
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.. 😀
Sabitlabscode 
Komentar