# ความรู้พื้นฐานในการทำเว็บ

ในบทความนี้จะเป็นการรวบรวม **`ความรู้ในการทำเว็บ`** ขั้นพื้นฐานสำหรับคนทำเว็บนะครัช ซึ่งถ้าเราเข้าใจเนื้อหาในส่วนนี้ มันจะช่วยให้เราแก้ปัญหาได้ไวและตรงจุดมากขึ้นนั่นเอง โดยเนื้อหาแต่ละส่วนจะแบ่งเป็นบทความย่อยๆลงไปนะ (อัพเดทเมื่อไหร่ก็จะเอามาลงในบทความย่อยของหน้านี้แหละ)

## 🤨 คอมมันคุยกันยังไง ?

เวลาที่คอม 2 เครื่องมันคุยกันจริงๆมีรายละเอียดยุบยิบเลย แต่สิ่งที่เราควรรู้คือ เวลาที่เรากดอะไรซักอย่างบนหน้าเว็บไป เช่นเข้าเว็บขอพร (พรฮับ) สิ่งที่จะเกิดขึ้นก็คือ **ตัวเรา (client)** จะส่งคำขอไปยัง**เซิฟเวอร์ (server)** ของเว็บตัวนั้น แล้วเซิฟเวอร์ก็จะให้พรกลับมา โดยทั้งหมดนี่เขาเรียกว่า **Request & Response** ตามรูปด้านล่างนั่นเอง

![](https://479516123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-M1lfqlFTvI3gmheTI_q%2F-M-ZQG-4iJGdGcCj1l4M%2Fimage.png?generation=1583529179953381\&alt=media)

## 😒 รู้ไปทำไม ?

นั่นดิแต่ พร ที่ได้มันแหล่มมากเลยนะ! ไปๆเข้าเรื่อง ... ถ้าเราเข้าใจการทำงานของฝั่ง Client และ Server ว่าตอนมันคุยกันจริงๆมันทำงานยังไงได้ถูกต้อง เราก็จะสามารถทำเรื่อง security ได้ง่ายขึ้น รู้ว่าเวลามันรับส่งข้อมูลมันมีวิธีอะไรบ้าง และ ถ้ามันพังขึ้นมา เราจะรู้ได้ยังไงว่ามันพังเพราะฝั่งไหนทำพังนั่นเอง (จะได้ด่าได้ถูกทีม 😂) ดังนั้นไปลงรายละเอียดต่อนิดนุง

## 🔥 ลงลึกขึ้นอีกนิส

การที่ client ทำการส่งคำขอพร (request) ไปหาเซิฟเวอร์นั้น ตัว client เองจะสามารถ **`แนบข้อมูล`** ไปให้เซิฟเวอร์ได้ (รายละเอียดของที่แนบไปได้มีเยอะม๊วก ดังนั้นขอเก็บไว้เป็นบทความย่อยนะ)

![](https://479516123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-M1lfqlFTvI3gmheTI_q%2F-Lp0xU4Xi9vE5Xj19MU2%2Fimage.png?generation=1583529171898796\&alt=media)

ฝั่งเซิฟเวอร์เมื่อได้รับ request จาก client มันก็จะเอาข้อมูลที่แนบมา ไปประมวลผลต่อว่าจะให้พรอะไรกลับไปนั่นเอง พอมันเลือกได้แล้ว เซิฟเวอร์ก็จะส่งผลลัพท์ (response) ที่เหมาะสมกลับไป พร้อมกับสิ่งที่เรียกว่า **`Status code`** ด้วย

![](https://479516123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-M1lfqlFTvI3gmheTI_q%2F-LqvwwNVdg6-01iLqrML%2Fimage.png?generation=1583529138427898\&alt=media)

ซึ่งเจ้า Status code นี่แหละคือจุดเริ่มต้นที่ทุกคนต้องได้เจอ แม้ว่าจะเป็นแค่ผู้ใช้ธรรมดาก็เห็นจนชินตาเสียด้วยเชื่อมิ เพียงแค่เราอาจไม่รู้ตัวเท่านั้นเอง เช่นรูปนี้

![https://www.google.com/saladpuk](https://479516123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-M1lfqlFTvI3gmheTI_q%2F-LpK72yatfPnKPMFczUR%2Fimage.png?generation=1583529180144064\&alt=media)

หรือใครเข้า GitHub บ่อยๆ (ไม่ใช่เว็บขอพรแล้วนะ แต่ฮับเหมือนกัน) ก็อาจจะเคยเห็นรูปนี้อยู่บ้าง

![](https://479516123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-M1lfqlFTvI3gmheTI_q%2F-LoANLMt2bRbeq6RJx_n%2Fimage.png?generation=1583529181126347\&alt=media)

ซึ่งเจ้า 2 รูปด้านบนนี่แหละคือส่วนหนึ่งของ Status code รหัส 404 นั่นเอง

## 🤔 Status codes คือไย ?

มันคือรหัสตัวเลขที่เกิดจากฝั่งเซิฟเวอร์ส่งกลับมาให้ client โดยมีวัตถุประสงค์ให้รู้ว่า **request ที่ส่งมานั้นเกิดอะไรขึ้น** นั่นเอง ซึ่งเราที่เป็น developer ถ้าเราอ่าน status code พวกนี้ออก มันจะช่วยทำให้เรารู้ได้ทันทีว่า ที่เว็บมันล่ม หรือ ทำงานไม่ได้ เกิดจากฝั่งไหนนั่นเอง แต่ว่าเจ้ารหัสนี้มีเยอะม๊วกกกกกกก จะไปนั่งไล่จำมันหมดก็ปวดกบาลเสียเปล่าๆ (ผมคนนึงล่ะไม่นั่งท่องมันแน่ๆ) แต่มันมีเคล็ดในการจำอยู่นั่นก็คือ **`จำตระกูล`** ของมันแทนไล่จำทีละตัว

โดยปรกติรหัส status codes ต่างๆจะเป็นตัวเลข 3 หลัก โดยตัวเลขตัวแรกก็คือ ตระกูล ของมันนั่นเอง ดังนั้นมาลองไล่ดูกันว่ามันมีตระกูลอะไรบ้าง และแต่ละตระกูคืออะไร รู้แล้วได้ประโยชน์ยังไง

### 1️⃣ ตระกูล 1xx (Information)

เป็นการบอกให้รู้ว่า เซิฟเวอร์ได้รับ request แล้ว แต่กระบวนการทำงานยังไม่จบ ดังนั้นตัว client ต้องรอไปก่อนนะ โดยรายละเอียดของตระกูลนี้มีตามนี้

| รหัส | ความหมาย            |
| ---- | ------------------- |
| 100  | Continue            |
| 101  | Switching Protocols |
| 102  | Processing          |
| 103  | Checkpoint          |

### 2️⃣ ตระกูล 2xx (Successful)

เป็นการบอกให้รู้ว่า request ที่ส่งมานั้น เซิฟเวอร์ได้รับและดำเนินการให้เรียบร้อยแล้ว วางใจได้ โดยรายละเอียดของตระกูลนี้มาตามนี้

{% hint style="success" %}
เห็นตระกูลนี้ให้สบายใจหายห่วงได้ เพราะฝั่ง **Frontend** และ **Backend** คุยกันรู้เรื่องเรียบร้อย
{% endhint %}

| รหัส | ความหมาย                      |
| ---- | ----------------------------- |
| 200  | OK                            |
| 201  | Created                       |
| 202  | Accepted                      |
| 203  | Non-Authoritative Information |
| 204  | No Content                    |
| 205  | Reset Content                 |
| 206  | Partial Content               |

### 3️⃣ ตระกูล 3xx (Redirection)

เป็นการบอกให้รู้ว่า request ที่ส่งมานั้น มันจำเป็นต้องไปทำงานที่อื่นให้เรียบร้อยก่อนถึงจะกลับมาทำงานตัวนี้ต่อได้ เช่น เวลาเรา login เว็บอื่นด้วย Facebook มันจะพาเราเด้งไปหน้า Facebook เพื่อให้เรา login ให้เสร็จก่อน ค่อยเด้งกลับมาที่หน้าเว็บนั้นอีกที (แต่บางกรณีมันก็เด้งเราไปหน้าอื่นเฉยๆเลยก็เป็นได้) โดยรายละเอียดของตระกูลนี้มีตามนี้

| รหัส | ความหมาย           |
| ---- | ------------------ |
| 300  | Multiple Choices   |
| 301  | Moved Permanently  |
| 302  | Found              |
| 303  | See Other          |
| 304  | Not Modified       |
| 306  | Switch Proxy       |
| 307  | Temporary Redirect |
| 308  | Resume Incomplete  |

### 4️⃣ ตระกูล 4xx (Client Error)

(มาแล้วความหรรษา) เป็นการบอกให้รู้ว่า Client เอ็งส่งบ้าอะไรขึ้นมาหาเซิฟเวอร์ฟระ เช่น ลืมใส่ header หรืออะไรก็ตามที่ไม่ตรงกับที่ตกลงกับฝั่ง Backend ไว้ โดยรายละเอียดของตระกูลนี้มีตามนี้

{% hint style="success" %}
เวลาเจอ status code ในกลุ่มนี้ แสดงว่าฝั่ง Frontend ส่งอะไรบางอย่างมาแปลกๆ ไม่ตรงตามที่ Backend เตรียมไว้ให้ ดังนั้นไปตรวจที่ฝั่ง Frontend ได้เลย
{% endhint %}

{% hint style="danger" %}
บางทีฝั่ง Frontend ก็เขียนทุกอย่างถูกต้องตามที่คุยกันแล้ว แต่ทีม Backend ดันไม่ได้ทำตามที่คุย มันก็จะเกิด status code ตระกูลนี้ได้เหมือนกัน เช่น คุยกันว่าจะรับ parameter 2 ตัว เป็น GET นะ แต่ backend ดันไปเขียนเป็นรับ parameter 1 ตัว หรือดันไปเขียนเป็น POST แทนไรงี้
{% endhint %}

| รหัส | ความหมาย                        |
| ---- | ------------------------------- |
| 400  | Bad Request                     |
| 401  | Unauthorized                    |
| 402  | Payment Required                |
| 403  | Forbidden                       |
| 404  | Not Found                       |
| 405  | Method Not Allowed              |
| 406  | Not Acceptable                  |
| 407  | Proxy Authentication Required   |
| 408  | Request Timeout                 |
| 409  | Conflict                        |
| 410  | Gone                            |
| 411  | Length Required                 |
| 412  | Precondition Failed             |
| 413  | Request Entity Too Large        |
| 414  | Request-URI Too Long            |
| 415  | Unsupported Media Type          |
| 416  | Requested Range Not Satisfiable |
| 417  | Expectation Failed              |

### 5️⃣ ตระกูล 5xx (Server Error)

(ถึงคราวตรูเอาคืนบ้างละ) เป็นการบอกให้รู้ว่า ฝั่งเซิฟเวอร์ล่มนะจ๊ะ เพราะอะไรก็ตามแต่มันเกิด Exception ขึ้นในฝั่ง Backend นั่นเอง โดยรายละเอียดของตระกูลนี้มีตามนี้

{% hint style="success" %}
เห็นโค้ดตระกูลนี้ให้วิ่งไปดูโค้ดฝั่ง **Backend** ได้เลยว่ามันเกิด Exception ที่ตรงไหน
{% endhint %}

{% hint style="danger" %}
ทีม **Frontend** ก็อย่าพึ่งวางใจ เพราะที่เขาล่มมันอาจจะเป็นที่เอ็งส่งอะไรแปลกๆไปหาเขาก็ได้ และทีม Backend จะรอให้แต่ทีม Frontend แก้ให้ก็ไม่ได้แม้เขาจะส่งแปลกๆมาให้ก็ตาม เพราะหน้าที่ของ Backend คือการไม่เชื่อใจ Frontend ดังนั้นสุดท้ายเอ็งก็ต้องไปเขียน Validation ไว้ด้วยเช่นกัน
{% endhint %}

| รหัส | ความหมาย                        |
| ---- | ------------------------------- |
| 500  | Internal Server Error           |
| 501  | Not Implemented                 |
| 502  | Bad Gateway                     |
| 503  | Service Unavailable             |
| 504  | Gateway Timeout                 |
| 505  | HTTP Version Not Supported      |
| 511  | Network Authentication Required |

## 💖 สรุป

การที่เราเข้าใจการทำงานของ HTTP/HTTPS protocal มันจะช่วยทำให้เราทำงานได้ถูกต้องมากขึ้น และ ยิ่งเราเข้าใจรหัส Status codes ในแต่ละตระกูล ก็จะช่วยทำให้เรา (ตามไปด่ามัน) ตามไปเช็คจุดที่เกิด error ต่างได้เร็วขึ้นนั่นเอง

{% hint style="danger" %}
**โปรดระวัง**\
แม้ว่าตัว Status codes แต่ละตระกูลจะบอกชัดเจนอยู่แล้วว่ามันเกิดอะไรขึ้น แต่ก็ไม่ได้หมายความว่ามันจะถูกเสมอไป เช่นเราได้ status code กลับมาเป็นตระกูล 200 (Successful) มันอาจจะเกิดจากที่ทีม Backend เขียนโค้ดเปล่าๆเอาไว้ มันก็จะถือว่าทำงานไม่เกิดข้อผิดพลาดใดๆเช่นกันนะจ๊ะ
{% endhint %}

![อย่าเอาแต่โทษกัน ลองเช็ค Status Code ดู](https://479516123-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-M0iEDd87zmgpn8tZBPS%2F-M0iGP1a9DESd2Hn2w-K%2F3pzdc1.jpg?alt=media\&token=e9aa6215-c0d0-4cae-be66-e552a726b2e6)