الحاسب الآلي · الصف الثاني الثانوي · الترم الأول
مدخل معرفي للمشروع
مدخل معرفي لمشروع قاموس المصطلحات: البرامج المجانية ومفتوحة المصدر، والصفحة الساكنة والديناميكية، والخادم وأنواعه، ولغات العميل والخادم، وPHP وApache وSQL، وحزمة XAMPP، وطرق النشر، ومراحل إنتاج المشروع.
آخر تحديث: · كيف نراجع المحتوى
مقدمة
- الشعبة: مشترك (كل المسارات)
- الوحدة: الوحدة الأولى: أساسيات تصميم مواقع الويب
- الموضوع: الأول
يقوم منهج هذا الترم على مشروع واحد متكامل: بناء موقع ويب لقاموس مصطلحات الكمبيوتر المصور، يعرض المصطلحات مع شرحها وصورها، ويسمح بإضافة مصطلحات جديدة. قبل أن نبدأ البناء، نحتاج إلى فهم المفاهيم الأساسية التي يقوم عليها أي موقع ويب ديناميكي.
أهداف التعلم
- أن تتعرف المفاهيم والمصطلحات الأساسية لإنشاء موقع ويب يتعامل مع قواعد البيانات.
- أن تميز صفحة الويب الساكنة من صفحة الويب الديناميكية.
- أن تفرق بين لغات جهاز العميل ولغات جهاز الخادم، وتشرح العلاقة بينهما.
- أن تتعرف حزم برامج وتطبيقات الويب، وتعد جهاز الكمبيوتر ليعمل خادمًا محليًا.
- أن ترتب مراحل إنتاج مشروع موقع ويب.
شرح الدرس
مصطلحات أساسية للمشروع
| المصطلح | معناه |
|---|---|
| البرامج المجانية (Freeware) | برامج يسمح مالكها باستخدامها دون مقابل مادي أو إذن كتابي منه |
| البرامج مفتوحة المصدر (Open Source) | برامج منشورة يُسمح لمستخدميها بالاطلاع على الكود وتعديله وتطويره حسب احتياجاتهم، وإعادة نشرها بعد التعديل |
| صفحة الويب الساكنة (Static Web Page) | صفحة تُحفظ بامتداد .htm أو .html، تعرض نصوصًا وصورًا وفيديو وروابط، ولا تتيح إجراء معالجة لمحتواها |
| صفحة الويب الديناميكية (Dynamic Web Page) | صفحة تُكتب بلغة مثل PHP أو ASP.net، تحتوي على كود يُنفذ على جهاز الخادم، مثل التحقق من اسم المستخدم وكلمة المرور أو التعامل مع قاعدة بيانات؛ ويمكن أحيانًا معرفة نوع الصفحة من امتدادها في عنوان الموقع (مثل .aspx أو .php) |
| سكريبت (Script) | كود يُكتب بإحدى لغات البرمجة المخصصة لصفحات الويب لإجراء مهمة أو معالجة على بعض البيانات |
| لغة PHP (Personal Home Page) | لغة مجانية مفتوحة المصدر لتطوير المواقع الديناميكية، سهلة وسريعة، تعمل على الخادم، ويُضمَّن كودها داخل HTML، وتتصل بسهولة بقواعد البيانات، وتُحفظ صفحاتها بامتداد .php |
| برنامج Apache Server | يحاكي جهازك الشخصي ليقوم بدور جهاز خادم يترجم كود PHP، فيختبر المطور صفحات الموقع محليًا قبل رفعها |
| لغة SQL (Structured Query Language) | لغة لإدارة قواعد البيانات، من أوامرها: INSERT للإضافة، وSELECT للاستعراض، وUPDATE للتعديل، وDELETE للحذف |
| MySQL Server | أحد تطبيقات نظم إدارة قواعد البيانات ذات العلاقات (RDBMS) |
| الجلسة (Session) | طريقة لتخزين معلومات عن زائر الموقع (مثل اسم المستخدم وكلمة المرور) لإتاحتها عبر صفحات الموقع |
الخادم (Server) له معنيان: جهاز (Hardware) بمواصفات عالية يتحكم في باقي أجهزة الشبكة وصلاحيات مستخدميها، أو دور (Software) يقوم به جهاز في الشبكة، مثل:
- خادم الويب (Web Server): الجهاز المخزن عليه صفحات موقع الويب.
- خادم الطابعة (Print Server): الجهاز المتصلة به الطابعة، يتحكم في إدارة أوامر الطباعة من أجهزة الشبكة.
- خادم البريد الإلكتروني (Mail Server): الجهاز المخزن عليه رسائل البريد الإلكتروني.
لغات البرمجة لصفحات الويب:
| لغات تُنفذ على جهاز العميل (Client Side) | لغات تُنفذ على جهاز الخادم (Server Side) |
|---|---|
| مثل Java Script وVB Script | مثل PHP وASP وASP.net |
| تُنفذ داخل المستعرض (Run at Client) | تُنفذ داخل الخادم (Run at Server) |
| مثال: التأكد من عدم ترك حقل اسم المستخدم خاليًا | مثال: التأكد من صحة اسم المستخدم وكلمة المرور الموجودة في قاعدة البيانات |
طريقتا نشر موقع ويب:
- محليًا (Localhost): يُعرض الموقع على جهاز الكمبيوتر الخاص بنا أو في شبكة محلية (LAN).
- على الإنترنت (Web Publishing): يُرفع الموقع على جهاز خادم يسمى الجهاز المضيف (Hosting)، فيزوره المستخدمون من خلال عنوانه.
حزم تطبيقات الويب (Web Server Packages): تحتوي أساسًا على خادم الويب Apache ونظام لإدارة قواعد البيانات MySQL، ومنها حزمة XAMPP: الحرف X يعني أنها تعمل على أي نظام تشغيل، وA تعني Apache، وM تعني MySQL، وP تعني PHP، وP تعني Perl. ومن الحزم الأخرى LAMP (Linux – Apache – MySQL – PHP). وكلها تضم خادم الويب Apache، وقاعدة البيانات MySQL، ومترجم لغة البرمجة PHP.
الموقع الثابت والموقع الديناميكي
| الموقع الثابت (Static) | الموقع الديناميكي (Dynamic) |
|---|---|
| صفحات HTML جاهزة لا يتغير محتواها إلا بتعديل الملف يدويًا | صفحات يُولَّد محتواها عند الطلب من قاعدة بيانات |
| لا يتفاعل مع بيانات المستخدم غالبًا | يستقبل بيانات من المستخدم ويحفظها ويعرضها |
| مثال: صفحة تعريف بمدرسة | مثال: قاموس يضيف إليه المستخدمون مصطلحات |
قاموس المصطلحات موقع ديناميكي، لأن المصطلحات تُخزن في قاعدة بيانات وتُعرض وتُضاف عبر صفحات الموقع.
العميل والخادم
- العميل (Client): المتصفح على جهاز المستخدم، يطلب الصفحة ويعرضها.
- الخادم (Server): جهاز يستقبل الطلب، ويشغّل كود PHP، ويتواصل مع قاعدة البيانات، ثم يرسل صفحة HTML الناتجة إلى المتصفح.
خطوات الطلب:
- يكتب المستخدم عنوان الصفحة أو يضغط رابطًا.
- يرسل المتصفح طلبًا إلى الخادم.
- ينفذ الخادم كود PHP، ويجلب البيانات من MySQL.
- يرسل الخادم صفحة HTML جاهزة.
- يعرض المتصفح الصفحة.
أدوات المشروع
| الأداة | دورها |
|---|---|
| HTML | بناء هيكل الصفحة: العناوين والفقرات والصور والنماذج |
| CSS | تنسيق الشكل: الألوان والخطوط والتخطيط |
| PHP | لغة برمجة تعمل على الخادم لمعالجة البيانات وتوليد الصفحات |
| MySQL | نظام إدارة قواعد بيانات لتخزين المصطلحات |
بيئة التشغيل المحلية
للتدرب دون استضافة على الإنترنت نستخدم حزمة تشغيل محلية تجمع خادم ويب مثل Apache، وPHP، وMySQL على جهاز واحد، مثل حزم XAMPP أو ما يماثلها. وتوضع ملفات الموقع في المجلد المخصص للخادم، ونفتحها من المتصفح عبر العنوان http://localhost/.
مراحل إنتاج المشروع
- التخطيط: تحديد الهدف والجمهور والمحتوى والصفحات.
- التصميم: رسم شكل الصفحات وتنسيقها.
- إنشاء قاعدة البيانات وجداولها.
- البرمجة: كتابة صفحات HTML وPHP.
- الاختبار وتصحيح الأخطاء.
- النشر على خادم حقيقي والصيانة المستمرة.
أمثلة وتطبيقات
مثال لصفحة PHP بسيطة:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<body>
<h1>قاموس مصطلحات الكمبيوتر</h1>
<p>تاريخ اليوم: <?php echo date("Y-m-d"); ?></p>
</body>
</html>يرى المستخدم في المتصفح التاريخ الفعلي، لأن الخادم نفذ الجزء المكتوب بين <?php و?> قبل إرسال الصفحة.
ملاحظات مهمة
- ملفات PHP لا تعمل بفتحها مباشرة من المجلد؛ يجب فتحها عبر الخادم (
localhost). - المستخدم لا يرى كود PHP أبدًا، بل يرى ناتجه فقط.
المفاهيم الأساسية
- البرامج المجانية تُستخدم بلا مقابل، ومفتوحة المصدر يُتاح كودها للتعديل.
- الصفحة الساكنة (html) بلا معالجة، والديناميكية (php) تنفذ كودًا على الخادم.
- لغات العميل مثل Java Script، ولغات الخادم مثل PHP وASP.
- XAMPP حزمة تضم Apache وMySQL وPHP وPerl.
- النشر محليًا (Localhost) أو على الإنترنت (Web Publishing).
- العميل يطلب ويعرض، والخادم ينفذ ويرسل.
- HTML للهيكل، وCSS للتنسيق، وPHP للمعالجة، وMySQL للتخزين.
- مراحل المشروع: تخطيط، وتصميم، وقاعدة بيانات، وبرمجة، واختبار، ونشر.
ملخص الدرس
مشروع قاموس المصطلحات موقع ديناميكي يعمل بنموذج العميل والخادم: المتصفح يطلب الصفحة، والخادم ينفذ كود PHP ويتعامل مع قاعدة بيانات MySQL ثم يرسل صفحة HTML منسقة بـ CSS. ونتدرب على المشروع في بيئة تشغيل محلية بحزمة مثل XAMPP التي تضم Apache وMySQL وPHP، ثم يمكن نشره على الإنترنت، ونمر بمراحل التخطيط والتصميم وإنشاء قاعدة البيانات والبرمجة والاختبار والنشر.
أسئلة للتدريب
- فرّق بين الموقع الثابت والموقع الديناميكي بمثال.
- رتب خطوات طلب صفحة PHP من الخادم.
- ما دور كل من PHP وMySQL في المشروع؟
- لماذا نحتاج إلى بيئة تشغيل محلية؟
- لماذا لا يرى المستخدم كود PHP في المتصفح؟
- فرق بين البرامج المجانية والبرامج مفتوحة المصدر.
- قارن بين لغات جهاز العميل ولغات جهاز الخادم مع مثال لكل منهما.
- ما مكونات حزمة XAMPP؟ وما طريقتا نشر موقع الويب؟