Tạo trang hiển thị nội dung bài viết – Tạo website bằng PHP (phần 7)

Sau khi đã tạo xong trang hiển thị danh sách bài viết, thì trong bài này mình sẽ tiếp tục hướng dẫn các bạn cách tạo trang hiển thị nội dung bài viết bằng PHP. Các bạn lưu ý là những bài viết của mình thường ít chú tâm đến công đoạn chỉnh sửa, styling cho website đẹp bắt mắt bằng HTML, CSS vì những điều này bạn có thể chỉnh sau khi đã nắm được cách thức tạo website bằng PHP thông qua các bài viết của mình. Vì thế giao diện có xấu xí thì các bạn cũng bỏ qua 🙂

TẠO TRANG HIỂN THỊ NỘI DUNG BÀI VIẾT

Nội dung của chính của bài hướng dẫn hôm nay bao gồm 3 phần:

1. Ôn lại bài cũ
2. Thiết kế giao diện trang hiển thị nội dung bài viết
3. Thực hiện truy vấn thông tin và hiển thị nội dung bài viết

Ôn lại bài cũ

Ở bài hôm trước Tạo trang hiển thị danh sách bài viết, chúng ta đã hoàn thành cơ bản phần hiển thị danh sách bài viết lấy từ cơ sở dữ liệu ra ngoài trang index, và ở dưới mỗi bài hiển thị, chúng ta có thêm đường link là Xem thêm, để khi người ta ấn vào sẽ nhảy sang trang display.php với tham số truyền vào là id của bài viết.

Trong bài viết hôm nay thì chúng ta sẽ tạo trang display.php và hứng tham số id truyền vào này để thực hiện truy vấn thông tin và hiển thị nội dung bài viết.

Thiết kế giao diện trang hiển thị nội dung bài viết

Tại thư mục gốc của folder website mà chúng ta đã tạo ra trong các bài trước, các bạn tạo một file mới và đặt tên là display.php như hình sau

Ở file này, chúng ta sẽ có nội dung như sau :

<?php require_once("includes/connection.php"); ?>
<?php include "includes/header.php" ?>
			<div class="innertube">
			</div>
		</main>
	<?php include "includes/menu.php" ?>
<?php include "includes/footer.php" ?>

Các bạn để ý, ở file display.php này so với file index.php sẽ có sự khác nhau nhỏ nhỏ ở đoạn

<?php include "includes/menu.php" ?>

Đó chính là mình đã copy toàn bộ đoạn code html tĩnh là

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

bỏ vào file includes/menu.php, sau đó trong file display.php mình chỉ include file menu này vào để nhìn cho code gọn hơn, đỡ rồi rắm chứ không có gì phức tạp cả.

Giờ thì các bạn vào trang index.php và ấn vào link Xem thêm. Các bạn sẽ thấy hiện thị ra trang display.php trống trơn, đó là bởi vì chúng ta chỉ mới tạo giao diện chứ chưa thực hiện truy vấn lấy thông tin bài viết gì cả.

Thực hiện truy vấn thông tin và hiển thị nội dung bài viết

Phần này mình sẽ hướng dẫn các bạn thực hiện hiển thị nội dung bài viết chi tiết như sau.

Đầu tiên các bạn để ý rằng khi chúng ta ấn vào link Xem thêm, ta sẽ được điều hướng tới trang display.php với địa chỉ url có nội dung như sau

localhost/website/display.php?id=xxx

Ở đây, xxx chính là tham số id của bài viết mà chúng ta đã truyền vào ở bài viết trước. Bây giờ chúng ta sẽ thực hiện thấy biến này bằng phương thức GET như sau

$id = intval($_GET['id']);

Sau khi đã lấy được tham số id bài viết, thì ta sẽ thực hiện viết câu query truy vấn thông tin nội dung bài viết từ cơ sở dũ liệu thông qua tham số id này.

// Lấy ra nội dung bài viết theo điều kiện id
$sql = "select * from posts where id = $id";
// Thực hiện truy vấn data thông qua hàm mysqli_query
$query = mysqli_query($conn,$sql);

Sau khi đã thực thi câu query và lấy dữ liệu trả về, ta sẽ tiếp tục hiển thị dữ liệu này ra trang display.php như sau

<div class="innertube">
<?php 
	while ( $data = mysqli_fetch_array($query) ) {
?>
	<h3><?php echo $data['title']; ?></h3></div></ br>
	<i> Ngày tạo : <?php echo $data['createdate']; ?></i>
	<p><?php echo $data['content']; ?></p>
<?php } ?>
</div>

Ở đoạn code trên, chúng ta sẽ echo ra các thông tin bao gồm tiêu đề bài viết (title), ngày tạo bài viết (createdae), và nội dung chính của bài viết (content)

Như vậy, toàn bộ nội dung của trang hiển thị nội dung bài viết sẽ như dưới đây:

<?php require_once("includes/connection.php"); ?>
<?php include "includes/header.php" ?>
<?php
	$id = -1;
	if (isset($_GET["id"])) {
		$id = intval($_GET['id']);
	}
	// Lấy ra nội dung bài viết theo điều kiện id
	$sql = "select * from posts where id = $id";
	// Thực hiện truy vấn data thông qua hàm mysqli_query
	$query = mysqli_query($conn,$sql);
?>
			<div class="innertube">
			<?php 
				while ( $data = mysqli_fetch_array($query) ) {
			?>
				<h3><?php echo $data['title']; ?></h3></div></ br>
				<i> Ngày tạo : <?php echo $data['createdate']; ?></i>
				<p><?php echo $data['content']; ?></p>
			<?php } ?>
			</div>
		</main>
	<?php include "includes/menu.php" ?>
<?php include "includes/footer.php" ?>

Giờ thì các bạn vào lại trang index.php và ấn vào link Xem thêm của một bài viết bất kì, sẽ được chuyển hướng sang trang display.php và hiển thị toàn bộ thông tin đầy đủ của bài viết đó như dưới đây

Tổng kết

Kết thúc bài viết hôm nay, tuy khá dài nhưng bản chất rất đơn giản, chỉ là chúng ta lấy tham số id truyền trên thanh địa chỉ của browser qua phương thức $_GET, sau đó thực hiện truy vấn và hiển thị dữ liệu thông qua tham số id này.

Nếu bạn có bất kỳ thắc mắc nào thì để lại bình luận bên dưới bài này nhé. Nếu bạn muốn cập nhật những bài viết mới nhất từ Kungfu PHP thì để lại thông tin dưới form này và ấn Đăng ký nhé.

Hiếu

Nhìn avatar mình như hoạt hình trẻ trâu phải không? Lại còn không để ảnh đại diện thật nữa chứ? À, thật ra thì mình chỉ muốn các bạn tập trung vào nội dung, giá trị mình chia sẻ, chứ mình không thích mặc vest này nọ rồi để avatar xịn xò để thu hút bằng vẻ chuyên nghiệp đâu. Thông cảm cho mình nhé 😀