รายวิชา การโปรแกรมบนเว็บ

Web Programming

หน่วยกิต 3(30-45-60)

สไลด์ภาพรวมรายวิชา

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

ศึกษาหลักการและกระบวนการโปรแกรมบนเว็บ ตั้งแต่โครงสร้างการทำงานของอินเทอร์เน็ตและเว็บแอปพลิเคชัน การสร้างหน้าเว็บด้วย HTML5 และ CSS3 การออกแบบเว็บแบบ Responsive การเขียนโปรแกรมฝั่งผู้ใช้ด้วย JavaScript และ TypeScript การพัฒนา Front-end ด้วย Angular การติดต่อ REST API การพัฒนาโปรแกรมฝั่ง Server ด้วย Node.js และ Express หรือ Node-RED การเชื่อมต่อฐานข้อมูล การพิสูจน์ตัวตนและความปลอดภัยของเว็บ การพัฒนาเว็บแอปพลิเคชันแบบ Full Stack การทดสอบ การใช้ Git, Linux และ Docker สำหรับการพัฒนาและนำระบบขึ้นใช้งาน ตลอดจนการประยุกต์ใช้ AI API เพื่อเพิ่มความสามารถให้เว็บแอปพลิเคชัน

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

เมื่อเรียนจบรายวิชา ผู้เรียนสามารถ

  1. อธิบายสถาปัตยกรรมเว็บ Client/Server, HTTP/HTTPS และวงจรการทำงานของ Web Application ได้
  2. สร้างหน้าเว็บด้วย HTML5, CSS3 และ Responsive Design ได้อย่างเหมาะสม
  3. เขียน JavaScript และ TypeScript เพื่อสร้างเว็บที่โต้ตอบกับผู้ใช้ได้
  4. พัฒนา Front-end ด้วย Angular โดยใช้ Component, Service, Routing, Forms และ HTTP Client ได้
  5. สร้าง REST API และเชื่อมต่อฐานข้อมูลสำหรับงาน CRUD ได้
  6. ออกแบบระบบ Login, Authentication, Authorization และแนวทางป้องกันช่องโหว่พื้นฐานได้
  7. ใช้ Git, Linux, Docker และแนวทาง Deployment เพื่อส่งมอบเว็บแอปพลิเคชันได้
  8. พัฒนาโครงงาน Full Stack Web Application เป็นทีมและนำเสนอผลงานได้

ลำดับการเรียน 15 สัปดาห์

ให้เรียนตามลำดับรายสัปดาห์ โดยแต่ละบทประกอบด้วยเป้าหมาย ผลลัพธ์การเรียนรู้ เนื้อหา ตัวอย่าง งานปฏิบัติ แบบทดสอบ และสไลด์ประกอบการสอน

สัปดาห์ หัวข้อ บทเรียน
1 พื้นฐานการโปรแกรมบนเว็บและ Web Application บทที่ 1 บทนำและกระบวนทัศน์การโปรแกรมเว็บ
2 HTML5 โครงสร้างเอกสาร ฟอร์ม และ Semantic Markup บทที่ 2 HTML โครงสร้างเอกสารและมาร์คอัพ
3 CSS3, Layout, Responsive Design และ Mobile First บทที่ 3 CSS แผ่นแบบต่อเรียงและการออกแบบเว็บ
4 JavaScript พื้นฐาน ตัวแปร ฟังก์ชัน และโครงสร้างควบคุม บทที่ 4 JavaScript พื้นฐาน
5 DOM, Event, Form Validation และ Browser APIs บทที่ 5 JavaScript กับ DOM และ Event
6 Async Programming, Fetch API และ TypeScript บทที่ 6 TypeScript พื้นฐานสำหรับ Angular
7 Angular CLI, Component, Template และ Data Binding บทที่ 7 Angular พื้นฐานและโครงสร้างโปรเจกต์
8 Angular Service, Dependency Injection, HttpClient และ RxJS บทที่ 8 Angular Service, DI และ API
9 Angular Routing, Forms, State และ UI Component บทที่ 9 Angular Routing, Forms และ State
10 Node.js, Express, Middleware และ REST API บทที่ 10 Node.js และการโปรแกรมฝั่ง Server
11 SQL, PostgreSQL, ORM และการออกแบบฐานข้อมูล บทที่ 11 ฐานข้อมูลและการเชื่อมต่อ Backend
12 Authentication, JWT, Password Hashing และ Web Security บทที่ 12 Authentication และ Security
13 Full Stack Integration, SSR, CORS, SEO และ Optimization บทที่ 13 Angular Universal และ Full-Stack Integration
14 Testing, Git, CI/CD, Docker และ Deployment บทที่ 14 Testing, DevOps และการ Deploy
15 Project-based Learning, Review และการนำเสนอผลงาน บทที่ 15 โปรเจกต์สุดท้าย Full-Stack Angular Application

โครงงานปลายภาค

ผู้เรียนพัฒนา Full Stack Web Application จำนวน 1 ระบบ โดยทำงานเป็นทีมและใช้กระบวนการพัฒนาแบบนักพัฒนาเว็บจริง ระบบควรมีองค์ประกอบอย่างน้อยดังนี้

  1. Responsive Web Design
  2. Angular Front-end
  3. REST API
  4. PostgreSQL หรือฐานข้อมูลที่เหมาะสม
  5. ระบบ CRUD อย่างน้อย 1 ชุดข้อมูลหลัก
  6. Authentication และ Authorization เบื้องต้น
  7. Git Version Control และประวัติการทำงานของทีม
  8. Docker หรือขั้นตอน Deployment ที่อธิบายซ้ำได้
  9. AI API Integration อย่างน้อย 1 ฟังก์ชัน
  10. การนำเสนอและสาธิตระบบปลายภาค

เกณฑ์ประเมินโครงงาน

ด้านประเมิน สัดส่วน
การวิเคราะห์ปัญหาและออกแบบระบบ 20%
คุณภาพ Front-end และประสบการณ์ผู้ใช้ 20%
คุณภาพ Back-end, API และฐานข้อมูล 20%
ความปลอดภัย การทดสอบ และ Deployment 20%
การทำงานเป็นทีม เอกสาร และการนำเสนอ 20%

กลับหน้าแรก