คลังโค้ดครู DevTech

ระบบบริหารการยืม-คืน Tablet

ระบบบริหารการยืม-คืน Tablet สำหรับโครงการ 1 อำเภอ 1 โรงเรียนคุณภาพ ✨ จุดเด่นของระบบ ✅ จัดการข้อมูล Tablet ในระบบเดียว ✅ นำเข้าข้อมูลจากไฟล์ Excel ของภาครัฐได้ทันที ✅ บันทึกข้อมูลผู้ได้รับจัดสรรเครื่องอย่างละเอียด ✅ รองรับการยืม-คืน พร้อมพิมพ์เอกสาร AWAT-03 และ AWAT-05 เป็น PDF ✅ Dashboard แสดงสถิติการยืม-คืนแบบเรียลไทม์ ✅ รายงานรายเดือน รายปี และส่งออก Excel ได้ ✅ ระบบผู้ใช้งานและกำหนดสิทธิ์การเข้าถึง (Admin / Staff) ✅ ตั้งค่าข้อมูลโรงเรียน โลโก้ และปีการศึกษาได้เอง 💡 ออกแบบให้รองรับการใช้งานจริง เนื่องจาก Tablet ทั้งหมดได้รับการจัดสรรมาก่อนแล้ว ระบบจึงถูกออกแบบให้สามารถบริหารข้อมูลจากสถานะของเครื่องได้ทันที และสร้างประวัติการยืม-คืนย้อนหลังอัตโนมัติเมื่อมีการคืนเครื่องครั้งแรก ทำให้ไม่ต้องเสียเวลาบันทึกข้อมูลย้อนหลังทีละรายการ 🛠️ เทคโนโลยีที่ใช้ * PHP 8.2 * MySQL (PDO) * Bootstrap 5 * mPDF * PhpSpreadsheet ข้อมูลเพิ่มเติม : https://www.facebook.com/share/p/1CczvCjBh1/

ระบบงานแผนงานและงบประมาณ สำหรับสำนักงานเขตพื้นที่การศึกษา

ขอบเขตระบบ: ระบบงานแผนงานและงบประมาณ สำหรับสำนักงานเขตพื้นที่การศึกษา (เว็บแอปพลิเคชัน PHP + MySQL) 1. ระบบผู้ใช้และสิทธิ์ เข้าสู่ระบบด้วย Username/Password พร้อม Captcha 4 บทบาท: ผู้ดูแลระบบ, เจ้าหน้าที่แผนงาน/การเงิน, หัวหน้ากลุ่มงาน, ผู้ใช้กลุ่มงาน จัดการผู้ใช้งานและกลุ่มงาน 2. ข้อมูลพื้นฐาน ปีงบประมาณ ยุทธศาสตร์/นโยบาย (ระดับชาติ, แผนแม่บท, สพฐ., สพม.) ราคากลาง (ใช้อ้างอิงเวลาทำรายการงบประมาณ) 3. งบโครงการพัฒนาคุณภาพ สร้างโครงการและเชื่อมโยงกับยุทธศาสตร์ แบ่งกิจกรรมหลัก/ย่อย พร้อมรายการงบประมาณรายกิจกรรม ส่งอนุมัติและอนุมัติโครงการ (ร่าง → ส่งอนุมัติ → อนุมัติ) ตั้งเบิกตามรายการงบ และพิมพ์ใบตัดงบ 2 แบบ (แบบปกติ / แบบยอดคงเหลือจริงรวมเงินคืน) 4. งบบริหารจัดการประจำ ตั้งแผนงานและรายการย่อย บันทึกการเบิกจ่ายและพิมพ์ใบตัดงบ แสดงยอดจัดสรร เบิกจ่าย คืนเงิน และคงเหลือสุทธิ 5. งบประมาณกลาง สพฐ. บันทึกรายการรับเงินโอนจัดสรร บันทึกการเบิกจ่ายพร้อมประวัติรายครั้ง และพิมพ์ใบตัดงบ 6. ระบบคืนเงินเหลือจ่าย แยก 3 ประเภท: งบบริหารจัดการประจำ, โครงการพัฒนาคุณภาพ, โครงการสนับสนุนจาก สพฐ. บันทึกรายการคืนเงิน เก็บประวัติรายครั้ง และปรับยอดคงเหลือในทุกหน้าที่เกี่ยวข้องอัตโนมัติ 7. รายงานและแดชบอร์ด Dashboard ภาพรวมงบประมาณ (จัดสรร/เบิกจ่าย/คงเหลือ) แยกตามประเภทงบ ภาพรวมงบประมาณรวมทั้งปี สรุปรายกลุ่มงาน ข้อมูลเพิ่มเติม : https://www.facebook.com/share/p/19aP2YH19d/

ระบบเลือกวิชาเสรี/เพิ่มเติม/ชุมนุม ออนไลน์

📚 ระบบเลือกวิชาเสรี/เพิ่มเติม/ชุมนุม ออนไลน์ ระบบให้นักเรียนเลือกลงทะเบียนวิชาเลือกเสรี/เพิ่มเติม/ชุมนุม ผ่านเว็บไซต์ได้ด้วยตนเอง โรงเรียนกำหนดช่วงเวลาเปิด–ปิด จำนวนที่นั่ง และจำนวนวิชาที่เลือกได้ ลดงานเอกสารและการนับรายชื่อด้วยมือ รองรับการใช้งานทั้งคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ พร้อมแสดงข้อมูลวันที่เป็น พ.ศ. ตลอดทั้งระบบ ⭐ จุดเด่นของระบบ • เลือกวิชาได้ด้วยตัวเอง — นักเรียนเข้าสู่ระบบด้วยรหัสนักเรียน เห็นจำนวนที่นั่งคงเหลือแบบทันที และลงทะเบียนได้เมื่อระบบเปิด • แสดงเฉพาะวิชาของชั้นเรียน — แสดงรายวิชาตามระดับชั้น ม.1–ม.6 ของนักเรียน ลดความผิดพลาดในการเลือกวิชาต่างระดับชั้น • ควบคุมจำนวนที่นั่ง — ระบบตรวจสอบจำนวนที่นั่งทุกครั้งก่อนลงทะเบียน แม้มีนักเรียนลงทะเบียนพร้อมกันก็ไม่เกินจำนวนที่กำหนด • เปิด–ปิดอัตโนมัติ — กำหนดวันและเวลาเปิด–ปิดล่วงหน้า ระบบแสดงสถานะ "เปิดรับ" หรือ "ปิดรับ" ให้เห็นทันที • รองรับวันที่แบบ พ.ศ. — หน้าแรก หน้านักเรียน ข่าวประชาสัมพันธ์ และรายงาน แสดงวันที่เป็น พ.ศ. 👨‍🎓 สำหรับนักเรียน • เข้าสู่ระบบด้วยรหัสนักเรียน พร้อมโจทย์บวกเลขเพื่อยืนยันตัวตน • ค้นหารายวิชาจากรหัสวิชา ชื่อวิชา ครูผู้สอน หรือห้องเรียน • ดูจำนวนที่นั่งคงเหลือแบบทันที • มีแถบแสดงระดับความเต็มของแต่ละวิชา • มีหน้าต่างยืนยันก่อนลงทะเบียนและก่อนยกเลิก • ยกเลิกหรือเปลี่ยนวิชาได้ตลอดช่วงเวลาที่ระบบเปิด • จำกัดจำนวนวิชาที่เลือกต่อคนตามที่โรงเรียนกำหนด 🛠️ สำหรับเจ้าหน้าที่ (Admin) 📚 จัดการรายวิชา • เพิ่ม แก้ไข และลบรายวิชา • กำหนดระดับชั้นเป้าหมาย • กำหนดจำนวนที่รับ ห้องเรียน และครูผู้สอน • กำหนดสถานะเปิด–ปิดรับสมัครรายวิชา • นำเข้าข้อมูลรายวิชาจากไฟล์ CSV 👨‍🎓 จัดการข้อมูลนักเรียน • แยกข้อมูลตามระดับชั้นเรียน • เพิ่ม แก้ไข และลบนักเรียน • นำเข้าข้อมูลจากไฟล์ CSV • แก้ไขวิชาที่นักเรียนเลือกแทนได้ในกรณีจำเป็น 📊 รายงานผล • สรุปจำนวนและผลการเลือกของแต่ละวิชา • แสดงรายชื่อนักเรียนที่ลงทะเบียนในแต่ละวิชา • แสดงรายชื่อนักเรียนที่ยังไม่ได้เลือกวิชา • ส่งออกรายงานเป็น PDF, Excel และ Word 📰 ข่าวประชาสัมพันธ์ • สร้างและแก้ไขข่าวประชาสัมพันธ์ • เพิ่มรูปภาพประกอบข่าว • บันทึกเป็นฉบับร่างหรือเผยแพร่ • แสดงข่าวล่าสุดบนหน้าแรก ⚙️ ตั้งค่าการลงทะเบียน • กำหนดภาคเรียนและปีการศึกษา • กำหนดวัน–เวลาเปิดและปิดระบบ • กำหนดจำนวนวิชาสูงสุดที่นักเรียนสามารถเลือกได้ 🗑️ เริ่มต้นภาคเรียนใหม่ • มีระบบล้างข้อมูลสำหรับขึ้นภาคเรียนใหม่ • มีขั้นตอนยืนยันหลายชั้นเพื่อป้องกันการกดผิด • ลดความเสี่ยงในการลบข้อมูลการลงทะเบียนโดยไม่ตั้งใจ 👑 สำหรับผู้ดูแลระบบสูงสุด (Superadmin) • เพิ่ม แก้ไข และลบบัญชีเจ้าหน้าที่และผู้ดูแลระบบ • เจ้าหน้าที่ทั่วไปไม่สามารถเข้าถึงส่วนจัดการ Superadmin • ตั้งค่าชื่อระบบ • ตั้งค่าโลโก้โรงเรียน • ตั้งค่าสีหลักของเว็บไซต์ • จัดการสิทธิ์และการเข้าถึงระบบในระดับผู้ดูแล 🏠 หน้าแรกสำหรับทุกคน • แสดงรายวิชาที่เปิดสอน • แสดงจำนวนที่นั่งคงเหลือ • แสดงสถานะเปิด–ปิดของแต่ละวิชา • แสดงช่วงเวลาเปิดรับสมัคร • แสดงข่าวประชาสัมพันธ์ล่าสุด • รองรับการใช้งานโดยไม่ต้องเข้าสู่ระบบสำหรับข้อมูลที่โรงเรียนอนุญาตให้เผยแพร่ 🔐 ความปลอดภัย • รหัสผ่านเข้ารหัส ไม่จัดเก็บเป็นข้อความธรรมดา • แยกสิทธิ์ผู้ใช้งาน 3 ระดับ ได้แก่ นักเรียน เจ้าหน้าที่ และผู้ดูแลสูงสุด • ป้องกันการส่งคำสั่งปลอมจากเว็บไซต์อื่นด้วย CSRF Protection • ตรวจสอบสิทธิ์และเงื่อนไขทุกครั้งที่ฝั่งเซิร์ฟเวอร์ • ไม่พึ่งพาการตรวจสอบเฉพาะปุ่มหรือการทำงานบนหน้าเว็บไซต์ • ตรวจสอบจำนวนที่นั่งและเงื่อนไขการลงทะเบียนก่อนบันทึกข้อมูล 💻 เทคโนโลยี • PHP 8+ • MySQL • Bootstrap 5 • รองรับโฮสติ้งทั่วไป • Responsive Design ใช้งานได้บนคอมพิวเตอร์ แท็บเล็ต และมือถือ • รองรับฟอนต์ภาษาไทยสำหรับการสร้างรายงาน PDF 🔒 การจัดการข้อมูลรายชื่อนักเรียน หน้าแรกของระบบสามารถตั้งค่าให้มีปุ่ม "ดูรายชื่อ" ของแต่ละวิชา ซึ่งจะแสดงรายชื่อนักเรียนที่ลงทะเบียน และสามารถส่งออกข้อมูลได้โดยไม่ต้องล็อกอิน เพื่อให้เหมาะกับการนำระบบไปใช้งานจริงหรือจำหน่ายให้กับโรงเรียน ควรกำหนดเป็นตัวเลือกในการตั้งค่าระบบว่า จะ "เปิด" หรือ "ซ่อน" การแสดงรายชื่อนักเรียนบนหน้าแรก เนื่องจากข้อมูลดังกล่าวเกี่ยวข้องกับข้อมูลส่วนบุคคลของนักเรียน 👥 เหมาะสำหรับ โรงเรียนระดับมัธยมศึกษา โรงเรียนที่เปิดสอนวิชาเลือกเสรี/เพิ่มเติม/ชุมนุม หลายรายวิชา และหน่วยงานการศึกษาที่ต้องการลดขั้นตอนการลงทะเบียนแบบกระดาษ พร้อมให้ผู้เรียนเลือกวิชาได้ด้วยตนเองอย่างเป็นระบบ

ระบบปฏิทินกิจกรรมหน่วยงาน

📢 แจกฟรี! App Script ระบบปฏิทินกิจกรรมหน่วยงาน (Public Calendar) วันนี้ขอมาแชร์ระบบ “ปฏิทินกิจกรรมหน่วยงาน” ที่พัฒนาเป็น Web Application ใช้งานได้จริง และที่สำคัญคือใช้เครื่องมือฟรีจาก Google ทั้งระบบ! 💡 เหมาะสำหรับ: หน่วยงาน / โรงเรียน / องค์กร ที่ต้องการจัดการตารางกิจกรรมให้ดูง่าย ทันสมัย และเข้าถึงได้ทุกอุปกรณ์ ⸻ 🔧 โครงสร้างระบบ (System Architecture) 1️⃣ ฐานข้อมูล (Database) – Google Sheet ใช้เก็บข้อมูลกิจกรรมทั้งหมด เช่น • ชื่อกิจกรรม • วันเริ่ม / วันสิ้นสุด • รายละเอียด • สีของกิจกรรม 👉 แก้ไขง่าย เพิ่ม/ลบ/ปรับข้อมูลได้เหมือนพิมพ์งานทั่วไป ⸻ 2️⃣ ระบบประมวลผล (Backend) – Google Apps Script ทำหน้าที่เป็น API เชื่อมระหว่างหน้าเว็บกับฐานข้อมูล • doGet() → โหลดหน้าเว็บให้ผู้ใช้งาน • getEvents() → ดึงข้อมูลกิจกรรมจาก Sheet • addEvent() → บันทึกกิจกรรมใหม่ลงระบบ ⸻ 3️⃣ ส่วนแสดงผล (Frontend) – HTML / CSS / JavaScript • ใช้ Bootstrap 5 → รองรับมือถือ (Responsive) • ใช้ FullCalendar.js → แสดงปฏิทินแบบสวยงาม • ใช้ google.script.run → เชื่อมข้อมูลแบบไม่ต้องรีเฟรชหน้า ⸻ 🔄 การทำงานของระบบ (Data Flow) 📌 กรณีดูปฏิทิน • ผู้ใช้เปิดลิงก์ • ระบบโหลดหน้าเว็บ • ดึงข้อมูลจาก Google Sheet • แสดงผลบนปฏิทินทันที 📌 กรณีเพิ่มกิจกรรม • กรอกข้อมูลผ่านฟอร์ม • ระบบส่งข้อมูลไปบันทึกใน Sheet • แสดงผลบนปฏิทินทันที (ไม่ต้องรีเฟรช) ⸻ ✨ จุดเด่นของระบบนี้ ✅ ใช้งานฟรี 100% (Serverless) ✅ ไม่ต้องเช่าโฮสติ้ง ✅ อัปเดตข้อมูลแบบ Real-time ✅ โครงสร้างเข้าใจง่าย แยก Frontend / Backend ชัดเจน ✅ พร้อมนำไปใช้งานจริง หรือพัฒนาต่อยอดได้ทันที ⸻ 💬 ใครที่กำลังมองหาระบบปฏิทินใช้งานในหน่วยงาน หรืออยากศึกษาแนวทางการทำ Web App ด้วย Google Apps Script ตัวนี้ตอบโจทย์มากค่ะ ⸻

ระบบคลังรูปภาพกิจกรรมหน่วยงาน

📸 แจกฟรี! App Script ระบบคลังรูปภาพกิจกรรมหน่วยงาน 🎉 ใช้งานได้จริง พร้อมโค้ดครบ! เหมาะสำหรับโรงเรียน หน่วยงานราชการ องค์กรต่างๆ ❗ระบบนี้แจกให้ใช้ฟรีเพื่อการใช้งานเท่านั้น ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี ⸻ 💡 มาดูภาพรวมการทำงานแบบเข้าใจง่าย: ระบบนี้เป็น Web Application ที่ใช้ * Google Sheets เป็นฐานข้อมูล * Google Apps Script เป็น Backend * และโค้ดใน Canvas คือหน้าบ้าน (Frontend) สำหรับแสดงผล ⸻ 🔹 ขั้นตอนการทำงานของระบบ 1️⃣ เริ่มโหลดหน้าเว็บ เมื่อเปิดลิงก์ ระบบจะแสดงหน้าเว็บ พร้อมไอคอนโหลด ขึ้นข้อความ “กำลังดึงข้อมูลกิจกรรม…” 2️⃣ ดึงข้อมูลจากหลังบ้าน หน้าเว็บจะเรียกคำสั่ง google.script.run.getGalleryData() เพื่อไปดึงข้อมูลจาก Google Sheets (แท็บ Gallery) 3️⃣ จัดการข้อมูลก่อนแสดงผล * แปลงลิงก์ Google Drive ให้แสดงรูปได้ทันที * ป้องกันอักขระพิเศษ * ตรวจสอบว่ามีข้อมูลหรือไม่ 4️⃣ แสดงผลเป็นหน้า Gallery สวยๆ * แสดงเป็นการ์ดรูปภาพ (Image Card) * มีชื่อกิจกรรม วันที่ หมวดหมู่ รายละเอียด * เรียงเป็น Grid รองรับมือถือ (Responsive) 5️⃣ คลิกดูรูปใหญ่ (Lightbox) * คลิกภาพเพื่อดูแบบเต็มจอ * ปิดได้ด้วยปุ่ม X / คลิกพื้นหลัง / กด ESC ⸻ 📌 สรุปสั้นๆ: เปิดเว็บ → ดึงข้อมูลจาก Sheet → แปลงลิงก์ → แสดงรูป → คลิกดูภาพใหญ่ได้ทันที ⸻

ระบบสอบออนไลน์ครบวงจร พร้อมระบบป้องกันการทุจริต

🎉 **แจกฟรี! Google Apps Script ระบบสอบออนไลน์ครบวงจร** พร้อมระบบป้องกันการทุจริต ใช้งานได้จริงในโรงเรียน 🚀 📢 สำหรับคุณครูและสถานศึกษาที่กำลังมองหาระบบสอบออนไลน์แบบครบเครื่อง วันนี้ครูนุ่มเปิดให้ **ดาวน์โหลดฟรี** ผ่านระบบ **CodeHub** (❌ ไม่อนุญาตให้นำไปจำหน่าย) ## ✨ ความสามารถเด่นของระบบ ✅ เว็บแอปพลิเคชันใช้งานผ่าน Browser ไม่ต้องติดตั้งโปรแกรม ✅ พัฒนาด้วย Google Apps Script เชื่อมต่อ Google Workspace ได้อย่างลงตัว ✅ รองรับ 3 บทบาทการใช้งาน * 👨‍💼 ผู้ดูแลระบบ (Admin) * 👨‍🏫 ครูผู้สอน * 👨‍🎓 นักเรียน ### 👨‍💼 สำหรับผู้ดูแลระบบ 🔹 ตั้งค่าชื่อโรงเรียน ภาคเรียน และปีการศึกษา 🔹 จัดการรายวิชา ห้องเรียน และบัญชีครู 🔹 นำเข้ารายชื่อนักเรียนแบบ CSV ได้ทั้งห้อง 🔹 เปิดปีการศึกษาใหม่โดยแยกฐานข้อมูลแต่ละปี 🔹 ดูรายงานภาพรวมทั้งโรงเรียน พร้อม Export เป็น Google Sheet / Excel ### 👨‍🏫 สำหรับครูผู้สอน 📝 สร้างข้อสอบได้ทั้ง * ปรนัย * อัตนัย * แบบผสม 📚 เพิ่มข้อสอบได้ทั้ง * เพิ่มทีละข้อ * นำเข้าหลายข้อด้วยข้อความ (Bulk Import) 🎯 กำหนด * วันและเวลาเปิด-ปิดสอบ * เวลาทำข้อสอบ * สุ่มข้อสอบ * สุ่มตัวเลือก * มอบหมายหลายห้องเรียน * เกณฑ์การตรวจจับการทุจริต 📊 ตรวจข้อสอบอัตนัย พร้อมสรุปผลคะแนนและกราฟรายงาน ### 👨‍🎓 สำหรับนักเรียน 📱 เข้าสอบผ่านโทรศัพท์ แท็บเล็ต หรือคอมพิวเตอร์ ✔️ ระบบบันทึกคำตอบอัตโนมัติ ✔️ แสดงสถานะการทำข้อสอบ ✔️ ส่งข้อสอบออนไลน์ ✔️ เห็นคะแนนปรนัยทันทีหลังสอบ ✔️ รอคะแนนอัตนัยหลังครูตรวจ ## 🛡️ ระบบป้องกันการทุจริต ระบบตรวจจับพฤติกรรมต้องสงสัยระหว่างสอบ เช่น 🚫 สลับแท็บหรือออกจากหน้าสอบ 🚫 คลิกขวา 🚫 คัดลอก (Copy) 🚫 วางข้อความ (Paste) เมื่อเกินจำนวนครั้งที่ครูกำหนด ระบบจะ **บังคับส่งข้อสอบอัตโนมัติ** เพื่อช่วยลดการทุจริตในการสอบออนไลน์ ## 💡 เหมาะสำหรับ 🏫 โรงเรียน 🎓 วิทยาลัย 📖 การอบรมออนไลน์ 💻 การสอบก่อนเรียน-หลังเรียน 📋 การสอบวัดผลภายในองค์กร 🎁 **ดาวน์โหลดฟรีได้ในระบบ CodeHub** ❌ **ไม่อนุญาตให้นำไปจำหน่าย ดัดแปลงเพื่อจำหน่าย หรือเผยแพร่เชิงพาณิชย์** ** การติดตั้งอยู่ในไฟล์ README.md ** หากโพสต์นี้มีประโยชน์ ฝากกด ❤️ กดแชร์ และติดตามเพจ **ครูนุ่ม DevTech** เพื่อรับระบบฟรีและเทคนิคการพัฒนา Google Apps Script, PHP และ AI สำหรับงานการศึกษาอย่างต่อเนื่องค่ะ 😊

ระบบจองห้องประชุมออนไลน์

📢 แจกฟรี App Script “ระบบจองห้องประชุมออนไลน์” ดาวน์โหลดได้ในระบบ CodeHub เท่านั้น ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อ ระบบนี้ถูกออกแบบให้เป็น “เว็บแอปพลิเคชันหน้าเดียว (SPA)” ใช้งานง่าย รองรับการจองห้องประชุมแบบออนไลน์ เชื่อมต่อกับ Google Sheets โดยตรง ไม่ต้องมี Hosting เพิ่ม ใช้งานผ่าน Google Apps Script ได้ทันที ✨ จุดเด่นของระบบ ✅ จองห้องประชุมผ่านหน้าเว็บ ✅ แสดงผลแบบปฏิทินด้วย FullCalendar ✅ ป้องกันเวลาจองซ้ำอัตโนมัติ ✅ แจ้งเตือนเมื่อเวลาทับซ้อน ✅ รีเฟรชข้อมูลทันทีแบบไม่ต้องโหลดหน้าใหม่ ✅ ใช้งานร่วมกับ Google Sheets ได้ทันที ✅ ดู แก้ไข หรือลบข้อมูลผ่าน Sheets ได้สะดวก 🗂 โครงสร้างการทำงานของระบบ 1️⃣ Database : Google Sheets ใช้เก็บข้อมูลการจองทั้งหมด พร้อมสร้างชีตอัตโนมัติเมื่อเริ่มใช้งานครั้งแรก 2️⃣ Backend : Google Apps Script (Code.gs) ทำหน้าที่เป็นสมองของระบบ รับ-ส่งข้อมูล ตรวจสอบเวลาจองซ้ำ และบันทึกข้อมูลลง Sheets 3️⃣ Frontend : index.html ออกแบบด้วย HTML + Tailwind CSS + FullCalendar ใช้งานง่าย สวยงาม รองรับการดูตารางจองแบบปฏิทิน 📌 ความสามารถสำคัญ 🔹 เช็คเวลาทับซ้อนก่อนบันทึก 🔹 แยกสีห้องประชุมแต่ละห้อง 🔹 คลิกดูรายละเอียดการจองได้ 🔹 แจ้งเตือนการบันทึกสำเร็จแบบ Toast Notification 🔹 รองรับการทำงานแบบ Real-time UX 🏢 เหมาะสำหรับหน่วยงาน ✅ โรงเรียน / สถานศึกษา ✅ อบต. / เทศบาล / อบจ. ✅ หน่วยงานราชการ ✅ มหาวิทยาลัย ✅ โรงพยาบาล / สาธารณสุข ✅ บริษัทเอกชน ✅ องค์กรที่มีการใช้ห้องประชุมหลายห้อง 💡 แจกเพื่อการศึกษาและใช้งานภายในองค์กร ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อทุกกรณี

ระบบกรอกพิกัดการเยี่ยมบ้านนักเรียน

📍 แจกฟรี Template App Script “ระบบกรอกพิกัดการเยี่ยมบ้านนักเรียน” พร้อมระบบแผนที่ + Dashboard + เชื่อม Google Sheets ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อ เปิดเทอมนี้…โรงเรียนมี “ระบบเก็บพิกัดบ้านนักเรียน” กันหรือยัง? 🏡✨ Template นี้ออกแบบมาเพื่อช่วยให้ครูสามารถบันทึกข้อมูลการเยี่ยมบ้านนักเรียนได้สะดวก รวดเร็ว และดูข้อมูลได้แบบเรียลไทม์ ผ่าน Web Application ใช้งานได้ทั้งมือถือและคอมพิวเตอร์ 🔹 ฟีเจอร์เด่นภายในระบบ ✅ ฟอร์มบันทึกข้อมูลนักเรียนครบถ้วน - รหัสนักเรียน - ชื่อ-สกุล - ระดับชั้น / ห้องเรียน - เบอร์โทร (ตรวจสอบเลข 10 หลักอัตโนมัติ) - ข้อมูลที่อยู่พื้นฐาน 🗺️ ระบบแผนที่ปักหมุดบ้านนักเรียน (Leaflet Map) - ดึง GPS ตำแหน่งปัจจุบันอัตโนมัติ - ลากหมุดปักตำแหน่งบ้านได้เอง (Drag & Drop) 💾 บันทึกข้อมูลลง Google Sheets ผ่าน Google Apps Script ทำงานแบบ Background ไม่ต้องรีเฟรชหน้าเว็บ 📊 ระบบแสดงผลข้อมูลและแผนที่รวม - Filter ตามระดับชั้น / ห้องเรียน - แสดงหมุดนักเรียนบนแผนที่แบบ Real-time - Auto Zoom ครอบคลุมทุกพิกัดในห้องเรียน 📋 ตารางข้อมูลแบบมืออาชีพด้วย DataTables - ค้นหาได้ - เรียงข้อมูลได้ - แบ่งหน้าอัตโนมัติ 🔍 ระบบดูรายละเอียดนักเรียน พร้อมปุ่ม “นำทางด้วย Google Maps” ไปยังบ้านนักเรียนทันที 🚗 📈 Dashboard สรุปข้อมูลอัตโนมัติด้วย Chart.js - กราฟจำนวนนักเรียนแต่ละระดับชั้น - กราฟสัดส่วนนักเรียนตามตำบล ⚙️ รองรับการทำงานทั้งแบบเชื่อมฐานข้อมูลจริง และ Mock Data แม้ยังไม่ได้เชื่อม Google Apps Script ก็สามารถทดลองใช้งาน UI ได้ทันที 💡 เหมาะสำหรับ - ระบบเยี่ยมบ้านนักเรียน - งานดูแลช่วยเหลือนักเรียน - งานฝ่ายปกครอง - งานแนะแนวและติดตามนักเรียน การนำไปใช้งาน * เมื่อ Deploy เรียบร้อยแล้วให้นำลิงค์เว็บแอป มาใส่ในไฟล์ index.html บรรทัดที่ 392 const SCRIPT_URL ='xxx'

ระบบรับข้อร้องเรียน

ระบบรับข้อร้องเรียน (Complaint System) ด้วย App Script ใช้งานได้จริง 💬📩 ใครกำลังมองหาระบบรับเรื่องร้องเรียนแบบง่ายๆ แต่ครบจบในตัวเดียว ห้ามพลาดเลยค่ะ 👇 🔥 จุดเด่นของระบบนี้ ✅ ใช้งานผ่านหน้าเว็บ (รองรับมือถือ/คอม) ✅ บันทึกข้อมูลลง Google Sheets อัตโนมัติ ✅ แจ้งเตือนเข้า Telegram ทันที ✅ ไม่ต้องรีเฟรชหน้าเว็บ (UX ลื่นมาก) ✅ พร้อมใช้งาน + แก้ไขต่อยอดได้ ❌ ไม่อนุญาตให้นำไปจำหน่าย ❌ ⸻ 💡 ภาพรวมการทำงานของระบบ (เข้าใจง่ายใน 3 ส่วน) 🖥️ 1. Frontend (หน้าเว็บ) • ฟอร์มกรอกข้อมูล: ชื่อผู้แจ้ง, ช่องทางติดต่อ, หัวข้อ, รายละเอียด • ออกแบบด้วย Tailwind CSS (Responsive ใช้ได้ทุกอุปกรณ์) • กดส่งแล้วไม่ต้องรีเฟรชหน้า (ใช้ google.script.run) • มี Loading + ป้องกันการกดซ้ำ ⚙️ 2. Backend (App Script) • ใช้ doGet() แสดงหน้าเว็บ • ฟังก์ชัน submitComplaint() 👉 บันทึกข้อมูลลง Google Sheets 👉 สร้างหัวตารางอัตโนมัติ 👉 เก็บ Timestamp เวลาไทย • หลังบันทึกเสร็จ → ส่งแจ้งเตือนทันที 📲 3. ระบบแจ้งเตือน (Telegram Bot) • ส่งข้อมูลผ่าน Telegram Bot API • จัดรูปแบบข้อความให้อ่านง่าย (มีไอคอน/ตัวหนา) • ผู้ดูแลได้รับแจ้งเตือนแบบ Real-time ⸻ 🔄 Workflow การทำงาน ผู้ใช้กรอกฟอร์ม → กดส่ง ➡️ ระบบบันทึกลง Google Sheets ➡️ แจ้งเตือนเข้า Telegram ➡️ ผู้ใช้เห็น Pop-up แจ้งว่าส่งสำเร็จ ⸻ 🎯 เหมาะสำหรับ • โรงเรียน / หน่วยงานราชการ • อบต. / เทศบาล • องค์กรที่ต้องการรับ Feedback / ร้องเรียน • คนที่อยากเริ่มต้นทำระบบด้วย App Script ⸻ 💬 ใครนำไปใช้แล้ว มารีวิวให้ฟังได้นะคะ 😊

ระบบขอใช้รถราชการออนไลน์

🚗 ระบบขอใช้รถราชการออนไลน์ ขอใช้รถ อนุมัติ และติดตามการใช้งานได้ในที่เดียว แทนการเขียนใบขออนุญาตและเดินเอกสารหลายขั้นตอน ระบบช่วยให้โรงเรียนและหน่วยงานจัดการการใช้รถราชการได้อย่างเป็นระบบ ครูหรือบุคลากรสามารถส่งคำขอผ่านเว็บไซต์ ผู้ดูแลตรวจสอบ อนุมัติ และมอบหมายคนขับได้ในไม่กี่คลิก พร้อมแจ้งเตือนผ่าน LINE อัตโนมัติ 👩‍🏫 สำหรับครู/บุคลากร • ไม่ต้องสมัครสมาชิก • กรอกแบบฟอร์มขอใช้รถ ระบุกลุ่มสาระ/งาน จำนวนผู้ร่วมเดินทาง รถที่ต้องการ วันเวลาเริ่มต้น–สิ้นสุด จุดหมาย และรายละเอียด • เลือกวันที่ผ่านปฏิทิน พร้อมแสดงปี พ.ศ. • ดูตารางการใช้รถของทั้งโรงเรียนแบบปฏิทิน รายเดือน/รายสัปดาห์ ก่อนยื่นคำขอ • ดูสถานะสำคัญได้จากหน้าแรก เช่น รถพร้อมใช้งาน คำขอรออนุมัติ คำขอที่อนุมัติแล้ว และคนขับพร้อมให้บริการ • มี CAPTCHA ช่วยป้องกันบอทและคำขอปลอม • มีคู่มือการใช้งานให้ดาวน์โหลดจากเว็บไซต์ 🛠️ สำหรับผู้ดูแลระบบ (Admin) 📊 แดชบอร์ด • สรุปคำขอทั้งหมด คำขอรออนุมัติ คำขออนุมัติแล้ว และรถพร้อมใช้งาน • แสดงกราฟสถิติรายเดือน • ดูสถิติการใช้งานแยกตามรถ 📋 จัดการคำขอ • ค้นหาและเรียงลำดับข้อมูล • แยกดูตามสถานะ ทั้งหมด / รออนุมัติ / อนุมัติ / ไม่อนุมัติ / ยกเลิก • จัดการข้อมูลทั้งหมดได้จากตารางเดียว ✅ อนุมัติและมอบหมายคนขับ • ตรวจสอบรถและคนขับที่ถูกใช้งานในช่วงเวลาเดียวกันโดยอัตโนมัติ • ป้องกันการจองรถหรือมอบหมายคนขับซ้ำกับงานอื่น ❌ ยกเลิกคำขอ • ยกเลิกคำขอที่อนุมัติแล้วได้ • เมื่อยกเลิก ข้อมูลจะถูกนำออกจากปฏิทินหน้าแรกทันที • คนขับได้รับแจ้งเตือนการยกเลิก ⚙️ จัดการข้อมูลพื้นฐาน • รถราชการ • คนขับ • กลุ่มสาระ/งาน 📄 รายงานการใช้รถ • พิมพ์หรือดาวน์โหลดรายงานเป็น PDF • แยกรายงานตามเดือน • ใช้เป็นหลักฐานหรือส่งต่อผู้บริหารได้ 📱 สถิติการแจ้งเตือน LINE • ตรวจสอบจำนวนข้อความที่ส่ง • เปรียบเทียบกับโควตาฟรีประจำเดือน • แจ้งเตือนเมื่อโควตาเต็ม 👤 การจัดการบัญชี • แก้ไขข้อมูลส่วนตัว • มีคู่มือสำหรับผู้ดูแลระบบ 🔔 แจ้งเตือนผ่าน LINE • ผู้ดูแลได้รับแจ้งเตือนทันทีเมื่อมีคำขอใหม่ • คนขับได้รับแจ้งเตือนเมื่อได้รับมอบหมายงาน • แจ้งวันที่เริ่มต้น–สิ้นสุด จุดหมาย และรายละเอียดการเดินทาง • แจ้งเตือนคนขับเมื่อมีการยกเลิกงาน • เชื่อมต่อบัญชี LINE ด้วยรหัสสั้น ๆ โดยไม่ต้องติดตั้งแอปเพิ่มเติม 👑 สำหรับผู้ดูแลสูงสุด (Superadmin) • ตั้งค่าชื่อเว็บไซต์ โลโก้ สีธีม และฟอนต์ ให้ตรงกับอัตลักษณ์ของหน่วยงาน • จัดการบัญชีผู้ใช้งานและกำหนดสิทธิ์ • ตั้งค่า LINE OA • กำหนดจำนวนข้อความฟรีต่อเดือน ⭐ จุดเด่นของระบบ • ลดงานเอกสาร — ไม่ต้องเดินเอกสาร ทุกขั้นตอนดำเนินการผ่านระบบออนไลน์ • ลดการทำงานซ้ำซ้อน — ตรวจสอบรถและคนขับที่ชนกันโดยอัตโนมัติ • ทุกคนเห็นตารางเดียวกัน — ตรวจสอบรถว่างผ่านปฏิทินก่อนส่งคำขอ • ติดตามงานง่าย — มีสถานะชัดเจนและแจ้งเตือนทุกขั้นตอน • ปรับแต่งได้ — เปลี่ยนชื่อ โลโก้ สี และฟอนต์ให้เหมาะกับหน่วยงาน • ปลอดภัย — มีระบบเข้าสู่ระบบ แยกสิทธิ์ผู้ใช้งาน CAPTCHA และมาตรการป้องกันคำขอปลอม • ใช้งานได้ทุกอุปกรณ์ — รองรับคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ 🏢 เหมาะสำหรับ โรงเรียน สำนักงานเขตพื้นที่การศึกษา เทศบาล องค์การบริหารส่วนตำบล และหน่วยงานราชการที่มีรถใช้งานร่วมกันหลายคัน ข้อมูลเพิ่มเติม : https://www.facebook.com/share/p/1coNnHKV99/

ระบบบันทึกและติดตามการบ้าน

แจกฟรี! Google Apps Script ระบบบันทึกและติดตามการบ้าน 📚 ครูนุ่มพัฒนาระบบบันทึกการบ้านแบบง่าย ๆ โดยใช้ Google Apps Script + Google Sheets ช่วยให้ครูและนักเรียนสามารถบันทึก ติดตาม และตรวจสอบรายการการบ้านได้สะดวกมากขึ้น ไม่ต้องติดตั้งโปรแกรมเพิ่มเติม และสามารถนำไปปรับใช้กับห้องเรียนหรือโรงเรียนได้เลย ✨ ความสามารถของระบบ • บันทึกรหัสวิชาและชื่อวิชา • บันทึกหัวข้อการบ้าน • ระบุชื่อครูผู้สอน • กำหนดวันส่งการบ้าน • แนบลิงก์หรือรายละเอียดเพิ่มเติม • แสดงรายการการบ้านในรูปแบบการ์ด • ค้นหาการบ้านได้ • กรองรายการตามรายวิชา • แจ้งเตือนสถานะการบ้านที่เลยกำหนดส่ง • รายการที่เลยกำหนดจะแสดงสถานะเป็นสีแดง • เพิ่มรายการการบ้านผ่านหน้าต่าง Modal • ข้อมูลบันทึกลง Google Sheets แบบอัตโนมัติ • มีการบันทึกวันและเวลาที่เพิ่มข้อมูล • รองรับการใช้งานบนคอมพิวเตอร์และโทรศัพท์มือถือ 🔧 โครงสร้างระบบ ระบบแบ่งการทำงานออกเป็น 2 ส่วนหลัก 1. Frontend — `index.html` เป็นส่วนหน้าบ้านที่ผู้ใช้งานมองเห็น ทำหน้าที่แสดงรายการการบ้าน ค้นหา กรองรายวิชา และเพิ่มข้อมูลการบ้าน 2. Backend / API — `Code.gs` ทำหน้าที่เป็นตัวกลางระหว่างหน้าเว็บกับ Google Sheets เมื่อหน้าเว็บต้องการข้อมูล ระบบจะดึงข้อมูลจาก Google Sheets และจัดเรียงรายการใหม่ล่าสุดก่อน เมื่อมีการเพิ่มการบ้าน ระบบจะรับข้อมูลจากหน้าเว็บและบันทึกลง Google Sheets พร้อมประทับวันและเวลา 📊 Google Sheets ระบบจะใช้ Google Sheets เป็นฐานข้อมูลหลัก โดยสร้างชีตชื่อ `Homework` สำหรับเก็บข้อมูลต่าง ๆ เช่น รหัสวิชา | ชื่อวิชา | หัวข้อ | ครูผู้สอน | กำหนดส่ง | ลิงก์แนบ | วันที่บันทึก ⏰ ระบบติดตามกำหนดส่ง จุดที่น่าสนใจของระบบคือ ระบบสามารถนำวันกำหนดส่งมาเปรียบเทียบกับวันที่ปัจจุบันได้ หากการบ้านเลยกำหนดส่ง ระบบจะแสดงสถานะ “เลยกำหนดส่ง” เป็นสีแดง ทำให้มองเห็นรายการที่ต้องติดตามได้ง่ายขึ้น 🔗 วิธีเชื่อมต่อระบบ หลังจากนำ `Code.gs` ไป Deploy เป็น Google Apps Script Web App แล้ว ให้คัดลอก Web App URL จากนั้นเปิดไฟล์ `index.html` และนำ URL ไปใส่ในตัวแปร `const WEB_APP_URL = 'ใส่_URL_ของ_GOOGLE_APPS_SCRIPT_ที่นี่';` ตัวอย่าง `const WEB_APP_URL = 'https://script.google.com/macros/s/xxxxx/exec';` จากนั้นบันทึกไฟล์ ก็สามารถเชื่อมต่อ Frontend กับ Backend และเริ่มใช้งานระบบได้ทันที 🎁 แจกฟรี! ระบบนี้เหมาะสำหรับครูที่อยากเริ่มต้นทำระบบบันทึกการบ้านด้วย Google Apps Script และสามารถนำโค้ดไปศึกษา ปรับแต่ง และต่อยอดให้เหมาะกับห้องเรียนของตัวเองได้เลยค่ะ ไม่อนุญาตให้จำหน่าย อีกหนึ่งตัวอย่างของการนำ Google Apps Script มาพัฒนา Web App ใช้งานจริง โดยไม่ต้องมี Server หรือ Database แบบเสียค่าใช้จ่ายเพิ่มเติม

ระบบเช็คอินผู้มาติดต่อราชการ พร้อมถ่ายรูปและบันทึกเวลาเข้า-ออก

แจกฟรี! Google Apps Script ระบบเช็คอินผู้มาติดต่อราชการ 📋📸 ใครกำลังมองหาระบบลงทะเบียนผู้มาติดต่อราชการแบบไม่ต้องใช้สมุดลงชื่อแบบเดิม วันนี้ครูนุ่มนำระบบมาแจกฟรีค่ะ ระบบนี้พัฒนาด้วย Google Apps Script (GAS) ใช้ Google Sheets เป็นฐานข้อมูล และ Google Drive สำหรับจัดเก็บรูปภาพ สามารถนำไปปรับใช้กับโรงเรียน หน่วยงานราชการ หรือสถานศึกษาได้ ✨ ความสามารถของระบบ • ลงทะเบียนผู้มาติดต่อเข้า (Check-In) • ถ่ายรูปผู้มาติดต่อผ่านกล้องมือถือ • บันทึกชื่อ-สกุล • บันทึกเลขบัตรประชาชนหรือเบอร์โทรศัพท์ • ระบุแผนก/หน่วยงานที่ต้องการติดต่อ • ระบุวัตถุประสงค์ในการมาติดต่อ • บันทึกวันและเวลาเข้าอัตโนมัติ • จัดเก็บรูปภาพไว้ใน Google Drive • บันทึกข้อมูลลง Google Sheets • ลงทะเบียนออก (Check-Out) ด้วยเลขบัตรประชาชนหรือเบอร์โทรศัพท์ • บันทึกเวลาออกอัตโนมัติ • เปลี่ยนสถานะจาก IN → OUT • เจ้าหน้าที่สามารถตรวจสอบข้อมูลจาก Google Sheets ได้แบบเรียลไทม์ • รองรับการใช้งานผ่านโทรศัพท์มือถือ 🔄 ภาพรวมการทำงาน ผู้มาติดต่อเดินทางมาถึง ↓ เปิด Web App ↓ เลือก “ลงทะเบียนเข้า” ↓ ถ่ายรูป + กรอกข้อมูล ↓ ระบบบันทึกข้อมูลลง Google Sheets ↓ ระหว่างติดต่อ เจ้าหน้าที่สามารถตรวจสอบข้อมูลได้ ↓ เมื่อเดินทางกลับ เลือก “ลงทะเบียนออก” ↓ กรอกเลขบัตรประชาชน/เบอร์โทรศัพท์ ↓ ระบบบันทึกเวลาออกและเปลี่ยนสถานะเป็น OUT 🛠 เทคโนโลยีที่ใช้ Google Apps Script Google Sheets Google Drive HTML JavaScript Tailwind CSS 🎁 แจกฟรี! เหมาะสำหรับครู บุคลากรทางการศึกษา และหน่วยงานราชการที่ต้องการทดลองเปลี่ยนการลงทะเบียนแบบกระดาษให้เป็นระบบดิจิทัล 📌 วิธีนำไปใช้งาน หลังจากนำโค้ดไปติดตั้งแล้ว ให้ทำการ Deploy เป็น Web App และนำ URL ของ Web App ที่ได้ไปใส่ในไฟล์ `index.html` บรรทัดที่ 155 เพื่อเชื่อมต่อระบบกับ Google Apps Script สามารถนำไปปรับแต่งเพิ่มเติมให้เหมาะกับหน่วยงานของตัวเองได้เลยค่ะ ไม่อนุญาตให้จำหน่าย

ระบบ Google Login (Apps Script)

🎁 แจกฟรี! เทมเพลตระบบ Google Login ด้วย Google Apps Script ใครกำลังพัฒนา Web App ด้วย Google Apps Script และอยากเพิ่มระบบ “Login with Google” ให้กับเว็บไซต์ ครูนุ่มมีเทมเพลตมาแจกฟรีค่ะ ระบบนี้ใช้ Google Identity Services (GIS) ทำงานร่วมกับ Google Apps Script (GAS) โดยออกแบบให้มีการตรวจสอบ ID Token ที่ฝั่ง Backend ก่อนนำข้อมูลผู้ใช้งานไปใช้งานต่อ 🔄 ภาพรวมการทำงาน ผู้ใช้เปิด Web App ↓ 🔐 แสดงปุ่ม Sign in with Google ↓ 👤 ผู้ใช้เลือกบัญชี Google ↓ 🎫 Google ส่ง ID Token กลับมา ↓ 📤 ส่ง Token ไปตรวจสอบที่ Backend ↓ 🛡️ code.gs ตรวจสอบ Token กับ Google ↓ ✅ ผ่านการตรวจสอบ ↓ 📋 ส่งข้อมูลชื่อ อีเมล และรูปโปรไฟล์กลับมา ↓ 🚀 นำข้อมูลไปใช้งานต่อในระบบ 🛡️ จุดสำคัญของระบบ เราไม่ควรรับข้อมูลจากหน้าเว็บแล้วเชื่อทันที แต่ควรส่ง ID Token ไปตรวจสอบที่ฝั่ง Backend ก่อน เพื่อให้ Google เป็นผู้ยืนยันว่า • Token นี้ถูกต้องหรือไม่ • Token หมดอายุแล้วหรือยัง • Token ถูกสร้างมาสำหรับ Client ID ของระบบเราหรือไม่ เมื่อผ่านการตรวจสอบแล้ว จึงค่อยนำข้อมูลผู้ใช้งานไปใช้ในระบบ 💡 และที่สำคัญคือ สามารถนำแนวคิดนี้ไปต่อยอดได้อีกเยอะมาก เช่น 🔹 ตรวจสอบอีเมลกับ Google Sheets 🔹 จำกัดเฉพาะสมาชิกในองค์กร 🔹 กำหนดสิทธิ์ Admin / User 🔹 สร้างระบบสมาชิก 🔹 เชื่อมต่อฐานข้อมูลหรือ Google Sheets 🔹 นำไปใช้กับ Web App อื่น ๆ ที่ต้องมีระบบ Login 📦 เหมาะสำหรับ ครูที่กำลังสร้างระบบด้วย Google Apps Script นักพัฒนา Web App ผู้ที่ต้องการเรียนรู้การทำ Google Login หรือคนที่อยากมี Template สำหรับนำไปต่อยอดระบบของตัวเอง 📥 ดาวน์โหลดฟรีได้ที่ระบบ CodeHub นำไปศึกษา ปรับแต่ง และพัฒนาต่อได้เลยค่ะ ⚠️ ไม่อนุญาตให้นำเทมเพลตไปจำหน่าย ใครกำลังทำ Web App ด้วย Google Apps Script ลองนำไปต่อยอดกันได้เลยค่ะ

ระบบจองคิวพบครูแนะแนว/ครูที่ปรึกษาออนไลน์

📌 แจกฟรี! ระบบจองคิวพบครูแนะแนว / ครูที่ปรึกษา อีกหนึ่งระบบเล็ก ๆ ที่ช่วยจัดการ “การนัดหมายระหว่างนักเรียนกับครู” ให้เป็นระบบมากขึ้น โดยใช้ Google Apps Script + Google Sheets ทำงานร่วมกัน 💻 ระบบออกแบบเป็น Web App ใช้งานง่าย รองรับทั้งฝั่งนักเรียนและครู/เจ้าหน้าที่ 👨‍🎓 ฝั่งนักเรียน • กรอกข้อมูลผู้จอง • เลือกครูที่ต้องการพบ • เลือกวันที่และเวลา • ระบุหัวข้อที่ต้องการปรึกษา • ป้องกันการจองซ้ำในช่วงเวลาเดียวกัน • แสดงผลสรุปการจองหลังทำรายการ 👩‍🏫 ฝั่งครู / เจ้าหน้าที่ • Login ด้วย PIN • Dashboard สรุปจำนวนการจอง • ตรวจสอบรายการนัดหมาย • ดูรายละเอียดนักเรียนและเรื่องที่ต้องการปรึกษา • เปลี่ยนสถานะ ยืนยัน / ยกเลิก / เสร็จสิ้น • ดึงข้อมูลล่าสุดจาก Google Sheets ⚙️ เบื้องหลังระบบ HTML + Tailwind CSS + JavaScript เชื่อมต่อ Google Apps Script ใช้ Google Sheets เป็นฐานข้อมูล จุดเด่นคือไม่ต้องเช่า Hosting หรือสร้าง Database Server ให้ยุ่งยาก เหมาะสำหรับโรงเรียนที่ต้องการนำไปปรับใช้กับระบบนัดหมายครูแนะแนว ครูที่ปรึกษา หรือการให้คำปรึกษานักเรียน 🎁 แจกฟรีสำหรับนำไปศึกษาและพัฒนาต่อยอด ดาวน์โหลดได้ที่ CodeHub 👉 codehub.krudevtech.com ⚠️ เงื่อนไขการใช้งาน ระบบนี้จัดทำขึ้นเพื่อแบ่งปันและการศึกษา ❌ ไม่อนุญาตให้นำไปจำหน่าย ❌ ไม่อนุญาตให้นำไปขายต่อในรูปแบบใด ๆ ✅ สามารถนำไปศึกษา ปรับแต่ง และพัฒนาต่อยอดเพื่อใช้งานในสถานศึกษาได้ หวังว่าจะเป็นอีกหนึ่งระบบที่ช่วยให้คุณครูทำงานง่ายขึ้น และเป็นตัวอย่างสำหรับคนที่กำลังเรียนรู้การพัฒนา Web App ด้วย Google Apps Script ค่ะ ❤️ #GoogleAppsScript #GoogleSheets #WebApp #ระบบจองคิว #ระบบโรงเรียน #ครูแนะแนว #ครูที่ปรึกษา #แจกฟรี #CodeHub #KruDevTech

เทมเพลตอัปโหลดไฟล์จากเว็บเพจ PHP ไปยัง Google Drive ผ่าน Google Apps Script

แจกฟรี! DriveUploader เทมเพลตอัปโหลดไฟล์จากเว็บ PHP ไปยัง Google Drive ผ่าน Google Apps Script ใครกำลังทำเว็บไซต์ด้วย PHP แล้วต้องการให้ผู้ใช้งานสามารถอัปโหลดไฟล์จากหน้าเว็บไซต์ไปเก็บไว้บน Google Drive ได้ ระบบนี้สามารถนำไปศึกษา ปรับแต่ง และต่อยอดได้ทันที ระบบนี้ออกแบบให้ PHP ทำหน้าที่เป็นตัวกลางในการรับไฟล์ แล้วส่งต่อไปยัง Google Apps Script เพื่อบันทึกไฟล์ลง Google Drive โดยไม่จำเป็นต้องเชื่อมต่อ Google Drive API โดยตรงจาก PHP โครงสร้างระบบ Frontend index.php หน้าเว็บไซต์สำหรับเลือกไฟล์และอัปโหลด ออกแบบด้วย Tailwind CSS ใช้ JavaScript + Fetch API อัปโหลดแบบ AJAX โดยไม่ต้องรีเฟรชหน้าเว็บ ตรวจสอบขนาดไฟล์เบื้องต้นไม่เกิน 5MB Backend upload.php รับไฟล์จากหน้าเว็บไซต์ ตรวจสอบไฟล์และขนาดไฟล์อีกครั้ง แปลงไฟล์เป็น Base64 สร้างข้อมูล JSON ส่งข้อมูลด้วย cURL ไปยัง Google Apps Script config.php เก็บ URL ของ Google Apps Script Web App ช่วยแยกการตั้งค่าออกจากไฟล์หลักของระบบ Cloud Code.gs รับข้อมูลจาก PHP ถอดรหัส Base64 กลับเป็นไฟล์ สร้าง Blob ตาม Mime Type ของไฟล์ บันทึกไฟล์ลง Google Drive ส่งผลลัพธ์และ URL ของไฟล์กลับไปยัง PHP Workflow ของระบบ ผู้ใช้งาน ↓ เลือกไฟล์บนเว็บไซต์ ↓ index.php ↓ upload.php ↓ แปลงไฟล์เป็น Base64 ↓ ส่ง JSON ผ่าน cURL ↓ Google Apps Script ↓ ถอดรหัส Base64 ↓ สร้างไฟล์ ↓ Google Drive ↓ ส่ง URL กลับมายังเว็บไซต์ วิธีติดตั้ง ขั้นตอนที่ 1 สร้างโฟลเดอร์สำหรับเก็บไฟล์บน Google Drive 1. เข้า Google Drive 2. สร้างโฟลเดอร์ใหม่ เช่น Uploaded Files 3. เปิดโฟลเดอร์ที่สร้าง 4. คัดลอก Folder ID จาก URL ตัวอย่าง drive.google.com/drive/folders/XXXXXXXXXXXX ให้คัดลอกเฉพาะส่วน XXXXXXXXXXXX ขั้นตอนที่ 2 สร้าง Google Apps Script 1. เข้า script.google.com 2. สร้างโปรเจกต์ใหม่ 3. นำโค้ดจาก Code.gs ในระบบไปวาง 4. นำ Folder ID จาก Google Drive ไปใส่ในตัวแปร FOLDER_ID 5. บันทึกโปรเจกต์ ขั้นตอนที่ 3 Deploy Google Apps Script เลือก Deploy → New deployment → เลือก Web app ตั้งค่าดังนี้ Execute as: Me Who has access: Anyone จากนั้นกด Deploy หาก Google ขออนุญาตเข้าถึงบัญชี ให้ดำเนินการอนุญาตตามขั้นตอนของ Google เมื่อ Deploy สำเร็จ ให้คัดลอก Web App URL ที่ลงท้ายด้วย /exec เก็บไว้ เพราะต้องนำไปใช้ใน PHP ขั้นตอนที่ 4 ตั้งค่า PHP นำไฟล์ index.php upload.php config.php ไปไว้ในโฟลเดอร์เว็บไซต์ของคุณ ตัวอย่าง C:\xampp\htdocs\drive_uploader หรืออัปโหลดขึ้น Web Hosting ที่รองรับ PHP และ cURL จากนั้นเปิดไฟล์ config.php นำ Web App URL ที่ได้จาก Google Apps Script ไปใส่แทน YOUR_GOOGLE_APPS_SCRIPT_WEB_APP_URL_HERE บันทึกไฟล์ ขั้นตอนที่ 5 ทดสอบระบบ เปิดเว็บไซต์ เช่น http://localhost/drive_uploader/index.php จากนั้น 1. เลือกไฟล์ 2. ตรวจสอบว่าไฟล์มีขนาดไม่เกิน 5MB 3. กดเริ่มอัปโหลดไฟล์ 4. ระบบจะส่งไฟล์ไปยัง upload.php 5. PHP จะส่งข้อมูลต่อไปยัง Google Apps Script 6. Google Apps Script จะสร้างไฟล์ใน Google Drive 7. ระบบจะแสดงผลการอัปโหลด 8. สามารถกดปุ่มเพื่อเปิดไฟล์บน Google Drive ได้ ข้อจำกัดที่ควรรู้ ระบบตัวอย่างนี้กำหนดขนาดไฟล์ไว้ไม่เกิน 5MB สาเหตุสำคัญคือระบบใช้การแปลงไฟล์เป็น Base64 ก่อนส่งผ่าน JSON ซึ่งทำให้ข้อมูลมีขนาดเพิ่มขึ้นประมาณ 33% ดังนั้นระบบนี้เหมาะกับไฟล์ขนาดเล็ก เช่น เอกสาร รูปภาพ PDF ไฟล์งานของนักเรียน แบบฟอร์ม เอกสารประกอบการเรียน หากต้องการรองรับไฟล์ขนาดใหญ่ ควรออกแบบระบบ Upload ใหม่ให้เหมาะสมกับการใช้งานจริง เรื่องความปลอดภัยก็สำคัญ หากนำระบบขึ้นใช้งานบนเว็บไซต์สาธารณะ ไม่ควรเปิดให้ทุกคนสามารถอัปโหลดไฟล์เข้า Google Drive ได้โดยไม่มีการควบคุม แนะนำให้เพิ่ม ระบบ Login กำหนดสิทธิ์ผู้ใช้งาน จำกัดประเภทไฟล์ จำกัดขนาดไฟล์ ตรวจสอบนามสกุลและ MIME Type ป้องกันการส่ง Request ซ้ำ กำหนดโควตาการอัปโหลด บันทึกประวัติการอัปโหลด เพื่อป้องกันการนำระบบไปใช้ในทางที่ไม่เหมาะสม และป้องกันพื้นที่ Google Drive เต็ม หมายเหตุเกี่ยวกับ Google Apps Script หากแก้ไข Code.gs แล้ว Web App ที่ Deploy ไว้อาจยังทำงานด้วยเวอร์ชันเดิม เมื่อต้องการนำโค้ดเวอร์ชันใหม่ไปใช้งาน ให้สร้าง Deployment/Version ใหม่ตามขั้นตอนของ Apps Script และตรวจสอบ Web App URL ให้ถูกต้อง เหมาะสำหรับนำไปศึกษาและต่อยอด เช่น ระบบส่งงานนักเรียน ระบบรับเอกสารออนไลน์ ระบบส่งผลงาน ระบบรับสมัคร ระบบอัปโหลดเอกสารราชการ ระบบส่งไฟล์ประกอบการเรียน ระบบ Upload ภาพกิจกรรม ระบบจัดเก็บเอกสารลง Google Drive ดาวน์โหลดฟรีในระบบ CodeHub สามารถเข้าไปดาวน์โหลด Source Code พร้อมนำไปศึกษาและพัฒนาต่อยอดได้ในระบบ CodeHub เงื่อนไขการใช้งาน แจกฟรีเพื่อการศึกษาและการพัฒนาระบบ สามารถนำไปปรับแต่งและต่อยอดได้ ไม่อนุญาตให้นำ Source Code นี้ไปจำหน่าย ไม่อนุญาตให้นำไปแจกต่อในรูปแบบที่มีค่าใช้จ่าย หากนำไปพัฒนาต่อ สามารถปรับให้เหมาะกับระบบของโรงเรียนหรือหน่วยงานของตนเองได้ จาก PHP → Google Apps Script → Google Drive เปลี่ยนเว็บไซต์ธรรมดาให้สามารถรับไฟล์และจัดเก็บบน Cloud ได้ง่ายขึ้น เหมาะสำหรับครู นักเรียน และนักพัฒนาที่ต้องการศึกษาแนวทางการเชื่อมต่อ PHP กับ Google Apps Script และ Google Drive