Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Tạo một Ứng dụng Web từ đầu Sử dụng Python Flask và MySQL: Phần 4

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 3
Creating a Web App From Scratch Using Python Flask and MySQL: Part 5

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong phần trước của loạt bài hướng dẫn này, chúng ta đã cài đặt các chức năng cần thiết cho người dùng đã đăng nhập thêm một mong ước. Chúng ta cũng đã tìm hiểu cách hiển thị mong ước được nhập bởi người dùng trên trang chủ của họ.

Trong phần này, chúng ta sẽ cài đặt chức năng chỉnh sửa và xóa những mong ước được nhập bởi người dùng.

Bắt đầu

Hãy bắt đầu bằng cách nhân bản mã nguồn từ phần trước của hướng dẫn trên GitHub.

Một khi mã nguồn đã được nhân bản, hãy chuyển đến thư mục dự án và khởi động máy chủ web.

Trỏ trình duyệt của bạn đến http://localhost:5002/ và bạn sẽ thấy ứng dụng của bạn đang chạy.

Chỉnh sửa Danh sách Mong ước

Bước 1: Hiển thị Biểu tượng Chỉnh sửa

Chúng ta đã gắn dữ liệu nhận được vào HTML bằng jQuery. Chúng ta sẽ sửa đổi code đó và sử dụng các temlate jQuery để làm cho việc gắn dữ liệu trở nên dễ dàng hơn. Chúng ta cũng sẽ thêm một biểu tượng chỉnh sửa vào HTML để cho phép người dùng cập nhật mong ước. Mở userHome.html và bao gồm một tham chiếu đến các template jQuery.

Xoá div list-group hiện tại và thay thế bằng code HTML sau:

Bên trong UL với list-group, chúng ta sẽ gắn dữ liệu của chúng ta. Định nghĩa listTemplate như sau trong phần body của HTML:

Chỉnh sửa callback success của AJAX jQuery để gắn dữ liệu vào listTemplate.

Ngoài ra, thêm một số phong cách trong userHome.html:

Lưu tất cả các thay đổi và khởi động lại máy chủ. Trỏ trình duyệt của bạn đến http://localhost:5002 và đăng nhập bằng một địa chỉ email và mật khẩu hợp lệ. Một khi đã đăng nhập, bạn sẽ có thể nhìn thấy những mong ước được tạo bởi người dùng.

User Home with Edit Icon

Bước 2: Hiển thị Hộp thoại Chỉnh sửa

Chúng ta sẽ sử dụng Bootstrap để hiển thị hộp thoại nhằm cung cấp giao diện để chỉnh sửa các mong ước. Hãy bao gồm một tham chiếu đến Bootstrap trong userHome.html.

Một khi tham chiếu đã được thêm vào, hãy thêm HTML sau vào userHome.html.

HTML ở trên sẽ đóng vai trò như là hộp thoại. Khi người dùng nhấp vào biểu tượng chỉnh sửa, hộp thoại sẽ bật lên. Chúng ta đã thêm thuộc tính data-targetdata-toggle để kích hoạt hộp thoại.

Lưu các thay đổi ở trên và khởi động lại ứng dụng. Sau khi đã đăng nhập vào ứng dụng, hãy nhấp vào biểu tượng chỉnh sửa và bạn sẽ có thể thấy hộp thoại.

Edit Wish Popup

Bước 3: Điền vào Hộp thoại Chỉnh sửa

Khi người dùng nhấp vào biểu tượng chỉnh sửa, chúng ta sẽ hiển thị hộp thoại cập nhật với titledescription. Để bắt đầu, trước tiên chúng ta cần ID của mong ước để lấy các chi tiết của mong ước cụ thể khi người dùng nhấp vào biểu tượng chỉnh sửa. Vì vậy, hãy chỉnh sửa code template jQuery để bao gồm một thuộc tính data-id bổ sung trên phần tử liên kết chỉnh sửa.

Chúng ta cũng ràng buộc một sự kiện onclick để gọi phương thức Edit. Bên trong hàm Edit, chúng ta sẽ làm cho AJAX gọi đến một phương thức python có tên là getWishById và sẽ trả về các chi tiết của mong ước.

Tiếp theo, mở app.py và tạo ra một phương thức gọi là getWishById. Sử dụng phương thức này, chúng ta sẽ lấy được các chi tiết của mong ước cụ thể từ cơ sở dữ liệu.

Như bạn có thể thấy trong phương thức ở trên, chúng ta đã truyền ID của mong ước vào phương thức này và nó sẽ lấy dữ liệu từ cơ sở dữ liệu bằng ID của người dùng và ID của mong ước. Một khi đã lấy được dữ liệu, nó sẽ chuyển đổi dữ liệu đó thành một danh sách và sau đó trả về nó như là dữ liệu JSON.

Tiếp theo, hãy tạo ra thủ tục lưu trữ trong MySQL cần thiết để lấy dữ liệu từ cơ sở dữ liệu.

Code được hiển thị ở trên là thủ tục lưu trữ để lấy các chi tiết của mong ước cụ thể sử dụng ID của mong ước và ID của người dùng.

Lưu các thay đổi và khởi động lại máy chủ. Sau khi đã đăng nhập vào ứng dụng, nhấp vào biểu tượng chỉnh sửa và bạn sẽ thấy các thông tin được log trong giao diện console của trình duyệt.

Để gắn dữ liệu đã nhận vào hộp thoại HTML, trước tiên hãy xóa thuộc tính data-target và thuộc tính data-toggle khỏi thẻ liên kết chỉnh sửa. Sau đó, thêm code sau vào hàm Edit trong JavaScript để điền vào hộp thoại và bật nó lên.

Lưu các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập vào ứng dụng, hãy thử nhấp vào biểu tượng chỉnh sửa và bạn sẽ thấy cửa sổ bật lên với title và description.

Populated Edit Pop Up

Bước 4: Cập nhật các Chi tiết của Mong ước

Để cài đặt tính năng cập nhật, hãy tạo một thủ tục lưu trữ trong MySQL.

Như đã thấy trong thủ tục được lưu trữ ở trên, chúng ta sẽ truyền vào titledescription đã chỉnh sửa cùng với ID của mong ước và người dùng để cập nhật các chi tiết trong cơ sở dữ liệu.

Tiếp theo, hãy tạo ra một phương thức mới được gọi là updateWish để cập nhật các chi tiết. Dưới đây là phương thức updateWish:

Như đã thấy trong đoạn code ở trên, sau khi xác nhận một session hợp lệ, chúng ta đã thu thập dữ liệu được post và gọi thủ tục lưu trữ sp_updateWish để cập nhật các chi tiết.

Để gọi phương thức updateWish, chúng ta cần phải đính kèm một sự kiện click trên button Update. Vì vậy, hãy đặt tên cho button Update là btnUpdate và gắn vào một sự kiện onclick như sau:

Như đã thấy trong đoạn code ở trên, chúng ta lấy editId từ localStorage, vì vậy, bên trong hàm Edit lưu ID vào localStorage.

Gom việc gọi getWish trong AJAX thành một hàm, từ đó chúng ta có thể gọi nó một lần nữa khi dữ liệu đã được cập nhật.

Gọi hàm getWishes trong callback success của update trong AJAX.

Lưu tất cả các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập vào ứng dụng, hãy thử chỉnh sửa các mong ước có sẵn do người dùng tạo.

Xóa một Mong ước

Bước 1: Hiển thị Hộp thoại Xác nhận

Thêm code HTML sau đây vào userHome.html.

Thêm biểu tượng xóa bên trong listTemplate bằng cách thêm code HTML sau:

Khi nhấp vào biểu tượng xóa ở trên, chúng ta sẽ gọi hàm JavaScript có tên là confirmDelete nơi chúng ta sẽ kích hoạt cửa sổ hộp thoại xác nhận.

Lưu các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập, hãy nhấp vào biểu tượng xóa trong danh sách mong ước và bạn sẽ có thể thấy hộp thoại xác nhận bật lên.

Delete Confirmation Popup

Bước 2: Xóa một Mong ước

Để cài đặt tính năng Xóa mong ước, trước tiên chúng ta hãy tạo ra thủ tục lưu trữ MySQL.

Thủ tục ở trên nhận ID của mong ước và ID của người dùng và xóa mong ước tương ứng khỏi cơ sở dữ liệu.

Tiếp theo, hãy tạo ra một phương thức bên trong app.py để gọi thủ tục sp_deleteWish.

Chúng ta sẽ tạo ra một phương thức gọi là deleteWish để xóa mong ước.

Trong phương thức ở trên, chúng ta trước tiên xác minh session. Một khi chúng ta đã xác minh session user, sử dụng ID của mong ước và ID của người dùng, chúng ta gọi thủ tục lưu trữ sp_deleteWish.

Để gọi phương thức deleteWish ở trên, hãy thêm một sự kiện onclick vào button Delete trong cửa sổ hộp thoại xác nhận.

Tạo một hàm JavaScript được gọi là Delete, và bên trong Delete làm cho AJAX gọi phương thức deleteWish của python.

Trong hàm callback success của hàm Delete ở trên, chúng ta sẽ kiểm tra trạng thái trả về và nếu OK, chúng ta sẽ ẩn hộp thoại và tải lại các mong ước.

Lưu các thay đổi và khởi động lại máy chủ. Một khi đăng nhập vào ứng dụng, hãy thử xóa một mong ước khỏi trang chủ của người dùng.

Phần tóm tắt

Trong phần này, chúng ta đã tìm hiểu cách cài đặt chức năng Chỉnh sửaXoá mong ước cho Ứng dụng Danh sách Mong ước của chúng ta. Trong phần tiếp theo của loạt bài này, chúng ta sẽ cài đặt phân trang cho danh sách trên trang chủ của người dùng và đồng thời cài đặt thêm một vài tính năng nữa.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Hãy cho chúng tôi biết những suy nghĩ của bạn trong phần bình luận ​​dưới đây nhé!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.