Cara Memasang Bootstrap pada Project Yii

Melanjutkan postingan yang sudah-sudah tentang Yii, post berikut ini membahas tentang cara memasang Bootstrap pada project Yii. Teman-teman pasti sudah tahu kan apa itu Bootstrap? Ya, Bootstrap adalah semacam template web yang dapat kita gunakan secara bebas untuk membangun website. Bootstrap ini dikenal juga dengan nama Twitter Boostrap. Kenapa sih harus pake Bootstrap? Alasan utama yang membuat kita menggunakan Bootstrap tentu saja kemudahan yang diberikan Bootstrap tersebut untuk membuat tampilan yang keren, responsive, dan tentu saja mudah digunakan dibandingkan harus coding CSS dari awal. Terkait dengan Bootstrap, saya juga pernah menulisnya di post trik cepat membuat desain website.

Cara Memasang Bootstrap pada Project Yii

Oke, kembali ke fokus utama post ini, yaitu tentang bagaimana cara memasang Bootstrap pada project Yii, saya akan memberikan tutorial yang [semoga] mudah untuk diikuti. Untuk mengikuti tutorial berikut, pastikan Anda sudah dapat membuat project baru dengan Yii ya. Hal pertama yang harus Anda lakukan adalah mendownload extension Yii Bootstrap di http://www.cniska.net/yii-bootstrap/ Setelah itu, extract yii-bootstrap-2.1.0.r355.zip ke dalam direktori protected/extensions/ pada project Yii Anda, dan rename nama foldernya menjadi bootstrap. Selanjutnya, copy kan folder themes yang ada dalam folder tadi ke dalam folder themes yang ada pada project Anda. Jadi jika nama project Anda adalah aplikasi, maka copy folder themes ke dalam ../aplikasi/themes/ kemudian rename nama foldernya menjadi bootstrap juga. Agar extensions tersebut dapat digunakan di project Yii Anda, maka bukalah file main.php di dalam folder protected/config/main.php dan berikan sedikit konfigurasi seperti di bawah ini:

Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');

return array(
	'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',

Kemudian tambahkan pada masing-masing komponen array dengan kode berikut,

return array(
    'theme'=>'bootstrap',
    'modules'=>array(
        'gii'=>array(
            'generatorPaths'=>array(
            'bootstrap.gii',
      ),
        ),
    ),
    'components'=>array(
        'bootstrap'=>array(
            'class'=>'bootstrap.components.Bootstrap',
        ),
    ),
);

Ingat, Anda hanya perlu menambahkan di masing-masing array saja, salah satu contohnya adalah sebagai berikut untuk 'components' => array:

'components'=>array(
	'user'=>array(
	// enable cookie-based authentication
	'allowAutoLogin'=>true,
),
       'bootstrap'=>array(
         'class'=>'bootstrap.components.Bootstrap',
        ),

Setelah selesai, jangan lupa disimpan, kemudian untuk memanggil CSS bootstrap tersebut supaya dapat digunakan, gunakan code PHP berikut ini pada template Anda (di dalam tag head):

<?php Yii::app()->bootstrap->registerAllCss(); ?>

Silakan cek pada browser, jika tampilan default Yii sudah berubah menjadi lebih tampilan ala Bootstrap, maka Anda telah berhasil. [caption id="attachment_4461" align="aligncenter" width="300"] Yii Bootstrap[/caption] Update: Extensions Yii Bootstrap ini sudah tidak dikembangkan lagi, tetapi telah dirubah menjadi extensions lain yang lebih keren, cek saja YiiStrap di http://www.yiiframework.com/extension/yiistrap Sekian tutorial cara memasang Bootstrap pada project yii, semoga bermanfaat. https://azuharu.net/desain-web/trik-cepat-membuat-desain-website/