reveal.js

# โครงสร้างอินเทอร์เน็ตและ HTTP/HTTPS

หัวข้อ 2 · Web Programming

---

## แนวคิดหลัก

เมื่อผู้ใช้พิมพ์ URL เบราว์เซอร์ต้องแปลงชื่อโดเมนเป็น IP Address สร้างการเชื่อมต่อ ส่ง request ไปยัง server และรับ response กลับมาแสดงผล

---

## จาก URL ถึงหน้าเว็บ

```text
ผู้ใช้พิมพ์ URL
-> Browser ถาม DNS
-> ได้ IP Address
-> Browser ติดต่อ server
-> ส่ง HTTP Request
-> รับ HTTP Response
-> แสดงผลหน้าเว็บ
```

---

## DNS

Domain Name System แปลงชื่อโดเมนให้เป็น IP Address

```text
example.com -> 93.184.216.34
```

ถ้าไม่มี DNS ผู้ใช้ต้องจำ IP Address ของเว็บไซต์จำนวนมาก ซึ่งไม่สะดวกและดูแลยาก

---

## TCP/IP

- **IP** รับผิดชอบที่อยู่และการส่ง packet ไปยังปลายทาง
- **TCP** ทำให้การส่งข้อมูลน่าเชื่อถือ ตรวจลำดับข้อมูล และส่งซ้ำเมื่อข้อมูลสูญหาย

อินเทอร์เน็ตจึงส่งข้อมูลเป็นชิ้นเล็ก ๆ แล้วประกอบกลับได้อย่างถูกต้อง

---

## HTTP Request/Response

```text
Client ส่ง HTTP Request
-> Server ประมวลผล
-> Server ส่ง HTTP Response
-> Client แสดงผล
```

---

## ตัวอย่าง HTTP

Request:

```http
GET /products HTTP/1.1
Host: example.com
```

Response:

```http
HTTP/1.1 200 OK
Content-Type: text/html

<h1>Products</h1>
```

---

## HTTP Methods และ Status Code

| Method | ใช้สำหรับ |
|---|---|
| GET | ดึงข้อมูล |
| POST | ส่งข้อมูลใหม่ |
| PUT | แก้ไขข้อมูลทั้งชุด |
| DELETE | ลบข้อมูล |

| Status | ความหมาย |
|---:|---|
| 200 | สำเร็จ |
| 301 | ย้าย URL ถาวร |
| 404 | ไม่พบ resource |
| 500 | server มีข้อผิดพลาด |

---

## HTTPS

HTTPS คือ HTTP ที่เข้ารหัสด้วย TLS/SSL

- ลดความเสี่ยงจากการดักอ่าน
- ลดความเสี่ยงจากการแก้ไขข้อมูลระหว่างทาง
- สำคัญกับ login, payment, dashboard และ API ที่ใช้ token

---

## กิจกรรม

เปิด DevTools แท็บ Network แล้วเข้าเว็บไซต์ 1 แห่ง จากนั้นจด request อย่างน้อย 5 รายการ โดยระบุ method, status code และ type ของไฟล์

---

## จบบทเรียน

<a href="/web-programming/01-introduction/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>