Ở 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 :
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 :
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.
Chúc các bạn học tốt !
Nguồn: Kungfuphp.com
