Pada tulisan ini saya akan membuat series mengenai pemrograman dengan Yii Framework. Series ini akan disusun untuk membuat sebuah program sederhana yang memanfaatkan fitur-fitur umum yang sangat mungkin digunakan di banyak kasus. Tulisan ini akan menggunakan Basic Template Yii2 (yang menurut saya penggunaannya sedikit lebih sulit daripada advance template Yii2).
Secara garis besar (dan mungkin akan bertambah sesuai keperluan yang mungkin terjadi) outline dari seri tulisan ini akan terdiri dari hal berikut.
- Prainstalasi
- Instalasi YiiFramework 2.0
- Login
- Login dengan Database pada Yii2
- Bekerja dengan Gii
- Module pada Yii2
- Layout dasar dan Manipulasinya pada Yii2
- Costum Asset dan Asset Bundle pada Yii2
- Alias pada Yii2
- Bekerja dengan Form
- Timestamp, Blameable, dan Sluggable Behavior pada Yii2
- Menggunakan Rich Text Input CkEditor dan Alternatifnya pada Yii2
- Gridview dan Listview
- SEO Friendly Url dengan slug
- Scenario pada Model Yii2
- Retrieve data pada Yii2
- Relasi Database pada Yii2
- Menggunakan Bootstrap4
- Widget Kartik dan Kartik Gridview
- Select2 dengan Kartik Ekstension
- Dependent Dropdown pada Yii2
- Bekerja dengan Modals
- Membuat Costum Template untuk Gii
- Mengupload File
- Mengupload File dengan Kartik Widget
- Gridview atau Datatables?
- Session dan Cookie pada Yii2
- Menggunakan AdminLTE pada Yii2
- Membuat Themes pada Yii2
- Menggunakan GoogleMaps API pada Yii2
- Menggunakan Socket.io pada Yii2
- Handling Error
- Bekerja dengan AuthClient
- Menggunakan Amazon S3 pada Yii2
- Mengirim Email dengan Swiftmailer pada Yii2
- Middleware pada Yii2
- Mengenal RBAC pada Yii2
- Implementasi RBAC pada Yii2
- Notifikasi Real Time dengan Socket.io pada Yii2
Anda dapat mengunduh dan memantau progress dari series ini lewat repositori Github belajararief-yii2series. Silahkan bintangi (star) untuk dapat lebih mudah memantau perkembangan repositori.
Requirement
Untuk memudahkan anda dalam memahami petunjuk ini, maka beberapa hal yang perlu diperhatikan diantaranya:
- Sistem Operasi yang saya gunakan adalah Windows 10 64bit dengan terminal menggunakan powershell terminal (beberapa command seperti cd dapat berbeda dengan command prompt biasa), namun saya akan berusaha sebisa mungkin mencontohkan perintah pada sistem operasi lain jika memunkinkan.
- Stack yang digunakan adalah Wamp Server (Apache 2.2, MySQL, PHP 7).
- Yii yang digunakan adalah Yii 2.0 dengan catatan jquery yang digunakan bukan jquery3. Beberapa perintah jquery akan berbeda pada jquery3, dan beberapa extensions yang saya gunakan sepertinya belum mendukung jquery3
Gii
Yii2 dilengkapi dengan GUI-Based Code generator yang menurut saya menjadi pembeda Yii2 dengan Framework lain. Dengan Gii, maka proses prototyping dapat dilakukan lebih cepat dan handling changes di saat akan memberikan demo menjadi lebih mudah. Tapi apakah Gii hanya untuk protyping? Tentu saja tidak. Anda dapat dengan mudah meng-ekstend Gii agar dapat membuat template sendiri apabila aplikasi anda memiliki pola tampilan yang sama di banyak menu. Bagaimana caranya? Mari kita coba.
Dalam tulisan ini kita akan membuat Gii agar dapat memberikan AJAX Crud seperti yang sebelumnya pernah kita buat. Kita akan membuat menu untuk manajemen kategori blog lewat Gii yang sudah di modifikasi.
Duplikasi Template CRUD Generator Default Yii2
Pada contoh ini kita akan memodifikasi CRUD Generator bawaan Yii2 agar memiliki fungsi Ajax CRUD yang lebih enak dilihat. Untuk itu kita akan copy semua template bawaan yang ada pada direktori vendor/yiisoft/yii2-gii/src/generators/crud/default selanjutnya kita copy ke folder templates/modalcrud. Template Gii baru ini akan kita beri nama modalcrud.
Selanjutnya kita akan memodifikasi file yang diperlukan agar dapat menjalankan Ajax CRUD. Dokumen pertama yang akan kita ubah adalah templates/modalcrud/controller.php sehingga menjadi seperti di bawah ini.
<?php
/**
* This is the template for generating a CRUD controller class file.
*/
use yii\db\ActiveRecordInterface;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
$controllerClass = StringHelper::basename($generator->controllerClass);
$modelClass = StringHelper::basename($generator->modelClass);
$searchModelClass = StringHelper::basename($generator->searchModelClass);
if ($modelClass === $searchModelClass) {
$searchModelAlias = $searchModelClass . 'Search';
}
/* @var $class ActiveRecordInterface */
$class = $generator->modelClass;
$pks = $class::primaryKey();
$urlParams = $generator->generateUrlParams();
$actionParams = $generator->generateActionParams();
$actionParamComments = $generator->generateActionParamComments();
echo "<?php\n";
?>
namespace <?= StringHelper::dirname(ltrim($generator->controllerClass, '\\')) ?>;
use Yii;
use <?= ltrim($generator->modelClass, '\\') ?>;
<?php if (!empty($generator->searchModelClass)): ?>
use <?= ltrim($generator->searchModelClass, '\\') . (isset($searchModelAlias) ? " as $searchModelAlias" : "") ?>;
<?php else: ?>
use yii\data\ActiveDataProvider;
<?php endif; ?>
use <?= ltrim($generator->baseControllerClass, '\\') ?>;
use yii\web\NotFoundHttpException;
use yii\filters\VerbFilter;
/**
* <?= $controllerClass ?> implements the CRUD actions for <?= $modelClass ?> model.
*/
class <?= $controllerClass ?> extends <?= StringHelper::basename($generator->baseControllerClass) . "\n" ?>
{
/**
* @inheritdoc
*/
public function behaviors()
{
return [
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'delete' => ['POST'],
],
],
];
}
/**
* Lists all <?= $modelClass ?> models.
* @return mixed
*/
public function actionIndex()
{
<?php if (!empty($generator->searchModelClass)): ?>
$searchModel = new <?= isset($searchModelAlias) ? $searchModelAlias : $searchModelClass ?>();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
<?php else: ?>
$dataProvider = new ActiveDataProvider([
'query' => <?= $modelClass ?>::find(),
]);
return $this->render('index', [
'dataProvider' => $dataProvider,
]);
<?php endif; ?>
}
/**
* Displays a single <?= $modelClass ?> model.
* <?= implode("\n * ", $actionParamComments) . "\n" ?>
* @return mixed
*/
public function actionView(<?= $actionParams ?>)
{
return $this->renderAjax('view', [
'model' => $this->findModel(<?= $actionParams ?>),
]);
}
/**
* Creates a new <?= $modelClass ?> model.
* If creation is successful, the browser will be redirected to the 'view' page.
* @return mixed
*/
public function actionCreate()
{
$model = new <?= $modelClass ?>();
if ($model->load(Yii::$app->request->post())) {
if ($model->save()){
return 1;
} else {
return 0;
}
} else {
return $this->renderAjax('_form', [
'model' => $model,
]);
}
}
/**
* Updates an existing <?= $modelClass ?> model.
* If update is successful, the browser will be redirected to the 'view' page.
* <?= implode("\n * ", $actionParamComments) . "\n" ?>
* @return mixed
*/
public function actionUpdate(<?= $actionParams ?>)
{
$model = $this->findModel(<?= $actionParams ?>);
if ($model->load(Yii::$app->request->post())) {
if ($model->save()){
return 1;
} else {
return 0;
}
} else {
return $this->renderAjax('_form', [
'model' => $model,
]);
}
}
/**
* Deletes an existing <?= $modelClass ?> model.
* If deletion is successful, the browser will be redirected to the 'index' page.
* <?= implode("\n * ", $actionParamComments) . "\n" ?>
* @return mixed
*/
public function actionDelete(<?= $actionParams ?>)
{
$this->findModel(<?= $actionParams ?>)->delete();
return $this->redirect(Yii::$app->request->referrer);
}
/**
* Finds the <?= $modelClass ?> model based on its primary key value.
* If the model is not found, a 404 HTTP exception will be thrown.
* <?= implode("\n * ", $actionParamComments) . "\n" ?>
* @return <?= $modelClass ?> the loaded model
* @throws NotFoundHttpException if the model cannot be found
*/
protected function findModel(<?= $actionParams ?>)
{
<?php
if (count($pks) === 1) {
$condition = '$id';
} else {
$condition = [];
foreach ($pks as $pk) {
$condition[] = "'$pk' => \$$pk";
}
$condition = '[' . implode(', ', $condition) . ']';
}
?>
if (($model = <?= $modelClass ?>::findOne(<?= $condition ?>)) !== null) {
return $model;
} else {
throw new NotFoundHttpException('The requested page does not exist.');
}
}
}
Selanjutnya kita akan memodifikasi file index pada templates/modalcrud/views/index.php sehingga menjadi seperti di bawah ini.
<?php
use yii\helpers\Inflector;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
$urlParams = $generator->generateUrlParams();
$nameAttribute = $generator->getNameAttribute();
echo "<?php\n";
?>
use yii\helpers\Html;
use <?= $generator->indexWidgetType === 'grid' ? "kartik\\grid\\GridView" : "yii\\widgets\\ListView" ?>;
<?= $generator->enablePjax ? 'use yii\widgets\Pjax;' : '' ?>
use yii\bootstrap4\Modal;
/* @var $this yii\web\View */
<?= !empty($generator->searchModelClass) ? "/* @var \$searchModel " . ltrim($generator->searchModelClass, '\\') . " */\n" : '' ?>
/* @var $dataProvider yii\data\ActiveDataProvider */
$this->title = <?= $generator->generateString(Inflector::pluralize(Inflector::camel2words(StringHelper::basename($generator->modelClass)))) ?>;
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="<?= Inflector::camel2id(StringHelper::basename($generator->modelClass)) ?>-index">
<h1><?= "<?= " ?>Html::encode($this->title) ?></h1>
<?php if(!empty($generator->searchModelClass)): ?>
<?= " <?php " . ($generator->indexWidgetType === 'grid' ? "// " : "") ?>echo $this->render('_search', ['model' => $searchModel]); ?>
<?php endif; ?>
<p>
<?= "<?= " ?>Html::a(<?= $generator->generateString('Tambah ' . Inflector::camel2words(StringHelper::basename($generator->modelClass))) ?>, ['create'], [
'class' => 'btn btn-xs btn-success',
'data-toggle'=>"modal",
'data-target'=>"#myModal",
'data-title'=> <?= $generator->generateString("Tambah " . Inflector::camel2words(StringHelper::basename($generator->modelClass))) ?>,
]) ?>
</p>
<?php if ($generator->indexWidgetType === 'grid'): ?>
<?= "<?= " ?>GridView::widget([
'id' => '<?= Inflector::camel2id(StringHelper::basename($generator->modelClass)) ?>',
'dataProvider' => $dataProvider,
'export' => true,
'responsive'=>true,
'hover'=>true,
'resizableColumns'=>true,
'panel'=>['type'=>'primary', 'heading'=>$this->title],
'responsiveWrap' => false,
'toolbar' => [
[
'content' => '{export}{toggleData}' // $this->render('_search', ['model' => $searchModel]),
],
],
// set export properties
'export' => [
'fontAwesome' => true
],
'pager' => [
'firstPageLabel' => 'Awal',
'lastPageLabel' => 'Akhir'
],
'pjax'=>true,
'pjaxSettings'=>[
'options' => ['id' => '<?= Inflector::camel2id(StringHelper::basename($generator->modelClass)) ?>-pjax', 'timeout' => 5000],
],
<?= !empty($generator->searchModelClass) ? "'filterModel' => \$searchModel,\n 'columns' => [\n" : "'columns' => [\n"; ?>
['class' => 'yii\grid\SerialColumn'],
<?php
$count = 0;
if (($tableSchema = $generator->getTableSchema()) === false) {
foreach ($generator->getColumnNames() as $name) {
if (++$count < 6) {
echo " '" . $name . "',\n";
} else {
echo " // '" . $name . "',\n";
}
}
} else {
foreach ($tableSchema->columns as $column) {
$format = $generator->generateColumnFormat($column);
if (++$count < 6) {
echo " '" . $column->name . ($format === 'text' ? "" : ":" . $format) . "',\n";
} else {
echo " // '" . $column->name . ($format === 'text' ? "" : ":" . $format) . "',\n";
}
}
}
?>
[
'class' => 'kartik\grid\ActionColumn',
'template' => '{view} {update} {delete}',
'noWrap' => true,
'vAlign'=>'top',
'buttons' => [
'update' => function ($url, $model) {
return Html::a('<span class="fas fa-edit"></span>', $url,
[
'title' => Yii::t('yii', 'ubah'),
'data-toggle'=>"modal",
'data-target'=>"#myModal",
'data-title'=> "Ubah",
// 'data-confirm' => "Yakin menghapus ini?",
// 'data-method' => 'POST',
// 'data-pjax' => 1
]);
},
'view' => function ($url, $model) {
return Html::a('<span class="fas fa-eye"></span>', $url,
[
'title' => Yii::t('yii', 'lihat'),
'data-toggle'=>"modal",
'data-target'=>"#myModal",
'data-title'=> "Lihat",
]);
},
]
],
],
]); ?>
<?php else: ?>
<?= "<?= " ?>ListView::widget([
'dataProvider' => $dataProvider,
'itemOptions' => ['class' => 'item'],
'itemView' => function ($model, $key, $index, $widget) {
return Html::a(Html::encode($model-><?= $nameAttribute ?>), ['view', <?= $urlParams ?>]);
},
]) ?>
<?php endif; ?>
</div>
<?= "<?php " ?>
Modal::begin([
'id' => 'myModal',
'title' => 'Lihat lebih...',
'options' => [
'tabindex' => false // important for Select2 to work properly
],
]);
echo '...';
Modal::end();
$this->registerJs("
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var modal = $(this)
var title = button.data('title')
var href = button.attr('href')
modal.find('.modal-title').html(title)
modal.find('.modal-body').html('<i class=\"fa fa-spinner fa-spin\"></i>')
$.post(href)
.done(function( data ) {
modal.find('.modal-body').html(data)
});
})
");
?>Selanjutnya kita akan memodifikasi file form pada templates/modalcrud/views/_form.php sehingga menjadi seperti di bawah ini.
<?php
use yii\helpers\Inflector;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $generator yii\gii\generators\crud\Generator */
/* @var $model \yii\db\ActiveRecord */
$model = new $generator->modelClass();
$safeAttributes = $model->safeAttributes();
if (empty($safeAttributes)) {
$safeAttributes = $model->attributes();
}
echo "<?php\n";
?>
use yii\helpers\Html;
use yii\widgets\ActiveForm;
/* @var $this yii\web\View */
/* @var $model <?= ltrim($generator->modelClass, '\\') ?> */
/* @var $form yii\widgets\ActiveForm */
?>
<div class="<?= Inflector::camel2id(StringHelper::basename($generator->modelClass)) ?>-form">
<?= "<?php " ?>$form = ActiveForm::begin(['id' => $model->formName()]); ?>
<?php foreach ($generator->getColumnNames() as $attribute) {
if (in_array($attribute, $safeAttributes)) {
echo " <?= " . $generator->generateActiveField($attribute) . " ?>\n\n";
}
} ?>
<div class="form-group">
<?= "<?= " ?>Html::submitButton($model->isNewRecord ? <?= $generator->generateString('Create') ?> : <?= $generator->generateString('Update') ?>, ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?= "<?php " ?>ActiveForm::end(); ?>
</div>
<?= "<?php " ?>
$script = <<<JS
$('form#{$model->formName()}').on('beforeSubmit',function(e)
{
var \$form = $(this);
$.post(
\$form.attr("action"), //serialize Yii2 form
\$form.serialize()
)
.done(function(result){
if(result == 1)
{
$("#myModal").modal('hide'); //hide modal after submit
//$(\$form).trigger("reset"); //reset form to reuse it to input
$.pjax.reload({container:'#<?= Inflector::camel2id(StringHelper::basename($generator->modelClass)) ?>-pjax'});
}else
{
$("#message").html(result);
}
}).fail(function(){
console.log("server error");
});
return false;
});
JS;
$this->registerJs($script);
?>Ubah Konfigurasi dengan menambahkan template tambahan
Selanjutnya kita akan mengubah konfigurasi Gii agar menambahkan modalcrud pada pilihan template CRUD Gii kita. Modifikasi file config/web.php sehingga bagian Gii menjadi seperti di bawah ini.
if (YII_ENV_DEV) {
// configuration adjustments for 'dev' environment
$config['bootstrap'][] = 'debug';
$config['modules']['debug'] = [
'class' => 'yii\debug\Module',
// uncomment the following to add your IP if you are not connecting from localhost.
//'allowedIPs' => ['127.0.0.1', '::1'],
];
$config['bootstrap'][] = 'gii';
$config['modules']['gii'] = [
'class' => 'yii\gii\Module',
// uncomment the following to add your IP if you are not connecting from localhost.
//'allowedIPs' => ['127.0.0.1', '::1'],
'generators' => [
'crud' => [
'class' => 'yii\gii\generators\crud\Generator',
'templates' => ['modalcrud' => '@app/templates/modalcrud']
]
]
];
}Buat CRUD dan menu untuk manajemen Kategori Blog
Setelah template dan setting selesai dibuat maka saatnya membuat template Ajax CRUD untuk tabel Category menggunakan Gii yang telah dimodifikasi. Akses Gii kemudian pilih Crud Generator. Selanjutnya isi informasi seperti di bawah ini.
Pada contoh di atas kita menggunakan Code Template modalcrud yang sebelumnya sudah kita buat. Tekan Preview setelah itu tekan Generate.
Setelah CRUD kita buat jangan lupa tambahkan menu untuk mengakses category tersebut. Modifikasi file views/layouts/main.php dan modifikasi bagian Nav::widget() sehingga menjadi seperti di bawah ini.
echo Nav::widget([
'options' => ['class' => 'navbar-nav ml-auto'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
['label' => 'Blog', 'url' => ['/administrator/blog'], 'visible' => !Yii::$app->user->isGuest, 'items' => [
['label' => 'Manajemen', 'url' => ['/administrator/blog']],
['label' => 'Statistik', 'url' => ['/administrator/statistik']],
['label' => 'Kategori', 'url' => ['/administrator/category']],
]],
['label' => 'Register', 'url' => ['/site/signup'], 'visible' => Yii::$app->user->isGuest],
Yii::$app->user->isGuest ? (
['label' => 'Login', 'url' => ['/site/login']]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-outline-success my-2 my-sm-0'] // logout btn-link
)
. Html::endForm()
. '</li>'
)
],
]);Demikian tulisan ini, semoga bermanfaat dan Happy Coding!