Trong bài đăng này, Chúng ta sẽ xem cách phát triển Ứng dụng CRUD [Tạo, Đọc, Cập nhật, Xóa] bằng Bootstrap 5, PHP - OOP, PDO - MySQL và Tìm nạp API của ES6 [ECMAScript], i. e. , còn được gọi là Javascript hiện đại
Trong Phiên bản Alpha gần đây của Bootstrap 5, thư viện jQuery đã bị xóa và hiện Bootstrap 5 sử dụng JavaScript hiện đại [i. e. , ECMAScript 6]
Đó là lý do tại sao trong hướng dẫn này, tôi cũng đang sử dụng ECMAScript 6 để gửi yêu cầu HTTP đến máy chủ bằng Fetch API của ES6, như Ajax
Trong hướng dẫn này, tôi đang sử dụng Bootstrap 5 để thiết kế, PHP - OOP làm ngôn ngữ phụ trợ, MySQL làm Cơ sở dữ liệu và API tìm nạp ECMAScript 6 để gửi yêu cầu HTTP đến máy chủ
Vì vậy, bây giờ hãy bắt đầu hướng dẫn này, tôi sẽ chỉ cho bạn từng bước một, vì vậy hãy làm theo tất cả các bước thật cẩn thận
Nếu bạn muốn xem video hướng dẫn của bài đăng này, hãy nhấp vào đây
1. Tạo một thư mục dự án
Trong bước này, chúng tôi sẽ tạo một thư mục dự án bên trong localhost giống như nếu bạn đang sử dụng Máy chủ XAMPP, sau đó tạo bên trong thư mục htdocs, đặt tên là crud-app hoặc bất cứ thứ gì bạn muốn. Mở thư mục này bên trong trình chỉnh sửa mã của bạn
2. Tạo cơ sở dữ liệu & bảng
Trong bước này, Chúng tôi sẽ tạo cơ sở dữ liệu và bảng cho Ứng dụng CRUD này. Vì vậy, đừng lo lắng, bạn không cần phải viết mã cho việc này, tôi sẽ cung cấp cho bạn một liên kết, chỉ cần nhấp vào liên kết đó và tải xuống tệp SQL. Bạn có thể tải về từ đây. Sau khi bạn đã tải xuống, chỉ cần mở PHPMyAdmin của mình rồi tạo Cơ sở dữ liệu mới có tên là fetch_crud_app sau đó chỉ cần mở cơ sở dữ liệu rồi nhấp vào tab nhập, sau đó nhấp vào chọn tệp, chọn tệp SQL đã tải xuống rồi nhấp vào ĐI. Sau khi nhập thành công, bạn sẽ có thể thấy một bảng mới đã được tạo với tên người dùng
3. Thiết kế trang chỉ mục
Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên chỉ mục. php. Bên trong tệp này, chúng tôi sẽ thiết kế trang của mình bằng Bootstrap 5. Vì vậy, đối với điều này, chỉ cần sao chép, các mã bên dưới sẽ dán chúng vào chỉ mục của bạn. tệp php và lưu
CRUD Application Using PHP OOPS PDO MySQL & FETCH API of ES6
Add New User
First name is required!
Last name is required!
E-mail is required!
Phone is required!
Edit This User
First name is required!
Last name is required!
E-mail is required!
Phone is required!
All users in the database!
Add New User
ID
First Name
Last Name
E-mail
Phone
Action
Trong đoạn mã trên, bạn có thể thấy tôi đã bao gồm các liên kết Bootstrap 5 CDN. Và bên dưới tôi đã bao gồm chính. js trong đó tôi sẽ viết mã ECMAScript
4. Kết nối Ứng dụng với Cơ sở dữ liệu
Trong bước này, Chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên config. php, trong tệp này, chúng ta sẽ viết mã PHP để kết nối cơ sở dữ liệu theo Kiểu hướng đối tượng. Vì vậy, chỉ cần sao chép các mã dưới đây và dán vào cấu hình của bạn. tệp php và lưu
conn = new PDO[$this->dsn, self::DBUSER, self::DBPASS];
$this->conn->setAttribute[PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC];
} catch [PDOException $e] {
die['Error: ' . $e->getMessage[]];
}
}
}
?>
5. Xác định một số phương pháp tiện ích
Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên util. php, Trong tệp này, chúng tôi sẽ xác định một số phương thức tiện ích để làm sạch đầu vào và hiển thị thông báo lỗi và thành công một cách linh hoạt. Vì vậy, chỉ cần sao chép các mã dưới đây và dán chúng vào tiện ích của bạn. tệp php và lưu
' . $message . '
'; } } ?>
6. Tạo tệp mô hình
Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên db. php, Trong tệp này, chúng ta sẽ tạo một lớp có tên Cơ sở dữ liệu và sau đó bên trong lớp này, chúng ta sẽ xác định các phương thức cho tất cả hoạt động như tìm nạp tất cả người dùng, tìm nạp người dùng theo id, chèn người dùng, chỉnh sửa người dùng, xóa người dùng. Vì vậy, chỉ cần sao chép các mã dưới đây và dán vào db của bạn. tệp php và lưu
conn->prepare[$sql];
$stmt->execute[[
'fname' => $fname,
'lname' => $lname,
'email' => $email,
'phone' => $phone
]];
return true;
}
// Fetch All Users From Database
public function read[] {
$sql = 'SELECT * FROM users ORDER BY id DESC';
$stmt = $this->conn->prepare[$sql];
$stmt->execute[];
$result = $stmt->fetchAll[];
return $result;
}
// Fetch Single User From Database
public function readOne[$id] {
$sql = 'SELECT * FROM users WHERE id = :id';
$stmt = $this->conn->prepare[$sql];
$stmt->execute[['id' => $id]];
$result = $stmt->fetch[];
return $result;
}
// Update Single User
public function update[$id, $fname, $lname, $email, $phone] {
$sql = 'UPDATE users SET first_name = :fname, last_name = :lname, email = :email, phone = :phone WHERE id = :id';
$stmt = $this->conn->prepare[$sql];
$stmt->execute[[
'fname' => $fname,
'lname' => $lname,
'email' => $email,
'phone' => $phone,
'id' => $id
]];
return true;
}
// Delete User From Database
public function delete[$id] {
$sql = 'DELETE FROM users WHERE id = :id';
$stmt = $this->conn->prepare[$sql];
$stmt->execute[['id' => $id]];
return true;
}
}
?>
7. Gửi yêu cầu HTTP
Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên chính. js, Trong tệp này, chúng tôi sẽ viết mã ECMAScript để gửi yêu cầu HTTP đến máy chủ cho mọi hành động như Chèn, Cập nhật, Tìm nạp và Xóa. Trong tệp này, chúng tôi cũng sẽ xác thực biểu mẫu bằng phương thức Bootstrap 5. Vì vậy, đối với điều này, chỉ cần sao chép các mã bên dưới và dán chúng vào tệp chính của bạn. js và lưu lại
const addForm = document.getElementById["add-user-form"];
const updateForm = document.getElementById["edit-user-form"];
const showAlert = document.getElementById["showAlert"];
const addModal = new bootstrap.Modal[document.getElementById["addNewUserModal"]];
const editModal = new bootstrap.Modal[document.getElementById["editUserModal"]];
const tbody = document.querySelector["tbody"];
// Add New User Ajax Request
addForm.addEventListener["submit", async [e] => {
e.preventDefault[];
const formData = new FormData[addForm];
formData.append["add", 1];
if [addForm.checkValidity[] === false] {
e.preventDefault[];
e.stopPropagation[];
addForm.classList.add["was-validated"];
return false;
} else {
document.getElementById["add-user-btn"].value = "Please Wait...";
const data = await fetch["action.php", {
method: "POST",
body: formData,
}];
const response = await data.text[];
showAlert.innerHTML = response;
document.getElementById["add-user-btn"].value = "Add User";
addForm.reset[];
addForm.classList.remove["was-validated"];
addModal.hide[];
fetchAllUsers[];
}
}];
// Fetch All Users Ajax Request
const fetchAllUsers = async [] => {
const data = await fetch["action.php?read=1", {
method: "GET",
}];
const response = await data.text[];
tbody.innerHTML = response;
};
fetchAllUsers[];
// Edit User Ajax Request
tbody.addEventListener["click", [e] => {
if [e.target && e.target.matches["a.editLink"]] {
e.preventDefault[];
let id = e.target.getAttribute["id"];
editUser[id];
}
}];
const editUser = async [id] => {
const data = await fetch[`action.php?edit=1&id=${id}`, {
method: "GET",
}];
const response = await data.json[];
document.getElementById["id"].value = response.id;
document.getElementById["fname"].value = response.first_name;
document.getElementById["lname"].value = response.last_name;
document.getElementById["email"].value = response.email;
document.getElementById["phone"].value = response.phone;
};
// Update User Ajax Request
updateForm.addEventListener["submit", async [e] => {
e.preventDefault[];
const formData = new FormData[updateForm];
formData.append["update", 1];
if [updateForm.checkValidity[] === false] {
e.preventDefault[];
e.stopPropagation[];
updateForm.classList.add["was-validated"];
return false;
} else {
document.getElementById["edit-user-btn"].value = "Please Wait...";
const data = await fetch["action.php", {
method: "POST",
body: formData,
}];
const response = await data.text[];
showAlert.innerHTML = response;
document.getElementById["edit-user-btn"].value = "Add User";
updateForm.reset[];
updateForm.classList.remove["was-validated"];
editModal.hide[];
fetchAllUsers[];
}
}];
// Delete User Ajax Request
tbody.addEventListener["click", [e] => {
if [e.target && e.target.matches["a.deleteLink"]] {
e.preventDefault[];
let id = e.target.getAttribute["id"];
deleteUser[id];
}
}];
const deleteUser = async [id] => {
const data = await fetch[`action.php?delete=1&id=${id}`, {
method: "GET",
}];
const response = await data.text[];
showAlert.innerHTML = response;
fetchAllUsers[];
};
8. Xử lý Yêu cầu API tìm nạp
Trong bước này, chúng tôi sẽ tạo một tệp mới trong thư mục gốc của thư mục dự án với tên hành động. php, Trong tệp này, chúng tôi sẽ xử lý tất cả các yêu cầu HTTP được gửi bởi ứng dụng khách và ở đây chúng tôi sẽ xử lý các phương thức đã được xác định trong db. tập tin php. Vì vậy, đối với điều này, chỉ cần sao chép các mã bên dưới và dán chúng vào hành động của bạn. tệp php và lưu
testInput[$_POST['fname']];
$lname = $util->testInput[$_POST['lname']];
$email = $util->testInput[$_POST['email']];
$phone = $util->testInput[$_POST['phone']];
if [$db->insert[$fname, $lname, $email, $phone]] {
echo $util->showMessage['success', 'User inserted successfully!'];
} else {
echo $util->showMessage['danger', 'Something went wrong!'];
}
}
// Handle Fetch All Users Ajax Request
if [isset[$_GET['read']]] {
$users = $db->read[];
$output = '';
if [$users] {
foreach [$users as $row] {
$output .= '
' . $row['id'] . '
' . $row['first_name'] . '
' . $row['last_name'] . '
' . $row['email'] . '
' . $row['phone'] . '
Edit
Delete
';
}
echo $output;
} else {
echo '
No Users Found in the Database!
';
}
}
// Handle Edit User Ajax Request
if [isset[$_GET['edit']]] {
$id = $_GET['id'];
$user = $db->readOne[$id];
echo json_encode[$user];
}
// Handle Update User Ajax Request
if [isset[$_POST['update']]] {
$id = $util->testInput[$_POST['id']];
$fname = $util->testInput[$_POST['fname']];
$lname = $util->testInput[$_POST['lname']];
$email = $util->testInput[$_POST['email']];
$phone = $util->testInput[$_POST['phone']];
if [$db->update[$id, $fname, $lname, $email, $phone]] {
echo $util->showMessage['success', 'User updated successfully!'];
} else {
echo $util->showMessage['danger', 'Something went wrong!'];
}
}
// Handle Delete User Ajax Request
if [isset[$_GET['delete']]] {
$id = $_GET['id'];
if [$db->delete[$id]] {
echo $util->showMessage['info', 'User deleted successfully!'];
} else {
echo $util->showMessage['danger', 'Something went wrong!'];
}
}
?>
Một số ảnh chụp màn hình của ứng dụng
Nếu bạn thích bài đăng này thì hãy chia sẻ bài đăng này với bạn bè của bạn. Nếu bạn muốn tìm hiểu về Thiết kế & Phát triển web nâng cao thì bạn cũng có thể theo dõi kênh YouTube của tôi
Nếu bạn đang gặp phải bất kỳ vấn đề nào liên quan đến hướng dẫn này thì bạn có thể bình luận về các vấn đề của mình, tôi sẽ cố gắng khắc phục chúng ngay khi có thể