أهداف التعلم

• أن تعد ملفات ومجلدات المشروع، وتحدد وظيفة كل صفحة في الموقع.
• أن تتعرف لغة الترميز HTML، وتنشئ صفحة ويب بكودها، وتربط بين صفحتين.
• أن تشرح مكونات الشاشة الرئيسة لبرنامج Expression Web، وتوظفه في الربط بين صفحات الموقع.
• أن تتعرف لغة البرمجة PHP: المتغيرات والثوابت وأنواع البيانات وأوامر الطباعة.
• أن تنشئ صفحة الرأس Header.php وصفحة الاتصال بقاعدة البيانات.

شرح الدرس

أولًا: إعداد ملفات ومجلدات المشروع

• ننشئ مجلدًا للمشروع باسم Dictionary داخل المجلد htdocs في حزمة XAMPP، ونضع بداخله مجلدات فرعية لتصنيف الملفات (مثل مجلد الصور images ومجلد صور المصطلحات pic).
• صفحات الموقع:

ثانيًا: لغة الترميز HTML

HTML لغة ترميز تُستخدم في إنشاء صفحات ويب ثابتة تُحفظ بامتداد .htm أو .html، ويعرضها أي مستعرض إنترنت ويترجم أكوادها.

خصائص HTML:

• الأوامر (Tags) توضع بين العلامتين < >.
• معظم الأوامر لها بداية (فتح) <...> ونهاية (إغلاق) </...>.
• يبدأ الكود بـ <html> وينتهي بـ </html>.

حفظ كود HTML: يُحفظ بأي اسم امتداده .htm أو .html، ويكون نوع الملف نصيًا (Text)، ويفضل استخدام برنامج المفكرة (Notepad).

مثال (test1.html):

<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <p align="center">مرحبًا بك في قاموس مصطلحات الكمبيوتر</p>
  <img src="images/pc.jpg" width="200" height="150">
  <a href="test2.html">انتقل إلى الصفحة الثانية</a>
</body>
</html>

ويُكتب النص في <body> افتراضيًا من اليسار؛ لأنه الاتجاه الافتراضي للكتابة على شاشة المستعرض.

ثالثًا: برنامج Expression Web

برنامج Microsoft Expression Web 4 ينشئ مواقع وصفحات ويب من خلال واجهة سهلة بدلًا من كتابة أكواد HTML يدويًا، ويمكن من خلاله إدراج النصوص والصور والربط بين الصفحات.

مكونات الشاشة الرئيسة:

وتتميز هذه التطبيقات بخاصية WYSIWYG (What You See Is What You Get)؛ أي ما تراه أثناء التصميم هو ما يظهر في المستعرض.

رابعًا: صفحة الرأس Header.php

تحتوي على الأجزاء المتكررة في جميع صفحات الموقع: صورة Banner في أعلى كل صفحة، وتحتها أسماء الصفحات (الرئيسة – إدخال مصطلح – بحث عن مصطلح – تعديل – حذف مصطلح – مساعدة) مرتبطة بصفحاتها.

<div>
  <img src="images/banner.jpg" width="900" height="150">
</div>
<div align="right">
  <a href="index.php">الرئيسة</a>&nbsp;&nbsp;
  <a href="Add_term.php">إدخال مصطلح</a>&nbsp;&nbsp;
  <a href="Search_term.php">بحث عن مصطلح</a>&nbsp;&nbsp;
  <a href="Help.php">مساعدة</a>
</div>

• الوسم <div> ينشئ مقطعًا (قسمًا) في الصفحة.
•   اختصار Non-Breaking Space، ويترك مسافة واحدة.
• نضمّن صفحة الرأس في كل صفحة بالأمر <?php include("Header.php"); ?>؛ فإذا عدلناها تغير الرأس في كل الصفحات.

خامسًا: لغة PHP

يُكتب كود PHP بين <?php و?>، ويُنفذ على جهاز الخادم، وتنتهي كل جملة بفاصلة منقوطة ;، ويُحفظ الملف بامتداد .php.

المتغيرات: مخازن في الذاكرة تتغير قيمها أثناء التنفيذ.

• يبدأ اسم المتغير بالعلامة $ مثل $user_name و$A123 و$Password.
• يفضل أن يكون الاسم معبرًا عن محتواه، وعلامة التخصيص هي =.
• لا نعلن عن نوع المتغير؛ فاللغة تحدده من القيمة المخصصة له.
• المتغيرات والثوابت حساسة لحالة الأحرف؛ فـ $Name غير $name.

الطباعة: نستخدم echo أو print، ونجمع بين أكثر من نص أو متغير بالنقطة .:

<?php
$name = "Mohamed";
echo "my name is $name";      // علامتا تنصيص مزدوجتان: تطبع my name is Mohamed
echo 'my name is $name';      // علامتا تنصيص مفردتان: تطبع my name is $name
echo "my name is " . $name;   // النقطة تربط النص بقيمة المتغير
?>

أنواع البيانات:

والدالة gettype() تطبع نوع المتغير؛ فإذا لم نخصص للمتغير قيمة كان نوعه NULL (فارغ):

<?php
$U_name = "Ali";
echo gettype($U_name);   // string
$price = 1.23;
echo gettype($price);    // double
?>

الثوابت: مخازن في الذاكرة لها اسم وقيمة ثابتة لا تتغير أثناء التنفيذ، وتُعرَّف بالدالة define:

<?php
define('name', 'Mohamed');
echo name;   // تطبع Mohamed (بدون علامة $)
?>

وفي الإصدارات القديمة من PHP كان يمكن جعل الثابت غير حساس لحالة الأحرف بإضافة true معاملًا ثالثًا: define('Constant Name', Value, true);، وقد أُلغيت هذه الإمكانية في الإصدارات الحديثة.

سادسًا: صفحة الاتصال بقاعدة البيانات

تُستدعى في بداية كل صفحة تقوم بعملية على قاعدة البيانات (إضافة أو بحث أو تعديل أو حذف). وللاتصال أربعة متطلبات أساسية: اسم جهاز الخادم، واسم المستخدم، وكلمة المرور، واسم قاعدة البيانات.

<?php
$server   = "localhost";     // اسم جهاز الخادم المضيف لقاعدة البيانات
$username = "root";          // اسم المستخدم
$password = "";              // كلمة المرور
$database = "dbdictionary";  // اسم قاعدة البيانات
$connect = mysqli_connect($server, $username, $password, $database)
    or die("لم يتم الاتصال بقاعدة البيانات");
?>

• إذا نجح الاتصال كانت قيمة $connect صحيحة (True)، وإلا تنفذ die فتعرض رسالة الخطأ وتوقف الصفحة.
• في الكتاب المدرسي تُكتب الدالتان القديمتان mysql_connect ثم mysql_select_db لاختيار قاعدة البيانات؛ وقد حُذفتا من PHP بدءًا من الإصدار 7، فتؤدي mysqli_connect العمل نفسه وتستقبل اسم القاعدة معاملًا رابعًا.

للاستزادة (إثراء خارج الكتاب): المصفوفات والحلقات

• المصفوفة تخزن عدة قيم في متغير واحد: $terms = ["المعالج", "الذاكرة"]; ونصل إلى العنصر الأول بـ $terms[0].
• المصفوفة الترابطية تستخدم أسماء (مفاتيح) بدل الأرقام: $term = ["ar" => "المعالج", "en" => "Processor"];.
• الحلقة foreach تمر على كل عنصر في المصفوفة، ومع قاعدة البيانات نستخدم while مع mysqli_fetch_assoc() لعرض الصفوف.
• require يوقف الصفحة إذا لم يجد الملف، بينما include يعرض تحذيرًا ويكمل.
• التعليق من سطر واحد يبدأ بـ //.

أسئلة للتدريب

1. اذكر وظيفة كل من الصفحات: Add_term.php، Search_term.php، Header.php، Connection.php.
2. اذكر خصائص لغة HTML، واكتب الهيكل العام لصفحة ويب.
3. اشرح وظيفة: <p align="center">، <img src>، <a href>،  .
4. عدد مكونات الشاشة الرئيسة لبرنامج Expression Web.
5. ما قواعد تسمية المتغيرات في PHP؟ وما الفرق بين المتغير والثابت؟
6. ما ناتج echo 'my name is $name'; وما ناتج echo "my name is $name"; إذا كانت $name = "Mohamed"؟
7. اذكر أنواع البيانات في PHP مع مثال لكل منها.
8. ما المتطلبات الأربعة للاتصال بقاعدة البيانات؟