Tự Động Hóa Gửi và Xử Lý Form Trong Flask

Ứng dụng web thường có các trang chứa các biểu mẫu (forms) để người dùng nhập thông tin và gửi đi. Flask là một framework phát triển ứng dụng web mạnh mẽ và linh hoạt, và trong bài viết này, chúng ta sẽ tìm hiểu cách tự động hóa quá trình gửi và xử lý form trong Flask.

Tạo Form HTML

Để bắt đầu, chúng ta cần tạo một form HTML để người dùng có thể nhập thông tin. Dưới đây là một ví dụ về form đơn giản với các trường nhập dữ liệu:

<form method="POST" action="/update_info">
    <div class="form-group">
        <label for="full_name">Full Name</label>
        <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Full Name">
    </div>
    <div class="form-group">
        <label for="address">Address</label>
        <input type="text" class="form-control" id="address" name="address" placeholder="Address">
    </div>
    <div class="form-group">
        <label for="about_info">About Info</label>
        <textarea class="form-control" id="about_info" name="about_info" placeholder="About Info"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Trong ví dụ này, chúng ta sử dụng method="POST" để gửi dữ liệu và action="/update_info" để chỉ định route Flask mà chúng ta sẽ sử dụng để xử lý form.

Ở đây bạn đang xây dựng một biểu mẫu (<form>) để gửi dữ liệu đến máy chủ thông qua phương thức POST khi người dùng nhấn nút “Submit”. Trong trường hợp này, các trường nhập dữ liệu (input fields) như “Full Name”, “Address”, và “About Info” không có thuộc tính value được đặt trước.

Điều này có nghĩa rằng khi người dùng nhập thông tin vào các trường này và sau đó nhấn nút “Submit”, dữ liệu mà họ nhập vào sẽ được gửi đến máy chủ qua các trường có tên tương ứng (“full_name”, “address”, “about_info”) và không có giá trị mặc định được đặt trước.

Dữ liệu mà bạn mong muốn lấy từ người dùng sẽ được trích xuất từ các trường này trên máy chủ sau khi biểu mẫu được gửi đi. Điều này thường được thực hiện bằng cách xử lý yêu cầu POST tại đường dẫn “/update_info” và trích xuất giá trị từ các tham số được gửi đến máy chủ trong yêu cầu POST.

Dưới đây là giải thích về các tham số và thuộc tính trong form HTML:

• <form>: Đây là thẻ mở của form và được sử dụng để bắt đầu định nghĩa một biểu mẫu.
• method="POST": Thuộc tính method xác định phương thức HTTP sẽ được sử dụng để gửi dữ liệu từ biểu mẫu. Trong trường hợp này, chúng ta sử dụng phương thức POST để gửi dữ liệu.
• action="/update_info": Thuộc tính action xác định URL mà dữ liệu biểu mẫu sẽ được gửi đến khi người dùng nhấn nút “Submit”. Trong ví dụ này, dữ liệu sẽ được gửi đến URL “/update_info” để xử lý.
• <div>: Chúng ta sử dụng thẻ <div> để tạo các nhóm hoặc khu vực chứa các trường nhập dữ liệu.
• class="form-group": Thuộc tính class được sử dụng để gắn một lớp CSS vào phần tử HTML, trong trường hợp này là “form-group”. Điều này giúp áp dụng các kiểu dáng hoặc phong cách cụ thể cho nhóm trường dữ liệu.
• <label>: Thẻ <label> được sử dụng để tạo nhãn cho trường nhập dữ liệu, giúp người dùng biết được trường đó đại diện cho thông tin gì.
• for="exampleInputUsername": Thuộc tính for của thẻ <label> được sử dụng để liên kết nhãn với trường nhập dữ liệu thông qua id của trường nhập dữ liệu. Điều này giúp khi người dùng nhấn vào nhãn, trình duyệt sẽ tự động chọn trường nhập dữ liệu tương ứng.
• <input>: Thẻ <input> được sử dụng để tạo trường nhập dữ liệu, chẳng hạn như trường nhập văn bản (<input type="text">). Trường này cho phép người dùng nhập dữ liệu.
• type="text": Thuộc tính type xác định loại trường nhập dữ liệu, trong trường hợp này là “text” để cho phép người dùng nhập văn bản.
• id="exampleInputUsername": Thuộc tính id xác định một định danh duy nhất cho trường nhập dữ liệu. Điều này giúp cho nhãn liên kết đúng trường nhập dữ liệu thông qua thuộc tính for.
• name="full_name": Thuộc tính name xác định tên của trường nhập dữ liệu. Khi biểu mẫu được gửi đi, dữ liệu của trường này sẽ được đóng gói dưới dạng “tên=giá_trị” để xử lý ở phía máy chủ.
• placeholder="Full Name": Thuộc tính placeholder hiển thị một văn bản mô tả tạm thời trong trường nhập dữ liệu, giúp người dùng hiểu rõ nội dung cần nhập.
• <textarea>: Thẻ <textarea> được sử dụng để tạo một trường nhập dữ liệu đa dòng, thường dùng cho việc nhập văn bản dài hơn.
• aria-describedby="userHelp": Thuộc tính aria-describedby được sử dụng để liên kết trường nhập dữ liệu với một phần tử khác trong trang (ở đây là “userHelp”). Điều này có thể được sử dụng để hiển thị thông báo hoặc hướng dẫn đối với trường nhập dữ liệu.

Tạo Route Flask

Sau khi bạn đã tạo form HTML, tiếp theo là tạo một route trong ứng dụng Flask để xử lý dữ liệu khi form được gửi đi. Trong ví dụ này, chúng tôi sử dụng route “/update_info” và chỉ xử lý phương thức POST.

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/update_info', methods=['POST'])
def update_info():
    if request.method == 'POST':
        # Lấy giá trị từ form
        full_name = request.form.get('full_name')
        address = request.form.get('address')
        about_info = request.form.get('about_info')
        # Thực hiện các thao tác cần thiết với thông tin này (lưu vào cơ sở dữ liệu, ...)

        # Trả về trang hiển thị thông tin sau khi cập nhật (có thể chuyển hướng hoặc render template)
        return render_template('profile.html', full_name=full_name, address=address, about_info=about_info)

if __name__ == '__main__':
    app.run(debug=True)

Trong hàm xử lý của bạn (update_info), sau khi bạn đã lấy giá trị từ form bằng cách sử dụng request.form.get(), bạn có thể thực hiện các thao tác cần thiết với dữ liệu này, chẳng hạn như lưu vào cơ sở dữ liệu.

Hiển Thị Thông Tin Sau Khi Cập Nhật.

Cuối cùng, sau khi bạn đã xử lý dữ liệu, bạn có thể trả về một trang hiển thị thông tin sau khi cập nhật. Trong ví dụ này, chúng tôi sử dụng render_template để hiển thị thông tin trong một template có tên là “profile.html”.

<!-- profile.html -->
<!DOCTYPE html>
<html>
<head>
    <!-- Các phần khác của trang web -->
</head>
<body>
    <div>
        <h1>Thông tin của bạn đã được cập nhật</h1>
        <p><strong>Full Name:</strong> {{ full_name }}</p>
        <p><strong>Address:</strong> {{ address }}</p>
        <p><strong>About Info:</strong> {{ about_info }}</p>
    </div>
</body>
</html>

Lưu ý rằng bạn có thể tùy chỉnh trang “profile.html” theo ý muốn của bạn để hiển thị thông tin một cách phù hợp với giao diện của bạn.

Với cách tự động hóa gửi và xử lý form trong Flask, bạn có thể dễ dàng xây dựng các trang web tương tác với người dùng một cách nhanh chóng và tiện lợi.