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 3

by
Read Time:8 minsLanguages:
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 2
Creating a Web App From Scratch Using Python Flask and MySQL: Part 4

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 chức năng đăng nhập và đăng xuất cho ứng dụng Danh sách Mong ước của chúng ta. Trong phần này, chúng ta sẽ cài đặt back-end và front-end cần thiết để cho người dùng thêm và hiển thị các phần tử trong danh sách.

Bắt đầu

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

Khi mã nguồn đã được nhân bản, đ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.

Bucket List App Home PageBucket List App Home PageBucket List App Home Page

Thêm Phần tử vào Danh sách

Bước 1: Tạo một Giao diện để Thêm Phần tử

Chúng ta sẽ bắt đầu bằng cách tạo giao diện để cho người dùng đã đăng nhập thêm các phần tử trong danh sách. Điều hướng đến thư mục templates bên trong thư mục dự án và tạo tập tin có tên addWish.html. Mở addWish.html và thêm code HTML sau:

Mở app.py và thêm một tuyến và phương thức mới để hiển thị trang Add Wish.

Mở userHome.html và thêm một phần tử menu mới để liên kết đến trang Add Wish.

Lưu 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 địa chỉ email và mật khẩu hợp lệ. Sau khi đăng nhập, nhấp chuột vào liên kết Add Wish và bạn sẽ thấy trang Add Wish.

Add Bucket List ItemAdd Bucket List ItemAdd Bucket List Item

Bước 2: Cài đặt Cơ sở dữ liệu

Để thêm các phần tử vào danh sách, chúng ta cần tạo một bảng có tên là tbl_wish.

tbl_wish sẽ có title, descriptionID của người dùng đã tạo ra mong ước.

Tiếp theo, chúng ta cần phải tạo một thủ tục lưu trữ MySQL để thêm các phần tử vào bảng tbl_wish.

Bước 3: Tạo một Phương thức Python để gọi Thủ tục Lưu trữ MySQL

Hãy tạo một phương thức gọi là addWish trong app.py.

Vì chúng ta sẽ post dữ liệu lên phương thức này, nên chúng ta định nghĩa nó một cách rõ ràng trong tuyến (route) đã định nghĩa.

Khi gọi phương thức addWish, chúng ta cần xác minh nó có hợp lệ hay không bằng cách kiểm tra biến session user có tồn tại hay không. Một khi chúng ta đã xác minh session, chúng ta sẽ đọc titledescription được post lên.

Một khi chúng ta có các giá trị input cần thiết, chúng ta sẽ mở một kết nối MySQL và gọi thủ tục lưu trữ sp_addWish.

Sau khi chúng ta đã thực thi thủ tục lưu trữ, chúng ta cần phải commit những thay đổi vào cơ sở dữ liệu.

Dưới đây là phương thức addWish hoàn chỉnh.

Lưu tất cả mã nguồn và khởi động lại máy chủ. Trỏ trình duyệt đến http://localhost:5002 và đăng nhập bằng địa chỉ email và mật khẩu hợp lệ. Khi đã đăng nhập, hãy nhấp vào liên kết Add Wish. Nhập titledescription cho mong ước của bạn và nhấp vào Publish. Khi thêm thành công mong ước, nó sẽ chuyển hướng đến trang chủ của người dùng. Đăng nhập vào cơ sở dữ liệu MySQL và mong ước của bạn sẽ được lưu trong bảng tbl_wish.

Hiển thị một Phần tử trong Danh sách Mong ước

Bước 1: Tạo một Thủ tục Lưu trữ để lấy một Mong ước

Hãy tạo ra một thủ tục lưu trữ MySQL sẽ lấy những mong ước được tạo ra bởi người dùng. Nó sẽ nhận ID của người dùng như một tham số và trả về một tập hợp các mong ước được tạo bởi người dùng có ID đó.

Bước 2: Tạo một Phương thức Python để Truy vấn Dữ liệu

Tiếp theo, hãy tạo ra một phương thức Python sẽ gọi thủ tục lưu trữ sp_GetWishByUser để lấy những mong ước được tạo ra bởi người dùng. Thêm một phương thức được gọi là getWish trong app.py.

Như đã thấy trong đoạn code ở trên, phương thức này chỉ có thể được gọi với session user hợp lệ. Một khi chúng ta đã xác nhận một session user hợp lệ, chúng ta sẽ tạo một kết nối đến cơ sở dữ liệu MySQL và gọi thủ tục lưu trữ sp_GetWishByUser.

Một khi chúng ta lấy được dữ liệu từ MySQL, chúng ta sẽ phân tích dữ liệu và chuyển đổi nó thành một dictionary sao cho nó dễ dàng trả về JSON.

Sau khi chuyển đổi dữ liệu thành dictionary, chúng ta sẽ chuyển dữ liệu sang JSON và trả dữ liệu về.

Dưới đây là phương thức getWish đầy đủ.

Bước 3: Gắn dữ liệu JSON vào HTML

Khi trang chủ của người dùng được nạp, chúng ta sẽ gọi phương thức getWish bằng AJAX của jQuery và gắn dữ liệu đã nhận vào HTML của chúng ta. Trong userHome.html thêm script AJAX bằng jQuery sau đây:

Lưu các thay đổi ở trên và khởi động lại máy chủ. Một khi đã đăng nhập bằng địa chỉ email và mật khẩu hợp lệ, hãy kiểm tra giao diện console trong trình duyệt của bạn và bạn sẽ có danh sách mong ước lấy được từ cơ sở dữ liệu như sau:

Bây giờ, chúng ta cần lặp qua dữ liệu JSON và gắn nó vào HTML. Chúng ta sẽ sử dụng list-group của bootstrap để hiển thị các phần tử trong danh sách mong ước của chúng ta. Dưới đây là template list-group cơ bản:

Thêm code HTML ở trên vào div jumbotron trong userHome.html. Nó sẽ trông giống như sau:

list-group in User Homelist-group in User Homelist-group in User Home

Bây giờ, những gì chúng ta sẽ làm là tạo nhóm div list-group như ở trên cho mỗi mong ước trong danh sách và thêm nó vào div jumbotron. Bên trong callback success của hàm getWish, tạo một div như sau:

Chúng ta sẽ nhân bản div ở trên để tạo div list-group cho mỗi phần tử mong ước. Tiếp theo, phân tích cú pháp JSON trả về thành một đối tượng JavaScript.

Bây giờ, lặp qua wishObj và đối với mỗi phần tử mong ước, nhân bản một div mới và thêm nó vào div jumbotron.

Lưu các thay đổi ở trên và khởi động lại máy chủ. Đăng nhập bằng địa chỉ email và mật khẩu hợp lệ và bạn sẽ có thể xem danh sách mong ước được tạo bởi người dùng cụ thể.

User Home Page Populated with WishesUser Home Page Populated with WishesUser Home Page Populated with Wishes

Phần tóm tắt

Trong hướng dẫn này, chúng ta đã cài đặt một giao diện cho người dùng đã đăng nhập để tạo ra một mong ước. Chúng ta cũng đã cài đặt các phương thức cần thiết và thủ tục lưu trữ trong cơ sở dữ liệu để lấy và hiển thị các mong ước được tạo ra lên trên trang chủ của người dùng.

Trong phần tiếp theo của loạt bài này, chúng tôi sẽ giới thiệu cách cài đặt chức năng Chỉnh sửaXoá cho danh sách mong ước được hiển thị trong trang chủ của người dùng.

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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.