Membuat Template Reusable di CodeIgniter dengan View Layouts

Pada saat mengembangkan aplikasi web menggunakan CodeIgniter 4, efisiensi dan konsistensi tampilan menjadi hal yang sangat penting 🎨. Salah satu fitur yang membantu hal ini adalah penggunaan View Layouts, yang memungkinkan kamu membuat template reusable agar tampilan halaman tetap seragam tanpa harus menulis ulang kode HTML berulang kali.

Dengan pendekatan layout, kamu dapat mengatur struktur dasar website — seperti header, sidebar, dan footer — dalam satu file induk, sementara konten dinamis dimasukkan ke dalam area tertentu menggunakan konsep section.

Pada artikel ini, kita akan membahas cara membuat template layout di CodeIgniter dari nol, lengkap dengan contoh implementasi dan tips pengembangannya.

1. Konsep View Layout di CodeIgniter

Apa Itu Layout?

Layout dalam CodeIgniter berfungsi sebagai template master yang digunakan untuk membungkus konten dari view lain. Dengan begitu, kita tidak perlu menulis ulang HTML dasar seperti navbar, header, atau footer di setiap halaman 🔁.

Contoh sederhananya seperti berikut:

<?= $this->extend('layouts/main'); ?>
<?= $this->section('content'); ?>
<h1>Selamat Datang di Halaman Dashboard</h1>
<?= $this->endSection(); ?>

Pada contoh di atas, view akan mengambil struktur dari file layout layouts/main.php dan menempatkan konten ke dalam section yang sudah disediakan.

2. Membuat Struktur Folder Layout

Organisasi Folder yang Efisien

Struktur folder yang rapi membantu dalam manajemen view. Berikut rekomendasinya:

Folder	Deskripsi
app/Views/layouts	Menyimpan file layout utama seperti header, footer, dan sidebar
app/Views/pages	Berisi konten halaman (dashboard, produk, laporan, dsb.)
app/Views/partials	Untuk potongan kode kecil seperti navbar atau alert

Dengan pembagian ini, project menjadi lebih modular dan mudah dikelola 🧩.

3. Membuat File Layout Utama

Struktur HTML Dasar

Buat file baru bernama app/Views/layouts/main.php dan isi dengan struktur HTML seperti berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toko Online - <?= $this->renderSection('title') ?></title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <?= $this->include('partials/navbar'); ?>
  <main>
    <?= $this->renderSection('content'); ?>
  </main>
  <footer>
    <p>&copy; 2025 CodeIgniter Project</p>
  </footer>
</body>
</html>

Perhatikan bahwa terdapat dua fungsi penting di sini:

$this->renderSection('title') → digunakan untuk menampilkan judul dinamis halaman.
$this->renderSection('content') → area untuk memasukkan konten utama halaman.

Template ini akan menjadi kerangka utama bagi semua halaman aplikasi 💻.

4. Membuat Partial Navbar

Potongan View Reusable

Buat file app/Views/partials/navbar.php dengan isi seperti berikut:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/produk">Produk</a></li>
    <li><a href="/laporan">Laporan</a></li>
  </ul>
</nav>

Partial ini akan otomatis dimasukkan ke setiap halaman yang menggunakan layout utama 🧭.

5. Membuat View Halaman yang Menggunakan Layout

Contoh View Dashboard

Buat file baru app/Views/pages/dashboard.php dengan isi sebagai berikut:

<?= $this->extend('layouts/main'); ?>
<?= $this->section('title'); ?>Dashboard<?= $this->endSection(); ?>

<?= $this->section('content'); ?>
<h1>Selamat Datang di Dashboard 👋</h1>
<p>Gunakan menu di atas untuk mengelola produk, pesanan, dan laporan penjualan.</p>
<?= $this->endSection(); ?>

Dengan pendekatan ini, layout utama otomatis membungkus konten dashboard tanpa perlu menulis ulang HTML dasar 📦.

6. Menggunakan Layout di Controller

Contoh Controller

Buat controller Dashboard.php di folder app/Controllers:

<?php
namespace App\Controllers;

class Dashboard extends BaseController {
  public function index() {
    return view('pages/dashboard');
  }
}
?>

Ketika kamu membuka http://localhost:8080/dashboard, sistem akan otomatis memuat layout utama dan menampilkan konten dari view dashboard 🖥️.

7. Menambahkan Section Tambahan

Section untuk Script atau CSS Khusus

Kadang kamu ingin menambahkan JavaScript atau CSS tertentu hanya di halaman tertentu. CodeIgniter menyediakan $this->section() tambahan seperti berikut:

<?= $this->section('script'); ?>
<script>
  console.log('Dashboard Loaded!');
</script>
<?= $this->endSection(); ?>

Kemudian di layout utama tambahkan:

<?= $this->renderSection('script'); ?>

Dengan cara ini, layout tetap reusable dan fleksibel untuk semua halaman 🚀.

8. Tips Reusable Layout

Best Practice

Gunakan folder partials untuk potongan kecil (navbar, alert, modal).
Gunakan layouts hanya untuk struktur utama.
Gunakan renderSection() secara konsisten untuk area dinamis.
Gunakan helper view_cell() untuk widget dinamis seperti notifikasi 🔔.

9. Manfaat View Layouts

Keuntungan Utama

Fitur	Manfaat
Efisiensi	Menghemat waktu dalam pengembangan halaman baru ⏳
Konsistensi	Tampilan antarhalaman tetap seragam 🎯
Reusability	Satu layout dapat digunakan oleh banyak view ♻️

10. FAQ (Pertanyaan Umum)

Apakah View Layout hanya untuk CodeIgniter 4? Ya, fitur ini diperkenalkan di versi 4.
Bisa pakai layout berbeda? Bisa, tiap halaman bisa extend layout berbeda.
Apakah layout bisa bersarang? Ya, layout bisa include layout lain.
Apakah bisa dipakai di module HMVC? Bisa, cukup atur path view-nya.
Bagaimana cara passing data ke layout? Sama seperti view biasa lewat array.
Bisa pakai template engine lain? Bisa, seperti Twig atau Blade.
Apakah bisa render section dinamis? Bisa, pakai kondisi isset().
Bisa pakai partial berbeda di halaman tertentu? Bisa, include sesuai kebutuhan.
Apakah perlu helper khusus? Tidak, bawaan CodeIgniter sudah cukup.
Bisa include file JS atau CSS eksternal? Ya, cukup tambahkan di head layout.
Bisa tambah sidebar dinamis? Bisa, pakai view_cell().
Bisa dipakai untuk API? Tidak disarankan, layout untuk tampilan HTML.
Bisa dipakai untuk dashboard admin? Sangat cocok! 🧠

Kesimpulan

Dengan menggunakan View Layouts di CodeIgniter, kamu bisa membuat struktur halaman yang konsisten, efisien, dan mudah dikelola. Template reusable ini sangat berguna untuk proyek besar seperti sistem manajemen toko online, portal berita, atau dashboard admin ⚙️.

Pendekatan layout tidak hanya meningkatkan produktivitas, tetapi juga membuat kode lebih bersih dan terstruktur.