Cara Membuat View dan Template dengan View Layout di CodeIgniter 4

CodeIgniter 4 (CI4) menyediakan sistem View Layout untuk membantu Anda membuat template halaman yang efisien. Dengan View Layout, Anda dapat memisahkan elemen umum seperti header, footer, dan sidebar dari konten utama, sehingga mempermudah pengelolaan template.

1. Apa Itu View di CodeIgniter 4?

View di CI4 adalah bagian aplikasi yang bertanggung jawab untuk menampilkan antarmuka pengguna. File View berisi kode HTML, CSS, dan JavaScript, dan biasanya berada di folder app/Views.

1.1 Membuat File View

Contoh membuat file view sederhana:

// File: app/Views/welcome_message.php
<!DOCTYPE html>
<html>
<head>
    <title>Welcome to CodeIgniter</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

1.2 Menampilkan View

Gunakan metode view() di controller untuk menampilkan file View:

<?php
namespace App\Controllers;

class Home extends BaseController {
    public function index() {
        return view('welcome_message');
    }
}
?>

2. Membuat Template dengan View Layout

View Layout di CI4 memungkinkan Anda membuat template utama yang dapat digunakan kembali oleh berbagai halaman. Layout ini biasanya mencakup elemen seperti header, footer, dan sidebar.

2.1 Membuat File Layout

Buat file layout di app/Views/layouts/main.php:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <header class="bg-primary text-white text-center py-3">
        <h1>My Application</h1>
    </header>

    <div class="container mt-4">
        <?= $this->renderSection('content') ?>
    </div>

    <footer class="bg-dark text-white text-center py-3 mt-5">
        <p>Copyright © 2024 My Application</p>
    </footer>
</body>
</html>

2.2 Membuat View dengan Layout

Buat file view yang menggunakan layout di app/Views/pages/home.php:

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

<?php $this->section('content'); ?>
    <h2>Welcome to My Application</h2>
    <p>This is the homepage.</p>
<?php $this->endSection(); ?>

2.3 Menampilkan View dengan Layout

Modifikasi controller untuk menampilkan view dengan layout:

<?php
namespace App\Controllers;

class Pages extends BaseController {
    public function home() {
        return view('pages/home');
    }
}
?>

3. Tips Menggunakan View Layout

Letakkan elemen yang umum digunakan seperti header dan footer di file layout.
Gunakan renderSection() untuk area konten yang dapat diubah pada setiap halaman.
Struktur folder view dengan rapi, misalnya dengan memisahkan file layout, komponen, dan halaman.

4. Contoh Struktur View

Untuk proyek besar, struktur view yang rapi sangat penting. Berikut adalah contoh struktur view:

app/Views/
├── layouts/
│   └── main.php
├── components/
│   └── navbar.php
├── pages/
│   ├── home.php
│   ├── about.php
│   └── contact.php

Kesimpulan

Dengan menggunakan View dan View Layout di CodeIgniter 4, Anda dapat mengatur struktur tampilan aplikasi dengan lebih efisien dan mudah dipelihara. View Layout memungkinkan Anda untuk membuat template utama yang dapat digunakan kembali di berbagai halaman.

Cara Membuat View dan Template dengan View Layout di CodeIgniter 4

Cara Membuat View dan Template dengan View Layout di CodeIgniter 4

1. Apa Itu View di CodeIgniter 4?

1.1 Membuat File View

1.2 Menampilkan View

2. Membuat Template dengan View Layout

2.1 Membuat File Layout

2.2 Membuat View dengan Layout

2.3 Menampilkan View dengan Layout

3. Tips Menggunakan View Layout

4. Contoh Struktur View

Kesimpulan

Gambar: Ilustrasi View Layout di CodeIgniter 4

Check Also