Cara Templating View pada CodeIgniter 4

Juli 9, 2025

Hai, Sobat Jagoan! Setelah kamu memahami konsep dasar routing, view, dan controller di CodeIgniter 4 pada artikel Tutorial Routing dan View pada CodeIgniter 4 dan Membuat Controller dan View Dinamis pada CodeIgniter 4, berikutnya kamu bisa mengikuti artikel ini untuk mempelajari cara templating view.

Dengan sistem ini, kamu bisa membuat satu layout utama yang berisi partial halaman header, navbar, dan footer lalu menampilkan konten yang berbeda-beda di bagian tengah halaman. Sehingga kamu tidak perlu menulis ulang struktur HTML atau navbar di setiap halaman konten.

Simak langsung caranya di bawah ini, Sob!

View Layouts CodeIgniter 4

CI4 menyediakan sistem templating layout yang sederhana dan fleksibel yang memungkinkan kamu menggunakan satu atau beberapa layout dasar untuk membangun aplikasi.

Layout adalah view biasa yang hanya mendefinisikan struktur global berisi placeholder seperti:

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

Placeholder ini menunjukkan bagian konten yang akan diisi oleh view spesifik halaman.

Di view halaman, kamu mengextend layout dengan:

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

<?= $this->section('content') ?>
  <!-- konten halaman -->
<?= $this->endSection() ?>

Fungsi-Fungsi Untuk Membuat View Layouting CodeIgniter 4

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

Fungsi di atas digunakan untuk menghubungkan view dengan layout utama (biasanya bernama main.php). Artinya, view tersebut menginduk ke layout main, dan hanya akan menampilkan bagian yang didefinisikan di dalam layout tersebut.

				
					<?= $this->section('content') ?>

Digunakan untuk menandai awal blok konten yang akan ditampilkan ke dalam layout. Bagian ini akan di-render dan ditampilkan di posisi yang ditentukan oleh renderSection(‘content’) pada layout utama.

				
					<?= $this->endSection() ?>

Ini menutup blok section() yang telah dibuka sebelumnya. Semua isi di antara section() dan endSection() akan dianggap sebagai konten utama halaman yang akan dimasukkan ke layout.

				
					renderSection('content')

Di file layout utama (main.php), kamu hanya perlu menyisipkan kode di atasuntuk menentukan di mana konten dari setiap halaman akan ditempatkan.

Artinya: Sisipkan bagian konten dari view yang menginduk ke layout ini, tepat di sini. Ini membuat layout bersifat dinamis dan fleksibel, karena hanya bagian section(‘content’) yang berubah tergantung halaman.

Kalau kamu ingin memanggil bagian layout yang berulang seperti header, navbar, atau footer, kamu bisa menggunakan:

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

Penjelasan:

include() digunakan untuk menyisipkan view kecil (partial) ke dalam layout atau halaman lainnya.
Biasanya digunakan untuk komponen yang selalu sama di banyak halaman seperti header, sidebar, dan footer.

Artikel ini akan mencontohkan menerapkan teknik templating view menggunakan satu layout utama yang menampilkan halaman konten yang berbeda. Sebagai gambaran, kita akan membuat view dengan struktur folder sebagai berikut. Kamu bisa pakai struktur ini untuk membuat dan menempatkan file dan foldernya.

app/
├── Controllers/
│ └── Page.php
├── Views/
│ ├── layout/
│ │ ├── view_main.php → Layout utama
│ │ ├── header.php → Header/navbar
│ │ └── footer.php → Footer
│ ├── pages/
│ │ ├── view_home.php
│ │ ├── view_about.php
│ │ ├── view_contact.php
│ │ └── view_profile.php

STEP 1: Buat file header.php untuk menampilkan navbar aplikasi di dalam app/Views/layout/

</button>

<li class=”nav-item”><a class=”nav-link” href=”/about”>About</a></li>

<li class=”nav-item”><a class=”nav-link” href=”/contact”>Contact</a></li>

<li class=”nav-item”><a class=”nav-link” href=”/profile”>Profile</a></li>

</ul>

</div>

</nav>

STEP 2: Kemudian, buat bagian footernya dengan nama footer.php di dalam folder yang sama dengan header.

</div>

</footer>

STEP 3: Masih di dalam folder yang sama, buat layout utama dengan nama view_main.php. Di dalam layout ini, akan menyisipkan header, footer, dan bagian konten utama yang dinamis melalui renderSection(‘content’).

<!DOCTYPE html>

<html>

<head>

</head>

<?= $this->include(‘layout/header’) ?>

<?= $this->renderSection(‘content’) ?>

</main>

<?= $this->include(‘layout/footer’) ?>

</body>

</html>

STEP 4: Selanjutnya, buat view konten halaman yang terdiri dari view_home.php, view_contact.php, view_about.php, dan view_profile.php di dalam folder app/Views/pages/

<?= $this->extend(‘layout/view_main’) ?>

<?= $this->section(‘content’) ?>

<h1>Selamat Datang</h1>

<p>Ini adalah halaman Home.</p>

<?= $this->endSection() ?>

Silahkan, duplikasi struktur sintaks kode yang sama untuk halaman view_about, view_contact, dan view_profile. Ubah ini kontennya sesuai halaman.

STEP 5: Setelah membuat halaman view, selanjutnya yaitu membuat controller Page.php di dalam app/Controllers/

				
					<?php

namespace App\Controllers;

class Page extends BaseController
{
    public function home()
    {
        return view('pages/view_home', ['title' => 'Home']);
    }

    public function about()
    {
        return view('pages/view_about', ['title' => 'About']);
    }

    public function contact()
    {
        return view('pages/view_contact', ['title' => 'Contact']);
    }

    public function profile()
    {
        return view('pages/view_profile', ['title' => 'Profile']);
    }
}

STEP 6: Lalu atur routing untuk setiap view di dalam app/Config/Routes.php

				
					$routes->get('/home', 'Page::home');
$routes->get('/about', 'Page::about');
$routes->get('/contact', 'Page::contact');
$routes->get('/profile', 'Page::profile');

STEP 7: Jalankan server CodeIgniter lalu buka di browser halaman:

http://localhost:8080/home untuk menampilkan halaman home
http://localhost:8080/about untuk menampilkan halaman about
http://localhost:8080/contact untuk menampilkan halaman contact
http://localhost:8080/profile untuk menampilkan halaman profile

Dengan cara ini, kamu bisa membuat banyak halaman yang konsisten tampilannya tanpa harus menulis ulang struktur HTML berulang-ulang. Teknik ini memungkinkan kamu menulis kode yang bisa digunakan ulang (reusable), memisahkan komponen yang bersifat tetap seperti header/footer, dan fokus hanya pada isi kontennya. Di artikel selanjutnya, kita akan lanjut mempelajari cara menghubungkan aplikasi dengan database menggunakan Model di CodeIgniter 4. Sampai jumpa di tutorial selanjutnya, Sob!

Kalau ada yang masih bikin bingung, jangan ragu hubungi Tim Support Jagoan Hosting ya, Sob!