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 7

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 6
Creating a Web App From Scratch Using Python Flask and MySQL: Part 8

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 này, chúng ta đã cài đặt chức năng upload hình ảnh cho người dùng khi thêm một mong ước. Chúng ta cũng đã thêm một vài tuỳ chọn liên quan đến mong ước của người dùng trên trang Add Wish. Trong hướng dẫn này, chúng ta sẽ nâng nó lên một cấp độ cao hơn bằng cách cài đặt chức năng cho phép like một mong ước nào đó.

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, 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 đang chạy.

Tạo Giao diện Dashboard

Chúng ta sẽ tạo một trang mới gọi là dashboard, nơi tất cả những mong ước từ những người dùng khác nhau sẽ được hiển thị. Bất kỳ người dùng nào cũng có thể like hoặc nhận xét về những mong ước được hiển thị trong dashboard. Vì vậy, hãy điều hướng đến thư mục templates và tạo một tập tin gọi là dashboard.html. Mở dashboard.html và thêm code HTML sau đây:

Mở app.py và tạo một route mới gọi là /showDashboard. Sử dụng route này, chúng ta sẽ hiển thị trang dashboard.

Sửa đổi phương thức /validateLogin để chuyển hướng người dùng khi đăng nhập thành công đến trang dashboard thay vì trang chủ của người dùng.

Lưu các thay đổi ở trên và khởi động lại máy chủ. Trỏ trình duyệt đến http://localhost:50002 và đăng nhập bằng địa chỉ email và mật khẩu hợp lệ. Sau khi đăng nhập, bạn sẽ có thể thấy trang dashboard.

Dashboard Page

Như đã thấy trong hình trên, chúng ta sẽ hiển thị tất cả các mong ước được tạo ra bởi những người dùng khác nhau và cho phép những người dùng khác truy cập vào chúng.

Điền Nội dung vào Dashboard

Trước tiên, chúng ta cần lấy dữ liệu từ cơ sở dữ liệu để đưa vào dashboard. Vì vậy, chúng ta hãy tạo một thủ tục lưu trữ để lấy những mong ước được tạo ra bởi người dùng.

Thủ tục lưu trữ ở trên sẽ lấy tất cả các mong ước từ bảng tbl_wish mà không được đánh dấu là riêng tư.

Tiếp theo, chúng ta sẽ tạo một phương thức Python mới để gọi thủ tục lưu trữ sp_GetAllWishes. Mở app.py và thêm code sau đây cho phương thức getAllWishes.

Trong phương thức trên, trước tiên chúng ta kiểm tra session người dùng hợp lệ và sau đó tạo một kết nối MySQL. Bằng đối tượng kết nối conn của MySQL, chúng ta sử dụng một con trỏ để gọi thủ tục lưu trữ sp_GetAllWishes để lấy dữ liệu cần thiết. Khi đã lấy được dữ liệu, chúng ta phân tích kết quả và trả về một chuỗi JSON thích hợp.

Chúng ta sẽ gọi phương thức /getAllWishes đã được tạo ra ở trên khi trang dashboard được tải. Mở dashboard.html và sử dụng jQuery AJAX, hãy gọi đến /getAllWishes khi document.ready.

Lưu các thay đổi ở trên và khởi động lại máy chủ. Sau khi đã đăng nhập vào ứng dụng, hãy kiểm tra giao diện console của trình duyệt và bạn sẽ có thể thấy các dữ liệu được lấy từ cơ sở dữ liệu.

Sử dụng dữ liệu từ phản hồi, chúng ta sẽ điền vào trang dashboard của chúng ta. Trước tiên, hãy xoá code HTML ở giữa div .well khỏi dashboard.html.

Trong hàm callback success khi gọi AJAX, phân tích response thành một đối tượng JavaScript.

Chúng ta sẽ cần tạo code HTML thumbnail tự động bằng cách sử dụng jQuery cho mỗi bộ ba mong ước trên một hàng. Đầu tiên chúng ta hãy tạo một hàm JavaScript để tạo ra code HTML tự động. Đây là code HTML mà chúng ta sẽ tạo ra tự động bằng jQuery:

Chúng ta sẽ đặt tên cho hàm JavaScript là CreateThumb. Trong hàm này, chúng ta sẽ tạo các phần tử HTML và nối chúng với các phần tử cha của chúng để có được code HTML như ở trên.

Các code ở trên là khá đơn giản vì vậy tôi sẽ không đi sâu vào chi tiết.

Tiếp theo, chúng ta sẽ lặp qua phản hồi JSON và tạo HTML bằng hàm CreateThumb. Chúng ta dự định hiển thị ba mong ước trên mỗi hàng. Vì vậy, chúng ta sẽ kiểm tra điều đó và tạo một hàng mới cho ba mong ước. Thêm code sau đây vào hàm callback success khi gọi AJAX trong dashboard.html.

Lưu các thay đổi và khởi động lại máy chủ. Đăng nhập vào ứng dụng và khi ở trên trang dashboard, bạn sẽ có thể thấy những mong ước được thêm bởi những người dùng khác nhau, với một tuỳ chọn để thích chúng.

Tiếp theo, hãy thêm một sự kiện click vào các nút like ở dưới thumbnail của các mong ước. Vì chúng ta đã tạo các nút một cách tự động, nên chúng ta sẽ cần gắn sự kiện click vào các nút bằng phương thức on của jQuery.

Cài đặt Chức năng Like

Hãy bắt đầu bằng cách tạo ra một bảng để theo dõi những like mà một mong ước cụ thể thu được. Tạo một bảng gọi là tbl_likes.

Bây giờ bất cứ khi nào người dùng like hoặc không like một mong ước cụ thể, chúng ta sẽ cập nhật bảng này. Hãy tạo một thủ tục lưu trữ MySQL để cập nhật bảng trên.

Trong thủ tục lưu trữ này, chúng ta chỉ cần kiểm tra có người nào like một mong ước hay không. Nếu có người đó like, thì chúng ta cập nhật hoặc thêm một like mới.

Hãy tạo ra một phương thức Python để gọi thủ tục được lưu trữ ở trên.

Đây là phương thức Python sẽ gọi thủ tục lưu trữ sp_AddUpdateLikes. Trong phương thức này, chúng ta kiểm tra session người dùng hợp lệ và sau đó truyền ID và trạng thái like của mong ước vào thủ tục được lưu trữ để cập nhật. Khi người dùng nhấp chuột vào nút like, chúng ta cần phải gọi phương thức Python /addUpdateLike. Do đó, hãy thêm đoạn code sau vào sự kiện nhấn vào nút like trong dashboard.html.

Hiện tại, chúng ta đang gán giá trị của like một cách thủ công. Vì vậy, hãy lưu các thay đổi và khởi động lại máy chủ. Đăng nhập vào ứng dụng và nhấp vào nút like dưới bất kỳ thumbnail của mong ước nào. Bây giờ kiểm tra bảng tbl_likes và bạn sẽ thấy một mục dữ liệu trong đó.

Tóm tắt

Trong phần này của hướng dẫn, chúng ta đã điền dữ liệu vào trang dashboard của ứng dụng bằng những mong ước đượ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 thumbnail để người dùng có thể like một mong ước cụ thể. Trong phần tiếp theo, chúng ta sẽ xem cách bỏ like và hiển thị tổng số lượt like đã nhận được bởi một mong ước cụ thể.

Hãy cho chúng tôi biết những đề xuất hoặc bất kỳ hiệu chỉnh nào trong phần 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.