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

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

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 7

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 đã điền dữ liệu vào trang dashboard của ứng dụng bằng những mong muốn được tạo bởi những người dùng khác nhau. Chúng ta cũng gắn một nút like vào mỗi mong ước để người dùng có thể like một mong ước cụ thể.

Trong phần này của loạt bài, chúng ta sẽ xem cách like hoặc bỏ like và hiển thị tổng số lượt like của một mong ước muốn cụ thể.

Bắt đầu

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

Khi mã nguồn đã được clone, điều hướng đế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 đang chạy.

Thêm Bộ đếm Like

Chúng ta sẽ bắt đầu bằng cách cài đặt một tính năng để hiển thị tổng số lượt like mà một mong ước cụ thể đã thu được. Khi một mong ước mới được thêm vào, chúng ta sẽ tạo một mục dữ liệu trong bảng tbl_likes. Do đó, hãy sửa đổi thủ tục lưu trữ MySQL sp_addWish để thêm một mục dữ liệu vào bảng tbl_likes.

Như đã thấy trong code của thủ tục lưu trữ ở trên, sau khi thêm mong ước vào bảng tbl_wish, chúng ta truy vấn ID và dữ liệu vừa được chèn vào bảng tbl_likes.

Tiếp theo, chúng ta cần sửa đổi thủ tục lưu trữ sp_GetAllWishes để bao gồm số lượng like mà mỗi mong ước thu được. Chúng ta sẽ tận dụng một hàm MySQL để lấy tổng số mong ước. Do đó hãy tạo một hàm gọi là getSum, nó sẽ lấy ID của mong ước và trả về tổng số lượt like.

Bây giờ, hãy gọi hàm MySQL getSum ở trên trong thủ tục lưu trữ sp_GetAllWish để lấy tổng số lượt like cho mỗi mong ước.

Sửa đổi phương thức Python getAllWishes để bao gồm số lượt like. Khi lượt qua kết quả trả về từ thủ tục lưu trữ MySQL, hãy bao gồm trường like như sau:

Sửa đổi phương thức JavaScript CreateThumb để tạo thêm một phần tử span mà chúng ta sẽ sử dụng để hiển thị số lượng like.

Và nối likeSpan vào phần tử cha p. Đây là hàm CreateThumb đã được chỉnh sửa.

Hãy bao gồm tham số like khi gọi hàm CreateThumb trong callback success trong jQuery AJAX khi gọi đến /getAllWishes.

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, bạn sẽ thấy số lượng like tương ứng với từng mong ước.

Dashboard With Like

Hiện thị một Mong ước được Like hay không

Việc nhìn thấy các like ở bên dưới mỗi mong ước không thật sự rõ ràng lắm cho dù người dùng đăng nhập đã like mong ước hay chưa. Vì vậy, chúng ta sẽ hiển thị một thông điệp thích hợp giống như You & 20 Others. Để cài đặt cái đó, chúng ta cần phải sửa đổi sp_GetAllWishes để bao gồm một ít code xác định người dùng đã đăng nhập có like một mong ước cụ thể hay không. Để kiểm tra xem một mong ước có được like hay không, chúng ta sẽ gọi một hàm. Hãy tạo một hàm gọi là hasLiked nhận ID của người dùng và ID của mong ước như là các tham số và trả về kết quả mong ước có được like bởi người dùng hay không.

Bây giờ gọi hàm MySQL hasLiked ở trên bên trong sp_GetAllWishes để trả về một trường phụ trong bộ dữ liệu trả về xác định trạng thái like của người dùng.

Mở app.py và sửa đổi việc gọi thủ tục lưu trữ MySQL sp_GetAllWishes để bao gồm ID của người dùng như là một tham số.

Bây giờ hãy sửa đổi phương thức getAllWishes để bao gồm trạng thái like của người dùng đối với một mong ước cụ thể. Hãy sửa đổi code để bao gồm hasLiked trong dictionary đã được tạo.

Bên trong hàm JavaScript CreateThumb, chúng ta sẽ kiểm tra HasLiked và thêm HTML tương ứng.

Như đã thấy trong đoạn code trên, chúng ta sẽ hiển thị số lượt like nếu người dùng không like một mong ước cụ thể. Nếu người dùng đã like mong ước thì chúng ta sẽ hiển thị một thông điệp mang tính mô tả hơn.

Dashboard With Like Status

Làm mới Số lượt Like

Vào thời điểm này, khi chúng ta nhấp vào nút like, trạng thái like được cập nhật trong cơ sở dữ liệu, nhưng không thay đổi trong dashboard. Vì vậy, hãy cập nhật nó trong hàm callback success trong hàm AJAX khi nút like được nhấp vào.

Chúng ta sẽ bắt đầu bằng cách thực hiện một thay đổi trong thủ tục lưu trữ MySQL sp_AddUpdateLikes. Trước đó chúng ta đã truyền vào một trạng thái like, 1 cho một like và 0 là không like. Chúng ta sẽ sửa đổi điều đó và cài đặt like hoặc không like trong thủ tục lưu trữ. Mở sp_AddUpdateChuyển và gán trạng thái like vào một biến và kiểm tra trạng thái của biến. Nếu trạng thái biến là một like, chúng ta sẽ cập nhật trạng thái thành unlike và ngược lại. Dưới đây là thủ tục lưu trữ sp_AddUpdateLikes đã được sửa đổi.

Trong hàm JavaScript CreateThumb, gán một ID cho phần tử likeSpan mà chúng ta đã tạo ra trước đó để chúng ta có thể cập nhật trạng thái theo yêu cầu.

Mở app.py. Bên trong phương thức addUpdateLike, khi dữ liệu đã được cập nhật thành công, chúng ta sẽ truy vấn số lượt like và trạng thái của mong ước bằng cách gọi một thủ tục lưu trữ khác. Tôi tạo ra một thủ tục lưu trữ MySQL gọi là sp_getLikeStatus. Bên trong sp_getLikeStatus chúng ta sẽ gọi các hàm MySQL đã được tạo ra bao gồm getSumhasLiked để lấy trạng thái.

Khi gọi đến sp_AddUpdateLikes từ phương thức Python addUpdateLike đã được thực hiện, hãy đóng con trỏ và kết nối.

Bây giờ hãy gọi đến thủ tục lưu trữ sp_getLikeStatus.

Trả về số lượt like và trạng thái like cùng với phản hồi.

Bên trong dashboard.html, trong callback success của hàm AJAX được thực hiện cho phương thức addUpdateLike, phân tích phản hồi được trả về và dựa vào trạng thái like để hiển thị số lượt like.

Lưu các thay đổi, khởi động lại máy chủ và đăng nhập bằng các thông tin xác thực hợp lệ. Một khi ở trong trang dashboard, hãy thử like một mong ước cụ thể và xem trạng thái like được cập nhật như thế nào.

Tóm tắt

Trong phần này của loạt bài, chúng ta đã cài đặt tính năng like/unlike cho những mong ước được hiển thị trong trang dashboard. Trong phần tiếp theo của loạt bài, chúng ta sẽ cài đặt thêm một số tính năng mới trong ứng dụng và tinh chỉnh một số tính năng hiện có.

Hãy cho chúng tôi biết những suy nghĩ và đề xuất của bạn hoặc bất kỳ hiệu chỉnh nào trong bình luận bên dưới nhé. Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

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.