تقنيات نور التعليمية تقنيات نور التعليمية

آخر الأخبار

جاري التحميل ...

🧩 الدرس الرابع: التعامل مع النماذج (Forms) في Flask
أكتوبر 08, 2025
الصفحة الرئيسية

في هذا الدرس، سنتعلم كيف ننشئ نموذجًا (Form) داخل صفحة HTML ليتفاعل معه المستخدم، مثل صفحة “اتصل بنا” التي ترسل البيانات إلى الخادم (Server) ليقوم بمعالجتها.

(Forms) في Flask

🎯 أهداف الدرس:

  • فهم كيفية إنشاء نموذج إدخال بيانات (Form) في Flask.
  • استخدام POST method لإرسال البيانات.
  • عرض البيانات التي أرسلها المستخدم في صفحة أخرى أو على نفس الصفحة.

🧠 الخطوة 1: إنشاء صفحة الاتصال

أنشئ ملفًا جديدًا باسم contact.html داخل مجلد templates يحتوي على نموذج بسيط لإدخال الاسم والبريد والرسالة:

<!-- templates/contact.html -->
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>اتصل بنا</title>
</head>
<body>
    <h1>اتصل بنا</h1>
    <form method="POST" action="/contact">
        <label>الاسم:</label><br>
        <input type="text" name="name" required><br><br>

        <label>البريد الإلكتروني:</label><br>
        <input type="email" name="email" required><br><br>

        <label>الرسالة:</label><br>
        <textarea name="message" rows="5" required></textarea><br><br>

        <button type="submit">إرسال</button>
    </form>
</body>
</html>

⚙️ الخطوة 2: تعديل ملف التطبيق الرئيسي app.py

نضيف مسار (route) جديد للتعامل مع النموذج واستقبال البيانات عند الإرسال:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        message = request.form['message']
        return f"""
        <h2>تم استلام رسالتك بنجاح!</h2>
        <p><strong>الاسم:</strong> {name}</p>
        <p><strong>البريد:</strong> {email}</p>
        <p><strong>الرسالة:</strong> {message}</p>
        """
    return render_template('contact.html')

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

💡 شرح الكود:

  • methods=['GET', 'POST']: تسمح للمسار بقبول طريقتين، إما عرض الصفحة أو استقبال البيانات.
  • request.form['name']: تستخدم لجلب القيم التي أدخلها المستخدم.
  • عند الإرسال، Flask يعرض البيانات التي أرسلها المستخدم في صفحة جديدة.

✅ النتيجة:

عند فتح /contact ستجد نموذجًا جميلًا.
املأ الحقول واضغط على “إرسال”
→ سيظهر لك نص يؤكد إرسال البيانات مع عرضها في الصفحة.

🧭 تمرين الدرس الرابع:

أنشئ صفحة جديدة بعنوان “الاشتراك في النشرة البريدية” (subscribe) تحتوي على:

  • حقل للاسم.
  • حقل للبريد الإلكتروني.
  • زر “اشتراك”.

وعند الضغط على زر الاشتراك، تظهر رسالة:

“شكرًا لك {الاسم} على الاشتراك! سنرسل لك آخر الأخبار على بريدك {email}.”

🧩 حل تمرين الدرس الرابع: صفحة الاشتراك في النشرة البريدية (Subscribe)

🎯 الهدف:

إنشاء نموذج بسيط يحتوي على الاسم والبريد الإلكتروني، وعند الإرسال تظهر رسالة شكر تحتوي على البيانات المُدخلة.

⚙️ الخطوة 1: إنشاء صفحة HTML باسم subscribe.html

احفظ هذا الملف داخل مجلد templates:

<!-- templates/subscribe.html -->
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>الاشتراك في النشرة البريدية</title>
</head>
<body>
    <h1>الاشتراك في النشرة البريدية</h1>
    <form method="POST" action="/subscribe">
        <label>الاسم:</label><br>
        <input type="text" name="name" required><br><br>

        <label>البريد الإلكتروني:</label><br>
        <input type="email" name="email" required><br><br>

        <button type="submit">اشترك الآن</button>
    </form>
</body>
</html>

⚙️ الخطوة 2: تعديل ملف التطبيق الرئيسي app.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return "<h1>مرحبًا بك في موقع Flask التجريبي!</h1><p><a href='/subscribe'>الاشتراك في النشرة البريدية</a></p>"

@app.route('/subscribe', methods=['GET', 'POST'])
def subscribe():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        return f"""
        <h2>شكرًا لك {name} على الاشتراك!</h2>
        <p>سنرسل لك آخر الأخبار على بريدك الإلكتروني: <strong>{email}</strong></p>
        <a href='/'>عودة إلى الصفحة الرئيسية</a>
        """
    return render_template('subscribe.html')

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

💬 شرح الكود:

  • عند فتح /subscribe يظهر النموذج.
  • عندما يضغط المستخدم على زر “اشترك الآن”، يتم إرسال البيانات بطريقة POST إلى نفس الرابط.
  • Flask يلتقط البيانات من request.form ويعرض رسالة شكر تحتوي على الاسم والبريد الإلكتروني.

💡 ملاحظات إضافية:

  • يمكنك تحسين مظهر النموذج لاحقًا بإضافة Bootstrap في الدروس القادمة.
  • في المشاريع الحقيقية، يمكن حفظ البريد الإلكتروني في قاعدة بيانات أو ملف Excel.

🚀 التمرين المطوّر: حفظ بيانات المشتركين في ملف Excel

📁 المتطلبات:

قبل أن تبدأ، تأكد من تثبيت المكتبة التالية:

pip install openpyxl

⚙️ ملف التطبيق app.py

انسخ الكود التالي بالكامل وشغّله:

from flask import Flask, render_template, request
from openpyxl import Workbook, load_workbook
import os

app = Flask(__name__)

EXCEL_FILE = "subscribers.xlsx"

# دالة لإنشاء ملف Excel إذا لم يكن موجودًا
def create_excel_file():
    if not os.path.exists(EXCEL_FILE):
        wb = Workbook()
        ws = wb.active
        ws.title = "Subscribers"
        ws.append(["الاسم", "البريد الإلكتروني"])
        wb.save(EXCEL_FILE)

create_excel_file()

@app.route('/')
def home():
    return """
    <h1>مرحبًا بك في موقع Flask التجريبي!</h1>
    <p><a href='/subscribe'>الاشتراك في النشرة البريدية</a></p>
    """

@app.route('/subscribe', methods=['GET', 'POST'])
def subscribe():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']

        # حفظ البيانات في Excel
        wb = load_workbook(EXCEL_FILE)
        ws = wb.active
        ws.append([name, email])
        wb.save(EXCEL_FILE)

        return f"""
        <h2>شكرًا لك {name} على الاشتراك!</h2>
        <p>تم حفظ بريدك الإلكتروني: <strong>{email}</strong></p>
        <a href='/'>عودة إلى الصفحة الرئيسية</a>
        """

    return render_template('subscribe.html')

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

📄 صفحة HTML – templates/subscribe.html

(نفس الصفحة السابقة تمامًا)

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>الاشتراك في النشرة البريدية</title>
</head>
<body>
    <h1>الاشتراك في النشرة البريدية</h1>
    <form method="POST" action="/subscribe">
        <label>الاسم:</label><br>
        <input type="text" name="name" required><br><br>

        <label>البريد الإلكتروني:</label><br>
        <input type="email" name="email" required><br><br>

        <button type="submit">اشترك الآن</button>
    </form>
</body>
</html>

✅ النتيجة:

عند إدخال الاسم والبريد والضغط على "اشترك الآن":

  • يتم حفظ البيانات في ملف subscribers.xlsx داخل مجلد المشروع.
  • تظهر رسالة شكر تحتوي على الاسم والبريد.
  • في كل مرة يشترك فيها مستخدم جديد، تُضاف البيانات في صف جديد داخل ملف Excel.

💡 ملاحظات إضافية:

  • يمكنك لاحقًا إضافة صفحة “عرض المشتركين” تقرأ نفس ملف Excel وتعرضه في جدول HTML.
  • يمكن أيضًا تطوير هذا النموذج ليرسل رسائل تأكيد عبر البريد الإلكتروني (سنتعلم ذلك لاحقًا بإذن الله).

عن الكاتب

Tamer Ahmed

شاهد أيضاً

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

تقنيات نور التعليمية