Advertisement
  1. Code
  2. Python

Tạo một Ứng dụng Web từ đầu bằng Python Flask và MySQL: Phần 6

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 5
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 này, chúng ta đã cài đặt phân trang cho danh sách mong ước trên trang chủ của người dùng. Trong phần này, chúng ta sẽ cài đặt một tùy chọn để người dùng tải lên một hình ảnh đại diện cho mong ước, một tuỳ chọn để đánh dấu mong ước đã hoàn thành và một tùy chọn để thiết lập riêng tư.

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.

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

Chỉnh sửa Giao diện Người dùng

Hãy bắt đầu bằng cách chỉnh sửa trang "add wish" của chúng ta để bao gồm một tùy chọn tải lên một tấm ảnh. Chuyển đến templates/addWish.html. Form của chúng ta trong addWish.html có vẻ khá nhỏ, vì vậy, hãy sửa đổi code HTML bootstrap để làm cho form thẳng đứng.

Trước tiên, chúng ta sẽ sửa form-horizontal thành một form thẳng đứng, do đó hãy xoá lớp form-horizontal ra khỏi form. Chúng ta cũng sẽ thêm ba control mới: control để tải lên các tấm ảnh, hộp kiểm để đánh dấu mong ước là riêng tư và một hộp kiểm khác để đánh dấu mong ước đã hoàn thành. Đây là addWish.html đã được chỉnh sửa.

Lưu thay đổi ở trên và khởi động lại máy chủ. Sau khi đăng nhập thành công, nhấp chuột vào liên kết Add Wish và bạn sẽ có thể thấy trang add wish đã được sửa đổi.

Add Wish Page with Image Upload

Cài đặt Chức năng Tải lên

Chúng ta sẽ sử dụng jQuery-File-Upload của blueimp để cài đặt chức năng tải lên tập tin. Tải về các tập tin cần thiết từ GitHub. Trích xuất mã nguồn và thêm các cham chiếu script sau vào addWish.html.

Khi trang addWish.html được tải, thêm code khởi tạo plugin vào sự kiện click của button tải lên.

Như đã thấy trong đoạn code ở trên, chúng ta đã gắn plugin tải tập tin lên vào button #fileupload. Plugin tải lên tập tin post tập tin đến trình xử lý yêu cầu /upload, cái mà chúng ta sẽ định nghĩa trong code Python của chúng ta. Chúng ta cũng đã định nghĩa một hàm add để submit dữ liệu và định nghĩa các callback successfailure để xử lý tải lên thành công và thất bại.

Tiếp theo, hãy định nghĩa trình xử ly tải lên tập tin Python upload trong app.py. Xác định một tuyến /upload như sau:

Kiểm tra xem yêu cầu có phải là một yêu cầu POST hay không, và nếu như vậy đọc tập tin từ yêu cầu.

Chúng ta cũng cần phải lấy phần mở rộng tập tin hình ảnh để lưu tập tin. Vì vậy, hãy import os và sau đó chia tách phần mở rộng khỏi tên tập tin.

Một khi chúng ta có phần mở rộng tập tin, chúng ta sẽ tạo ra một tên tập tin duy nhất mới bằng uuid. Import uuid và tạo tên tập tin.

Tạo một thư mục có tên là Uploads trong thư mục static. Đây là nơi chúng ta sẽ giữ các hình ảnh đã tải lên. Thêm đường dẫn đến thư mục Uploads trong cấu hình ứng dụng.

Bây giờ hãy lưu tập tin đã được post lên vào vị trí UPLOAD_FOLDER và trả về tên tập tin như một phản hồi (response).

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:5002 và đăng nhập bằng các thông tin xác thực hợp lệ. Hãy thử tải lên một tấm ảnh bằng cách sử dụng button browse và khi hoàn tất, hãy kiểm tra giao diện console trong trình duyệt của bạn. Bạn sẽ có thể thấy tên tập tin tải lên được trả về.

Thay vì input văn bản chỉ-đọc, hãy thêm một phần tử hình ảnh để hiển thị hình ảnh đã tải lên. Vì vậy, hãy thay thế input văn bản chỉ-đọc bằng code HTML sau đây:

Trong callback success khi tải lên tập tin, hãy cập nhật src của #imgUpload thành tấm ảnh đã tải lên.

Lưu các thay đổi ở trên và khởi động lại máy chủ. Đăng nhập vào ứng dụng và thử tải lên một tập tin hình ảnh mới và bạn sẽ có thể thấy hình ảnh đã tải lên.

Add Wish Page With Upload

Chúng ta sẽ cần sửa đổi cấu trúc bảng tbl_wish của chúng ta để thêm ba trường mới. Thay đổi tbl_wish như hình dưới đây:

Tiếp theo chúng ta hãy sửa đổi các thủ tục lưu trữ sp_addWishsp_updateWish để bao gồm các trường mới được bổ sung vào cơ sở dữ liệu.

Sửa đổi thủ tục lưu trữ sp_addWish để bao gồm ba trường mới được thêm vào.

Đồng thời sửa đổi thủ tục lưu trữ sp_updateWish để bao gồm ba trường vừa mới được thêm vào.

Tiếp theo, hãy sửa đổi phương thức của trình xử lý yêu cầu /addWish để đọc các trường mới được post và truyền chúng vào thủ tục lưu trữ.

Một khi các giá trị đã được đọc, chúng ta sẽ truyền chúng vào thủ tục lưu trữ MySQL.

Trong trang addWish.html, chúng ta sẽ cần thiết lập thuộc tính name cho các phần tử được post. Do đó, hãy thêm name cho cả hai hộp kiểm mới được thêm vào.

Bây giờ chúng ta cũng cần truyền vào đường dẫn tập tin tải lên. Vì vậy, chúng ta sẽ tạo ra một input ẩn và thiết lập giá trị của nó trong hàm callback success khi tải lên tập tin.

Thiết lập giá trị của nó trong hàm callback success khi tải lên tập tin.

Lưu các thay đổi ở trên và khởi động lại máy chủ. Đăng nhập bằng các thông tin xác thực hợp lệ và thử thêm một mong ước mới với tất cả các chi tiết theo yêu cầu. Sau khi thêm thành công, nó sẽ được liệt kê trên trang chủ của người dùng.

Chỉnh sửa Cài đặt Sửa đổi Mong ước

Trước tiên, chúng ta cần thêm một số code HTML cho ba trường mới. Vì vậy, hãy mở userHome.html và thêm code HTML sau đây sau titledescription.

Chúng tôi sẽ cần phải tìm nạp dữ liệu cần thiết để điền vào các trường trên khi chỉnh sửa. Do đó, chúng ta hãy sửa thủ tục lưu trữ sp_GetWishById để bao gồm các trường bổ sung như sau:

Tiếp theo, chúng ta sẽ cần sửa đổi chuỗi JSON trong phương thức của tuyến /getWishById để bao gồm các trường mới. Sửa đổi danh sách mong ước trong /getWishById như sau:

Để kết xuất kết quả, chúng ta cần phải phân tích dữ liệu nhận được trong callback success của hàm Edit trong JavaScript trong userHome.html.

Lưu các thay đổi và khởi động lại máy chủ. Đăng nhập bằng các thông tin xác thực hợp lệ và khi ở trang chủ của người dùng, hãy thử chỉnh sửa mong ước từ danh sách mong ước. Bạn sẽ thấy dữ liệu được nhập trong cửa sổ Chỉnh sửa bật lên.

Edit Pop Up With Additional Fields

Bây giờ, tương tự như những gì chúng ta đã làm trên trang add wish, hãy thêm tham chiếu đến script jQuery-File-Upload trong userHome.html.

Khởi tạo control tải lên trong hộp thoại chỉnh sửa sử dụng code tương tự như chúng ta đã sử dụng trên trang add wish.

Tiếp theo, chúng ta cần phải sửa đổi button Update trong hộp thoại Chỉnh sửa để bao gồm các trường bổ sung được thêm vào. Vì vậy, trong sự kiện button click btnUpdate, hãy sửa đổi các tham số dữ liệu được truyền vào để bao gồm ba trường mới như sau:

Mở app.py và sửa đổi phương thức của trình xử lý yêu cầu /updateWish để phân tích các trường mới được thêm vào.

Sửa đổi phương thức gọi thủ tục để bao gồm các tham số bổ sung.

Bây giờ mở sp_updateWish và sửa đổi nó để bao gồm các trường vừa được thêm vào.

Lưu tất cả các thay đổi ở trên và khởi động lại máy chủ. Đăng nhập bằng các thông tin xác thực hợp lệ, thử chỉnh sửa và cập nhật các mục hiện có.

Phần tóm tắt

Trong phần này, chúng ta đã học được cách tích hợp và sử dụng plugin jQuery-File-Upload của blueimp để tải lên hình ảnh trong ứng dụng Python Flask của chúng ta. Trong phần tiếp theo của loạt bài này, chúng ta sẽ hiển thị những mong ước đã được tạo ra bởi người dùng trên trang chủ của ứng dụng và thêm chức năng để thích những mong ước.

Hãy cho chúng tôi biết những suy nghĩ, hiệu chỉnh và đề xuất của bạn 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.