منصة سهل التعليمية
1 2

لغة HTML و PHP وتطبيقات تصميم مواقع الويب - تكنلوجيا المعلومات والاتصالات - ثاني ثانوي

الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
في نهاية الموضوع يتوقع أن يكون الطالب قادرا على أن يمارس خطوات إنشاء موقع باستخدام تطبيق Expression Web
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
إجراءات إعداد ملفات ومجلدات المشروع
عند تثبيت lnstall برنامج XAMPP يتم ذلك بشكل افتراضي داخل مجلد باسم XAMPP على مشغل الأقراص :C وبه مجموعة من المجلدات منها مجلد باسم htdocs
إنشاء صفحات الموقع
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
صفحة إدخال مصطلح
صفحة البحث عن مصطلح
صفحة تعديل بيانات مصطلح
صفحة حذف مصطلح
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
صفحة المساعدة
صفحة الاتصال بقاعدة Connection.php لفتح اتصال بقاعدة البيانات على جهاز الخادم
الصفحة الرئيسة Index.php وتعرض واجهة الموقع
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
أيا كان التطبيق المستخدم في إنشاء صفحات الموقع فإنه يعتمد على استخدام لغة الترميز HTML
الهيكل البنائي لبرنامج بلغة HTML
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
خصائص لغة الترميز HTML
لكل Tag وظيفة معينه يقوم بها
يبدأ الكود بـ <html> وينتهي بـ <html/> وبينهما الآتي
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
ملخص ما تقوم بعرضه الأقسام الرئيسة لكود HTML
حفظ كود لغة الترميز HTML
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
إنشاء صفحة ويب باسم Test1.html باستخدام كود HTML
ادرس الكود الخاص بالنشاط
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
إضافة عنوان لصفحة الويب
استخدام كود HTML في إنشاء صفحة ويب باسم test2.html
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
ادرس الكود الخاص بالنشاط
إليك طريقتين لعمل ربط بين صفحتي الويب test1.html و test2.html
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
الربط بين صفحات الويب بكود لغة الترميز HTML
الربط من خلال أحد تطبيقات إنشاء مواقع ويب
تحميل برنامج Expression Web
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
مكونات الشاشة الرئيسة لبرنامج Expression Web
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
كما يمكن عرض كود HTML الخاص بصفحة الويب والتعديل فيه
الربط بين صفحات الويب باستخدام برنامج Expression Web
إنشاء موقع المشروع باستخدام تطبيق Expression Web
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
إنشاء صفحة "Header.php"
ادرس الشكل السابق وحدد الأجزاء المتكررة في جميع صفحات الموقع
النصوص السابقة تظهر على شاشة المستعرض مجرد كلمات غير مرتبطة بصفحات الموقع أي أنها لم تصبح بعد روابط تشعبية Hyperlink
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
نافذة كود صفحة "Header.php"
نلاحظ في الكود الذي تم إنشاؤه ما يلي
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
إنشاء صور Banner وضبط خصائصها
المقطع الثاني
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
جزء الكود الخاص بعناوين صفحات الموقع
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
من دراسة كود HTML السابق نلاحظ ما يلي
بداية الـ"Tag"
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
يمكن ربط كل نص أسفل صورة Banner بالصفحة الخاصة بها من خلال النشاط التالي
يمكنك إنشاء صفحة header.php باستخدام برنامج Expression Web كما يلي
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
المتغيرات في لغة PHP
المتغيرات والثوابت في لغة PHP
إنشاء صفحة الاتصال بقاعدة البيانات Connection.php
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
نلاحظ من تنفيذ الكود السابق ما يلي Double quotation
عند تنفيذ الكود السابق تكون نتيجته على شاشة مستعرض الإنترنت كما يلي
وهناك صيغة أخرى لطباعة قيمة المتغير كما يتضح من المثال التالي
اسم المتغير يفضل أن يكون معبرا عن محتواه أو ما يشير إليه
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
يمكن استعراض بعض أنواع المتغيرات في لغة PHP من خلال الجدول التالي
بينما تم اعتبار المتغير بين علامتي التنصيص المفردة Single quotation نص وطبع بالشكل التالي
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
الثوابت في لغة PHP
ناتج تنفيذ الكود طباعة نوع المتغير U_name$ على صفحة مستعرض الإنترنت بأنه String ثم يترك سطر ويطبع رسالة الترحيب Welcome to PHP
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
التعامل مع قاعدة البيانات
والجدير بالذكر أن المتغيرات والثوابت تتأثر بحالة الأحرف كبيرة أو صغيرة
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
كود صفحة الاتصال بقاعدة البيانات
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
اسم قاعدة البيانات يخصص للمتغير database$
الموضوع الأول: لغة HTML و PHP وتطبيقات تصميم مواقع الويب
إنشاء صفحة الاتصال بقواعد البيانات connect.php
الشرط يسأل عن قيمة المتغير connect$ فإذا كانت "True" فإنه يتم الاتصال بقاعدة البيانات المسماة Database$ من خلال الدالة mysql_select_db أو عرض رسالة حال وجود مشكلة