Code giao diện web php
Mục lục Show
TẠO WEBSITE BẰNG PHP (PHẦN 1 : THIẾT KẾ GIAO DIỆN)Sau khi đã trải qua những bài học cơ bản về PHP, thì hôm nay mình sẽ hướng dẫn các bạn tạo website bằng PHP. Trong loạt bài viết này, mình sẽ hướng dẫn các bạn tạo website bằng PHP với chủ đề website tin tức đơn giản. Nội dung của loạt bài viết tạo website bằng PHP bao gồm tổng quát nội dung như sau :
THIẾT KẾ GIAO DIỆN WEBSITEĐể có thể tạo website bằng PHP, đầu tiên mình sẽ hướng dẫn các bạn thiết kế giao diện website. Giao diện website chính là thành phần sẽ hiển thị ra bên ngoài người dùng và có thể thấy được bằng mắt. Chẳng hạn như các bạn nhìn vào website https://kungfuphp.com sẽ thấy menu, chuyên mục, bài viết, màu sắc,…tất cả những thứ này gộp chung lại gọi lại giao diện website Giao diện website được tạo nên bằng ngôn ngữ thiết kế web như là : HTML, CSS, Javascript,.. Ok, chúng ta đã nắm sơ về khái niệm giao diện website rồi. Giờ thì bắt tay vào thiết kế nào ! 1. Tạo cấu trúc thư mụcTrước tiên, chúng ta cần phải tạo cấu trúc thư mục để chứa mã nguồn website tin tức. Cấu trúc thư mục mã nguồn của chúng ta sẽ giống như sau đây: Trong thư mục gốc của website, ta tạo 1 folder đặt tên là website. Trong thư mục website này sẽ bao gồm:
2. Thiết kế giao diện websiteTrong file index.php, các bạn chèn nội dung sau :
Sau đó, các bạn vào trình duyệt, chạy đường dẫn : http://localhost/website/index.php , các bạn sẽ thấy được giao diện hiển thị như sau: Như vậy là chúng ta đã hoàn thành thiết kế giao diện tổng quát. Tiếp theo chúng ta sẽ làm thực hiện phân tác bố cục file index vào các file con 3. Phân tách bố cục file index.php vào các file conĐể có thể tạo website bằng PHP dễ bảo trì về sau, chúng ta cần phải phân tách bố cục file. Mục đích của việc chia nhỏ file index.php vào các file con là để dễ dàng và thuận tiện quản lý code sau này. Hãy tưởng tượng nếu toàn bộ code đặt toàn bộ trong file index.php trên thì mỗi lần bạn quay lại sửa 1 cái gì đó thì sẽ rối rắm, nhức đầu. Đó sẽ là 1 cơn ác mộng. Ta tiến hành chia nhỏ file index.php thành các phần như sau:
Trong file index.php đã tạo ở trên, các bạn cắt toàn bộ đoạn code như sau :
Trong file header.php của chúng ta lúc này, các bạn sẽ thấy chứa đoạn mã css, chúng ta sẽ tiếp tục cắt toàn bộ đoạn mã css này vào file style.css. Các bạn cắt toàn bộ đoạn mã sau trong file header.php body { margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; } header { background: #ccc; height: 100px; } header h2 { margin: 0; padding-top: 15px; } main { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 100%; } nav { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 230px; margin-left: -230px; background: #eee; } footer { clear: left; width: 100%; background: #ccc; text-align: center; padding: 4px 0; } #wrapper { overflow: hidden; } #content { margin-right: 230px; /* Same as 'nav' width */ } .innertube { margin: 15px; /* Padding for content */ margin-top: 0; } p { color: #555; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul a { color: darkgreen; text-decoration: none; } và bỏ vào file style.css, đồng thời sửa lại file header.php 1 chút như sau :
|