Skip to main content
Log in

Tutorial CodeIgniter 4: Extend, Section, EndSection, Include, dan RenderSection

    Muh.Taqiuddin.S
    By Muh.Taqiuddin.S

    💻 Materi CodeIgniter 4: Extend, Section, EndSection, Include, dan RenderSection

    Memahami cara kerja template view dan layout di CodeIgniter 4

    Dalam pengembangan web menggunakan CodeIgniter 4 (CI4), konsep template engine membantu kita membangun tampilan yang konsisten di setiap halaman. CI4 menyediakan mekanisme sederhana namun kuat melalui penggunaan: Extend, Section, EndSection, Include, dan RenderSection.

    Tujuan Pembelajaran:

    • Memahami konsep layout utama dan view turunan di CI4

    • Mengetahui fungsi extend, section, dan include

    • Mampu menerapkan layout dinamis dengan renderSection

    1️⃣ Extend — Menghubungkan View dengan Layout Utama

    Fungsi $this->extend('nama_layout') digunakan untuk menyatakan bahwa halaman tersebut mewarisi tampilan dari file layout utama. Biasanya layout utama berisi struktur HTML dasar seperti header, footer, dan menu navigasi.

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

    2️⃣ Section dan EndSection — Mendefinisikan Isi Konten

    Di dalam halaman turunan, kita mendefinisikan bagian konten yang akan ditempatkan pada area tertentu dari layout menggunakan:

    • $this->section('nama_bagian') → membuka blok konten
    • $this->endSection() → menutup blok konten
    <?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
  <h2>Selamat Datang di Dashboard</h2>
  <p>Ini adalah contoh halaman yang menggunakan layout utama.</p>
<?= $this->endSection() ?>

    3️⃣ RenderSection — Menampilkan Bagian dari Halaman Turunan

    Pada layout utama, gunakan renderSection('nama_bagian') untuk menampilkan konten dari halaman turunan yang menggunakan section tersebut.

    <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website - <?= $this->renderSection('title') ?></title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <?= $this->include('layout/navbar') ?>
    </header>

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

    <footer>
        <p>© 2025 Delta Marena</p>
    </footer>
</body>
</html>

    4️⃣ Include — Menyisipkan File View Lain

    Fungsi $this->include('path/nama_file') digunakan untuk memanggil potongan tampilan seperti navbar, sidebar, atau footer agar tidak ditulis berulang kali.

    <?= $this->include('layout/sidebar') ?>

    5️⃣ Contoh Struktur File View

    /app/Views/
│
├── layout/
│   ├── main.php          ← layout utama
│   ├── navbar.php        ← komponen navigasi
│   └── sidebar.php       ← komponen sidebar
│
└── pages/
    └── dashboard.php     ← halaman yang extend layout

    6️⃣ Contoh Layout dan Halaman Lengkap

    📄 layout/main.php
    <!DOCTYPE html>
<html>
<head>
  <title><?= $this->renderSection('title') ?></title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <?= $this->include('layout/navbar') ?>
  </header>

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

  <footer>
    <p>© 2025 Delta Marena</p>
  </footer>
</body>
</html>
    📄 pages/dashboard.php
    <?= $this->extend('layout/main') ?>

<?= $this->section('title') ?>Dashboard<?= $this->endSection() ?>

<?= $this->section('content') ?>
  <h2>Selamat Datang di Dashboard</h2>
  <p>Anda berhasil menggunakan Extend, Section, dan RenderSection dengan benar!</p>
<?= $this->endSection() ?>
    📄 layout/navbar.php
    <nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/dashboard">Dashboard</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

    Kesimpulan:

    Dengan memahami dan menggunakan Extend, Section, EndSection, Include, serta RenderSection, Anda dapat membangun sistem template di CodeIgniter 4 yang efisien, rapi, dan mudah dipelihara. Struktur ini juga memudahkan kolaborasi dalam tim dan mempercepat proses pengembangan tampilan web.