🎯 أهداف الدرس:
- فهم كيفية إضافة ملفات CSS و JavaScript إلى مشروع Flask.
- استخدام مجلد static/ لإدارة الملفات الثابتة (مثل الصور، التنسيقات، السكربتات).
- جعل تصميم الصفحات أكثر أناقة وجاذبية.
🗂️ الهيكل العام للمشروع بعد هذا الدرس:
my_flask_app/
│
├── app.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
└── templates/
├── base.html
└── index.html
🧱 1. إنشاء مجلد static
داخل مجلد مشروعك أنشئ مجلدًا باسم static، وهو المجلد المخصص في Flask لتخزين:
- ملفات CSS
- ملفات JavaScript
- الصور والأيقونات والخطوط
🎨 2. إنشاء ملف CSS
📄 أنشئ الملف: static/css/style.css
body {
background-color: #f9f9f9;
font-family: "Cairo", sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
text-align: center;
padding: 15px 0;
font-size: 22px;
}
button {
background-color: #28a745;
border: none;
color: white;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #218838;
}
⚙️ 3. إنشاء ملف JavaScript
📄 أنشئ الملف: static/js/script.js
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector('button');
if (button) {
button.addEventListener('click', function() {
alert("تم الضغط على الزر ✅");
});
}
});
🧩 4. ربط الملفات في القالب الأساسي
📄 أنشئ ملفًا باسم 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>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<header>
<h1>موقعي Flask التفاعلي</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
📜 5. صفحة رئيسية ترث القالب
📄 templates/index.html
{% extends "base.html" %}
{% block content %}
<section style="text-align:center; margin-top:40px;">
<h2>مرحبًا بك في موقعي التجريبي</h2>
<p>هذا مثال على كيفية ربط Flask مع CSS و JavaScript.</p>
<button>اضغط هنا</button>
</section>
{% endblock %}
🧠 6. كود Flask الأساسي
📄 app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', title='الصفحة الرئيسية')
if __name__ == '__main__':
app.run(debug=True)
✅ النتيجة:
بعد تشغيل المشروع:
- ستحصل على صفحة رئيسية بتصميم أنيق بخلفية فاتحة.
- عند الضغط على الزر، يظهر تنبيه “تم الضغط على الزر ✅” بفضل JavaScript.
- ملفات CSS وJS يتم تحميلها تلقائيًا من مجلد
static.
🧩 تمرين الدرس التاسع:
قم بتطوير الصفحة بحيث:
- تضيف صورة شعار من مجلد
static/images/. - تضيف زرًّا جديدًا يقوم بتغيير لون خلفية الصفحة عند الضغط عليه (باستخدام JavaScript).
- تجعل تصميم الموقع متجاوبًا مع شاشات الهاتف.
✅ حل تمرين الدرس التاسع: Flask + CSS + JavaScript المتقدم
🗂️ هيكل المشروع النهائي:
my_flask_app/
│
├── app.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
└── templates/
├── base.html
└── index.html
🎨 1. ملف style.css
📄 static/css/style.css
body {
background-color: #f9f9f9;
font-family: "Cairo", sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.5s ease;
}
header {
background-color: #007bff;
color: white;
text-align: center;
padding: 15px 0;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
header img {
width: 50px;
height: 50px;
border-radius: 50%;
}
main {
text-align: center;
margin-top: 40px;
}
button {
background-color: #28a745;
border: none;
color: white;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
button:hover {
background-color: #218838;
}
/* ✅ تصميم متجاوب */
@media (max-width: 600px) {
header {
flex-direction: column;
font-size: 18px;
}
header img {
width: 40px;
height: 40px;
}
button {
width: 80%;
}
}
⚙️ 2. ملف script.js
📄 static/js/script.js
document.addEventListener('DOMContentLoaded', function() {
const btnAlert = document.querySelector('#btn-alert');
const btnBg = document.querySelector('#btn-bg');
if (btnAlert) {
btnAlert.addEventListener('click', function() {
alert("تم الضغط على الزر ✅");
});
}
if (btnBg) {
btnBg.addEventListener('click', function() {
const colors = ['#f9f9f9', '#fff3cd', '#d1ecf1', '#d4edda', '#f8d7da'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
});
}
});
🧱 3. القالب الأساسي base.html
📄 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>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<header>
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
<h1>موقعي Flask التفاعلي</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
🧩 4. صفحة index.html
📄 templates/index.html
{% extends "base.html" %}
{% block content %}
<section>
<h2>مرحبًا بك في موقعي التجريبي</h2>
<p>هذا مثال عملي على ربط Flask بملفات CSS وJavaScript وتحسين تجربة المستخدم.</p>
<button id="btn-alert">اضغط هنا</button>
<button id="btn-bg">غيّر لون الخلفية 🎨</button>
</section>
{% endblock %}
🧠 5. كود Flask
📄 app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', title='الصفحة الرئيسية')
if __name__ == '__main__':
app.run(debug=True)
🌟 النتيجة النهائية:
- شعار الموقع يظهر في الشريط العلوي.
- الزر الأول يعرض رسالة تنبيه.
- الزر الثاني يغيّر لون الخلفية عشوائيًا.
- التصميم متجاوب بالكامل على الجوال والتابلت.
