Membuat Template Website Modular dengan Include & Require di PHP

Untuk tutorial kali ini kita akan belajar Membuat Template Website Modular dengan Include dan Require di PHP Studi Kasus Layout Web Sederhana. Bayangkan kamu membuat website dengan 10 halaman — seperti beranda, tentang kami, layanan, kontak, dan sebagainya. Setiap halaman punya bagian header, navbar, dan footer yang sama.

Kalau kamu menulis ulang bagian tersebut di setiap file, pasti:

Memakan waktu.
Menyulitkan saat ingin mengubah tampilan (misalnya ganti logo).
Tidak efisien dan sulit dipelihara.

Solusinya? Gunakan konsep template modular dengan include dan require di PHP. Dengan cara ini, kamu hanya membuat satu file header/footer yang bisa digunakan di semua halaman.

Struktur Folder Website Modular

Pertama, buat struktur proyek sederhana seperti berikut:

/mywebsite/
│
├── index.php
├── about.php
├── contact.php
│
├── includes/
│   ├── header.php
│   ├── navbar.php
│   └── footer.php
│
└── assets/
    ├── css/
    │   └── style.css
    └── img/
        └── logo.png

Keterangan:

index.php, about.php, contact.php → halaman utama.
includes/ → berisi file template yang akan di-include di setiap halaman.
assets/ → tempat file CSS, JS, gambar, dll.

Langkah 1: Buat File Header

File: includes/header.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Website Modular PHP'; ?></title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

Keterangan:

Menggunakan <?= $title ?? 'Website Modular PHP'; ?> agar setiap halaman bisa punya judul berbeda.
Tag <body> ditutup di footer.php.

Langkah 2: Buat File Navbar

File: includes/navbar.php

<nav>
    <ul>
        <li><a href="index.php">Beranda</a></li>
        <li><a href="about.php">Tentang Kami</a></li>
        <li><a href="contact.php">Kontak</a></li>
    </ul>
</nav>
<hr>

Sederhana tapi fungsional. Nantinya bisa kamu ganti dengan menu Bootstrap atau Tailwind sesuai kebutuhan.

Langkah 3: Buat File Footer

File: includes/footer.php

<hr>
<footer>
    <p>&copy; <?= date('Y'); ?> MyWebsite. All rights reserved.</p>
</footer>
</body>
</html>

Langkah 4: Buat Halaman Utama (index.php)

File: index.php

<?php
$title = "Beranda - MyWebsite";
require 'includes/header.php';
include 'includes/navbar.php';
?>

<h1>Selamat Datang di MyWebsite</h1>
<p>Ini adalah halaman utama dari website modular dengan PHP.</p>

<?php include 'includes/footer.php'; ?>

Langkah 5: Buat Halaman Lain (about.php)

File: about.php

<?php
$title = "Tentang Kami - MyWebsite";
require 'includes/header.php';
include 'includes/navbar.php';
?>

<h1>Tentang Kami</h1>
<p>MyWebsite adalah contoh website modular menggunakan include dan require di PHP.</p>

<?php include 'includes/footer.php'; ?>

Langkah 6: Buat Halaman Kontak (contact.php)

File: contact.php

<?php
$title = "Kontak - MyWebsite";
require 'includes/header.php';
include 'includes/navbar.php';
?>

<h1>Hubungi Kami</h1>
<p>Email: info@mywebsite.com</p>

<?php include 'includes/footer.php'; ?>

Langkah 7: Tambahkan CSS Sederhana

File: assets/css/style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0 20px;
    background-color: #f5f5f5;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

a {
    text-decoration: none;
    color: #007bff;
}

a:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
}

Bagaimana Mekanismenya?

Setiap kali kamu membuka halaman (misalnya about.php):

PHP mengeksekusi file.
require 'includes/header.php' → menyisipkan header.
include 'includes/navbar.php' → menambahkan menu.
Konten halaman (<h1> dll) ditampilkan.
include 'includes/footer.php' → menutup struktur HTML.

Jadi hasil akhirnya terlihat seperti satu halaman utuh, padahal tersusun dari beberapa file terpisah.

Tips Keamanan dan Optimasi

Gunakan path absolut agar lebih aman:

<?php
require __DIR__ . '/includes/header.php';
?>

Hindari memanggil file berdasarkan input user:

<?php
// Bahaya
include $_GET['page'] . '.php';
?>

Gunakan include_once / require_once untuk mencegah pemanggilan ganda file yang sama.

Jika situs sudah besar, pertimbangkan untuk membuat sistem templating seperti:

Blade (Laravel)
Twig (Symfony)
Smarty (PHP Native Template Engine)

Kesimpulan

Membuat template website modular di PHP dengan include dan require adalah cara sederhana namun powerful untuk:

Menghemat waktu,
Mempermudah perawatan kode,
Meningkatkan konsistensi tampilan antar halaman.

Dengan struktur modular, kamu cukup ubah satu file (misalnya header.php) dan seluruh halaman website akan ikut berubah secara otomatis. Inilah pondasi penting sebelum kamu melangkah ke framework PHP modern seperti CodeIgniter, Laravel, atau Symfony.