MWI – Halo sobat pembelajar MuSa, piye kabare… Yuk lanjut belajar. Kali ini kita akan membahas tentang Layout utama SIPUS.

Membuat Layout Utama SIPUS dengan CodeIgniter 4: Navbar, Sidebar, dan Main Layout

Pada tutorial sebelumnya, kita telah menyelesaikan CRUD Kategori dan mulai membangun CRUD Buku pada aplikasi SIPUS (Sistem Informasi Perpustakaan Sekolah). Agar aplikasi terlihat lebih rapi dan memiliki tampilan yang konsisten, langkah berikutnya adalah membuat layout utama menggunakan CodeIgniter 4 dan Bootstrap 5.

Dalam aplikasi web, setiap halaman biasanya memiliki bagian yang sama, seperti navbar, sidebar, dan footer. Jika seluruh bagian tersebut tertulis berulang kali pada setiap halaman, kode akan menjadi panjang dan sulit kita pelihara.

CodeIgniter 4 menyediakan fitur View Layout yang memungkinkan kita membuat satu kerangka halaman, kemudian menggunakannya kembali pada berbagai halaman aplikasi.

Pada materi ini, kita akan membuat tiga file layout:

• main.php sebagai kerangka utama halaman.
• navbar.php sebagai navigasi bagian atas.
• sidebar.php sebagai navigasi bagian samping.

Tutorial ini cocok untuk pemula yang sudah memahami dasar PHP, konsep MVC, dan pembuatan CRUD sederhana menggunakan CodeIgniter 4.

1. Apa Itu Layout dalam CodeIgniter 4?

Layout adalah kerangka tampilan yang kita gunakan bersama oleh beberapa halaman aplikasi.

Sebagai contoh, halaman Data Kategori dan Data Buku memiliki bagian yang hampir sama:

• Navbar di bagian atas.
• Sidebar di bagian kiri.
• Area konten utama.
• Footer di bagian bawah.

Perbedaannya hanya terletak pada isi konten. Halaman kategori menampilkan tabel kategori, sedangkan halaman buku menampilkan tabel buku.

Dengan menggunakan layout, kita cukup membuat kerangka halaman satu kali. Setiap halaman berikutnya hanya perlu mengisi bagian konten yang sudah kita sediakan.

Manfaat menggunakan layout:

1. Menghindari penulisan HTML yang berulang.
2. Mempermudah pemeliharaan tampilan aplikasi.
3. Membuat desain ant halaman lebih konsisten.
4. Mempermudah pengembangan modul baru.
5. Membantu memisahkan tampilan umum dan isi halaman.

2. Menyiapkan Struktur Folder Layout

Pertama, buka proyek SIPUS yang sudah kita buat menggunakan CodeIgniter 4.

Masuk ke folder app/Views/, kemudian buat folder baru bernama layouts.

Struktur foldernya menjadi seperti berikut:

app/
└── Views/
    ├── layouts/
    │   ├── main.php
    │   ├── navbar.php
    │   └── sidebar.php
    │
    ├── categories/
    │   ├── index.php
    │   └── form.php
    │
    └── books/
        ├── index.php
        └── form.php

Keterangan:

File	Fungsi
main.php	Kerangka HTML utama dan pemanggil komponen layout
navbar.php	Menampilkan navigasi bagian atas
sidebar.php	Menampilkan menu di bagian samping
categories/index.php	Menampilkan daftar kategori
books/index.php	Menampilkan daftar buku

3. Membuat Main Layout

File pertama yang dibuat adalah main.php.

File ini menjadi kerangka utama seluruh halaman SIPUS. Di dalamnya terdapat deklarasi HTML, pemanggilan Bootstrap, navbar, sidebar, area konten, dan footer.

Buat file:

app/Views/layouts/main.php

Isi dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= esc($title ?? 'SIPUS - Sistem Informasi Perpustakaan') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        body {
            background-color: #f4f6f9;
        }
        .sipus-sidebar {
            width: 250px;
            min-width: 250px;
            background-color: #ffffff;
            border-right: 1px solid #dee2e6;
        }
        .sipus-content {
            min-width: 0;
        }
        .sipus-sidebar .nav-link {
            color: #495057;
            padding: 10px 14px;
            border-radius: 8px;
            margin-bottom: 4px;
        }
        .sipus-sidebar .nav-link:hover {
            background-color: #f0f4ff;
            color: #0d6efd;
        }
        .sipus-sidebar .nav-link.active {
            background-color: #0d6efd;
            color: #ffffff;
        }
        .sipus-brand {
            font-weight: 700;
            letter-spacing: 1px;
        }
        @media (max-width: 767.98px) {
            .sipus-sidebar {
                width: 100%;
                min-width: 100%;
                border-right: 0;
                border-bottom: 1px solid #dee2e6;
            }
        }
    </style>
    <?= $this->renderSection('styles') ?>
</head>
<body>
    <?= $this->include('layouts/navbar') ?>
    <div class="d-flex flex-column flex-md-row min-vh-100">
        <?= $this->include('layouts/sidebar') ?>
        <main class="sipus-content flex-grow-1 p-3 p-lg-4">
            <?= $this->renderSection('content') ?>
        </main>
    </div>
    <footer class="bg-white border-top py-3 px-4 text-center text-muted">
        <small>
            &copy; <?= date('Y') ?> SIPUS —
            Sistem Informasi Perpustakaan Sekolah
        </small>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <?= $this->renderSection('scripts') ?>
</body>
</html>

Memahami kode main.php

Ada beberapa bagian penting yang perlu kita pahami.

a. Memanggil navbar

<?= $this->include('layouts/navbar') ?>

Kode tersebut digunakan untuk memasukkan file navbar.php ke dalam halaman utama.

b. Memanggil sidebar

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

Kode ini memasukkan komponen sidebar.

c. Menampilkan konten halaman

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

Bagian ini merupakan tempat untuk menampilkan isi halaman yang menggunakan layout.

d. Menyediakan section tambahan

<?= $this->renderSection('styles') ?>
<?= $this->renderSection('scripts') ?>

Kedua bagian tersebut memungkinkan halaman tertentu menambahkan CSS atau JavaScript sendiri tanpa harus mengubah main.php.

4. Membuat Navbar SIPUS

Navbar merupakan navigasi yang berada di bagian atas aplikasi. Pada SIPUS, navbar kita gunakan untuk menampilkan identitas aplikasi dan beberapa tautan navigasi.

Buat file:

app/Views/layouts/navbar.php

Isi dengan kode berikut:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand sipus-brand"
           href="<?= site_url('/') ?>">
            SIPUS
        </a>
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#sipusNavbar"
                aria-controls="sipusNavbar"
                aria-expanded="false"
                aria-label="Buka navigasi">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="sipusNavbar">
            <div class="navbar-nav ms-auto">
                <a class="nav-link"
                   href="<?= site_url('categories') ?>">
                    Kategori
                </a>
                <a class="nav-link"
                   href="<?= site_url('books') ?>">
                    Data Buku
                </a>
            </div>
        </div>
    </div>
</nav>

Pada navbar tersebut terdapat beberapa komponen:

• navbar: membuat komponen navigasi Bootstrap.
• navbar-dark: menggunakan warna teks terang.
• bg-primary: memberikan warna latar biru.
• navbar-expand-lg: mengatur perilaku navbar pada layar besar dan kecil.
• site_url(): menghasilkan URL berdasarkan konfigurasi aplikasi CodeIgniter.

Dengan cara ini, navbar dapat kita gunakan kembali pada semua halaman SIPUS.

5. Membuat Sidebar SIPUS

Sidebar merupakan menu navigasi yang berada di bagian samping aplikasi.

Menu sidebar SIPUS kita siapkan untuk beberapa modul, yaitu:

• Dashboard.
• Data Kategori.
• Data Buku.
• Data Anggota.
• Peminjaman.
• Pengembalian.
• Laporan.

Buat file:

app/Views/layouts/sidebar.php

Isi dengan kode berikut:

<?php
$currentSegment = service('uri')->getSegment(1);
?>
<aside class="sipus-sidebar p-3">
    <div class="mb-3">
        <div class="fw-bold">Menu Utama</div>
        <small class="text-muted">Sistem Perpustakaan</small>
    </div>
    <nav class="nav flex-column">
        <a href="<?= site_url('/') ?>"
           class="nav-link <?= $currentSegment === '' ? 'active' : '' ?>">
            <span class="me-2">⌂</span>
            Dashboard
        </a>
        <a href="<?= site_url('categories') ?>"
           class="nav-link <?= $currentSegment === 'categories' ? 'active' : '' ?>">
            <span class="me-2">▤</span>
            Data Kategori
        </a>
        <a href="<?= site_url('books') ?>"
           class="nav-link <?= $currentSegment === 'books' ? 'active' : '' ?>">
            <span class="me-2">▣</span>
            Data Buku
        </a>
        <a href="<?= site_url('members') ?>"
           class="nav-link <?= $currentSegment === 'members' ? 'active' : '' ?>">
            <span class="me-2">♙</span>
            Data Anggota
        </a>
        <hr>
        <div class="text-uppercase text-muted small fw-bold mb-2">
            Transaksi
        </div>
        <a href="<?= site_url('loans') ?>"
           class="nav-link <?= $currentSegment === 'loans' ? 'active' : '' ?>">
            <span class="me-2">⇄</span>
            Peminjaman
        </a>
        <a href="<?= site_url('returns') ?>"
           class="nav-link <?= $currentSegment === 'returns' ? 'active' : '' ?>">
            <span class="me-2">↩</span>
            Pengembalian
        </a>
        <hr>
        <div class="text-uppercase text-muted small fw-bold mb-2">
            Laporan
        </div>
        <a href="<?= site_url('reports') ?>"
           class="nav-link <?= $currentSegment === 'reports' ? 'active' : '' ?>">
            <span class="me-2">▥</span>
            Laporan Perpustakaan
        </a>
    </nav>
</aside>

Memahami menu aktif

Perhatikan kode berikut:

$currentSegment = service('uri')->getSegment(1);

Kode tersebut mengambil segmen pertama dari URL.

Contohnya:

URL	Segmen pertama
/categories	categories
/categories/edit/1	categories
/books	books
/books/edit/2	books

Kemudian, kelas active diberikan pada menu yang sesuai dengan URL yang sedang dibuka.

Dengan demikian, pengguna dapat mengetahui posisi halaman yang sedang kita akses.

Catatan: Menu Anggota, Peminjaman, Pengembalian, dan Laporan merupakan persiapan navigasi. Tautan tersebut akan berfungsi setelah modul dan rute terkait kita buat.

6. Menggunakan Layout pada Halaman Kategori

Setelah ketiga file layout selesai, kita perlu mengubah halaman Kategori agar menggunakan kerangka utama.

Buka file:

app/Views/categories/index.php

Hapus deklarasi HTML lengkap yang sebelumnya terdapat pada file tersebut. Kemudian gunakan struktur berikut:

<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Data Kategori Buku</h1>
        <p class="text-muted mb-0">
            Kelola kategori koleksi perpustakaan.
        </p>
    </div>
    <a href="<?= site_url('categories/new') ?>"
       class="btn btn-primary">
        + Tambah Kategori
    </a>
</div>
<?php if ($message = session()->getFlashdata('success')): ?>
    <div class="alert alert-success">
        <?= esc($message) ?>
    </div>
<?php endif ?>
<?php if ($message = session()->getFlashdata('error')): ?>
    <div class="alert alert-danger">
        <?= esc($message) ?>
    </div>
<?php endif ?>
<div class="card border-0 shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped align-middle mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>No.</th>
                        <th>Nama Kategori</th>
                        <th>Deskripsi</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                <?php if (empty($categories)): ?>
                    <tr>
                        <td colspan="4" class="text-center">
                            Belum ada data kategori.
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($categories as $i => $category): ?>
                        <tr>
                            <td><?= $i + 1 ?></td>
                            <td><?= esc($category['name']) ?></td>
                            <td><?= esc($category['description'] ?? '') ?></td>
                            <td>
                                <a class="btn btn-sm btn-warning"
                                   href="<?= site_url('categories/edit/' . $category['id']) ?>">
                                    Edit
                                </a>
                                <form class="d-inline" method="post"
                                      action="<?= site_url('categories/delete/' . $category['id']) ?>"
                                      onsubmit="return confirm('Hapus kategori ini?')">
                                    <?= csrf_field() ?>
                                    <button class="btn btn-sm btn-danger" type="submit">
                                        Hapus
                                    </button>
                                </form>
                            </td>
                        </tr>
                    <?php endforeach ?>
                <?php endif ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?= $this->endSection() ?>

Ada dua perintah penting yang kita gunakan.

Pertama, extend():

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

Perintah ini menyatakan bahwa halaman kategori menggunakan layouts/main.php sebagai layout induk.

Kedua, section():

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

Perintah tersebut menentukan bagian konten yang akan dimasukkan ke dalam renderSection('content') pada file main.php.

7. Menggunakan Layout pada Halaman Buku

Konsep yang sama kita terapkan pada halaman Buku.

Buka:

app/Views/books/index.php

Pada bagian paling atas tambahkan:

<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

Kemudian letakkan isi halaman daftar buku di antara kedua bagian tersebut.

Pada bagian paling bawah tambahkan:

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

Lakukan hal yang sama pada file:

• app/Views/books/form.php
• app/Views/categories/form.php

Dengan demikian, seluruh halaman SIPUS menggunakan navbar, sidebar, dan kerangka utama yang sama.

8. Menguji Layout SIPUS

Setelah seluruh file yang selesai kita buat, jalankan server CodeIgniter:

php spark serve

Kemudian buka halaman berikut melalui browser:

Halaman	URL
Daftar Kategori	http://localhost:8080/categories
Tambah Kategori	http://localhost:8080/categories/new
Daftar Buku	http://localhost:8080/books
Tambah Buku	http://localhost:8080/books/new

Pastikan setiap halaman menampilkan navbar dan sidebar yang sama, sementara bagian kontennya menyesuaikan halaman yang kita buka.

Periksa juga tampilan pada layar ponsel dan desktop untuk memastikan layout responsif.

9. Kesimpulan

Penggunaan layout merupakan salah satu teknik penting dalam pengembangan aplikasi web menggunakan CodeIgniter 4.

Dengan memisahkan main.php, navbar.php, dan sidebar.php, kita dapat membangun tampilan aplikasi yang lebih terstruktur, konsisten, dan mudah dikembangkan.

Pada proyek SIPUS, layout ini menjadi dasar untuk mengembangkan modul berikutnya, seperti Data Anggota, Peminjaman, Pengembalian, dan Laporan.

Setelah memahami materi ini, pembaca kita harapkan mampu:

1. Menjelaskan fungsi layout dalam CodeIgniter 4.
2. Membuat layout utama menggunakan View.
3. Menggunakan include() untuk memanggil komponen tampilan.
4. Menggunakan extend() dan section() untuk menyusun halaman.
5. Menerapkan layout bersama pada beberapa halaman CRUD.

Materi selanjutnya: Membuat modul CRUD Data Buku.

---

Latihan Mandiri

Untuk menguji pemahaman, kerjakan latihan berikut:

1. Tambahkan menu baru bernama Data Rak pada sidebar.
2. Buat halaman sederhana yang menggunakan layouts/main.php.
3. Ubah judul halaman menggunakan variabel $title.
4. Tambahkan CSS khusus halaman melalui section styles.
5. Coba tampilkan menu aktif ketika membuka halaman Buku dan Kategori.

Dengan latihan tersebut, siswa tidak hanya memahami cara membuat layout, tetapi juga belajar bagaimana mengembangkan tampilan aplikasi secara modular. (ms)