by - Part 1: Setup & Menampilkan Data (sedang dibaca)
- Part 2: CRUD (Tambah, Edit, Hapus)
- Part 3: Pencarian, Filter & Paginasi
- Part 4: Autentikasi Login
CodeIgniter 4 adalah framework PHP yang ringan, cepat, dan mudah dipelajari — cocok untuk pemula maupun pengembang berpengalaman yang ingin membangun aplikasi web dengan struktur rapi. Pada tutorial ini kita akan membangun sebuah aplikasi katalog buku sederhana dari nol, sekaligus mengupas hampir seluruh komponen inti CodeIgniter 4: mulai dari instalasi, migration, seeder, model, controller, routing, helper, hingga sistem layout view.
Setelah menyelesaikan panduan ini, Anda akan memahami alur kerja lengkap sebuah aplikasi CodeIgniter 4 dan siap mengembangkannya menjadi aplikasi yang lebih kompleks.
Memahami Pola MVC
CodeIgniter menerapkan pola arsitektur MVC (Model-View-Controller) yang memisahkan tiga tanggung jawab utama:
- Model — mengurus data dan berinteraksi dengan database (mengambil, menyimpan, memvalidasi).
- View — menangani tampilan yang dilihat pengguna (HTML, CSS).
- Controller — jembatan yang menerima permintaan pengguna, memanggil Model, lalu meneruskan hasilnya ke View.
Pemisahan ini membuat kode lebih terorganisir, mudah dirawat, dan mudah dikembangkan bersama tim. Diagram di atas menggambarkan bagaimana sebuah permintaan mengalir dari browser hingga kembali menjadi halaman yang ditampilkan.
Menyiapkan Kebutuhan
Sebelum mulai, pastikan perangkat Anda memenuhi kebutuhan berikut:
- PHP 7.4 atau lebih baru (disarankan PHP 8.1+) dengan ekstensi
intl,mbstring, danjsonaktif. - Composer — pengelola dependensi PHP.
- MySQL atau MariaDB sebagai basis data (bisa juga SQLite untuk latihan).
Membuat Proyek CodeIgniter 4
Cara termudah dan paling direkomendasikan untuk memulai proyek baru adalah lewat Composer menggunakan paket appstarter. Jalankan perintah berikut di terminal:
composer create-project codeigniter4/appstarter katalog-buku
Composer akan mengunduh kerangka CodeIgniter 4 beserta seluruh dependensinya ke dalam folder katalog-buku. Setelah selesai, masuk ke folder proyek:
cd katalog-buku
Mengenal Struktur Folder
Begitu proyek terbentuk, Anda akan menemukan struktur folder utama seperti berikut:
| Folder | Fungsi |
|---|---|
app/ | Jantung aplikasi: Controllers, Models, Views, Config, Helpers, Database. |
public/ | Titik masuk aplikasi (index.php) dan aset statis seperti CSS, JS, gambar. |
writable/ | Berkas yang bisa ditulis: cache, log, sesi, unggahan. |
tests/ | Berkas pengujian (unit test). |
vendor/ | Pustaka pihak ketiga hasil instalasi Composer. |
Mengatur File .env
CodeIgniter menyimpan konfigurasi lingkungan pada file .env. Salin file env bawaan menjadi .env, lalu buka dan sesuaikan. Aktifkan mode pengembangan dan atur koneksi database:
CI_ENVIRONMENT = development database.default.hostname = localhost database.default.database = katalog_buku database.default.username = root database.default.password = database.default.DBDriver = MySQLi database.default.port = 3306
Mode development penting selama proses membangun karena menampilkan pesan error secara detail dan mengaktifkan Debug Bar. Untuk server produksi nanti, ubah menjadi production. Jangan lupa membuat database kosong bernama katalog_buku lebih dulu di phpMyAdmin atau lewat perintah SQL.
Menjalankan Server Pengembang
CodeIgniter menyediakan server pengembangan bawaan lewat perintah spark. Jalankan:
php spark serve
Aplikasi kini dapat diakses di http://localhost:8080. Bila port 8080 sudah dipakai, gunakan port lain:
php spark serve --port 9090
Buka alamat tersebut di browser, dan Anda akan disambut halaman selamat datang bawaan CodeIgniter 4.
Menyesuaikan Tampilan Halaman Depan
Mari ganti halaman depan dengan tampilan kita sendiri. Buka file app/Views/welcome_message.php (atau buat file baru app/Views/home.php) dan isi dengan kerangka HTML sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Katalog Buku</title>
<link rel="stylesheet" href="/css/gaya.css">
</head>
<body>
<header>
<div class="logo">Katalog Buku</div>
<nav></nav>
</header>
<main>
Selamat datang di aplikasi Katalog Buku.
</main>
<footer>
© 2026 Katalog Buku
</footer>
</body>
</html>
Agar tampil rapi, buat file CSS di public/css/gaya.css:
html, body {
font-family: Segoe UI, Arial, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background-color: #dc2626;
color: #fff;
padding: 14px 20px;
display: flex;
justify-content: space-between;
}
main {
padding: 20px;
flex: 1;
}
footer {
background-color: #333;
color: #eee;
padding: 12px 20px;
text-align: center;
}
Membuat Migration Tabel Buku
Migration adalah cara mendefinisikan struktur tabel lewat kode PHP, sehingga skema database bisa dibuat ulang dengan mudah di komputer mana pun. Buat migration baru:
php spark make:migration CreateBuku
Perintah itu menghasilkan file di app/Database/Migrations/. Buka dan isi metode up() untuk mendefinisikan kolom tabel buku:
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class CreateBuku extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'unsigned' => true,
'auto_increment' => true,
],
'judul' => [
'type' => 'VARCHAR',
'constraint' => 120,
],
'penulis' => [
'type' => 'VARCHAR',
'constraint' => 80,
],
'harga' => [
'type' => 'INT',
'default' => 0,
],
'stok' => [
'type' => 'INT',
'default' => 0,
],
'terbit' => [
'type' => 'DATE',
'null' => true,
],
]);
$this->forge->addKey('id', true);
$this->forge->createTable('buku');
}
public function down()
{
$this->forge->dropTable('buku');
}
}
Beberapa operasi forge yang sering dipakai: addField() mendefinisikan kolom, addKey('id', true) menjadikan id sebagai primary key, addUniqueKey(['kolom']) untuk indeks unik, serta createTable() dan dropTable() untuk membuat dan menghapus tabel.
Menjalankan Migration
Setelah file migration siap, jalankan untuk membuat tabelnya di database:
php spark migrate
CodeIgniter akan mengeksekusi semua migration yang belum dijalankan. Bila ingin membatalkan migration terakhir, gunakan php spark migrate:rollback.
Mengisi Data Awal dengan Seeder
Seeder berguna untuk mengisi tabel dengan data contoh secara otomatis — sangat membantu saat pengujian. Buat seeder baru:
php spark make:seeder BukuSeeder
Isi metode run() pada file app/Database/Seeds/BukuSeeder.php:
<?php
namespace App\Database\Seeds;
use CodeIgniter\Database\Seeder;
class BukuSeeder extends Seeder
{
public function run()
{
$this->db->table('buku')->truncate();
$data = [
[
'judul' => 'Laskar Pelangi',
'penulis' => 'Andrea Hirata',
'harga' => 95000,
'stok' => 12,
'terbit' => '2005-09-01',
],
[
'judul' => 'Bumi Manusia',
'penulis' => 'Pramoedya Ananta Toer',
'harga' => 110000,
'stok' => 7,
'terbit' => '1980-01-01',
],
[
'judul' => 'Filosofi Teras',
'penulis' => 'Henry Manampiring',
'harga' => 88000,
'stok' => 20,
'terbit' => '2018-01-01',
],
];
$this->db->table('buku')->insertBatch($data);
}
}
Jalankan seeder tersebut:
php spark db:seed BukuSeeder
Untuk memeriksa isi tabel langsung dari terminal, gunakan php spark db:table buku.
Membuat BaseModel
Sebagai praktik yang baik, buat sebuah BaseModel yang menjadi induk seluruh model. Di sinilah Anda bisa meletakkan metode atau pengaturan yang dipakai bersama semua model. Buat file app/Models/BaseModel.php:
<?php
namespace App\Models;
use CodeIgniter\Model;
class BaseModel extends Model
{
// Properti dan metode bersama untuk semua model diletakkan di sini.
}
Membuat Model Buku
Sekarang buat model untuk tabel buku:
php spark make:model BukuModel
Sesuaikan isinya agar mewarisi BaseModel, menunjuk ke tabel yang benar, serta menentukan kolom yang boleh diisi dan aturan validasinya:
<?php
namespace App\Models;
class BukuModel extends BaseModel
{
protected $table = 'buku';
protected $primaryKey = 'id';
protected $returnType = 'array';
protected $useAutoIncrement = true;
protected $allowedFields = ['judul', 'penulis', 'harga', 'stok', 'terbit'];
protected $useTimestamps = true;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $validationRules = [
'judul' => [
'label' => 'Judul Buku',
'rules' => 'required|max_length[120]',
],
'penulis' => [
'label' => 'Penulis',
'rules' => 'required|max_length[80]',
],
'harga' => [
'label' => 'Harga',
'rules' => 'required|numeric',
],
'stok' => [
'label' => 'Stok',
'rules' => 'required|greater_than_equal_to[0]',
],
];
protected $validationMessages = [];
protected $skipValidation = false;
}
Dengan aturan validasi ini, setiap kali menyimpan data buku, CodeIgniter otomatis memeriksa bahwa judul dan penulis terisi, harga berupa angka, dan stok tidak negatif.
Membuat Controller Buku
Controller bertugas menerima permintaan dan mengembalikan respons. Buat controller baru:
php spark make:controller Buku
Untuk permulaan, buat metode index() yang mengambil semua buku dan mengembalikannya dalam bentuk JSON — berguna bila aplikasi Anda berfungsi sebagai API:
<?php
namespace App\Controllers;
use App\Models\BukuModel;
class Buku extends BaseController
{
public function index()
{
$model = new BukuModel();
$daftar = $model->findAll();
return $this->response->setJSON($daftar);
}
}
Jika ingin membangun REST API penuh (dengan endpoint create, update, delete), CodeIgniter menyediakan ResourceController. Anda cukup mengubah kelas induk menjadi ResourceController, menetapkan $modelName dan $format = 'json', lalu memakai return $this->respond($this->model->findAll());.
Menyiapkan Routing (Routes)
Routing menentukan URL mana yang menjalankan controller dan metode mana. Buka app/Config/Routes.php dan tambahkan rute berikut:
$routes->get('/', 'Home::index');
$routes->get('buku', 'Buku::index');
$routes->get('buku/(:num)', 'Buku::show/$1');
$routes->post('buku', 'Buku::create');
$routes->put('buku/(:num)', 'Buku::update/$1');
$routes->delete('buku/(:num)', 'Buku::delete/$1');
Placeholder (:num) menangkap angka dari URL dan meneruskannya sebagai argumen ke metode controller melalui $1. Kini membuka http://localhost:8080/buku akan menampilkan data buku dalam format JSON.
Memanfaatkan Helper
Helper adalah kumpulan fungsi pembantu yang bisa dipakai di mana saja. CodeIgniter punya banyak helper bawaan seperti url, form, dan html. Kita bisa memuatnya dengan helper('nama_helper') atau otomatis di controller lewat properti $helpers.
Sebagai latihan, mari buat helper kustom untuk membangun tabel HTML dari array data. Buat file app/Helpers/tabel_helper.php:
<?php
function atributHtml($atribut = [])
{
$hasil = [];
foreach ($atribut as $nama => $nilai) {
$hasil[] = $nama . '="' . $nilai . '"';
}
return implode(' ', $hasil);
}
function selHtml($isi, $tag = 'td')
{
return "<$tag>$isi</$tag>";
}
function barisHtml($baris, $tag = 'td')
{
if (!$baris) return '';
$kolom = [];
foreach ($baris as $nilai) {
$kolom[] = selHtml($nilai, $tag);
}
return '<tr>' . implode('', $kolom) . '</tr>';
}
function buatTabelHtml($data, $judulKolom = null, $atribut = [])
{
if (!$data) return '<p>Tidak ada data.</p>';
if (!$judulKolom) {
$judulKolom = array_keys($data[0]);
}
$thead = barisHtml($judulKolom, 'th');
$baris = [];
foreach ($data as $row) {
$baris[] = barisHtml($row);
}
$tbody = implode("\n", $baris);
$attr = atributHtml($atribut);
return "<table $attr>\n<thead>$thead</thead>\n<tbody>$tbody</tbody>\n</table>";
}
Fungsi buatTabelHtml() menerima array data, secara otomatis membaca nama kolom dari kunci array, lalu merangkainya menjadi tabel HTML yang lengkap dengan header.
Menampilkan Data Buku ke Tampilan (View)
Alih-alih mengembalikan JSON, mari ubah controller agar menampilkan data lewat sebuah view. Perbarui metode index():
<?php
namespace App\Controllers;
use App\Models\BukuModel;
class Buku extends BaseController
{
protected $helpers = ['tabel'];
public function index()
{
$model = new BukuModel();
$data = [
'daftar' => $model->findAll(),
];
return view('buku/index', $data);
}
}
Lalu buat file view app/Views/buku/index.php yang memanggil helper tabel kita:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Daftar Buku</title>
<link rel="stylesheet" href="/css/gaya.css">
</head>
<body>
<header>
<div class="logo">Katalog Buku</div>
</header>
<main>
<h2>Daftar Buku</h2>
<?= buatTabelHtml($daftar, ['ID', 'Judul', 'Penulis', 'Harga', 'Stok'], ['border' => 1]) ?>
</main>
<footer>
© 2026 Katalog Buku
</footer>
</body>
</html>
Merapikan Tampilan dengan Layout Bersama
Menyalin kerangka HTML yang sama di setiap view tentu tidak efisien. CodeIgniter menyediakan fitur layout lewat extend() dan section(). Buat layout induk di app/Views/layouts/utama.php:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title><?= $judul ?? 'Katalog Buku' ?></title>
<link rel="stylesheet" href="/css/gaya.css">
</head>
<body>
<header>
<div class="logo">Katalog Buku</div>
<nav>
<a href="/">Beranda</a>
<a href="/buku">Daftar Buku</a>
</nav>
</header>
<main>
<?= $this->renderSection('konten') ?>
</main>
<footer>
© 2026 Katalog Buku
</footer>
</body>
</html>
Sekarang view daftar buku menjadi jauh lebih ringkas karena cukup mengisi bagian konten saja:
<?= $this->extend('layouts/utama') ?>
<?= $this->section('konten') ?>
<h2>Daftar Buku</h2>
<?= buatTabelHtml($daftar, ['ID', 'Judul', 'Penulis', 'Harga', 'Stok'], ['border' => 1]) ?>
<?= $this->endSection() ?>
Dengan pola ini, setiap halaman baru cukup memanggil extend() ke layout utama lalu mengisi bagian konten-nya. Perubahan pada header, menu, atau footer cukup dilakukan di satu tempat.
Penutup
Selamat! Anda telah membangun sebuah aplikasi CodeIgniter 4 lengkap dari nol — mulai dari instalasi, konfigurasi database, membuat struktur tabel lewat migration, mengisi data dengan seeder, menyusun model beserta validasinya, membuat controller dan routing, hingga menampilkan data dengan bantuan helper dan sistem layout view.
Dari fondasi ini, Anda bisa melanjutkan ke fitur yang lebih kaya: form tambah/edit buku, pencarian dan filter, paginasi, hingga autentikasi pengguna. Kuncinya, pahami betul alur MVC yang menjadi tulang punggung setiap aplikasi CodeIgniter. Selamat berkarya!
Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi CodeIgniter 4.
