CƠ HỘI ĐẦU TƯ TRONG LỊCH SỬ KHÔNG THỂ BỎ QUA?

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

>> Xem tại đây <<

Trang chủ / PHP cơ bản / Tạo trang hiển thị danh sách bài viết – Tạo website bằng PHP (phần 6)

Tạo trang hiển thị danh sách bài viết – Tạo website bằng PHP (phần 6)

Ở bài trước, chúng ta đã tiến hành tạo trang Thêm bài viết và lưu thông tin bài viết bao gồm : tiêu đề, nội dung, người tạo, ngày tháng tạo,… xuống cơ sở dữ liệu. Trong bài viết hôm nay, mình sẽ tiếp tục hướng dẫn các bạn cách hiển thị danh sách bài viết đã lưu ra bên ngoài giao diện website để người dùng khi vào trang web của chúng ta có thể đọc được.

TẠO TRANG HIỂN THỊ DANH SÁCH BÀI VIẾT

Nội dung của phần này bao gồm :

  • Thiết kế giao diện hiển thị danh sách bài viết
  • Hiển thị danh sách bài viết ở trang index.php
  • Tạo trang display.php để hiển thị toàn bộ bài viết

1. Thiết kế giao diện hiển thị danh sách bài viết

Các bạn mở file index.php trong thư mục website, và thay thế toàn bộ nội dung cũ bằng nội dung mới như dưới đây

<?php include "includes/header.php" ?>
			<div class="innertube">
				<table width="100%" border="1">
					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

				</table>	
			</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" ?>

Sau đó chạy đường dẫn

http://localhost/website/index.php

các bạn sẽ có được giao diện như sau :

hiển thị bài viết php

Giải thích : Ở trang index, chúng ta thiết kế danh sách bài viết của chúng ta đã lưu trong cơ sở dữ liệu, mỗi một bài viết hiển thị trong list bao gồm :

  • Tiêu đề
  • Nội dung rút gọn của bài viết
  • Đường dẫn Xem thêm để khi chúng ta click vào đường dẫn này, sẽ dẫn chúng ta tới trang hiển thị toàn bộ nội dung bài viết

2. Hiển thị dữ liệu danh sách động lấy từ cơ sở dữ liệu

Ở phần 1, chúng ta mới chỉ dừng lại ở việc thiết kế danh sách hiển thị bài viết, trong phần 2 này, mình sẽ hướng dẫn các bạn kết nối đến cơ sở dữ liệu, và lấy ra dữ liệu động hiển thị lên trang index đã được thiết kế.

a. Tạo kết nối đến cơ sở dữ liệu

Để có thể lấy dữ liệu từ database, như các bài viết trước, chúng ta cần phải include file connection.php vào

<?php require_once("includes/connection.php"); ?>

b. Viết query truy vấn dữ liệu

Sau khi đã kết nối đến database, ta sẽ viết query để lấy dữ liệu ra và hiển thị lên trang như giao diện đã thiết kế

<?php
	// Lấy 16 bài viết mới nhất đã được phép public ra ngoài từ bảng posts
	$sql = "select * from posts where is_public = 1 order by createdate desc limit 16";
	// Thực hiện truy vấn data thông qua hàm mysqli_query
	$query = mysqli_query($conn,$sql);
?>

c. Vòng lặp lấy dữ liệu hiển thị

Sau khi đã thực hiện lấy ra dữ liệu, ta sẽ dùng vòng lặp while lấy ra dữ liệu từng row và hiển thị ra ngoài

Đầu tiên, trong file index.php,  các bạn XÓA đi toàn bộ đoạn code bắt đầu từ <table> cho đến kết thúc là </table>

<table width="100%" border="1">
					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

					<tr>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>
						</td>
						<td>
							<b>Bài 1</b>
							<p>Đây là nội dung bài 1</p>
							<a href=""> Xem thêm</a>	
						</td>
					</tr>

				</table>

Và thay thế bằng đoạn code sau :

				<table width="100%" border="1">
					<tr>
					<?php
						// Khởi tạo biến đếm $i = 0
						$i = 0;
						// Lặp dữ liệu lấy data từ cơ sở dữ liệu
						while ( $data = mysqli_fetch_array($query) ) {
							// Nếu biến đếm $i = 4, tức là vòng lặp chạy tới bài viết thứ tư thì ta thực hiện xuống hàng cho bài viết kế tiếp
							// Vì mỗi dòng hiển thị, ta chỉ hiển thị 4 bài viết
							if ($i == 4) {
								echo "</tr>";
								$i = 0;
							}
					?>
						<td >
							<b><?php echo $data["title"];// In ra title bài viết ?></b>
							<p><?php echo substr($data["content"], 0, 100)." ...";// In ra nội dung bài viết lấy chỉ 100 ký tự ?></p>
							<a href="display.php?id=<?php echo $data["id"]; // Tạo liên kết đến trang display.php và truyền vào id bài viết ?>"> Xem thêm</a>
						</td>
					
					<?php
							$i++;
						}
					?>
				</table>

d. Giải thích đoạn code ở phần c

Như các bạn thấy ở phần c , mình đã xóa đi toàn bộ phần code table trong thiết kế giao diện và thay thế bằng đoạn code mới. Đoạn code này, mình đã giải thích khá kỹ bằng các comment bên trong code. Nhưng mình cũng xin giải thích lại 1 lần nữa cho những bạn còn chưa hiểu.

Ở phần thiết kế giao diện hiển trị bài viết, các bạn thấy rằng mỗi một dòng chúng ta sẽ hiển thị 4 bài viết, sau đó xuống hàng và hiển thị tiếp 4 bài viết khác, cứ như thế lặp đi lặp lại. Chính vì thế mình đã khởi tạo 1 biến đếm là $i, khi biến $i = 4 tức là đã có 4 bài viết được hiển thị ra ngoài thì mình sẽ

echo "</tr>"

để xuống hàng, đồng thời reset biến đếm $i trở  về bằng 0. Cứ như thế, lặp đi lặp lại ta sẽ có mỗi dòng là 4 bài viết.

e. Toàn bộ code trang index.php

Như vậy, toàn bộ code trang index.php lúc này sẽ là

<?php require_once("includes/connection.php"); ?>
<?php include "includes/header.php" ?>
<?php
	// Lấy 16 bài viết mới nhất đã được phép public ra ngoài từ bảng posts
	$sql = "select * from posts where is_public = 1 order by createdate desc limit 16";
	// Thực hiện truy vấn data thông qua hàm mysqli_query
	$query = mysqli_query($conn,$sql);
?>
			<div class="innertube">
				<table width="100%" border="1">
					<tr>
					<?php
						// Khởi tạo biến đếm $i = 0
						$i = 0;
						// Lặp dữ liệu lấy data từ cơ sở dữ liệu
						while ( $data = mysqli_fetch_array($query) ) {
							// Nếu biến đếm $i = 4, tức là vòng lặp chạy tới bài viết thứ tư thì ta thực hiện xuống hàng cho bài viết kế tiếp
							// Vì mỗi dòng hiển thị, ta chỉ hiển thị 4 bài viết
							if ($i == 4) {
								echo "</tr>";
								$i = 0;
							}
					?>
						<td >
							<b><?php echo $data["title"];// In ra title bài viết ?></b>
							<p><?php echo substr($data["content"], 0, 100)." ...";// In ra nội dung bài viết lấy chỉ 100 ký tự ?></p>
							<a href="display.php?id=<?php echo $data["id"]; // Tạo liên kết đến trang display.php và truyền vào id bài viết ?>"> Xem thêm</a>
						</td>
					
					<?php
							$i++;
						}
					?>
				</table>	
			</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" ?>

Giờ thì các bạn chạy lại đường dẫn http://localhost/website/index.php sẽ thấy hiển thị ra ngoài các bài viết được lấy từ cơ sở dữ liệu được sắp xếp theo thứ tự bài viết mới nhất trước như sau :

hiển thị danh sách bài viết từ cơ sở dữ liệu

 

3. Tổng kết

Mình dừng bài viết này ở đây, vì nếu viết quá dài sẽ gây khó hiểu và mệt mỏi cho các bạn. Toàn bộ nội dung bài viết này là lấy dữ liệu từ cơ sở dữ liệu và hiển thị ra ngoài giao diện. Trong bài viết tiếp theo, mình sẽ hướng dẫn các bạn tạo trang display.php để hiển thị toàn bộ nội dung bài viết khi người dùng ấn vào link Xem thêm mà chúng ta đã tạo trong bài viết này.

Kết thúc bài viết, nếu bạn có bất kỳ thắc mắc nào thì để lại comment bên dưới, chúng ta sẽ cùng nhau thảo luận. Nếu thấy bài viết hay thì đừng quên ấn nút  share bên dưới để mọi người cùng nhau học nhé.

Hệ thống sẽ tự động gửi bài viết đến email các bạn khi có bài mới. Hoặc ấn like fanpage Kungfu PHP để cập nhật bài viết thường xuyên nhé.

P/S : Bài viết là công sức mình và thời gian mình bỏ ra chia sẽ đến các bạn, hy vọng các bạn học tốt hơn, nên bạn nào copy bài, vui lòng ghi rõ nguồn giúp mình nhé. Đây là nguyên tắc tôn trọng người viết bài,

Chúc các bạn học tốt !

Để theo dõi loạt bài viết, các bạn nhập địa chỉ email của mình vào phần “Đăng ký nhận bài viết” ở thanh sidebar bên phải. Hoặc điền thông tin và ấn đăng ký form dưới đây

Có ích

tạo form upload trong php

Tạo chức năng xóa người dùng (Phần 14)

Ở phần trước mình đã hướng dẫn các tạo trang thêm thành viên, phần này …


Bình luận bằng Facebook ↓


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

23 comments

  1. Avatar

    if ($i == 4) {echo “</tr>”;$i = 0;}Tại sao thẻ </tr> lại này trong đoạn mã này Admin ơi.Để anh, em dễ hiểu Adnin có thể giải thích lại đoạn mã này ạ!

  2. Avatar

    ad cho em hỏi làm sao hiển thị cái ảnh trích dẫn tin tức lên v ad?????

  3. Avatar

    <?php
    $i = 0;
    while ($data = mysqli_fetch_array($query)){
    if ($i == 4){
    echo "”;
    $i = 0;
    }
    ?>

    <a hrep="display.php?id=”>See more

    Thầy cho em hỏi: em đã viết giống thầy nhưng không lấy được dữ liệu ạ !
    và thầy cho e hỏi dấu ngoặc nhọn cuối tại sao nằm trong php ạ ?
    em cảm ơn thầy nhiều ạ ??

  4. Avatar

    Cho em hỏi muốn tạo mục sửa bài viết thì làm giống như sửa thành viên đc k ak

  5. Avatar

    em đã tạo theo như bài viết anh viết nhưng sao nó lại không hiện ra vòng lặp ạ ? nếu xóa code ở đoạn C đi và thay vào bằng vòng lặp là nó k hiện ra gì luôn

  6. Avatar

    Em hơi khó hiểu về điều kiện trong vòng while: while ( $data = mysqli_fetch_array($query) )
    sao không phải là điều kiện dừng vòng lặp bằng cách so sánh $i với $data như này ạ?
    while ($i <= ($data = mysqli_fetch_array($query)))
    Mong Ad giúp!

  7. Avatar

    Hi Anh, nó báo như thế này là lỗi gì a?
    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\xampp\htdocs\website\index.php on line 17

  8. Avatar

    Rat vui duoc lam quen voi Anh.
    Truoc het phai cam on Anh rat nhieu da chia se kien thuc ve lap trinh php ma em may man tim thay duoc qua trang website cua Anh.
    Em dang doc va thuc hanh theo nhung gi Anh huong dan nhung khi den bai 6 thi em gap van de ve trang index.php no khong hien thi danh muc bai viet ra gi ca. Anh lam on co the giai thich va sua giup em duoc khong?
    Cam on Anh rat nhieu.
    Van Hanh

  9. Avatar

    ad oi minh bi loi
    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\AppServ\www\website\index.php on line 16

  10. Avatar

    Khi nào mới có bài hướng dẫn hiện nội dung khi ấn xem thêm vậy ad

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 *