Sebelum memulai praktik, pastikan Anda telah memahami konsep dasar pada materi kelas Mastering CodeIgniter 4 di infokoding.

BAB 2

Mastering CodeIgniter 4 Bab 2: Memahami Konsep Arsitektur MVC & Routing

Pelajari alur request HTTP, konfigurasi routing fleksibel, pembuatan Controller pertama, dan sistem View Layouting di CI4.

Terakhir diperbarui:

In a nutshell: "Bab 2 membedah alur request HTTP di CodeIgniter 4, pengaturan routing kustom di Config/Routes.php, pembuatan Controller pertama, serta sistem View Layouting yang rapi dan modular."

Direct Answer: Arsitektur MVC memisahkan logika data (Model), antarmuka pengguna (View), dan pengendali alur bisnis (Controller). Di CI4, setiap request URL dipetakan oleh Config/Routes.php ke method Controller tertentu, yang kemudian memanggil View Layout menggunakan template inheritance ($this->extend() dan $this->section()).

Alur Request HTTP di CodeIgniter 4

In a nutshell: "Browser meminta URL -> Server memanggil public/index.php -> Router menentukan Controller & Method -> Model mengambil data -> View menghasilkan tampilan HTML ke pengguna."

Berikut diagram alur siklus hidup request di CodeIgniter 4:

User Browser ──> public/index.php ──> Routing (Routes.php) ──> Controller
                                                                  │
                                       ┌──────────────────────────┴──────────────────────────┐
                                       ▼                                                     ▼
                               Model & Database                                         View Template
                                       │                                                     │
                                       └──────────────────────────┬──────────────────────────┘
                                                                  ▼
                                                          HTTP HTML Response ──> User Browser

Dasar Routing di CodeIgniter 4 (Config/Routes.php)

In a nutshell: "Definisikan rute HTTP eksplisit di Config/Routes.php menggunakan method get, post, match, atau resource routing untuk keamanan dan keteraturan endpoint aplikasi." 
// app/Config/Routes.php
use CodeIgniter\Router\RouteCollection;

/**
 * @var RouteCollection $routes
 */
$routes->get('/', 'Home::index');
$routes->get('barang', 'Barang::index');
$routes->get('barang/tambah', 'Barang::tambah');
$routes->post('barang/simpan', 'Barang::simpan');
$routes->get('barang/edit/(:num)', 'Barang::edit/$1');
$routes->post('barang/update/(:num)', 'Barang::update/$1');
$routes->get('barang/hapus/(:num)', 'Barang::hapus/$1');

Membuat Controller Pertama dengan Spark CLI

Gunakan perintah generator Spark untuk membuat Controller secara rapi:

php spark make:controller Barang

Buka file yang dihasilkan di app/Controllers/Barang.php:

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class Barang extends BaseController
{
    public function index()
    {
        $data = [
            'title'  => 'Daftar Stok Barang - InfoKoding',
            'header' => 'Manajemen Stok Barang Gudang',
            'items'  => [
                ['kode' => 'BRG001', 'nama' => 'Monitor LED 24 Inch', 'stok' => 15, 'harga' => 1750000],
                ['kode' => 'BRG002', 'nama' => 'Keyboard Mekanikal TKL', 'stok' => 42, 'harga' => 450000],
            ]
        ];

        return view('barang/index', $data);
    }
}

Sistem View Layouting (Master Template & Sections)

In a nutshell: "Gunakan template inheritance dengan layout utama (main layout) agar header, navbar, dan footer tidak perlu ditulis berulang kali di setiap file view."

1. Buat Master Layout di app/Views/layout/main.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title ?? 'Aplikasi Stok CI4') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <nav class="navbar navbar-dark bg-dark mb-4">
        <div class="container">
            <a class="navbar-brand font-bold" href="/barang">📦 InfoKoding Inventory</a>
        </div>
    </nav>

    <main class="container">
        <?= $this->renderSection('content') ?>
    </main>

    <footer class="text-center text-muted py-4 mt-5 border-top">
        <small>© 2026 InfoKoding - Mastering CodeIgniter 4</small>
    </footer>
</body>
</html>

2. Buat View Halaman di app/Views/barang/index.php

<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
<div class="card shadow-sm p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="h4"><?= esc($header) ?></h3>
        <a href="/barang/tambah" class="btn btn-primary btn-sm">+ Tambah Barang</a>
    </div>

    <table class="table table-bordered table-hover">
        <thead class="table-dark">
            <tr>
                <th>Kode</th>
                <th>Nama Barang</th>
                <th>Stok</th>
                <th>Harga (Rp)</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($items as $item): ?>
            <tr>
                <td><?= esc($item['kode']) ?></td>
                <td><?= esc($item['nama']) ?></td>
                <td><span class="badge bg-success"><?= esc($item['stok']) ?></span></td>
                <td><?= number_format($item['harga'], 0, ',', '.') ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?= $this->endSection() ?>

Tips Pro XSS Security:

Selalu bungkus variabel dinamis di dalam View dengan helper esc($data) untuk mencegah serangan Cross-Site Scripting (XSS) secara otomatis.

Download PDF Materi