รายวิชา 4122306

การเขียนโปรแกรมบนเว็บ (Web Programming)

ผู้สอน: ผู้ช่วยศาสตราจารย์ ดร. นัฐพงศ์ ส่งเนียม • เนื้อหา HTML, CSS, JavaScript, Vue 3 พร้อมเอกสาร PDF และสื่อเสียงประกอบการสอน

ภาพรวมรายวิชา บทเรียน การประเมิน เอกสาร/สื่อ
Web Programming

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

การพัฒนาเว็บแอปพลิเคชันสมัยใหม่ตั้งแต่พื้นฐานโครงสร้างหน้าเว็บ (HTML), การตกแต่ง (CSS), ไปจนถึงการโต้ตอบด้วย JavaScript และเฟรมเวิร์ก Vue 3 รวมถึงแนวคิด Client-Server, REST API และการเชื่อมต่อฐานข้อมูลสำหรับงานจริง

  • เข้าใจสถาปัตยกรรมเว็บ Frontend / Backend
  • พัฒนา UI/UX ที่ตอบสนอง (Responsive) และเข้าถึงได้
  • สร้าง Single Page Application ด้วย Vue 3
  • ปฏิบัติจริงผ่านแบบฝึกหัดและโครงงาน
ข้อมูลรายวิชา
รหัสวิชา: 4122306
หน่วยกิต: 3(2-2-5)
รูปแบบ: บรรยาย + ปฏิบัติ
ผู้สอน
ผู้ช่วยศาสตราจารย์ ดร. นัฐพงศ์ ส่งเนียม
xnattapong@gmail.com

แผนบทเรียน

มีสื่อ PDF และเสียงประกอบในบางบท
บทที่ 1: พื้นฐานการพัฒนาเว็บ

แนวคิดเว็บแอป, Client-Server, เทคโนโลยีหลัก และภาพรวมเครื่องมือที่ใช้

PDF เสียงสรุป
บทที่ 2: เครื่องมือ & HTML เบื้องต้น

แนะนำ VS Code, ส่วนประกอบ HTML, โครงสร้างเอกสาร, แท็กพื้นฐาน

PDF แบบฝึกหัด (เร็วๆนี้)
บทที่ 3: ภาษา HTML

โครงสร้าง, ข้อความ, ลิงก์, รูปภาพ, ตาราง, ฟอร์ม และการจัดระเบียบ

PDF เสียงสรุป (เร็วๆนี้)
บทที่ 4: CSS

การเลือกตัวเลือก, กล่อง, เลย์เอาต์, Responsive และ Utility

PDF (เร็วๆนี้) แบบฝึกหัด (เร็วๆนี้)
บทที่ 5: Frontend ด้วย Vue 3

แนวคิด Reactive, SFC, Router, State และเชื่อมต่อ API

PDF เสียงสรุป (เร็วๆนี้)
บทที่ 6-10

JavaScript พื้นฐาน, DOM, Fetch API, การทดสอบ, Deploy และ Best Practices

PDF เสียง
รวมเอกสารและสื่อทั้งหมด

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

กลางภาค

ครอบคลุมบทที่ 1-3 (พื้นฐานเว็บ, เครื่องมือ, HTML)

ข้อสอบกลางภาค (เผยแพร่ภายหลัง)
ปลายภาค

ประยุกต์ใช้ตั้งแต่ HTML/CSS/JS ถึง Vue 3 และเชื่อมต่อ API

ข้อสอบปลายภาค (เผยแพร่ภายหลัง)

โครงงานรายวิชา

เลือกหัวข้อพัฒนาเว็บแอปโดยใช้เทคโนโลยีที่เรียนมา (HTML/CSS/JS/Vue 3 เป็นต้น) พร้อมนำเสนอ Requirement, Wireframe, Demo และคู่มือผู้ใช้

  • ทีมละ 2-4 คน
  • ส่งงานเป็นโค้ด + เอกสารสรุป + วิดีโอ 5 นาที
  • เกณฑ์: ความสมบูรณ์, คุณภาพโค้ด, UX, ความคิดสร้างสรรค์
เอกสารแนวทางโครงงาน (เร็วๆนี้)
Project

เอกสารและสื่อประกอบ

PDF รวม

ดาวน์โหลดเอกสารประกอบรายวิชาที่เผยแพร่แล้ว

บทที่ 1 บทที่ 2 บทที่ 3 บทที่ 4-10 (เร็วๆนี้)
สื่อเสียง

สรุปประเด็นสำคัญของแต่ละบท (ถ้ามี)

บทที่ 1: ภาพรวมการพัฒนาเว็บ
การบ้าน & แบบฝึกหัด

เอกสารแบบฝึกหัดจะทยอยปล่อยในแต่ละสัปดาห์