Sau khi biết cách dùng include và require, bước tiếp theo là tách giao diện website thành nhiều phần riêng biệt để dễ quản lý.
Thay vì copy cùng một đoạn menu, header và footer vào hàng chục trang khác nhau, ta chỉ cần sửa một file duy nhất.
🎯 Vì sao cần Header/Footer động?
Giả sử website có:
Trang chủ
Giới thiệu
Liên hệ
Tin tức
Sản phẩm
Nếu menu nằm trực tiếp trong từng file:
index.php
about.php
contact.php
news.php
product.php
Mỗi lần thêm menu mới:
<li>Khuyến mãi</li>
Bạn phải sửa tất cả các file.
❌ Tốn thời gian
❌ Dễ sai sót
❌ Khó bảo trì
🏗️ Cấu trúc thư mục
project/
│
├── index.php
├── about.php
│
├── includes/
│ ├── header.php
│ ├── menu.php
│ └── footer.php
📄 File header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website PHP</title>
</head>
<body>
<header>
<h1>Website Học PHP</h1>
</header>
📄 File menu.php
<nav>
<a href="index.php">Trang chủ</a> |
<a href="about.php">Giới thiệu</a> |
<a href="contact.php">Liên hệ</a>
</nav>
<hr>
📄 File footer.php
<hr>
<footer>
Bản quyền © 2026
</footer>
</body>
</html>
📄 Trang index.php
<?php include "includes/header.php"; ?>
<?php include "includes/menu.php"; ?>
<h2>Trang Chủ</h2>
<p>Chào mừng đến website PHP.</p>
<?php include "includes/footer.php"; ?>
📄 Trang about.php
<?php include "includes/header.php"; ?>
<?php include "includes/menu.php"; ?>
<h2>Giới Thiệu</h2>
<p>Đây là trang giới thiệu.</p>
<?php include "includes/footer.php"; ?>
🚀 Kết quả
Mọi trang đều dùng chung:
✅ Header
✅ Menu
✅ Footer
Khi chỉnh sửa menu:
<nav>
...
</nav>
Tất cả các trang tự động cập nhật.
🎨 Menu động bằng Array
Thay vì viết cứng:
<a href="index.php">Trang chủ</a>
<a href="about.php">Giới thiệu</a>
Ta tạo menu bằng mảng.
<?php
$menus = [
"Trang chủ" => "index.php",
"Giới thiệu" => "about.php",
"Liên hệ" => "contact.php"
];
foreach($menus as $text => $link){
echo "<a href='$link'>$text</a> | ";
}
📋 Tạo menu dễ mở rộng
Muốn thêm menu mới:
$menus["Tin tức"] = "news.php";
Không cần sửa HTML.
⭐ Highlight menu hiện tại
Xác định file đang mở:
<?php
$current = basename($_SERVER['PHP_SELF']);
echo $current;
Ví dụ:
index.php
Tô đậm menu đang chọn
<?php
$menus = [
"Trang chủ" => "index.php",
"Giới thiệu" => "about.php",
"Liên hệ" => "contact.php"
];
$current = basename($_SERVER['PHP_SELF']);
foreach($menus as $text => $link){
if($current == $link){
echo "<strong>$text</strong> | ";
}else{
echo "<a href='$link'>$text</a> | ";
}
}
🎨 CSS đơn giản
<style>
nav a{
text-decoration:none;
padding:10px;
}
.active{
color:red;
font-weight:bold;
}
</style>
PHP:
<?php
$current = basename($_SERVER['PHP_SELF']);
foreach($menus as $text => $link){
$active = ($current == $link)
? "active"
: "";
echo "<a href='$link' class='$active'>$text</a>";
}
📦 Layout Website Hoàn Chỉnh
<?php include "includes/header.php"; ?>
<?php include "includes/menu.php"; ?>
<main>
Nội dung từng trang
</main>
<?php include "includes/footer.php"; ?>
Đây chính là mô hình mà hầu hết website PHP thực tế đều sử dụng trước khi tiến lên các framework như Laravel.
🧪 Bài tập thực hành
Bài 1
Tạo:
index.php
about.php
contact.php
Dùng chung:
header.php
menu.php
footer.php
Bài 2
Tạo menu bằng Array:
$menus = [
"Trang chủ" => "index.php",
"Tin tức" => "news.php",
"Liên hệ" => "contact.php"
];
Hiển thị bằng foreach.
Bài 3
Tô sáng menu đang được mở bằng:
$_SERVER['PHP_SELF']
🎓 Tổng kết
Sau bài này bạn đã biết:
✅ Tách giao diện thành nhiều file
✅ Dùng include xây dựng layout
✅ Tạo menu động bằng Array
✅ Highlight menu hiện tại
✅ Xây dựng cấu trúc website chuyên nghiệp hơn
➡️ Bài tiếp theo: Bài 30 — Password Hash (Mã hóa mật khẩu an toàn bằng password_hash và password_verify)
x0
Không có nhận xét nào:
Đăng nhận xét