Welcome To Sherry Forex Group: Flask 4: Web Form!!

Baì hôm nay mình sẽ chia sẻ với các bạn đó là về phần web form, cách tạo và làm việc với web form của flask.

- Nói về web form chắc ko bạn nào là không biết đúng không, vậy mình sẽ ko nói về nó nữa nhé. Vào vấn đề chính luôn :v.
- Để sử dụng web form trên Flask thì mình sẽ sử dụng 1 extension của Flask đó là Flask-WTF, đầu tiên thì phải cài đặt nó đã nhể

Code:

 pip install flask-wtf

- Và Flask-WTF có 1 đặc điểm mà mình rất thích dùng đó là Flask-WTF có thể phòng chống các cuộc tấn công CSRF. Vậy Flask-WTF phòng chống tấn công CSRF như thế nào? Ứng dụng Flask-WTF sẽ cấu hình tạo ra 1 khóa, Flask-WTF sẽ sử dụng khóa này để tạo ra các tokens đã được mã hóa được dùng để xác minh tính xác thực của các dữ liệu từ form. Để cấu hình khóa này thì:

Code:

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'

- app.config ở đây là dùng để lưu trữ các biến cấu hình được sử dụng bởi các framework, extension, hoặc là các ứng dụng. Các biến SECRET_KEY được dùng với mục đích là chìa khóa chung được mã hóa bởi Flask.

- Tiếp theo mình sẽ sử dụng Flask-WTF để tạo ra 1 form để nhập dữ liệu và 1 nút submit. Đầu tiên mình sẽ import extension Flask-WTF và sử dụng wtforms có sẵn trong Flask-WTF để tạo 1 form và nút submit. Mình sẽ sử dụng 1 classes để xây dựng nên form mà mình cần:

Code:

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required
class NameForm(Form):
name = StringField('What is your name?', validators=[Required()])
submit = SubmitField('Submit')

- Nếu các bạn so sánh với các đoạn code của html thì form cũng như vậy cũng không có khác gì đâu đấy. Trong HTML thì các trường <form> còn Flask là class form, StringField ở đây nó tương tự như <input> của html với type='text', còn SubmitField nó cũng đại diện cho <input> với type='submit' của html. Ở đây cũng có 1 biến Required() được dùng để đmả bào rằng dữ liệu nhập vào từ form không được rỗng.

- Ngoài ra Flask-WTF còn có các Field type khác:

StringField ---- Text field
TextAreaField ---- Multiple-line text field
PasswordField ---- Password text field
HiddenField ---- Hidden text field
DateField ---- Text field that accepts a datetime.date value in a given format
DateTimeField ---- Text field that accepts a datetime.datetime value in a given format
IntegerField ---- Text field that accepts an integer value
DecimalField ---- Text field that accepts a decimal.Decimal value
SelectField ---- Drop-down list of choices
SelectMultipleField ---- Drop-down list of choices with multiple selection
FileField ---- File upload field
SubmitField ---- Form submission button
FormField ---- Embed a form as a field in a container form
FieldList ---- List of fields of a given type
Email ---- Validates an email address
Required ---- Validates that the field contains data
URL ---- Validates a URL
Length ---- Validates the length of the string entered
IPAddress ---- Validates an IPv4 network address
..............................

- Để hiển thị web form lên trình duyệt khi truy cập, mình sẽ phải chỉnh sửa ở file html nữa

. Cũng không có gì phức tập lắm ở đây vì wtf cũng đã có hỗ trợ rồi :v. Chỉ cần import file wtf.html và gọi chức năng wtf.quick_form() là bạn đã có 1 form rồi, kết hợp với classes nữa là ok.

Code:

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {% if name %}{{ name }}{% else %}Kevin Kien{% endif %}!</h1>
</div>
{{ wtf.quick_form(form) }}
{% endblock %}

- Ở đây có biến if else, nghĩa là nếu bạn nhập 1 tên bất kì thì nó sẽ hiện tên đấy và ngược lại khi bạn không nhập hay chưa nhập gì thì nó sẽ hiện nên "Hello, Kevin Kien".
- Vậy phần hiển thị và tạo form, chức năng của form đã xong. Để mà server có thể nhận được dữ liệu được gửi lên thì mình sẽ phải chỉnh sửa 1 chút ở phần @app.route("/")

Code:

@app.route('/', methods=['GET', 'POST'])
def index():
     name = None
     form = NameForm()
     if form.validate_on_submit():
          name = form.name.data
          form.name.data = ''
     return render_template('index.html', form=form, name=name)

- Phần methods sẽ là các method mà client sẽ gửi lên và nhận được bằng phương thức nào. Ví dụ như ở đây thì client sẽ nhập dữ liệu vào form và gửi lên bằng method là POST sau đó server sẽ nhận dữ liệu và trả về client bằng phương thức là GET. Còn phương thưc validate_on_submit() trả về TRUE khi nhận được dữ liệu từ form và cũng có nhiều trương hợp sẽ trả về FLASE.
- Và cuối cùng là thành quả