استخدام نماذج الويب والتحقق منها في فلاسـك باستخدام الإضافة Flask-WTF

مقدمة

يُعد إطار العمل Flask أحد أشهر أطر العمل خفيفة الوزن في تطوير تطبيقات الويب بلغة بايثون، حيث يوفر بنية مرنة وقابلة للتوسع لإنشاء تطبيقات بسيطة أو معقدة على حد سواء. من الجوانب الأساسية في تطوير تطبيقات الويب هو التعامل مع نماذج الإدخال (Forms)، التي تُستخدم لجمع البيانات من المستخدمين، سواء كانت بيانات تسجيل دخول، أو استمارات تسجيل، أو حتى عمليات إدخال معقدة.

ومع أن Flask بحد ذاته يوفر بعض الوسائل البسيطة للتعامل مع الطلبات الواردة من النماذج، إلا أنه يفتقر إلى أدوات قوية للتحقق من صحة البيانات وإدارة النماذج بطريقة منهجية ومنظمة. وهنا تظهر أهمية استخدام الإضافة Flask-WTF، وهي امتداد لـ Flask مبني على مكتبة WTForms القوية، والتي تسهل عملية إنشاء نماذج HTML والتحقق من البيانات بشكل آمن ومبسّط.

يهدف هذا المقال إلى تقديم شرح مفصل وموسع لاستخدام Flask-WTF في بناء نماذج ويب فعّالة، والتحقق من صحة البيانات المُدخلة، وضمان التفاعل الآمن بين المستخدم والتطبيق.

ما هي مكتبة WTForms؟

WTForms هي مكتبة قوية ومكتوبة بلغة بايثون لتسهيل إنشاء وإدارة نماذج HTML. توفر هذه المكتبة إمكانية تعريف الحقول، وربطها بمحددات التحقق (Validators)، بالإضافة إلى تخصيص طريقة العرض والتفاعل مع البيانات.

من خلال Flask-WTF، يمكن دمج هذه المكتبة بسهولة ضمن تطبيقات Flask بطريقة أكثر سلاسة، حيث تعالج Flask-WTF الجوانب المتعلقة بجلسات CSRF، وإعادة عرض البيانات في حال فشل التحقق، وإدارة الكائنات داخل النماذج بطريقة أكثر تكاملاً.

أهمية Flask-WTF في تطوير النماذج

تتلخص أهمية استخدام Flask-WTF في النقاط التالية:

• تسهيل إنشاء النماذج: باستخدام فئات Python بدلًا من كتابة كود HTML يدوي.

• إدارة عمليات التحقق من البيانات: كالتأكد من أن الحقل ليس فارغًا، أو أن البريد الإلكتروني صحيح الصيغة، أو أن كلمة المرور تطابق قواعد معينة.

• حماية من هجمات CSRF: أي حماية التطبيق من الهجمات الشائعة التي تستغل النماذج في إرسال بيانات ضارة.

• سهولة التكامل مع قوالب Jinja2: لعرض النماذج ضمن واجهات المستخدم بشكل ديناميكي ومرن.

تثبيت Flask-WTF

للبدء باستخدام Flask-WTF، يجب أولًا تثبيت المكتبة عبر الأمر التالي:

bash
CopyEdit
pip install flask-wtf

أو ضمن ملف requirements.txt:

shell
CopyEdit
flask-wtf>=1.0

إعداد التطبيق لاستخدام Flask-WTF

قبل البدء في تعريف النماذج، يجب إعداد التطبيق ليكون جاهزًا لاستقبال النماذج ومعالجة التحقق منها. يشمل ذلك إعداد المفتاح السري اللازم لحماية CSRF:

python
CopyEdit
from flask import Flask
from flask_wtf import CSRFProtect

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key_for_csrf_protection'
csrf = CSRFProtect(app)

تعريف نموذج باستخدام Flask-WTF

يتم تعريف النماذج في Flask-WTF على شكل فئات (Classes) ترث من FlaskForm، وتحتوي على حقول متعددة مرتبطة بعمليات تحقق مخصصة.

مثال على نموذج تسجيل:

python
CopyEdit
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, EqualTo, Length

class RegistrationForm(FlaskForm):
    username = StringField('اسم المستخدم', validators=[DataRequired(), Length(min=4, max=25)])
    email = StringField('البريد الإلكتروني', validators=[DataRequired(), Email()])
    password = PasswordField('كلمة المرور', validators=[DataRequired(), Length(min=6)])
    confirm_password = PasswordField('تأكيد كلمة المرور', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('تسجيل')

في هذا النموذج:

• DataRequired يتحقق من أن الحقل غير فارغ.

• Email يتحقق من صحة البريد الإلكتروني.

• EqualTo يتحقق من تطابق كلمة المرور مع التأكيد.

استخدام النموذج في المسارات (Routes)

بعد تعريف النموذج، يتم استخدامه داخل المسار المناسب في Flask لعرض النموذج ومعالجة البيانات المُدخلة:

python
CopyEdit
from flask import render_template, redirect, url_for, flash

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        # معالجة البيانات بعد التحقق
        username = form.username.data
        email = form.email.data
        password = form.password.data
        # تخزين البيانات في قاعدة البيانات أو تنفيذ منطق معين
        flash('تم التسجيل بنجاح!', 'success')
        return redirect(url_for('home'))
    return render_template('register.html', form=form)

دمج النموذج مع قوالب Jinja2

في ملف HTML الخاص بعرض النموذج (مثل register.html)، يمكن استخدام قوالب Jinja2 لعرض النموذج:

html
CopyEdit
<form method="POST" action="">
    {{ form.hidden_tag() }}
    <div>
        {{ form.username.label }}<br>
        {{ form.username(size=32) }}<br>
        {% for error in form.username.errors %}
            <span style="color: red;">{{ error }}span>
        {% endfor %}
    div>
    <div>
        {{ form.email.label }}<br>
        {{ form.email(size=32) }}<br>
        {% for error in form.email.errors %}
            <span style="color: red;">{{ error }}span>
        {% endfor %}
    div>
    <div>
        {{ form.password.label }}<br>
        {{ form.password(size=32) }}
    div>
    <div>
        {{ form.confirm_password.label }}<br>
        {{ form.confirm_password(size=32) }}
    div>
    <div>
        {{ form.submit() }}
    div>
form>

التحقق من صحة البيانات باستخدام Validators

تمتلك WTForms مجموعة متنوعة من محددات التحقق التي يمكن استخدامها بسهولة، كما هو موضح في الجدول التالي:

الحماية من هجمات CSRF

تُعد حماية النماذج من هجمات CSRF (Cross-Site Request Forgery) من الأمور الأساسية في أمن تطبيقات الويب. وتقوم Flask-WTF تلقائيًا بتضمين حقل مخفي csrf_token في كل نموذج، وتتحقق منه عند إرسال النموذج.

لضمان عمل هذه الخاصية:

• يجب تحديد SECRET_KEY في إعدادات التطبيق.

• يجب تضمين {{ form.hidden_tag() }} داخل النموذج في HTML.

تحميل الملفات باستخدام Flask-WTF

يمكن استخدام Flask-WTF لتحميل الملفات بسهولة عبر FileField:

python
CopyEdit
from wtforms import FileField
from flask_wtf.file import FileAllowed, FileRequired

class UploadForm(FlaskForm):
    file = FileField('تحميل ملف', validators=[
        FileRequired(),
        FileAllowed(['jpg', 'png'], 'فقط الصور مسموح بها!')
    ])
    submit = SubmitField('رفع')

التعامل مع الأخطاء وإعادة عرض البيانات

عند فشل التحقق من النموذج، يتم إعادة عرض النموذج تلقائيًا مع الأخطاء المرتبطة بكل حقل. هذا يُسهل على المستخدم تعديل البيانات الخاطئة دون الحاجة لإعادة تعبئة كافة الحقول.

يمكن استعراض الأخطاء باستخدام:

html
CopyEdit
{% for error in form.field_name.errors %}
    <span class="error">{{ error }}span>
{% endfor %}

استخدام Flask-WTF مع قواعد البيانات

يمكن استخدام Flask-WTF بسهولة في نماذج مرتبطة بقاعدة البيانات، مثل SQLAlchemy. يمكن تمرير الكائنات بين النموذج والقاعدة باستخدام البيانات التي جُمعت بعد تحقق النموذج.

مثال:

python
CopyEdit
@app.route('/add_user', methods=['GET', 'POST'])
def add_user():
    form = RegistrationForm()
    if form.validate_on_submit():
        new_user = User(username=form.username.data, email=form.email.data)
        db.session.add(new_user)
        db.session.commit()
        return redirect(url_for('dashboard'))
    return render_template('add_user.html', form=form)

تخصيص التنسيقات والاستايلات

لتحسين عرض النماذج، يمكن دمج Flask-WTF مع مكتبات CSS مثل Bootstrap، وذلك لتنسيق الحقول وعرض الأخطاء بشكل أكثر جاذبية. كما يمكن استخدام الحقول داخل قوالب Jinja2 بطريقة مرنة تسمح بتطبيق CSS classes أو ID لكل عنصر.

مثال:

html
CopyEdit
{{ form.username(class="form-control", placeholder="أدخل اسم المستخدم") }}

الخاتمة

Flask-WTF يوفر حلاً متكاملاً ومرنًا للتعامل مع نماذج الويب في إطار Flask. من خلال أدوات التحقق القوية، ودعمه للحماية من هجمات CSRF، وقدرته على التكامل مع قوالب العرض وقواعد البيانات، يصبح تطوير نماذج آمنة ومنظمة أكثر بساطة واحترافية. هذه الإضافة تمثل جسرًا بين تجربة المستخدم المتقدمة وأمن البيانات وهيكلية الكود النظيفة.

المراجع:

• Flask-WTF Documentation

• WTForms Documentation