Detail Artikel

pemrograman

Integrasi Template Bootstrap (SB Admin 2) Dengan CodeIgniter 4

11/07/2021 by Ilham Lutfi 1243
Integrasi Template Bootstrap (SB Admin 2) Dengan CodeIgniter 4

Integrasi Template Bootstrap (SB Admin 2) Dengan CodeIgniter 4 - Bagaiamana caranya integrasi template / templating di codeigniter 4...?, Pada artikel ini Sekayu Ngoding akan memberikan contoh sederhana penerapan templating codeigniter 4 dengan cara metode view layouts sesuai best practices dari dokumentasi resminya CodeIgniter, dilansir dari codeigniter.com. Bahwa CodeIgniter 4

"CodeIgniter mendukung sistem tata letak yang sederhana, namun sangat fleksibel, yang memudahkan penggunaan satu atau lebih tata letak halaman dasar di seluruh aplikasi Anda. Tata letak mendukung bagian konten yang dapat disisipkan dari tampilan apa pun yang dirender. Anda dapat membuat tata letak yang berbeda untuk mendukung satu kolom, dua kolom, halaman arsip blog, dan banyak lagi",

Dengan menggunakan konsep view layouts kita dapat lebih mudah dalam menyusun baris code atau membuat website yang dinamis, Kali ini kita akan mencoba integrasi / memasang template bootstrap sejuta umat yaitu SB Admin 2 dengan CodeIgniter 4, Sebelumnya kita juga telah membahas seputar CodeIgniter 4 di artikel sebelumnya Pengenalan CodeIgniter 4 PHP Framework bagi yang belum kenal silahkan di baca dulu artikelnya tentang pengenalan codeigniter 4 laugh, OK langsung saja kita mulai Integrasi Template Bootstrap (SB Admin 2) Dengan CodeIgniter 4.

1. Install CodeIgniter 4

Langkah pertama silahkan anda install terlebih dahulu codeigniter 4 nya melalui situs resminya atau dengan melalui composer sesuai best practice, Untuk yang  belum tau cara install codeigniter 4 best practices dokumentasi resminya silahkan klik disini.

ci4 templating

Disini saya menggunakan sistem operasi Linux Mint 20.1 dan telah menginstall Codeigniter 4 dengan nama folder ci4-tutorial, Silahkan anda install dan dengan nama folder yang anda sukai, boleh juga disamakan hehelaugh.

2. Buka Text Editor Dan Setup File Environment

Buka folder ci4-tutorial di text editor favorit anda, Di sini saya menggunakan Visual Studio Code, Buka terminal visual studio code lalu ketikkan perintah / command, php spark serve perintah ini digunakan untuk menjalankan codeigniter 4 menggunakan local development server yaitu server bawaan dari codeigniter 4 yang otomatis berjalan di port 8080, Jadi anda bisa menjalankan codeigniter 4 tanpa harus meletakkan folder ci4-tutorial di htdocs (xammp) atau www (wamp) dll.

php spark serve codeigniter 4

Selanjutnya buka file env di dalam folder ci-4-tutorial, Kemudian rename dari env -> .env (tambahkan dot atau titik di awal nama file) dimaksudkan agar file .env terbaca sebagai file environment system untuk menyimpan pengaturan codeigniter 4 seperti base usrl, database dan lain-lain, lalu cari script bagian #CI_ENVIRONMENT = production ganti menjadi CI_ENVIRONMENT = development (hapus tanda pagar/# dan ubah production menjadi development) agar jika ada pesan kesalahan atau notice error akan muncul dalam mode pengembangan, Terakhir pada file .env cari bagian script #app.baseURL =  '' ubah menjadi app.baseURL = 'http://localhost:8080' (hapus tanda pagar/# dan isi di antara kutip dengan https://localhost:8080) sebagai base url alamat utama situs kita yang berjalan di localhost port 8080.

env codeigniter 4

Buka browser dan akses proyek kita dengan mengetikkan http://localhost:8080 di tab pencarian, jika sudah muncul seperti digambar dibawah ini artinya Setup awal CodeIgniter 4 telah berhasil.

integrasi template codeigniter 4

3. Download Template Bootstrap (SB Admin 2)

Selanjutnya dowload terlebih dahulu template bootstrap yaitu SB Admin2 yang akan kite integrasikan dengan CodeIgniter 4, Anda dapat mendownload template SB Admin 2 dengan cara klik disini, Setelah proses download selesai ekstrak file template nya lalu buka dan copy folder (css, img, js, scss dan vendor).

integrasi template bootstrap codeigniter 4

 Kemudian buat terlebih dahulu folder assets didalam folder ci4-tutorial/public dan paste disana.

templating codeigniter 4

4. Membuat Controller CodeIgniter 4

Untuk integrasi / memasang template pertama kita buat dulu file Controller baru dengan nama Dashboard.php dan ketikkan script code seperti dibawah ini.

controller codeigniter 4

Di dalam Controller Dashboard.php kita membuat satu buah function index, yang berfungsi me-return view yang ada di dalam folder Views/dashboard/index.php, Lalu buka folder Views buat folder dashboard yang didalamnya ada file index.php.

cara memasang template bootstrap dengan codeigniter 4

5. Integrasi Template Dengan Metode View Layouts CodeIgniter 4

Berikutnya buka file index.html yang ada di dalam folder hasil ekstrak template SB Admin 2 tadi dengan Visual Studio Code, Salin semua code html nya (CTRL + A), Kemudian paste kan di dalam file ci4-tutorial/Views/dashboard/index.php. Seperti dibawah ini

view layouts codeigniter 4

Selanjutnya ganti path atau folder resource yang semula mengarah ke folder (css, img, js, scss dan vendor) dengan mengisikan base url dan folder assets seperti ini : /assets/folder resource tempat kita menyimpan folder resource template SB Admin 2, Dibagian header dan footer Selengkapnya seprti gambar dibawah ini.

base url codeigniter 4 template

jangan lupa dibagian footer tambahkan juga script /assets/folder resource

Kemudian akses kembali proyek kita kali ini kita mengarahke Controller Dasboard.php yang dibuat tadi dengan cara mengetikkan http://localhost:8080/dashboard di tab pencarian, Jika muncul seperti gambar dibawah artinya resource template sudah terhubung dengan CodeIgniter 4 laugh

sb admin 2 dengan codeigniter 4

Langkah terakhir untuk penerapan Templating View Layouts CodeIgniter 4 agar template nya dinamis, Kita harus memecah template dan dirender dengan function built-in codeigniter 4 yaitu renderSection(); ?>, Kita akan membuat folder baru dengan nama layout di dalam folder Views yang di dalamnya ada file templates.php, Copy script bagian header dan footer template yang ada di dalam file Views/dashboard/index.php ke Views/layout/templates.php, Ditengah script header dan footer buat ketik renderSection('content'); ?>, yang berfungsi untuk me-render atau menampilkan setiap bagian Section yang di deklarasikan dengan nama content.

view layouts codeigniter 4

Kemudian beralih ke file Views/dashboard/index.php, Cut seluruh script code yang ada di file index.php dengan CTRL + X, Kemudian ketika perintah berikut, Script ini mendeklarasikan bahwa file index.php extend atau terhubung dengan layout/templates. Nantinya source code yang di cut tadi kita pastekan di antar function Section('content).

cara memasang template bootstrap di codeigniter 4

Kemudian paste script code yang di cut tadi ke di antar function Section('content') dan endSection() agar script code tersebut di-render atau terbaca secara dinamis.

cara install template bootstrap di codeigniter 4

Terakhir akses atau refresh kembali proyek kita dengan alamat url http://localhost:8080/dashboard, apabila masih tetap muncul seperti tadi tanpa error apapu artinya penerapan integrasi template dengan metode view layouts berhasil

sb admin 2 codeigniter 4

Memang terlihat tidak ada perbedaan untuk hasil atau outputnya tetapi metode view layouts sudah berjalan di latar belakang dengan me-render view secara dinamis dan ini sangat memudahkan kita dalam melanjutkan proyek untuk pengembangan kedepannya, Cukup sekian tutorial kali ini mohon maaf bila ada salah penyampaian, Terima Kasih dan Semoga Bermanfaat laugh.

Silahkan unduh script code Tutorial Integrasi Template Bootstrap (SB Admin 2) Dengan CodeIgniter 4 klik di sini..!!!

 


Tentang Penulis

Ilham Lutfi

Ilham Lutfi

Saya Web Developer alumni DIII Teknik Informatika dari Politeknik Sekayu, Bagi saya berbagi pengetahuan adalah salah satu kewajiban dalam kehidupan, Semoga Sekayu Ngoding dapat menjadi situs pembelajaran yang bermanfaat bagi sesama, Terima Kasih telah berkunjung.!!!


Artikel Lainnya

Pengenalan CodeIgniter 4 PHP Framework

Pengenalan CodeIgniter 4 PHP Framework

01/06/2021 BY Ilham Lutfi 973

Tinggalkan Komentar

Scroll to Top