Teknologi Responsive Web Design (RWD) terus berkembang untuk menyamankan pengguna aplikasi web, beberapa library RWD seperti twitter bootstrap membantu pengembang software untuk membuat aplikasi lebih enak digunakan oleh pengguna. Pada tutorial ini akan diperlihatkan setup dan instalasi twitter bootstrap versi 3 pada framework PHP Yii.

Berikut ini tahapan instalasi Bootstrap 3 pada Yii Framework

1. Pastikan anda telah membuat project Yii Framework, detail instalasi dapat dilihat di link ini:
   http://dev.xbata.com/database/setup-dan-instalasi-yii-framework
2. Download kode program
   • library Bootstrap 3 di website ini http://getbootstrap.com/
   • Download module Yii Bootstrap 3 di https://bitbucket.org/DrMabuse/yii-bootstrap-3-module
3. Library CSS dan JavaScript
   • Ekstrak file hasil download Bootstrap 3 , dan copy direktori css , js dan fonts kedalam root direktori web anda (dalam contoh ini direktori web adalah /var/www/html/webku

        $cp bootstrap-3.1.1-dist/* /var/www/html/webku
     

   • Daftarkan css dan javascript ke sistem layout web projek Yii anda, yaitu buka file webku/proctected/views/layouts/main.php dan tambahkan baris berikut pada header dokumen

     $baseUrl = Yii::app()->request->baseUrl;
     $cs = Yii::app()->clientScript;
     $cs->registerCssFile($baseUrl.'/css/bootstrap.css')
             ->registerCssFile($baseUrl.'/css/bootstrap-theme.css');
     $cs->registerScriptFile($baseUrl . '/js/bootstrap.min.js', CClientScript::POS_END);
     

Ekstrak hasil download module bootstrap 3, dalam direktori protected/modules dan ubah nama direktori menjadi bootstrap

4. Edit file konfigurasi projek Yii anda, dan tambahkan beberapa baris berikut ini
   • Alias Array:

        'aliases' => array(
             'bootstrap' => 'application.modules.bootstrap',
             'chartjs' => 'application.modules.bootstrap.extensions.yii-chartjs-master'
         ),
     

   • Import Array:

     'import' => array(
             'bootstrap.*',
             'bootstrap.components.*',
             'bootstrap.behaviors.*',
             'bootstrap.models.*',
             'bootstrap.controllers.*',
             'bootstrap.helpers.*',
             'bootstrap.widgets.*',
             'bootstrap.extensions.*',
             'chartjs.*',
             'chartjs.widgets.*',
             'chartjs.components.*',
         ),
     

   • Daftarkan module boostrap

     'modules' => array(
             'bootstrap' => array(
                 'class' => 'bootstrap.BootStrapModule'
             ),
         ),
     

   • Daftarkan components array

     'components' => array(
             //boostrap 4 of 4 specific components
             'bsHtml' => array('class' => 'bootstrap.components.BSHtml'),
             'chartjs'=>array('class' => 'chartjs.components.ChartJs'),
          )
     

   • Tambahkan PATH gii

      'gii'=>array(
                             'class'=>'system.gii.GiiModule',
                             'password'=>'rojulman',
                             'generatorPaths'=>array('application.modules.bootstrap.gii',),
     

Selamat Mencoba !!!

sumber: http://www.yiiframework.com/extension/yii-bootstrap3-module/