Hướng dẫn php website structure - cấu trúc trang web php
Khi bắt đầu nghĩ tới việc xây dựng một website “nghiêm túc” hơn một chút, bạn có thể sẽ gặp ngay một loạt vấn đề. Ví dụ như cần tạo những thư mục nào, tạo những file nào, làm sao để thống nhất giao diện giữa các page trong cùng một site. Đây là những vấn đề chung mà người mới học đều gặp phải. Trong bài học này chúng ta sẽ xem xét một số cách đơn giản để giải quyết các vấn đề này.
Cấu trúc web page
Trong các bài học trước bạn đã biết cách tạo ra một trang web [web page] bằng PHP. Một trang web chỉ đơn giản là các markup HTML có sẵn kết hợp với nội dung do mã PHP tính ra. Mỗi trang web được truy xuất từ trình duyệt qua một URL xác định.trang web [web page] bằng PHP. Một trang web chỉ đơn giản là các markup HTML có sẵn kết hợp với nội dung do mã PHP tính ra. Mỗi trang web được truy xuất từ trình duyệt qua một URL xác định.
Mặc dù người thiết kế và lập trình ra website có thể tùy ý sáng tạo ra các page, thông thường các page nội dung đều có cấu trúc chung gần giống nhau. Người ta cũng gọi sự bố trí các phần trên một page là layout của page đó.layout của page đó.
Hình dưới đây minh họa cấu trúc [layout] thường gặp ở các web page.
Home
About
Contact
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.content {
background-color: #ddd;
padding: 10px;
}
.header, .footer {
background-color: #f1f1f1;
padding: 10px;
}
.container {
width: 75%;
margin: 0 auto;
}Chúng ta sẽ sử dụng template này ở các phần sau của bài học.
Ngoài ra, trên Internet có thể tìm thấy rất nhiều page template miễn phí như //templated.co/, //freewebsitetemplates.com/.
Cấu trúc website
Tập hợp của các trang web với cùng một host tạo ra một site [cũng gọi là website hoặc web site]. Đôi khi một site cũng nằm gọn trong một sub-directory của một host.site [cũng gọi là website hoặc web site]. Đôi khi một site cũng nằm gọn trong một sub-directory của một host.
Để đảm bảo người dùng có thể dễ dàng truy xuất tất cả các page trong site, người ta thưởng tổ chức nội dung của các page theo một logic hoặc cấu trúc nhất định.tổ chức nội dung của các page theo một logic hoặc cấu trúc nhất định.
Loại cấu trúc thường gặp là cấu trúc cây.
Trang chủ
Giới thiệu
Blog
Hướng dẫnNhìn chung các đường link từ trang nọ tới trang kia thường được đặt tập trung trong navigation menu ở đầu trang. Trong template ở trên đã xây dựng sẵn class dành cho navigation menu.
Cấu trúc file/thư mục
Một site, cũng giống như một phần mềm, sẽ phải bao gồm nhiều file và thư mục. Khác biệt với các phần mềm, các site thường bao gồm thêm một số thư mục và file đặc thù.
Nhìn chung hầu như site nào cũng cần có các thư mục/file chung sau:
Thư mục css: chứa các file css [Cascading Style Sheets] dùng trong định dạng các page. Thông thường các style đặc thù của site được đặt trong file css\styles.css. Bạn nên tham chiếu tới file này từ phần header của mỗi page.css: chứa các file css [Cascading Style Sheets] dùng trong định dạng các page. Thông thường các style đặc thù của site được đặt trong file css\styles.css. Bạn nên tham chiếu tới file này từ phần header của mỗi page.
Thư mục js: chứa các file Javascript. Hiện nay hầu như site nào cũng sử dụng Javascript. Những thành phần như navigation menu đều đòi hỏi Javascript để tạo các hiệu ứng động. Ít nhất bạn cũng nên tạo một file js\scripts.js và nhúng vào cuối phần body của các page để dự phòng.js: chứa các file Javascript. Hiện nay hầu như site nào cũng sử dụng
Javascript. Những thành phần như navigation menu đều đòi hỏi Javascript để tạo các hiệu ứng động. Ít nhất bạn cũng nên tạo một file js\scripts.js và nhúng vào cuối phần body của các page để dự phòng.
Thư mục images: chứa các file ảnh sử dụng cho các page. Bạn nên tập trung toàn bộ ảnh vào đây để dễ kiểm soát và sử dụng. Ít nhất mỗi site cũng cần có một file logo để nhận diện.images: chứa các file ảnh sử dụng cho các page. Bạn nên tập trung toàn bộ ảnh vào đây để dễ kiểm soát và sử dụng. Ít nhất mỗi site cũng cần có một file logo để nhận diện.
File favicon.ico: file biểu tượng của site. File này cần nằm trong thư mục gốc của site. Các trình duyệt thường tự động tìm và tải file này làm biểu tượng trên tab khi mở page của site.favicon.ico: file biểu tượng của site. File này cần nằm trong thư mục
gốc của site. Các trình duyệt thường tự động tìm và tải file này làm biểu tượng trên tab khi mở page của site.
Thư mục lib hay vendor: chứa các thư viện của các hãng thứ ba. Các thư viện thứ ba hay gặp là Bootstrap [css], JQuery [Javascript]. Bạn cũng có thể cài đặt thêm các gói thư viện PHP bằng Composer.lib hay vendor: chứa các thư viện của các hãng thứ ba. Các thư viện thứ ba hay gặp là Bootstrap [css], JQuery [Javascript]. Bạn cũng có thể cài đặt thêm các gói thư viện PHP bằng Composer.
Bên cạnh các file/thư mục chung trên, tùy vào mỗi ứng dụng bạn có thể tùy ý tạo cấu trúc file/thư mục riêng.
Ở thư mục gốc của site cần có một file index.php. File index.php có vai trò đặc biệt, gọi là default ducument của thư mục. Nếu trong URL không chỉ định rõ tên file, Apache sẽ tự động hiểu đó là file index.php và sẽ tìm file này.default ducument của thư mục. Nếu trong URL không chỉ định rõ tên file, Apache sẽ tự động hiểu đó là file index.php và sẽ tìm file này.
Nên phân chia file vào các thư mục theo vai trò của code. Thông thường nhất các site đều chứa code thuộc về các nhóm: giao diện [user interface], quy tắc nghiệp vụ [business logic], truy xuất dữ liệu [data service], thư viện dùng chung.
Sử dụng chung header và footer
Qua phân tích cấu trúc web page ở trên và qua kinh nghiệm sử dụng Internet bạn hẳn hình dung ra ngay, hầu như tất cả page trên một site sẽ có cấu trúc và thiết kế thống nhất.
Nhìn chung, tất cả các page trong cùng một site sẽ thống nhất về header, footer, navigation menu. Một số site sử dụng cả sidebar. Sidebar cũng có thể xuất hiện trên một nhóm trang.
Như vậy khi sử dụng PHP xây dựng website sẽ phát sinh ngay vấn đề đầu tiên: làm sao để sử dụng chung header/footer/sidebar/v.v. giữa các page?
Giải pháp đơn giản nhất [và cũng tệ nhất] là copy template cho từng page. Tuy nhiên, hãy nghĩ đến trường hợp bạn thay đổi thiết kế template, và bạn có hàng trăm page! Do vậy, đừng bao giờ nghĩ đến kiểu làm thủ công này.
Hãy cùng thực hiện một ví dụ sau:
[1] Tạo một project mới với các file và thư mục như sau:
Home
About
Contact
Để ý rằng file template cung cấp ban đầu bị tách làm đôi, lấy thẻ là mốc. Logic rất đơn giản: nếu bạn copy code của header.php + nội dung riêng + code của footer.php dồn lại làm một, bạn thu được một file html hoàn chỉnh.
Giờ xây dựng trang index.php như sau:
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed nonummy nibh euismod tincidunt ut laoreet
dolore magna aliat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercita ullamcorper
suscipit lobortis nisl ut aliquip ex consequat.
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit molestie consequat, vel illum
dolore eu feugiat nulla facilisis ats eros et
accumsan et iusto odio dignissim qui blandit
prasent up zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem euismod tincidunt
erat volutpat.
Libero justo laoreet sit amet cursus sit amet dictum sit.
Viverra maecenas accumsan lacus vel facilisis volutpat
est velit egestas. Est placerat in egestas erat imperdiet
sed euismod. Nisl nunc mi ipsum faucibus vitae aliquet.
Sit amet nulla facilisi morbi tempus iaculis urna.
Quis vel eros donec ac odio tempor.
Về sau, khi cần tạo bất kỳ trang nào sử dụng chung mẫu thiết kế, bạn chỉ cần include phần header và footer vào trang.
Tạo layout chung với output buffer
Phương pháp tách file ở trên đơn giản cả về cách suy nghĩ và thực hiện. Thực tế là rất nhiều người đã sử dụng cách thức này. Trong PHP có nhiều cách khác để đạt được hiệu quả tương tự. Một trong những cách đơn giản là sử dụng tính năng output buffer của PHP.
Output buffer là một tính năng đặc biệt của PHP. Bình thường khi thực hiện đến các lệnh in như echo, print, hoặc gặp các đoạn văn bản ngoài khối PHP, PHP sẽ xuất ngay nội dung đó ra nơi sử dụng. Tính năng output buffer sẽ ngăn quá trình xuất nội dung này. Thay vào đó, nội dung sẽ được đưa vào một bộ nhớ đệm. Bạn có thể đưa toàn bộ nội dung từ bộ nhớ đệm vào một biến để sử dụng. là một tính năng đặc biệt của PHP. Bình thường khi thực hiện đến các lệnh in như echo, print, hoặc gặp các đoạn văn bản ngoài khối PHP, PHP sẽ xuất ngay nội dung đó ra nơi sử dụng.
Tính năng output buffer sẽ ngăn quá trình xuất nội dung này. Thay vào đó, nội dung sẽ được đưa vào một bộ nhớ đệm. Bạn có thể đưa toàn bộ nội dung từ bộ nhớ đệm vào một biến để sử dụng.
Kỹ thuật này được lợi dụng để tạo ra layout chung cho các trang theo logic sau:
- Tạo một file layout [template] với các biến có sẵn ở những vị trí cần xuất dữ liệu;
- Mỗi trang cụ thể sẽ áp dụng kỹ thuật output buffer để xuất dữ liệu vào một biến, thay vì xuất thẳng cho Apache;
- Include file template vào từng trang và cung cấp biến chứa dữ liệu kết quả.
Để dễ hiểu, hãy cùng thực hiện một ví dụ.
[1] Tạo một thư mục mới đặt tên là Template nằm trong htdocs và tạo PhpStorm project từ thư mục này.Tạo một thư mục mới đặt tên là Template nằm trong htdocs và tạo PhpStorm project từ thư mục này.
Tạo thêm các file và thư mục trong project như sau:
Home
About
Contact