Kita akan membuat pop-up window ketika tombol Create ditekan.
1. Gunakan yii\bootstrap\Modal.
|
1 |
use yii\bootstrap\Modal; |
2. Modifikasi file index.php untuk Branches dengan menambahkan Modal :
|
1 2 3 4 5 6 7 8 9 |
<?php Modal::begin([ 'header'=>'<h4>Branches</h4>', 'id'=>'modal', 'size'=>'modal-lg', ]); echo "<div id='modalContent'></div>"; Modal::end(); ?> |
3. Pada file yang sama, modifikasi Create Branch button dan tambahkan use yii\helpers\Url :
|
1 2 3 |
<p> <?= Html::button('Create Branches', ['value'=>Url::to('index.php?r=branches/create'),'class' => 'btn btn-success','id'=>'modalButton']) ?> </p> |
4. Tambahkan Javascript yang memerintahkan jika Button diklik maka modal akan muncul di layar.
Modifikasi file AppAsset.php yang berada di folder backend\assets. Tambahkan main.js yang akan kita buat :
|
1 2 3 |
public $js = [ 'js/main.js', ]; |
Buat folder js di dalam folder backend\web dan buat file javascript dengan nama main.js :
|
1 2 3 4 5 6 7 |
$(function(){ $('#modalButton').click(function (){ $('#modal').modal('show') .find('#modalContent') .load($(this).attr('value')); }); }); |
5. Modifikasi BranchesController.php dengan mengganti render menjadi renderAjax :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public function actionCreate() { if(Yii::$app->user->can('tambah-branch')) { $model = new Branches(); if ($model->load(Yii::$app->request->post())) { $model->branch_created_date = date('Y-m-d h:m:s'); $model->save(); return $this->redirect(['view', 'id' => $model->branch_id]); } else { return $this->renderAjax('create', [ 'model' => $model, ]); } }else { throw new ForbiddenHttpException; } } |
Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya diambil dari Youtube DoingITEasy Channel.