في هذا الدرس سنتعلم كيفية إنشاء هيكل مشروع Flask منظم وجاهز للتطوير، بحيث يسهل عليك إضافة الصفحات والوظائف لاحقًا.
🔹 أولًا: إنشاء مجلد المشروع
افتح مجلد العمل الخاص بك وأنشئ مجلدًا جديدًا باسم مثلًا:
flask_project
ثم أنشئ بداخله الملفات والمجلدات التالية:
flask_project/
│
├── app.py
├── static/
│ └── style.css
├── templates/
│ ├── base.html
│ └── index.html
└── requirements.txt
🔹 ثانيًا: إعداد ملف app.py
هذا هو الملف الرئيسي الذي سيشغل التطبيق.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
🔸 عند تشغيل الملف باستخدام:
python app.py
سيفتح المتصفح تلقائيًا على العنوان:
http://127.0.0.1:5000/
وسيتم عرض الصفحة الرئيسية.
🔹 ثالثًا: إنشاء صفحة HTML رئيسية
افتح ملف templates/index.html واكتب الكود التالي:
{% extends "base.html" %}
{% block content %}
<h1>مرحبًا بك في مشروع Flask الأول!</h1>
<p>هذا هو أول تطبيق ويب نقوم بإنشائه باستخدام Flask.</p>
{% endblock %}
🔹 رابعًا: إنشاء القالب الأساسي
افتح templates/base.html وضع الكود التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مشروع Flask</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h2>مشروع Flask التعليمي</h2>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>جميع الحقوق محفوظة © تقنيات نور التعليمية</p>
</footer>
</body>
</html>
🔹 خامسًا: تنسيق بسيط للصفحة
افتح static/style.css وأضف:
body {
font-family: "Cairo", sans-serif;
direction: rtl;
text-align: center;
background: #f9f9f9;
color: #333;
}
header, footer {
background-color: #007bff;
color: white;
padding: 15px;
}
🧠 تمرين عملي
قم بإضافة صفحة جديدة باسم about.html تحتوي على فقرة تعريفية بالموقع، واجعلها تُعرض عند زيارة الرابط /about.
✅ حل تمرين الدرس الثاني: إنشاء صفحة “حول الموقع” (About Page)
في التمرين طُلب منك إنشاء صفحة جديدة باسم about.html تحتوي على فقرة تعريفية، وربطها برابط /about.
الآن سننفذ ذلك خطوة بخطوة:
🔹 الخطوة 1: تعديل ملف app.py
أضف دالة جديدة لمعالجة صفحة حول الموقع:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)
🔹 الخطوة 2: إنشاء صفحة جديدة about.html
ضعها داخل مجلد templates بجانب الملفات الأخرى.
{% extends "base.html" %}
{% block content %}
<h1>من نحن</h1>
<p>
هذا الموقع تم إنشاؤه باستخدام إطار العمل Flask لتعليم تطوير تطبيقات الويب التفاعلية.
هدفنا هو مساعدة المبرمجين على فهم الأساسيات بطريقة عملية ومبسطة.
</p>
{% endblock %}
🔹 الخطوة 3: تعديل شريط التنقل (اختياري)
إذا أردت إضافة روابط للتنقل بين الصفحات، يمكنك تعديل ملف base.html بهذا الشكل:
<header>
<h2>مشروع Flask التعليمي</h2>
<nav>
<a href="/">الرئيسية</a> |
<a href="/about">من نحن</a>
</nav>
</header>
وأضف في ملف style.css هذا التنسيق الصغير:
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
🔹 النتيجة النهائية:
- عند زيارة الرابط:
http://127.0.0.1:5000/→ تظهر الصفحة الرئيسية. - عند زيارة الرابط:
http://127.0.0.1:5000/about→ تظهر صفحة “من نحن”.
