Profile Website Sederhana Menggunakan Framework CodeIgniter 4

Hi, semua. Setelah sekian lama aku balik lagi nulis 😅.
Kali ini aku angkat topik menarik nih buat kalian, kita bakal belajar membuat Website profile sederhana bareng-bareng menggunakan framework CodeIgniter 4 atau mungkin orang lain lebih suka nyebutnya CI 4.

Table Of Content

1. May read (Intro to CodeIgniter)
2. Must do ( Installation & Setup)
3. Fun to do (Coding)

Introduction

Buat kalian yang belum familiar sama CI, dia tuh php based framework yang ringan dan termasuk salah satu fullstack framework yang paling cepat diantara framework yang lain. Nah di tahun penulisan artikel ini CodeIgniter sudah berada di versi 4 dan kita bakal pake versi terbaru dalam percobaan kita kali ini ya.

Installation & Setup

Pertama, download file zipped CI 4 dari website officialnya disini. Kalau udah extract foldernya di tempat yang kalian mau. Kebetulan aku pake Visual Studio Code jadi aku bakal buka folder yang udah aku extract di VSCode.

Kedua, buka file app/Config/App.php dan cari bagian default index page-nya. Kosongin kode dibawah ini ya.

public $indexPage = '';

Kalau udah coba temen-temen buka terminalnya dan ketik

php spark serve

buka url http://localhost:8080 dan kalau berhasil akan muncul tampilan seperti ini

default page Code Igniter

Coding

Here we go, bagi temen-temen yang belum tahu, CodeIgniter itu framework yang pakai arsitektur Model View Controller (MVC). MVC itu arsitektur yang memisahkan antara urusan pergerakan data(Model) logic/alur program (Controller) dan tampilannya (View). Nah masing-masing bagian itu di CI udah dibuat folder masing-masing jadi kita bisa navigasi dengan mudah untuk ngatur tiga hal itu.

Oh iya temen-temen di pembuatan website profil kita kali ini cuman bakal berurusan dengan Controller dan View aja karena kita belum perlu berurusan dengan database.

View

Pertama, buat template layout untuk halaman profil temen-temen. Biasanya diisi sama elemen html yang sama dan muncul di semua halaman profil kaya navbar, footer, import link dan lain-lain. buat file layout.php di folder view app/Views/layout.php isi codenya kaya gini

Kedua, sekarang waktunya buat isi konten dari dashboard halaman profil kita, buat file index.php di folder views app/Views/index.php ,isi codenya kaya gini

Waktu baca dua file kode diatas mungkin temen-temen yang belum familiar dengan CodeIgniter penasaran apa maksud dari kode-kode ini

// layout.php
<?= $this->renderSection('title') ?>

// index.php
<?= $this->extend('layout') ?>  // extend view layout.php
<?= $this->section('title') ?>
Dashboard
<?= $this->endSection() ?>

Jadi itu tuh syntax yang bisa kita pakai untuk membuat template view. Kita nggak perlu berkali-kali ngulangin untuk nulis kode yang sama kaya navbar, footer dll. Kalau temen-temen familiar sama blade templatenya laravel harusnya udah paham kira-kira fungsinya sama kaya gitu.

Static File

Biasanya kita dalam ngembangin web gamungkin cuman pake kode HTML aja kan, pasti butuh kode dan file lain kaya CSS, Javascript kadang juga butuh gambar dan file static lain. Kalau pakai CodeIgniter kita biasanya nyimpen file-file itu di folder Public di app/Public. Buat folder tersendiri untuk masing-masing tipe file

|-- Public
||-- css
|||__ style.css
||-- js
|||__ script.js
||-- img
|||__ jumbotron.webp

Route

Route di CodeIgniter 4 udah mirip banget sama kaya laravel, singkatnya routing itu kita masangin http request yang diminta dengan fungsi dan kelas controller yang menjalankannya. Contoh nih di file routes.php di app/Config/routes.php ada kode kaya gini :

$routes->get('/', 'Home::index');

Routes diatas penjelasannya, ketika ada request GET dengan url / maka jalanin Controller Home fungsi index . Jadi kita bisa buat kode kita lebih bersih daripada url yang kita akses sesuai kelas dan fungsi kontroller yang ingin kita panggil. Gimana? gampang kan? sekarang kita bisa lanjut ke controller

Controller

Controller di CodeIgniter tuh kaya logic yang ngatur navigasi view dan nge-handle data yang ada urusannya dengan view. Kalau bahasa kerennya, bussiness process tuh yang jalanin controller.

Sekarang coba temen-temen buka file Home.php di app/Controllers/Home.php terus kalian pasti nemu kode ini :

Nah, ini tadi yang aku jelasin, ketika di routes nyuruh untuk jalanin Controller Home fungsi index itu fungsi index ini yang dipanggil. Nah yang dilakuin fungsi index ini akan manggil file view yang namanya index.php .

Conclussion

Kalau semua sudah diset seperti diatas waktunya kita jalanin dengan command php spark serve di terminal

Nanti tampilannya bakal jadi kaya gini

all page

Gimana? Gampang banget kan make CodeIgniter. Kalau kalian masih nemu kesulitan langsung comment aja yaa, nanti kita diskusi bareng buat solve permasalahannya. Kalau temen-temen pengen lihat full code-nya bisa langsung ke repository ini. Kalau kalian butuh template HTML nya aja bisa ke repository yang ini. Temen-temen juga bisa ngunjungin tampilan demo-nya di minons1.github.io

Terima kasih buat kalian semua yang baca sampai akhir, stay tuned aku bakal buat kelanjutan dari artikel ini dengan topik buat personal blog di profile website yang telah kita buat, Peace Out ☺