Embedded Files
หน่วยที่ 1: รู้จักเว็บแอปพลิเคชันคืออะไร
วัตถุประสงค์:
- เข้าใจความแตกต่างระหว่างเว็บไซต์กับเว็บแอปพลิเคชัน
- รู้จักส่วนประกอบพื้นฐานของเว็บแอป
เนื้อหา:
- เว็บไซต์ vs เว็บแอปพลิเคชัน (ตัวอย่าง: Facebook, Google Keep)
- Frontend (ส่วนที่ผู้ใช้เห็น) และ Backend (ส่วนที่ทำงานเบื้องหลัง)
- ฐานข้อมูลคืออะไร? (เก็บข้อมูล เช่น ชื่อ, รายละเอียด)
- แนวคิด CRUD:
- **C**reate = เพิ่มข้อมูล
- **R**ead = แสดงข้อมูล
- **U**pdate = แก้ไขข้อมูล
- **D**elete = ลบข้อมูล
หน่วยที่ 2: พื้นฐาน HTML และ CSS
วัตถุประสงค์:
- สร้างหน้าเว็บพื้นฐานได้
- ตกแต่งให้ดูสวยงามและใช้งานได้ดี
เนื้อหา:
- HTML: โครงสร้างเว็บ (หัวข้อ, ย่อหน้า, ฟอร์ม, ปุ่ม)
- CSS: สี, แบบอักษร, จัดตำแหน่ง, ทำให้ตอบสนอง (Responsive)
- ฝึกสร้างหน้า "เพิ่มข้อมูล", "แสดงรายการ"
หน่วยที่ 3: ภาษา JavaScript เบื้องต้น
วัตถุประสงค์:
- ทำให้เว็บมีปฏิกิริยาเมื่อผู้ใช้คลิกหรือกรอกข้อมูล
- เข้าใจการทำงานของ DOM
เนื้อหา:
- ตัวแปร, คำสั่ง if, ลูป
- ฟังก์ชันพื้นฐาน
- การอ่านค่าจากฟอร์ม (เช่น ชื่อ, รายละเอียด)
- การแสดงผลข้อมูลบนหน้าเว็บโดยไม่ต้องโหลดใหม่
หน่วยที่ 4: รู้จักฐานข้อมูล
วัตถุประสงค์:
- เข้าใจว่าข้อมูลถูกเก็บไว้ที่ไหน
- ใช้ฐานข้อมูลจริงโดยไม่ต้องติดตั้งเซิร์ฟเวอร์
เนื้อหา:
- ฐานข้อมูลคืออะไร? (ตาราง, แถว, คอลัมน์)
- การเชื่อมต่อเว็บกับ ฐานข้อมูล
- การอ่าน/เขียนข้อมูลผ่าน JavaScript
หน่วยที่ 5: สร้างระบบ CRUD จริง
วัตถุประสงค์:
- รวมความรู้ทั้งหมดมาสร้างแอปพลิเคชันจริง
- ฝึกคิดเชิงตรรกะและแก้ปัญหา
ตัวอย่างโปรเจกต์:
- ระบบจัดการโน้ต (Note App)
- สมุดรายชื่อเพื่อน
- รายการสิ่งของที่ต้องซื้อ (Shopping List)
ฟีเจอร์ที่ต้องมี:
1. **เพิ่มข้อมูล** – กรอกฟอร์ม → บันทึกลงฐานข้อมูล
2. **แสดงข้อมูล** – ดึงข้อมูลจากฐาน → แสดงเป็นรายการ
3. **แก้ไขข้อมูล** – คลิกปุ่ม "แก้ไข" → อัปเดตข้อมูล
4. **ลบข้อมูล** – คลิก "ลบ" → ลบออกจากฐานข้อมูล
หน่วยที่ 6: การทดสอบและเผยแพร่เว็บ
วัตถุประสงค์:
- ตรวจสอบว่าแอปทำงานถูกต้อง
- แชร์ผลงานให้คนอื่นใช้งานได้
เนื้อหา:
- การทดสอบฟังก์ชัน CRUD
- การแก้ไขข้อผิดพลาด (Debugging)
- วิธีอัปโหลดเว็บขึ้นโฮสต์ฟรี เช่น:
- GitHub Pages (สำหรับ frontend)
- Firebase Hosting (รองรับทั้ง frontend + backend)
Page updated
Google Sites
Report abuse