Theming dalam Framework Yii – Part 1

Salah satu pertanyaan yang sering muncul ketika membangun aplikasi web dengan menggunakan framework yii adalah tentang theming/desain. Secara default, yii telah memiliki theme berwarna biru untuk menampilkan aplikasinya. Bagi kawan-kawan yang kurang berinteraksi dengan css, tentu akan sulit untuk mengubah-ubah tema bawaan Yii tersebut. Dengan alasan inilah, saya pikir cukup penting untuk berbagi pengalaman tentang penggunaan tema. Selain itu, desain web yang baik memiliki fungsi memberi kenyamanan kepada user untuk berinteraksi dengan program.

Oke, sebelum melangkah lebih jauh saya ingin memaparkan strategi yang perlu disiapkan terlebih dahulu. Sekarang ini, sudah sangat banyak template HTML tersebar di internet. Ada yang gratis, ada pula yang berbayar. Bukan hanya HTML, kadang-kadang template sudah menyediakan CSS beserta javascript yang telah terembed dengan baik. Karena hanya template, sudah barang tentu halaman-halaman yang tersedia adalah halaman statis. Nah, untuk mempermudah melakukan theming di Yii, kita tidak perlu repot-repot membuat sendiri. Dengan memanfaatkan template yang ada dengan sedikit kustomisasi CSS, kita bisa menghemat waktu lebih banyak. Dan yang pasti, aplikasi yang dibuat sudah tidak terlihat seperti bawaan Yii lagi. Ini yang terpenting. Karena jika yang dikustom hanya CSS tema bawaan, ‘bau’ Yii-nya masih tercium.

Untuk mempermudah, saya berikan satu contoh template HTML Whitewall yang bisa di-download di sini. Template ini masih pure HTML, CSS dan Javascript. Belum ada bahasa pemrograman server di situ, seperti PHP atau ASP. Supaya kawan-kawan lebih mudah memahami bagaimana melakukan theming, alangkah lebih baik kalau perlu diketahui terlebih dahulu bagaimana sebuah aplikasi Yii melakukan layouting.

Memahami alur pengaksesan theme di Yii

Pertama-tama, perlu kita ketahui bagaimana alur Yii mengatur suatu template. Setelah aplikasi web tergenerate, akan terbentuk folder css, js, images, themes, dll. Di dalam folder protected/views/layouts telah tersedia 3 file sebagai layout aplikasi Yii, yaitu main.php, column1.php dan column2.php. Masing-masing memiliki fungsi tersendiri. Jika kita buka file column1.php dan column2.php terlihat bahwa file-file tersebut yang memanggil file main.php, bukan sebaliknya.

Kemudian, coba kita buka file Controller.php di dalam folder protected/components. Di situ terlihat dengan jelas bahwa secara default, aplikasi akan memanggil file column1.php dari script ini

public $layout='//layouts/column1';

Silahkan coba mengganti nilai ‘//layouts/column1’ menjadi ‘//layouts/column2’. Efeknya akan terlihat lebar content sedikit menyempit. Dari file column2.php tertulis bahwa untuk menampilkan menu di sisi kanan perlu didefinisikan variabel $this->menu. Jika tidak didefinisikan, sidebar kanan akan kosong. Pendefinisian variabel $layout juga bisa di-override di dalam masing-masing controller atau action. Misalkan untuk action/controller tertentu ingin menggunakan 2 kolom, bisa didefinisikan di dlm fungsi action sperti ini.

public function actionDuakolom{
   //Code
   $this->layout='//layouts/column2';
   $this->render('dua_kolom', array()); //dua_kolom adalah file view
}

Supaya lebih mudah, akan coba saya gambarkan dalam ilustrasi berikut:

Oke, baca kelanjutannya ya.

Kustomisasi tema di Yii

Di dalam root aplikasi Yii, terdapat folder themes. Secara default, ada sebuah folder bernama classic. Oke, mulai sekarang kita akan bermain-main dan bereksplorasi di sini. Di antara fitur-fitur yang ada, sebenarnya Yii telah menyediakan fitur theme roller. Kita bisa membuat lebih dari 1 tema untuk satu buah aplikasi web. Ilustrasi yang gampang bisa dilihat dari CMS wordpress. Dengan engine yang sama, kita bisa mengganti tema-tema dengan mudah. Banyak penyedia tema dari pihak ketiga.

Begitu pula dengan Yii, di dalam folder themes inilah kita bisa membuat berbagai macam thema website. Kita bisa meletakkan seluruh view beserta file yang mendukung seperti css, javascript dan gambar. Oke, akan lebih baik jika langsung membuat sebuah tema. Supaya lebih mudah, kita hanya memindahkan tema yang sudah ada ke dalam tema yang akan kita buat.

a. Buat sebuah folder bernama whitewall di dalam folder themes. Buat 4 folder di dalam folder whitewall, yaitu js, css, images dan views. Berikut ilustrasi hierarki folder whitewall di dalam aplikasi Yii.

b. Pindahkan semua file di folder root/protected/views/ ke dalam root/themes/whitewall/views/.c. Pindahkan juga file di folder root/css/ ke dalam root/themes/whitewall/css/

c. Konfigurasi file main.php di dalam folder protected/config/. Tambahkan satu baris kode berikut

return array(
   //Other definitions
   'theme'=>'whitewall',
   //Other definitions
)

d. Ubah pengaksesan css di dalam file root/themes/whitewall/views/main.php. Ubah Yii::app()->request->baseUrl menjadi Yii::app()->theme->baseUrl

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/main.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/form.css" />

Oke, pembuatan tema sudah berhasil dan bisa diakses. Jika dilihat view source, link css akan mengakses dari folder themes/whitewall. File demonstrasi dari artikel ini bisa didownload di sini.

Supaya tidak terlalu panjang, tulisan tentang penggunaan tema whitewall yang sebenarnya akan saya letakkan dalam artikel terpisah.

farid

Selamat datang dan salam kenal. Penulis merupakan lulusan Sekolah Tinggi Ilmu Statistik Jakarta jurusan Komputasi Statistik. Menekuni pemrograman web khususnya PHP dengan Yii Framework. Penggemar musik instrumen dan film Doraemon. Berasal dari Kota Lumpia Semarang dan pernah bertugas menjadi Staf Produksi dan IPDS di BPS Kabupaten Melawi. Sejak tahun 2016, mulai bertugas sebagai Staf Pengolahan Data di BPS Provinsi Kalimantan Barat

You may also like...