في هذا الدرس، سنتعلم كيف ننشئ نموذجًا (Form) داخل صفحة HTML ليتفاعل معه المستخدم، مثل صفحة “اتصل بنا” التي ترسل البيانات إلى الخادم (Server) ليقوم بمعالجتها.
🎯 أهداف الدرس:
- فهم كيفية إنشاء نموذج إدخال بيانات (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.
- يمكن أيضًا تطوير هذا النموذج ليرسل رسائل تأكيد عبر البريد الإلكتروني (سنتعلم ذلك لاحقًا بإذن الله).
