البرمجة

نماذج الويب في فلاسك

اخر تحديث 16/05/2025
24 تمت قراءة 5 دقيقة
جدول المحتوى

استخدام نماذج الويب في تطبيقات Flask: دليل شامل ومفصل

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

في هذا المقال الطويل والمفصل، سنتناول موضوع كيفية استخدام نماذج الويب في تطبيقات Flask بطريقة علمية وعملية، مع التركيز على الطرق التقليدية وكذلك على استخدام مكتبات مساعدة مثل Flask-WTF التي تسهل إدارة النماذج بشكل كبير.

مواضيع ذات صلة

مفهوم نماذج الويب وأهميتها في تطبيقات Flask

نماذج الويب هي واجهات تُقدّم للمستخدمين لإدخال البيانات النصية، الأرقام، التواريخ، أو اختيار خيارات معينة ثم إرسالها إلى الخادم ليتم معالجتها. تُمثل النماذج نقطة التفاعل المباشرة بين المستخدم والتطبيق.

في Flask، التعامل مع النماذج يتم عادة من خلال:

  • استقبال البيانات المرسلة عبر طرق HTTP المختلفة، خاصة POST و GET.

  • التحقق من صحة البيانات (Validation).

  • معالجة البيانات المخزنة أو تنفيذ عمليات معينة بناءً عليها.

  • إعادة توجيه المستخدم أو عرض نتائج معالجة البيانات.

بناء نموذج ويب بسيط في Flask

أبسط طريقة لإنشاء نموذج ويب في Flask هي من خلال كتابة نموذج HTML داخل قالب (Template) والتعامل مع البيانات في ملف التطبيق الرئيسي. سنبدأ بمثال بسيط لإنشاء نموذج تسجيل مستخدم:

1. إنشاء ملف القالب HTML للنموذج

html

html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>نموذج التسجيلtitle>
head>
<body>
    <h1>تسجيل مستخدم جديدh1>
    <form method="POST" action="/register">
        <label for="username">اسم المستخدم:label>
        <input type="text" id="username" name="username" required>
        <br><br>
        <label for="email">البريد الإلكتروني:label>
        <input type="email" id="email" name="email" required>
        <br><br>
        <label for="password">كلمة المرور:label>
        <input type="password" id="password" name="password" required>
        <br><br>
        <button type="submit">تسجيلbutton>
    form>
body>
html>

2. إعداد المسار (Route) في Flask لمعالجة النموذج

python
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form.get('username')
        email = request.form.get('email')
        password = request.form.get('password')
        
        # هنا يمكن إضافة منطق لحفظ البيانات أو التحقق منها
        print(f"Received: {username}, {email}")
        
        return redirect(url_for('success'))
    return render_template('register.html')

@app.route('/success')
def success():
    return "تم التسجيل بنجاح!"

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

معالجة البيانات والتحقق من صحة النموذج يدويًا

الطريقة السابقة تمكّننا من استقبال البيانات بسهولة، لكن لا توجد أي تحقق من صحة البيانات سوى الاعتماد على خصائص HTML مثل required التي قد لا تكون كافية.

يمكن إجراء التحقق البرمجي على البيانات داخل دالة المسار register مثل:

python
if not username or len(username) < 3:
    error = "اسم المستخدم يجب أن يكون 3 أحرف على الأقل."
    return render_template('register.html', error=error)

ولكن هذه الطريقة تزداد تعقيدًا مع زيادة عدد الحقول وقواعد التحقق.

استخدام مكتبة Flask-WTF لتسهيل التعامل مع النماذج

Flask-WTF هي مكتبة مبنية على WTForms توفر أدوات متقدمة لإنشاء وإدارة النماذج مع دعم قوي للتحقق من صحة البيانات (Validation) وحماية من هجمات CSRF.

1. تثبيت المكتبة

bash
pip install flask-wtf

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

python
from flask import Flask, render_template, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, Length

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

3. إنشاء نموذج تسجيل باستخدام Flask-WTF

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

4. تعديل دالة المسار لاستقبال النموذج

python
@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
        
        # معالجة البيانات، مثل الحفظ في قاعدة بيانات
        print(f"User: {username}, Email: {email}")
        
        return redirect(url_for('success'))
    return render_template('register_wtf.html', form=form)

5. إنشاء قالب HTML لعرض النموذج مع Flask-WTF

html

html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>تسجيل مستخدم جديدtitle>
head>
<body>
    <h1>نموذج التسجيلh1>
    <form method="POST" action="{{ url_for('register') }}">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">{{ error }}span>
            {% endfor %}
        p>
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">{{ error }}span>
            {% endfor %}
        p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">{{ error }}span>
            {% endfor %}
        p>
        <p>{{ form.submit() }}p>
    form>
body>
html>

حماية نماذج الويب ضد هجمات CSRF

أحد أهم الجوانب التي توفرها Flask-WTF هو الحماية من هجمات تزوير الطلبات عبر المواقع (CSRF)، حيث تقوم المكتبة بإضافة رمز مميز (Token) إلى النموذج ويتم التحقق منه عند استلام البيانات.

لتفعيل الحماية يجب ضبط مفتاح سري SECRET_KEY في التطبيق، كما فعلنا سابقًا:

python
app.config['SECRET_KEY'] = 'your_secret_key_here'

ويتم تضمين رمز الحماية في القالب باستخدام:

html
{{ form.hidden_tag() }}

هذا يضيف حقولًا مخفية تتضمن التوكنات اللازمة.

أنواع الحقول المختلفة في نماذج Flask-WTF

توفر WTForms العديد من أنواع الحقول التي يمكن استخدامها حسب نوع البيانات المطلوبة:

نوع الحقل الوصف أمثلة على الاستخدام
StringField حقل نصي بسيط أسماء المستخدمين، عناوين
PasswordField حقل لإدخال كلمات المرور كلمات المرور
EmailField حقل خاص للبريد الإلكتروني عناوين البريد الإلكتروني
BooleanField حقل منطقي (صح/خطأ) تفعيل خيار معين مثل الاشتراك في النشرة
TextAreaField حقل نص متعدد الأسطر رسائل طويلة أو تعليقات
SelectField قائمة منسدلة للاختيار اختيار دولة، نوع حساب
DateField حقل لإدخال تاريخ تواريخ الميلاد، مواعيد
FileField حقل لتحميل ملفات رفع صور، مستندات

باستخدام هذه الحقول، يمكن بناء نماذج متكاملة تلبي احتياجات التطبيق المختلفة.

التحقق من صحة البيانات (Validation) بشكل متقدم

تدعم Flask-WTF إضافة العديد من قواعد التحقق بسهولة، منها:

  • التحقق من البيانات المطلوبة DataRequired()

  • التحقق من الحد الأدنى والحد الأقصى لطول النص Length(min, max)

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

  • التحقق من تطابق حقلين (مثلاً كلمة المرور وتأكيدها) باستخدام EqualTo

  • التحقق من نمط معين باستخدام Regexp

  • التحقق من نطاق الأرقام باستخدام NumberRange

مثال على نموذج تسجيل يحتوي على تأكيد كلمة المرور:

python
from wtforms.validators import EqualTo

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

إرسال البيانات من النموذج إلى قاعدة بيانات

بعد التحقق من صحة البيانات واستلامها بنجاح، غالبًا ما يكون الهدف هو تخزين هذه البيانات في قاعدة بيانات. يمكن الربط مع قواعد بيانات مثل SQLite أو MySQL أو PostgreSQL باستخدام ORM مثل SQLAlchemy.

مثال على حفظ بيانات مستخدم في قاعدة بيانات باستخدام SQLAlchemy

python
from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(25), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    password = db.Column(db.String(60), nullable=False)

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data, password=form.password.data)
        db.session.add(user)
        db.session.commit()
        return redirect(url_for('success'))
    return render_template('register_wtf.html', form=form)

في هذا المثال، يتم إنشاء جدول User لتخزين معلومات المستخدمين، وتتم عملية الإضافة والالتزام بالتغييرات في قاعدة البيانات عند تسجيل مستخدم جديد.

التعامل مع ملفات النموذج (رفع الملفات)

Flask-WTF تدعم أيضًا حقول رفع الملفات من خلال FileField مع التحقق من نوع الملف وحجمه. يُستخدم ذلك في حالات مثل رفع الصور أو المستندات.

مثال لحقل رفع ملف صورة

python
from flask_wtf.file import FileField, FileAllowed

class UploadForm(FlaskForm):
    photo = FileField('اختر صورة', validators=[FileAllowed(['jpg', 'png'], 'فقط صور JPG و PNG مسموح بها!')])
    submit = SubmitField('رفع')

التعامل مع نماذج البحث وحقول GET

في بعض الحالات، يتم إرسال البيانات عبر طلب GET بدلاً من POST، خاصة في نماذج البحث أو فلترة البيانات. يمكن التعامل مع هذا النوع من النماذج في Flask بسهولة باستخدام request.args.

مثال:

python
@app.route('/search')
def search():
    query = request.args.get('query')
    results = perform_search(query)
    return render_template('search_results.html', results=results)

يتم في النموذج استخدام:

html
<form method="GET" action="/search">
    <input type="text" name="query" placeholder="ابحث هنا">
    <button type="submit">بحثbutton>
form>

تحسين تجربة المستخدم مع النماذج

لتحسين تفاعل المستخدم مع النماذج، يمكن دمج Flask مع تقنيات واجهة المستخدم الحديثة مثل:

  • AJAX: لتحميل وإرسال البيانات بشكل غير متزامن دون إعادة تحميل الصفحة.

  • JavaScript Validation: إضافة تحقق فوري على جانب العميل.

  • تصميم استجابي (Responsive Design): لضمان ظهور النموذج بشكل جيد على مختلف الأجهزة.

مثال على استخدام AJAX مع Flask يتطلب إضافة جافاسكريبت على جانب العميل، حيث تُرسل البيانات إلى مسار في Flask ويُعاد الرد بشكل JSON.

خلاصة الجوانب التقنية لنماذج الويب في Flask

العنصر الوصف المزايا
نماذج HTML التقليدية كتابة القالب بشكل مباشر مع استقبال البيانات يدويًا بساطة، لا حاجة لمكتبات إضافية
Flask-WTF مكتبة تساعد في إنشاء النماذج والتحقق منها وإضافة حماية CSRF سهولة في الإدارة، حماية وأمان، إعادة استخدام النماذج
التحقق من الصحة التأكد من صحة البيانات المدخلة قبل المعالجة حماية البيانات، تقليل الأخطاء
رفع الملفات دعم إرسال ملفات عبر النماذج مع التحقق من النوع إمكانية إضافة ميزات رفع الملفات
تخزين البيانات ربط مع قواعد البيانات مثل SQLite أو MySQL حفظ البيانات، إدارة المستخدمين
حماية CSRF إضافة رموز حماية ضد تزوير الطلبات حماية أمنية ضرورية
إرسال GET vs POST اختيار الطريقة المناسبة حسب نوع النموذج مرونة في تصميم الواجهات

الخاتمة التقنية

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

يمكن بناء تطبيقات ويب تفاعلية ومتقدمة بالاعتماد على نماذج الويب التي تتكامل بسلاسة مع قواعد البيانات وعمليات المعالجة المختلفة، مما يجعل Flask خيارًا مثاليًا للمطورين الذين يرغبون في تطبيقات خفيفة وسريعة التطوير مع إمكانيات واسعة.

المراجع

  1. Flask Documentation – Forms

  2. WTForms Documentation

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

اخر تحديث 16/05/2025
24 تمت قراءة 5 دقيقة