لغة 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 أو عرض رسالة حال وجود مشكلة