BẠN ĐÃ NGHE VỀ BITCOIN VÀ MUỐN TÌM HIỂU CHÍNH THỐNG?

HƯỚNG DẪN TOÀN TẬP ĐẦU TƯ VỚI THỊ TRƯỜNG BITCOIN 2021

>> Xem tại đây <<

thiết kế website php

Tạo website bằng PHP : Thiết kế giao diện (Phần 1)

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 :

  1. Thiết kế giao diện đơn giản
  2. Tạo cơ sở dữ liệu
  3. Thực hiện tạo trang đăng ký, đăng nhập
  4. Hiển thị bài viết thông qua trang hiển thị bài viết
  5. Quản lý thông tin người dùng, bài viết ở trang quản trị
  6. Kết thúc loạt bài tạo website bằng PHP

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ục

Trướ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:

  • thư mục includes (chứa 2 file footer.phpheader.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

cấu trúc thư mục website php

2. Thiết kế giao diện website

Trong file index.php, các 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>
	
	</div>
		
	<footer>
		<div class="innertube">
			<p>Footer...</p>
		</div>
	</footer>
</body>
</html>

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:

tạo website bằng php, thiết kế giao diện website php

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:

  • 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, các bạn cắt toàn bộ đoạn code như sau :

Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu? Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!

<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">

toàn bộ đoạn code đã cắt này, các bạn bỏ vào file header.php và save lại.

b. Tách giao diện trang web vào file footer.php

Trong file index.php, các bạn cắt (ctrl + x) toàn bộ đoạn code như sau :

</div>
		
	<footer>
		<div class="innertube">
			<p>Footer...</p>
		</div>
	</footer>
</body>
</html>

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

<?php include "includes/header.php" ?>
<?php include "includes/footer.php" ?>

Lúc này bạn sẽ được file index.php 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 vào file style.css

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 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 :

<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ờ thì các 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ì thay đổi như ban đầu, nhưng lúc này các đoạn mã trong file index.php đã được chia thành các file con nhỏ hơn. Rất thuận tiện để chúng ta có thể code và mở rộng sau này. Điều này rất quan trọng, vì nếu ngay từ bây giờ chúng ta không chia nhỏ các thành phần của website ra thì sau này, trong quá trình tạo website bằng PHP các bạn sẽ gặp rất nhiều khó khăn và rối rắm.

Tổng Kết

Vậy là mình đã hướng dẫn các bạn xong cách tạo giao diện website tin tức, bài viết đầu tiên của loạt bài tạo website bằng PHP. Bài kế tiếp 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 !

Có ích

tạo form upload trong php

Tạo phân quyền cho website PHP – Tạo website bằng PHP (Phần 8)

Đi qua một loạt 7 phần trong chuỗi seri Tạo website bằng PHP, trong phần …


Bình luận trực tiếp ↓

26 bình luận

  1. Trong thư mục gốc của website, ta tạo 1 folder đặt tên là website
    nghĩa là tạo 1 folder đặt tên là website trong thư mục www hay là my_website

  2. sao nav padding-bottom với margin-bottom to thế kia anh 😐

  3. thầy cho em xin sql đc ko ạ !

  4. Em tạo những thư mục và các file ở trên, làm sao cấu hình để có thể chạy link localhost ? Thầy hướng dẫn giúp em ạ ! Cám ơn Thầy !

  5. dùng zenstudio code có dk k thầy

  6. tạo những file đó tạo file trong máy tính ạ thầy

  7. Thầy cho e hỏi cái này e dùng visual studio code dc ko ạ?

  8. Khi tách ra thành các phần của website , includes lại thì phần right heading nó xuống dòng và ko còn nằm ở bên phải nữa .

  9. dùng phần mềm gì để viết vậy thầy ơi

  10. Em muốn cho right heading sang bên phải thì làm như thế nào ạ. ví dụ của thầy vẫn bên trái em không biết làm thế nào cho sang bên phải ạ, mong thầy chỉ giúp

  11. Xin chào thầy, em đang chú ý đến những bài giảng của thầy tại trang web này, hiện tại em đang nhắm đến byethost.com có cung cấp tên miền và SQL database panel free, liệu e có thể thực hành dựa trên nền tảng này được không ạ ?

  12. em đã chia code như ad rồi
    chia từ index ra footer với header rồi kết nối lại như code của ad luôn vẫn không được
    không biết e tạo file sai hay s nữa 🙁

  13. chúng tôi đồng ý các đều khoản của bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *