Yang akrab memakai CodeIgniter, dari versi 1 sampai versi 3, pasti akan selalu familiar dengan form_helper. Kesederhanaan menulis form dengan perintah PHP, tanpa harus pusing dengan tag html seperti tanda petik dan kurung siku jadi kelebihan tersendiri. Kekurangannya, form yang dihasilkan masih dalam bentuk form biasa. Belum ada rata kanan dan rata kiri sehingga form terkesan berantakan.

Di sisi lain, website modern tidak lepas dari unsur responsif, mengingat berbagai macam ukuran perangkat yang mengakses sebuah website. Salah satu pemain penting dalam website modern adalah Bootstrap.

Bootstrap adalah framework CSS berbasis open source yang dibuat oleh Mark Otto dan Jacob. Framework ini bermula di tahun 2010 dan masih berlanjut pengembangannya sampai sekarang (versi 4 alpha). Sederhananya, Bootstrap membuat kita tidak perlu pusing dengan kode CSS yang banyak untuk tiap elemen html. Cukup dengan menambahkan kelas css bootstrap ke dalam sebuah elemen html, maka elemen html tersebut akan dipercantik dengan sendirinya.

Contoh:

Jika ingin menambahkan kelas bootstrap ke dalam tabel, tinggal gunakan:

<table class=”table table-bordered”>

 

Untuk menggunakan Bootstrap, bisa dilakukan dengan mengunduh di sini terlebih dahulu. Setelah itu, extract file zipnya dan taruh di dalam folder CodeIgniter anda. Jadi anda akan punya struktur folder seperti demikian:

CodeIgniter3/
├── application/

├── static/

├── system/

├── userguide/   

└── bootstrap/ 
    ├── css/ 
    ├── fonts/
    └── js/

Untuk menggunakan bootstrap, harus menggunakan Jquery minimal versi 1.9. Untuk itu perlu download jquery, dan taruh ke dalam folder static. Untuk memanggil bootstrap dan jquery ke dalam tampilan HTML anda dengan menuliskan :

<script src=”<?=base_url()?>static/jquery-2.2.4.min.js”></script>
<link href=”<?=base_url()?>bootstrap/css/bootstrap.css” rel=”stylesheet”>
<script src=”<?=base_url()?>bootstrap/js/bootstrap.min.js”></script>

Pastikan urutannya sesuai.

Lalu apa hubungannya dengan CodeIgniter, Pak? Nah, bootstrap ini kita pakai supaya tampilan form kita tidak berantakan seperti bawaan form helper sebelumnya. Untuk melakukan hal ini, tidak perlu lagi berlelah-lelah menggunakan css dan fem helper. Sudah ada Wallter yang membuat form library dengan bootstrap. Dalam url di bawa ini, anda akan diarahkan ke halaman gihub milik Wallter.

https://github.com/wallter/codeigniter_bootstrap_form_builder

Dalam halaman github tersebut ada daftar folder dan tutorial pemakaian library Form_builder. Dalam folder github tersebut silahkan buka folder application/libraries. Setelah terbuka, anda tinggal mendownload Form_builder.php. Anda bisa pakai download manual, atau bisa anda clone dengan git command line (yang ini bahasan lain 🙂 ). File Form_builder.php yang sudah didownload, silahkan ditaruh di folder application/libraries/ dalam folder CI anda. Setelah itu silahkan anda ikuti cara pemakaiannya di halaman github tadi.

 

Selamat mencoba. 🙂