Yii Framework – Integrasi twitter bootstrap dengan Yiibooster

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Twitter Bootstrap menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Untuk mengintegrasikan framework CSS twitter bootstrap dengan Yii Framework, sudah ada extension yang bisa digunakan untuk mempermudah proses integrasinya. Extension tersebut adalah Yiibooster.

Instalasi

• Download extension di situs resminya Yiibooster, dan extract di folder extensions
• Tambahkan kode berikut di file protected/config/main.php.

'components' => array(
    // .....
    'booster' => array(
        'class' => 'ext.booster.components.Booster',
    ),
    // .....
)

• Inisialisasi komponenMasih di file konfigurasi (protected/config/main.php). Tambahkan components booster pada preload. Preload berfungsi agar Yii menjalankan komponen yang ada didalam preload di awal. Yii tidak akan menginisasi komponen sampai kita memanggilnya, karena komponen booster ini harus selalu berfungsi, artinya selalu digunakan setiap saat maka kita harus meletakkan komponen ini ke dalam preload.

'preload' => array(
    // komponen lainnya
    'booster'
),

• Sampai disini kita sudah bisa menggunakan extension Yiibooster ini.

Contoh Penggunaan

Alert Widget

Kode

Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change something and try submitting again.');

$this->widget('booster.widgets.TbAlert', array(
    'fade' => true,
    'closeText' => '×',
    'events' => array(),
    'htmlOptions' => array(),
    'userComponentId' => 'user',
    'alerts' => array(
        'error'
    ),
));

Button Widget

Kode

$this->widget('booster.widgets.TbButton', array(
    'label' => 'Common',
));

$this->widget('booster.widgets.TbButton', array(
    'label' => 'Primary',
    'context' => 'primary',
));

$this->widget('booster.widgets.TbButton', array(
    'label' => 'Success',
    'context' => 'success',
));

Navbar

Kode

$this->widget('booster.widgets.TbNavbar', array(
    'brand' => 'Title',
    'fixed' => false,
    'fluid' => true,
    'items' => array(
        array(
            'class' => 'booster.widgets.TbMenu',
            'type' => 'navbar',
            'items' => array(
                array('label' => 'Home', 'url' => '#', 'active' => true),
                array('label' => 'Link', 'url' => '#'),
                array('label' => 'Link', 'url' => '#'),
            )
        )
    )
));

Highchart

Kode

$this->widget('booster.widgets.TbHighCharts', array(
    'options' => array(
        'series' => array(
            array(
                'data' => array(0, 1.5, 4, 3, 1, 0, -1, -3, -4, -1.5, 0)
            ),
            array(
                'data' => new CJavaScriptExpression(
                    '[0, -3/2, -2*2, -0.3e1, -Math.pow(354,0), 1-1, 3/3, 3, 4, 4-2.5, 0]'
                )
            )
        )
    )
));

Note : Widget lainnya bisa dilihat di Website Yiibooster

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S