Layout adalah struktur tampilan utama aplikasi yang digunakan bersama oleh banyak halaman. Tujuannya adalah menghindari pengulangan kode HTML di setiap halaman.
Tanpa layout, setiap halaman harus menulis ulang:
-
struktur HTML
-
CSS
-
menu
-
footer
Dengan layout, bagian tersebut cukup ditulis sekali saja lalu dipanggil di halaman lain.
Struktur Folder Layout
Biasanya layout diletakkan pada folder khusus:
layout/ header.php sidebar.php footer.php
Penjelasan:
-
header.php → bagian awal halaman (head HTML)
-
sidebar.php → menu navigasi
-
footer.php → bagian akhir halaman
Struktur Aplikasi Secara Umum
Contoh struktur aplikasi:
audit_ppi/ │ ├── config/ │ └── koneksi.php │ ├── pages/ │ ├── dashboard.php │ ├── pasien/ │ ├── audit/ │ └── surveilans/ │ ├── proses/ │ ├── assets/ │ ├── css/ │ ├── js/ │ └── img/ │ ├── layout/ │ ├── header.php │ ├── sidebar.php │ └── footer.php │ └── index.php
Isi File Layout
1. header.php
Header berisi bagian awal halaman HTML.
Contoh:
<?php
include __DIR__ . "/../config/koneksi.php";
?>
<!DOCTYPE html>
<html>
<head>
<title><?= ($pageTitle ?? "Aplikasi Audit PPI") ?></title>
<link rel="stylesheet" href="/assets/css/style.css">
<?php
if(isset($pageCss) && !empty($pageCss)){
foreach($pageCss as $css){
echo '<link rel="stylesheet" href="/assets/css/'.$css.'">';
}
}
?>
</head>
<body>
Fungsi header:
-
membuka HTML
-
memuat CSS global
-
memuat CSS halaman
-
menentukan title halaman
-
memanggil koneksi database
2. sidebar.php
Sidebar berisi menu navigasi aplikasi.
Contoh:
<div class="sidebar"> <h2>Audit PPI</h2> <ul> <li><a href="/pages/dashboard.php">Dashboard</a></li> <li><a href="/pages/pasien/pasien.php">Pasien</a></li> <li><a href="/pages/audit/audit.php">Audit</a></li> <li><a href="/pages/surveilans/surveilans.php">Surveilans</a></li> </ul> </div> <div class="content">
Sidebar berada di dalam <body>.
3. footer.php
Footer menutup halaman HTML.
Contoh:
</div> <footer> © 2026 Audit PPI </footer> </body> </html>
Cara Menggunakan Layout di Halaman
Contoh halaman:
pages/pasien/pasien.php
Struktur halaman:
<?php $pageTitle = "Data Pasien"; $pageCss = ["pasien.css","form.css"]; include "../../layout/header.php"; include "../../layout/sidebar.php"; ?> <h1>Data Pasien</h1> <table> <tr> <th>Nama</th> <th>Umur</th> </tr> </table> <?php include "../../layout/footer.php"; ?>
Penjelasan Variabel Layout
pageTitle
Digunakan untuk menentukan judul halaman.
Contoh:
$pageTitle = "Data Pasien";
Di browser akan muncul:
Data Pasien | Audit PPI
Jika tidak diisi maka header menggunakan default.
pageCss
Digunakan untuk memuat CSS khusus halaman.
Contoh:
$pageCss = ["pasien.css","form.css"];
Header akan memuat:
style.css pasien.css form.css
Struktur CSS yang Disarankan
assets/css/ style.css dashboard.css pasien.css audit.css form.css
Penjelasan:
-
style.css → CSS global aplikasi
-
pasien.css → CSS halaman pasien
-
audit.css → CSS halaman audit
-
form.css → CSS form umum
Alur Halaman Saat Dibuka
Misalnya user membuka:
pages/pasien/pasien.php
Yang terjadi sebenarnya:
header.php ↓ sidebar.php ↓ konten halaman pasien ↓ footer.php
Browser menggabungkan semua bagian tersebut menjadi satu halaman utuh.
Keuntungan Menggunakan Layout
-
Kode tidak berulang
Tanpa layout setiap halaman harus menulis HTML lengkap.
-
Lebih rapi
Struktur halaman menjadi jelas.
-
Mudah mengubah desain
Jika ingin mengubah menu atau CSS cukup mengubah satu file.
-
Lebih profesional
Struktur seperti ini umum digunakan pada aplikasi web sebelum menggunakan framework seperti Laravel yang berjalan di atas PHP dan biasanya menggunakan database MySQL.
Kesimpulan
Konsep layout memisahkan aplikasi menjadi tiga bagian utama:
-
header → pembuka halaman dan CSS
-
sidebar → menu navigasi
-
footer → penutup halaman
Setiap halaman hanya berisi konten utama saja.
Contoh sederhana struktur halaman:
header sidebar konten halaman footer
Dengan cara ini aplikasi menjadi:
-
lebih rapi
-
lebih mudah dikembangkan
-
lebih mudah dipelihara
