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.

1. Prainstalasi
2. Instalasi YiiFramework 2.0
3. Login
4. Login dengan Database pada Yii2
5. Bekerja dengan Gii
6. Module pada Yii2
7. Layout dasar dan Manipulasinya pada Yii2
8. Costum Asset dan Asset Bundle pada Yii2
9. Alias pada Yii2
10. Bekerja dengan Form
11. Timestamp, Blameable, dan Sluggable Behavior pada Yii2
12. Menggunakan Rich Text Input CkEditor dan Alternatifnya pada Yii2
13. Gridview dan Listview
14. SEO Friendly Url dengan slug
15. Scenario pada Model Yii2
16. Retrieve data pada Yii2
17. Relasi Database pada Yii2
18. Menggunakan Bootstrap4
19. Widget Kartik dan Kartik Gridview
20. Select2 dengan Kartik Ekstension
21. Dependent Dropdown pada Yii2
22. Bekerja dengan Modals
23. Membuat Costum Template untuk Gii
24. Mengupload File
25. Mengupload File dengan Kartik Widget
26. Gridview atau Datatables?
27. Session dan Cookie pada Yii2
28. Menggunakan AdminLTE pada Yii2
29. Membuat Themes pada Yii2
30. Menggunakan GoogleMaps API pada Yii2
31. Menggunakan Socket.io pada Yii2
32. Handling Error
33. Bekerja dengan AuthClient
34. Menggunakan Amazon S3 pada Yii2
35. Mengirim Email dengan Swiftmailer pada Yii2
36. Middleware pada Yii2
37. Mengenal RBAC pada Yii2
38. Implementasi RBAC pada Yii2
39. 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:

1. 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.
2. Stack yang digunakan adalah Wamp Server (Apache 2.2, MySQL, PHP 7).
3. 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

Apa Itu Asset?

Sebuah asset pada Yii adalah file-file yang menjadi referensi dari web-page. Dapat berupa file CSS, JS, gambar, video, dan referensi lainnya. Asset disimpan pada web-accessible directories (direktori yang dapat diakses web) dan dapat diakses oleh client.

Kita sering menerapkan asset secara programatikal. Sebagai contoh ketika kita menggunakan widget yii\jui\DatePicker dalam sebuah halaman di aplikasi, widget ini akan mengambil CSS dan JS yang dibutuhkan dan meregister CSS dan JS tersebut dihalaman dan menambahkan CSS dan JS tersebut dari vendor ke folder asset pada web-accessible directories. Dengan asset pengambilan file asset dapat dilakukan secara lazy-loading dan mudah sehingga pada halaman view kita tidak harus mencantumkan tiap file satu-per-satu.

Apa itu Client Script?

Pada aplikasi web modern selain data HTML juga ditampilkan data lain pada browser yang dapat terdiri dari JS yang digunakan untuk memodifikasi halaman pada browser dan terkadang CSS yang digunakan untuk mengatur tampilan yang ada pada browser. Beberapa client script tidak jarang bersifat khusus sehingga harus dirender pada posisi tertentu seperti bagian head, bagian body, atau pada bagian paling akhir dari kode setelah semua JS lain di load. Semua hal tersebut akan di atur pada Client Script Yii2.

Dengan abstraction pada client script kita tidak perlu mengatur skeleton pada layout kita untuk mengatur urutan tampilan pada hasil. Semua hal tersebut sudah diatur dengan perintah-perintah khusus pada Helpers yang ada pada views di Yii2.

Menambahkan JS dan CSS pada View dengan Client Script

File views, merupakan objek dari yii\web\View sehingga secara objek kita akan banyak berhadapan dengan API View. Ada 2 method yang dapat dimanfaatkan yang berkaitan dengan client script, yaitu script (dalam hal ini JS) dan CSS. Semua contoh berikut dituliskan pada file view anda.

Registering inline Script

Inline scripts bermanfaat untuk menambahkan script yang pada HTML biasanya berada dalam tag <script></script>. Cara penggunaan yang umum dari register inline script seperti dibawah.

....
$this->registerJs(<<<JS
$('#myButton').on('click', function() { alert('Button clicked!'); });
JS, View::POS_READY ,'my-button-handler');
...

Pada contoh di atas kita membuat sebuah script pada registerJS dengan Jquery (karena Yii2 menggunakan Jquery secara default bersamaan dengan Bootstrap) untuk listening pada id "myButton". Script JS yang digunakan diinput pada parameter pertama dari registerJs dengan format string (dalam contoh saya menggunakan heredoc string). Parameter kedua dan ketiga adalah parameter opsional berupa posisi, dan key yang mengidentikasi blok kode js yang digunakan

Namun terkadang kita perlu memposisikan script tersebut pada bagian tertentu pada HTML. Posisi dapat diset pada parameter kedua registerJS. Beberapa posisi yang dapat digunakan pada registerJs antara lain:

Anda tidak perlu melakukan penyesuaian pada layout anda karena skeleton layout Yii2 akan menyesuaikan dengan layout anda.

Registering JS Script File

Pada beberapa kasus mungkin anda perlu melakukan register suatu script file secara lazy (seperti moment.js, atau datatables.js). View menyediakan method untuk meregister JS file pada halaman view anda. Bahkan apabila suatu script file bergantung dengan keberadaan script file lainnya (atau asset bundle tertentu) maka kita dapat menyebutkan dependency dari script file tersebut. Sebagai contoh kita akan menambahkan main.js yang akan bergantung pada jquery asset.

....
$this->registerJsFile(
    '@web/js/main.js',
    ['depends' => [\yii\web\JqueryAsset::className()]]
);
...

Pada contoh di atas kita menambahkan file main.js yang berada pada folder \app\web\js\main.js dan file main.js tersebut bergantung pada JqueryAsset yang sudah dipaket menjadi AssetBundle pada Yii2. Tidak jarang AssetBundle tersebut bergantung juga dengan File lainnya, namun apabila dependency tersebut sudah diatur pada AssetBundle JqueryAsset, anda tidak perlu menambahkan setiap dependency pada saat registerJsFile.

@web pada contoh di atas merupakan alias, pembahasan mengenai alias akan kita bahas pada tulisan yang berbeda.

Namun praktik terbaik pada Yii2 lebih merekomendasikan penggunaan AssetBundle dibandingkan registerJsFile satu persatu. Karena AssetBundle lebih memberikan fleksibilitas yang lebih baik dan konfigurasi dependency yang lebih granular sehingga anda bisa mengkombinasikan dan mengkompresi data JS anda. Dan anda tidak perlu khawatir ketika folder web anda hilang, maka data yang ada pada folder web tersebut akan digenerate ulang oleh mekanisme assetBundle.

AssetBundle sungguh menarik bukan, mari kita bahas mengenai AssetBundle.

Manajemen Asset dengan Asset Bundle

Asset Bundle secara sederhana dapat dikatakan sekumpulan assets (baik css, js, gambar, atau video) yang berada pada suatu direktori. Cara kerja asset bundle adalah, begitu sebuah asset bundle di register pada view, maka Yii2 akan menduplikasi (publish) semua file (dan folder) pada folder tersebut pada \app\web\assets dengan format penamaan tertentu atau menambahkan assets tersebut pada halaman yang dibuka (jika merupakan web-accessible-directory). Pada saat assets tidak berada pada web-accessible directory, apabila terjadi perubahan pada file/folder sumber dari AssetBundle maka yii2 akan mendeteksi versi dari file dan folder pada \app\web\assets dan jika berbeda asset akan digenerate (publish) ulang sesuai versi yang baru.

Pada contoh ini kita akan membuat sebuah AssetBundle berupa ChartJs yang nantinya akan kita gunakan di halaman dashboard kita.

Mendefinisikan Asset Bundle

Sebuah aset bundle akan mengekstends yii\web\AssetBundle dan nantinya harus autoloadable . Berikut adalah salah satu contoh penggunaan AssetBundle yang ada pada Template Basic.

<?php

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        ['css/print.css', 'media' => 'print'],
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

Class AssetBundle di atas biasa disimpan pada folder \app\assets namun bisa lebih fleksibel. Akan lebih baik jika anda membuat sebuah paket melalui vendor dengan membuat ekstension khusus untuk memanggil Asset tersebut.

Pada kode di atas nama Asset Bundle adalah AppAsset. Pada aset bundle tersebut diset beberapa properti seperti basePath, baseUrl, css, js, dan depends. Fungsi dari masing-masing properti tersebut antara lain

Contoh Penggunaan Asset Bundle untuk Chart.Js

Dari contoh di atas kita akan mencoba membuat sebuah Asset Bundle yang akan menghandle asset untuk Chart.Js. Pertama kita unduh terlebih dahulu Chart.Js yang dapat diunduh pada release github Chart.Js pada paket chart.js.zip. Kemudian ekstrak pada folder \app\web\js\ChartJs.

Selanjutnya kita akan membuat file Asset pada \app\assets\ChartJsAsset.php dengan isian sebagai berikut.

<?php

namespace app\assets;

use yii\web\AssetBundle;

/**
 * ChartJs asset bundle.
 *
 * @author hoaaah
 */
class ChartJsAsset extends AssetBundle
{
    public $basePath = '@webroot/js/chartjs';
    public $baseUrl = '@web/js/chartjs';

    /**
     * We use min.js when in production
     * We don't have any css file here
     * We use chart.js only, because momentarily we don't need moment.js
     */

    public $css = [
    ];

    public $js = [
        YII_ENV_DEV ? 'Chart.js' : 'Chart.min.js',
    ];

    // public $depends = [
    //     'yii\web\YiiAsset',
    //     'yii\bootstrap\BootstrapAsset',
    // ];
}

Selanjutnya kita akan menggunakan Asset Bundle yang kita buat pada view di subseksi berikutnya.

Menggunakan Asset Bundle 

Setelah kita membuat Class untuk Asset Bundle maka kita akan menggunakannya pada view. Chart akan ditampilkan pada laman "administrator\blog\" dan menampilkan grafik batang jumlah blog yang dipublish setiap bulannya.

Pertama kita akan melakukan register Asset Bundle kita pada laman view. Oleh karena itu kita buka file app\modules\administrator\views\blog\index.php dan tamhakan baris berikut.

use app\assets\ChartJsAsset;

ChartJsAsset::register($this);

Baris di atas akan melakukan register semua CSS dan JS yang telah kita buat sebelumnya. Selanjutnya kita akan membuat query untuk membuat array untuk menampilkan jumlah blog yang disusun setiap bulannya. Ubah file \app\modules\administrator\controllers\BlogController.php dengan menambahkan bagian berikut pada actionIndex.

    public function actionIndex()
    {
        $year = date('Y');
        // create an array for count blog by year this year
        $blogCountByMonth = Blog::find()
        ->select(['MONTH(FROM_UNIXTIME(created_at)) month', 'count(id) AS count'])
        ->where("YEAR(FROM_UNIXTIME(created_at)) = $year")
        ->groupBy('MONTH(FROM_UNIXTIME(created_at))')->asArray()->all();

        $searchModel = new BlogSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'blogCountByMonth' => $blogCountByMonth,
        ]);
    }

Selanjutnya kita akan menggenerate data tersebut pada view. Tambahkan bagian registerScript  berikut pada view anda.

use yii\helpers\Json;
....
<canvas id="blogCountByMonthChart"></canvas>

....

<?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
);
?>

Dan dengan contoh di atas maka kita dapat melihat grafik ChartJs pada halaman administrator/blog kita. 

Asset Bundle yang Umumnya Digunakan

Ada beberapa Asset Bundle yang umum di gunakan pada Yii2. Asset Bundle tersebut tersedia langsung (pada Yii2.0, dan mungkin akan dibuat terpisah pada Yii2.1) dan langsung bisa kita panggil melalui depends parameter. Asset Bundle tersebut antara lain sebagai berikut

Demikian tulisan ini dibuat, semoga bermanfaat bagi anda dalam memanajemen Asset pada aplikasi Yii2 anda. Sebenarnya ada fitur lain yang sangat menarik di Asset Bundle yaitu Asset Conversion dan Asset Compresion (WebPack Yeah!) yang akan kita bahas pada tulisan terpisah mengingat hal tersebut sedikit advance dari tulisan ini. Semoga bermanfaat dan Happy Coding!