Integrasi CodeIgniter 4 dan ThemeKit v2 Bootstrap Admin
Ringkasan
Dikutip dari Wikipedia “CodeIgniter merupakan aplikasi sumber terbuka yang berupa kerangka kerja PHP dengan model MVC (Model, View, Controller) untuk membangun situs web dinamis dengan menggunakan PHP”. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Saat ini CodeIgniter telah mencapai versi 4 yang rilis pada 24 Februari 2020 (bertepatan dengan ulang tahun James Parry, pimpinan proyek CodeIgniter).
Sedangkan ThemeKit merupakan sebuah template admin yang berbasis bootstrap 4 yang dirilis pada 25 Januari 2019.
Download Link :
Pembahasan
Langkah yang pertama ialah Download dan Extract CodeIgniter 4 serta ThemeKit v2. Jika sudah menginstall XAMPP, tarulah hasil extract tersebut di folder /xampp/htdocs/ .
Selanjutnya buka folder ThemeKit v2, lalu copy folder dist, img, js, plugins, src. Setelah itu bukalah folder CodeIgniter 4/public (disini dinamakan folder project/public), dan buat folder baru dengan nama theme. Lalu paste folder yang di copy dari ThemeKit v2 ke folder theme.
Langkah berikutnya ialah buka file .env di root folder CodeIgniter dan ganti CI_ENVIRONMENT menjadi development
Sekarang cobalah buka di web browser dengan url http://localhost/project/public/
Tampilannya akan seperti di atas, kecuali juga muncul error Whoops!. Jika anda menggunakan XAMPP yang harus dilakukan adalah buka XAMPP Control Panel.
Klik config, lalu klik PHP (php.ini). Carilah kata extension=intl jika didepannya ada tanda semicolon(;), hapus tanda tersebut.
Selanjutnya stop & start kembali XAMPP Control Panel. Lalu refresh URL tadi. Langkah selanjutnya adalah menghilangkan public pada URL menjadi http://localhost/project/ dengan menggunakan .htaccess. Buatlah file baru di root folder dengan nama .htaccess
Isi file .htaccess dengan script berikut :
Script di atas berfungsi untuk mencegah user membuka file lain selain yang ber-extention .php. Berikutnya, pindahkan file public/index.php ke root folder.
Buka file index.php yang baru dipindahkan tersebut. Kemudian cari code berikut :
ubah menjadi
Nah, sekarang buka URL tanpa public http://localhost/project/ dan hasilnya ….
Selamat kita sudah berhasil untuk menghilangkan public tersebut. Jika tampilannya belum seperti gambar diatas, eeiitss.. jangan khawatir. Yang perlu dilakukan adalah setting base_url pada folder Config. Maka langkah selanjutnya bukalah file app/Config/App.php lalu ganti :
public $baseURL = ‘http://localhost:8080';
ubah menjadi :
public $baseURL = ‘http://localhost/project/';
Setelah konfigurasi CodeIgniter selesai, kita mulai ke bagian inti yaitu integrasi CodeIgniter dengan ThemeKit Bootstrap Admin Template. Sebelumnya kita sudah mendownload master ThemeKit template. Sekarang kita mulai dengan buka file index.html pada master ThemeKit tersebut di root folder.
Pertama buatlah file baru dengan nama index.php di CodeIgniter folder. Simpan di app/Views/
Selanjutnya copy & paste file index.html (folder master ThemeKit) ke index.php (folder CodeIgniter app/Views/index.php). Setelah itu tambahkan masing-masing source CSS/JS atau gambar pada file index.php tersebut
<?= base_url(‘public/theme/…’) ?>. Contohnya sebagai berikut.
Taraa..
Langkah selanjutnya adalah memisahkan bagian-bagian yang akan menjadi master. Tujuannya agar tidak dipanggil berulang, bagian-bagian tersebut seperti head, navbar, sidebar, content (main), footer, dan js.
Yang pertama, pisahkan bagian head sebagai wadah tag head (<head>). Buatlah file head.php di app/Views. download
Berikutnya bagian navbar sebagai bagian atas menu atau header menu. Buatlah file navbar.php di app/Views. download
Selanjutnya adalah bagian sidebar sebagai bagian menu utama yang nantinya berfungsi untuk mengubah halaman. Buatlah file sidebar.php di app/Views. download
Dan yang berikutnya adalah bagian utama sebuah website yaitu bagian content yang merupakan isi halaman tersebut (bagian ini nanti yang akan berubah-ubah saat dipanggil pada Controller. Buatlah file content.php (nama disini dapat berubah-ubah tergantung kebutuhan) di app/Views. download
Lalu selanjutnya bagian footer sebagai bagian bawah website. Buatlah file footer.php di app/Views. download
Dan bagian yang terakhir adalah bagian JS atau JavaScript sebagai bagian dari kebutuhan akan sebuah halaman. Buatlah file js.php di app/Views download
Tahap pemisahan file telah selesai, selanjutnya adalah untuk memunculkan website tersebut. Mari kita pergi ke app/Controllers/Home.php
Selanjutnya ganti file tersebut menjadi :
Silahkan coba buka http://localhost/project
Taraa.. Hasilnya akan seperti dibawah ini
Akhirnya, integrasi CodeIgniter 4 dengan ThemeKit v2 Bootstrap Admin telah selesai. Terimakasih sudah mengikuti tutorial ini. Tunggu tutorial berikutnya…
Download Source Code : https://github.com/budiodank/Template-Admin-CodeIgniter-4
Download PDF : https://drive.google.com/file/d/1jWNDcb536JNeOS-8TXC917_xH4BS_gq7/view?usp=sharing
