كيف يعمل الويب من جهة الخادم؟

١الواجهة الأمامية والواجهة الخلفية

في مقرر 131 بنيت الواجهة الأمامية Front-end: ما يراه المستخدم ويتفاعل معه في المتصفح. لكن أغلب المواقع تحتاج جزءًا آخر لا يراه أحد: الواجهة الخلفية Back-end، وهي برنامج يعمل على جهاز بعيد اسمه الخادم Server.

فكّر في مطعم: الصالة والقائمة والنادل هي الواجهة الأمامية، والمطبخ هو الواجهة الخلفية. الزبون لا يدخل المطبخ، بل يطلب، فيُحضَّر الطلب في الداخل ويصله جاهزًا.

لماذا لا نضع كل شيء في المتصفح؟ لأن ما في المتصفح يستطيع المستخدم قراءته وتغييره. فالتحقق من كلمة المرور، أو حساب سعر الطلب، أو حفظ بيانات كل المستخدمين، يجب أن يتم في مكان موثوق: الخادم.

٢رحلة الطلب: العميل والخادم

كل صفحة تفتحها هي حوار قصير بين طرفين: العميل Client (المتصفح) يرسل طلبًا Request، والخادم يرد بـاستجابة Response. هذا هو نموذج العميل والخادم.

1. تكتب العنوان http://localhost/hello.php أو تضغط رابطًا أو ترسل نموذجًا، فيرسل المتصفح طلب HTTP.
2. يستقبل برنامج الخادم (مثل Apache) الطلب، ويجد الملف hello.php، فيسلّمه لـ PHP ليشغّله.
3. كود PHP يقرأ ما في الطلب، وقد يسأل قاعدة البيانات، ثم يطبع صفحة HTML.
4. يعيد الخادم ما طبعه الكود في استجابة HTTP، فيعرضها المتصفح كأي صفحة عادية.

٣شكل طلب HTTP

الطلب رسالة نصية بسيطة. هذا ما يرسله المتصفح فعلًا حين تفتح hello.php?name=سعود:

GET /hello.php?name=سعود HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 10.0) Chrome/130
Accept: text/html
Accept-Language: ar

وأشهر طريقتين ستستخدمهما في المقرر كله:

٤شكل استجابة HTTP

ويرد الخادم برسالة لها الشكل نفسه تقريبًا: سطر الحالة، ثم الترويسات، ثم سطر فارغ، ثم الجسم (محتوى الصفحة):

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 61
 
<h1>أهلًا يا سعود</h1><p>وصل طلبك بالطريقة: GET</p>

أهم ما في الاستجابة رمز الحالة Status code: رقم من ثلاث خانات يلخّص النتيجة، وأول خانة تحدد عائلته:

٥صفحة ثابتة أم صفحة ديناميكية؟

ملف about.html ثابت Static: يرسله الخادم كما هو لكل زائر. أما ملف PHP فهو ديناميكي Dynamic: يشغّله الخادم مع كل طلب، فقد يبني صفحة مختلفة لكل زائر.

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

<?php// hello.php: صفحة واحدة، وردود مختلفة حسب الطلب$name = $_GET['name'] ?? 'زائر';echo "<h1>أهلًا يا $name</h1>";echo "<p>وصل طلبك بالطريقة: " . $_SERVER['REQUEST_METHOD'] . "</p>";

والأهم: افتح تبويب 📄 المصدر في أي استجابة. لن تجد فيها $name ولا echo، بل HTML فقط. فكود PHP يبقى على الخادم، ولا يصل للمتصفح إلا ناتجه.

٦حلّل قبل أن تبرمج: ما الطلبات التي يحتاجها التطبيق؟

قبل كتابة أي كود في الواجهة الخلفية، اسأل: ما الوظائف المطلوبة؟ وكل وظيفة تتحول إلى طلب يصل الخادم. مثال: «صفحة تسجيل في دورة تدريبية؛ يملأ المتدرب نموذجًا، ثم يرى رسالة تأكيد. ويستطيع المشرف رؤية قائمة المسجلين».

لاحظ القاعدة: الجلب والعرض والبحث بـ GET، وإرسال بيانات جديدة بـ POST. هذا الجدول البسيط هو أول وثيقة تصميم لأي واجهة خلفية.

٧تعرّف على مختبر الخادم

في هذا المقرر لن تحتاج تثبيت أي شيء لتجرّب: كل مثال فيه زر ✏️ جرّب وعدّل يفتح مختبر الخادم، وهو PHP 8.2 حقيقي يعمل داخل متصفحك. وفي المختبر:

• 🌐 المتصفح: متصفح مصغّر تكتب فيه العنوان. الروابط والنماذج داخله تعمل وترسل طلبات حقيقية لخادمك.
• 📮 طلب يدوي: تختار الطريقة وتكتب الرابط وجسم الطلب بنفسك، مثل أداة Postman التي يستخدمها المطوّرون.
• 🍪 الكوكيز و📜 السجل: ترى ما يحفظه المتصفح، وكل طلب أُرسل واستجابته (الدرس 8).