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
Mengapa Kartik Ekstension
Mengembangkan web dengan Yii2 memberikan pengalaman koding yang dapat memberikan prototipe dengan lebih cepat dan mudah. Kemudahan yang diberikan Gii membuat coder akan sangat dimanjakan dengan kecepatan menghasilkan aplikasi, terutama untuk aplikasi yang memiliki pola berulang seperti layaknya aplikasi yang digunakan di perkantoran.
Kartik Ekstension sendiri merupakan salah satu ekstension Yii2 yang mungkin paling banyak digunakan oleh pengguna Yii2. Ekstension ini dibuat oleh Kartik Visweswaran seorang programmer dari India yang dulunya juga pernah menjadi core team Yii2 (CMIIW). Ekstension yang dibuat Kartik mulai dari widget sederhana yang digunakan pada form sampai pada widget yang sangat komplek. Salah satu yang paling banyak digunakan adalah Kartik Gridview, yaitu Gridview Yii2 yang telah dioptimasi oleh Kartik sehingga dapat terintegrasi dengan Bootstrap Panel/Box, Export Table ke berbagai tipe file, pilihan pagination yang sangat membantu membentuk tabel gridview yang informatif, mudah digunakan, dan tentunya dengan kode yang minimal. Laman Github dari Kartik dapat anda kunjungi pada laman berikut https://github.com/kartik-v.
Menginstall Kartik Widget dan Kartik Gridview
Pada tulisan ini kita akan menginstall dua ekstension yaitu Kartik-Widget dan Kartik Gridview. Seperti namanya kartik-widget merupakan kumpulan widget yang dibuat oleh Kartik yang terdiri dari banyak widget seperti select2, datepicker, datetimepicker, switch-button, dll. Sedangkan kartik-gridview merupakan gridview yang dikostumasi oleh Kartik.
Seperti biasa silakan buka composer.json dan tambahkan baris berikut pada composer.json anda.
"require": {
"php": ">=5.4.0",
"yiisoft/yii2": "~2.0.5",
"yiisoft/yii2-bootstrap4": "~2.0.0",
"yiisoft/yii2-swiftmailer": "~2.0.0",
"yiisoft/yii2-jui": "~2.0.0",
"2amigos/yii2-ckeditor-widget": "^2.1"
"kartik-v/yii2-widgets": "dev-master",
"kartik-v/yii2-grid": "dev-master",
},
Kemudian jalankan perintah composer update pada terminal. Sehingga aplikasi anda sudah memiliki kartik-widget dan gridview yang siap digunakan di berbagai halaman di webpage anda. Berikutnya kita akan mencontohkan bagaimana menggunakan kartik-gridview pada laman modul blog kita.
Setup Module Untuk Kartik Gridview
Berikutnya yang harus dilakukan adalah membuat setup module untuk Kartik gridview. Setup module nantinya akan menyimpan informasi default Kartik-Gridview seperti internationalization (i8n), downloadAction sebagai link download export gridview, dan konfigurasi lainnya. Silakan buka \app\config\web.php dan tambahkan module gridview sehingga bagian module seperti berikut.
.....
'modules' => [
'administrator' => [
'class' => 'app\modules\administrator\administrator',
],
'gridview' => [
'class' => '\kartik\grid\Module'
// enter optional module parameters below - only if you need to
// use your own export download action or custom translation
// message source
// 'downloadAction' => 'gridview/export/download',
// 'i18n' => []
]
],
.....
Menggunakan Kartik Gridview
Untuk menggunakan kartik-gridview sangat mudah. Kita hanya perlu mengganti Gridview pada view menjadi kartik-gridview. Pada kasus ini kita akan mengubah tampilan dari laman administrator/blog agar menggunakan kartik-gridview. Buka file \app\modules\administrator\views\blog\index.php dan modifikasi sehingga menjadi seperti di bawah ini.
<?php
use yii\helpers\Html;
// use yii\grid\GridView;
use kartik\grid\GridView;
use yii\widgets\Pjax;
use app\assets\ChartJsAsset;
use yii\helpers\Json;
use yii\helpers\StringHelper;
/* @var $this yii\web\View */
/* @var $searchModel app\modules\administrator\models\BlogSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
$this->title = 'Blogs';
$this->params['breadcrumbs'][] = $this->title;
// Register ChartJsAsset
ChartJsAsset::register($this);
?>
<div class="blog-index">
<div class="row">
<div class="col-md-12">
<h1><?= Html::encode($this->title) ?></h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<?= Html::a('Create Blog', ['create'], ['class' => 'btn btn-success']) ?>
</p>
<?= GridView::widget([
'id' => 'kv-grid-demo',
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
'title',
[
'attribute' => 'body',
'format' => 'raw',
'value' => function ($model){
return StringHelper::truncateWords(strip_tags($model->body, "<image>"), 30, "", true);
}
],
[
'attribute' => 'created_by',
'value' => 'userCreator.username'
],
'created_at:date',
// 'userCreator.username',
[
'class' => 'kartik\grid\ActionColumn',
'noWrap' => true,
],
],
'containerOptions' => ['style' => 'overflow: auto'], // only set when $responsive = false
'headerRowOptions' => ['class' => 'kartik-sheet-style'],
'filterRowOptions' => ['class' => 'kartik-sheet-style'],
'pjax' => true, // pjax is set to always true for this demo
// set your toolbar
'toolbar' => [
[
'content' =>
Html::a('<i class="fas fa-redo"></i>', ['grid-demo'], [
'class' => 'btn btn-outline-secondary',
'title'=> 'Reset Grid',
'data-pjax' => 0,
]),
'options' => ['class' => 'btn-group mr-2']
],
'{export}',
'{toggleData}',
],
'toggleDataContainer' => ['class' => 'btn-group mr-2'],
// set export properties
'export' => [
'fontAwesome' => true
],
// parameters from the demo form
'bordered' => true,
'striped' => true,
'condensed' => true,
'responsive' => true,
'hover' => true,
'showPageSummary' => true,
'panel' => [
'type' => GridView::TYPE_PRIMARY,
'heading' => $this->title,
],
'persistResize' => false,
'toggleDataOptions' => ['minCount' => 10],
// 'itemLabelSingle' => 'book',
// 'itemLabelPlural' => 'books'
]) ?>
</div>
<div class="col-md-6">
<canvas id="blogCountByMonthChart"></canvas>
</div>
</div>
</div>
<?php
// first with convert our php array object to json
$blogCountByMonthJson = Json::encode($blogCountByMonth);
// then register our Js
$this->registerJs(<<<JS
// we create function for generate count per month first
function generateDataCount(month, blogCount){
var result = blogCount.find(o => o.month == month);
if(result == null) return 0;
return result.count;
}
var blogCount = $blogCountByMonthJson; // blogCount json
var ctx = document.getElementById('blogCountByMonthChart').getContext('2d'); //ctx, you can replace it with jQuery if you have one
// Then we generate data with some simple looping
var i = 0;
data = [];
while(i < 12)
{
data[i] = generateDataCount(i+1, blogCount);
i++;
}
// and then generate to chartJs
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Blog Count By Month",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
}]
},
options: {}
});
JS
);
?>
Dengan konfigurasi tersebut kita mengubah gridview menggunakan kartik gridview dan menambahkan beberapa konfigurasi default dari kartik-gridview seperti pjax bawaan gridview, dan lain-lain. Lengkapnya dapat anda baca pada dokumentasi kartik-gridview.
Demikian tulisan kali ini. Semoga Bermanfaat dan Happy Coding!