Teknologi

Belajar CodeIgniter 4 untuk Pemula: Dari Nol ke Browser

Panduan CodeIgniter 4 untuk pemula absolut. Setup VS Code + PHP Intelephense, install CI4, jalankan server dengan php spark, buat controller dan view pertama — semua dijelaskan langkah demi langkah.

A

Admin DebugGo

09 March 2026 · 8 menit baca

Belajar CodeIgniter 4 untuk Pemula: Dari Nol ke Browser

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
Model	`app/Models/`	Ambil & simpan data ke database
View	`app/Views/`	File HTML yang dilihat user
Controller	`app/Controllers/`	Terima request, proses, kirim ke View

📋 Progress Belajarmu

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

① Setup VS Code + install extension PHP Intelephense ② Install PHP + Composer ③ Buat project CI4 baru ④ Buka project di VS Code (code .) ⑤ Jalankan server (php spark serve) ⑥ Buka http://localhost:8080 dan melihat halaman CI4 ⑦ Buat Controller pertama ⑧ Buat View dan tampilkan data dinamis

① 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 server	`php spark serve`	`php artisan serve`
Default port	8080	8000
Template engine	PHP murni	Blade
Folder Views	`app/Views/`	`resources/views/`
CLI tool	Spark	Artisan

Langkah Selanjutnya

Model & Database — sambungkan ke MySQL/SQLite
Query Builder — cara CI4 mengambil data dari database
Form & Validasi — terima dan validasi input dari user
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?

CodeIgniter 4 (CI4) is a lightweight, fast, and easy-to-learn PHP framework. If you are just starting to learn PHP framework, CI4 is a good choice because the structure is straightforward. At the end of this article, you will have the first web page running in a browser — done in VS Code.

How is CI4 Different from Regular PHP?

Regular PHP is like cooking from raw materials — all by yourself. CI4 is like cooking with prepared instant spices: routing, security, database connection — it already exists, just use it.

CI4 using MVC pattern:

Department	Folder	Its job
Model	app/Models/	Fetch & save data to database
View	app/Views/	HTML files the user sees
Controller	app/controllers/	Accept request, process, send to View

Your Learning 📋 Progress

Check off each completed step. Progress is auto-saved in the browser!

① Setup VS Code + install extension PHP Intelephense ② Install PHP + Composer ③ Buat project CI4 baru ④ Buka project di VS Code (code .) ⑤ Jalankan server (php spark serve) ⑥ Buka http://localhost:8080 dan melihat halaman CI4 ⑦ Buat Controller pertama ⑧ Buat View dan tampilkan data dinamis

① Setup VS Code

VS Code is a free code editor from Microsoft used by professional developers around the world. We'll use VS Code as a work hub — write code, terminals, and navigate files all in one place.

Setup VS Code steps:

1. Install VS Code

Download from code.visualstudio.com → select according to OS → install like a regular application.

2. Install Extension: PHP Intelephense

🐘

PHP Intelephense

by Ben Mewburn · 30 million+ installs

Intelligent autocomplete, real-time error detection, and code navigation for PHP. Mandatory for all PHP developers.

📌 Press Ctrl+Shift+X → search "PHP Intelephense" → click Install.

3. Install Extension: PHP Namespace Resolver (optional but useful)

📦

PHP Namespace Resolver

by Mehedi Hassan

Auto-import class and resolve PHP namespaces — very helpful when the project starts big.

4. How to Open a Terminal in VS Code

Press Ctrl + ` or click the Terminal → New Terminal menu. The terminal appears below the editor and automatically resides in the currently opened project folder.

② Install PHP and Composer

Install PHP

CI4 requires PHP 7.4 and above (PHP 8.1+ recommended). Select instruction according to OS:

Download and install XAMPP from apachefriends.org. XAMPP already includes PHP-install like a regular application.

After install, restart VS Code then check in the terminal: php-v

Check if PHP already exists:

php -v

If you need the latest: install Homebrew from brew.sh then 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 from getcomposer.org → run → follow the installer. Will automatically detect PHP from 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

Check Installation

Open the terminal in VS Code (Ctrl +') and type:

php -v

composer -V

Both should display a version, not an error message.

③ Create Project CI4

In the VS Code terminal, move to the folder where you want to save the project:

cd Documents

Create a new CI4 project:

composer create-project codeigniter4/appstarter belajar-ci

Composer will download all CI4 files. Wait for it to finish (1-3 minutes).

④ Open Project in 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.

CI4 folder structure visible in the VS Code sidebar:

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

Open the VS Code terminal with Ctrl+ '— the terminal is directly in the project folder.

Run Server

In the VS Code terminal:

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.

Outputs appearing:

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.

⑥ Open in Browser

http://localhost:8080

You will see the CodeIgniter 4 welcome page. Success!

Create the First Controller

In the VS Code sidebar, open the app/Controllers/folder. Right-click the → New File and → name it Halo.php. Fill it with:

<?php

namespace App\Controllers;

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

Now register the route. Open the app/Config/Routes.php file in VS Code. Find the existing line $routes- >get ('/'... and add a new route below it:

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

Save with Ctrl+S.

Create View and Display Dynamic Data

In the VS Code sidebar, open the app/Views/folder. Right-click the → New File → named hello_view.php. Fill it with:

<!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>

Go to http://localhost:8080/hello in the browser — the page appears!

Send Data from Controller to 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 to display 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

CI4 vs Laravel Differences at a Glance

Aspect	CodeIgniter 4	Laravel
Run server	php spark serve	php artisan serve
Default port	8080	8000
Template engine	Pure PHP	Blade
Views Folder	app/Views/	resources/views/
CLI tool	Spark	Artisan

Next Steps

Models & Databases — connect to MySQL/SQLite
Query Builder — how CI4 retrieves data from database
Form & Validation — receive and validate input from users
Session & Auth — login system

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?

Siap Mulai Karir IT-mu?

Bergabung dengan ribuan alumni DebugGo yang sudah berhasil masuk industri teknologi.

Lihat Kelas DebugGo

Komentar 0

Tulis komentar

Nama *

Email (opsional)

Website / Sosmed (opsional) Link boleh diisi asal bukan konten judi atau dewasa.

Komentar * Maks. 2000 karakter. Dilarang mengandung konten judi, pornografi, atau spam.

Verifikasi: 11 + 5 = ?

Belum ada komentar. Jadilah yang pertama!

Belajar CodeIgniter 4 untuk Pemula: Dari Nol ke Browser

Apa Bedanya CI4 dengan PHP Biasa?

📋 Progress Belajarmu

① Setup VS Code

② Install PHP dan Composer

Install PHP

Install Composer

Cek Instalasi

③ Buat Project CI4

④ Buka Project di VS Code

⑤ Jalankan Server

⑥ Buka di Browser

⑦ Buat Controller Pertama

⑧ Buat View dan Tampilkan Data Dinamis

Kirim Data dari Controller ke View

Perbedaan CI4 vs Laravel Sekilas

Langkah Selanjutnya

How is CI4 Different from Regular PHP?

Your Learning 📋 Progress

① Setup VS Code

② Install PHP and Composer

Install PHP

Install Composer

Check Installation

③ Create Project CI4

④ Open Project in VS Code

 Run Server

⑥ Open in Browser

 Create the First Controller

 Create View and Display Dynamic Data

Send Data from Controller to View

CI4 vs Laravel Differences at a Glance

Next Steps

Siap Mulai Karir IT-mu?

Komentar 0

Run Server

Create the First Controller

Create View and Display Dynamic Data