Flask 4: Xây dựng web app với Blueprints và Views của Python Flask

Trời Hà Nội đầu hè mà âm u quá. Chắc chỉ có viết vài đoạn code cho vui =))))

Ok! Vậy là ở bài trước chúng ta đã thiết lập xong cơ sở dữ liệu. Trong bài này chúng ta học cách truy vấn, lấy dữ liệu và đẩy lên giao diện. Thế là trọng vẹn 1 app cơ bản!

“Blueprints” là thuật ngữ Flask dùng để mô tả cách tổ chức code và views. Bạn có thể đặt code liên quan đến thuật toán tại đây, truy vấn dữ liệu, xử lỹ dữ liệu và đẩy nó sang các file view template để trình duyệt hiển thị cho người dùng.

Blueprint cho việc quản lý danh sách khách hàng

Tạo file blueprint mang tên customer.py trong thư mục “mycustomer” của dự án. Trên cùng của file blueprint cho module customer đó, chúng ta thiết nhập đoạn code sau:

import functools

# import các mod cần thiết cho 1 blueprint cơ bản:
from flask import (
    Blueprint, flash, g, redirect, render_template, request, session, url_for
)

# import hàm get_db từ module db mà chúng ta đã viết ở bài trước. Hàm này phục vụ cho việc truy vấn CSDL.
from mycustomer.db import get_db

# tạo blueprint cho module customer
bp = Blueprint('customer', __name__, url_prefix='/customer')

Câu lệnh tạo blueprint ở đoạn code trên cho Flassk biết blueprint này mang tên “customer” và các view của nó sẽ được truy cập qua URL bắt đầu bới ‘/customer‘ (được khai báo là url_prefix của blueprint này). Ví dụ như http://localhost:5000/customer/create mà chúng ta sẽ làm ở phần tiếp theo.

Trước khi chúng ta tiếp tục code cho các chức năng tạo khách hàng, xem thông tin khách hàng hay liệt kê danh sách khách hàng, chúng ta import blueprint customer trong __init__.py để app biết rằng nó có thể sử dụng blueprint này.

Thêm đoạn code sau trong hàm create_app của __init__.py:

def create_app():
    app = ...
    # các code hiện tại ...

    # Thêm 2 dòng code dưới đây:
    from . import customer
    app.register_blueprint(customer.bp)

    return app

Xây dựng blue print cho customer

Mở file mycustomer/customer.py và tiếp tục nhập các đoạn code sau cho việc xử lý tạo customer mới (“create”) và liệt kê các customer có trong cơ sở dữ liệu (“index”).

Chú ý, đoạn code này sẽ chưa chạy được ngay. Phải cho tới khi chúng ta tạo form html cho chức năng này để submit data lên blueprint thì đoạn code này mới thực hiện được. Chúng ta sẽ code html form dùng template của flask ở mục kế tiếp.

...
# trước hết khai báo route để truy nhập chức năng này là "customer/create". Nhưng vì chúng ta đã khai báo prefix cho blueprint customer là "/customer" trong __init__.py, nên tại đây chỉ cần dùng "/create".
# method cho phép user submit để gọi route là cả GET và POST. Thực tế trong ví dụ đơn giản này, dùng POST thôi cũng là đủ 
@bp.route('/create', methods=('GET', 'POST'))
def create():
    # nếu form đã submit qua POST, kiểm tra các trường bắt buộc và insert vào cơ sở dữ liệu nếu hợp lệ.
    if request.method == 'POST':
        customer_name = request.form['name']
        customer_email = request.form['email']
        error = None

        if not customer_name:
            error = 'Customer Name is required.'

        if error is not None:
            flash(error)
        else:
            db = get_db()
            cur = db.execute(
                'INSERT INTO customer (name, email)'
                ' VALUES (?, ?)',
                (customer_name, customer_email)
            )
            db.commit()

            # Đưa người sử dụng vào trang xem record sau khi đã insert thành công vào cơ sử dữ liệu.
            # Chú ý cách sử dụng lastrowid để lấy được primary key của dữ liệu vừa tạo.
            return redirect(url_for('customer.view', id=cur.lastrowid))

    return render_template('customer/create.html')

Hiện tại chúng ta mới code cho chức năng tạo mới khách hàng. Sau khi tạo thành công, user sẽ được chuyển tới trang view bản dữ liệu vừa tạo. Trước khi làm chức năng này, chúng ta hãy hoàn thiện giao diện html cho form tạo khách hàng.

Hàm url_for cũng là tiện ích để đưa người sử dụng tới route “/view” (hàm “view()”) mà chúng ta sẽ tạo trong blueprint ở mục tiếp tới.

Dùng flask template để xây dựng giao diện tạo khách hàng mới

Chúng ta sẽ sử dụng flask bootstrap (bootstrap 3) cho giao diện của sản phẩm.

Cài đặt flassk bootstrap bằng dòng lệnh sau trên terminal:

pip install Flask-Bootstrap

Nhớ bật virtual environment để chạy lệnh trên. Nếu không nhớ cách bật, bạn hãy xem lại hướng dẫn tại đây.

Khai báo để app biết chúng ta sẽ dùng bootstrap cho các template: mở file __init__.py và thêm 2 dòng sau:

...
# import bootstrap:
from flask_bootstrap import Bootstrap

def create_app(test_config=None):
    app = Flask(....)
    # khai báo Bootstrap:
    Bootstrap(app)
    ...

Tạo thư mục “templates” trong “mycustomer” folder, và tạo file base.html trong templates. Sử dụng đoạn code sau trong base.html:

{% extends "bootstrap/base.html" %}

{% block body_attribs %} class="container" {% endblock %}

{% block navbar %}
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">My Customer</a>
        </div>
    </div>
</div>
{% endblock %}

Đoạn code trên về cơ bản khai báo rằng base.html của chúng ta dùng bootstrap, và vì thế chúng ta có thể sử dụng các CSS của bootstrap. Tham khảo các CSS đó tại website Bootstrap 3.

Bạn cũng có thể thấy chúng ta cần dùng các tag {% … %} để flask nhận biết được các giao diện cần hiển thị sử dụng bootstrap. Các tag này được mô tả kỹ hơn ở trang web flask-bootstrap.

Trong thư mục “templates”, tạo thư mục con “customer”, là nơi chúng ta sẽ tạo các giao diện create, view, index cho các chức năng liên quan đến dữ liệu khách hàng. Tạo file create.html trong folder “templates/customer” với nội dung sau:

{% extends 'base.html' %}

{% block content %}
  <h1>New customer</h1>
  <form method="post">
    <div class="form-group">
      <label for="name">Name</label>
      <input name="name" id="name" value="{{ request.form['name'] }}" class="form-control" required>
      <label for="email">Email</label>
      <input name="email" id="email" value="{{ request.form['email'] }}" class="form-control" required>
    </div>
    <input type="submit" value="Save" class="btn btn-default">
  </form>
{% endblock %}

Bạn nhớ đặt code html của mình trong tag content, để flask nhận biết và in thông tin form ra màn hình.

Mở terminal, chạy lệnh dưới đây để chạy app của bạn:

$ export FLASK_APP=mycustomer
$ export FLASK_ENV=development
$ flask run --host=0.0.0.0 --port=8085

Mở trình duyệt vào vào trang http://127.0.0.1:8085/customer/create và bạn sẽ thấy giao diện của form đã xuất hiện.

Bạn hãy Nhập thông tin và submit. Bạn sẽ thấy hệ thống báo lỗi không tìm thấy route customer.view. Vì trong code tạo khách hàng, khi tạo thành công, chúng ta sẽ đưa người sử dụng đến route này. Tuy nhiên chúng ta chưa tạo route và giao diện cho view customer. Bài tiếp theo sẽ giúp bạn hoàn thiện phần này.

Bài tiếp theo: Flask web app – tạo giao diện để xem dữ liệu khách hàng