Hôm nay, mình sẽ hướng dẫn các bạn thiết kế giao diện website bằng PHP để tạo một trang tin tức đơn giản. Nội dung của bài viết này sẽ giúp bạn hiểu được quy trình thiết kế giao diện như sau:
Contents
Thiết kế giao diện website
Giao diện của website là phần hiển thị ngoài mà người dùng có thể nhìn thấy. Bạn có thể thấy ví dụ về giao diện trang web tại trang https://kungfuphp.com với các mục, bài viết, màu sắc, v.v…
Giao diện website được tạo ra bằng các ngôn ngữ thiết kế web như HTML, CSS, Javascript, v.v…
Bây giờ, chúng ta sẽ bắt đầu thiết kế giao diện!
1. Tạo cấu trúc thư mục
Trước tiên, chúng ta cần tạo cấu trúc thư mục để chứa mã nguồn của trang tin tức. Cấu trúc thư mục sẽ là như sau:
Trong thư mục gốc của website, bạn tạo một thư mục có tên là “website”. Trong thư mục “website” này, chúng ta sẽ có:
- Thư mục “includes” (chứa 2 file “footer.php” và “header.php”)
- Thư mục “style” (chứa thư mục “img”, “js” và một file “style.css”). Thư mục “img” sẽ chứa các hình ảnh của website, thư mục “js” sẽ chứa các file javascript, file “style.css” sẽ chứa đoạn mã CSS của chúng ta.
- File “index.php”
2. Thiết kế giao diện website
Trong file index.php, bạn chèn nội dung sau:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Layout — Right Menu with Header &amp; Footer</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<header>
<div class="innertube">
<h1>Header...</h1>
</div>
</header>
<div id="wrapper">
<main>
<div id="content">
<div class="innertube">
<h1>Heading</h1>
This, too, will pass. If the facts don't fit the theory, change the facts. The past has no power over the present moment.
<h3>Heading</h3>
<p>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.</p>
<h3>Heading</h3>
<p>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.</p>
<h3>Heading</h3>
<p>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.</p>
<p>You will not be punished for your anger, you will be punished by your anger. The past has no power over the present moment.</p>
<p>You will not be punished for your anger, you will be punished by your anger.</p>
<h3>Heading</h3>
<p>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.</p>
<p>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.</p>
</div>
</div>
</main>
<nav>
<div class="innertube">
<h3>Right heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<h3>Right heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<h3>Right heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</nav>
<footer>
<div class="innertube">
<p>Footer...</p>
</div>
</footer>
</body>
</html>
Sau đó, bạn mở trình duyệt và truy cập vào đường dẫn http://localhost/website/index.php, bạn sẽ thấy giao diện trang web như sau:
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ẽ phân tách bố cục của file index vào các file con.
3. Phân tách bố cục của file index.php vào các file con
Để dễ dàng bảo trì và quản lý mã nguồn trong tương lai, chúng ta cần phân tách bố cục của file index.php thành các file con nhỏ. Mục đích của việc này là giúp chúng ta dễ dàng chỉnh sửa và mở rộng code sau này. Nếu không phân tách code từ đầu, việc chỉnh sửa sau này sẽ rất phức tạp và khó khăn.
Chúng ta tiến hành phân tách file index.php như sau:
a. Chia nhỏ giao diện vào file header.php
Trong file index.php, bạn cắt toàn bộ đoạn mã sau:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tạo website bằng PHP</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<header>
<div class="innertube">
<h1>Header...</h1>
</div>
</header>
<div id="wrapper">
<main>
<div id="content">
Và bỏ vào file header.php, sau đó lưu lại.
b. Tách giao diện trang web vào file footer.php
Trong file index.php, bạn cắt toàn bộ đoạn mã sau:
</div>
<footer>
<div class="innertube">
<p>Footer...</p>
</div>
</footer>
</body>
</html>
Và bỏ vào file footer.php, sau đó lưu 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, bạn cần include 2 file đã cắt vào, sử dụng 2 đoạn mã sau đây bỏ vào đầu và cuối file index.php:
<?php include "includes/header.php" ?>
<?php include "includes/footer.php" ?>
Lúc này mã nguồn của file index.php sẽ có nội dung như sau:
<?php include "includes/header.php" ?>
<div class="innertube">
<h1>Heading</h1>
This, too, will pass. If the facts don't fit the theory, change the facts. The past has no power over the present moment.
<h3>Heading</h3>
<p>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.</p>
<h3>Heading</h3>
<p>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.</p>
<h3>Heading</h3>
<p>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.</p>
<p>You will not be punished for your anger, you will be punished by your anger. The past has no power over the present moment.</p>
<p>You will not be punished for your anger, you will be punished by your anger.</p>
<h3>Heading</h3>
<p>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.</p>
<p>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.</p>
</div>
</div>
</main>
<nav>
<div class="innertube">
<h3>Right heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<h3>Right heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<h3>Right heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</nav>
<?php include "includes/footer.php" ?>
d. Chia file header.php thành file style.css
Trong file header.php, bạn sẽ thấy chứa mã CSS, chúng ta sẽ cắt toàn bộ đoạn mã CSS này vào file style.css.
Bạn cắt toàn bộ đoạn mã CSS 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 chỉnh sửa file header.php như sau:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tạo website bằng PHP</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header>
<div class="innertube">
<h1>Header...</h1>
</div>
</header>
<div id="wrapper">
<main>
<div id="content">
Giờ đây, bạn mở trình duyệt và thử truy cập lại vào đường dẫn http://localhost/website/index.php. Trang index.php không có gì thay đổi so với trước đây, nhưng lúc này mã nguồn đã được chia thành các file con nhỏ. Điều này rất thuận tiện để code và mở rộng trong tương lai. Chúng ta đã hoàn thành bước thiết kế giao diện website tin tức đầu tiên trong loạt bài tạo website bằng PHP. Trong bài tiếp theo, chúng ta sẽ tiếp tục tạo cơ sở dữ liệu cho website.
Chúc các bạn học tốt!