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

Upload ảnh lên server và hiển thị ra ngoài màn hình

Bài này hướng dẫn bạn uploads 1 file ảnh lên trên server, xem thông tin ảnh uploads và thực hiện lưu đường dẫn ảnh vào cơ sở dữ liệu. Sau đó hiển thị thông tin nội dung đã điền và upload ra màn hình.

Tạo upload ảnh và xem thông tin ảnh upload lên

Bạn tạo file uploadanhdb.php như sau:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Ảnh và Hiển Thị Thông Tin</title>
<style>
/* CSS cho form và nội dung kết quả */
form {margin-bottom: 20px;width: 50%;margin: auto;padding: 20px;
border: 1px solid #ddd;border-radius: 5px;background-color: #f9f9f9;}
form input[type="text"],form input[type="file"],form input[type="submit"] {
margin-bottom: 10px;padding: 8px;width: 100%;}
form input[type="submit"] {background-color: #4CAF50;
color: white;border: none;cursor: pointer;}
form input[type="submit"]:hover {background-color: #45a049;}
/* CSS cho container chứa kết quả */
.result-container {
margin: 20px auto;padding: 20px;width: 50%;background-color: #f9f9f9;
border: 1px solid #ddd;border-radius: 5px;}
.result-container img {max-width: 100%;height: auto;margin-top: 10px;}
.result-info {margin-top: 10px;}
/* CSS cho thông báo lỗi */
.error {color: red;}
/* CSS cho thông báo thành công */
.success {color: green;}
</style>
</head>
<body>
<?php
// Kết nối đến cơ sở dữ liệu (thay đổi thông tin kết nối của bạn ở đây)
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
// Tạo kết nối
$conn = new mysqli($servername, $username, $password, $dbname);
// Kiểm tra kết nối
if ($conn->connect_error) {
   die("Kết nối đến cơ sở dữ liệu thất bại: " . $conn->connect_error);
}
// Biến lưu trữ thông tin sản phẩm
$tenSP = $donGia = "";
$error_message = "";
// Kiểm tra xem người dùng đã submit form chưa. Bạn tạo thư mục uploads trong thư mục chứa web của bạn
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])) {
   $target_dir = "uploads/";
   $target_file = $target_dir . basename($_FILES["image"]["name"]);
   $uploadOk = 1;
   $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Kiểm tra xem tệp có phải là ảnh thực sự hay không
if (isset($_POST["submit"])) {
   $check = getimagesize($_FILES["image"]["tmp_name"]);
   if ($check !== false) {
      echo "File là một ảnh - " . $check["mime"] . ".";
      $uploadOk = 1;
   } else {
      $error_message = "File không phải là ảnh.";
      $uploadOk = 0;
   }
}
// Kiểm tra nếu tệp đã tồn tại
if (file_exists($target_file)) {
   $error_message = "Xin lỗi, tệp đã tồn tại.";
   $uploadOk = 0;
}
// Kiểm tra kích thước tệp
if ($_FILES["image"]["size"] > 500000) {
   $error_message = "Xin lỗi, kích thước tệp quá lớn.";
   $uploadOk = 0;
}
// Cho phép các định dạng tệp cụ thể
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif") {
   $error_message = "Xin lỗi, chỉ chấp nhận các định dạng JPG, JPEG, PNG & GIF.";
   $uloadOk = 0;
}
// Kiểm tra nếu $uploadOk = 0
if ($uploadOk == 0) {
   $error_message = "Xin lỗi, tệp của bạn không được tải lên.";
// nếu tất cả đều ổn, cố gắng tải tệp lên
} else {
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
   $success_message = "Tệp " . htmlspecialchars(basename($_FILES["image"]["name"])) . " đã được tải lên thành công.";
   $image_info = getimagesize($target_file);
   $image_size = "Kích thước ảnh: " . $image_info[0] . " x " . $image_info[1] . " pixels";
   $image_size .= "<br>Dung lượng: " . round(filesize($target_file) / 1024) . " KB";
   $image_size .= "<br>Ngày tạo: " . date("F d Y H:i:s.", filemtime($target_file));
// Lấy thông tin từ các trường input
$tenSP = $_POST['tenSP'];
$donGia = $_POST['donGia'];
// Thực hiện truy vấn SQL để chèn dữ liệu mới vào bảng SanPham
$sql = "INSERT INTO SanPham (TenSanPham, Anh, DonGia) VALUES ('$tenSP', '$target_file', '$donGia')";
if ($conn->query($sql) === TRUE) {
   $success_message .= "<br>Dữ liệu đã được lưu vào cơ sở dữ liệu thành công.";
} else {
   $error_message = "Lỗi: " . $sql . "<br>" . $conn->error;
}
} else {
   $error_message = "Xin lỗi, có lỗi xảy ra khi tải tệp của bạn lên.";
}
}
}
// Đóng kết nối
$conn->close();
?>
<div class="result-container">
<?php if(isset($error_message)) { ?>
   <div class="error"><?php echo $error_message; ?></div>
<?php } ?>
<?php if(isset($success_message)) { ?>
   <div class="success"><?php echo $success_message; ?></div>
   <div class="result-info">
     <img src="<?php echo $target_file; ?>" alt="Uploaded Image">
     <p><?php echo $image_size; ?></p>
</div>
<?php } ?>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
<label for="tenSP">Tên sản phẩm:</label><br>
   <input type="text" id="tenSP" name="tenSP"><br>
<label for="donGia">Đơn giá:</label><br>
   <input type="text" id="donGia" name="donGia"><br>
<label for="image">Chọn ảnh để tải lên:</label><br>
   <input type="file" id="image" name="image"><br>
   <input type="submit" value="Gửi thông tin" name="submit">
</form>
</body>
</html>

Kết quả sau khi chạy file uploadanhdb.php và upload ảnh lên có thể như sau:

ảnh mới upload

Hiển thị dữ liệu có đường dẫn ảnh trong database

Sau khi upload xong, ảnh được tải lên server và lưu vào thư mục uploads. Còn trong database, ảnh sẽ được lưu dưới dạng đường dẫn như ảnh sau:

upload-anh-database

Để hiển thị nội dung dữ liệu và hình ảnh bạn vẫn thực hiện truy cập vào cơ sở dữ liệu và lấy đường dẫn hiển thị hình ảnh.

Tạo trang hiển thị hình ảnh hienthianh.phpcó thể như sau:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danh sách sản phẩm</title>
<style>
/* CSS để căn giữa bảng và highlight dòng */
table {border-collapse: collapse;
width: 50%; /* Điều chỉnh độ rộng của bảng */
margin: auto; /* Căn giữa bảng */
}
table, th, td {border: 1px solid black;}
th, td {padding: 8px;text-align: left;}
tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover {background-color: #ddd; /* Màu nền highlight */}
</style>
</head>
<body>
<?php
// Kết nối đến cơ sở dữ liệu (thay đổi thông tin kết nối của bạn ở đây)
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
// Tạo kết nối
$conn = new mysqli($servername, $username, $password, $dbname);
// Kiểm tra kết nối
if ($conn->connect_error) {
   die("Kết nối đến cơ sở dữ liệu thất bại: " . $conn->connect_error);
}
// Truy vấn dữ liệu từ bảng SanPham
$sql = "SELECT * FROM SanPham";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// In tiêu đề của bảng
echo "<table border='1'>
<tr>
   <th>STT</th>
   <th>Tên sản phẩm</th>
   <th>Ảnh</th>
   <th>Đơn giá</th>
</tr>";
// In dữ liệu của từng sản phẩm
$stt = 1;
while($row = $result->fetch_assoc()) {
   echo "<tr>";
      echo "<td>" . $stt++ . "</td>";
      echo "<td>" . $row['TenSanPham'] . "</td>";
      echo "<td><img src='" . $row['Anh'] . "' alt='" . $row['TenSanPham'] . "' width='100' height='100'></td>";
      echo "<td>" . $row['DonGia'] . "</td>";
   echo "</tr>";
}
echo "</table>";
} else {
echo "Không có sản phẩm nào trong cơ sở dữ liệu.";
}
// Đóng kết nối
$conn->close();
?>
</body>
</html>

Kết quả hiển thị trang hienthianh.php có thể như sau:

hien-thi-anh-database

Trong trang hiển thị này, có bổ sung css khi di chuột lên dòng nào thì hightlight dòng đó và có tạo dòng chẵn lẻ có màu khác nhau.

Một số vấn đề cần lưu ý khi upload và show ảnh trong database

Việc tải lên và hiển thị ảnh trong cơ sở dữ liệu trong ứng dụng web là một quá trình quan trọng và phổ biến. Dưới đây là một số điểm kết luận về việc này:

  1. Upload ảnh:
    • Khi người dùng tải lên ảnh, chúng ta cần kiểm tra định dạng và kích thước của tệp để đảm bảo tính hợp lệ và an toàn.
    • Sau đó, ảnh được lưu trữ trong thư mục trên máy chủ và đường dẫn tới ảnh được lưu trong cơ sở dữ liệu.
  2. Lưu đường dẫn vào cơ sở dữ liệu:
    • Trong cơ sở dữ liệu, chúng ta lưu trữ đường dẫn tới tệp ảnh thay vì lưu trực tiếp ảnh vào cơ sở dữ liệu.
    • Điều này giúp giảm kích thước của cơ sở dữ liệu và tăng hiệu suất khi truy xuất dữ liệu.
  3. Hiển thị ảnh:
    • Khi hiển thị ảnh, chúng ta truy vấn cơ sở dữ liệu để lấy đường dẫn tới tệp ảnh.
    • Sử dụng đường dẫn này, chúng ta có thể hiển thị ảnh trong trang web bằng cách sử dụng thẻ <img> và thuộc tính src.
  4. Bảo mật:
    • Khi xử lý tải lên và hiển thị ảnh từ cơ sở dữ liệu, chúng ta cần đảm bảo rằng hệ thống của mình an toàn.
    • Kiểm tra và xử lý dữ liệu đầu vào từ người dùng để ngăn chặn các cuộc tấn công như XSS và SQL Injection.
    • Đảm bảo rằng chỉ những người dùng được ủy quyền mới có thể truy cập và hiển thị ảnh.
  5. Hiệu suất:
    • Để tối ưu hiệu suất, chúng ta có thể sử dụng các kỹ thuật như tải ảnh dưới dạng dữ liệu nhị phân thay vì tải ảnh trực tiếp từ cơ sở dữ liệu.
    • Tối ưu hóa kích thước và định dạng ảnh có thể giúp giảm thời gian tải trang và tăng trải nghiệm người dùng.

Tổng quát, việc tải lên và hiển thị ảnh trong cơ sở dữ liệu là một phần quan trọng của nhiều ứng dụng web hiện đại. Bằng cách áp dụng các biện pháp bảo mật và tối ưu hóa, chúng ta có thể xây dựng các tính năng này một cách an toàn và hiệu quả.

Post Views: 226