Tutorial Codeigniter #2 Cara Menerapkan Template Bootstrap

Sebelumnya di Tutorial Codeigniter #1 Pengenalan Codeigniter kamu sudah mengenal apa itu codeigniter, sejarahnya, kemudian mengetahui apa saja strukturnya, dan sudah sedikit mencoba merubah tampilan awal codeigniter.

Pembahasan kedua kali ini kamu akan mencoba menerapkan template bootstrap kedalam tampilan muka codeigniter dan Bootstrap itu sendiri merupakan sebuah CSS framework yang sangat populer dalam pengembangan web sehingga ada banyak sekali pilihan template bootstrap yang dapat kamu terapkan di project yang akan kamu buat.

Dalam tutorial kali ini kamu akan menggunakan template SB Admin 2 dengan alasan karena sederhana, tampilan sudah lebih kekinian, mudah diimplementasikan, menggunakan bootstrap 4, dan tentunya template ini bisa kamu download secara cuma cuma alias gratis.

Installasi

Kita mulai dari tahap pertama yaitu download dan installasi, template bootstrap SB Admin 2 bisa kamu download dan dapatkan disini, dalam pembahasan ini saya menggunakan codeigniter versi terbaru yaitu 3.1.10 file downloadnya juga sudah saya berikan di artikel sebelumnya.

Untuk mempersingkat pembahasan ini kita akan menggunakan project Latihan yang sudah kita buat di artikel sebelumnya.

Ekstrak file template bootstrap SB Admin 2 kedalam folder C://xampp/htdocs/Latihan

Rename folder startbootstrap-sb-admin-2-gh-pages menjadi assets. Sampai disini kamu sudah menginstall template kedalam project codeigniter.

Konfigurasi

Setelah installasi supaya template bisa tampil dengan semestinya maka selanjutnya silahkan kofigurasikan terlebih dahulu beberapa konfigurasi berikut ini :

Konfigurasi Base URL fungsinya untuk menentukan alamat yang akan digunakan oleh web dan untuk cara mengaturnya bisa dengan cara membuka file config/config.php kemudia isi bagian $config['base_url'] = '';menjadi seperti gambar dibawah ini.

Konfigurasi Autoload, disini kamu harus meload sebuah helper kedalam memori secara otomatis, pengertian dari helper itu sendiri adalah fungsi fungsi yang akan membantu kita dalam berbagai hal seperi membuat form, mengakses url, dll.

Untuk mengatur Autoload dan menambahkan helper caranya dengan membuka file config/autoload.php kemudian rubah pada bagian $autoload['helper'] menjadi seperti gambar dibawah ini.

Konfigurasi Routes fungsinya untuk mengatur controller mana yang akan diload pertama kali oleh aplikasi. Secara default codeigniter telah mengatur default controller yaitu pada welcome dan disini kita akan merubahnya menjadi main seperti gambar dibawah ini.

Modifikasi Template

Pada tahap ini kita akan memodifikasi template tujuanya untuk mempermudah dalam penkodingan serta membuat struktur kode menjadi lebih rapih disini kita akan membaginya menjadi 3 file yaitu index.php, sidebar.php, dan footer.php.

Sebelum itu silahkan kamu buat satu folder dengan nama template kemudian simpan di Latihan/application/view/. kemudia ketiga file yang akan kita buat nantinya kita simpa di folder template ini.

Index.php

Buka file index.html yang ada pada folder Latihan/assets/index.html lalu pindahkan semua baris kodenya kedalam file index.php.

Sidebar.php

Didalam file index.php ambil kode dari baris pertama sampai dengan End Of Topbar lalu pindahkan kedalam file sidebar.php

Footer.php

Masih dalam file index.php ambil kode dari Footer sampai kode bari terakhir kemudian pindahkan kedalam file footer.php

Membuat Controller

Karena yang akan dipanggil pertama kali adalah controller main maka sekarang silahkan buat satu buah file dalam folder Latihan/application/controllers/ kemudian beri nama Main.php dan isi dengan baris kode seperti pada gambar dibawah ini.

kode diatas fungsinya untuk memanggil view index, sidebar, dan footer saat pertama kali controller main dijalankan.

Memanggil Assets

Tahap ini tujuanya untuk memanggil semua assets baik css, javascript, dll yang digunakan dalam file index.php, sidebar.php, dan footer.php

Caranya silahkan cari kata href atau src di ketiga file diatas kemudian tambahkan kode berikut ini <?php echo base_url(); ?>assets/ setelah kode href=" dan setelah kode src=".

Testing

Silahkan buka url localhost/Latihan dan maka seharus akan muncul tampilan seperti gambar dibawah ini

Baiklah sepertinya cukup sampai disini dulu untuk pembahasanya dan kita berjumpa lagi di artikel berikutnya . Thanks