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

آخر الأخبار

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

🧩 الدرس الثاني: إعداد هيكل المشروع في Flask
أكتوبر 06, 2025
الصفحة الرئيسية

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

إعداد هيكل المشروع في 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 → تظهر صفحة “من نحن”.

عن الكاتب

Tamer Ahmed

شاهد أيضاً

التعليقات


اتصل بنا

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

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

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