CodeIgniter 4 (CI4) adalah framework PHP yang ringan, cepat, dan mudah dipelajari. Kalau kamu baru mulai belajar framework PHP, CI4 adalah pilihan yang bagus karena strukturnya straightforward. Di akhir artikel ini, kamu akan punya halaman web pertama yang berjalan di browser — dikerjakan di VS Code.

Apa Bedanya CI4 dengan PHP Biasa?

PHP biasa itu seperti memasak dari bahan mentah — semua kamu siapkan sendiri. CI4 seperti memasak dengan bumbu instan yang sudah disiapkan: routing, keamanan, koneksi database — sudah ada, tinggal dipakai.

CI4 menggunakan pola MVC:

Bagian Folder Tugasnya
Modelapp/Models/Ambil & simpan data ke database
Viewapp/Views/File HTML yang dilihat user
Controllerapp/Controllers/Terima request, proses, kirim ke View

📋 Progress Belajarmu

Centang tiap langkah yang sudah selesai. Progress tersimpan otomatis di browser!

① Setup VS Code

VS Code adalah editor kode gratis dari Microsoft yang digunakan developer profesional di seluruh dunia. Kita akan gunakan VS Code sebagai pusat kerja — menulis kode, terminal, dan navigasi file semuanya di satu tempat.

Langkah Setup VS Code:

1. Install VS Code

Download dari code.visualstudio.com → pilih sesuai OS → install seperti aplikasi biasa.

2. Install Extension: PHP Intelephense

🐘

PHP Intelephense

oleh Ben Mewburn · 30 juta+ install

Autocomplete cerdas, deteksi error real-time, dan navigasi kode untuk PHP. Wajib untuk semua developer PHP.

📌 Tekan Ctrl+Shift+X → cari "PHP Intelephense" → klik Install.

3. Install Extension: PHP Namespace Resolver (opsional tapi berguna)

📦

PHP Namespace Resolver

oleh Mehedi Hassan

Auto-import class dan resolve namespace PHP — sangat membantu saat project mulai besar.

4. Cara Buka Terminal di VS Code

Tekan Ctrl + ` atau klik menu Terminal → New Terminal. Terminal muncul di bawah editor dan otomatis berada di folder project yang sedang dibuka.

② Install PHP dan Composer

Install PHP

CI4 membutuhkan PHP 7.4 ke atas (disarankan PHP 8.1+). Pilih instruksi sesuai OS:

Download dan install XAMPP dari apachefriends.org. XAMPP sudah include PHP — install seperti aplikasi biasa.

Setelah install, restart VS Code lalu cek di terminal: php -v

Cek dulu apakah PHP sudah ada:

php -v

Jika perlu terbaru: install Homebrew dari brew.sh lalu brew install php

sudo apt update
sudo apt install php php-cli php-mbstring php-xml php-intl php-curl php-zip

Install Composer

Download Composer-Setup.exe dari getcomposer.org → jalankan → ikuti installer. Akan otomatis mendeteksi PHP dari XAMPP.

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

Cek Instalasi

Buka terminal di VS Code (Ctrl+`) dan ketik:

php -v
composer -V

Keduanya harus menampilkan versi, bukan pesan error.

③ Buat Project CI4

Di terminal VS Code, pindah ke folder tempat mau simpan project:

cd Documents

Buat project CI4 baru:

composer create-project codeigniter4/appstarter belajar-ci

Composer akan mendownload semua file CI4. Tunggu sampai selesai (1–3 menit).

④ Buka Project di VS Code

cd belajar-ci
code .
cd belajar-ci — masuk ke folder project.
code . — buka folder ini di VS Code. VS Code terbuka dengan project di sidebar kiri.
⚠️ Kalau code . tidak bekerja di Mac:
Buka VS Code → Cmd+Shift+P → ketik "Shell Command" → pilih Install 'code' command in PATH.

Struktur folder CI4 yang terlihat di sidebar VS Code:

📁 BELAJAR-CI
└── 📁 app/
    ├── 📁 Controllers/   ← buat controller di sini
    ├── 📁 Models/        ← model database
    └── 📁 Views/         ← file HTML tampilan

Buka terminal VS Code dengan Ctrl+` — terminal langsung berada di folder project.

⑤ Jalankan Server

Di terminal VS Code:

php spark serve
Bedanya dengan Laravel:
Laravel pakai php artisan serve, CI4 pakai php spark serve. Spark adalah CLI (command line interface) bawaan CodeIgniter — fungsinya mirip Artisan di Laravel. Port CI4 default adalah 8080, bukan 8000.

Output yang muncul:

CodeIgniter v4.x.x Command Line Tool
Development server started on http://localhost:8080
Press Control-C to stop.
⚠️ Jangan tutup terminal ini!
Server berjalan selama terminal terbuka. Untuk membuka terminal baru di VS Code (sambil server tetap jalan), tekan Ctrl+Shift+` atau klik tombol + di panel terminal.

⑥ Buka di Browser

http://localhost:8080

Kamu akan melihat halaman selamat datang CodeIgniter 4. Berhasil!

⑦ Buat Controller Pertama

Di VS Code sidebar, buka folder app/Controllers/. Klik kanan → New File → beri nama Halo.php. Isi dengan:

<?php

namespace App\Controllers;

class Halo extends BaseController
{
    public function index(): string
    {
        return view('halo_view');
    }
}

Sekarang daftarkan route-nya. Buka file app/Config/Routes.php di VS Code. Cari baris yang ada $routes->get('/'... dan tambahkan route baru di bawahnya:

// Tambahkan ini:
$routes->get('/halo', 'Halo::index');

Simpan dengan Ctrl+S.

⑧ Buat View dan Tampilkan Data Dinamis

Di VS Code sidebar, buka folder app/Views/. Klik kanan → New File → beri nama halo_view.php. Isi dengan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pertamaku</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
        h1   { color: #0f766e; }
        p    { color: #475569; line-height: 1.7; }
    </style>
</head>
<body>
    <h1>Halo dari CodeIgniter 4!</h1>
    <p>Ini adalah halaman pertamaku yang dibuat dengan framework CI4.</p>
    <p>Selamat datang di dunia web development yang sesungguhnya!</p>
</body>
</html>

Buka http://localhost:8080/halo di browser — halaman tampil!

Kirim Data dari Controller ke View

Update controller app/Controllers/Halo.php:

<?php

namespace App\Controllers;

class Halo extends BaseController
{
    public function index(): string
    {
        $data = [
            'nama' => 'Budi Santoso',
            'kota' => 'Jakarta',
            'hobi' => ['Coding', 'Baca buku', 'Gaming'],
        ];

        return view('halo_view', $data);
    }
}

Update app/Views/halo_view.php untuk menampilkan data:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Profil <?= esc($nama) ?></title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
        h1   { color: #0f766e; }
        li   { line-height: 2; }
    </style>
</head>
<body>
    <h1>Halo, <?= esc($nama) ?>!</h1>
    <p>Kota asal: <?= esc($kota) ?></p>
    <h3>Hobi:</h3>
    <ul>
        <?php foreach ($hobi as $item): ?>
            <li><?= esc($item) ?></li>
        <?php endforeach; ?>
    </ul>
</body>
</html>
Catatan tentang CI4 vs Laravel dalam template:

CI4 menggunakan PHP murni di view — tidak ada "Blade" seperti Laravel. Fungsi esc() adalah fungsi CI4 untuk mengamankan output dari XSS (setara dengan {{ }} di Blade).

<?= esc($nama) ?> — tampilkan variabel dengan aman
<?php foreach ... endforeach ?> — PHP murni di template

Perbedaan CI4 vs Laravel Sekilas

Aspek CodeIgniter 4 Laravel
Jalankan serverphp spark servephp artisan serve
Default port80808000
Template enginePHP murniBlade
Folder Viewsapp/Views/resources/views/
CLI toolSparkArtisan

Langkah Selanjutnya

  1. Model & Database — sambungkan ke MySQL/SQLite
  2. Query Builder — cara CI4 mengambil data dari database
  3. Form & Validasi — terima dan validasi input dari user
  4. Session & Auth — sistem login
Kalau Ada Error 404 "The page you were looking for could not be found"

Kemungkinan besar nama route atau nama Controller/method tidak cocok. Cek kembali:
1. Apakah route sudah ditambahkan di app/Config/Routes.php?
2. Apakah nama file Controller sama dengan yang didaftarkan di route?
3. Apakah method index ada di dalam class Controller?