Bài 19.5: Bài tập thực hành ứng dụng multi-page
Bài 19.5: Bài tập thực hành ứng dụng multi-page
Chào mừng bạn quay trở lại với series Lập trình Web Front-end! Cho đến bây giờ, chúng ta đã làm việc rất nhiều với các trang web đơn lẻ. Chúng ta đã học cách tạo cấu trúc với HTML, thêm phong cách với CSS, và cả tương tác cơ bản với JavaScript. Nhưng thế giới web rộng lớn hơn rất nhiều! Hầu hết các trang web bạn truy cập hàng ngày đều là những hệ thống gồm nhiều trang liên kết với nhau. Đây chính là lúc chúng ta bước chân vào thế giới của Ứng dụng Multi-page (Multi-page Applications - MPAs).
Bài hôm nay sẽ là một bài thực hành quan trọng để củng cố kiến thức của bạn bằng cách xây dựng một ứng dụng web đơn giản gồm nhiều trang. Chúng ta sẽ tập trung vào việc kết nối các trang này lại với nhau và quản lý cấu trúc cơ bản của một dự án MPA.
MPA là gì? Tại sao chúng ta cần thực hành?
Trước khi bắt tay vào code, hãy cùng nhau nhắc lại một chút về MPAs. Một Ứng dụng Multi-page là mô hình website truyền thống, trong đó mỗi yêu cầu từ người dùng (ví dụ: click vào một liên kết) sẽ dẫn đến việc trình duyệt tải lại toàn bộ trang web mới từ máy chủ. Điều này khác với Single-page Applications (SPAs) mà chúng ta sẽ học sau này, nơi nội dung được cập nhật động mà không cần tải lại trang hoàn toàn.
Việc thực hành xây dựng MPA giúp bạn hiểu rõ:
- Cách các trang web được liên kết với nhau thông qua các siêu liên kết (
<a>). - Quản lý cấu trúc file và thư mục cho một dự án có nhiều trang.
- Thách thức trong việc duy trì các yếu tố chung (như header, footer, menu điều hướng) trên nhiều trang khác nhau.
Đây là nền tảng vững chắc để bạn tiếp tục học về các mô hình phức tạp hơn sau này.
Công cụ chính: Thẻ <a> - Cánh cửa kết nối các trang
Trái tim của việc điều hướng trong MPAs chính là thẻ <a> (anchor). Thẻ này cho phép bạn tạo ra các siêu liên kết (hyperlinks) để kết nối từ trang này sang trang khác, hoặc đến các tài nguyên khác trên internet.
Cú pháp cơ bản:
<a href="URL">Nội dung hiển thị</a>
href(Hypertext Reference): Đây là thuộc tính quan trọng nhất. Nó chỉ định địa chỉ (URL) mà liên kết sẽ dẫn tới khi người dùng click vào.- Nội dung hiển thị: Đây là phần văn bản hoặc hình ảnh mà người dùng nhìn thấy và click vào.
Ví dụ đơn giản:
<p>
Besuchen Sie <a href="https://fullhousetutor.com">Fullhouse Tutor</a> für weitere Informationen.
</p>
Trong ví dụ này, dòng chữ "Fullhouse Tutor" sẽ là một liên kết. Khi click vào, trình duyệt sẽ điều hướng đến trang web https://fullhousetutor.com.
Liên kết trong dự án của bạn: Đường dẫn tương đối và tuyệt đối
Khi xây dựng MPA, bạn sẽ thường xuyên liên kết giữa các trang trong cùng một dự án của mình. Đây là lúc khái niệm về đường dẫn tương đối (relative paths) trở nên cực kỳ hữu ích.
- Đường dẫn tuyệt đối (Absolute Paths): Chỉ định vị trí đầy đủ của tài nguyên từ gốc của internet (ví dụ:
https://fullhousetutor.com/blog/bai-19-5). Chúng ta đã thấy ví dụ này ở trên. - Đường dẫn tương đối (Relative Paths): Chỉ định vị trí của tài nguyên tính từ vị trí của file hiện tại. Đây là cách bạn sẽ liên kết giữa các trang trong dự án của mình.
Ví dụ về đường dẫn tương đối:
Giả sử cấu trúc thư mục dự án của bạn như sau:
my-website/
├── index.html
├── about.html
├── contact.html
└── css/
└── style.cssTừ
index.htmlđếnabout.html: Cả hai file này nằm cùng cấp, nên đường dẫn chỉ đơn giản là tên file:<a href="about.html">Giới thiệu</a>Từ
index.htmlđếncontact.html: Tương tự:<a href="contact.html">Liên hệ</a>Từ
index.htmlđếnstyle.css(nằm trong thư mụccss): Bạn cần "đi vào" thư mụccss:<link rel="stylesheet" href="css/style.css">Từ một file trong thư mục
css/(ví dụ: giả sử cócss/special.css) quay lạiindex.html: Bạn cần "đi ra" khỏi thư mục hiện tại bằng../(hai dấu chấm và dấu gạch chéo), sau đó chỉ định tên file:/* Giả sử bạn đang ở trong một file HTML trong thư mục con */ <a href="../index.html">Trang chủ</a>../có nghĩa là "trở về thư mục cha". Bạn có thể dùng../../để lùi lại hai cấp thư mục, v.v.
Việc sử dụng đường dẫn tương đối giúp dự án của bạn dễ dàng di chuyển hoặc triển khai trên các máy chủ khác nhau mà không cần sửa lại toàn bộ đường link.
Thực hành: Xây dựng Website Đơn giản 3 Trang
Bây giờ, chúng ta hãy áp dụng kiến thức này để xây dựng một website MPA mini.
Mục tiêu: Tạo một website gồm 3 trang: Trang chủ (index.html), Giới thiệu (about.html) và Liên hệ (contact.html). Các trang này sẽ được liên kết với nhau thông qua một menu điều hướng đơn giản.
Bước 1: Tạo cấu trúc thư mục
Hãy tạo một thư mục mới cho dự án của bạn, ví dụ: my-mpa-site. Bên trong thư mục đó, tạo 3 file HTML và một thư mục css với một file style.css:
my-mpa-site/
├── index.html
├── about.html
├── contact.html
└── css/
└── style.cssBước 2: Xây dựng nội dung cơ bản cho từng trang HTML
Mỗi file HTML sẽ có cấu trúc cơ bản giống nhau, chỉ khác biệt ở phần nội dung chính và tiêu đề (<title>).
index.html:<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trang Chủ - Website của tôi</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Chào mừng đến với Website của tôi!</h1> <!-- Menu điều hướng sẽ ở đây --> </header> <nav> <ul> <li><a href="index.html">Trang Chủ</a></li> <li><a href="about.html">Giới thiệu</a></li> <li><a href="contact.html">Liên hệ</a></li> </ul> </nav> <main> <h2>Đây là Trang Chủ</h2> <p>Chào mừng bạn đã ghé thăm trang web multi-page đơn giản của chúng tôi.</p> <p>Hãy khám phá các trang khác bằng menu điều hướng phía trên nhé!</p> </main> <footer> <p>© 2023 Website của tôi. Tất cả bản quyền thuộc về chúng tôi.</p> </footer> </body> </html>Giải thích: File này là điểm vào chính (
index.html). Nó chứa cấu trúc HTML tiêu chuẩn, liên kết đến file CSS (css/style.css), một tiêu đề (<h1>), một menu điều hướng (<nav>), nội dung chính (<main>) và chân trang (<footer>).about.html:<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Giới thiệu - Website của tôi</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Chào mừng đến với Website của tôi!</h1> <!-- Menu điều hướng sẽ ở đây --> </header> <nav> <ul> <li><a href="index.html">Trang Chủ</a></li> <li><a href="about.html">Giới thiệu</a></li> <li><a href="contact.html">Liên hệ</a></li> </ul> </nav> <main> <h2>Về chúng tôi</h2> <p>Chúng tôi là những người đam mê tạo ra các trang web đơn giản và hiệu quả.</p> <p>Đây là trang giới thiệu, nơi bạn có thể tìm hiểu thêm về mục tiêu và công việc của chúng tôi.</p> </main> <footer> <p>© 2023 Website của tôi. Tất cả bản quyền thuộc về chúng tôi.</p> </footer> </body> </html>Giải thích: Cấu trúc tương tự
index.html, nhưng tiêu đề (<title>) và nội dung chính (<main>) đã được thay đổi để phù hợp với trang Giới thiệu. Điều quan trọng là menu điều hướng vẫn được giữ nguyên.contact.html:<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liên hệ - Website của tôi</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Chào mừng đến với Website của tôi!</h1> <!-- Menu điều hướng sẽ ở đây --> </header> <nav> <ul> <li><a href="index.html">Trang Chủ</a></li> <li><a href="about.html">Giới thiệu</a></li> <li><a href="contact.html">Liên hệ</a></li> </ul> </nav> <main> <h2>Liên hệ với chúng tôi</h2> <p>Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ với chúng tôi qua email hoặc số điện thoại.</p> <p>Email: <a href="mailto:info@mywebsite.com">info@mywebsite.com</a></p> <p>Điện thoại: (123) 456-7890</p> </main> <footer> <p>© 2023 Website của tôi. Tất cả bản quyền thuộc về chúng tôi.</p> </footer> </body> </html>Giải thích: Tương tự hai trang trước, chỉ khác biệt nội dung chính và tiêu đề. Menu điều hướng lại được lặp lại.
Bước 3: Thêm một chút CSS
Mặc dù bài tập này tập trung vào cấu trúc HTML và liên kết, việc thêm một chút CSS sẽ giúp bạn thấy rõ hơn sự áp dụng của file CSS chung cho nhiều trang.
css/style.css:body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background: #333; color: #fff; padding: 1rem 0; text-align: center; } nav ul { padding: 0; list-style: none; text-align: center; background: #555; margin: 0; } nav ul li { display: inline; margin: 0 10px; } nav a { color: #fff; text-decoration: none; padding: 10px; display: inline-block; } nav a:hover { background: #777; } main { padding: 20px; margin: 15px auto; max-width: 800px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } footer { text-align: center; padding: 1rem 0; margin-top: 20px; background: #333; color: #fff; position: relative; bottom: 0; width: 100%; }Giải thích: File CSS này định nghĩa phong cách cho
body,header,nav,main, vàfooter. Quan trọng là bạn chỉ cần viết CSS này một lần trong filestyle.cssvà nó sẽ được áp dụng cho tất cả các trang HTML liên kết đến nó.
Bước 4: Mở website của bạn
Lưu tất cả các file vào đúng vị trí trong cấu trúc thư mục bạn đã tạo. Mở file index.html bằng trình duyệt của bạn. Bạn sẽ thấy trang chủ hiện lên với menu điều hướng. Click vào các liên kết "Giới thiệu" và "Liên hệ" để kiểm tra xem việc điều hướng có hoạt động đúng không. Chú ý URL trên thanh địa chỉ của trình duyệt sẽ thay đổi khi bạn di chuyển giữa các trang.
Thách thức và Hạn chế của MPA cơ bản
Qua bài thực hành này, bạn có thể thấy rõ một số điểm:
- Dễ dàng xây dựng: Với HTML và CSS cơ bản, việc tạo ra nhiều trang và liên kết chúng lại là tương đối đơn giản.
- SEO tốt: Mỗi trang có URL và nội dung độc lập, giúp các công cụ tìm kiếm dễ dàng index.
Tuy nhiên, bạn cũng sẽ nhận thấy một thách thức lớn:
- Lặp lại mã: Phần header, footer và menu điều hướng đã bị lặp lại trên cả ba file HTML. Nếu bạn muốn thay đổi một mục trong menu, bạn sẽ phải sửa nó ở tất cả các file. Điều này rất tốn thời gian và dễ gây lỗi cho các website lớn hơn.
Đây chính là lý do tại sao trong phát triển web thực tế, người ta thường sử dụng các kỹ thuật hoặc công cụ để giải quyết vấn đề lặp mã trong MPAs, ví dụ như:
- Server-Side Includes (SSI): Cho phép nhúng nội dung của một file vào file khác ngay trên máy chủ.
- Templating Engines (ví dụ: Jinja, EJS, Handlebars): Sử dụng cú pháp đặc biệt để tạo ra các "template" có thể tái sử dụng cho header, footer, v.v.
- Frameworks Back-end (ví dụ: Node.js với Express, Python với Django/Flask, PHP với Laravel): Cung cấp cấu trúc mạnh mẽ để quản lý các view (trang web) và các phần tử dùng chung.
Ở mức độ Front-end cơ bản, bạn có thể tạm thời sử dụng JavaScript để "load" các phần tử chung, nhưng cách này không phổ biến và có thể ảnh hưởng đến hiệu suất hoặc SEO.
Comments