Bài tập php, php, thiết kế website

Tạo trang hiển thị thông tin có phân trang

Để tạo trang hiển thị có phân trang, chúng ta cần thêm một số bước sau:

  1. Đếm số lượng nhân viên trong cơ sở dữ liệu để biết tổng số trang cần phân trang.
  2. Sử dụng biến $_GET để xác định trang hiện tại và hiển thị chỉ số bắt đầu và kết thúc của dữ liệu cần hiển thị.
  3. Sử dụng câu lệnh SQL để giới hạn số lượng dòng dữ liệu trả về theo từng trang.
  4. Thêm các liên kết để điều hướng giữa các trang.

Dưới đây là mã PHP hoàn chỉnh cho trang hiển thị có phân trang:

<!DOCTYPE html>
<html>
<head>
<title>Quản lý nhân viên</title>
<meta charset='utf-8'>
</head>
<body>
<?php
// Thực hiện kết nối đến cơ sở dữ liệu
$servername = "localhost";
$username = "root";
$password = "";
$database = "quanlynhanvien";
// Tạo kết nối
$conn = new mysqli($servername, $username, $password, $database);
// Kiểm tra kết nối
if ($conn->connect_error) {
die("Kết nối không thành công: " . $conn->connect_error);
}
// Xử lý dữ liệu khi form được gửi đi
// Phân trang
$limit = 5; // Số dòng dữ liệu trên mỗi trang
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$start = ($page - 1) * $limit;
// Truy vấn để lấy danh sách nhân viên trang hiện tại
$sql = "SELECT * FROM nhanvien LIMIT $start, $limit";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<h2>Danh sách nhân viên:</h2>";
echo "<ul>";
while($row = $result->fetch_assoc()) {
echo "<li>" . $row["HoTen"]. " - Giới tính: " . ($row["GioiTinh"] == 1 ? "Nam" : "Nữ") . " - Lương: " . $row["Luong"] . "</li>";
}
echo "</ul>"; 
// Liên kết phân trang
$sql_total = "SELECT COUNT(*) AS total FROM nhanvien";
$result_total = $conn->query($sql_total);
$row_total = $result_total->fetch_assoc();
$total_records = $row_total['total'];
$total_pages = ceil($total_records / $limit);
echo "<div>";
if ($page > 1) {
echo "<a href='?page=1'>&laquo; Trang đầu</a> ";
}
for ($i=1; $i <= $total_pages; $i++) {
echo "<a href='?page=".$i."'>".$i."</a> ";
}
if ($page < $total_pages) {
echo "<a href='?page=".$total_pages."'>Trang cuối &raquo;</a>";
}
echo "</div>";
} else {
echo "Không có nhân viên nào trong cơ sở dữ liệu.";
}
?>
</body>
</html>
<?php
// Đóng kết nối
$conn->close();
?>

Kết quả sau khi phân trang

phân trang

Trong ví dụ trên thực hiện kết nối cơ sở dữ liệu, lấy dữ liệu từ bảng nhanvien và hiển thị phân trang với tiêu chí 5 dòng thành một trang, bạn có thể thay đổi tùy ý. Ngoài ra bạn có thể tham khảo để áp dụng code hiển thị của mình kết hợp với xây dựng thêm các class css để trình bày giao diện đẹp hơn

Hiển thị phân trang theo bảng và bổ sung liên kết Sửa, Xóa

Ví dụ dưới đây, tùy chỉnh đoạn code phân trang ở trên để hiển thị từ dạng list sang dạng bảng và bổ sung thêm nút Sửa, Xóa tương ứng với mỗi dòng dữ liệu

<!DOCTYPE html>
<html>
<head>
<title>Quản lý nhân viên</title>
</head>
<body>
<?php
// Thực hiện kết nối đến cơ sở dữ liệu
$servername = "localhost";
$username = "root";
$password = "";
$database = "quanlynhanvien";
// Tạo kết nối
$conn = new mysqli($servername, $username, $password, $database);
// Kiểm tra kết nối
if ($conn->connect_error) {
die("Kết nối không thành công: " . $conn->connect_error);
}
// Phân trang
$limit = 5; // Số dòng dữ liệu trên mỗi trang
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$start = ($page - 1) * $limit;
// Truy vấn để lấy danh sách nhân viên trang hiện tại
$sql = "SELECT * FROM nhanvien LIMIT $start, $limit";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<h2>Danh sách nhân viên:</h2>";
echo "<table border='1'>
<tr>
<th>Họ Tên</th>
<th>Giới tính</th>
<th>Lương</th>
<th>Sửa</th>
<th>Xóa</th>
</tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["HoTen"] . "</td>";
echo "<td>" . ($row["GioiTinh"] == 1 ? "Nam" : "Nữ") . "</td>";
echo "<td>" . $row["Luong"] . "</td>";
echo "<td><a href='edit.php?id=".$row["id"]."'>Sửa</a></td>"; // Điều hướng đến trang sửa với ID tương ứng
echo "<td><a href='delete.php?id=".$row["id"]."'>Xóa</a></td>"; // Điều hướng đến trang xóa với ID tương ứng
echo "</tr>";
}
echo "</table>";
// Liên kết phân trang
$sql_total = "SELECT COUNT(*) AS total FROM nhanvien";
$result_total = $conn->query($sql_total);
$row_total = $result_total->fetch_assoc();
$total_records = $row_total['total'];
$total_pages = ceil($total_records / $limit);
echo "<div>";
if ($page > 1) {
echo "<a href='?page=1'>&laquo; Trang đầu</a> ";
}
for ($i=1; $i <= $total_pages; $i++) {
echo "<a href='?page=".$i."'>".$i."</a> ";
}
if ($page < $total_pages) {
echo "<a href='?page=".$total_pages."'>Trang cuối &raquo;</a>";
}
echo "</div>";
} else {
echo "Không có nhân viên nào trong cơ sở dữ liệu.";
}
?>
</body>
</html>
<?php
// Đóng kết nối
$conn->close();
?>

Kết quả sau khi phân trang và có thêm nút Sửa, Xóa

Thông thường phân trang khi có thêm nút Sửa, Xóa được sử dụng cho phần Backend. Còn phần Frontend để hiển thị cho người dùng xem thì ít khi hiển thị sửa xóa thông tin.

Ví dụ khi bổ sung thêm style css sẽ được kết quả như sau:

phân trang có css

Code khi bổ sung thêm Style css, có thể tham khảo như sau:

<html>
<head>
<title>Quản lý nhân viên</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 4px;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<?php
// Thực hiện kết nối đến cơ sở dữ liệu
$servername = "localhost";
$username = "root";
$password = "";
$database = "quanlynhanvien";
// Tạo kết nối
$conn = new mysqli($servername, $username, $password, $database);
// Kiểm tra kết nối
if ($conn->connect_error) {
die("Kết nối không thành công: " . $conn->connect_error);
}
// Phân trang
$limit = 5; // Số dòng dữ liệu trên mỗi trang
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$start = ($page - 1) * $limit;
// Truy vấn để lấy danh sách nhân viên trang hiện tại
$sql = "SELECT * FROM nhanvien LIMIT $start, $limit";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<h2>Danh sách nhân viên:</h2>";
echo "<table border='1' width=100%>
<tr>
<th>Họ Tên</th>
<th>Giới tính</th>
<th>Lương</th>
<th>Sửa</th>
<th>Xóa</th>
</tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["HoTen"] . "</td>";
echo "<td>" . ($row["GioiTinh"] == 1 ? "Nam" : "Nữ") . "</td>";
echo "<td>" . $row["Luong"] . "</td>";
echo "<td><center><a href='edit.php?id=".$row["id"]."' class='btn'>Sửa</a></center></td>"; // Điều hướng đến trang sửa với ID tương ứng
echo "<td><center><a href='delete.php?id=".$row["id"]."' class='btn'>Xóa</a></center></td>"; // Điều hướng đến trang xóa với ID tương ứng
echo "</tr>";
}
echo "</table>";
// Liên kết phân trang
$sql_total = "SELECT COUNT(*) AS total FROM nhanvien";
$result_total = $conn->query($sql_total);
$row_total = $result_total->fetch_assoc();
$total_records = $row_total['total'];
$total_pages = ceil($total_records / $limit);
echo "<div>";
if ($page > 1) {
echo "<a href='?page=1'>&laquo; Trang đầu</a> ";
}
for ($i=1; $i <= $total_pages; $i++) {
echo "<a href='?page=".$i."'>".$i."</a> ";
}
if ($page < $total_pages) {
echo "<a href='?page=".$total_pages."'>Trang cuối &raquo;</a>";
}
echo "</div>";
} else {
echo "Không có nhân viên nào trong cơ sở dữ liệu.";
}
?>
</div>
</body>
</html>
<?php
// Đóng kết nối
$conn->close();
?>

Một số lưu ý khi thực hiện code phân trang

Khi triển khai chức năng phân trang trong ứng dụng web, có một số điều cần lưu ý:

  1. Xác định số lượng mục trên mỗi trang: Quyết định số lượng mục bạn muốn hiển thị trên mỗi trang. Số lượng này thường được xác định dựa trên trải nghiệm người dùng và yêu cầu của ứng dụng.
  2. Tính toán số lượng trang: Dựa vào tổng số mục và số lượng mục trên mỗi trang, tính toán số lượng trang cần thiết để hiển thị tất cả mục.
  3. Hiển thị liên kết phân trang: Tạo các liên kết để người dùng có thể chuyển đến trang trước, trang kế tiếp và các trang khác. Các liên kết này thường được hiển thị dưới dạng các nút hoặc danh sách liên kết.
  4. Xác định trang hiện tại: Sử dụng biến GET hoặc POST để xác định trang hiện tại và truy vấn dữ liệu tương ứng từ cơ sở dữ liệu.
  5. Giới hạn dữ liệu trả về: Trong truy vấn SQL, sử dụng câu lệnh LIMIT để giới hạn số lượng mục trả về trên mỗi trang.
  6. Xử lý trang đầu tiên và trang cuối: Hiển thị liên kết để người dùng có thể dễ dàng chuyển đến trang đầu tiên và trang cuối cùng.
  7. Xử lý trường hợp không có dữ liệu: Kiểm tra xem có dữ liệu để hiển thị không. Nếu không, hiển thị thông báo tương ứng.
  8. Xác thực và xử lý lỗi: Đảm bảo rằng mã của bạn được kiểm tra và xác thực cẩn thận để tránh lỗi và tấn công bảo mật. Điều này bao gồm kiểm tra dữ liệu đầu vào, xác thực người dùng và loại bỏ các lỗ hổng bảo mật tiềm ẩn.

Xem thêm: Tạo trang sửa xóa thông tin

Post Views: 98