Membuat Sistem Template dengan Layout Dinamis di PHP

Sebelumnya kita sudah belajar tentang membuat template website modular dan sekarang membahas lebih lanjut tentang sistem template dengan layout dinamis, karena dalam pengembangan web berbasis PHP, sering kali kita memerlukan tampilan (layout) berbeda antara:

Pengguna biasa (user),
dan admin (pengelola situs).

Contohnya:

User hanya melihat menu seperti Profil, Produk, Pesanan.
Admin memiliki akses ke Dashboard, Manajemen Produk, dan Kelola User.

Daripada membuat dua website terpisah, kita bisa membangun satu sistem template dinamis dengan PHP. Kuncinya: gunakan include dan require secara cerdas untuk memanggil file layout berdasarkan role pengguna.

Struktur Folder Proyek

Buat struktur seperti berikut:

/template-system/
│
├── index.php
├── login.php
├── logout.php
│
├── admin/
│   ├── dashboard.php
│   ├── manage_user.php
│   └── manage_product.php
│
├── user/
│   ├── home.php
│   └── profile.php
│
├── includes/
│   ├── header_admin.php
│   ├── header_user.php
│   ├── sidebar_admin.php
│   ├── sidebar_user.php
│   ├── footer.php
│   └── auth.php
│
└── assets/
    └── css/
        └── style.css

Langkah 1: Simulasi Login & Session Role

File: login.php

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $role = $_POST['role']; // admin / user

    // Simulasi login berhasil
    $_SESSION['username'] = $username;
    $_SESSION['role'] = $role;

    header("Location: index.php");
    exit;
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<h2>Login</h2>
<form method="post">
    <label>Username:</label>
    <input type="text" name="username" required><br>

    <label>Pilih Role:</label>
    <select name="role">
        <option value="user">User</option>
        <option value="admin">Admin</option>
    </select><br><br>

    <button type="submit">Login</button>
</form>
</body>
</html>

Langkah 2: Cek Login dan Role di File auth.php

File: includes/auth.php

<?php
session_start();

if (!isset($_SESSION['role'])) {
    header("Location: login.php");
    exit;
}
?>

File ini akan kita include di semua halaman yang butuh login agar tidak bisa diakses sembarangan.

Langkah 3: Buat Template Header dan Sidebar

Header untuk Admin

File: includes/header_admin.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Admin Panel</title>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<header>
    <h2>Admin Dashboard</h2>
</header>

Sidebar untuk Admin

File: includes/sidebar_admin.php

<aside>
    <ul>
        <li><a href="dashboard.php">Dashboard</a></li>
        <li><a href="manage_product.php">Kelola Produk</a></li>
        <li><a href="manage_user.php">Kelola User</a></li>
        <li><a href="../logout.php">Logout</a></li>
    </ul>
</aside>

Header untuk User

File: includes/header_user.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pengguna</title>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<header>
    <h2>Selamat Datang, <?= htmlspecialchars($_SESSION['username']); ?></h2>
</header>

Sidebar untuk User

File: includes/sidebar_user.php

<aside>
    <ul>
        <li><a href="home.php">Beranda</a></li>
        <li><a href="profile.php">Profil</a></li>
        <li><a href="../logout.php">Logout</a></li>
    </ul>
</aside>

Langkah 4: Buat Footer Umum

File: includes/footer.php

<footer>
    <p>&copy; <?= date('Y'); ?> Template System PHP</p>
</footer>
</body>
</html>

Langkah 5: Logika Layout Dinamis

File: index.php

<?php
require 'includes/auth.php';

$role = $_SESSION['role'];

if ($role == 'admin') {
    header("Location: admin/dashboard.php");
} else {
    header("Location: user/home.php");
}
exit;
?>

Langkah 6: Halaman Admin dan User

Admin – Dashboard

File: admin/dashboard.php

<?php
require '../includes/auth.php';
include '../includes/header_admin.php';
include '../includes/sidebar_admin.php';
?>

<main>
    <h3>Dashboard Admin</h3>
    <p>Selamat datang di area admin, <?= htmlspecialchars($_SESSION['username']); ?>.</p>
</main>

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

User – Home

File: user/home.php

<?php
require '../includes/auth.php';
include '../includes/header_user.php';
include '../includes/sidebar_user.php';
?>

<main>
    <h3>Beranda Pengguna</h3>
    <p>Halo <?= htmlspecialchars($_SESSION['username']); ?>! Ini halaman utama pengguna biasa.</p>
</main>

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

Langkah 7: Logout

File: logout.php

<?php
session_start();
session_destroy();
header("Location: login.php");
exit;
?>

Langkah 8: Tambahkan CSS Dasar

File: assets/css/style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
}

header {
    background: #007bff;
    color: white;
    padding: 15px;
}

aside {
    background: #f4f4f4;
    width: 200px;
    float: left;
    height: 100vh;
    padding: 20px;
}

main {
    margin-left: 220px;
    padding: 20px;
}

footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: auto;
}

Penjelasan Mekanisme

User login → sistem menyimpan $_SESSION['role'] dan $_SESSION['username'].
Berdasarkan role, sistem mengarahkan user ke folder admin/ atau user/.
Masing-masing halaman memanggil header, sidebar, dan footer yang berbeda.
Semua layout modular sehingga mudah diubah tanpa mengedit setiap halaman.

Tips Pengembangan

Gunakan require_once() agar tidak terjadi duplikasi include.
Simpan data user & role dari database (bukan form statis).
Untuk project besar, kamu bisa gunakan templating engine seperti Twig atau Blade.
Jika ingin responsif dan modern, integrasikan Bootstrap 5 atau Tailwind CSS.

Kesimpulan

Dengan konsep layout dinamis di PHP, kamu bisa mengelola tampilan berbeda untuk admin dan user tanpa mengulang kode HTML. Cukup atur struktur template (header, sidebar, footer) dan arahkan sesuai role pengguna.

Cara ini adalah pondasi menuju framework modern seperti Laravel, di mana sistem layout (Blade) bekerja dengan prinsip serupa — yaitu reusable dan role-based view control.