Pada artikel sebelumnya, kita telah berkenalan dengan Clip. Topik kali ini tidak akan jauh dari topik yang berhubungan dengan tampilan di Yii. Pada topik kali ini kita akan membahas bagaimana caranya menggunakan decorator di Yii, atau lebih tepatnya memanfaatkan kelas CContentDecorator.

Anda tentunya sudah pernah melihat bagaimana Yii bisa me-render layout. Nah, caranya me-render layout ini tidak lain berkat adanya decorator. Jadi, secara kasar, ketika kita memanggil fungsi render() pada Controller, maka konten akan muncul terlebih dahulu. Dan kemudian dengan menggunakan CContentDecorator, Yii mendekorasikan konten tersebut dengan file layout (atau disebut juga, template) yang sudah ditentukan.

Selain mendekorasikan tampilan Web aplikasi Yii dengan template, CContentDecorator dapat digunakan untuk mendekorasikan tampilan yang lebih sederhana. Mari kita perhatikan tutorial bagaimana menggunakan CContentDecorator.

Pertama, kita buat dulu layout mini (ini istilah penulis sendiri). Untuk membuat layout mini, mari kita taruh file-nya di webroot/protected/views/layouts/my-decorator.php. Isikan koding berikut:

<div class="message">
    <h2> <?php echo $judul ?></h2>
    ## <?php echo $content?> ##
</div>

Sekarang saatnya kita mencoba me-render tampilan. Untuk contoh, silahkan taruh koding berikut di webroot/protected/views/site/index.php.

<?php $this->beginContent('//layouts/my-decorator', array('judul' =>'Sukses'))?>
Selamat! Registrasi Anda sukses!
<?php $this->endContent()?>

Sekarang silahkan lihat hasilnya dengan membuka halaman index.php?r=site/index (dengan asumsi view kita di-render oleh actionIndex() dari SiteController).

Jika perhatikan pada bagian file webroot/protected/views/site/index.php, Anda akan melihat bahwa secara default, tulisan yang berada di antara $this->beginContent() dan $this->endContent() akan tersimpan ke dalam variabel $content di dalam file my-decorator.php. Jadi nama variabel $content sudah fix, tidak bisa digonta-ganti. Apabila ingin melempar lebih banyak nilai, maka kita bisa melempar lewat parameter kedua dalam beginContent(), seperti yang bisa Anda lihat pada contoh di atas yakni

array('judul'=>'Sukses')

Jika Anda melakukannya dengan benar maka tampilannya akan terlihat seperti berikut:

Inilah contoh menggunakan Decorator