Flask 5: tạo giao diện để xem dữ liệu khách hàng

Đây là Bài 5 trong chuối các bài hướng dẫn sử dụng Python Flask cơ bản. Quay về Bài 4: Xây dựng web app với Blueprints và Views của Python Flask

Ở bài trước, chúng ta đã học cách dùng flask blueprint và template để tạo 1 record mới cho khách hàng. Trong bài này, chúng ta sẽ hoàn thiện nốt blueprint và giao diện cho trang xem dữ liệu của khách hàng vừa tạo.

Bạn hãy mở file mycustomer/customer.py và thêm hàng blueprint sau cho route ‘/view’:

@bp.route('/<int:id>', methods=('GET',))
def view(id):
    customer = get_db().execute(
        'SELECT * FROM customer'
        ' WHERE id = ?',
        (id,)
    ).fetchone()

    if customer is None:
        abort(404, f"customer id {id} doesn't exist.")

    return render_template('customer/view.html', customer=customer)

• Với route này, user chỉ cần vào đường dẫn của app với đuôi “/<id của customer>” là có thể xem được trang thông tin
• Nếu không có record nào trong bảng customer với id đó, hệ thống sẽ báo lỗi “customer id … không tồn tại”
• Khi tìm được record với id như yêu cầu, app sẽ chạy sang template ‘customer/view.html’ và hiển thị thông tin ra màn hình. Dữ liệu tìm thấy trong cơ sở dữ liệu được ghi lại vào biến customer và truyền vào template với biến cùng tên.

Bạn có thể dùng format sau trong file ‘templates/customer/view.html” cho việc hiển thị:

{% extends 'base.html' %}

{% block content %}
  <h1>{{ customer['name'] }}</h1>
  <hr/>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Email</h3>
    </div>
    <div class="panel-body">{{ customer['email']}}</div>
  </div>
{% endblock %}

Bạn có thể thấy, trong template view.html, chúng ta lấy thông tin được lưu giữ trong biến customer ở dạng array.

Để chạy thử chức năng này, chúng ta hãy dùng trình duyệt vào trang “/customer/create” như bài trước để tạo 1 khách hàng mới. Sau khi submit, bạn sẽ thấy màn hình view tương tự như hình chụp dưới đây:

Để dễ dàng sử dụng chức năng tạo mới hơn, chúng ta hãy đặt đường link đến trang /customer/create trên menu của sản phẩm.

Mở file templates/base.html và thêm đoạn code sau:

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

        <!-- THÊM MỚI BLOCK DIV NÀY !-->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <!-- ĐƯỜNG LINK TỚI TRANG CREATE -->
                <li><a href="{{ url_for('customer.create') }}">New Customer</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

Tạo trang hiển thị danh sách khách hàng

Cuối cùng, chúng ta sẽ làm blueprint và giao diện cho trang hiển thị danh sách các khách hàng có trong hệ thống. Bạn mở blueprint hiện tại mycustomer/customer.py và thêm cho route index của customer (“/”):

# route index, duoc truy cap qua path "customer/"
@bp.route('/', methods=('GET', 'POST'))
def index():
    customer_list = get_db().execute(
        'SELECT * FROM customer'
    ).fetchall()

    return render_template('customer/index.html', customer_list=customer_list)

Như bạn thấy, route này sẽ truyền data từ cơ sở dữ liệu về template customer/index.html. Bạn hãy tạo file này và thêm nội dung sau:

{% extends 'base.html' %}

{% block content %}
<table class="table table-striped">
    <tr>
        <th>Customer Name</th>
        <th>Email</th>
    </tr>
    {% for customer in customer_list %}
    <tr>
        <td><a href="{{ url_for('customer.view', id=customer['id']) }}">{{ customer['name'] }}</a></td>
        <td>{{ customer['email'] }}</td>
    </tr>
    {% endfor %}
</table>
{% endblock %}

• Tên của customer được đặt trong thể <a>, cho phép user click để sang view customer. Chú ý cách sử dụng hàm url_for với biến đầu tiên là tên route ở dạng format <tên blueprint>.<route path>, và biến thứ hai là param cho path. Ở đây param là id của customer đó.
• Mở trình duyệt vào và vào url http://127.0.0.1:8085/customer/ bạn sẽ thấy tên các khách hàng đã nhập vào hệ thống:

Để hoàn thiện phần chức năng cho customer, chúng ta hãy cùng thêm menu List trên top bar để dễ dàng vào trang liệt kê danh sách các khách hàng này.

Bạn hãy mở file templates/base.html và thêm đoạn code sau, dưới đoạn code của menu “New Customer” đã có từ trước:

            <ul class="nav navbar-nav">
                <li><a href="{{ url_for('customer.create') }}">New Customer</a></li>
                <!-- Thêm mới dòng dưới đây -->
                <li><a href="{{ url_for('customer.index') }}">List Customer</a></li>
            </ul>

Refresh lại trình duyệt để thấy mục List Customer trong menu của app.

Bài tiếp theo: Python Flask: Tạo hóa đơn cho khách hàng