ปีการศึกษา 2569 · ภาคการศึกษาต้น

การพัฒนาเว็บแอปพลิเคชั่น Development of Web Application

🏛️ มหาวิทยาลัยนราธิวาสราชนครินทร์
📚 คณะวิทยาการจัดการ
🔢 07-034-233
📍 ห้อง FMS504
👨‍🏫 อาจารย์ ดร.สุรเชษฐ์ สังขพันธ์
📋

ข้อมูลรายวิชา

🎓
หน่วยกิต
3
(2–2–5)
📅
สัปดาห์
15
สัปดาห์
🧪
ปฏิบัติการ
11
Lab
🏫
ห้องเรียน
FMS504
ตึกคณะ วจก.
📖
วิชาพื้นฐาน
ไม่มี
🗂️
กลุ่มวิชา
วิชาชีพ
กลุ่มบังคับ
📝

คำอธิบายรายวิชา

หลักการเขียนโปรแกรมบนเว็บด้วยโปรแกรมฝั่งเครื่องให้บริการ (Server side script) เพื่อติดต่อกับฐานข้อมูลจากหลากหลายผู้ผลิต การสร้างโปรแกรมเพื่อเพิ่ม แก้ไขและลบข้อมูลในฐานข้อมูล การสร้างการทำงานที่มีการ Upload files การใช้งาน Session และการประยุกต์ใช้กับระบบชื่อผู้ใช้ หลักการนำบางส่วนของโปรแกรมมาใช้ใหม่ พื้นฐานของเว็บเซอร์วิสและการนำเว็บเซอร์วิสไปใช้ให้เกิดประโยชน์

Principles of web programming using server-side scripting to interact with various database systems, creating programs to add, edit, and delete database records, file uploading, session management, user authentication, code reusability, fundamentals of web services and their practical applications.

🎯

ผลลัพธ์การเรียนรู้ที่คาดหวัง (CLOs)

CLO1
วิเคราะห์ความต้องการทางธุรกิจและผู้ใช้ และนำความรู้มาประยุกต์ในการออกแบบเว็บแอปพลิเคชัน
PLO1
CLO2
วิเคราะห์ความต้องการของระบบ และออกแบบฐานข้อมูลและสถาปัตยกรรมของเว็บแอปพลิเคชัน
PLO2
CLO3
พัฒนาเว็บแอปพลิเคชันด้วยภาษาฝั่งเซิร์ฟเวอร์ เชื่อมต่อฐานข้อมูล (CRUD) อัปโหลดไฟล์ จัดการ Session ระบบสมาชิก และ Web Service
PLO3
CLO4
ออกแบบส่วนติดต่อผู้ใช้ (UI/UX) และสื่อประกอบเว็บให้น่าใช้และตอบสนองต่อผู้ใช้
PLO4
CLO5
นำเสนอและจัดทำเอกสารโครงงานเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ
PLO5
CLO6
ทำงานเป็นทีมในการพัฒนาเว็บ โดยแสดงภาวะผู้นำและผู้ตามที่ดี
PLO6
CLO7
แสดงออกถึงความซื่อสัตย์ มีวินัย และจรรยาบรรณวิชาชีพ โดยคำนึงถึงความปลอดภัยของข้อมูลและลิขสิทธิ์
PLO7
CLO กลยุทธ์/วิธีการสอน วิธีการวัดและประเมินผล เครื่องมือ
CLO1 บรรยาย, วิเคราะห์กรณีศึกษาความต้องการของธุรกิจ/ผู้ใช้ สอบและการวิเคราะห์กรณีศึกษา ข้อสอบ, แบบประเมินกรณีศึกษา
CLO2 ฝึกออกแบบฐานข้อมูลและสถาปัตยกรรมระบบ ประเมินการออกแบบ ER / โครงสร้างระบบ ใบงาน, เกณฑ์ประเมิน (Rubric)
CLO3 ปฏิบัติการพัฒนาเว็บในห้องแล็บ, การเรียนรู้แบบโครงงาน ประเมินชิ้นงานเว็บและโครงงาน เกณฑ์ประเมินปฏิบัติการ/โครงงาน
CLO4 ฝึกออกแบบ UI/UX และสื่อประกอบเว็บ ประเมินงานออกแบบส่วนติดต่อผู้ใช้ เกณฑ์ประเมินการออกแบบ
CLO5 มอบหมายการนำเสนอและจัดทำเอกสารโครงงาน ประเมินการนำเสนอและเอกสาร เกณฑ์ประเมินการนำเสนอ/รายงาน
CLO6 งานกลุ่มและการแบ่งบทบาทหน้าที่ในการพัฒนา ประเมินการทำงานร่วมกันและภาวะผู้นำ/ผู้ตาม แบบประเมินการทำงานกลุ่ม (peer/self)
CLO7 สอดแทรกจรรยาบรรณ ความปลอดภัยข้อมูล และสังเกตพฤติกรรม สังเกตและประเมินพฤติกรรม วินัย และความซื่อสัตย์ แบบสังเกตพฤติกรรม, แบบประเมินการมีส่วนร่วม
🏫

วิธีการสอนและกิจกรรมการเรียนรู้

📢
บรรยาย
Lecture & กรณีศึกษา
🧪
ปฏิบัติการแล็บ
Lab 1–11 ทุกสัปดาห์
🚀
โครงงาน
Project-based Learning
👥
งานกลุ่ม
ทำงานร่วมกันเป็นทีม
🎤
นำเสนอผลงาน
Presentation & รายงาน
🔍
ค้นคว้าด้วยตนเอง
Self-directed Learning
📆

แผนการสอน 15 สัปดาห์

สัปดาห์ หัวข้อ ประเภท CLOs
1 แนะนำรายวิชา & Modern Web Stack (Vite, React, Hono, Supabase) ทฤษฎี CLO1
2 ทบทวน HTML, CSS, JavaScript & ES2022 (Arrow Fn, Async/Await, Modules) Lab 1 CLO1CLO4
3 Vite + React: ตั้งค่าโปรเจกต์, JSX & Component เบื้องต้น Lab 2 CLO3
4 React State + Form + TanStack Router (Routing & Navigation) Lab 3 CLO3
5 Hono API บน Cloudflare Workers (Routing, Middleware, JSON) Lab 4 CLO3
6 Supabase: ออกแบบฐานข้อมูล PostgreSQL & SQL เบื้องต้น Lab 5 CLO2CLO3
7 CRUD ครบวงจร — Hono เชื่อมต่อ Supabase (GET/POST/PUT/DELETE) Lab 6 CLO3
8 TanStack Query: useQuery, useMutation & Server State Management Lab 7 CLO3
9 Supabase Auth: Login, Register, Session & Protected Routes Lab 8 CLO3CLO7
10 Supabase Storage: อัปโหลดไฟล์และจัดการรูปภาพ Lab 9 CLO3
11 Shadcn/ui + Tailwind CSS: ออกแบบ UI ที่สวยงามและ Responsive Lab 10 CLO4
12 Custom Hooks, Reusability & Error Handling Lab 11 CLO3
13 โครงงานเว็บแอปพลิเคชันทางธุรกิจ: วิเคราะห์ ออกแบบ และพัฒนา (ทีม) โครงงาน CLO1CLO2CLO6
14 นำเสนอโครงงานเว็บและจัดทำเอกสารประกอบ นำเสนอ CLO5CLO6
15 Deploy บน Cloudflare Workers, Testing & สรุปรายวิชา สรุป CLO3CLO7
📊

การประเมินผล

ปฏิบัติการ Lab 1–11
30%
สอบกลางภาค
20%
สอบปลายภาค
30%
Mini Project (โครงงาน)
10%
จิตพิสัย / จรรยาบรรณ
10%
รายการประเมิน สัดส่วน รายละเอียด CLOs
ปฏิบัติการ (Lab 1–11) 30% ส่งงานปฏิบัติการทุกสัปดาห์ (11 ครั้ง) CLO3CLO4
สอบกลางภาค 20% ทฤษฎีและปฏิบัติ สัปดาห์ที่ 8 CLO1CLO2CLO3
สอบปลายภาค 30% ทฤษฎีและปฏิบัติ สัปดาห์ที่ 15 CLO1CLO2CLO3
Mini Project (โครงงาน) 10% พัฒนาและนำเสนอโครงงานทีม สัปดาห์ที่ 13–14 CLO5CLO6
จิตพิสัย / จรรยาบรรณ 10% ความตรงต่อเวลา วินัย และจรรยาบรรณวิชาชีพ ตลอดภาค CLO7
รวม 100%
เกณฑ์การให้เกรด
A ≥ 80 B+ 75–79 B 70–74 C+ 65–69 C 60–64 D+ 55–59 D 50–54 F < 50
📚

เอกสารอ้างอิงและทรัพยากรการเรียน

เอกสารอ้างอิงหลัก (Official Docs)

แหล่งเรียนรู้เพิ่มเติม

เครื่องมือที่ใช้ในรายวิชา

  • Visual Studio Code
  • GitHub / GitHub Desktop
  • Wrangler CLI (Cloudflare)
  • Google Classroom (มอบหมายงาน)
👨‍🏫

ผู้สอน

อาจารย์ ดร.สุรเชษฐ์ สังขพันธ์
อาจารย์ผู้รับผิดชอบรายวิชาและอาจารย์ผู้สอน · คณะวิทยาการจัดการ
📞 081-897-2515
🕐 วันศุกร์ 13:00–15:00 น. (ห้องพักอาจารย์ชั้น 2)