Codeigniter 4 backend templating – Banyak web designer menggunakan bootstrap sebagai framework UI dan UX pada tampilan aplikasi mereka. Bootstrap merupakan salah satu framework HTML dan CSS yang mana didalamnya terdapat file jQuery yaitu framework JavaScript.
Setelah berhasil menginstall framework Codeigniter 4 pada web server, kemudian download juga template bootstrap dan disini saya menggunakan template Gentelella Alela!. Template Gentelella Alela! adalah salah satu template yang banyak digunakan oleh developer sebagai template backend aplikasi mereka, template ini sudah dibundel dengan bootstrap serta pendukung lainnya, dan yang saya pakai disini sudah didukung bootstrap versi v3.3.7.
Dalam project CI pada folder “public” buatlah satu folder dengan nama “assets”, lalu kopikan folder dan file pendukung template Gentelella Alela! seperti folder “build”, folder “images”, folder “src”, serta folder “vendors” kedalam folder “assets” yag telah kita buat sebelumnya. Sehingga susunan foldernya akan tampak seperti berikut:
Lalu buatlah satu buah folder dengan nama “template” pada folder “app/Views” dan kopi salah satu file index.html dari folder master template Gentelella Alela! dan letakkan pada folder “app/Views/template”, dan ubahlah file tersebut serta extensi menjadi file “_template.php”, sehingga struktur peletakkan file template akan tampak seperti dibawah ini:
Kemudian cari tag yang berisikan tag untuk meload file CSS dan JavaScript <link href=”../vendors/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet”> lalu ubahlah menjadi <link href=”<?php echo base_url();?>/public/assets/vendors/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet”> seperti yang terlihat pada gambar struktur template diatas.
Langkah selanjutnya adalah memanggil file template yang telah kita siapkan tadi, buka file controller “Home.php” pada folder “app/Controllers/Home.php”, pada method index() kita panggil file template dengan kode seperti berikut:
<?php namespace App\Controllers;
class Home extends BaseController
{
public function index()
{
return view('template/_template');
}
}Jika tahap demi tahap diatas sudah kita lalui, tahap selanjutnya adalah kita melakukan testing apakah template sudah terintegrasi dengan baik, buka browser Anda lalu akses project kerja Anda melalui alamat localhost/namaproject/public/, jika berjalan dengan baik maka akan terlihat hasilnya seperti berikut:
Oke teman-teman, sampai disini proses memasang template dengan dukungan framework bootstrap versi v3.3.7 di Codeigniter4 telah berhasil kita lakukan. Terimakasih..
Baca Juga artikel terkait : Tutorial Codeigniter 4 CRUD Application Data Pegawai Dengan Modals Boostrap
