الوحدة الأولى: أساسيات تصميم مواقع الويب
مدخل معرفي للمشروع
درس «مدخل معرفي للمشروع» — شرح منظم من كتاب الوزارة للصف الثاني الثانوي (علوم). في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: محاور الدرس: ١- البرامج المجانية Freeware: · ٢- البرامج مفتوحة المصدر Open Source Programs: · ٣- صفحة الويب الساكنة Static Web Page: · صفحة الويب الديناميكية :Dynamic Web Page.
اضغط أي أداة — لتوليد اختبارات وفلاش كارد وملخصات وتجارب من الدرس تفاعلياً
درس «مدخل معرفي للمشروع» — شرح منظم من كتاب الوزارة للصف الثاني الثانوي (علوم). في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن: محاور الدرس: ١- البرامج المجانية Freeware: · ٢- البرامج مفتوحة المصدر Open Source Programs: · ٣- صفحة الويب الساكنة Static Web Page: · صفحة الويب الديناميكية :Dynamic Web Page.
في نهاية الموضوع يتوقع أن يكون الطالب قادرًا على أن:
❓ كيف نحل «تدريب (١)» خطوة بخطوة؟
- تعريف + تطبيق — اقرأ السؤال مرتين — حدد «عملية الربط بين جداول» · مثال: مدخل معرفي للمشروع
- حل تدريب الكتاب — راجع «محليًا» · مثال: تدريب (١)
✅ اربط «عملية الربط بين جداول» بمثال من كتاب الوزارة
✅ راجع تعريفات الدرس
- ١تدريب "مفاهيم أساسية" بكتاب الأنشطة والتدريبات (
- ٢صفحة تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي أساسيات تصميم موقع الويب إشادة الحلم
- ١تحديد البرامج التي سوف تستخدمها في بناء مشروعك وتثبيتها على الكمبيوتر Install.
- ٢تحديد طريقة حفظ ملفات صفحات معلومات الويب Web Pages الخاصة بالمشروع على جهاز كمبيوتر "خادم" Server، وإمكانية عرضها على أحد برامج مستعرضات الإنترنت، وتحفظ هذه الصفحات في صورة ملفات على جهاز كمبيوتر "خادم" Server، بإحدى الخيارات التالية: ### (أ) - بمقابل مادي على الإنترنت من خلال حجز موقع على أحد أجهزة استضافة مواقع الويب "Host Server". ### (ب) - بدون مقابل على أحد مواقع الإنترنت المجانية التي تسمح لك باستضافة موقعك. ### (ج) - نشر الموقع محليًا على جهازك "Local Host"، وسوف نتبنى هذا الخيار في إنتاج مشروع "قاموس مصطلحات الكمبيوتر المصور". تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي أساسيات تصميم موقع الويب
- ١إعداد جهاز الكمبيوتر الخاص بك ليقوم بدور جهاز الخادم المضيف للموقع "Local Host": عند إنشاء موقع ويب يحتاج مطوري البرامج إلى تهيئة البيئة المناسبة لإنشاء موقع إلكتروني "قاموس مصطلحات الكمبيوتر المصور" مما يستلزم جعل جهازك يعمل كجهاز خادم Server وذلك باستخدام برنامج Apache Server الذي يقوم بترجمة الكود المكتوب بلغة PHP "Personal Home Pages". لتجربة الموقع والتأكد من صحته محليًا قبل نشره على الإنترنت أسوة بما تقوم به الشركات الكبرى، تحتاج إلى تهيئة جهازك ليقوم بدور جهاز الخادم Server ليصلح لاستضافة الموقع. من أمثلة البرامج المستخدمة لهذا الغرض برنامج "XAMPP" يعتبر برنامج XAMPP من أفضل برامج إعداد جهاز الكمبيوتر "Local Host"، فهو يتسم بالسهولة والقدرة على التعامل مع قواعد البيانات MySQL. تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي أساسيات تصميم موقع الويب نشاط (
- ٢تثبيت برنامج. "XAMPP installed" XAMPP تحت إشراف معلمك اتبع خطوات تثبيت برنامج XAMPP الموضحة في كتاب الأنشطة والتدريبات صفحة ٩
- ١| مرحلة إنشاء جداول قاعدة البيانات | | مرحلة (
- ٢| مرحلة إنشاء صفحات الموقع | وكل مرحلة تتضمن عدة مهارات ومن خلال دراستك لها وتدريبك عليها يمكنك تنفيذ المشروع تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي متطلبات ومراحل إنتاج المشروع قرار الشرف
- ١فصل الصورة Banner والارتباطات التشعبية Hyperlinks في صفحة مستقلة يتم استدعائها في بداية كل صفحة.
- ٢فصل كود الاتصال بقاعدة البيانات في صفحة مستقلة يتم استدعائها في بداية كل صفحة.
- ٣الصورة التي تظهر في بداية كل صفحة وتسمى Banner
- ٤جميع الارتباطات التشعبية Hyperlinks التي نستخدمها في الإبحار بين صفحات الموقع وهي: (الرئيسة – إدخال مصطلح – بحث عن مصطلح – تعديل – حذف – مساعدة)، وهذا يتطلب تكرار الكود الخاص بالصورة والارتباطات في جميع صفحات الموقع وهو ما يمثل عبء كبير وتكرار ينبغي أن نتجنبه، وذلك بفصلها في صفحة واحدة يتم استدعائها في باقي الصفحات. تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي متطلبات ومراحل إنتاج المشروع وهناك العديد من التطبيقات أو البرامج الجاهزة التي يمكن من خلالها إنشاء صفحات الويب الخاصة بالمشروع بسرعة وسهولة، وهو ما سوف نقوم بتنفيذ في المراحل التالية. بعد تحديد صفحات الموقع، علينا تحديد الهيكل البنائي لقاعدة البيانات، وهو ما سيتم توضيحه في المرحلة الثانية للمشروع (الموضوع التالي). ### تدريب (
- ٥"تصميم مخطط لصفحات موقع" بكتاب الأنشطة والتدريبات صفحة ١٩ ### تدريب (
- ٦"تصميم مخطط لصفحات موقع قاموس المصطلحات" المصور" بكتاب الأنشطة والتدريبات صفحة ٢٠ تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي متطلبات ومراحل إنتاج المشروع
- ١من نفس نوع البيانات Field Data Type. (
- ٢نفس الحجم.
- ١في الجدول الأول بسجل رقم الطالب (
- ٢في الجدول الثاني وهكذا لباقي السجلات حتى وإن كان إدخال السجلات في الجدولين بترتيب مختلف، المهم أن يكون محتوى حقلي الربط متماثلين. فمثلا يمكن استنتاج أن الطالبة رقم ٢ في الصف الدراسي ٣/٦ وحالتها الدراسية "باقي". تدريب (
- ٣العلاقة رأس برأس "One To One" بين جدولين بكتاب الأنشطة والتدريبات صفحة ٢٣ ### مثال (
- ١هل ينتمي أكثر من طالب إلى نفس الصف؟
- ٢هل ينتمي أحد الطلاب إلى أكثر من صف؟
- ٣ما هي أرقام الطلاب في صف 3؟
- ١استنتاج علاقة رأس بأطراف one to many بين جدولين بكتاب الأنشطة والتدريبات صفحة ٢٥ تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي متطلبات ومراحل إنتاج المشروع
- ١استنتاج علاقة أطراف بأطراف Many To Many بين جدولين بكتاب الأنشطة والتدريبات صفحة ٢٦ استخدام أحد تطبيقات نظم إدارة قواعد البيانات في إنشاء قاعدة البيانات مثل: MySQL أو Access MS أو MySQL سوف نستخدم تطبيق MySQL حيث أنه من التطبيقات المجانية Free Ware، مفتوح المصدر و OpenSource، ويسمح بالتعامل مع كم هائل من البيانات وتستخدمه كبرى الشركات العالمية خاصة في مجال تكنولوجيا المعلومات مثل: Yahoo and Friendster.Google ولمزيد من المعلومات حول بعض الشركات التي تستخدم MySQL يمكن زيارة الموقع التالي: http://www.mysql.com/customers/ تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي متطلبات ومراحل إنتاج المشروع عادة ما تضم التطبيقات المستخدمة في نظم إدارة قواعد البيانات كائنات Objects أساسية أهمها: - جداول Tables: من خلالها يمكن إنشاء جداول قاعدة البيانات بما تحويه من سجلات وحقول وإمكانية إدخال بيانات فيها وعرضها وتعديلها. - استعلامات Queries: الاستعلام عبارة عن سؤال يوجهه المستخدم لقاعدة البيانات بقصد الاستعلام عن بيانات أو معلومات بالجداول، فيعرض البيانات المطلوبة، ومن خلال الاستعلام يمكن عرض بعض حقول من جدول بيانات أو يعرض بعض سجلات من جدول أو أكثر بناءً على شرط معين... إلخ. لإنشاء قاعدة بيانات مشروع "قاموس مصطلحات الكمبيوتر المصور" باستخدام تطبيق MySQL، اتبع إجراءات النشاط التالي: نشاط (
- ٢إنشاء قاعدة بيانات باستخدام برنامج MySQL بكتاب الأنشطة والتدريبات صفحة ٢٧ ويعتبر هذا النشاط مرشدًا يمكنك تحت اشراف معلمك من إنشاء أي جداول أخرى في قاعدة البيانات حسب احتياجاتك. بالخصائص التالية: تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي متطلبات ومراحل إنتاج المشروع
- ١ادخال بيانات في جدول terms باستخدام MySQL بكتاب الأنشطة والتدريبات صفحة ٣٢ تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١الصورة Banner التي تعرض أعلى كل صفحات الموقع.
- ٢الارتباطات التشعبية Hyperlinks بجميع صفحات الموقع. - الصفحة الرئيسية "Index.php" وتعرض واجهة الموقع: نظرًا لخطورة عمليتي التعديل في بيانات المصطلح أو حذفه من الموقع، فقد تم منح هذه الصلاحية للمستخدم الذي يقوم بتسجيل دخوله فقط، وهو ما ستقوم بتنفيذ في مرحلة تأمين الموقع في الوحدة الخامسة من هذا الكتاب، وبذلك ينبغي على المستخدم الذي سجل دخول أن يقوم بتسجيل خروج من الموقع، وذلك بعد إنتهاء تفاعله مع موقع "قاموس مصطلحات الكمبيوتر المصور". تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" أيًا كان التطبيق المستخدم في إنشاء صفحات الموقع، فإنه يعتمد على استخدام لغة الترميز HTML، لذا نتطرق إلى أهم المعلومات والمهارات الأساسية في لغة الترميز HTML وتطبيق Expression Web، للمساعدة على إنشاء صفحات الموقع. HTML "Hyper Text Markup Language" HTML لغة الترميز HTML، لغة التعبير، لغة تكويد تستخدم في إنشاء صفحة ويب ثابتة تحفظ بامتداد.html أو.html بحيث يمكن عرضها وترجمة الكود الخاص بها من خلال أحد برامج مستعرضات الإنترنت. وبذلك يمكن كتابة كود HTML باستخدام أحد برامج معالجة النصوص مثل: (MS Word, WordPad, Notepad and...) مع مراعاة الآتي: - الأمر الذي يتم كتابته بلغة الترميز HTML يطلق عليه Tag، ولا يشترط أن يكتب بحروف كبيرة أو صغيرة. Small - أن يكتب الكود وفق بناء محدد كما بالشكل التالي: الهيكل الببائي لبرنامج بلغة HTML <html> <head> <Title> عنوان صفحة المعلومات </head> <body> المعلومات التي ستعرض على مستعرض الإنترنت </body> <html> تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١الأوامر Tags في لغة الترميز HTML توضع بين العلامتين: < >.
- ١حفظ كود لغة الترميز HTML:
- ٢يشترط لحفظ كود HTML في ملف مراعاة أن:
- ٣يحفظ ملف كود HTML بأي اسم يكون امتداده. أو.html.
- ٤نوع الملف نصي TEXT، ويفضل استخدام برنامج المفكرة Notepad لأنه يحفظ الملف بهذا النوع مباشرة دون اختيار منا. فظ هيكل برنامج HTML المكتوب في برنامج المفكرة (Notepad) ب. بعد حفظ الملف بالمواصفات السابقة يأخذ الملف رمز مستعرض الإنترنت المتاح على جهازك مثل: Internet Explorer أو Mozilla Firefox أو Google Chrome. الخ. تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" ناقش معلمك وزملائك عن رمز الملف في حالة وجود أكثر من مستعرض إنترنت على جهازك. نشاط (
- ١استخدام كود HTML في إنشاء صفحة ويب باسم test2.html تحت اشراف معلمك اتبع الإجراءات بكتاب الأنشطة والتدريبات صفحة ( ٣٧ ) تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١الربط بين صفحات الويب بكود لغة الترميز HTML تحت إشراف معلمك اتبع الإجراءات بكتاب الأنشطة والتدريبات (صفحة
- ٢### ثانياً: الربط من خلال أحد تطبيقات إنشاء مواقع ويب عزيزي الطالب/الطالبة، يمكنك أيضًا التعديل في صفحتي الويب والربط بينهما من خلال نص أو صورة بتوظيف تطبيق Expression Web. يمكن تحميل برنامج Expression Web لإنشاء مواقع وصفحات ويب من خلال واجهة تطبيق سهلة وبسيطة بدلاً من كتابة أكواد HTML كالتالي: ### تحميل برنامج Expression Web: - من قائمة SEO البرنامج Start الحتر البرنامج কর্ণا بالصور التالية: حميل تطبيق Expression Web تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي
- ١### "الربط بين صفحات الويب باستخدام برنامج ### "Expression Web" ### اتبع الإجراءات بكتاب الأنشطة والتدريبات ### صفحة (
- ٢### إنشاء موقع المشروع قبل إنشاء أي صفحة بالموقع لابد من إنشاء موقع للمشروع باستخدام برنامج Expression Web ثم إنشاء كافة الصفحات به كما هو مخطط. ### نشاط (
- ٣### "إنشاء موقع المشروع باستخدام تطبيق ### "Expression Web" ### اتبع الإجراءات بكتاب الأنشطة والتدريبات ### صفحة (
- ٤إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" إنشاء صفحة "Header.php" فحة "Header.php" درس الشكل السابق، وحدد الأجزاء المتكررة في جميع صفحات الموقع: تحتوي هذه الصفحة على الأجزاء المتكررة في جميع صفحات الموقع كما يتضح من الصورة السابقة وهي: الصورة في بداية كل صفحة ويطلق عليها Banner. النصوص التالية: الرئيسية - إدخال مصطلح - بحث عن مصطلح - تعديل - حذف مصطلح - مساعدة. أولية الغلسم بحث عن مصطلح خلد مصطلح سادة لاحظ: النصوص السابقة تظهر على شاشة المستعرض مجرد كلمات غير مرتبطة بصفحات الموقع أي أنها لم تصبح بعد روابط تشعبية Hyperlink. تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" وتهدف صفحة "Header.php" باختصار إلى إدراج صورة ثم كتابة بعض النصوص التي تفصل بينها مسافات، كما يتضح من شاشة الكود التالية: "Header.php" نافذة كود صفحة "Header.php" نلاحظ في الكود الذي تم إنشاؤه ما يلي: يستخدم الـ Tag التالي لإنشاء مقطع بالصفحة كما هو موضح بالشكل السابق: ```html <div> كود HTMLالخاص بهذا المقطع </div> ``` تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١اختصار يعني "Non Breakable Space" وتفيد ترك مسافة واحدة، ولترك ست مسافات بعد كلمة "الرئيسة" تم كتابتها ٦ مرات يلي كل منها ";". (
- ٢وبنفس الفكرة تستطيع عزيزي الطالب أن تكرر الكود السابق مع استبدال كلمة "رئيسة" بنص "إدخال مصطلح"، ثم نص "البحث عن مصطلح"، ثم نص "تعديل مصطلح"، ثم نص "حذف مصطلح"، ثم كلمة "مساعدة" ليصبح كل منها إرتباط تشعبي. والصفحة "Header.php"، يتم استدعاؤها بأمر واحد بسيط في بداية كل صفحة من صفحات الموقع بدلًا من تكرار الكود. تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" يمكنك إنشاء صفحة header.php باستخدام برنامج Expression Web كما يلي: إدراج صورة، وكتابة بعض النصوص تحتها، وإجراء بعض التنسيقات عليها، لتظهر بشكل مناسب. ### نشاط (
- ٣"إنشاء صفحة Header من نوع PHP في شاشة التصميم" وهو ما ستقوم بتنفيذ تحت إشراف معلمك بكتاب الأنشطة والتدريبات (صفحة
- ٤يمكن ربط كل نص أسفل صورة Banner بالصفحة الخاصة بها من خلال النشاط التالي: ### نشاط (
- ٥"إنشاء الإرتباطات التشعبية لصفحات الموقع" وهو ما ستقوم بتنفيذ تحت إشراف معلمك بكتاب الأنشطة والتدريبات (صفحة
- ٦تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١"إنشاء صفحة الاتصال بقواعد البيانات connect.php" بكتاب الأنشطة والتدريبات صفحة (
- ٢تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١يميز بين المعاملات Operator في لغة PHP.
- ٢يشرح جملة الشرط If condition في لغة PHP.
- ٣يتعرف جملة Switch في لغة PHP.
- ٤يوظف الصيغ المختلفة لجملتي الشرط If & Switch في حل المشكلات. تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" الجدول ١ قبل البدء في إنشاء صفحة إضافة مصطلح يمكن أن نستعرض معًا مفهوم المعاملات وايضًا ما هو مهم: المعاملات Operators: (
- ١"الرقم سالب" Echo Elseif ($X>
- ٢"الرقم موجب" Echo Else "الرقم يساوي صفر" Echo ``` نظرًا لأن $X=5 فقد تحقق الشرط الثاني بعد Elseif وسيتم طباعة عبارة "الرقم موجب" على شاشة مستعرض الإنترنت. ### وهناك صيغة أخرى لجملة IF ### (Expression) ? If-True : If-False; والمثال التالي يوضح استخدام الصيغة السابقة والتي يطلق عليها In Line If: ```php <?php$x = 1; // المتغير يساوي ١ y = (x ==
- ٣? 'One' : 'Two'; "One" يتم اختبار قيمة المتغير x، إذا كانت قيمته تساوي ١، يحفظ القيمة y. في المتغير y وإلا يحفظ القيمة "Two" في المتغير y. Print $y // طباعة قيمة المتغير ``` إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" نلاحظ في المثال السابق أن (Colon (:: ساعدت على كتابة أكثر من جمله في سطر واحد أدت إلى نفس النتيجة بدلاً من استخدام الأقواس { }. كاتب: جملة Switch ويمكن أيضًا استخدام جملة Switch كأحد العبارات الشرطية في لغة PHP، حيث يمكن من خلالها اختبار عدة شروط وفي كل مرة يتحقق فيها شرط ما ينفذ كود معين، والمثال التالي يوضح ذلك: ```php 1 <?php 2$x=1; 3 switch ( $x ) 4 { 5 case 1: "واحد" ; echo 6 echo "التبين" 7 break; 8 case 2: "التبين" ; echo 9 precho "تجربة" 10 break; 12 case 3: "تجربة" ; echo 13 precho "تجربة" 14 break; 16 default: "أ" ; echo 17 precho "تجربة" 18 break; 19 } 20 ?> ``` ود PHP يوضح استخدام الجملة الشرطية Switch وبتحليل الكود السابق نجد أن: - المتغير x بدأ بالقيمة ١، ثم استخدمت جملة Switch لاختبار قيمة المتغير x حيث يوجد أكثر من احتمال: - فإذا كانت قيمة المتغير تساوي ١ أي ": case 1" يطبع "واحد"، وهكذا لباقي الاحتمالات وفي آخر احتمال إذا لم تكن قيمة المتغير لا تساوي ١ أو ٢ أو ٣ أي دون ذلك يطبع "لا يوجد". تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي
- ١كتابة كود PHP: عند تحميل صفحة إدخال بيانات مصطلح على مستعرض الإنترنت، وقمت بإدخال بيانات في عناصر التحكم على صفحة المستعرض سنجد أن البيانات غير مرتبطة بقاعدة البيانات، لذا نحتاج إلى: - إظهار الصورة وعنوان صفحات الموقع في بداية الشاشة وذلك من خلال إضافة كود PHP الخاص بإدراج صفحة Header في المكان المشار إليه بالرقم (
- ٢على الشاشة السابقة بالكود التالي: ```php <?php include("header.php"); ``` ود PHP لتضمين صفحة Header: - تضمين صفحة الاتصال بقاعدة البيانات. - كتابة كود PHP المسؤل عن تخصيص البيانات التي سيتم إدخالها في عناصر التحكم على صفحة مستعرض الإنترنت في متغيرات، ثم إدراج محتوى هذه المتغيرات في حقول سجل بيانات مصطلح جديد في جدول قاعدة البيانات وفيما يلي سوف نتناول بالشرح التفصيلي كود PHP مختصر وأخر أكثر دقة واحترافية مع توضيح نواحي القصور في الكود المختصر. (
- ٣كود PHP المختصر: الغرض النهائي من كود PHP التالي إضافة مصطلح جديد كسجل Record في ملف قاعدة البيانات من خلال صفحة إدخال مصطلح التي سبق تصميمها وإنشائها على مستعرض الإنترنت، والكود المختصر التالي يحقق الغرض: ```php <?php Include('header.php'); include('connection.php'); if(isset($_POST['Submit1'])) term=_POST['txt_term']; trans=_POST['trans']; defe=_POST['TextArea1']; @file=_FILES['File1']['name']; @tmp=_FILES['File1']['tmp_name']; Move_uploaded_File(tmp,'pic/'.file); picture='pic/'. file. ''; picture('insert into terms values (”, term, trans, defe, picture')); ?> ``` تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" ونلاحظ في الكود المختصر السابق ما يلي: - تضمين صفحة.header.php. - تضمين صفحة الاتصال بقاعدة البيانات.connection.php. - التحقق من الضغط على زر Submit1 حيث يتم اختبار إن كان المستخدم قد قام بالضغط Click على زر "إضافة" فيتم تنفيذ الآتي:
- ١على الشاشة السابقة بالكود التالي: ```php <?php include("header.php"); ``` ود PHP لتضمين صفحة Header - تحقيق الاتصال بقاعدة البيانات. - التحقق من إدخال بيانات في عناصر التحكم على صفحة الويب. - تسجيل بيانات المصطلح في جدول قاعدة البيانات وذلك من خلال كود PHP المرتبط بزر "إضافة" في المكان المشار إليه بالرقم (
- ٢على الشاشة كود HTML الخاصة بتصميم صفحة إضافة مصطلح: تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" ```php 47 <?php 48 include("connection.php"); 49 if(isset($_POST['Submit1'])) 50 { 51 if(!is_dir('pic')) { mkdir('pic'); } > جملة شرطية لاختبار وجود مجلد 52 @file=_FILES['File1']['name']; 53 @tmp=_FILES['File1']['tmp_name']; 54 if(!empty(file)) { move_uploaded_file(tmp,'pic'(file); > 55 term=_POST['txt_term']; 56 trans=_POST['trans']; 57 defe=_POST['TextArea1']; 58 picture="pic/".file.""; 59 if ( term != "" && trans != "" && defe != "" && !empty(file)) { 60 { 61 mysql_query("SET NAMES 'utf8"); 62 query=mysql_query("insert into terms values(",'term','trans','defe','picture')"); 63 if($query) 64 { 65 $datares="تم إضافة البيانات بنجاح"; 66 echo("<label id="Label1" style="color: #FF0000;font-size: x-large;">$datares </label> "); 67 } 68 else 69 { 70 $datares="الميئات التي تم إتخالها غير صحيحة يجب إدخال جميع الحقول"; 71 echo("<label id="Label1" style="color: #FF0000;font-size: x-large;">$datares </label> "); 72 } 73 } 74 else 75 { 76 $datares="البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول"; 77 echo("<label id="Label1" style="color: #FF0000;font-size: x-large;">$datares </label> "); 78 } 79 } 80 ?> ``` ود PHP لإضافة مصطلح جديد تكنولوجيا المعلومات والاتصالات — الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" عزيزى الطالب تعرف الشرح التفصيلي للكود كالتالي: ```php <?php - تضمين صفحة تحقيق الاتصال بقاعدة البيانات بالكود التالي: include("connection.php"); التحقق من الضغط على زر Submit - الكود التالي يختبر إن كان المستخدم قد قام بالضغط Click على زر 'إضافة' فيتم التحقق أولا من وجود مجلد باسم "pic" وهو المخصص لوضع الصور الخاصة بالمصطلحات بداخله، فإذا لم يُنشأ هذا المجلد يتم إنشاؤه. if (isset($_POST["Submit1"])) if (!is_dir("pic")) { mkdir("pic"); } - وينفس الطريقة يمكن إنشاء مجلدات أخرى للصور أو الفيديو سواء بالكود أو من خلال نظام التشغيل في مجلد المشروع. رفع ملف الصور على Server - يخصص اسم الملف المختار من المستخدم File1 إلى المتغير$file، مع ملاحظة أن العلامة @ تسمى Pointer وتتعامل معها لغة PHP على أنها متغير، ويفيد ذلك في عدم إظهار رسالة خطأ إذا كانت قيمته فارغة. @file=_FILES["File1"] ["name"]; @tmp=_FILES["File1"] ["tmp_name"]; - اختبار إن كان اسم ملف الصورة غير محدد يتم تحميل ملف الصورة من مجلد "pic". if (!empty(file)) { move_uploaded_file(tmp, "up/."file); ``` تكنولوجيا المعلومات والاتصالات — الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" تخصيص قيم عناصر التحكم في متغيرات. - يتم تخزين البيانات التي تم إدخالها في مربعات النصوص للمصطلح الجديد على صفحة الويب في المتغيرات التالية بالترتيب (term - trans defe - picture) مع ملاحظة أن المتغير.Submit рез يخص عن الضغط على زر Event عند الضغط على `S_POST`. إذا كان الضغط على `S_POST` يخزن به قيم عناصر التحكم على النموذج Form. ``` term=_POST["txt_term"]; trans=_POST["trans"]; defe=_POST["TextArea1"]; picture="pic/". file. ""; ``` التحقق من إدخال قيم في عناصر التحكم على النموذج Form - جملة IF التالية للتأكد أن هذه المتغيرات ليست خالية أي تم إدخال قيم فيها، فإذا كان الشروط صحيحًا وجميع المتغيرات ليست خالية Null يقوم بتنفيذ الآتي: - استخدام دالة mysql_query يساعد في إظهار البيانات على صفحة الويب باللغة العربية بشكل صحيح وعدم ظهورها في صورة علامات استفهام هكذا *. if (term !== "" && trans !== "" && defe !== "" && !empty(file) ) mysql_query("SET NAMES 'utf8"); squery=mysql_query("insert into terms values (","term","trans","defe","picture"); variable متغير Function دالة Table الجدول القيم المُدخَلَة المتغيرات - تم إنشاء متغير $query بحيث يخصص له قيمة تنفيذ الدالة mysql_query التي تحتوي على جملة insert الخاصة بلغة SQL، والتي تقوم بإدخال البيانات التي تم تخزينها في المتغيرات إلى الحقول المناظرة لها في جدول قاعدة البيانات "terms". - ثم يتم التأكد من إدخال البيانات في جدول قاعدة البيانات if($query) فإذا تم ذلك ظهرت الرسالة "تم إضافة البيانات بنجاح"، وإلا تظهر الرسالة "لم يتم إضافة البيانات". تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" إشاعا عز الله if ($query)$datares="تم إضافة البيانات بنجاح"; echo("<label id="Label1" style="color: #FF0000;font-size: x-large;"> $datares </label>" ?); } else$datares="لم يتم إضافة البيانات"; echo("<label id="Label1" style="color: #FF0000;font-size: x-large;"> $datares </label>" ?); } else - في حالة عدم إدخال بيانات لجميع الحقول أو بعضها يطبع الرسالة 'البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول'.$datares="البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول"; echo("<label id="Label1" style="color: #FF0000;font-size: x-large;"> $datares </label> "); تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي</label> إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور"
- ١"إنشاء صفحة إدخال مصطلح 'Add_term.php" عزيزي الطالب/الطالبة، الآن يمكنك استخدام صفحة الويب كواجهة للتعامل مع جدول قاعدة البيانات لإضافة مصطلح جديد، وإجراء عمليات أخرى، وذلك من خلال تنفيذ نشاط (
- ٢بكتاب الأنشطة والتدريبات. صفحة (
- ٣تنفيذ صفحة إدخال مصطلح عند استعراض صفحة إدخال مصطلح على مستعرض الإنترنت تظهر كما يلي، وذلك من خلال العنوان: ``` $$localhost/dictionary/add_term.php$$ ``` افذة استعراض صفحة إدخال مصطلح - في حالة عدم إدخال بيانات والضغط على زر 'إضافة'، يطبع الرسالة 'البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول' أسفل شاشة المستعرض كما يلي: تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" افذة استعراض صفحة إدخال مصطلح غير مكتمل البيانات - عند إدخال جميع بيانات المصطلح كما يلي: افذة إدخال مصطلح تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" - وبالضغط على زر "إضافة" تظهر الرسالة "تم إضافة البيانات بنجاح" أسفل شاشة المستعرض. افذة التأكد من إدخال مصطلح بشكل صحيح تذكر: في الكود المختصر لا يظهر أي رسائل تفيد إضافة سجل جديد من عدمه في جدول قاعدة البيانات.
- ١التأكد من إضافة المصطلح إلى قاعدة البيانات وللتأكد من أنه تم إضافة البيانات في سجل جديد في قاعدة البيانات، نفتح قاعدة البيانات في تبويب جديد لمستعرض الإنترنت بكتابة الرابط التالي "localhost/phpmyadmin" في شريط العنوان ونتأكد من إضافة سجل جديد في جدول "terms": افذة التأكد من إضافة المصطلح في جدول قاعدة البيانات تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي تكنولوجيا المعلومات والاتصالات – الصف الثاني الثانوي
- 🔹 عملية الربط بين جداول
- 🧬 محليًا
- 🧪 على الإنترنت
- 📐 ملاحظة: