รายละเอียด
การพัฒนาเว็บด้วยเทคโนโลยีสมัยใหม่ / Modern Web Technology Development
- 17 สัปดาห์
- จำนวนนักศึกษา 0 คน
- อาจารย์ผู้สอน 1 คน
ข้อมูลรายวิชา
- รหัสรายวิชา : ENGSE611
- ชื่อรายวิชา(TH) : การพัฒนาเว็บด้วยเทคโนโลยีสมัยใหม่
- ชื่อรายวิชา (EN) : Modern Web Technology Development
- เทอม / ปีการศึกษา : 1/2567
รายละเอียด
เทสๆ
รายวิชา - การพัฒนาเว็บด้วยเทคโนโลยีสมัยใหม่
บทนำสู่การพัฒนาเว็บ
หัวข้อเรียนรู้ :
1. พื้นฐานโครงสร้างเว็บไซต์ (HTML)
2. การทำงานของเว็บเบราว์เซอร์และเซิร์ฟเวอร์ (HTTP/HTTPS)
3. การแนะนำเครื่องมือพัฒนาเว็บ (VSCode, Git)
กิจกรรม : การติดตั้งเครื่องมือพัฒนาเว็บ
ติดตั้งและตั้งค่า VSCode และ GitHub
การประยุกต์ใช้ CSS เบื้องต้น
หัวข้อเรียนรู้ :
1. พื้นฐานการใช้ CSS ในการจัดรูปแบบเว็บไซต์
2. Selectors และ Specificity ใน CSS
3. การใช้ Flexbox จัดวาง Layout
กิจกรรม : การออกแบบหน้าเว็บด้วย Flexbox
สร้างหน้าเว็บที่ใช้ Flexbox สำหรับจัดวางเนื้อหา
การออกแบบเว็บไซต์แบบ Responsive
หัวข้อเรียนรู้ :
1. Responsive Design เบื้องต้น
2. Media Queries และ Breakpoints
3. การใช้ CSS Grid Layout
กิจกรรม : กิจกรรม : การพัฒนาเว็บไซต์ที่ปรับขนาดได้ตามหน้าจอ
งานที่ต้องทำ : พัฒนาเว็บไซต์ที่รองรับการแสดงผลบนอุปกรณ์ต่าง ๆ
การโปรแกรมฝั่งลูกข่ายด้วย JavaScript
หัวข้อเรียนรู้ :
1. พื้นฐาน JavaScript
2. การจัดการ DOM (Document Object Model)
3. การจัดการ Event ในหน้าเว็บ
กิจกรรม : กิจกรรม : การเขียน JavaScript เพื่อสร้างปฏิสัมพันธ์บนหน้าเว็บ
งานที่ต้องทำ : สร้างหน้าเว็บที่ตอบสนองต่อการคลิกและการพิมพ์ข้อมูล
JavaScript ขั้นสูง
หัวข้อเรียนรู้ :
1. การใช้ ES6+ (Arrow Functions, Promises, Async/Await)
2. การจัดการข้อมูลในรูปแบบ JSON
3. การทำงานกับ API
กิจกรรม : กิจกรรม : ฝึกดึงข้อมูลจาก API ภายนอกและแสดงผลบนเว็บ
งานที่ต้องทำ : พัฒนาเว็บแอปพลิเคชันที่ดึงข้อมูลจาก API สาธารณะ
การพัฒนาเว็บไซต์ที่เชื่อมต่อกับฐานข้อมูล
หัวข้อเรียนรู้ :
1. ความรู้เบื้องต้นเกี่ยวกับฐานข้อมูล (SQL/NoSQL)
2. การออกแบบฐานข้อมูลสำหรับเว็บไซต์
3. การเชื่อมต่อเว็บไซต์กับฐานข้อมูลผ่าน API
กิจกรรม : กิจกรรม : การสร้างฐานข้อมูลด้วย MySQL และเชื่อมต่อกับเว็บไซต์
งานที่ต้องทำ : สร้างฟอร์มรับข้อมูลผู้ใช้และบันทึกข้อมูลลงฐานข้อมูล
การโปรแกรมฝั่งเครื่องแม่ข่าย (Node.js และ Express.js)
หัวข้อเรียนรู้ :
1. การใช้ Node.js และ Express.js ในการพัฒนาเซิร์ฟเวอร์
2. การตั้งค่าเส้นทาง (Routing) ใน Express
3. การจัดการกับการร้องขอ (Requests) และการตอบกลับ (Responses)
กิจกรรม : กิจกรรม : การสร้าง API ด้วย Express.js
งานที่ต้องทำ : พัฒนา REST API ที่สามารถรับและส่งข้อมูลระหว่างฐานข้อมูลและเว็บไซต์
การแปลงข้อมูลระหว่างรูปแบบต่าง ๆ
หัวข้อเรียนรู้ :
1. JSON และ XML
2. การแปลงข้อมูลระหว่างรูปแบบ
3. การส่งข้อมูลระหว่างลูกข่ายและเซิร์ฟเวอร์
กิจกรรม : กิจกรรม : การแปลงข้อมูลจาก JSON เป็น XML และกลับกัน
งานที่ต้องทำ : สร้าง API ที่รับข้อมูล JSON และแปลงเป็น XML
สอบกลางภาค
กิจกรรม :
การประยุกต์ใช้เว็บเซอร์วิส
หัวข้อเรียนรู้ :
1. ความรู้เบื้องต้นเกี่ยวกับ RESTful API
2. การสร้างและใช้เว็บเซอร์วิส
3. การรับส่งข้อมูลระหว่างเว็บเซอร์วิสและฐานข้อมูล
กิจกรรม : กิจกรรม : สร้าง REST API ที่เชื่อมต่อกับฐานข้อมูล
งานที่ต้องทำ : พัฒนาเว็บเซอร์วิสที่ดึงข้อมูลจากฐานข้อมูลและส่งออกเป็น JSON
การรักษาความปลอดภัยบนเว็บไซต์
หัวข้อเรียนรู้ :
1. พื้นฐานความปลอดภัยบนเว็บ (SQL Injection, XSS, CSRF)
2. การป้องกันการโจมตีโดยใช้การยืนยันตัวตน (Authentication)
3. การเข้ารหัสข้อมูล (Encryption)
กิจกรรม : กิจกรรม : การทดสอบช่องโหว่บนเว็บไซต์และการป้องกัน
งานที่ต้องทำ : ปรับปรุงเว็บแอปพลิเคชันให้มีการรักษาความปลอดภัยพื้นฐาน
การประยุกต์ใช้เฟรมเวิร์ค (Frontend Frameworks)
หัวข้อเรียนรู้ :
1. พื้นฐานของเฟรมเวิร์คเช่น React.js หรือ Vue.js
2. การสร้าง Component และการจัดการ State
3. การใช้ API ภายในเฟรมเวิร์ค
กิจกรรม : กิจกรรม : สร้างเว็บแอปพลิเคชันแบบ Single Page Application (SPA) ด้วย React.js หรือ Vue.js
งานที่ต้องทำ : สร้างเว็บแอปพลิเคชันที่ใช้ API และจัดการ State
การประยุกต์ใช้เฟรมเวิร์ค (Backend Frameworks)
หัวข้อเรียนรู้ :
1. Express.js และการจัดการเส้นทาง
2. การทำงานกับฐานข้อมูลใน Express.js
3. การพัฒนา API ที่มีการยืนยันตัวตน
กิจกรรม : กิจกรรม : สร้าง RESTful API ที่ซับซ้อนขึ้นด้วย Express.js
งานที่ต้องทำ : พัฒนาแอปพลิเคชันที่มีระบบยืนยันตัวตนและเชื่อมต่อกับฐานข้อมูล
การทำงานร่วมกันในโปรเจกต์
หัวข้อเรียนรู้ :
1. การทำงานเป็นทีมด้วย Git และ GitHub
2. การจัดการการเปลี่ยนแปลงโค้ดในโปรเจกต์
3. การวางแผนและแบ่งงานในโปรเจกต์
กิจกรรม : กิจกรรม : การทำงานร่วมกันในโปรเจกต์ผ่าน GitHub
งานที่ต้องทำ : ส่งงานผ่าน GitHub พร้อมคำอธิบายการแก้ไข
การปรับใช้แอปพลิเคชันบนคลาวด์
หัวข้อเรียนรู้ :
1. การปรับใช้แอปพลิเคชันบนแพลตฟอร์มคลาวด์ (เช่น Heroku หรือ Vercel)
2. การจัดการกับ Environment Variables
3. การดูแลและตรวจสอบแอปพลิเคชันที่ปรับใช้แล้ว
กิจกรรม : กิจกรรม : การปรับใช้แอปพลิเคชันบน Heroku
งานที่ต้องทำ : ปรับใช้เว็บแอปพลิเคชันที่พัฒนาขึ้นบนแพลตฟอร์มคลาวด์
การนำเสนอโปรเจกต์สุดท้าย
หัวข้อเรียนรู้ :
1. การนำเสนอผลงาน
2. การสรุปบทเรียนและปัญหาที่พบระหว่างการพัฒนา
3. การปรับปรุงและตรวจสอบโค้ด
กิจกรรม : กิจกรรม : การนำเสนอผลงานของนักเรียนและการให้คำแนะนำ
งานที่ต้องทำ : ส่งโปรเจกต์สุดท้ายและสรุปบทเรียน
สอบปลายภาค
กิจกรรม :