Hướng dẫn dùng flask bootstrap python
Trong phần này, chúng ta sẽ tìm hiểu cách thay thế các template cơ bản với các template mới để nâng cấp giao diện cho ứng dụng nhờ framework Bootstrap. Show Để giúp cho bạn dễ theo dõi, sau đây là danh sách các bài viết trong loạt bài hướng dẫn này:
Bạn có thể truy cập mã nguồn cho phần này tại GitHub. Có lẽ bạn cũng nhận ra là đến thời điểm này, chúng ta chỉ tập trung vào phần chức năng của ứng dụng mà không để ý đến giao diện, hay nói đúng hơn là chúng ta không hề để thời gian để chăm chút cho giao diện. Các template mà chúng ta đã dùng chỉ cung cấp các thành phần giao diện cơ bản và không có các tùy biến để làm cho chúng đẹp hơn. Khi bắt đầu bất kỳ ứng dụng nào, chúng ta nên để ý đến các chức năng quan trọng trước và không nên bị phân tâm về vấn đề giao diện. Tuy nhiên, chúng ta đã tập trung để hoàn thiện chức năng cơ bản trong một thời gian khá dài. Vì vậy, trong phần này chúng ta sẽ nghỉ ngơi một chút và dành ít thời gian để xem xét giao diện và cải thiện để ứng dụng của chúng ta có vẻ chuyên nghiệp hơn. Phần này cũng sẽ khát một chút so với các phần trước vì chúng ta sẽ không đi quá sâu vào chi tiết như khi chúng ta tìm hiểu về mã Python vì đó vẫn là trọng tâm của loạt bài này. Việc tạo ra một giao diện đẹp là một chủ đề rộng và không liên quan nhiều đến việc lập trình ứng dụng với Python. Nhưng chúng ta sẽ thảo luận những tiêu chuẩn cơ bản nhất và cách thực hành. Và nếu bạn quan tâm đến chủ đề này, bạn có thể tự tìm hiểu thêm sau khi giao diện cho ứng dụng của chúng ta được thiết kế lại. Framework CSSLà lập trình viên, chúng ta thường cảm thấy việc lập trình có nhiều trở ngại, nhưng bạn cũng nên biết rằng những khó khăn của các lập trình viên không thấm vào đâu so với công việc của những chuyên gia thiết kết Web. Họ phải tạo ra các khuôn mẫu đẹp và thống nhất trên một loạt các trình duyệt khác nhau. Vấn đề này được cải thiện nhiều trong những năm gần đây, tuy nhiên vẫn có những lỗi hoặc rắc rối chuyên biệt với một vài trình duyệt làm cho việc tạo ra các trang Web đẹp giống nhau trên mọi trình duyệt đặc biệt khó. Và càng khó hơn nếu chúng ta phải xem xét đến các hạn chế về tài nguyên và không gian hiển thị của các tablet (máy tính bảng) và smartphone. Là lập trình viên, đa số chúng ta chỉ muốn tạo ra các trang Web tương đối dễ nhìn mà không cần phải tốn quá nhiều thời gian hay sức lực để học các kỹ thuật chuyên sâu với mã HTML và CSS. Vì vậy, giải pháp của chúng ta chỉ có thể là sử dụng các framework CSS sẵn có để làm cho việc thiết kế giao diện của chúng ta trở nên đơn giản hơn. Nếu chọn cách làm này, bạn sẽ phải hy sinh tính sáng tạo một chút, nhưng đổi lại, các trang Web bạn tạo ra sẽ có giao diện tương đối đẹp trong mọi trình duyệt mà không cần phải tốn nhiều công sức. Một framework CSS sẽ cung cấp mọt tập hợp các lớp CSS với các kiểu hiển thị được thiết kế sẵn cho các thành phần cơ bản của giao diện. Phần lớn các framework kiểu này cũng có kèm theo mã JavaScript để hỗ trợ cho việc tạo ra các thành phần không thể được hiển thị chỉ bằng HTML và CSS. Giới thiệu BootstrapMột trong những framework phổ biến nhất là Bootstrap do Twitter tạo ra. Nếu bạn muốn thấy các trang Web được tạo ra từ framework này, bạn có thể xem các ví dụ tại tài liệu sử dụng của Bootstrap. Khi sử dụng Bootstrap, chúng ta sẽ có các lợi thế sau đây:
Cách trực tiếp nhất để sử dụng Bootstrap là tham chiếu đến file bootstrap.min.css trong template cơ bản. Bạn có thể tải về một bản sao của file này và sao chép nó vào thư mục dự án của bạn hay tham chiếu trực tiếp từ các
CDN (Content Delivery Network hay mạng phát hành nội dung). Sau đó bạn có thể dùng các lớp CSS được định nghĩa trong Bootstrap theo hướng dẫn từ các tài liệu trực tuyến của nó. Trong một số trường hợp, bạn có thể cần tham chiếu đến file bootstrap.min.js có mã JavaScript cần thiết để hỗ trợ cho các chức năng cao
cấp trong framework. Tuy nhiên, chúng ta sẽ dùng cách đơn giản hơn để sử dụng Bootstrap trong ứng dụng của chúng ta với sự hỗ trợ của một thư viện mở rộng của Flask là Flask-Bootstrap. Thư viện này cung cấp các template cơ bản có dùng Bootstrap. Như thường lệ, chúng ta hãy cài đặt nó với
Sử dụng Flask-BootstrapCũng như các thư viện mở rộng khác, chúng ta cần khởi tạo Flask-Bootstrap: app/__init__.py: Khởi tạo thực thể Flask-Bootstrap.
Sau khi khởi tạo, chúng ta có thể tham chiếu đến template bootstrap/base.html từ các template trong ứng dụng của chúng ta với lệnh Tuy nhiên nếu bạn còn nhớ, chúng ta đã sử dụng lệnh Như vậy làm sao chúng ta có thể sử dụng template base.html của Bootstrap? Thật ra giải pháp cho vấn đề này không phức tạp lắm: chúng ta sẽ sử dụng cấu trúc thừa kế ba tầng thay vì hai tầng như hiện giờ. Template bootstrap/base.html sẽ là template ở cấp cao nhất và cung cấp cấu trúc cơ bản cho các trang trong ứng dụng, bao gồm các file cần thiết cho
framework Bootstrap. Template này sẽ có một vài khối sẽ được kế thừa trong các template khác trong ứng dụng như là Sau đây là nội dung của template base.html của chúng ta sau khi được cập nhật để sử dụng template base.html của Bootstrap: app/templates/base.html: template base được cập nhật.
Bạn có thể thấy chúng ta đã kế thừa từ template bootstrap/base.html và thêm vào các mã HTML mới cho các khối Khối title là nơi định nghĩa chuỗi văn bản được dùng làm đầu đề (title) cho ứng dụng với thẻ Khối Cuối cùng, trong khối Cần lưu ý là trước đây chúng ta dùng khối tên là app/templates/404.html: Template 404 mới.
Hiển thị form của BootstrapMột trong những ưu điểm của Flask-Bootstrap là cách thức hiển thị form. Thay vì phải tạo ra các trường trong form một cách thủ công, Flask-Bootstrap cho phép chúng ta truyền trực tiếp một đối tượng Flask-WTF form thông qua một macro và sẽ hiển thị toàn bộ form với cách định dạng của Bootstrap. Sau đây là ví dụ về trang register.html sử dụng Bootstrap: app/templates/register.html: Template đăng ký user có sử dụng Bootstrap.
Thật tuyệt phải không? Câu lệnh import ở đầu trang sử dụng cú pháp tương tự như lệnh Hiển thị các bài viếtTrước đây, chúng ta cũng đã xây dựng một template con gọi là _post.html để tập trung các mã hiển thị từng bài viết đơn vào một nơi duy nhất. Vì vậy, để hiển thị các bài viết theo kiểu của Bootstrap, chúng ta chỉ cần thay đổi template này và không cần thay đổi ở bất kỳ chỗ nào khác. Bạn có thấy lợi ích khi xây dựng cấu trúc mã hợp lý chưa? app/templates/_post.html: Template con để hiển thị bài viết đã được cập nhật
|