Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 10-Bài 3. [Bài tập] - Tiến hành áp dụng bố cục (layout) đã thiết kế cho các trang web thuộc Frontend

Tác giả: Dương Nguyễn Phú Cường
Số phút học: 90 phút

Ngày đăng: 30/10/2025, 9:10

Lượt xem: 800

Đề bài

1. Với các trang web thuộc Frontend đã thiết kế ở các bài tập trước:

URL	File Path
http://localhost/project-nentang/	C:\xampp\htdocs\project-nentang\index.php
http://localhost/project-nentang/gioi-thieu	C:\xampp\htdocs\project-nentang\gioi-thieu.php
http://localhost/project-nentang/lien-he	C:\xampp\htdocs\project-nentang\lien-he.php
http://localhost/project-nentang/dang-nhap	C:\xampp\htdocs\project-nentang\dang-nhap.php
http://localhost/project-nentang/dang-ky	C:\xampp\htdocs\project-nentang\dang-ky.php
http://localhost/project-nentang/truyen-tranh/	C:\xampp\htdocs\project-nentang\truyen-tranh\index.php
http://localhost/project-nentang/truyen-tranh/them	C:\xampp\htdocs\project-nentang\truyen-tranh\them.php
http://localhost/project-nentang/truyen-tranh/sua	C:\xampp\htdocs\project-nentang\truyen-tranh\sua.php
http://localhost/project-nentang/truyen-tranh/xoa	C:\xampp\htdocs\project-nentang\truyen-tranh\xoa.php
http://localhost/project-nentang/tieu-thuyet/	C:\xampp\htdocs\project-nentang\tieu-thuyet\index.php
http://localhost/project-nentang/tieu-thuyet/them	C:\xampp\htdocs\project-nentang\tieu-thuyet\them.php
http://localhost/project-nentang/tieu-thuyet/sua	C:\xampp\htdocs\project-nentang\tieu-thuyet\sua.php
http://localhost/project-nentang/tieu-thuyet/xoa	C:\xampp\htdocs\project-nentang\tieu-thuyet\xoa.php

2. Với mỗi trang web cần tạo đúng cấu trúc của một trang HTML cơ bản, bao gồm:
- Đầy đủ cấu trúc html, head, body
- Với mỗi trang web cần có tiêu đề phù hợp title
- Nội dung trang web cần sử dụng cú pháp PHP hàm echo để in ra Tên trang web cơ bản. Ví dụ: <?php echo '<h1>Trang Chủ</h1>'; ?>
3. Tiến hành áp dụng bố cục (layout) đã thiết kế cho tất cả các trang web này. Sử dụng hàm include_once trong PHP để thực hiện.

Code mẫu ví dụ

Code file: project-nentang/index.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang chủ Quản lý Truyện Tranh - Tiểu thuyết | NenTang.vn</title>

    <!-- Nhúng file Quản lý các Liên kết CSS dùng chung cho toàn bộ trang web -->
    <?php include_once(__DIR__ . '/frontend/layouts/styles.php'); ?>

    <!-- Các CSS sử dụng riêng cho trang này -->
    <style>

    </style>
</head>

<body class="d-flex flex-column h-100">
    <!-- header -->
    <?php include_once(__DIR__ . '/frontend/layouts/partials/header.php'); ?>
    <!-- end header -->

    <main role="main" class="mb-2">
        <!-- Block content -->
        <h1>Trang chủ</h1>
        <!-- End block content -->
    </main>

    <!-- footer -->
    <?php include_once(__DIR__ . '/frontend/layouts/partials/footer.php'); ?>
    <!-- end footer -->

    <!-- Nhúng file quản lý phần SCRIPT JAVASCRIPT -->
    <?php include_once(__DIR__ . '/frontend/layouts/scripts.php'); ?>

    <!-- Các file Javascript sử dụng riêng cho trang này, liên kết tại đây -->
    <script>

    </script>
</body>

</html>

Yêu cầu

Sử dụng các IDE phù hợp (Visual Studio Code / NetBean / Eclipse...) để viết code PHP các trang web tương ứng theo yêu cầu đề bài.
Với mỗi trang chụp hình Kết quả + dán code PHP đã chạy vào file Word mẫu.
Viết bài tập vào file Word và nộp bài thông qua Google Form (https://forms.gle/CHu4RzR6nXXkE2SW9).
Mẫu nộp bài tập: Mau_NopBaiTap_TDU_TH13_[MSSV]_[HoTen]