Prompt : ระบบบันทึกข้อมูลกิจกรรมนักเรียน พร้อมหลังบ้านจัดการ
คุณคือ AI System Analyst และ Full-Stack Developer
ให้ช่วยออกแบบและสร้าง “ระบบบันทึกข้อมูลกิจกรรมนักเรียนออนไลน์”
โดยมีทั้งส่วนผู้ใช้งาน (นักเรียน/ครูที่ปรึกษา) และระบบหลังบ้าน (ผู้ดูแล/ฝ่ายกิจการนักเรียน)
🎯 วัตถุประสงค์
- บันทึกกิจกรรมของนักเรียนเป็นรายบุคคล
- ใช้เป็นหลักฐานการเข้าร่วมกิจกรรม / ชั่วโมงกิจกรรม / คุณลักษณะอันพึงประสงค์
- ผู้ดูแลสามารถตรวจสอบ อนุมัติ แก้ไข และสรุปรายงานได้
────────────────────
👤 ส่วนที่ 1 : หน้าระบบบันทึกกิจกรรมนักเรียน (Frontend)
────────────────────
ฟังก์ชันที่ต้องมี
1. ระบบล็อกอิน
- นักเรียน (กรอกรหัสนักเรียน / เลขประจำตัว)
- ครูที่ปรึกษา
2. ฟอร์มบันทึกกิจกรรม
- รหัสนักเรียน
- ชื่อ – สกุล
- ระดับชั้น / ห้อง
- ประเภทกิจกรรม (วิชาการ / จิตอาสา / กีฬา / ชุมนุม / พิเศษ)
- ชื่อกิจกรรม
- วันที่เข้าร่วม
- จำนวนชั่วโมงกิจกรรม
- สถานที่จัดกิจกรรม
- หน่วยงาน/ครูผู้รับผิดชอบ
- แนบหลักฐาน (ภาพ / PDF)
- หมายเหตุเพิ่มเติม
3. ปุ่มดำเนินการ
- บันทึกข้อมูล
- แก้ไขข้อมูล (ก่อนอนุมัติ)
- ดูประวัติกิจกรรมของตนเอง
- แสดงสถานะ (รอตรวจสอบ / อนุมัติแล้ว / ไม่ผ่าน)
4. UX/UI
- รองรับมือถือ
- ใช้สีสุภาพ เหมาะกับระบบโรงเรียน
- แจ้งเตือนสถานะด้วย Alert
────────────────────
🛠️ ส่วนที่ 2 : ระบบหลังบ้านจัดการ (Admin / Backend)
────────────────────
สิทธิ์ผู้ดูแลระบบ
- ครูกิจกรรม / ฝ่ายกิจการนักเรียน / ผู้บริหาร
ฟังก์ชันหลังบ้าน
1. Dashboard
- จำนวนกิจกรรมทั้งหมด
- นักเรียนที่บันทึกแล้ว / ยังไม่บันทึก
- ชั่วโมงกิจกรรมสะสม (แยกตามระดับชั้น)
2. จัดการข้อมูลกิจกรรม
- ดูรายการกิจกรรมทั้งหมด
- ค้นหา / กรอง (ระดับชั้น, ห้อง, ประเภทกิจกรรม)
- ตรวจสอบหลักฐาน
- อนุมัติ / ไม่อนุมัติ
- แก้ไข / ลบข้อมูล
3. ระบบจัดการผู้ใช้
- เพิ่ม/แก้ไข นักเรียน
- เพิ่ม/แก้ไข ครูที่ปรึกษา
- กำหนดสิทธิ์ผู้ใช้งาน
4. รายงานและสรุปผล
- รายงานชั่วโมงกิจกรรมรายบุคคล
- รายงานตามระดับชั้น / ห้อง
- Export เป็น PDF / Excel
- พิมพ์รายงานได้
────────────────────
🗄️ โครงสร้างข้อมูล (Database ตัวอย่าง)
────────────────────
- students(id, student_id, name, class, room)
- activities(id, student_id, activity_type, activity_name, date, hours, place, teacher, evidence, status)
- users(id, username, role)
- logs(id, action, user, datetime)
────────────────────
⚙️ เทคโนโลยีแนะนำ
────────────────────
- Frontend: HTML / CSS / JavaScript / Bootstrap
- Backend: Google Apps Script หรือ Firebase / Node.js
- Database: Google Sheet / Firestore / MySQL
- Authentication: Google Login หรือ Session-based
────────────────────
📌 ผลลัพธ์ที่ต้องการจาก AI
────────────────────
- โครงสร้างระบบครบถ้วน
- ตัวอย่าง UI
- ตัวอย่างโค้ด (Frontend + Backend)
- แนะนำแนวทางนำไปใช้งานจริงในโรงเรียน
