Skip to content

2. أساسيات برمجة الويب

يهدف هذا الفصل بشكل أساسي إلى تعريف القارئ بالمبادئ العامة لبرمجة الويب التي لا تعتمد على تقنية معينة لتنفيذها. ويقدم العديد من الأمثلة التي يُنصح بتجربتها من أجل "الانغماس" تدريجيًا في فلسفة تطوير الويب. يمكن للقارئ الذي يمتلك هذه المعرفة بالفعل الانتقال مباشرة إلى الفصل التالي.

مكونات تطبيق الويب هي التالية:

Image

رقم
الدور
أمثلة شائعة
1
OS الخادم
Unix، Linux، Windows
2
خادم الويب
أباتشي (يونكس، لينكس، ويندوز)
IIS (ويندوز + منصة .NET)
Node.js (Unix، Linux، Windows)
3
رموز يتم تنفيذها على جانب الخادم. يمكن تنفيذها بواسطة وحدات الخادم أو بواسطة برامج خارجية (CGI).
JAVASCRIPT (Node.js)
PHP (أباتشي، IIS)
JAVA (Tomcat، Websphere، JBoss، Weblogic، ...)
C#، VB.NET (IIS)
4
قاعدة البيانات - يمكن أن تكون على نفس الجهاز الذي يعمل عليه البرنامج أو على جهاز آخر عبر الإنترنت.
Oracle (Linux، Windows)
MySQL (Linux، Windows)
Postgres (Linux، Windows)
SQL Server (ويندوز)
5
OS العميل
Unix، Linux، Windows
6
متصفح الويب
Chrome، Internet Explorer، Firefox، Opera، Safari، ...
7
نصوص برمجية يتم تنفيذها على جانب العميل داخل المتصفح. لا تتمتع هذه النصوص البرمجية بأي وصول إلى أقراص جهاز العميل.
جافا سكريبت (جميع المتصفحات)

2.1. تبادل البيانات في تطبيق ويب باستخدام نموذج

Image

رقم
الدور
1
يطلب المتصفح URL للمرة الأولى (http://machine/url). لم يتم تمرير أي معلمة.
2
يرسل له خادم الويب صفحة الويب الخاصة بـ URL. قد تكون هذه الصفحة ثابتة أو مولدة ديناميكيًا بواسطة برنامج نصي للخادم (SA) الذي قد يكون استخدم محتوى قواعد البيانات (SB، SC). هنا، سيكتشف البرنامج النصي أن URL قد طُلب دون تمرير معلمات وسيقوم بإنشاء صفحة الويب الأولية.
يتلقى المتصفح الصفحة ويعرضها (CA). تمكنت البرامج النصية على جانب المتصفح (CB) من تعديل الصفحة الأولية المرسلة من الخادم. بعد ذلك، من خلال التفاعلات بين المستخدم (CD) والبرامج النصية (CB)، سيتم تعديل صفحة الويب. سيتم ملء النماذج على وجه الخصوص.
3
يقوم المستخدم بالتحقق من صحة بيانات النموذج التي يجب إرسالها بعد ذلك إلى خادم الويب. يطلب المتصفح الصفحة الأولية URL أو صفحة أخرى حسب الحالة، ويقوم في الوقت نفسه بإرسال قيم النموذج إلى الخادم. ويمكنه استخدام طريقتين لهذا الغرض، هما GET و POST. عند استلام طلب العميل، يقوم الخادم بتشغيل البرنامج النصي (SA) المرتبط بـ URL المطلوب، وهو البرنامج النصي الذي سيكتشف المعلمات ويعالجها.
4
يقوم الخادم بتسليم صفحة الويب التي تم إنشاؤها بواسطة البرنامج (SA، SB، SC). هذه الخطوة مطابقة للخطوة 2 السابقة. ويتم التبادل الآن وفقًا للخطوتين 2 و3.

2.2. صفحات الويب الثابتة، صفحات الويب الديناميكية

يتم تمثيل الصفحة الثابتة بملف HTML. أما الصفحة الديناميكية فهي صفحة HTML يتم إنشاؤها "على الفور" بواسطة خادم الويب.

2.2.1. صفحة ثابتة HTML (لغة ترميز HyperText)

لنقم بإنشاء أول مشروع ويب باستخدام Visual Studio Express 2012. نستخدم الخيار [Fichier / Nouveau projet]:

  • في [1]، نحدد أننا نريد إنشاء تطبيق ASP.NET فارغ؛
  • في [2]، اسم حل Visual Studio. ستكون جميع الأمثلة في هذا المستند ضمن نفس الحل؛
  • في [3]، المجلد الأصلي للمشروع الذي سيتم إنشاؤه؛
  • في [4]، اسم المشروع.

نضغط على "تأكيد".

يتم عرض المشروع الناتج في [5]. سنستخدمه لتوضيح المبادئ الأساسية للبرمجة على الويب.

لنبدأ بإنشاء صفحة ثابتة HTML:

  • في [1]، انقر بزر الماوس الأيمن على المشروع ثم اتبع الخيارات؛
  • في [2]، قم بتسمية الصفحة؛
  • إلى [3]، تمت إضافة الصفحة.

محتوى الصفحة التي تم إنشاؤها هو كما يلي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

</body>
</html>
  • الأسطر 2-10: يحد العلامة الجذرية <html> الرمز؛
  • الأسطر 3-6: تحدد العلامة <head> ما يُسمى برأس الصفحة؛
  • الأسطر 7-9: تحدد العلامة <body> ما يُسمى بجسم الصفحة.

لنعدل هذا الكود على النحو التالي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>
  • السطر 5: يحدد عنوان الصفحة – سيظهر كعنوان نافذة المتصفح التي تعرض الصفحة؛
  • السطر 8: نص بخط كبير (<h1>).

دعونا نعرض هذه الصفحة في متصفح:

  • في [1]، نطلب عرض الصفحة؛
  • في [2]، URL للصفحة المعروضة؛
  • في [3]، عنوان النافذة – تم توفيره بواسطة العلامة <title> للصفحة؛
  • في [4]، نص الصفحة - تم توفيره بواسطة العلامة <h1>.

لنلقِ نظرة على [1]، وهو الرمز HTML الذي تلقّاه المتصفح:

  • في [2]، تلقى المتصفح الصفحة HTML التي قمنا بإنشائها. وقام بتفسيرها وتحويلها إلى عرض رسومي.

2.2.2. صفحة ASP.NET

لنقم الآن بإنشاء صفحة ASP.NET. إنها صفحة HTML يمكن أن تحتوي على كود يتم تنفيذه على جانب الخادم ويقوم بإنشاء أجزاء معينة من الصفحة. نتبع نهجًا مشابهًا لإنشاء الصفحة HTML:

  • في [1]، يتم استدعاء صفحة ASP.NET بـ [Web Form]؛
  • إلى [2]، يتم تسمية الصفحة الجديدة؛
  • في [3]، تم إنشاء الصفحة.

رمز الصفحة التي تم إنشاؤها هو التالي:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

نجد علامات HTML سبق أن صادفناها. العلامات التي تحتوي على السمة [runat= "server "] هي علامات سيتم معالجتها بواسطة الخادم وتحويلها إلى علامات HTML خالصة. لذا، ما نراه أعلاه ليس كما في حالة الصفحة الثابتة السابقة، حيث سيستقبل المتصفح الكود HTML. نحن نتحدث هنا عن صفحة ديناميكية: يتم إنتاج التدفق HTML المرسل إلى الخادم بواسطة كود يتم تنفيذه على جانب الخادم. لنقم بتعديل الصفحة على النحو التالي:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>
  • السطر 8: نضع عنوانًا للصفحة؛
  • السطر 13: نعرض نصًا تم إنشاؤه بواسطة كود C#. يقع هذا الكود بين العلامتين <% %>. يعرض كود C# هذا الوقت الحالي بالصيغة ساعات:دقائق:ثوانٍ.

دعونا نعرض هذه الصفحة في متصفح:

  • في [1]، نطلب عرض الصفحة؛
  • في [2]، URL للصفحة المعروضة؛
  • في [3]، عنوان النافذة – تم توفيره بواسطة العلامة <title> للصفحة؛
  • في [4]، نص الصفحة - تم توفيره بواسطة العلامة <h1>.

إذا قمنا بتحديث الصفحة (F5)، نحصل على عرض آخر (وقت جديد) بينما لا يتغير URL. هذا هو الجانب الديناميكي للصفحة: يمكن أن يتغير محتواها بمرور الوقت. لنلقِ نظرة الآن على الكود HTML الذي تلقّاه المتصفح:

  • في [1]، يمكننا عرض كود المصدر للصفحة؛
  • في [2]: هذه المرة، الرمز HTML الذي تم استلامه ليس هو الذي قمنا بإنشائه، بل هو الذي تم إنشاؤه بواسطة خادم الويب استنادًا إلى المعلومات الموجودة في صفحتنا ASP.NET.

2.2.3. خلاصة

يمكننا أن نستخلص من ما سبق أن هناك اختلافًا جوهريًا بين الصفحات الديناميكية والصفحات الثابتة.

2.3. البرامج النصية على جانب المتصفح

يمكن أن تحتوي الصفحة HTML على نصوص برمجية يتم تنفيذها بواسطة المتصفح. لغة البرمجة النصية الرئيسية على جانب المتصفح هي حاليًا (سبتمبر 2013) جافا سكريبت. تم إنشاء مئات المكتبات باستخدام هذه اللغة لتسهيل عمل المطور.

لنقم بإنشاء صفحة جديدة HTML [1] في المشروع الذي تم إنشاؤه مسبقًا:

لنقوم بتحرير الملف [HtmlPage2.html] بالمحتوى التالي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>
  • السطر 13: يحدد زرًا (السمة type) بالنص "انقر عليّ" (السمة value). عند النقر عليه، يتم تنفيذ وظيفة جافا سكريبت [réagir] (السمة onclick)؛
  • الأسطر 6-10: نص برمجي جافا سكريبت؛
  • الأسطر 7-9: الدالة [réagir]؛
  • السطر 8: يعرض مربع حوار مع الرسالة [Vous avez cliqué sur le bouton].

دعونا نعرض الصفحة في متصفح:

  • في [1]، الصفحة المعروضة؛
  • في [2]، مربع الحوار عند النقر على الزر.

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

مع توفر العديد من مكتبات جافا سكريبت، أصبح من الممكن الآن تضمين تطبيقات حقيقية في المتصفح. ونميل عندئذٍ إلى البنى التالية:

  • 1-4: الخادم HTML هو خادم للصفحات الثابتة HTML5 / CSS / جافا سكريبت؛
  • 5-6: تتفاعل الصفحات HTML5 / CSS / Javascript التي يتم تقديمها مباشرة مع خادم بيانات. ويقوم هذا الخادم بتقديم البيانات فقط بدون تضمين HTML. ويقوم جافا سكريبت بإدراجها في صفحات HTML الموجودة بالفعل على المتصفح.

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

  • الطبقة [UI] هي التي تتفاعل مع المستخدم؛
  • الطبقة [DAO] تتفاعل مع خادم البيانات؛
  • الطبقة [métier] تجمع الإجراءات التشغيلية التي لا تتفاعل مع المستخدم ولا مع خادم البيانات. قد لا تكون هذه الطبقة موجودة.

2.4. التبادلات بين العميل والخادم

لنعد إلى مخططنا الأولي الذي يوضح العناصر الفاعلة في تطبيق ويب:

Image

نحن مهتمون هنا بالتبادل بين جهاز العميل وجهاز الخادم. يتم هذا التبادل عبر شبكة، ومن الجيد تذكير البنية العامة للتبادل بين جهازين بعيدين.

2.4.1. نموذج OSI

يصف نموذج الشبكة المفتوحة المسمى OSI (نموذج مرجعي لربط الأنظمة المفتوحة) الذي حددته المنظمة الدولية للمعايير (ISO) شبكةً مثاليةً يمكن فيها تمثيل الاتصال بين الأجهزة بنموذج مكون من سبع طبقات:

تتلقى كل طبقة خدمات من الطبقة السفلية وتقدم خدماتها إلى الطبقة العليا. لنفترض أن تطبيقين موجودين على جهازين مختلفين A و B يرغبان في التواصل: فهما يفعلان ذلك على مستوى الطبقة Application. ولا يحتاجان إلى معرفة كل تفاصيل عمل الشبكة: فكل تطبيق يمرر المعلومات التي يرغب في إرسالها إلى الطبقة التي تليه: الطبقة Présentation. وبالتالي، لا يحتاج التطبيق سوى إلى معرفة قواعد التفاعل مع الطبقة Présentation. وبمجرد وصول المعلومات إلى الطبقة Présentation، تنتقل وفقًا لقواعد أخرى إلى الطبقة Session وهكذا دواليك، حتى تصل المعلومات إلى الوسيط المادي وتُنقل فعليًا إلى الجهاز المقصود. وهناك، ستخضع للمعالجة العكسية لتلك التي خضعت لها على الجهاز المرسل.

في كل طبقة، تقوم العملية المرسلة المكلفة بإرسال المعلومات بإرسالها إلى عملية مستقبلة على الجهاز الآخر الذي ينتمي إلى نفس الطبقة. وتقوم بذلك وفقًا لقواعد معينة تسمى بروتوكول الطبقة. وبالتالي، يكون مخطط الاتصال النهائي كما يلي:

دور الطبقات المختلفة هو كما يلي:

الطبقة المادية
تضمن نقل البتات عبر وسيط مادي. توجد في هذه الطبقة أجهزة طرفية لمعالجة البيانات (E.T.T.D.) مثل المحطة الطرفية أو الكمبيوتر، بالإضافة إلى أجهزة إنهاء دوائر البيانات (E.T.C.D.) مثل المُعدِّل/المُفكِّك، والمُضاعِف، والمُركِّز. النقاط المهمة في هذا المستوى هي:
  • اختيار ترميز المعلومات (تناظري أو رقمي)
  • اختيار طريقة الإرسال (متزامن أو غير متزامن).
وصلة البيانات
يخفي الخصائص الفيزيائية للطبقة الفيزيائية. يكتشف أخطاء الإرسال ويصححها.
الشبكة
يدير المسار الذي يجب أن تسلكه المعلومات المرسلة عبر الشبكة. ويُطلق على ذلك اسم routage: تحديد المسار الذي يجب أن تسلكه المعلومات حتى تصل إلى مستلمها.
النقل
يسمح بالاتصال بين تطبيقين في حين أن الطبقات السابقة كانت تسمح فقط بالاتصال بين الأجهزة. قد تكون خدمة تقدمها هذه الطبقة هي التعدد: يمكن لطبقة النقل استخدام نفس اتصال الشبكة (من جهاز إلى جهاز) لنقل المعلومات التي تنتمي إلى عدة تطبيقات.
الجلسة
نجد في هذه الطبقة خدمات تسمح لتطبيق ما بفتح جلسة عمل والحفاظ عليها على جهاز بعيد.
العرض
تهدف هذه الطبقة إلى توحيد عرض البيانات على الأجهزة المختلفة. وبالتالي، فإن البيانات الواردة من الجهاز A سيتم "تزيينها" بواسطة الطبقة Présentation الخاصة بالجهاز A، وفقًا لتنسيق قياسي قبل إرسالها عبر الشبكة. وعند وصولها إلى الطبقة Présentation للجهاز المستلم B الذي سيتعرف عليها بفضل تنسيقها القياسي، سيتم تزيينها بطريقة أخرى حتى يتعرف عليها تطبيق الجهاز B.
التطبيق
في هذا المستوى، نجد التطبيقات التي عادةً ما تكون قريبة من المستخدم مثل البريد الإلكتروني أو نقل الملفات.

2.4.2. نموذج TCP/IP

يعد النموذج OSI نموذجًا مثاليًا. تقترب مجموعة البروتوكولات TCP/IP منه بالشكل التالي:

  • تؤدي واجهة الشبكة (بطاقة الشبكة في الكمبيوتر) وظائف الطبقتين 1 و 2 من النموذج OSI
  • تؤدي الطبقة IP (بروتوكول الإنترنت) وظائف الطبقة 3 (الشبكة)
  • الطبقة TCP (بروتوكول التحكم في النقل) أو UDP (بروتوكول مخطط بيانات المستخدم) تؤدي وظائف الطبقة 4 (النقل). يضمن بروتوكول TCP وصول حزم البيانات المتبادلة بين الأجهزة إلى وجهتها. إذا لم يكن الأمر كذلك، فإنه يعيد الحزم التي ضلت طريقها. لا يقوم بروتوكول UDP بهذه المهمة، وبالتالي يقع على عاتق مطور التطبيقات القيام بها. ولهذا السبب، على الإنترنت الذي لا يعتبر شبكة موثوقة بنسبة 100٪، فإن بروتوكول TCP هو الأكثر استخدامًا. ونسميها عندئذ شبكة TCP-IP.
  • تغطي طبقة التطبيق وظائف المستويات من 5 إلى 7 في نموذج OSI.

توجد تطبيقات الويب في الطبقة Application، وبالتالي فهي تعتمد على بروتوكولات TCP-IP. تتبادل طبقات Application في أجهزة العملاء والخادم الرسائل التي يتم تكليف الطبقات من 1 إلى 4 في النموذج بتوجيهها إلى وجهتها. لكي تتفاهم، يجب أن "تتحدث" طبقات التطبيق في الجهازين نفس اللغة أو البروتوكول. يُسمى بروتوكول تطبيقات الويب HTTP (بروتوكول النقل HyperText). وهو بروتوكول نصي، حيث تتبادل الأجهزة سطور نصية عبر الشبكة للتواصل. هذه التبادلات موحدة، أي أن العميل لديه عدد معين من الرسائل للإشارة بالضبط إلى ما يريده من الخادم، كما أن الخادم لديه أيضًا عدد معين من الرسائل لإعطاء العميل إجابته. يتخذ تبادل الرسائل هذا الشكل التالي:

Image

العميل --> الخادم

عندما يرسل العميل طلبه إلى خادم الويب، فإنه يرسل

  1. سطور نصية بتنسيق HTTP للإشارة إلى ما يريده؛
  2. سطر فارغ؛
  3. وثيقة اختيارية.

الخادم --> العميل

عندما يرد الخادم على العميل، فإنه يرسل

  1. سطور نصية بتنسيق HTTP للإشارة إلى ما يرسله؛
  2. سطر فارغ؛
  3. وثيقة اختيارية.

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

  1. يتصل المتصفح بخادم الويب ويطلب الصفحة التي يريدها. يتم تعيين الموارد المطلوبة بشكل فريد بواسطة URL (محدد موقع الموارد الموحد). لا يرسل المتصفح سوى رؤوس HTTP ولا يرسل أي مستند.
  2. يرد عليه الخادم. يرسل أولاً رؤوس HTTP تشير إلى نوع الرد الذي يرسله. قد يكون هذا خطأً إذا كانت الصفحة المطلوبة غير موجودة. إذا كانت الصفحة موجودة، سيذكر الخادم في رؤوس HTTP لرده أنه سيقوم بعد ذلك بإرسال مستند HTML (لغة ترميز HyperText). هذا المستند عبارة عن سلسلة من أسطر النص بتنسيق HTML. يحتوي نص HTML على علامات (علامات) تعطي للمتصفح إرشادات حول كيفية عرض النص.
  3. يعرف العميل من خلال رؤوس HTTP للخادم أنه سيتلقى مستند HTML. سيقوم بتحليل هذا المستند وربما يلاحظ أنه يحتوي على مراجع لصور. هذه الصور غير موجودة في المستند HTML. لذلك يقوم بإرسال طلب جديد إلى نفس خادم الويب لطلب الصورة الأولى التي يحتاجها. هذا الطلب مطابق للطلب الذي تم إرساله في الخطوة 1، باستثناء أن المورد المطلوب مختلف. سيقوم الخادم بمعالجة هذا الطلب عن طريق إرسال الصورة المطلوبة إلى عميله. هذه المرة، في رده، ستحدد رؤوس HTTP أن المستند المرسل هو صورة وليس مستند HTML.
  4. يسترد العميل الصورة المرسلة. ستتكرر الخطوتان 3 و 4 حتى يحصل العميل (متصفح بشكل عام) على جميع المستندات التي تسمح له بعرض الصفحة بالكامل.

2.4.3. بروتوكول HTTP

لنكتشف بروتوكول HTTP من خلال أمثلة. ما الذي يتبادله المتصفح وخادم الويب؟

خدمة الويب أو خدمة HTTP هي خدمة TCP-IP تعمل عادةً على المنفذ 80. وقد تعمل على منفذ آخر. في هذه الحالة، سيضطر متصفح العميل إلى تحديد هذا المنفذ في طلب URL الذي يقدمه. يكون شكل URL العام كما يلي:

البروتوكول://جهاز[:port]/المسار/المعلومات

حيث

بروتوكول
http لخدمة الويب. يمكن للمتصفح أيضًا أن يعمل كعميل لخدمات ftp و news و telnet، ...
الجهاز
اسم الجهاز الذي تعمل عليه خدمة الويب
المنفذ
منفذ خدمة الويب. إذا كان 80، يمكن حذف رقم المنفذ. وهذا هو الحال الأكثر شيوعًا
المسار
المسار الذي يشير إلى المورد المطلوب
المعلومات
معلومات إضافية تُقدم إلى الخادم لتوضيح طلب العميل

ماذا يفعل المتصفح عندما يطلب المستخدم تحميل URL؟

  1. يفتح اتصالاً TCP-IP مع الجهاز والمنفذ المحددين في الجزء machine[:port] من URL. إن فتح اتصال TCP-IP يعني إنشاء "قناة" اتصال بين جهازين. وبمجرد إنشاء هذه القناة، ستمر جميع المعلومات المتبادلة بين الجهازين عبرها. لا يتضمن إنشاء هذا القناة TCP-IP بروتوكول الويب HTTP بعد.
  2. بعد إنشاء القناة TCP-IP، سيقوم العميل بتوجيه طلبه إلى خادم الويب، وسيفعل ذلك عن طريق إرسال أسطر نصية (أوامر) بتنسيق HTTP. سيقوم بإرسال جزء المسار/المعلومات من URL إلى الخادم
  3. سيرد عليه الخادم بنفس الطريقة وفي نفس الأنبوب
  4. سيتخذ أحد الشريكين قرار إغلاق القناة. وهذا يعتمد على بروتوكول HTTP المستخدم. مع بروتوكول HTTP 1.0، يغلق الخادم الاتصال بعد كل رد من ردوده. وهذا يجبر العميل الذي يحتاج إلى إرسال عدة طلبات للحصول على المستندات المختلفة التي تشكل صفحة ويب على فتح اتصال جديد مع كل طلب، وهو ما يترتب عليه تكلفة. مع بروتوكول HTTP/1.1، يمكن للعميل أن يطلب من الخادم إبقاء الاتصال مفتوحًا حتى يطلب منه إغلاقه. وبالتالي، يمكنه استرداد جميع المستندات الخاصة بصفحة ويب عبر اتصال واحد وإغلاق الاتصال بنفسه بمجرد الحصول على آخر مستند. سيكتشف الخادم هذا الإغلاق ويقوم هو أيضًا بإغلاق الاتصال.

لاكتشاف التبادلات بين العميل وخادم الويب، سنستخدم ملحق [Advanced Rest Client] لمتصفح Chrome الذي قمنا بتثبيته في الفقرة 1.3. سنكون في الحالة التالية:

Image

يمكن أن يكون الخادم الويب أي خادم. نسعى هنا إلى اكتشاف التبادلات التي ستحدث بين المتصفح والخادم الويب. في السابق، أنشأنا الصفحة الثابتة التالية HTML:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

التي نعرضها في متصفح:

 

نرى أن URL المطلوب هو: http://localhost:56376/HtmlPage1.html . وبالتالي، فإن جهاز خدمة الويب هو localhost (=جهاز محلي) والمنفذ هو 56376. لنستخدم التطبيق [Advanced Rest Client] لطلب نفس URL:

  • في [1]، نقوم بتشغيل التطبيق (في علامة التبويب [Applications] في علامة تبويب جديدة في Chrome)؛
  • في [2]، نختار الخيار [Request]؛
  • في [3]، نحدد الخادم المطلوب: http://localhost:56376؛
  • في [4]، حدد URL المطلوب: /HtmlPage1.html؛
  • في [5]، نضيف أي معلمات محتملة إلى URL. لا يوجد هنا؛
  • في [6]، نحدد الأمر HTTP المستخدم في الاستعلام، وهو هنا GET.

وهذا يعطي الاستعلام التالي:

يتم إرسال الاستعلام الذي تم إعداده بهذه الطريقة [7] إلى الخادم بواسطة [8]. تكون الإجابة التي يتم الحصول عليها هي التالية:

ذكرنا أعلاه أن التبادلات بين العميل والخادم تتخذ الشكل التالي:

Image

  • في [1]، نرى الرؤوس HTTP المرسلة من المتصفح في طلبه. لم يكن لديه مستند لإرساله؛
  • في [2]، نرى الرؤوس HTTP المرسلة من الخادم في الرد. في [3]، نرى المستند الذي أرسله.

في [3]، يمكننا التعرف على الصفحة الثابتة HTML التي وضعناها على خادم الويب.

دعونا نفحص طلب HTTP من المتصفح:

1
2
3
4
5
6
GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
  • لم يتم عرض السطر 1 بواسطة التطبيق؛
  • السطر 2: المتصفح يحدد هويته برأس [User-Agent]؛
  • السطر 3: يشير المتصفح إلى أنه يرسل إلى الخادم مستندًا نصيًا (text/plain) بتنسيق UTF-8. في الواقع، لم يرسل المتصفح أي مستند هنا؛
  • السطر 4: يشير المتصفح إلى أنه يقبل أي نوع من المستندات كرد؛
  • السطر 5: يحدد المتصفح تنسيقات المستندات المقبولة؛
  • السطر 6: يحدد المتصفح اللغات التي يفضلها حسب ترتيب الأفضلية.

رد عليه الخادم بإرسال الرؤوس التالية HTTP:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313
  • السطر 1: لم يتم عرضه بواسطة التطبيق؛
  • السطر 3: يحدد الخادم هويته، وهو هنا خادم IIS من Microsoft؛
  • السطر 5: يشير إلى التقنية التي أنتجت الرد، وهنا هي ASP.NET؛
  • السطر 6: تاريخ ووقت الاستجابة؛
  • السطر 7: طبيعة المستند الذي أرسله الخادم. هنا مستند HTML؛
  • السطر 12: حجم المستند المرسل HTML بالبايت.

2.4.4. الخلاصة

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

Image

الأمران المعتادان لطلب مورد هما GET و POST. لا يصاحب الأمر GET أي مستند. أما الأمر POST، فيصاحبه مستند يكون في الغالب سلسلة أحرف تجمع جميع القيم التي تم إدخالها في النموذج. يسمح الأمر HEAD بطلب الرؤوس HTTP فقط ولا يرافقه مستند.

بناءً على طلب العميل، يرسل الخادم استجابة لها نفس البنية. يتم إرسال المورد المطلوب في الجزء [Document] ما لم يكن الأمر الصادر عن العميل هو HEAD، وفي هذه الحالة يتم إرسال الرؤوس HTTP فقط.

2.5. أساسيات لغة HTML

يمكن لمتصفح الويب عرض مستندات متنوعة، وأكثرها شيوعًا هو المستند HTML (لغة ترميز HyperText). وهو عبارة عن نص منسق بعلامات على شكل <balise>texte</balise>. وبالتالي، فإن النص <B>important</B> سيعرض النص المهم بخط عريض. وهناك علامات منفردة مثل العلامة <hr/> التي تعرض خطًا أفقيًا. ولن نستعرض العلامات التي يمكن العثور عليها في نص HTML. هناك العديد من برامج WYSIWYG التي تسمح بإنشاء صفحة ويب دون كتابة سطر واحد من كود HTML. تولد هذه الأدوات تلقائيًا كود HTML لتخطيط تم إنشاؤه باستخدام الماوس وعناصر تحكم محددة مسبقًا. وبالتالي، يمكن إدراج (باستخدام الماوس) جدول في الصفحة ثم الاطلاع على كود HTML الذي أنشأه البرنامج لاكتشاف العلامات التي يجب استخدامها لتعريف جدول في صفحة ويب. الأمر ليس أكثر تعقيدًا من ذلك. من ناحية أخرى، فإن معرفة لغة HTML أمر لا غنى عنه لأن تطبيقات الويب الديناميكية يجب أن تولد بنفسها كود HTML لإرساله إلى عملاء الويب. يتم إنشاء هذا الكود بواسطة البرنامج، وبالطبع يجب معرفة ما يجب إنشاؤه حتى يحصل العميل على صفحة الويب التي يريدها.

باختصار، ليس هناك حاجة لمعرفة لغة HTML بالكامل لبدء البرمجة على الويب. ومع ذلك، فإن هذه المعرفة ضرورية ويمكن اكتسابها من خلال استخدام برامج WYSIWYG لإنشاء صفحات الويب مثل DreamWeaver وعشرات البرامج الأخرى. هناك طريقة أخرى لاكتشاف خفايا لغة HTML وهي تصفح الويب وعرض الكود المصدري للصفحات التي تتميز بخصائص مثيرة للاهتمام وغير معروفة لك بعد.

2.5.1. مثال

لنأخذ المثال التالي الذي يعرض بعض العناصر التي يمكن العثور عليها في مستند ويب مثل:

  • جدول؛
  • صورة؛
  • رابط.

يكون شكل مستند HTML بشكل عام كما يلي:

<html>
    <head>
        <title>عنوان</title>
        ...
    </head>
    <سمات body>
        ...
    </body>
</html>

يتم تحديد المستند بأكمله بعلامتي <html>...</html>. ويتكون من جزأين:

  1. <head>...</head>: هذا هو الجزء غير القابل للعرض من المستند. وهو يوفر معلومات للمتصفح الذي سيعرض المستند. غالبًا ما نجد فيه العلامة <title>...</title> التي تحدد النص الذي سيتم عرضه في شريط عنوان المتصفح. ويمكن أن نجد فيه علامات أخرى، لا سيما العلامات التي تحدد الكلمات المفتاحية للمستند، وهي الكلمات المفتاحية التي تستخدمها محركات البحث لاحقًا. يمكن أيضًا العثور في هذا الجزء على نصوص برمجية، مكتوبة غالبًا بلغة جافا سكريبت أو في بي سكريبت، والتي سيتم تنفيذها بواسطة المتصفح.
  1. <body attributs>...</body>: هذا هو الجزء الذي سيعرضه المتصفح. تشير العلامات HTML الموجودة في هذا الجزء إلى المتصفح الشكل المرئي "المطلوب" للوثيقة. سيقوم كل متصفح بتفسير هذه العلامات بطريقته الخاصة. وبالتالي، يمكن لمتصفحين مختلفين عرض نفس المستند على الويب بشكل مختلف. وهذا عادةً ما يمثل أحد التحديات التي يواجهها مصممو الويب.

الرمز HTML في مستندنا النموذجي هو التالي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />

  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </tbody>
  </table>

  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></td>
    </tr>
    <tr>
      <td>le site de l'ISTIA</td>
      <td><a href="http://istia.univ-angers.fr">ici</a></td>
    </tr>
  </table>
</body>
</html>
العناصر
العلامات والأمثلة HTML
عنوان المستند
<title>علامات</title> (السطر 5)
سيظهر النص balises في شريط عنوان المتصفح الذي سيعرض المستند
شريط أفقي
<hr/>: يعرض خطًا أفقيًا (السطر 10)
جدول
<table attributes>....</table>: لتعريف الجدول (السطران 12 و32)
<thead>...</thead>: لتعريف عناوين الأعمدة (السطران 13 و19)
<tbody>...</tbody>: لتعريف محتوى الجدول (السطر 20، 31)
<tr attributs>...</tr>: لتعريف صف (السطران 21 و25)
<td attributes>...</td>: لتعريف خلية (السطر 22)
أمثلة:
<table border="1">...</table>: تحدد السمة border سماكة حدود الجدول
<td style="width: 150px; text-align: center;">cellule(1,2)</td>: يحدد خلية سيكون محتواها cellule(1,2). سيتم توسيط هذا المحتوى أفقيًا (text-align: center). سيكون عرض الخلية 150 بكسل (width: 150px)
صورة
<img border="0" src="/images/cerisier.jpg"/> (السطر 38): يحدد صورة بدون حدود (border=0") ملفها المصدر هو /images/cerisier.jpg على خادم الويب (src="/images/cerisier.jpg"). يوجد هذا الرابط في مستند ويب تم الحصول عليه باستخدام URL http://localhost:port/html/balises.htm. وبالتالي، سيطلب المتصفح URL http://localhost:port/images/cerisier.jpg للحصول على الصورة المشار إليها هنا.
رابط
<a href="http://istia.univ-angers.fr">هنا</a> (السطر 42): يجعل النص ici بمثابة رابط إلى URL http://istia.univ-angers.fr.
خلفية الصفحة
<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (السطر 8): يشير إلى أن الصورة التي يجب أن تستخدم كخلفية للصفحة موجودة في URL /images/standard.jpg على خادم الويب. في سياق مثالنا، سيطلب المتصفح العنوان URL http://localhost:port/images/standard.jpg للحصول على صورة الخلفية هذه. علاوة على ذلك، سيتم عرض نص المستند في مستطيل يبلغ ارتفاعه 400 بكسل وعرضه 400 بكسل.

نرى في هذا المثال البسيط أنه لإنشاء المستند بالكامل، يجب على المتصفح إرسال ثلاث طلبات إلى الخادم:

  1. http://localhost:port/html/balises.htm للحصول على مصدر المستند HTML
  2. http://localhost:port/images/cerisier.jpg للحصول على الصورة cerisier.jpg
  3. http://localhost:port/images/standard.jpg للحصول على صورة الخلفية standard.jpg

2.5.2. نموذج HTML

يقدم المثال التالي نموذجًا:

 

الرمز HTML الذي ينتج هذا العرض هو التالي:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <table border="0">
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

الارتباط بين العنصر المرئي <--> العلامة HTML هو كما يلي:

عنصر التحكم
علامة HTML
نموذج
<form method="post" action="...">
حقل الإدخال
<input type="text" name="txtSaisie" size="20" value="بضع كلمات" />
حقل إدخال مخفي
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
حقل إدخال متعدد الأسطر
<textarea rows="2" name="areaSaisie" cols="20">
السطر 1
السطر 2
السطر 3
</textarea>
أزرار الاختيار
<input type="radio" value="نعم" name="R1" />نعم
<input type="radio" name="R1" value="لا" checked="checked" />لا
مربعات الاختيار
<input type="checkbox" name="C1" value="واحد" />1
<input type="checkbox" name="C2" value="اثنان" checked="checked" />2
<input type="checkbox" name="C3" value="ثلاثة" />3
قائمة منسدلة
<select size="1" name="cmbValeurs">
<option value="1">الخيار 1</option>
<option selected="selected" value="2">الخيار 2</option>
<option value="3">الخيار 3</option>
</select>
قائمة اختيار واحد
<select size="3" name="lst1">
<option selected="selected" value="1">القائمة 1</option>
<option value="2">القائمة 2</option>
<option value="3">القائمة 3</option>
<option value="4">القائمة 4</option>
<option value="5">القائمة 5</option>
</select>
قائمة متعددة الاختيارات
<select size="3" name="lst2" multiple="multiple">
<option value="1">القائمة 1</option>
<option value="2">القائمة 2</option>
<option selected="selected" value="3">القائمة 3</option>
<option value="4">القائمة 4</option>
<option value="5">القائمة 5</option>
</select>
زر من نوع submit
<input type="submit" value="إرسال" name="cmdRenvoyer" />
زر من نوع إعادة الضبط
<input type="reset" value="إعادة الضبط" name="cmdRétablir" />
زر من النوع button
<input type="button" value="مسح" name="cmdEffacer" onclick="effacer()" />

لنستعرض هذه العلامات المختلفة:

2.5.2.1. النموذج

نموذج

<form method="post" action="FormulairePost.aspx">
علامة HTML
<form name="..." method="..." action="...">...</form>
السمات
name="frmexemple": اسم النموذج
method="..." : الطريقة التي يستخدمها المتصفح لإرسال القيم التي تم جمعها في النموذج إلى خادم الويب
action="..." : URL التي سيتم إرسال القيم التي تم جمعها في النموذج إليها.
يُحاط النموذج الإلكتروني بعلامات <form>...</form>. يمكن أن يكون للنموذج اسم (name="xx"). وينطبق ذلك على جميع عناصر التحكم الموجودة في النموذج. الغرض من النموذج هو جمع المعلومات التي يدخلها المستخدم عبر لوحة المفاتيح/الماوس وإرسالها إلى عنوان URL لخادم الويب. أي عنوان؟ العنوان المشار إليه في السمة action="URL". إذا كان هذا السمة غير موجود، فسيتم إرسال المعلومات إلى عنوان الويب الخاص بالوثيقة التي يوجد فيها النموذج. يمكن لعميل الويب استخدام طريقتين مختلفتين تسميان POST و GET لإرسال البيانات إلى خادم ويب. السمة method="méthode"، مع method يساوي GET أو POST، في العلامة <form> يحدد للمتصفح الطريقة التي يجب استخدامها لإرسال المعلومات التي تم جمعها في النموذج إلى URL المحدد بواسطة السمة action="URL". عندما لا يتم تحديد السمة method، يتم استخدام الطريقة GET بشكل افتراضي.

2.5.2.2. حقول إدخال النص

حقل الإدخال
<input type="text" name="txtSaisie" size="20" value="بضع كلمات" />
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
 
علامة HTML
<input type="..." name="..." size=".." value=".."/>
تتوفر علامة input لمختلف عناصر التحكم. والسمة type هي التي تسمح بالتمييز بين عناصر التحكم المختلفة هذه.
السمات
type="text": يحدد أن هذا حقل إدخال
type="password": يتم استبدال الأحرف الموجودة في حقل الإدخال بأحرف *. وهذا هو الفرق الوحيد عن حقل الإدخال العادي. هذا النوع من عناصر التحكم مناسب لإدخال كلمات المرور.
size="20": عدد الأحرف المرئية في الحقل - لا يمنع إدخال المزيد من الأحرف
name="txtSaisie": اسم عنصر التحكم
value="بعض الكلمات": النص الذي سيتم عرضه في حقل الإدخال.

2.5.2.3. حقول الإدخال متعددة الأسطر

حقل إدخال متعدد الأسطر
<textarea rows="2" name="areaSaisie" cols="20">
السطر 1
السطر 2
السطر 3
</textarea>
 
علامة HTML
<textarea ...>نص</textarea>
يعرض منطقة إدخال متعددة الأسطر مع وجود نص بداخلها في البداية
السمات
rows="2": عدد الأسطر
cols="'20" : عدد الأعمدة
name="areaSaisie": اسم عنصر التحكم

2.5.2.4. أزرار الاختيار

أزرار الاختيار
<input type="radio" value="نعم" name="R1" />نعم
<input type="radio" name="R1" value="لا" checked="checked" />لا
 
علامة HTML
<input type="radio" attribut2="valeur2" ..../>نص
يعرض زر اختيار مع نص بجانبه.
السمات
name="radio": اسم عنصر التحكم. تشكل أزرار الاختيار التي تحمل نفس الاسم مجموعة من الأزرار المتنافية: لا يمكن تحديد سوى واحد منها.
value="القيمة" : القيمة المخصصة لزر الاختيار. لا يجب الخلط بين هذه القيمة والنص المعروض بجانب زر الاختيار. فهذا النص مخصص للعرض فقط.
checked= "checked": إذا كانت هذه الكلمة الرئيسية موجودة، يكون زر الاختيار محددًا، وإلا فإنه غير محدد.

2.5.2.5. مربعات الاختيار

مربعات الاختيار
<input type="checkbox" name="C1" value="un" />1
<input type="checkbox" name="C2" value="اثنان" checked="checked" />2
<input type="checkbox" name="C3" value="ثلاثة" />3
 
علامة HTML
<input type="checkbox" attribut2="valeur2" ....>نص
يعرض مربع اختيار مع نص بجانبه.
السمات
name="C1": اسم عنصر التحكم. يمكن أن تحمل مربعات الاختيار نفس الاسم أو لا. تشكل المربعات التي تحمل نفس الاسم مجموعة من المربعات المرتبطة.
value="القيمة": القيمة المخصصة لمربع الاختيار. لا يجب الخلط بين هذه القيمة والنص المعروض بجانب زر الاختيار. فهذا النص مخصص للعرض فقط.
checked= "checked": إذا كانت هذه الكلمة الرئيسية موجودة، فإن مربع الاختيار يكون محددًا، وإلا فإنه غير محدد.

2.5.2.6. القائمة المنسدلة (combo)

Combo
<select size="1" name="cmbValeurs">
<option value="1">الخيار 1</option>
<option selected="selected" value="2">الخيار 2</option>
<option value="3">الخيار 3</option>
</select>
 
علامة HTML
<select size=".." name="..">
<option [selected="selected"] value=”v”>...</option>
...
</select>
يعرض في قائمة النصوص الموجودة بين العلامات <option>...</option>
السمات
name="cmbValeurs": اسم عنصر التحكم.
size="1": عدد عناصر القائمة المرئية. size="1" يجعل القائمة تعادل مربع الاختيار.
selected="selected": إذا كانت هذه الكلمة الرئيسية موجودة لعنصر في القائمة، يظهر هذا العنصر محددًا في القائمة. في المثال أعلاه، يظهر عنصر القائمة choix2 كعنصر محدد في مربع الاختيار عند عرضه لأول مرة.
value=”v”: إذا تم تحديد العنصر من قبل المستخدم، فإن القيمة [v] هي التي يتم إرسالها إلى الخادم. في حالة عدم وجود هذا السمة، يتم إرسال النص المعروض والمحدد إلى الخادم.

2.5.2.7. قائمة الاختيار الفردي

قائمة الاختيار الفردي
<select size="3" name="lst1">
<option selected="selected" value="1">القائمة 1</option>
<option value="2">القائمة 2</option>
<option value="3">القائمة 3</option>
<option value="4">القائمة 4</option>
<option value="5">القائمة 5</option>
</select>
 
علامة HTML
<select size=".." name="..">
<option [selected="selected"]>...</option>
...
</select>
يعرض في قائمة النصوص الموجودة بين العلامات <option>...</option>
السمات
هي نفسها المستخدمة في القائمة المنسدلة التي تعرض عنصرًا واحدًا فقط. لا يختلف هذا العنصر عن القائمة المنسدلة السابقة إلا في سمة size>1.

2.5.2.8. قائمة متعددة الاختيارات

قائمة الاختيار الفردي
<select size="3" name="lst2" multiple="multiple">
<option value="1" selected="selected">القائمة 1</option>
<option value="2">القائمة 2</option>
<option selected="selected" value="3">القائمة 3</option>
<option value="4">القائمة 4</option>
<option value="5">القائمة 5</option>
</select>
 
علامة HTML
<select size=".." name=".." multiple="multiple">
<option [selected="selected"]>...</option>
...
</select>
يعرض في قائمة النصوص الموجودة بين العلامات <option>...</option>
السمات
multiple: يسمح بتحديد عدة عناصر في القائمة. في المثال أعلاه، تم تحديد العنصرين liste1 و liste3.

2.5.2.9. زر من النوع button

زر من النوع button
<input type="button" value="مسح" name="cmdEffacer" onclick="effacer()" />
 
علامة HTML
<input type="button" value="..." name="..." onclick="effacer()" ..../>
السمات
type="button": يحدد عنصر تحكم زر. هناك نوعان آخران من الأزرار، وهما submit و reset.
value="حذف": النص المعروض على الزر
onclick="وظيفة()": يسمح بتعريف وظيفة يتم تنفيذها عندما ينقر المستخدم على الزر. هذه الوظيفة هي جزء من البرامج النصية المحددة في المستند الويب المعروض. الصيغة السابقة هي صيغة javascript. إذا كانت البرامج النصية مكتوبة بلغة vbscript، فيجب كتابة onclick="وظيفة" بدون الأقواس. تصبح الصيغة متطابقة إذا كان من الضروري تمرير معلمات إلى الدالة: onclick="dالة(val1, val2,...)"
في مثالنا، يؤدي النقر على الزر Effacer إلى استدعاء وظيفة جافا سكريبت effacer التالية:
<script type="text/javascript">
function effacer() {
alert("لقد نقرت على زر مسح");
}
</script>
تعرض الدالة effacer رسالة:

2.5.2.10. زر من نوع submit

زر من نوع submit
<input type="submit" value="إرسال" name="cmdRenvoyer" />
 
علامة HTML
<input type="submit" value="إرسال" name="cmdRenvoyer" />
السمات
type="submit": يحدد الزر كزر لإرسال بيانات النموذج إلى خادم الويب. عندما ينقر العميل على هذا الزر، سيرسل المتصفح بيانات النموذج إلى URL المحددة في سمة action لعلامة <form> وفقًا للطريقة المحددة بواسطة سمة method لنفس العلامة.
value="إرسال": النص المعروض على الزر

2.5.2.11. زر من نوع reset

زر من نوع reset
<input type="reset" value="إعادة الضبط" name="cmdRétablir" />
 
علامة HTML
<input type="reset" value="إعادة الضبط" name="cmdRétablir"/>
السمات
type="reset": يحدد الزر كزر لإعادة تعيين النموذج. عندما ينقر العميل على هذا الزر، سيعيد المتصفح النموذج إلى الحالة التي استلمه بها.
value="إعادة تعيين": النص المعروض على الزر

2.5.2.12. حقل مخفي

حقل مخفي
<input type="hidden" name="secret" value="uneValeur" />
علامة HTML
<input type="hidden" name="..." value="..."/>
السمات
type="hidden": يحدد أن هذا حقل مخفي. الحقل المخفي جزء من النموذج ولكنه لا يظهر للمستخدم. ومع ذلك، إذا طلب المستخدم من متصفحه عرض شفرة المصدر، فسيرى وجود العلامة <input type="hidden" value="..."> وبالتالي قيمة الحقل المخفي.
value="uneValeur": قيمة الحقل المخفي.
ما فائدة الحقل المخفي؟ يمكن أن يسمح ذلك لخادم الويب بالاحتفاظ بالمعلومات خلال طلبات العميل. لنفترض تطبيقًا للتسوق عبر الويب. يشتري العميل منتجًا أول art1 بكمية q1 على الصفحة الأولى من الكتالوج ثم ينتقل إلى صفحة جديدة من الكتالوج. ولتذكر أن العميل اشترى q1 من المنتج art1، يمكن للخادم وضع هاتين المعلومتين في حقل مخفي في نموذج الويب الخاص بالصفحة الجديدة. في هذه الصفحة الجديدة، يشتري العميل المنتجين q2 و art2. عندما يتم إرسال بيانات هذا النموذج الثاني إلى الخادم (submit)، لن يتلقى الخادم المعلومات (q2،art2) فحسب، بل أيضًا (q1،art1) التي تشكل أيضًا جزءًا من النموذج كحقل مخفي. ثم يقوم خادم الويب بوضع المعلومات (q1، art1) و(q2، art2) في حقل مخفي جديد وإرسال صفحة جديدة من الكتالوج. وهكذا دواليك.

2.5.3. إرسال قيم نموذج من عميل ويب إلى خادم ويب

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

2.5.3.1. الطريقة GET

لنقم بإجراء اختبار أولي، حيث تم تعريف العلامة <form> في رمز المستند HTML على النحو التالي:


<form method="get" action="FormulaireGet.aspx">

عندما ينقر المستخدم على الزر [1]، سيتم إرسال القيم التي تم إدخالها في النموذج إلى الصفحة ASP.NET [2]. لا تقوم هذه الصفحة بأي شيء بهذه المعلمات وتعيد صفحة فارغة. نريد فقط معرفة كيف ينقل المتصفح القيم التي تم إدخالها إلى خادم الويب. للقيام بذلك، سنستخدم أداة تصحيح الأخطاء المتوفرة في Chrome. يتم تنشيطها عن طريق كتابة CTRL-I (بالأحرف الكبيرة) [3]:

نظرًا لأننا مهتمون بالتبادل الشبكي بين المتصفح وخادم الويب، نقوم بتفعيل علامة التبويب [Network] أعلاه ثم نضغط على زر [Envoyer] في النموذج. وهذا زر من النوع [submit] داخل علامة [form]. يستجيب المتصفح للنقر بطلب URL [FormulaireGet.aspx] المحدد في السمة [action] لعلامة [form]، باستخدام الطريقة GET المحددة في السمة [method]. ونحصل عندئذٍ على المعلومات التالية:

تُظهر لنا لقطة الشاشة أعلاه URL التي طلبها المتصفح بعد النقر على الزر [envoyer]. إنه يطلب بالفعل URL المتوقع [FormulaireGet.aspx] ولكنه يضيف خلفه معلومات تمثل القيم التي تم إدخالها في النموذج. للحصول على مزيد من المعلومات، نضغط على الرابط أعلاه:

أعلاه [1, 2]، نرى رؤوس HTTP المرسلة من المتصفح. وقد تم تنسيقها هنا. للاطلاع على النص الأصلي لهذه الرؤوس، نتبع الرابط [view source] [3, 4]. النص الكامل هو كما يلي:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

نجد عناصر سبق أن صادفناها من قبل. وتظهر عناصر أخرى للمرة الأولى:

Connection: keep-alive
يطلب العميل من الخادم عدم إغلاق الاتصال بعد الرد. سيسمح له ذلك باستخدام نفس الاتصال لطلب لاحق. لا يبقى الاتصال مفتوحًا إلى أجل غير مسمى. سيقوم الخادم بإغلاقه بعد فترة طويلة من عدم الاستخدام.
Referer
الـ URL الذي كان معروضًا في المتصفح عند إجراء الطلب الجديد.

الجديد هو السطر 1 في المعلومات التي تلي URL. نلاحظ أن الخيارات التي تم تحديدها في النموذج موجودة في URL. تم تمرير القيم التي أدخلها المستخدم في النموذج في الأمر GET URL?param1=value1&param2=value2&... HTTP/1.1 حيث تمثل parami أسماء (السمة name) عناصر التحكم في نموذج الويب، وتمثل valeuri القيم المرتبطة بها. نقدم أدناه جدولًا مكونًا من ثلاثة أعمدة:

  • العمود 1: يتضمن تعريف عنصر تحكم HTML من المثال؛
  • العمود 2: يعرض شكل هذا عنصر التحكم في المتصفح؛
  • العمود 3: يعرض القيمة التي يرسلها المتصفح إلى الخادم لعنصر التحكم في العمود 1 بالشكل الذي تظهر به في الاستعلام GET في المثال.
عنصر التحكم HTML
المرئي
القيمة (القيم) المرتجعة
<input type="radio" value="نعم" name="R1"/>نعم
<input type="radio" name="R1" value="لا" checked="checked"/>لا
R1=نعم
- قيمة السمة value للزر الإذاعي الذي حدده المستخدم.
<input type="checkbox" name="C1" value="واحد"/>1
<input type="checkbox" name="C2" value="اثنان" checked="checked"/>2
<input type="checkbox" name="C3" value="ثلاثة"/>3
C1=واحد
C2=اثنان
- قيم سمات value للمربعات التي حددها المستخدم
<input type="text" name="txtSaisie" size="20" value="بضع كلمات"/>
txtSaisie=برمجة+الويب
- النص الذي كتبه المستخدم في حقل الإدخال. تم استبدال المسافات بعلامة +
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/>
txtMdp=هذا_سر
- النص الذي يكتبه المستخدم في حقل الإدخال
<textarea rows="2" name="areaSaisie" cols="20">
السطر 1
السطر 2
السطر 3
</textarea>
areaSaisie=أساسيات+البرمجة+الويب%0D%0A
البرمجة+الويب
- النص الذي أدخله المستخدم في حقل الإدخال. %OD%OA هي علامة نهاية السطر. تم استبدال المسافات بعلامة +
<select size="1" name="cmbValeurs">
<option value='1'>الخيار 1</option>
<option selected="selected" value='2'>الخيار 2</option>
<option value='3'>الخيار 3</option>
</select>
cmbValeurs=3
- سمة [value] للعنصر الذي اختاره المستخدم
<select size="3" name="lst1">
<option selected="selected" value='1'>liste1</option>
<option value='2'>القائمة 2</option>
<option value='3'>القائمة 3</option>
<option value='4'>القائمة 4</option>
<option value='5'>القائمة 5</option>
</select>
lst1=3
- سمة [value] للعنصر الذي اختاره المستخدم
<select size="3" name="lst2" multiple="multiple">
<option selected="selected" value='1'>القائمة 1</option>
<option value='2'>القائمة 2</option>
<option selected="selected" value='3'>القائمة 3</option>
<option value='4'>القائمة 4</option>
<option value='5'>القائمة 5</option>
</select>
lst2=1
lst2=3
- سمات [value] للعناصر التي اختارها المستخدم
<input type="submit" value="إرسال" name="cmdRenvoyer"/>
 
cmdRenvoyer=إرسال
- اسم وسمة value للزر الذي استُخدم لإرسال بيانات النموذج إلى الخادم
<input type="hidden" name="secret" value="uneValeur"/>
 
secret=قيمة
- سمة value للحقل المخفي

2.5.3.2. طريقة POST

نقوم بتعديل المستند HTML بحيث يستخدم المتصفح الآن الطريقة POST لإرسال قيم النموذج إلى خادم الويب:


  <form method="post" action="FormulairePost.aspx">

نملأ النموذج كما في الطريقة GET ونرسل المعلمات إلى الخادم باستخدام الزر [Envoyer]. كما تم في الفقرة السابقة في الصفحة 34، يمكننا الوصول في Chrome إلى رؤوس HTTP للطلب المرسل من المتصفح:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

تظهر بعض المستجدات في طلب HTTP من العميل:

POST URL HTTP/1.1
استبدل الطلب GET بطلب POST. لم تعد المعلمات موجودة في السطر الأول من الطلب. يمكن ملاحظة أنها موجودة الآن (السطر 14) بعد الطلب HTTP بعد سطر فارغ. ترميزها مطابق للترميز الذي كانت عليه في الطلب GET.
Content-Length
عدد الأحرف "المرسلة"، c.a.d. عدد الأحرف التي سيتعين على خادم الويب قراءتها بعد استلام الرؤوس HTTP لاسترداد المستند الذي يرسله إليه العميل. المستند المعني هنا هو قائمة قيم النموذج.
Content-type
يحدد نوع المستند الذي سيرسله العميل بعد الرؤوس HTTP. يشير النوع [application/x-www-form-urlencoded] إلى أنه مستند يحتوي على قيم النموذج.

هناك طريقتان لنقل البيانات إلى خادم الويب: GET و POST. هل هناك طريقة أفضل من الأخرى؟ لقد رأينا أنه إذا تم إرسال قيم النموذج بواسطة المتصفح باستخدام الطريقة GET، فإن المتصفح يعرض في حقل Adresse الخاص به الطلب URL بالشكل URL?param1=val1&param2=val2&.... يمكن اعتبار ذلك ميزة أو عيبًا:

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

بعد ذلك، سنستخدم طريقة POST بشكل حصري تقريبًا في نماذجنا.

2.6. Conclusion

عرض هذا الفصل مفاهيم أساسية مختلفة لتطوير الويب:

  • التبادل بين العميل والخادم عبر بروتوكول HTTP؛
  • تصميم مستند باستخدام لغة HTML؛
  • تصميم نماذج الإدخال.

لقد رأينا في أحد الأمثلة كيف يمكن للعميل إرسال المعلومات إلى خادم الويب. ولم نوضح كيف يمكن للخادم

  • استرداد هذه المعلومات؛
  • معالجتها؛
  • إرسال رد ديناميكي إلى العميل بناءً على نتيجة المعالجة.

هذا هو مجال برمجة الويب، وهو مجال سنتناوله في الفصل التالي مع عرض تقنية ASP.NET MVC.

https://stahe.github.io
هذا البرنامج التعليمي الذي كتبه Serge Tahé متاح للجمهور وفقًا لشروط Creative Commons Attribution – Non-commercial – ShareAlike 3.0 Unported.