<![CDATA[Catatan Harian: Tutorial CodeIgniter 4: Extend, Section, EndSection, Include, dan RenderSection}]]> https://sharka.site/3blog/pages/view/61/tutorial-codeigniter-4-extend-section-endsection-include-dan-rendersection https://sharka.site/3blog/pages/view/61/tutorial-codeigniter-4-extend-section-endsection-include-dan-rendersection Wed, 22 Oct 2025 17:09:41 +0800 https://sharka.site/3blog/pages/view/61/tutorial-codeigniter-4-extend-section-endsection-include-dan-rendersection <![CDATA[Tutorial CodeIgniter 4: Extend, Section, EndSection, Include, dan RenderSection]]>

💻 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.

]]> Muh.Taqiuddin.S