Twitter bootstrap adalah salah satu CSS Framework yang cukup fenomenal kehadirannya, CSS framework menggantikan cara lama menggunakan template instant yang tersedia luas di internet dengan template yg semi instant yang disebut css framework, kenapa saya sebut semi instant?, karena jika template instant anda tinggal install dari aplikasi CMS dengan satu kali klik maka selesai, sedangkan semi instant anda perlu mengkonfigurasi dan menyesuaikan code2 CSS kedalam aplikasi anda. Dan salah satu kekuatan dari CSS Framework adalah bisa digunakan untuk aplikasi web apapun tentunya dengan konfigurasi tertentu yang berbeda-beda tergantung aplikasi web apa yg anda gunakan.
Di tulisan saya kali ini akan saya bahas bagaimana membuat template web menggunakan CI dan twitter bootstrap, here we go ….
- Siapkan Kopi dan cemilan
- Download CI dan Bootstrap di alamat https://ellislab.com/ dan di getbootstrap.com/
- Install/unzip CI pada web server lokal anda
- Berikut adalah struktur file yang akan anda buat, bisa anda lihat ada 7 file php yang akan kita buat untuk membuat template menggunakan CI dan bootstrap.
- “Folder CI”
- —-Application
- ——-Controller
- ———–main.php
- ——-Views
- ———–welcome.php
- ———–header.php
- ———–content.php
- ———–footer.php
- ———–container.php
- ——-Libraries
- ———–template.php
- Controller adalah yg pertama akan dipanggil oleh CI, dalam hal ini adalah “main.php”
- Selanjutnya controller(main.php) akan memanggil Model (jika ada, misalnya menampilkan data dari mysql) kemudian memanggil library “template.php”
- Kemudian “template.php” akan memanggil file2 pada folder views, yaitu “container,footer, header, content, welcome”.php dan mengirimnya ke controller (main.php)
- Lalu Controller (main.php) menampilkannya di browser
Contohnya adalah seperti dibawah ini, adalah isi dari routes.php
artinya file /Controller/main.php adalah yang pertama diload.
Lalu apa isi file main.php?, berikut dibawah ini adalah contoh isinya :
Function “index” adalah function yg akan dipanggil pertama ketika file ini dipanggil, tentunya anda set untuk mengakses halaman “home” bukan?, dlm hal ini halaman home ada pada function “main”
Untuk meload library template ada pada perintah $this->load->library(‘template’);, selanjutnya anda tinggal memanggil dengan $this->template.
Berikut adalah isi dari file /Libraries/template.php
Jadi pada function main isinya memanggil semua file2 yang terkait tampilan/css/html dsb maupun atribut judul dan ucapan selamat datang.
File /views/welcome.php bisa anda isi sembarang misal Judul dan ucapan selamat datang atau apapun atau gampangnya rename file bawaan CI /views/”welcome_message.php” menjadi welcome.php
Isi dari file /views/header.php
Isi dari file /views/content.php
Isi dari file /views/footer.php
Berikut adalah isi dari file /views/container.php :
Jadi idenya adalah memecah satu file menjadi tiga bagian footer – content – header, jika tidak memakai sistem template anda cukup menggabungkan isi dari header, content, footer kedalam welcome.php.
————————————-Diatas adalah skema tanpa bootstrap——————————-
Nah tugas anda sekarang adalah mengkopy kode-kode dari bootstrap dan membaginya kedalam tiga file “header, content, footer”.php, pertama2 buatlah folder /assets/ didalam folder root webmu, pastekan semua folder dan file bootstrap kesini, struktur file nya sebagai berikut :
/folderweb/assets/cssArahkan browser anda ke link berikut http://getbootstrap.com/examples/starter-template/, kemudian liatlah source code htmlnya, jika menggunakan firefox maka klik kanan kemudian pilih “view page source”
/folderweb/assets/js
/folderweb/assets/fonts
Kopi baris berikut kedalam /views/header.php
Jangan lupa download jquery terbaru dan paste kedalam folder /assets/js, jquery bisa anda download di http://jquery.com/download/
