โครงสร้างของโครงงาน
และการรับส่งข้อมูลใน Django

ทำความเข้าใจระบบ Client-Server, HttpRequest และ HttpResponse

ผลลัพธ์การเรียนรู้

1

เข้าใจรูปแบบการส่งและรับข้อความระหว่างเครื่องผู้ใช้และเครื่องแม่ข่าย (Client-Server)

2

อธิบายองค์ประกอบของข้อมูลคำร้อง (Request) ได้

3

อธิบายองค์ประกอบของข้อมูลส่งกลับ (Response) ได้

4

สร้างโครงงานและเขียนคำสั่งรับส่งข้อมูลได้

สัปดาห์ที่ 2

รู้จักกับ Client-Server Model

รูปแบบการสื่อสารพื้นฐานในการพัฒนาเว็บแอปพลิเคชัน

ส่วนประกอบหลัก

🖥️ Client: อุปกรณ์ของผู้ใช้ เช่น เบราว์เซอร์ ทำหน้าที่ร้องขอข้อมูล
🗄️ Server: เครื่องแม่ข่ายที่ให้บริการข้อมูลและประมวลผลคำร้อง
🌐 HTTP Protocol: ช่องทางการสื่อสารระหว่าง Client และ Server

Client → Request → Server → Response → Client

องค์ประกอบของ
HTTP Request

คำร้องที่ Client ส่งไปยัง Server เพื่อขอข้อมูลหรือกระทำบางอย่าง

ส่วนประกอบหลักของ Request

➡️ Request Line: ระบุ Method (GET, POST, ฯลฯ) และ URL ที่ร้องขอ
📋 Headers: ข้อมูลเพิ่มเติม เช่น Browser, Language, Token
🧾 Body: เนื้อหาข้อมูลที่ส่งไป (ใช้ใน POST, PUT)

              GET /hello/ HTTP/1.1
              Host: example.com
              User-Agent: Mozilla/5.0
              Accept: text/html

องค์ประกอบของ
HTTP Response

ข้อมูลที่ Server ส่งกลับมายัง Client หลังจากประมวลผลคำร้อง (Request)

ส่วนประกอบหลักของ Response

🧾 Status Line: สถานะการตอบกลับ เช่น 200 OK, 404 Not Found
📋 Headers: ข้อมูลเกี่ยวกับ Response เช่น Content-Type, Set-Cookie
📦 Body: เนื้อหาหลัก เช่น HTML, JSON, ภาพ ฯลฯ

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

              <html><body>Hello Client</body></html>

Django:
HttpRequest & HttpResponse

Django ใช้คลาส HttpRequest และ HttpResponse สำหรับรับและตอบสนองคำร้องจาก Client

HttpRequest

request.method: GET, POST, ...
request.GET: ข้อมูลจาก query string
request.POST: ข้อมูลจาก form
request.headers: ส่วนหัวคำร้อง

HttpResponse

HttpResponse(): สร้างการตอบกลับแบบพื้นฐาน
status_code: กำหนดรหัสสถานะ
content_type: ระบุประเภทของเนื้อหา (text/html, application/json)

              # views.py
              from django.http import HttpResponse

              def hello(request):
              return HttpResponse("ข้อความจาก Django!")

โครงสร้างของโครงงาน Django

เมื่อสร้างโปรเจกต์ Django จะมีโครงสร้างไดเรกทอรีที่ช่วยจัดการระบบได้อย่างเป็นระบบ

              myproject/
              ├── manage.py                  # ตัวจัดการคำสั่งหลัก
              ├── myproject/                 # โฟลเดอร์การตั้งค่าโปรเจกต์
              │   ├── __init__.py
              │   ├── settings.py            # การตั้งค่าโปรเจกต์
              │   ├── urls.py                # เส้นทาง URL หลัก
              │   └── wsgi.py / asgi.py      # จุดเริ่มต้นของเซิร์ฟเวอร์
              ├── myapp/                     # โฟลเดอร์แอปพลิเคชัน (สร้างแยก)
              │   ├── admin.py
              │   ├── apps.py
              │   ├── models.py              # ฐานข้อมูล
              │   ├── views.py               # ฟังก์ชันสำหรับจัดการคำร้อง
              │   ├── urls.py                # เส้นทางของแอป
              │   └── templates/             # เทมเพลต HTML

วงจรการทำงานของ Django เมื่อรับคำร้อง (Request Lifecycle)

Django จัดการคำร้อง (Request) ด้วยขั้นตอนที่ชัดเจน ตั้งแต่ผู้ใช้ส่ง URL ไปยังการแสดงผล

1. ผู้ใช้ (Client)

พิมพ์ URL หรือกดลิงก์ → เบราว์เซอร์ส่ง HTTP Request ไปยัง Server

2. Django URLs

urls.py ทำหน้าที่จับคู่ URL ที่ร้องขอกับ View ที่ต้องเรียกใช้

3. View Function

views.py จะรับคำร้องและประมวลผลข้อมูล ส่งกลับ HttpResponse

4. Response

เซิร์ฟเวอร์ส่งข้อมูลกลับไปยังผู้ใช้ในรูปแบบ HttpResponse

🔄 การทำงานนี้เกิดขึ้นทุกครั้งเมื่อผู้ใช้ร้องขอข้อมูลผ่านเว็บเบราว์เซอร์

ลำดับการทำงานของ Django
ตั้งแต่ Run Server จนถึง View

เข้าใจการไหลของคำขอ (request) จากผู้ใช้จนถึงการตอบกลับ (response)

ลำดับการทำงาน

manage.py runserver – เริ่มต้น Django development server
ผู้ใช้เรียก URL เช่น http://localhost:8000/
mysite/urls.py – ตรวจสอบ URL ว่าตรงกับ pattern ไหน
myapp/urls.py – ส่งต่อ URL pattern ไปยังแอปที่เกี่ยวข้อง
myapp/views.py – ประมวลผลคำขอและส่งกลับ HttpResponse

กระบวนการทำงานเบื้องหลัง Django

HttpRequest คืออะไร?

เป็นวัตถุ (object) ที่ Django สร้างขึ้นเมื่อผู้ใช้ส่งคำร้องมายังเซิร์ฟเวอร์ โดย Django จะรวบรวมข้อมูลทั้งหมดจากคำร้องนั้นให้อยู่ในรูปของ HttpRequest

🔸 request.method

บอกว่าเป็นการร้องขอแบบใด เช่น GET, POST

🔸 request.GET / request.POST

ข้อมูลที่ผู้ใช้ส่งมาผ่าน URL หรือแบบฟอร์ม

🔸 request.path

URL path ที่ร้องขอ เช่น /hello/

🔸 request.headers

ข้อมูลหัวข้อของคำร้อง เช่น User-Agent, Content-Type

🎯 ข้อมูลใน HttpRequest มีความสำคัญต่อการประมวลผลและตอบกลับผู้ใช้ได้อย่างถูกต้อง

HttpResponse คืออะไร?

เป็นวัตถุที่ Django ใช้ส่งข้อมูลกลับไปยังฝั่งผู้ใช้ (Client) หลังจากประมวลผลคำร้อง (HttpRequest) เสร็จเรียบร้อยแล้ว

🔹 Content (เนื้อหา)

เนื้อหาที่จะถูกส่งกลับ เช่น HTML, JSON, Text

🔹 Status Code

สถานะการตอบกลับ เช่น 200 OK, 404 Not Found

🔹 Headers

ข้อมูลส่วนหัว เช่น Content-Type: text/html

🔹 Cookies

สามารถแนบคุกกี้ไปกับการตอบกลับได้

📤 HttpResponse ช่วยให้เราควบคุมสิ่งที่ผู้ใช้จะเห็นหรือได้รับเมื่อเรียกใช้งานระบบ

ตัวอย่างโค้ด รับและส่งข้อมูล (HttpRequest & HttpResponse)

ตัวอย่างฟังก์ชันใน views.py ที่รับคำร้องและตอบกลับข้อความง่าย ๆ

            from django.http import HttpResponse

            def hello_view(request):
            if request.method == "GET":
            name = request.GET.get('name', 'Guest')
            return HttpResponse(f"สวัสดี, {name}!")
            else:
            return HttpResponse("โปรดใช้วิธี GET ในการร้องขอข้อมูล")

💡 ฟังก์ชันนี้ตรวจสอบว่าเป็นคำร้องแบบ GET แล้วดึงข้อมูลพารามิเตอร์ name เพื่อแสดงข้อความต้อนรับ

สรุป: การรับส่งข้อมูลใน Django

Client-Server Model: เครื่องผู้ใช้ส่งคำร้อง (HttpRequest) และเครื่องแม่ข่ายตอบกลับ (HttpResponse)
HttpRequest: ประกอบด้วยข้อมูลคำร้อง เช่น วิธีการร้องขอ (GET, POST), URL, headers และข้อมูลฟอร์ม
HttpResponse: ส่งกลับข้อมูล ผลลัพธ์ สถานะ และ headers ไปยัง client
Django Project Structure: แบ่งเป็นโปรเจกต์และแอป พร้อมจัดการ routing และ views เพื่อรับส่งข้อมูล
การเขียน View Function: ใช้รับ HttpRequest และสร้าง HttpResponse เพื่อตอบกลับข้อมูล

📌 ทดลองเขียนโค้ดเพื่อฝึกการรับส่งข้อมูล และอ่านเอกสารเพิ่มเติมที่ Django HTTP documentation

แบบฝึกหัดวัดความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับระบบ Client-Server, HttpRequest, HttpResponse และ HTML

1. Request ที่ส่งจาก Client จะถูกจัดเก็บในตัวแปรอะไรใน Django?

A. request B. response C. server D. client

2. ส่วนประกอบของ HttpRequest ประกอบด้วยอะไรบ้าง?

A. method, headers, body B. status_code, html, cookies C. url, port, debug D. path, view, error

3. คำสั่งใดใน Django ใช้ส่งข้อความกลับเป็น HTML?

A. JsonResponse B. render C. redirect D. input()

4. อะไรคือบทบาทของ HttpResponse ในกระบวนการรับส่งข้อมูล?

A. ใช้ส่งคำร้องไปยัง Server B. ใช้รับข้อมูลจากฐานข้อมูล C. ใช้ส่งผลลัพธ์กลับไปยัง Client D. ใช้บันทึก log การทำงาน

*ให้ผู้เรียนเลือกคำตอบที่ถูกต้องที่สุด

เริ่มภาคปฏิบัติ
สร้างโครงงาน Django และรับส่งข้อมูล

นักศึกษาจะได้ลงมือสร้างโปรเจกต์ Django และทดลองใช้ HttpRequest / HttpResponse

กิจกรรมในภาคปฏิบัติ

สร้าง Django project ชื่อ mysite และ web app ชื่อ myapp
กำหนด URL และ View
รับค่าจากผู้ใช้ผ่าน URL หรือฟอร์ม
แสดงผลตอบกลับโดยใช้ HttpResponse
[API dev tool] httpie postman
ทดลองส่งค่าจาก client และแสดงใน server

ลงมือทำจริง 4 ชั่วโมง

เตรียมเครื่องมือและสภาพแวดล้อม

สร้างพื้นฐานสำหรับการเริ่มต้นพัฒนาเว็บด้วย Django

1. สร้างโฟล์เดอร์

สร้างโครงงาน mysite

mkdir mysite
cd mysite

2. สร้าง Virtual Environment

สร้างสภาพแวดล้อมแยกสำหหรับโครงงานในโฟลเดอร์ .venv

python -m venv .venv
# หรือ บน Windows
py -m venv .venv

3. เปิดใช้งาน Virtual Environment

เปิดใช้งานสำหรับการพัฒนาโครงงาน

# Windows
.venv/Scripts/activate
# macOS / Linux
source .venv/bin/activate

4. ติดตั้ง Django

Framework สำหรับพัฒนาเว็บด้วย Python

pip install django

5. สร้าง project

create django project

django-amdin startproject mysite .

6. สร้างเว็บแอปพลิเคชันชื่อ myapp

start a django application

python manage.py startapp myapp

7. เปิดใช้งาน web server

start django web server

# Windows
python manage.py runserver 80
# macOS / Linux
python manage.py runserver 8000

คำแนะนำเพิ่มเติม

ใช้ requirements.txt เพื่อเก็บรายการแพ็กเกจที่ใช้
ตั้งชื่อโปรเจกต์และแอปด้วยตัวอักษรเล็ก ไม่เว้นวรรค เช่น myproject, homepage
เปิดใช้งาน virtual environment ทุกครั้งก่อนพัฒนา
บันทึกคำสั่งที่ใช้ลงในไฟล์ README.md

ตัวอย่างโค้ด
แสดงข้อมูล HttpRequest

              from django.http import HttpResponse

              def request_info_view(request):
              print("=== HttpRequest Information ===")
              print(f"Method: {request.method}")
              print(f"Path: {request.path}")
              print(f"Full Path: {request.get_full_path()}")
              print(f"Scheme: {request.scheme}")
              print(f"Host: {request.get_host()}")
              print(f"User Agent: {request.META.get('HTTP_USER_AGENT', '')}")
              print(f"Remote Address: {request.META.get('REMOTE_ADDR')}")
              print(f"GET Parameters: {request.GET}")
              print(f"POST Data: {request.POST}")
              print(f"Cookies: {request.COOKIES}")
              print(f"Headers:")
              for header, value in request.headers.items():
              print(f"  {header}: {value}")

              return HttpResponse("HttpRequest information printed to console.")

ตัวอย่างจาก Django View

โครงสร้างของโครงงาน และการรับส่งข้อมูลใน Django