تكليفات الدروس من [ 133 ] إلى [ 140 ]
[ 5 ] تكليفات على [ Flask ]
التكليف 01
- اعمل تطبيق Flask في ملف app.py داخل فولدر learn-python
- اعمل 3 Routes للصفحة الرئيسية وصفحة About وصفحة Contact وكل Route ليه دالة باسم مختلف
- كل صفحة ترجع النص الموضح تحت بالظبط
- شغل التطبيق محليا على Port 9000 وخلي تشغيل السيرفر داخل شرط __name__
- متسميش ملف المشروع flask.py علشان ميحصلش تعارض مع اسم المكتبة
/ => Welcome To My Website
/about => About Me
/contact => Contact Meالتكليف 02
- اعمل Route اسمه /profile يعرض ملف profile.html الموجود داخل templates باستخدام render_template
- ابعت من Python المتغيرات title و name و job بالقيم الموضحة تحت
- استخدم title في عنصر title و name في h1 و job في p
- ممنوع تكتب القيم مباشرة داخل ملف HTML علشان تغيير البيانات من Python يغير الصفحة
title = "My Profile"
name = "Osama"
job = "Python Developer"
# Browser Title: My Profile
# Heading: Osama
# Paragraph: Python Developerالتكليف 03
- اعمل صفحتين Home و About باستخدام قالب مشترك اسمه base.html داخل templates
- القالب الأساسي يكون فيه هيكل HTML وعنصر title وقائمة روابط وفوتر نصه My Website
- اعمل block اسمه body واستخدم extends في كل صفحة بدل تكرار الهيكل
- استخدم url_for في روابط التنقل وابعت title المناسب من Python لكل صفحة
- غير الفوتر من base.html واتأكد إن التغيير ظهر في الصفحتين
/ => Title: Home | Heading: Welcome Home
/about => Title: About | Heading: About My Website
# Both Pages Show: My Websiteالتكليف 04
- اعمل صفحة /skills وابعت لها قائمة المهارات الموضحة تحت من Python
- استخدم for داخل قالب skills.html لعرض كل مهارة ونسبتها من غير تكرار العناصر يدويا
- لو النسبة 80 أو أكتر اعرض Advanced وغير كده اعرض Learning باستخدام if
- لو القائمة فاضية اعرض No Skills Yet بدل قائمة المهارات
- جرب القائمة الأصلية وبعدها قائمة فاضية وبعدها مهارة نسبتها 80 علشان تتأكد من الشرط
skills = [("HTML", 90), ("CSS", 75), ("Python", 80)]
# HTML - 90% - Advanced
# CSS - 75% - Learning
# Python - 80% - Advanced
# Empty List: No Skills Yetالتكليف 05
- اعمل صفحتي Home و Skills باستخدام base.html ووراثة القوالب
- اربط ملف static/css/main.css في الصفحتين باستخدام url_for وخليه يحدد الخط ولون الخلفية
- ابعت custom_css بقيمة skills لصفحة المهارات فقط وخلي base.html يحمل skills.css بشرط وجود المتغير
- في صفحة المهارات اعرض البيانات الموضحة تحت باستخدام for وكل مهارة يكون ليها شريط بعرض يساوي النسبة
- خزن النسبة في data-width على عنصر الشريط وخلي ملف static/js/main.js يقراها ويطبق العرض
- اربط JavaScript من القالب الأساسي واتأكد إنه ميعملش خطأ في Home اللي مفيهاش مهارات
- ممنوع كتابة كود CSS أو JavaScript جوه قوالب HTML
skills = [("HTML", 90), ("CSS", 75), ("Python", 80)]
# Home Loads: main.css + main.js
# Skills Loads: main.css + skills.css + main.js
# Bar Widths: 90% / 75% / 80%