Tóm Tắt
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 kinh nghiệm cơ bản về PHP, thì thời điểm ngày hôm nay mình sẽ hướng dẫn những bạn tạo website bằng PHP. Trong loạt bài viết này, mình sẽ hướng dẫn những bạn tạo website bằng PHP với chủ đề website tin tức đơn thuần. Nội dung của loạt bài viết tạo website bằng PHP gồm có tổng quát nội dung như sau :
- Thiết kế giao diện đơn giản
- Tạo cơ sở dữ liệu
- Thực hiện tạo trang đăng ký, đăng nhập
- Hiển thị bài viết thông qua trang hiển thị bài viết
- Quản lý thông tin người dùng, bài viết ở trang quản trị
- Kết thúc loạt bài tạo website bằng PHP
THIẾT KẾ GIAO DIỆN WEBSITE
Để hoàn toàn có thể tạo website bằng PHP, tiên phong mình sẽ hướng dẫn những bạn phong cách 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à hoàn toàn có thể thấy được bằng mắt. Chẳng hạn như những bạn nhìn vào website https://final-blade.com sẽ thấy menu, phân mục, bài viết, sắc tố, … toàn bộ 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 từ phong cách 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ục
Trước tiên, tất cả 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 tất cả 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:
- thư mục includes (chứa 2 file footer.php và header.php)
- tương tự thư mục style (chứa folder img, js và 1 file style.css). Thư mục img sau này chúng ta sẽ chứa hình ảnh của website, thư mục js sẽ chưa các file js, file style.css để chứa các đoạn mã css của chúng ta
- file index.php
2. Thiết kế giao diện website
Trong file index.php, những bạn chèn nội dung sau :
2 Column Layout — Right Menu with Header & Footer Header...
Heading
This, too, will pass. If the facts don't fit the theory, change the facts. The past has no power over the present moment.Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The past has no power over the present moment .Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The smaller your reality, the more convinced you are that you know everything. This, too, will pass. Peace comes from within. Do not seek it without .Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now . You will not be punished for your anger, you will be punished by your anger. The past has no power over the present moment . You will not be punished for your anger, you will be punished by your anger .Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. Peace comes from within. Do not seek it without. This, too, will pass . You will not be punished for your anger, you will be punished by your anger. The smaller your reality, the more convinced you are that you know everything. If the facts don't fit the theory, change the facts. The past has no power over the present moment .
Sau đó, những bạn vào trình duyệt, chạy đường dẫn : http://localhost/website/index.php, những bạn sẽ thấy được giao diện hiển thị như sau :
Như vậy là tất cả chúng ta đã triển khai xong phong cách thiết kế giao diện tổng quát. Tiếp theo tất cả chúng ta sẽ làm thực thi phân tác bố cục tổng quan file index vào những file con
3. Phân tách bố cục tổng quan file index.php vào những file con
Để hoàn toàn có thể tạo website bằng PHP dễ bảo dưỡng về sau, tất cả chúng ta cần phải phân tách bố cục tổng quan file. Mục đích của việc chia nhỏ file index.php vào những file con là để thuận tiện và thuận tiện quản trị code sau này. Hãy tưởng tượng nếu hàng loạt code đặt hàng loạt 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 triển khai chia nhỏ file index.php thành những phần như sau :
- header, footer (hai phần header và footer, chúng ta sẽ đưa vào lần lượt các file header.php và footer.php)
- style.css
a. Chia nhỏ giao diện vào file header.php
Trong file index.php đã tạo ở trên, những bạn cắt hàng loạt đoạn code như sau :
Gợi ý : Bạn là người mới và muốn khám phá về Bitcoin nhưng không biết khởi đầu từ đâu ? Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé !
Tạo website bằng PHP Header...
hàng loạt đoạn code đã cắt này, những bạn bỏ vào file header.php và save lại .
Trong file index.php, các bạn cắt (ctrl + x) toàn bộ đoạn code như sau :
và bỏ vào file footer.php, rồi save lại .
c. Chỉnh sửa lại file index.php
Sau khi đã cắt đi 2 phần code của trang index.php, lúc này bạn cần phải include 2 thành phần đã cắt đó vào, sử dụng 2 đoạn mã dưới đây bỏ vào đầu và cuối file index.php
Lúc này bạn sẽ được file index.php có nội dung như sau :
Heading
This, too, will pass. If the facts don't fit the theory, change the facts. The past has no power over the present moment.Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The past has no power over the present moment .Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. The smaller your reality, the more convinced you are that you know everything. This, too, will pass. Peace comes from within. Do not seek it without .Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now . You will not be punished for your anger, you will be punished by your anger. The past has no power over the present moment . You will not be punished for your anger, you will be punished by your anger .Heading
The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now. Peace comes from within. Do not seek it without. This, too, will pass . You will not be punished for your anger, you will be punished by your anger. The smaller your reality, the more convinced you are that you know everything. If the facts don't fit the theory, change the facts. The past has no power over the present moment .
d. Chia file header.php vào file style.css
Trong file header.php của tất cả chúng ta lúc này, những bạn sẽ thấy chứa đoạn mã css, tất cả chúng ta sẽ liên tục cắt hàng loạt đoạn mã css này vào file style.css .
Các bạn cắt hàng loạt đ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 h1 {
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 :
Tạo website bằng PHP Header...
Giờ thì những bạn vào trình duyệt, chạy lại đường dẫn http://localhost/website/index.php. Bạn sẽ thấy trang index.php không có gì đổi khác như khởi đầu, nhưng lúc này những đoạn mã trong file index.php đã được chia thành những file con nhỏ hơn. Rất thuận tiện để tất cả chúng ta hoàn toàn có thể code và lan rộng ra sau này. Điều này rất quan trọng, vì nếu ngay từ giờ đây tất cả chúng ta không chia nhỏ những thành phần của website ra thì sau này, trong quy trình tạo website bằng PHP những bạn sẽ gặp rất nhiều khó khăn vất vả và rối rắm .
Tổng Kết
Vậy là mình đã hướng dẫn những bạn xong cách tạo giao diện website tin tức, bài viết tiên phong của loạt bài tạo website bằng PHP. Bài tiếp nối tất cả chúng ta sẽ liên tục tạo cơ sở tài liệu cho website .
Chúc những bạn học tốt !
Mình là Hiếu.
Người sáng lập ra blog Kungfu PHP chia sẻ mọi thứ về tiền điện tử, mmo, lập trình,…
Một câu nói mà mình rất thích đó là “Cuộc đời chỉ có một, vì thế hãy làm những gì khiến bạn hạnh phúc và ở bên người khiến bạn luôn mỉm cười”.
Hy vọng nơi đây là góc cafe nhỏ để chúng ta có thể trao đổi, cùng nhau phát triển.
► Nếu bạn thấy bài viết bạn đang đọc có ích, hãy mời mình một ly cafe nhé : https://final-blade.com/donate
Source: https://final-blade.com
Category: Kiến thức Internet
