สร้างระบบยืมคืนออนไลน์

สร้างระบบยืม–คืนอุปกรณ์ออนไลน์ ภายในโรงเรียน โดยใช้ Google App Script + HTML/JavaScript

ออกแบบ UI ให้สวยงามในธีมสีฟ้าพาสเทล–เหลืองอ่อน มีไอคอนและกรอบโค้งมนทั้งหมด

โลโก้ https://img5.pic.in.th/file/secure-sv1/unnamed0d7a8c9f21292edc.th.jpg

ฟีเจอร์ที่ต้องการ:

1) ระบบยืมอุปกรณ์

- เลือกชื่อผู้ยืม (พิมพ์ค้นหาได้)

- ระบุเลขประจำตัว / ห้องเรียน

- เลือกรายการอุปกรณ์จาก Dropdown เพิ่มเองจากแท็บชีต

- ระบบตรวจสอบว่า “ของชิ้นนี้ถูกยืมอยู่หรือไม่”

- ระบุวัน–เวลาที่ยืม

- อัปโหลดภาพ

- ปุ่มบันทึก พร้อม SweetAlert แจ้งผลสำเร็จ/ผิดพลาด

ระบบบันทึกลง Google Drive อัตโนมัติ ID : 1J0hM4pwx3Ftv1n3UoyGN_ARUm1MvmgUN

แสดงรูปภาพแบบ https://lh5.googleusercontent.com ให้สร้างโฟเดอร์แยกตามชั้น และชื่อ

2) ระบบคืนอุปกรณ์

- ค้นหาจากชื่อผู้ยืม หรือรายการอุปกรณ์ที่ยังไม่คืน

- แสดงข้อมูลรายการที่ยืมค้างไว้

- เลือกคืน และบันทึกวัน–เวลาคืน

- อัปเดตสถานะอุปกรณ์เป็น “พร้อมให้ยืม”

- SweetAlert แจ้งสถานะสำเร็จ

3) ระบบจัดการอุปกรณ์ (สำหรับครู/ผู้ดูแล) รหัส login : admin1234

- เพิ่มอุปกรณ์ใหม่

- แก้ไขข้อมูลอุปกรณ์

- ลบอุปกรณ์

- แสดงจำนวนอุปกรณ์ทั้งหมด / ถูกยืมอยู่ / เหลือพร้อมให้ยืม

- มีตารางพร้อมค้นหาได้

- รายงานบุคคล แยกห้องได้ พิมพ์รายงานเป็น PDF ได้

4) ระบบบันทึกลง Google Sheet อัตโนมัติ ID : 1u_o4heTHm8kp9zy6UQ9gzr-_W_os0qNrBDQc8A1BzMQ

- ชีตที่ 1: รายการอุปกรณ์ (ชื่ออุปกรณ์ / หมวดหมู่ / สถานะ / หมายเหตุ)

- ชีตที่ 2: ประวัติการยืม–คืน (ผู้ยืม / อุปกรณ์ / วันยืม / วันคืน / สถานะ)

- ชีตที่ 3: รายชื่อผู้ยืม (นักเรียน/ครู)

- ชีตที่ 4: รายการอุปกรณ์

5) ฟังก์ชันตรวจสอบสถานะ

- ถ้าถูกยืมอยู่ → ไม่อนุญาตยืมซ้ำ

- ถ้าคืนแล้ว → อัปเดตสถานะเป็น “ว่าง”

6) หน้า Dashboard

- จำนวนอุปกรณ์ทั้งหมด

- จำนวนอุปกรณ์ที่พร้อมยืม

- จำนวนที่ถูกยืมอยู่

- Top 10 อุปกรณ์ที่ถูกยืมบ่อยที่สุด (กราฟแท่ง)

- รายการยืมค้างคืน (เน้นสีแดง)

7) ดีไซน์ UI

- ธีมฟ้าพาสเทล + เหลืองอ่อน

- ปุ่มโค้งมน

- การ์ดแสดงข้อมูล

- ตารางแบบ Responsive

- SweetAlert แสดงสถานะทั้งหมด

8) ให้ตัวอย่างโค้ด

- Google App Script (doGet(), doPost(), อ่าน–เขียนชีต, รีเทิร์น JSON)

- HTML/JS (fetch API, ฟอร์มยืม–คืน, ฟังก์ชัน validate, สถานะอุปกรณ์)

- ตัวอย่างชีตที่ต้องสร้าง

- โครงสร้างโปรเจคทั้งหมด

ต้องการผลลัพธ์ดังนี้:

- หน้าเว็บโครงสร้างสมบูรณ์

- โค้ด GAS พร้อมใช้งาน

- ฟอร์มยืม–คืนใช้งานได้จริง

- Dashboard ใช้งานได้

- UI ในธีมฟ้าพาสเทล–เหลืองอ่อน

ส่วน Footer แสดงข้อความ:

ระบบควรใช้ Bootstrap 5 และแสดงผลได้ดีทั้งบน Desktop และ Mobile

สร้างระบบยืมคืนออนไลน์

ฟอร์มรายชื่อติดต่อ