1. Tổng quan.
Hôm nay mình giới thiệu 3 đoạn code có JavaScript và HTML, đây là một phần quan trọng của chức năng quản lý dự án trong ứng dụng web của bạn. Chúng cho phép người dùng xóa dự án và cập nhật danh sách dự án mà không cần tải lại trang web. Hàm deleteProject gửi yêu cầu DELETE đến máy chủ để xóa dự án và sau đó cập nhật nội dung của bảng dự án. Hàm updateProjectTable lấy danh sách dự án từ máy chủ và cập nhật lại nội dung của bảng dự án dựa trên dữ liệu mới. Mã HTML được sử dụng để hiển thị danh sách dự án với các thông tin chi tiết và nút xóa tương ứng.
Tổng cộng, ba đoạn mã này giúp tạo ra một trải nghiệm quản lý dự án mượt mà và tương tác cho người dùng trong ứng dụng web của bạn.
2. Quy trình hoạt động.
Các đoạn code JavaScript và HTML dưới đây sẽ thực hiện các chức năng sau trong ứng dụng web của bạn:
- Hàm
deleteProject:- Hiển thị một hộp thoại xác nhận để người dùng xác nhận việc xóa dự án.
- Nếu người dùng đồng ý (nhấn “OK”), nó gửi một yêu cầu DELETE đến máy chủ để xóa dự án cụ thể (sử dụng tên dự án).
- Nếu xóa thành công (phản hồi từ máy chủ có mã trạng thái 204), nó gọi hàm
updateProjectTableđể cập nhật lại nội dung của bảng dự án mà không cần tải lại trang web.
- Hàm
updateProjectTable:- Gửi yêu cầu GET đến máy chủ để lấy danh sách dự án.
- Khi nhận được dữ liệu JSON từ máy chủ, nó tạo HTML mới cho mỗi dự án trong danh sách và thay thế nội dung của bảng dự án với danh sách mới này.
- Điều này cho phép cập nhật nội dung của bảng dự án mà không cần tải lại trang web.
- Mã HTML (được sử dụng để hiển thị danh sách dự án):
- Được thực hiện trong một thẻ
<tbody>của bảng. - Sử dụng vòng lặp Jinja2 (
{% for project in projects_info %}) để lặp qua danh sách dự án (được cung cấp từ biếnprojects_info) và hiển thị thông tin của từng dự án trong các hàng của bảng. - Mỗi dự án được hiển thị bao gồm biểu tượng gói (package icon), tên dự án, mô tả, thông tin thời gian và nút “Delete” để xóa dự án.
- Được thực hiện trong một thẻ
3. Thực hành.
Code HTML.
Code HTML dưới đây là phần nội dung của thẻ <tbody> của bảng dự án. Nó sẽ hiển thị danh sách dự án với các biểu tượng gói (package icon) được phóng to 300%, tên dự án, mô tả, và nút “Delete” cho mỗi dự án. Dưới đây là một sự giải thích cho mã HTML này:
<tbody id="projectTableBody">
{% for project in projects_info %}
<tr class="unread">
<td><i class="fas fa-box" style="font-size: 300%;"></i></td>
<td>
<h6 class="mb-1">{{ project.name }}</h6>
<p class="m-0">{{ project.description }}</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>11 MAY 12:56</h6>
</td>
<td>
<button type="button" class="btn btn-danger" onclick="deleteProject('{{ project.name }}')">
<i class="fas fa-trash text-white"></i> Delete
</button>
</td>
</tr>
{% endfor %}
</tbody> <tbody id="projectTableBody">: Đây là thẻ<tbody>mà bạn đã đặt ID là “projectTableBody” để dễ dàng truy cập thông qua JavaScript.{% for project in projects_info %}: Đây là một vòng lặp {% for %} trong Jinja2 Template Engine để lặp qua danh sách dự án có sẵn trong biếnprojects_info. Mỗi phần tử trong danh sách sẽ được đại diện bởi biếnprojecttrong vòng lặp.<tr class="unread">: Đây là một hàng của bảng (table row) với lớp CSS “unread” để áp dụng kiểu cho hàng này.<td><i class="fas fa-box" style="font-size: 300%;"></i></td>: Đây là ô đầu tiên trong hàng, nơi bạn đặt biểu tượng gói (package icon) và phóng to nó lên 300% bằng cách sử dụng CSS.<td>...</td>: Đây là ô thứ hai trong hàng, nơi bạn hiển thị tên dự án và mô tả của dự án.<td>...</td>: Đây là ô thứ ba trong hàng, nơi bạn hiển thị thông tin thời gian.<td>...</td>: Đây là ô cuối cùng trong hàng, nơi bạn đặt nút “Delete” để xóa dự án và gọi hàmdeleteProjectvới tên dự án tương ứng.{% endfor %}: Đây là kết thúc của vòng lặp {% for %}, đánh dấu kết thúc vòng lặp và bảng dự án.
Code javascript xoá thông tin.
Hàm deleteProject trong mã JavaScript của bạn thực hiện việc xóa dự án theo projectName.
function deleteProject(projectName) {
var confirmDelete = confirm("Are you sure you want to delete this project?");
if (confirmDelete) {
var apiUrl = "http://192.168.13.200:5000/delete_project_from_dicts";
var requestData = {
"name": projectName
};
fetch(apiUrl, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(requestData)
})
.then(function(response) {
if (response.status === 204) {
// Xoá thành công, cập nhật lại nội dung của tbody
updateProjectTable();
} else {
alert("Failed to delete the project.");
}
})
.catch(function(error) {
console.error("Error:", error);
});
}
}var confirmDelete = confirm("Are you sure you want to delete this project?");: Dòng này sử dụng hàmconfirmđể hiển thị một hộp thoại cảnh báo với thông điệp “Are you sure you want to delete this project?” và hai lựa chọn “OK” và “Cancel”. Nếu người dùng chọn “OK,” biếnconfirmDeletesẽ được đặt thànhtrue, ngược lại sẽ làfalse.if (confirmDelete) {: Dòng này kiểm tra giá trị củaconfirmDelete. Nếu người dùng đã xác nhận chọn “OK” trong hộp thoại cảnh báo, thì code bên trong khốiifsẽ được thực thi.var apiUrl = "http://192.168.13.200:5000/delete_project_from_dicts";: Dòng này đặt biếnapiUrllà đường dẫn URL của máy chủ hoặc API mà bạn muốn gửi yêu cầu DELETE tới để xóa dự án.var requestData = { "name": projectName };: Dòng này tạo một đối tượngrequestDatachứa thông tin về dự án cần xóa. Trong trường hợp này, chỉ có trường “name” được đặt làprojectName, nói chung là tên của dự án cần xóa.fetch(apiUrl, { /*...*/ }): Dòng này sử dụngfetchđể gửi yêu cầu DELETE đếnapiUrl. Nó cũng cung cấp thông tin như method là “DELETE,” headers để đặt loại nội dung là “application/json,” và body để gửi dữ liệu JSON trong yêu cầu. Trong trường hợp này, dữ liệu JSON chứa tên dự án cần xóa..then(function(response) { /*...*/ }): Dòng này xử lý phản hồi từ yêu cầu DELETE. Nếu phản hồi có mã trạng thái 204, có nghĩa là xóa thành công, code bên trong khối này sẽ được thực thi..catch(function(error) { /*...*/ }): Dòng này xử lý bất kỳ lỗi nào xảy ra trong quá trình gửi yêu cầu hoặc xử lý phản hồi. Nếu có lỗi, thông báo lỗi sẽ được hiển thị trong console.
Trong trường hợp thành công (nếu phản hồi có mã trạng thái 204), hàm updateProjectTable được gọi để cập nhật lại nội dung của bảng dự án mà không cần tải lại trang web.
Code javascript tự động cập nhật nội dung bảng sau khi xoá.
Hàm updateProjectTable trong mã JavaScript của bạn đã được mở rộng để lấy danh sách dự án từ URL “http://192.168.13.200:5000/get_all_projects_from_db“, sau đó cập nhật nội dung của bảng dự án với danh sách dự án mới. Dưới đây là giải thích về từng dòng code trong hàm này:
function updateProjectTable() {
var apiUrl = "http://192.168.13.200:5000/get_all_projects_from_db";
fetch(apiUrl)
.then(function(response) {
return response.json(); // Chuyển đổi dữ liệu JSON từ máy chủ
})
.then(function(data) {
// Tạo một biến để lưu trữ HTML mới cho tbody
var newTbodyContent = "";
// Lặp qua mảng dự án và tạo HTML cho mỗi dự án
data.forEach(function(project) {
newTbodyContent += `
<tr class="unread">
<td><i class="fas fa-box" style="font-size: 300%;"></i></td>
<td>
<h6 class="mb-1">${project.name}</h6>
<p class="m-0">${project.description}</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>11 MAY 12:56</h6>
</td>
<td>
<button type="button" class="btn btn-danger" onclick="deleteProject('${project.name}')">
<i class="fas fa-trash text-white"></i> Delete
</button>
</td>
</tr>
`;
});
// Cập nhật nội dung của thẻ tbody với HTML mới
document.getElementById("projectTableBody").innerHTML = newTbodyContent;
})
.catch(function(error) {
console.error("Error:", error);
});
}var apiUrl = "http://192.168.13.200:5000/get_all_projects_from_db";: Dòng này đặt biếnapiUrllà đường dẫn URL của máy chủ hoặc API mà bạn muốn gửi yêu cầu để lấy danh sách dự án.fetch(apiUrl): Dòng này sử dụngfetchđể gửi yêu cầu GET đếnapiUrlđể lấy danh sách dự án từ máy chủ..then(function(response) { /*...*/ }): Dòng này xử lý phản hồi từ yêu cầu GET. Hàm callback được truyền vào.thensẽ chuyển đổi dữ liệu JSON từ phản hồi và thực hiện xử lý tiếp theo.return response.json();: Trong hàm callback này, chúng ta sử dụngresponse.json()để chuyển đổi dữ liệu JSON từ máy chủ..then(function(data) { /*...*/ }): Sau khi chuyển đổi dữ liệu JSON, chúng ta có thể sử dụng nó. Hàm callback này được sử dụng để tạo HTML mới cho danh sách dự án và cập nhật nội dung của bảng.- Lặp qua danh sách dự án (
data.forEach(function(project) { /*...*/ })): Trong hàm callback này, chúng ta lặp qua danh sách dự án và tạo HTML cho mỗi dự án. Điều này bao gồm việc sử dụng biểu tượng gói (package icon) và thay đổi kích thước của nó lên 300% (<i class="fas fa-box" style="font-size: 300%;"></i>). - Cập nhật nội dung của thẻ tbody (
document.getElementById("projectTableBody").innerHTML = newTbodyContent;): Cuối cùng, chúng ta cập nhật nội dung của thẻ<tbody>bằng HTML mới được tạo trong biếnnewTbodyContent. Điều này sẽ thay đổi nội dung của bảng dự án để hiển thị danh sách dự án mới. .catch(function(error) { /*...*/ }): Nếu có lỗi trong quá trình gửi yêu cầu hoặc xử lý phản hồi, chúng ta sử dụng.catchđể bắt và xử lý lỗi bằng cách hiển thị thông báo lỗi trong console.
4. Kết quả.
