Ở 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.
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é!
Ở 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. 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
Uncaught TypeError: mysqli_fetch_array(): Argument #1 ($result) must be of type mysqli_result, bool given in E:websiteindex.php:16 Stack trace: #0 E:websiteindex.php(16): mysqli_fetch_array(false) #1 {main} thrown in E:websiteindex.php on line 16 lỗi này là sao v admin
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 ạ!
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?????
e upload hình vào một thư mục nào đó, sau đó lưu đường dẫn tới hình ảnh này vào cơ sở dữ liệu, sau đó khi hiển thị thì e chỉ việc sử dụng thẻ img và truyền url tới hình ảnh đó là được nhé
dạ e cảm ơn a ạ chúc a nhiều sức khỏe ra thêm nhiều hướng dẫn hơn nữa ạ
<?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 ạ ??
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
được em nha, về bản chất nó như nhau
Trong câu này <a href="trangsuabaiviet.php?id=” style=”text-decoration:none;”>Sửa thì cái id kia có bị hiểu là id bên bảng user không mak không được ak
e tách ra xử lý riêng thì nó ko hiểu là trùng với id user, trừ khi nào e để chung 1 file xử lý nó mới trùng
Em muốn mỗi trang chỉ hiển thị 4 bài và trang sau hiển thị 4 bài tiếp theo thì làm như thế nào ak
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
Ở đoạn e là toàn bộ code trang index, e đã copy hết và chạy thử chưa ?
e đã copy như a dạy rồi ạ, nói chung là hầu hết toàn copy đoạn cuối cùng (cái đoạn a kết luận là toàn bộ code là như sau)
nhưng vào là mất mấy cái ô slide đó. không biết tại sao ạ 🙁
e thử tìm cách bắt lỗi và debug nhé, ngồi mò mẫm sẽ giúp e mau tiến bộ hơn, e sử dụng 2 lệnh echo và exit() từng đoạn code để xem lỗi ở đâu nhé, có thể là e chưa đăng nhập nên chưa lấy được thông tin bài viết ra
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!
dấu = là phép gán e nhé, tức là vòng lặp while nó sẽ duyệt từng dòng của mysqli_fetch_array($query) và gán vào biến data
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
e check lại câu query xem có đúng chưa nhé
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
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
https://kungfuphp.com/php-co-ban/trang-hien-thi-noi-dung-bai-viet-php.html
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
sắp có rồi nhé bạn, chuẩn bị ra mắt nè