แผนการเรียนรู้
/

ความรู้เบื้องต้นเกี่ยวกับ
การพัฒนาเว็บ

Django + HTMX + Alpine.js + Tailwind CSS

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

1
เข้าใจองค์ประกอบสำคัญของการพัฒนาเว็บ
2
แสดงรายการเทคโนโลยี Frontend ได้อย่างน้อย 3 รายการ
3
แสดงรายการเทคโนโลยี Backend ได้อย่างน้อย 3 รายการ
4
แสดงรายการ Storage ได้อย่างน้อย 3 รายการ
5
ติดตั้งโปรแกรมที่จำเป็นสำหรับการพัฒนาเว็บด้วย Django ได้
สัปดาห์ที่ 1

องค์ประกอบสำคัญของการพัฒนาเว็บ

สถาปัตยกรรมเว็บแอปพลิเคชันแบบ 3 ชั้น

Frontend

ส่วนที่ผู้ใช้เห็นและสามารถโต้ตอบได้

User Interface (UI)
User Experience (UX)
Client-Side Logic

Backend

ส่วนที่ประมวลผลและจัดการข้อมูล

Server-Side Logic
API Development
Authentication

Storage

ระบบเก็บข้อมูลและไฟล์

Database
File Storage
Caching

การทำงานร่วมกัน

Frontend ↔ Backend ↔ Storage

เทคโนโลยี Frontend

เครื่องมือสำหรับสร้างส่วนติดต่อผู้ใช้

HTML

HTML

HyperText Markup Language

โครงสร้างและเนื้อหาของเว็บเพจ

CSS

CSS

Cascading Style Sheets

การจัดรูปแบบและการออกแบบ

JS

JavaScript

Programming Language

ความสามารถในการโต้ตอบ

R

React

JavaScript Library

สร้าง UI แบบ Component-based

V

Vue.js

Progressive Framework

Framework ที่เรียนรู้ง่าย

T

Tailwind CSS

Utility-First CSS

CSS Framework แบบ Utility

ในวิชานี้เราจะใช้

HTML Tailwind CSS HTMX Alpine.js

เทคโนโลยี Backend

เครื่องมือสำหรับการประมวลผลฝั่งเซิร์ฟเวอร์

🐍

Python

Programming Language

ภาษาโปรแกรมที่เรียนรู้ง่าย

Django, CherryPy, FastAPI, Flask

JS

JavaScript

most popular language

Nodejs, Bun, Deno

Nextjs, Nuxtjs, Fastify, Expressjs

Go

Go

Modern backend language

created by Google

Buffalo, Beego, Fiber, Gin

PHP

PHP

Server-side Language

ภาษาสำหรับเว็บแอปพลิเคชัน

Laravel, Symfony, Laminas, CodeIgniter

J

Java

Enterprise Language

ภาษาสำหรับระบบขนาดใหญ่

Spring, Struts, JSF, GWT, Play

R

Ruby

Dynamic Language

ภาษาที่เน้นความสวยงาม

Ruby on Rail

หน้าที่ของ Backend

Business Logic

ประมวลผลและตรวจสอบข้อมูล

API Development

สร้าง Interface สำหรับ Frontend

Authentication

จัดการผู้ใช้และสิทธิ์การเข้าถึง

Database Management

จัดการและเชื่อมต่อฐานข้อมูล

เทคโนโลยี Storage

ระบบจัดเก็บข้อมูลสำหรับแอปพลิเคชันเว็บ

SQ

SQLite

Lightweight Database

ฐานข้อมูลแบบฝังตัว ใช้งานง่าย เหมาะกับการพัฒนา

PG

PostgreSQL

Advanced Relational DB

ระบบฐานข้อมูลที่รองรับข้อมูลซับซ้อนและมีประสิทธิภาพสูง

MY

MySQL

Popular Relational DB

ฐานข้อมูลยอดนิยม ใช้กันอย่างแพร่หลายในเว็บแอป

MG

MongoDB

NoSQL Database

จัดเก็บข้อมูลในรูปแบบเอกสาร เหมาะกับข้อมูลที่ยืดหยุ่น

FB

Firebase

Cloud NoSQL Service

บริการฐานข้อมูลบนคลาวด์จาก Google

RD

Redis

In-Memory Database

เก็บข้อมูลในหน่วยความจำ ใช้สำหรับ cache และ queue

หน้าที่ของ Storage

Data Storage

เก็บข้อมูลที่สำคัญของระบบ

Query & Access

เข้าถึงและจัดการข้อมูลผ่านคำสั่ง SQL หรือ API

Data Security

ควบคุมการเข้าถึงข้อมูลและการสำรองข้อมูล

Backup & Recovery

สามารถสำรองและกู้คืนข้อมูลได้เมื่อจำเป็น

เข้าสู่ภาคปฏิบัติ

4 ชั่วโมงเต็ม! เพื่อปูพื้นฐานสู่การเป็นนักพัฒนาเว็บด้วย Django

ทำไมต้องเรียนภาคปฏิบัติ?

  • ได้ลองติดตั้งเครื่องมือด้วยตนเอง
  • เข้าใจขั้นตอนการเริ่มต้น Django จริง
  • แก้ปัญหาเบื้องต้นได้ด้วยตัวเอง
  • เห็นภาพรวมระบบเว็บแอปพลิเคชัน

วันนี้คุณจะได้ทำอะไร?

  • ติดตั้ง Git, Python, VS Code, PyCharm
  • สร้าง Virtual Environment
  • ติดตั้ง Django และรันเซิร์ฟเวอร์
  • สร้างแอปแรกของคุณด้วย Django

เป้าหมายเมื่อจบภาคปฏิบัติ

✔️
ติดตั้งเครื่องมือพัฒนาเว็บได้
📂
สร้างโปรเจกต์ Django ได้
🧠
เข้าใจโครงสร้างของ Django

ติดตั้งเครื่องมือพัฒนาเว็บ

ใช้ winget สำหรับ Windows

Git

ระบบควบคุมเวอร์ชันที่จำเป็นสำหรับโปรเจกต์

winget install Git.Git

Python 3.13

ภาษาหลักสำหรับการพัฒนาเว็บด้วย Django

winget install Python.Python.3.13

Visual Studio Code

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

winget install Microsoft.VisualStudioCode

PyCharm Professional

IDE สำหรับ Python ที่สมบูรณ์แบบ

winget install JetBrains.PyCharm.Professional

หมายเหตุสำคัญ

  • การใช้ winget ต้องใช้ Windows 10 / 11 ที่อัปเดตแล้ว
  • แนะนำให้เปิด PowerShell หรือ Command Prompt ด้วยสิทธิ์ผู้ดูแลระบบ (Run as Administrator)
  • กรณีติดตั้ง PyCharm Professional ต้องมีบัญชี JetBrains ของนักศึกษา

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

สร้างพื้นฐานสำหรับการเริ่มต้นพัฒนาเว็บด้วย 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-admin startproject mysite .

6. เปิดใช้งาน 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

สร้างและทดลอง Django Project

เริ่มต้นโปรเจกต์เว็บด้วยคำสั่งพื้นฐานของ 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-admin startproject mysite .

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

start django web server

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

เปิดเบราว์เซอร์: http://127.0.0.1:8000

3. โครงสร้างพื้นฐานของโปรเจกต์

  • manage.py – ตัวสั่งการหลักของโปรเจกต์
  • mysite/settings.py – การตั้งค่าโปรเจกต์
  • mysite/urls.py – เส้นทาง URL ทั้งระบบ
  • wsgi.py / asgi.py – จุดเริ่มต้นเซิร์ฟเวอร์ (สำหรับ deployment)
  • __init__.py – บอกว่าเป็น Python package

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

  • ควรอยู่ใน virtual environment ขณะทำงาน
  • หากพิมพ์คำสั่งผิด ให้ใช้ปุ่มลูกศร ⬆️ เพื่อเรียกคำสั่งเก่ากลับมา
  • สามารถหยุดเซิร์ฟเวอร์ด้วย Ctrl+C
  • ควรตั้งชื่อโปรเจกต์ด้วยตัวพิมพ์เล็ก เช่น mysite, myproject

สร้างแอปแรก (Create Your First App)

เริ่มเขียนเว็บด้วย Django App แรกของคุณ

1. สร้างแอป Django

ใช้คำสั่ง startapp เพื่อสร้างแอปใหม่

python manage.py startapp blog

2. ลงทะเบียนแอปใน settings.py

เพิ่มชื่อแอปใน INSTALLED_APPS

                INSTALLED_APPS = [
                ...
                'blog',
                ]

3. สร้าง View แรกใน views.py

เขียนฟังก์ชันแสดงข้อความพื้นฐาน

                from django.http import HttpResponse

                def home(request):
                return HttpResponse("สวัสดี Django!")

4. Mapping URL ใน urls.py

เชื่อม URL กับ View ที่สร้างไว้

                from django.urls import path
                from . import views

                urlpatterns = [
                path('', views.home, name='home'),
                ]

จากนั้นเพิ่มในไฟล์ mysite/urls.py: 

                from django.urls import include, path

                urlpatterns = [
                path('', include('blog.urls')),
                ]

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

  • เซฟไฟล์และรันเซิร์ฟเวอร์ใหม่เพื่อทดสอบผลลัพธ์
  • ทดลองเปลี่ยนข้อความในฟังก์ชัน View แล้วดูผลลัพธ์บนเว็บ
  • แยก URL ออกเป็นไฟล์ urls.py ในแต่ละแอปช่วยให้ง่ายต่อการจัดการ
  • หากเจอ error อ่านข้อความในเทอร์มินัลเพื่อแก้ไข

แบบฝึกหัด 1

สร้างแอปชื่อ book และแสดงข้อความบนหน้าเว็บ

ขั้นตอน

  1. สร้างแอป Django ชื่อ book โดยใช้คำสั่ง: 
                      python manage.py startapp book
  2. เพิ่มชื่อแอป 'book' ลงใน INSTALLED_APPS ในไฟล์ settings.py
  3. สร้างฟังก์ชัน View ชื่อ index ใน book/views.py โดยให้แสดงข้อความ "ยินดีต้อนรับสู่ Book App!"
  4. สร้างไฟล์ urls.py ในโฟลเดอร์แอป book และเพิ่ม URL pattern สำหรับฟังก์ชัน index
  5. เชื่อมต่อ book.urls ในไฟล์หลัก mysite/urls.py ให้ URL หลักเรียกไปยังแอป book
  6. รันเซิร์ฟเวอร์และทดสอบการเข้าถึง URL หลัก ควรแสดงข้อความที่เขียนไว้ใน View

คำแนะนำ

  • ตรวจสอบว่าเพิ่มแอป book ใน INSTALLED_APPS แล้ว
  • ใช้คำสั่ง python manage.py runserver เพื่อรันเซิร์ฟเวอร์
  • ถ้าเจอปัญหา error ให้ตรวจสอบข้อความในเทอร์มินัลและแก้ไขตามนั้น
  • ทดลองแก้ไขข้อความใน View เพื่อฝึกการเปลี่ยนแปลงและรีเฟรชหน้าเว็บ

แบบฝึกหัด 2

สร้างแอปชื่อ product และแสดงรายการสินค้า

ขั้นตอน

  1. สร้างแอป Django ชื่อ product โดยใช้คำสั่ง: 
                      python manage.py startapp product
  2. เพิ่มชื่อแอป 'product' ลงใน INSTALLED_APPS ในไฟล์ settings.py
  3. สร้างฟังก์ชัน View ชื่อ product_list ใน product/views.py เพื่อดึงข้อมูลสินค้าและส่งไปยังเทมเพลต
  4. สร้างไฟล์เทมเพลตสำหรับแสดงรายการสินค้าใน product/templates/product/product_list.html
  5. เพิ่ม URL pattern สำหรับ product_list ในไฟล์ product/urls.py และเชื่อมต่อใน mysite/urls.py
  6. รันเซิร์ฟเวอร์และทดสอบการแสดงรายการสินค้า

คำแนะนำ

  • ตรวจสอบการเพิ่มแอป product ใน INSTALLED_APPS แล้ว
  • ลองเพิ่มข้อมูลสินค้าใน Django Admin หรือ shell เพื่อแสดงในหน้าเว็บ
  • ศึกษาวิธีสร้างและใช้เทมเพลต Django เพื่อแสดงข้อมูล
  • ทดลองแก้ไขเทมเพลตและ View เพื่อฝึกการทำงานกับข้อมูล