BAB 10 – Template & Layout: Membuat Tampilan Rapi di CodeIgniter

BAB 10 – Template & Layout: Membuat Tampilan Rapi di CodeIgniter

Setelah memahami Controller, View, Model, CRUD, dan Validasi, saatnya fokus pada tampilan aplikasi.

Tanpa template dan layout yang rapi, aplikasi akan terlihat tidak profesional. Dengan memanfaatkan header, footer, dan layout dinamis, Anda bisa membuat tampilan yang konsisten, modern, dan mudah diubah.

Pada BAB ini, kita akan membahas:

  • Header dan footer
  • Template layout
  • Load view berulang
  • Integrasi Bootstrap
  • Struktur halaman dinamis

Tujuan Pembelajaran

Setelah menyelesaikan BAB 10, Anda akan mampu:

  1. Membuat header dan footer konsisten di semua halaman
  2. Mengatur template layout agar view mudah dipanggil berulang
  3. Mengintegrasikan Bootstrap untuk tampilan modern
  4. Membuat halaman dinamis dengan struktur rapi

10.1 Header dan Footer

Header dan footer adalah bagian atas dan bawah halaman yang sama di seluruh halaman.

Contoh CI 3 / CI 4

Header (header.php)

<!DOCTYPE html>
<html>
<head>
    <title>My CodeIgniter App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="<?= base_url('/') ?>">CI App</a>
</nav>
<div class="container mt-3">

Footer (footer.php)

</div> <!-- end container -->
<footer class="bg-dark text-white text-center p-3 mt-3">
    &copy; <?= date('Y') ?> My CodeIgniter App
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

📌 Tips:

  • Pisahkan header dan footer agar mudah diubah di seluruh halaman
  • Gunakan CDN Bootstrap agar cepat dan ringan

10.2 Template Layout

Template layout adalah kerangka halaman yang memanggil header, content, dan footer.

Controller Example

class Home extends CI_Controller {
    public function index() {
        $data['title'] = "Beranda";
        $data['content'] = "home_view";
        $this->load->view('template', $data);
    }
}

Template View (template.php)

<?php $this->load->view('header'); ?>
<?php $this->load->view($content); ?>
<?php $this->load->view('footer'); ?>

📌 Kelebihan:

  • Semua halaman menggunakan satu layout
  • Tidak perlu menulis header/footer di tiap view

10.3 Load View Berulang

Dengan template, kita bisa memanggil view berulang:

  • Sidebar
  • Navbar
  • Notifikasi / flash messages

Contoh Sidebar

sidebar.php:

<div class="list-group">
    <a href="<?= base_url('home') ?>" class="list-group-item">Home</a>
    <a href="<?= base_url('mahasiswa') ?>" class="list-group-item">Mahasiswa</a>
    <a href="<?= base_url('produk') ?>" class="list-group-item">Produk</a>
</div>

Panggil di template:

<div class="row">
    <div class="col-3">
        <?php $this->load->view('sidebar'); ?>
    </div>
    <div class="col-9">
        <?php $this->load->view($content); ?>
    </div>
</div>

10.4 Integrasi Bootstrap

Bootstrap membantu desain responsif dan modern tanpa menulis banyak CSS.

Contoh Table Responsif

<table class="table table-striped table-bordered">
    <thead class="table-dark">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>NIM</th>
            <th>Jurusan</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php $no=1; foreach($mahasiswa as $m): ?>
        <tr>
            <td><?= $no++ ?></td>
            <td><?= $m->nama ?></td>
            <td><?= $m->nim ?></td>
            <td><?= $m->jurusan ?></td>
            <td>
                <a href="<?= base_url('mahasiswa/edit/'.$m->id) ?>" class="btn btn-warning btn-sm">Edit</a>
                <a href="<?= base_url('mahasiswa/hapus/'.$m->id) ?>" class="btn btn-danger btn-sm" onclick="return confirm('Yakin?')">Hapus</a>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

10.5 Struktur Halaman Dinamis

Dengan template dan layout, setiap halaman cukup:

  1. Menentukan content → view spesifik
  2. Memanggil template.php
  3. Header, footer, dan layout tetap konsisten

Contoh Controller Dinamis

class Page extends CI_Controller {
    public function show($page) {
        $data['content'] = $page.'_view';
        $this->load->view('template', $data);
    }
}

Keuntungan:

  • Halaman baru tinggal buat view saja
  • Template dan layout tetap konsisten
  • Mudah integrasi Bootstrap / library lain

Penutup

Dengan BAB 10 ini, aplikasi CodeIgniter Anda sudah memiliki:

  • Template header/footer konsisten
  • Layout yang rapi dan dinamis
  • Tampilan modern dengan Bootstrap
  • Struktur view berulang yang efisien

Langkah berikutnya bisa fokus ke fitur lanjutan, seperti pagination, upload file, atau autentikasi user, agar aplikasi semakin profesional.

Related Posts