Halo sahabat selamat datang di website seputaryii.xyz, pada kesempatan hari ini kita akan membahas seputar Yii Framework â€" Integrasi twitter bootstrap dengan Yiibooster oleh - seputaryii.xyz, kami sudah mempersiapkan artikel tersebut dengan informatif dan akurat, silahkan membaca

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

Yii Bootstrap alert widget

Kode

Yii::app()->user->setFlash('error', 'Oh snap! 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

Yii Bootstrap Button

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

Yii bootstrap 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

Yii highcharts

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

Itulah tadi informasi dari poker online mengenai Yii Framework â€" Integrasi twitter bootstrap dengan Yiibooster oleh - seputaryii.xyz dan sekianlah artikel dari kami seputaryii.xyz, sampai jumpa di postingan berikutnya. selamat membaca.