Assets dan File External untuk YII2

Setelah sebelumnya kita sudah "mengenal fungsi yang bertanggung jawab pada layout YII2, dan bagaimana mengganti layout pada halaman tertentu". Hari ini kita lanjutkan menuju seri ke-dua, yaitu : "mengenal kegunaan folder assets pada YII2 serta bagaimana menambahkan file tambahan (css,js atau yang lain) pada layout kita".

Berhubung saya sudah terlanjur menuliskan tentang mengenal kegunaan folder assets, maka mari kita awali pembahasan kali ini dengan sebuah pertanyaan. Apa fungsi folder assets?
 
Sebelum menjawab pertanyaan itu, kita harus mengerti fungsi dari file yang ada di dalam folder tersebut. Di dalam folder assets terdapat sebuah file, yaitu AppAsset.php. Fungsi AppAsset.php itu apa coba? Kalau menurut saya, fungsi dari file tersebut adalah untuk meng-include atau memanggil file-file yang digunakan untuk halaman dan layout. Silahkan buka file main.php yang ada di dalam folder layout. Di sana ada satu baris script seperti ini:

AppAsset::register($this);

Yang maksudnya adalah menggunakan file-file yang di-include oleh file AppAsset.php untuk digunakan pada layout. Jadi, apa fungsi folder assets?

Ya! Fungsi folder assets adalah untuk menampung file-file asset yang akan digunakan untuk layout. Itu menurut saya, silahkan bila anda memiliki pendapat yang berbeda.

Sekarang timbul sebuah pertanyaan, di mana letak file-file yang digunakan untuk layout? Pada file AppAsset.php terdapat script seperti ini:

public $baseUrl = '@web';

Apakah file tersebut berada di folder web? Kita lanjutkan dengan melihat script berikut:

public $css = [
    'css/site.css',
];

Sekarang, coba lihat folder web. Apakah di sana ada folder css? Jika iya, silahkan buka. Apakah ada file site.css di dalamnya? Lalu bagaimana kesimpulan anda?

Maaf kalau ada yang merasa penjelasan saya terbelit-belit. Tapi, file yang digunakan memang diletakkan pada folder web. Itu intinya.

Apa saja yang harus kita perhatikan dalam file AppAsset.php atau jika kita ingin membuat file dengan fungsi yang sama? Sebagai contoh, kita akan membuat file LoginAsset.php pada folder assets. Copy script yang ada di dalam file AppAssets.php ke file LoginAsset.php. Lalu kita Edit file LoginAsset.php:

1. Ubah nama class yang sebelumnya AppAsset menjadi LoginAsset. Nama class disesuaikan dengan nama file, hanya saja tanpa ekstensi .php

2. Isi variabel public $css dan public $js dengan array tempat di mana file yang layout tersebut dibutuhkan. Root-nya adalah folder web.

Contoh, di dalam folder web terdapat folder js dan di dalam folder js tersebut terdapat file jquery.js. Bila kita ingin meng-include file jquery.js tersebut, maka pada variabel public $js kita isi arraynya dengan js/jquery.js,

3. Variabel public $depends berisi class YII yang ikut atau digunakan pada layout. Contohnya, script ini:

'yii\bootstrap\BootstrapAsset',

berfungsi untuk meng-include bootstrap ke dalam layout kita. Namun bila kita tidak menggunakan bootstrap, kita boleh menghapusnya. Tapi, kita juga boleh mengabaikannya. Karena yang paling penting adalah css dan javascriptnya.

Lalu, bagaimana agar LoginAsset.php digunakan oleh layoutLogin.php?

1. Buka file layoutLogin.php

2.  Ganti script:

AppAsset::register($this);

dengan script:

LoginAsset::register($this);

3. Selesai. Sekarang, LoginAsset telah digunakan oleh layoutLogin.

Kita sudah mengetahui tentang folder assets dan isinya, kemudian tempat untuk meletakkan file eksternal kita. Maka pembahasan hari ini sudah selesai. Besok, kita akan menggunakan apa yang telah kita ketahui untuk membuat sebuah layout buatan sendiri. Sekian dan terima kasih...