چگونه از فرم‌های وب در Flask-WTF استفاده و آن‌ها را اعتبارسنجی کنیم؟

فرم‌های وب، مانند فیلدهای متنی و متن‌های چندخطی، به کاربران اجازه می‌دهند داده‌هایی را به برنامه شما ارسال کنند، چه این داده‌ها از طریق منوی کشویی یا دکمه‌های رادیویی باشند که برنامه برای انجام عملی از آن‌ها استفاده می‌کند، یا متن‌های طولانی که برای پردازش یا نمایش وارد شده‌اند. برای مثال، در یک برنامه شبکه اجتماعی، ممکن است به کاربران کادری بدهید که بتوانند محتوای جدید به صفحات خود اضافه کنند.

Flask یک فریمورک سبک‌وزن پایتون است که ابزارها و ویژگی‌های مفیدی برای ساخت برنامه‌های وب در زبان پایتون فراهم می‌کند. برای رندر و اعتبارسنجی فرم‌های وب به روشی ایمن و منعطف در Flask، شما از Flask-WTF استفاده خواهید کرد که یک افزونه Flask است و به شما کمک می‌کند تا از کتابخانه WTForms در برنامه Flask خود استفاده کنید.

WTForms یک کتابخانه پایتون است که رندر منعطف فرم‌های وب را فراهم می‌کند. می‌توانید از آن برای رندر فیلدهای متنی، نواحی متنی، فیلدهای پسورد، دکمه‌های رادیویی و غیره استفاده کنید. همچنین WTForms اعتبارسنجی داده‌های قدرتمندی را با استفاده از مختلف اعتبارسنج‌ها فراهم می‌کند که اطمینان می‌دهد داده‌هایی که کاربران ارسال می‌کنند، معیارهای معینی که شما تعریف کرده‌اید را دارند. مثلا اگر فیلدی الزامی باشد، می‌توانید اطمینان حاصل کنید که داده ارسال شده وجود دارد یا حداقل طول مشخصی دارد.

WTForms همچنین از یک توکن CSRF برای محافظت در برابر حملات CSRF استفاده می‌کند که این حملات اجازه می‌دهند مهاجم عملی ناخواسته را در برنامه وب که کاربر وارد شده است انجام دهد. حمله موفق CSRF می‌تواند کاربر را مجبور به اجرای درخواست‌های تغییر وضعیت مانند انتقال وجه به حساب مهاجم یا تغییر ایمیل کاربر کند. اگر قربانی حساب مدیریتی باشد، CSRF می‌تواند کل برنامه وب را در معرض خطر قرار دهد.

در این آموزش، شما یک برنامه کوچک وب خواهید ساخت که نشان می‌دهد چگونه فرم‌های وب را با استفاده از Flask-WTF رندر و اعتبارسنجی کنید. برنامه یک صفحه برای نمایش دوره‌ها که در لیستی از پایتون ذخیره شده‌اند خواهد داشت و صفحه اصلی فرم ورود عنوان دوره، توضیحات، قیمت، موجود بودن و سطح (مبتدی، متوسط، یا پیشرفته) را فراهم می‌کند.

شما به یک محیط برنامه‌نویسی محلی پایتون 3 نیاز دارید. دستورالعمل نصب و تنظیم محیط برنامه‌نویسی محلی برای پایتون 3 را دنبال کنید. در این آموزش پوشه پروژه flask_app نامیده می‌شود.

نیاز است با مفاهیم پایه Flask مانند روت‌ها، توابع دید و قالب‌ها آشنا باشید. در صورت نیاز می‌توانید به آموزش ساخت اولین برنامه وب با Flask و پایتون و آشنایی با قالب‌ها در Flask مراجعه کنید.

یک درک پایه از HTML نیز مورد نیاز است. می‌توانید آموزش ساخت وب‌سایت با HTML را بررسی کنید.

(اختیاری) آشنایی با نحوه استفاده از فرم‌های وب در Flask نیز مفید است. می‌توانید آموزش استفاده از فرم‌های وب در Flask را مطالعه کنید.

نصب Flask و Flask-WTF

در این مرحله، Flask و Flask-WTF را که شامل WTForms نیز هست، نصب خواهید کرد.

بعد از فعال‌سازی محیط مجازی، با استفاده از pip نصب را انجام دهید:

pip install Flask Flask-WTF

پس از نصب موفق، خطی مشابه خط زیر را در انتهای خروجی خواهید دید:

همانطور که مشاهده می‌کنید، کتابخانه WTForms به عنوان وابستگی بسته Flask-WTF نصب شده است. بقیه بسته‌ها مربوط به وابستگی‌های Flask هستند.

تنظیم فرم وب

در این مرحله، فرم وب را با استفاده از فیلدها و اعتبارسنج‌هایی که از کتابخانه WTForms وارد می‌کنید، تنظیم می‌کنید.

ابتدا فایلی به نام forms.py در پوشه flask_app باز کنید. این فایل فرم‌هایی که برنامه شما نیاز دارد را شامل می‌شود.

در این فایل کلاسی که نمایانگر فرم وب شما است را ایجاد خواهید کرد. کد زیر را برای وارد کردن موارد مورد نیاز در ابتدای فایل اضافه کنید:

from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, IntegerField, RadioField, BooleanField
from wtforms.validators import InputRequired, Length

برای ساخت فرم وب، شما یک زیرکلاس از کلاس پایه FlaskForm می‌سازید که از بسته flask_wtf وارد کرده‌اید. همچنین باید فیلدهایی را که استفاده می‌کنید از بسته wtforms وارد کنید.

فیلدهای زیر را وارد می‌کنید:

• StringField – فیلد متنی یک خطی برای عنوان
• TextAreaField – ناحیه متنی چندخطی برای توضیحات
• IntegerField – فیلد عدد صحیح برای قیمت
• RadioField – دکمه رادیویی برای انتخاب سطح دوره
• BooleanField – چک‌باکس برای موجود بودن دوره

از اعتبارسنج‌هایی مانند InputRequired برای اطمینان از وارد شدن داده و Length برای محدود کردن طول ورودی استفاده می‌کنید.

سپس کلاس فرم خود را به شکل زیر تعریف کنید:

class CourseForm(FlaskForm):
    title = StringField('Title', validators=[InputRequired(), Length(min=10, max=50)])
    description = TextAreaField('Description', validators=[InputRequired(), Length(max=200)])
    price = IntegerField('Price', validators=[InputRequired()])
    level = RadioField('Level', choices=[('beginner', 'Beginner'), ('intermediate', 'Intermediate'), ('advanced', 'Advanced')], validators=[InputRequired()])
    available = BooleanField('Available', default=True)

این کلاس از FlaskForm ارث می‌برد و متغیرهای کلاسی آن هر کدام نمایانگر یک فیلد فرم با برچسب و لیستی از اعتبارسنج‌ها است. مثلا فیلد title دارای یک نام ‘Title’ و دو اعتبارسنج است که ورودی را اجباری و طول آن را حداقل 10 و حداکثر 50 کاراکتر تنظیم می‌کند.

پس فایل را ذخیره و ببندید.

ساخت برنامه Flask و نمایش فرم

حالا یک برنامه Flask بسازید که فرم را در صفحه اصلی رندر کند و فهرستی از دوره‌ها را در صفحه‌ای جداگانه نشان دهد.

فایلی به نام app.py در پوشه flask_app باز کنید و کد زیر را اضافه کنید:

from flask import Flask, render_template, redirect, url_for
from forms import CourseForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'a_very_long_random_secret_key'

courses_list = [
    {
        'title': 'Python 101',
        'description': 'An introductory course on Python.',
        'price': 50,
        'level': 'beginner',
        'available': True
    }
]

@app.route('/', methods=['GET', 'POST'])
def index():
    form = CourseForm()
    return render_template('index.html', form=form)

@app.route('/courses')
def courses():
    return render_template('courses.html', courses=courses_list)

در این کد:

• برنامه Flask را نمونه‌سازی می‌کنید و یک کلید مخفی برای CSRF تنظیم می‌کنید.
• لیستی به نام courses_list ایجاد می‌کنید که شامل دیکشنری‌های مربوط به دوره‌ها است.
• روتی برای صفحه اصلی با متدهای GET و POST می‌سازید که فرم را نمایش می‌دهد.
• روتی برای صفحه دوره‌ها می‌سازید که دوره‌های لیست شده را نمایش می‌دهد.

ایجاد قالب‌های HTML

پوشه‌ای به نام templates بسازید و فایل base.html را با محتوای زیر بسازید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><block name="title">ParminCloud Courses</block></title>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">Home</a> |
        <a href="{{ url_for('courses') }}">Courses</a>
    </nav>
    <hr>
    <block name="content"></block>
</body>
</html>

فایل index.html را با محتویات زیر بسازید:

{% raw %}
{% extends "base.html" %}
{% block title %}Add Course{% endblock %}

{% block content %}
    <h1>Add a New Course</h1>
    <form method="POST" action="/">
        {{ form.csrf_token }}
        <p>
            {{ form.title.label }}<br>
            {{ form.title(size=20) }}<br>
            {% for error in form.title.errors %}
                <span style="color: red;">{{ error }}</span>
            {% endfor %}
        </p>
        <p>
            {{ form.description.label }}<br>
            {{ form.description(rows=5, cols=30) }}<br>
            {% for error in form.description.errors %}
                <span style="color: red;">{{ error }}</span>
            {% endfor %}
        </p>
        <p>
            {{ form.price.label }}<br>
            {{ form.price() }}<br>
            {% for error in form.price.errors %}
                <span style="color: red;">{{ error }}</span>
            {% endfor %}
        </p>
        <p>
            {{ form.level.label }}<br>
            {{ form.level() }}<br>
            {% for error in form.level.errors %}
                <span style="color: red;">{{ error }}</span>
            {% endfor %}
        </p>
        <p>
            {{ form.available() }} {{ form.available.label }}
        </p>
        <button type="submit">Add Course</button>
    </form>
{% endblock %}
{% endraw %}

در فایل courses.html موارد زیر را اضافه کنید:

{% raw %}
{% extends "base.html" %}
{% block title %}Courses List{% endblock %}

{% block content %}
    <h1>Available Courses</h1>
    {% for course in courses %}
        <div>
            <h2>{{ course.title }}</h2>
            <h4>{{ course.description }}</h4>
            <p>Price: ${{ course.price }} | Level: {{ course.level }} | 
            {% if course.available %}
                Available
            {% else %}
                Not Available
            {% endif %}
            </p>
        </div>
        <hr>
    {% endfor %}
{% endblock %}
{% endraw %}

اجرای برنامه Flask

در ترمینال، متغیر محیطی FLASK_APP را تنظیم کنید تا به برنامه شما اشاره کند و محیط را در حالت توسعه قرار دهید:

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

در ویندوز به جای export از set استفاده کنید.

اکنون مرورگر را بازکرده و به آدرس http://127.0.0.1:5000/ بروید. فرم افزون دوره جدید را خواهید دید.

پردازش اطلاعات فرم

برای دریافت و اعتبارسنجی داده‌های فرم و افزودن دوره جدید به لیست، باید تابع index() را به صورت زیر ویرایش کنید:

from flask import request

@app.route('/', methods=['GET', 'POST'])
def index():
    form = CourseForm()
    if form.validate_on_submit():
        course = {
            'title': form.title.data,
            'description': form.description.data,
            'price': form.price.data,
            'level': form.level.data,
            'available': form.available.data
        }
        courses_list.append(course)
        return redirect(url_for('courses'))
    return render_template('index.html', form=form)

تابع validate_on_submit() بررسی می‌کند که درخواست از نوع POST باشد و اعتبارسنجی‌ها را اجرا می‌کند. اگر داده‌ها معتبر باشند، دوره جدید به لیست اضافه شده و کاربر به صفحه دوره‌ها هدایت می‌شود.

اکنون می‌توانید فرم را با داده‌های معتبر پر کنید و دوره جدید را در صفحه Courses مشاهده کنید.

این برنامه نمونه‌ای از یک وب اپلیکیشن Flask است که فرم‌های وب ساخته شده با Flask-WTF و WTForms را نمایش می‌دهد، داده دریافتی را اعتبارسنجی می‌کند و در یک ساختار داده محلی ذخیره می‌کند.