Four methods, four operations

أربع طرق، أربع عمليات

Slides 8 and 9 map the application's CRUD operations onto HTTP methods. Slide 8 lists them GET first, slide 9 lists them in CRUD order. Same mapping:

تربط الشريحتان 8 و9 عمليات CRUD في التطبيق بـ HTTP methods. الشريحة 8 تبدأ بـ GET، والشريحة 9 ترتّبها بترتيب CRUD. والربط نفسه في الحالتين:

احفظ: POST = Create، وGET = Read، وPUT = Update / Replace، وDELETE = Delete. والعمودان الأخيران من محاضرة 01: GET وحده safe، وGET وPUT وDELETE كلها idempotent، أما POST فليس هذا ولا ذاك.

The last two columns come from Lecture 01 (page in-02). Safe means the request does not change server state: reading only. Idempotent means sending the request twice has the same intended effect as sending it once, so a client may retry it after a lost reply.

العمودان الأخيران من المحاضرة 01 (صفحة in-02). Safe تعني أن الطلب لا يغيّر حالة الخادم، أي قراءة فقط. وIdempotent تعني أن إرسال الطلب مرتين له نفس الأثر المقصود لإرساله مرة واحدة، فيستطيع العميل إعادته إذا ضاع الرد.

• PUT /lamps/123 with "state = on", sent twice: lamp is on. Same as once. Idempotent.
• DELETE /lamps/123 sent twice: the lamp is gone after the first; the second changes nothing more (it may answer 404, but the server state is the same). Idempotent.
• POST /visits sent twice: two visits are created with two IDs. Not idempotent.

PUT /lamps/123 بقيمة "state = on" مرتين: المصباح يعمل، كأنها مرة واحدة، فهو idempotent. وDELETE /lamps/123 مرتين: يُحذف المصباح في المرة الأولى ولا يتغير شيء بعدها في الثانية (قد يكون الرد 404 لكن حالة الخادم نفسها)، فهو idempotent أيضًا. أما POST /visits مرتين فيُنشئ زيارتين بمعرّفين مختلفين، فهو ليس idempotent.

The example: fetching http://localhost/index.html

المثال: جلب http://localhost/index.html

Slide 10 sets up the example. The client asks for http://localhost/index.html. The web server fetches the resource index.html from its file system. Here the resource is simply a static file. In the diagram, the only arrow between endpoint and resource is Read: this is a GET.

الشريحة 10 تجهّز المثال: العميل يطلب http://localhost/index.html، والـ web server يجلب الـ resource المسمّى index.html من نظام ملفاته. هنا الـ resource مجرد static file. وفي الرسم السهم الوحيد بين الـ endpoint والـ resource هو Read، أي أنه طلب GET.

Anatomy of the request (slide 11)

تشريح الطلب (الشريحة 11)

GET /index.html HTTP/1.1
Host: localhost
Accept: text/html

سطر الطلب فيه ثلاثة أجزاء: GET هو HTTP method، ثم /index.html حيث / هو HTTP route (الجذر) وindex.html هو الـ resource، ثم HTTP/1.1 وهو إصدار البروتوكول. وبعده الـ headers: Host: localhost يحدد الـ server، وAccept: text/html يحدد نوع المحتوى الذي يريده العميل.

Notice the server name is not in the request line. The client opened a connection to localhost already, and the Host header repeats the name (HTTP/1.1 requires it, because one machine can host many sites). A GET normally has no body.

لاحظ أن اسم الخادم غير موجود في سطر الطلب. العميل فتح الاتصال مع localhost مسبقاً، والـ Host header يكرر الاسم (وHTTP/1.1 يشترطه لأن جهازاً واحداً قد يستضيف عدة مواقع). وطلب GET عادة ليس له body.

Anatomy of the response (slide 12)

تشريح الاستجابة (الشريحة 12)

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 500

<html>
...
</html>

1. Status line: HTTP/1.1 (version), 200 (status code), OK (status message). The code is what programs check; the message is a reason phrase for humans.

   سطر الحالة: HTTP/1.1 هو الإصدار، و200 هو status code، وOK هو status message. البرامج تقرأ الرمز، والرسالة نص موجّه للبشر.

2. Header fields: Content-Type: text/html says the body is HTML. Content-Length: 500 says the body is 500 bytes long, so the client knows where the message ends.

   حقول الـ header: Content-Type: text/html تعني أن الـ body من نوع HTML. وContent-Length: 500 تعني أن طول الـ body هو 500 بايت، فيعرف العميل أين تنتهي الرسالة.

3. Blank line, then the body: the actual content of index.html, from <html> to </html>.

   سطر فارغ، ثم الـ body: المحتوى الفعلي لملف index.html من <html> إلى </html>.

Slide 12 puts the status line inside the brace labelled Header. Strictly, HTTP calls it the status line and the two lines under it the header fields, but for this course "header" means everything above the blank line.

الشريحة 12 تضع سطر الحالة داخل القوس المسمّى Header. بدقة، HTTP يسمّيه status line ويسمّي السطرين تحته header fields، لكن في هذا المقرر كلمة header تعني كل ما فوق السطر الفارغ.

<p>     3 bytes
Hi      2 bytes
</p>    4 bytes
total   3 + 2 + 4 = 9   ->   Content-Length: 9

Status codes worth recognising

رموز حالة تستحق أن تعرفها

The first digit is the class: 2xx success, 3xx redirect, 4xx client error, 5xx server error. Only 200 OK is on the slides; the rest are context so you can reason about the smart-home error case on the next page.

الرقم الأول يحدد الفئة: 2xx نجاح، و3xx إعادة توجيه، و4xx خطأ من العميل، و5xx خطأ من الخادم. الشرائح تذكر 200 OK فقط، والباقي للسياق حتى تفهم حالة الخطأ في مثال المنزل الذكي في الصفحة التالية.