Sau khi viết bài về Kết hợp Dropzone.js với PHP để tải lên hình ảnh thì mình thấy cần có ví dụ cụ thể để các bạn có thể hình dung ra các kết hợp trong thực tiễn. Và đây là ví dụ có lẽ sẽ nhiều người dùng khi cần đăng tải hình ảnh đại diện của thành viên và lưu vào cơ sở dữ liệu. Hãy cùng xem ví dụ nhé.
Để tạo một thành viên mới với tất cả thông tin của thành viên đó, bao gồm cả ảnh đại diện, và lưu vào cơ sở dữ liệu bằng Dropzone.js và PHP, bạn sẽ cần một phương pháp toàn diện hơn. Sau đây là cách bạn có thể thực hiện:
Bước 1: Thiết lập dự án của bạn
Cấu trúc thư mục dự án của bạn sẽ trông như thế này:
/uploads
index.html
upload.php
db.php
Bước 2: Tạo biểu mẫu HTML
Trong index.html, hãy tạo một biểu mẫu để nhập thông tin thành viên, bao gồm phần tải ảnh đại diện được xử lý bởi Dropzone.js:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create New Member</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
</head>
<body>
<h1>Create New Member</h1>
<form action="create_member.php" method="post" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required><br>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required><br>
<label for="avatar">Avatar:</label>
<div class="dropzone" id="avatarDropzone"></div>
<input type="hidden" name="avatar" id="avatar">
<br>
<input type="submit" value="Create Member">
</form>
<script>
Dropzone.options.avatarDropzone = {
url: 'upload.php',
maxFiles: 1,
acceptedFiles: 'image/*',
maxFilesize: 2, // Maximum file size in MB
success: function (file, response) {
console.log(response);
document.getElementById('avatar').value = response;
},
init: function () {
this.on("error", function (file, message) {
if (file.size > this.options.maxFilesize * 1024 * 1024) {
alert("File size exceeds the limit of " + this.options.maxFilesize + "MB");
this.removeFile(file);
} else {
alert(message);
}
});
}
};
</script>
</body>
</html>Giải thích:
- Khởi tạo Dropzone : Cấu hình hiện tại
avatarDropzonevẫn giữ nguyên, với việc bổ sungmaxFilesizevàinitđể xử lý lỗi. maxFilesize: Chỉ định kích thước tệp tối đa được phép, ở đây đặt là 2 MB (2 * 1024 * 1024byte).initChức năng : Thêm hàm khởi tạo để xử lý lỗi. Bên tronginit,this.on("error", ...)lắng nghe lỗi trong quá trình tải tệp lên.- Xử lý lỗi : Kiểm tra xem lỗi có phải do kích thước tệp vượt quá
maxFilesize. Nếu đúng, một thông báo cảnh báo sẽ thông báo cho người dùng và tệp sẽ bị xóa khỏi Dropzone. Nếu không, thông báo lỗi nhận được từ Dropzone (message) sẽ được hiển thị.
Bước 3: Tạo tập lệnh tải lên
Trong upload.php, xử lý việc tải tệp lên và trả về đường dẫn tệp:
Ví dụ
<?php
require 'db.php';
if (!empty($_FILES)) {
$targetDir = "uploads/";
$fileName = basename($_FILES['file']['name']);
$targetFilePath = $targetDir . $fileName;
// Move the uploaded file to the server directory
if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)) {
echo $targetFilePath;
} else {
echo "File upload failed.";
}
} else {
echo "No file uploaded.";
}
?>Bước 4: Tạo tập lệnh tạo thành viên
Trong create_member.php, xử lý việc gửi biểu mẫu và lưu thông tin thành viên vào cơ sở dữ liệu:
Ví dụ
<?php
require 'db.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = $_POST['name'];
$email = $_POST['email'];
$avatar = $_POST['avatar'];
// Insert member information into the database
$query = $db->prepare("INSERT INTO members (name, email, avatar) VALUES (?, ?, ?)");
$query->bind_param("sss", $name, $email, $avatar);
if ($query->execute()) {
echo "Member created successfully.";
} else {
echo "Database error: " . $db->error;
}
} else {
echo "Invalid request.";
}
?>
Bước 5: Thiết lập kết nối cơ sở dữ liệu
Trong db.php, tạo kết nối tới cơ sở dữ liệu MySQL của bạn:
Ví dụ
<?php
$host = "localhost";
$user = "your_db_user";
$pass = "your_db_password";
$dbname = "your_database";
$db = new mysqli($host, $user, $pass, $dbname);
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
?>
Bước 6: Tạo bảng cơ sở dữ liệu
Đảm bảo bạn có bảng để lưu trữ thông tin thành viên. Chạy truy vấn SQL sau trong cơ sở dữ liệu MySQL của bạn:
Ví dụ
CREATE TABLE members (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
avatar VARCHAR(255) NOT NULL
);
Những cân nhắc bổ sung
- Bảo mật : Đảm bảo xác thực và khử trùng đúng cách tất cả dữ liệu đầu vào để ngăn chặn SQL injection và các vấn đề bảo mật khác. Xem thêm Làm sạch và xác thực dữ liệu bằng bộ lọc PHP
- Xử lý tệp : Kiểm tra loại và kích thước tệp để tránh các vấn đề về lưu trữ và bảo mật.
- Xử lý lỗi : Cải thiện cách xử lý lỗi để cung cấp phản hồi tốt hơn cho người dùng khi có sự cố.
- Giao diện người dùng : Bạn có thể nâng cao trải nghiệm của người dùng bằng cách cung cấp thêm phản hồi trong quá trình tải tệp lên và gửi biểu mẫu.
Thiết lập này cho phép bạn tạo thành viên mới, tải ảnh đại diện lên bằng Dropzone.js và lưu tất cả thông tin thành viên, bao gồm cả đường dẫn tệp ảnh đại diện, vào cơ sở dữ liệu bằng PHP.