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 5

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

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 tôi đã giới thiệu cách cài đặt chức năng Chỉnh sửaXóa mong ước 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 chức năng phân trang cho danh sách trên trang chủ của 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, 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.

Cài đặt Phân trang

Khi danh sách mong ước trên trang chủ của người dùng tăng lên, nó sẽ được cuộn xuống dưới trang. Vì vậy điều quan trọng là phải cài đặt việc phân trang. Chúng ta sẽ hạn chế số lượng phần tử nhất định được hiển thị trên một trang.

Chỉnh sửa Thủ tục Lấy Mong ước

Chúng ta sẽ bắt đầu bằng cách sửa đổi thủ tục sp_GetWishByUser để trả về kết quả dựa trên giá trị limitoffset. Lần này chúng ta sẽ tạo ra thủ tục lưu trữ tự động để trả về bộ kết quả dựa trên giá trị limit và offset. Đây là thủ tục lưu trữ sp_GetWishByUser trong MySQL đã được sửa đổi.

Như đã thấy trong thủ tục lưu trữ ở trên, chúng ta tạo ra truy vấn SQL động của chúng ta và thực thi nó để lấy danh sách mong ước dựa trên các tham số offsetlimit.

Thêm Phân trang vào Giao diện Người dùng

Trước tiên, hãy định nghĩa một vài thiết lập mặc định. Trong app.py thêm một biến cho giới hạn trang.

Làm cho phương thức getWish chấp nhận các yêu cầu POST.

Đọc offsetlimit bên trong phương thức getWish và truyền nó trong khi gọi thủ tục lưu trữ MySQL sp_GetWishByUser.

Sửa đổi hàm JavaScript GetWishes trong userHome.html để thiết lập một yêu cầu POST và truyền vào giá trị offset.

Lưu tất cả các thay đổi và khởi động lại máy chủ. Đăng nhập bằng một địa chỉ email và mật khẩu hợp lệ và bạn sẽ có có hai phần tử được hiển thị trên màn hình.

User Home with Limited records

Vì vậy phần cơ sở dữ liệu đang hoạt động tốt. Tiếp theo, chúng ta cần thêm giao diện phân trang vào trang chủ của người dùng, điều này sẽ cho phép người dùng điều hướng qua lại giữa các trang.

Chúng ta sẽ sử dụng thành phần phần trang (gọi là pagination) của Bootstrap. Mở userHome.html và thêm code HTML sau đây sau UL #ulist.

Lưu các thay đổi và khởi động lại máy chủ. Sau khi đăng nhập thành công, bạn sẽ có thể thấy số trang ở dưới danh sách mong ước.

Pagination in User Home Page

Tạo Phần trang Động

Phần trang ở trên là hình ảnh cách đánh số trang của chúng ta. Nhưng để làm cho nó hoạt động, chúng ta cần phải tạo phân nhóm của chúng một cách tự động dựa trên số lượng các phần tử trong cơ sở dữ liệu.

Để tạo số trang, chúng ta sẽ cần tổng số phần tử có trong cơ sở dữ liệu. Vì vậy, hãy thay đổi thủ tục lưu trữ MySQL sp_GetWishByUser để trả về tổng số các phần tử trong đó như là một tham số đầu ra.

Như đã thấy trong thủ tục lưu trữ đã sửa đổi ở trên, chúng ta đã thêm một tham số đầu ra mới gọi là p_total và chọn tổng số các mong ước dựa trên id của người dùng.

Đồng thời sửa đổi phương thức pythong getWish để truyền vào một tham số đầu ra.

Như bạn thấy trong đoạn code ở trên, một khi chúng ta đã gọi thủ tục lưu trữ thì chúng ta đóng con trỏ lại và mở một con trỏ mới để chọn tham số đầu ra được trả về.

Trước đó, chúng ta đã trả về một danh sách mong ước từ phương thức của Python. Bây giờ, chúng ta cũng cần bao gồm tổng số phần tử đếm được trong JSON trả về. Vì vậy, chúng ta sẽ làm cho dictionary của danh sách mong ước thành một danh sách khác và sau đó thêm danh sách mong ước và tổng số phần tử vào danh sách chính. Dưới đây là code đã sửa đổi của phương thức getWish trong python.

Trong hàm GetWishes của JavaScript, bên trong hàm callback success, thêm một log console.

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 một địa chỉ email và mật khẩu hợp lệ và khi ở trên trang chủ của người dùng, hãy kiểm tra giao diện console của trình duyệt. Bạn sẽ thấy phản hồi tương tự như hình dưới đây:

Sử dụng tổng số nhận được từ phản hồi, chúng ta có thể lấy được tổng số trang.

Chia tổng số phần tử cho itemsPerPage cho ra số trang cần thiết. Nhưng điều này chỉ đúng khi tổng là một bội số của itemPerPage. Nếu không, chúng ta sẽ phải kiểm tra và xử lý số trang cho phù hợp.

Như vậy, điều đó sẽ cho chúng ta số trang đúng.

Bây giờ nhờ chúng ta có tổng số trang, nên chúng ta sẽ tạo HTML phân trang một cách tự động. Xóa phần tử LI khỏi HTML phân trang mà chúng ta đã thêm vào trước đó.

Trong hàm callback success GetWishes, hãy tạo liên kết previous động bằng jQuery.

Trong đoạn code ở trên, chúng ta tạo ra button previous và nối nó vào phân trang UL.

Lưu thay đổi ở trên và khởi động lại máy chủ. Khi đăng nhập thành công, bạn sẽ có thể thấy liên kết previous trong danh sách.

Previous link in the Pagination

Tương tự, hãy thêm các trang trong phân trang dựa theo số trang.

Hãy thêm liên kết Next sau khi liên kết các trang đã được thêm.

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

Pagination in User Home Page

Cài đặt Sự kiện Nhấp vào Số Trang

Bây giờ đi vào logic chính sẽ làm cho chức năng phân trang của chúng ta hoạt động. Những gì chúng ta sẽ làm là gắn một sự kiện click trên mỗi chỉ mục trang để gọi hàm GetWishes của JavaScript. Đầu tiên hãy gắn một sự kiện click vào phần tử liên kết hiển thị số trang.

Vì vậy, chúng ta chỉ cần gắn một sự kiện onclick vào liên kết trang. Trong mỗi lần nhấp chuột chúng ta sẽ gọi hàm GetWishes và truyền vào offset. Vì vậy, hãy khai báo offset bên ngoài vòng lặp for.

Gọi hàm GetWishes bên trong sự kiện click.

Đồng thời tăng dần offset dựa trên số lượng các phần tử được hiển thị.

Nhưng mỗi khi hàm GetWishes được gọi, giá trị của offset sẽ luôn luôn giá trị được thiết lập gần nhất. Vì vậy, chúng ta sẽ sử dụng tính năng Closure của JavaScript để truyền offset phù hợp cho hàm GetWishes.

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ệ và một khi ở trên trang chủ của người dùng, hãy thử nhấp vào các trang trong phân trang UL.

Tiếp theo, chúng ta sẽ cài đặt các liên kết trang trước (previous) và trang sau (next). Nó có vẻ hơi phức tạp một chút, vì vậy hãy để tôi giải thích nó trước khi chúng ta bắt đầu cài đặt.

Chúng ta sẽ hiển thị năm trang mỗi lần. Sử dụng liên kết next và previous, người dùng có thể điều hướng tương ứng đến 5 trang sau và 5 trang trước. Chúng ta sẽ lưu trữ các giá trị của trang đầu và trang cuối và tiếp tục cập nhật cả hai khi bấm nút next và previous. Vì vậy, hãy bắt đầu bằng cách thêm hai trường ẩn vào trang userHome.html.

Trong hàm callback success GetWishes, sau khi chúng ta đã làm rỗng UL .pagination, hãy thêm dòng code sau đây để có được trang đầu và trang cuối mới nhất.

Không có button previous hiển thị khi hiển thị các trang từ 1 đến 5. Nếu các trang được hiển thị lớn hơn 5 thì chúng ta sẽ hiển thị nút previous.

Khi người dùng nhấp vào nút previous, chúng ta sẽ reset các giá trị hdnStarthdnEnd và gọi hàm GetWishes của JavaScript.

Tiếp theo, dựa trên trang đầu và trang cuối, chúng ta sẽ lặp và tạo ra các liên kết trang và nối vào UL .pagination.

Bằng cách so sánh tổng số trang và giá trị bắt đầu của trang, chúng ta sẽ quyết định việc hiển thị button next.

Như đã thấy trong đoạn code ở trên, trên button next, chúng ta sẽ reset các giá trị hdnStarthdnEnd và gọi hàm GetWishes của JavaScript.

Như vậy đây là hàm GetWishes hoàn chỉnh.

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 một địa chỉ email và mật khẩu hợp lệ. Bạn sẽ có thể nhìn thấy phân trang đầy đủ chức năng cho danh sách mong ước của người dùng.

Phần tóm tắt

Trong phần này của loạt bài, chúng ta đã cài đặt chức năng phân trang cho danh sách mong ước trên trang chủ của người dùng. Chúng ta đã học được cách để lấy dữ liệu bằng một thủ tục lưu trữ MySQL và tạo phân trang bằng cách sử dụng dữ liệu đó, jQuery và Bootstrap.

Trong phần tiếp theo của loạt bài hướng dẫn này, chúng ta sẽ cài đặt chức năng tải tập tin lên ứng dụng của chúng ta.

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.