Reading Time: 32 minutes

Giới thiệu về Flask

Flask là một khung web (web framework) Python nhỏ gọn và linh hoạt, cung cấp các công cụ và tính năng hữu ích giúp việc tạo các ứng dụng web bằng Python trở nên dễ dàng hơn.

Nó mang lại sự linh hoạt cho các nhà phát triển và là một khung làm việc dễ tiếp cận hơn cho những người mới bắt đầu, bởi vì bạn có thể xây dựng một ứng dụng web nhanh chóng chỉ với một tệp Python duy nhất. Flask cũng có khả năng mở rộng và không ép buộc một cấu trúc thư mục cố định hay yêu cầu mã boilerplate phức tạp trước khi bắt đầu.

Trong bài viết này, chúng ta sẽ sử dụng bộ công cụ Bootstrap để thiết kế giao diện cho ứng dụng của bạn, giúp nó trông đẹp hơn. Bootstrap sẽ hỗ trợ chúng ta kết hợp các trang web responsive (phù hợp với cả màn hình máy tính và thiết bị di động) mà không cần viết quá nhiều mã HTML, CSS và JavaScript của riêng bạn để đạt được các mục tiêu này. Nhờ đó, bạn có thể tập trung vào việc học cách Flask hoạt động.

Flask sử dụng công cụ tạo mẫu Jinja (Jinja template engine) để xây dựng động các trang HTML bằng cách sử dụng các khái niệm Python quen thuộc như biến, vòng lặp, danh sách, v.v. Bạn sẽ sử dụng các mẫu này như một phần của dự án.

Trong hướng dẫn này, chúng ta sẽ xây dựng một ứng dụng blog web nhỏ bằng Flask và SQLite trong Python 3. Người dùng của ứng dụng có thể xem tất cả các bài viết trong cơ sở dữ liệu của bạn, nhấp vào tiêu đề của một bài viết để xem nội dung của nó, đồng thời có khả năng thêm bài viết mới vào cơ sở dữ liệu và chỉnh sửa hoặc xóa một bài viết hiện có.

Chuẩn bị

Trước khi bắt đầu làm theo hướng dẫn này, bạn sẽ cần:

• Một môi trường lập trình Python 3
• Hiểu biết về các khái niệm Python 3, chẳng hạn như kiểu dữ liệu, câu lệnh điều kiện, vòng lặp for, hàm và các khái niệm tương tự khác.

Bước 1: Cài đặt Flask

Trong bước này, chúng ta sẽ kích hoạt môi trường Python và cài đặt Flask bằng trình cài đặt gói pip.

Nếu bạn chưa kích hoạt môi trường lập trình của mình, hãy đảm bảo bạn đang ở trong thư mục dự án (flask_blog) và sử dụng lệnh sau để kích hoạt môi trường:

source env/bin/activate

Khi môi trường lập trình của bạn được kích hoạt, dấu nhắc của bạn bây giờ sẽ có tiền tố (env) trông như sau:

(env) sammy@localhost:$

Tiền tố này là dấu hiệu cho thấy môi trường env hiện đang hoạt động, nó có thể có tên khác tùy thuộc vào cách bạn đặt tên khi tạo.

Lưu ý: Nếu bạn đang sử dụng Git, việc bỏ qua thư mục env vừa được tạo trong file .gitignore là một ý tưởng hay để tránh theo dõi các tệp không liên quan đến dự án.

Bây giờ bạn sẽ cài đặt các gói Python và cách ly mã nguồn dự án khỏi bản cài đặt Python chính của hệ thống. Bạn sẽ thực hiện điều này bằng cách sử dụng pip và python.

Để cài đặt Flask, hãy chạy lệnh sau:

pip install flask

Sau khi cài đặt hoàn tất, hãy chạy lệnh sau để xác nhận cài đặt:

python -c "import flask; print(flask.__version__)"

Bạn sử dụng giao diện dòng lệnh python với tùy chọn -c để thực thi mã Python. Tiếp theo, bạn nhập gói flask bằng import flask; sau đó in phiên bản Flask, được cung cấp thông qua biến flask.__version__.

Kết quả sẽ là một số phiên bản tương tự như sau:

Output1.1.2

Bạn đã tạo thư mục dự án, một môi trường ảo và cài đặt Flask. Bây giờ bạn đã sẵn sàng chuyển sang thiết lập ứng dụng cơ sở của mình.

Bước 2: Tạo một ứng dụng cơ bản

Khi môi trường lập trình của bạn đã được thiết lập, bạn sẽ bắt đầu sử dụng Flask. Trong bước này, bạn sẽ tạo một ứng dụng web nhỏ trong một tệp Python và chạy nó để khởi động máy chủ, ứng dụng này sẽ hiển thị một số thông tin trên trình duyệt.

Trong thư mục flask_blog , mở một tệp có tên hello.py để chỉnh sửa, sử dụng nano hoặc trình soạn thảo văn bản yêu thích của bạn:

nano hello.py

Tệp hello.py này sẽ đóng vai trò là một ví dụ tối thiểu về cách xử lý các yêu cầu HTTP. Bên trong nó, bạn sẽ nhập đối tượng Flask và tạo một hàm trả về phản hồi HTTP. Viết mã sau vào trong hello.py:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, World!'

Trong khối mã trên, bạn nhập đối tượng Flask từ gói flask. Sau đó, bạn sử dụng nó để tạo một thể hiện ứng dụng Flask của bạn với tên app. Bạn truyền biến đặc biệt __name__ chứa tên của mô-đun Python hiện tại. Nó được dùng để cho instance biết vị trí của nó bạn cần làm điều này vì Flask thiết lập một số đường dẫn ngầm phía sau.

Khi bạn tạo instance app, bạn sử dụng nó để xử lý các yêu cầu web đến và gửi phản hồi cho người dùng. @app.route là một decorator biến một hàm Python thông thường thành một hàm viewcủa Flask, chuyển đổi giá trị trả về của hàm thành một phản hồi HTTP để được hiển thị bởi một máy khách HTTP, chẳng hạn như trình duyệt web. Bạn truyền giá trị '/' cho @app.route() để biểu thị rằng hàm này sẽ phản hồi các yêu cầu web cho URL /, đây là URL chính.

Hàm xem hello() trả về chuỗi 'Hello, World!' làm phản hồi.

Lưu và đóng tệp.

Để chạy ứng dụng web của bạn, trước tiên bạn sẽ cho Flask biết tệp ứng dụng (tệp hello.py trong trường hợp của bạn) bằng biến môi trường FLASK_APP:

export FLASK_APP=hello

Sau đó chạy nó ở chế độ phát triển với biến môi trường FLASK_ENV:

export FLASK_ENV=development

Cuối cùng, chạy ứng dụng bằng lệnh flask run:

flask run

Khi ứng dụng đang chạy, đầu ra sẽ giống như thế này:

Output * Serving Flask app "hello" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on  (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 813-894-335

Đầu ra trên có một số thông tin, chẳng hạn như:

• Tên của ứng dụng bạn đang chạy.
• Môi trường mà ứng dụng đang được chạy.
• Debug mode: on có nghĩa là trình gỡ lỗi của Flask đang chạy. Điều này hữu ích khi phát triển vì nó cung cấp cho chúng ta các thông báo lỗi chi tiết khi có sự cố, giúp việc khắc phục sự cố dễ dàng hơn.
• Ứng dụng đang chạy cục bộ trên URL http://127.0.0.1:5000/, trong đó 127.0.0.1 là IP đại diện cho localhost của máy bạn và :5000 là số cổng.

Mở trình duyệt và nhập URL http://127.0.0.1:5000/, bạn sẽ nhận được chuỗi Hello, World! làm phản hồi, điều này xác nhận rằng ứng dụng của bạn đang chạy thành công.

Cảnh báo: Flask sử dụng một máy chủ web đơn giản để phục vụ ứng dụng của chúng ta trong môi trường phát triển, điều này cũng có nghĩa là trình gỡ lỗi (debugger) Flask đang chạy để dễ dàng phát hiện lỗi hơn. Máy chủ phát triển này không nên được sử dụng trong môi trường sản xuất (production).

Bây giờ bạn có thể để máy chủ phát triển chạy trong terminal và mở một cửa sổ terminal khác. Di chuyển vào thư mục dự án nơi hello.py đang nằm, kích hoạt môi trường ảo, đặt các biến môi trường FLASK_ENV và FLASK_APP, và tiếp tục các bước tiếp theo.

Lưu ý: Khi mở một terminal mới, điều quan trọng là phải nhớ kích hoạt môi trường ảo và đặt các biến môi trường FLASK_ENV và FLASK_APP.

Khi máy chủ phát triển của ứng dụng Flask đã chạy, không thể chạy một ứng dụng Flask khác với cùng lệnh flask run. Điều này là do flask run sử dụng số cổng 5000 theo mặc định và một khi nó bị chiếm, nó sẽ không khả dụng để chạy một ứng dụng khác, vì vậy bạn sẽ nhận được lỗi tương tự như sau:

OutputOSError: [Errno 98] Address already in use

Để giải quyết vấn đề này, hãy dừng máy chủ đang chạy bằng CTRL+C, sau đó chạy flask run lại, hoặc nếu bạn muốn chạy cả hai cùng lúc, bạn có thể truyền một số cổng khác cho đối số -p, ví dụ, để chạy một ứng dụng khác trên cổng 5001, sử dụng lệnh sau:

flask run -p 5001

Bây giờ bạn đã có một ứng dụng web Flask nhỏ. Bạn đã chạy ứng dụng của mình và hiển thị thông tin trên trình duyệt web. Tiếp theo, chúng ta sẽ sử dụng các tệp HTML trong ứng dụng của bạn.

Bước 3: Sử dụng các mẫu HTML

Hiện tại, ứng dụng của chúng ta chỉ hiển thị một thông báo đơn giản mà không có bất kỳ HTML nào. Các ứng dụng web chủ yếu sử dụng HTML để hiển thị thông tin cho khách truy cập, vì vậy bây giờ chúng ta sẽ làm việc để kết hợp các tệp HTML vào ứng dụng của mình, các tệp này có thể được hiển thị trên trình duyệt web.

Flask cung cấp hàm trợ giúp render_template() cho phép sử dụng công cụ tạo template Jinja. Điều này sẽ giúp việc quản lý HTML dễ dàng hơn nhiều bằng cách viết mã HTML của bạn trong các tệp .html cũng như sử dụng logic trong mã HTML của bạn. Bạn sẽ sử dụng các tệp HTML này ( gọi là templates) để xây dựng tất cả các trang ứng dụng của mình, chẳng hạn như trang chính nơi bạn sẽ hiển thị các bài đăng blog hiện tại, trang của bài đăng blog, trang nơi người dùng có thể thêm bài đăng mới, v.v.

Trong bước này, chúng ta sẽ tạo ứng dụng Flask chính của mình trong một tệp mới.

Đầu tiên, trong thư mục flask_blog của bạn, sử dụng nano hoặc trình soạn thảo yêu thích của bạn để tạo và chỉnh sửa tệp app.py của bạn. Tệp này sẽ chứa tất cả mã bạn sẽ sử dụng để tạo ứng dụng blog:

nano app.py

Trong tệp mới này, bạn sẽ import đối tượng Flask để tạo một instance ứng dụng Flask giống như bạn đã làm trước đó. Bạn cũng sẽ import hàm hỗ trợ render_template() giúp bạn render (kết xuất) các tệp mẫu HTML nằm trong thư mục templates mà bạn sắp tạo. Tệp này sẽ có một hàm xử lý view duy nhất, chịu trách nhiệm xử lý các yêu cầu đến tuyến chính /. Hãy thêm nội dung sau:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

Hàm index() trả về kết quả của việc gọi render_template() với index.html làm đối số, điều này cho biết render_template() sẽ tìm kiếm một tệp có tên index.html trong thư mục templates. Cả thư mục và tệp đều chưa tồn tại, bạn sẽ gặp lỗi nếu bạn chạy ứng dụng vào thời điểm này. Bạn sẽ chạy nó dù sao để bạn quen thuộc với ngoại lệ thường gặp này. Sau đó, bạn sẽ khắc phục nó bằng cách tạo thư mục và tệp cần thiết.

Lưu và thoát tệp.

Dừng máy chủ phát triển trong terminal khác đang chạy ứng dụng hello bằng CTRL+C.

Trước khi chạy ứng dụng, hãy đảm bảo bạn chỉ định đúng giá trị cho biến môi trường FLASK_APP, vì bạn không còn sử dụng ứng dụng hello nữa:

export FLASK_APP=app
flask run

Mở URL http://127.0.0.1:5000/ trong trình duyệt của bạn sẽ dẫn đến trang gỡ lỗi thông báo cho bạn rằng mẫu index.html không tìm thấy. Dòng chính trong mã gây ra lỗi này sẽ được đánh dấu. Trong trường hợp này, đó là dòng return render_template('index.html').

Nếu bạn nhấp vào dòng này, trình gỡ lỗi sẽ tiết lộ thêm mã để bạn có thêm ngữ cảnh giúp bạn giải quyết vấn đề.

Để khắc phục lỗi này, hãy tạo một thư mục có tên templates bên trong thư mục flask_blog của bạn. Sau đó bên trong, mở một tệp có tên index.html để chỉnh sửa:

mkdir templates
nano templates/index.html

Tiếp theo, thêm mã HTML sau vào trong index.html:

    
    


   
Welcome to FlaskBlog

Lưu tệp và sử dụng trình duyệt của bạn để điều hướng đến http://127.0.0.1:5000/ một lần nữa, hoặc làm mới trang. Lần này trình duyệt sẽ hiển thị văn bản “Welcome to FlaskBlog” trong một thẻ

.

Ngoài thư mục templates, các ứng dụng web Flask cũng thường có một thư mục static để lưu trữ các tệp tĩnh, chẳng hạn như tệp CSS, tệp JavaScript và hình ảnh mà ứng dụng sử dụng.

Bạn có thể tạo một tệp stylesheet style.css để thêm CSS vào ứng dụng của mình. Trước tiên, hãy tạo một thư mục có tên là static bên trong thư mục chính flask_blog:

mkdir static

Sau đó tạo một thư mục khác có tên css bên trong thư mục static để lưu trữ các tệp .css. Điều này thường được thực hiện để tổ chức các tệp tĩnh trong các thư mục chuyên dụng, ví dụ, các tệp JavaScript thường nằm trong một thư mục có tên js, hình ảnh được đặt trong một thư mục có tên images (hoặc img), v.v. Lệnh sau sẽ tạo thư mục css bên trong thư mục static:

mkdir static/css

Sau đó mở tệp style.css bên trong thư mục css để chỉnh sửa:

nano static/css/style.css

Thêm quy tắc CSS sau vào tệp style.css của bạn:

h1 {
    border: 2px #eee solid;
    color: brown;
    text-align: center;
    padding: 10px;
}

Mã CSS sẽ thêm một đường viền, thay đổi màu sang nâu, căn giữa văn bản và thêm một ít khoảng đệm cho các thẻ

.

Lưu và đóng tệp.

Tiếp theo, mở tệp mẫu index.html để chỉnh sửa:

nano templates/index.html

Bạn sẽ thêm một liên kết đến tệp style.css bên trong phần của tệp mẫu index.html:

. . .

    
    
    

. . .

Ở đây, bạn sử dụng hàm trợ giúp url_for() để tạo vị trí tệp thích hợp. Đối số đầu tiên chỉ định rằng bạn đang liên kết đến một tệp tĩnh và đối số thứ hai là đường dẫn của tệp bên trong thư mục static.

Lưu và đóng tệp.

Sau khi làm mới trang index của ứng dụng, bạn sẽ nhận thấy văn bản “Welcome to FlaskBlog” giờ đây có màu nâu, căn giữa và nằm trong một khung viền.

Bạn có thể sử dụng ngôn ngữ CSS để tạo kiểu cho ứng dụng và làm cho nó hấp dẫn hơn bằng thiết kế của riêng bạn. Tuy nhiên, nếu bạn không phải là nhà thiết kế web, hoặc nếu bạn chưa quen thuộc với CSS, thì bạn có thể sử dụng bộ công cụ Bootstrap, bộ công cụ này cung cấp các thành phần dễ sử dụng để tạo kiểu cho ứng dụng của bạn. Trong dự án này, chúng ta sẽ sử dụng Bootstrap.

Bạn có thể đã đoán rằng việc tạo một mẫu HTML khác sẽ có nghĩa là lặp lại hầu hết mã HTML bạn đã viết trong mẫu index.html. Bạn có thể tránh việc lặp lại mã không cần thiết với sự trợ giúp của một tệp mẫu cơ sở (base template), mà tất cả các tệp HTML của bạn sẽ kế thừa từ đó. Xem “Kế thừa mẫu trong Jinja” để biết thêm thông tin.

Để tạo một mẫu cơ sở, trước tiên hãy tạo một tệp có tên base.html bên trong thư mục templates của bạn:

nano templates/base.html

Gõ mã sau vào mẫu base.html của bạn:

  
    
    
    

    
    

    
  
  
    
    

        {% block content %} {% endblock %}
    

    
    
    
    
    
  

Lưu và đóng tệp khi bạn đã chỉnh sửa xong.

Hầu hết mã trong khối trên là HTML tiêu chuẩn và mã yêu cầu cho Bootstrap. Các thẻ cung cấp thông tin cho trình duyệt web, thẻ liên kết các tệp CSS của Bootstrap và các thẻ