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

ระบบบันทึกผลซ่อมเสริม

ระบบบันทึกผลซ่อมเสริม 📋 สรุปภาพรวมการทำงาน เปลี่ยนการจดกระดาษแบบเดิม ๆ ให้เป็นระบบออนไลน์ที่กรอกง่าย บันทึกไว และดูข้อมูลได้ทันทีผ่าน Google Sheets ครูกรอกข้อมูลผ่านมือถือหรือคอมพิวเตอร์ ข้อมูลวิ่งเข้า Sheet อัตโนมัติ พร้อมใช้งานจริงในโรงเรียน 🔹 องค์ประกอบหลักของระบบ (The 3 Pillars) 🟢 Frontend – หน้าเว็บฟอร์ม (index.html) • สำหรับครูผู้สอนกรอกข้อมูล เช่น รหัสนักเรียน ชื่อ คะแนน และผลการประเมิน • ออกแบบด้วย Tailwind CSS รองรับมือถือเต็มรูปแบบ • ส่งข้อมูลไปหลังบ้านด้วย google.script.run • แจ้งเตือนผลการบันทึกแบบ Popup ทันที 🔵 Backend – สมองของระบบ (Code.gs) • doGet(): เรียกหน้าเว็บให้ใช้งานผ่านลิงก์ • saveRemedialData(): รับข้อมูล สร้าง TimeStamp และบันทึกลง Sheet • setup(): ฟังก์ชันขอสิทธิ์ระบบ ป้องกันปัญหาหน้าจอขาวก่อน Deploy 🟢 Database – Google Sheets • เก็บข้อมูลต่อเนื่องแบบเรียลไทม์ • สร้างหัวตารางให้อัตโนมัติครั้งแรก • ผู้บริหารเปิดดูผลได้ทันที ไม่ต้องรอรายงาน 🔹 ขั้นตอนการทำงาน (Data Flow) 1. ครูเปิดลิงก์ Web App → กรอกข้อมูล → กดบันทึก 2. ระบบล็อกปุ่มกันกดซ้ำ และส่งข้อมูลไป Backend 3. Code.gs ประมวลผล → ตรวจหัวตาราง → เชื่อม Sheet 4. บันทึกข้อมูลต่อท้ายอัตโนมัติ 5. แจ้งผล Success พร้อม Popup สีเขียว และล้างฟอร์มทันที 🔹 ปัญหาที่พบและการแก้ไข ⚠️ White Screen จากการบล็อกหน้าต่างขอสิทธิ์ของ Browser ✔️ แก้ด้วยการรันฟังก์ชัน setup() ใน Apps Script Editor เพื่อ Authorize ก่อน Deploy ทำให้ใช้งานได้สมบูรณ์ ✅ จุดเด่นของระบบ • Real-time ผู้บริหารติดตามผลได้ทันที • ลดการใช้กระดาษและงานเอกสาร • ใช้งานได้ทุกที่ แค่มีอินเทอร์เน็ต • เหมาะกับโรงเรียนที่ต้องการระบบง่าย แต่ใช้ได้จริง ระบบเล็ก ๆ แต่ช่วยลดงานครูได้มหาศาล และต่อยอดพัฒนาเป็นระบบติดตามนักเรียนแบบเต็มรูปแบบได้ในอนาคต 🚀

ระบบเบิกวัสดุสำนักงานออนไลน์

ระบบเบิกวัสดุสำนักงานออนไลน์ 📦✨ ใครกำลังมองหาระบบเบิกของในองค์กร/โรงเรียน แบบใช้งานได้จริง ตัวนี้ตอบโจทย์มากค่ะ 👍 วันนี้ขอสรุปภาพรวมการทำงานให้เข้าใจง่ายๆ ว่าระบบนี้ทำงานยังไง 👇 💡 ระบบนี้ออกแบบเป็น 3 ส่วนหลัก (3-Tier Architecture) 📊 1. ฐานข้อมูล (Google Sheets) เป็นเหมือนที่เก็บข้อมูลทั้งหมด แบ่งเป็น - Requests → เก็บประวัติการเบิกทั้งหมด - Settings → เก็บรายการวัสดุที่ให้เบิก ⚙️ 2. ระบบหลังบ้าน (Google Apps Script) ทำหน้าที่เป็น “สมอง” ของระบบ - รับคำสั่งจากหน้าเว็บ - ดึง/บันทึกข้อมูลลงชีต - จัดการสถานะคำขอ (อนุมัติ/ปฏิเสธ) 💻 3. หน้าจอผู้ใช้งาน (Frontend HTML) 👨‍💼 ฝั่งพนักงาน - เลือกรายการวัสดุ (ดึงจากระบบอัตโนมัติ) - กรอกข้อมูล + ส่งคำขอ - ระบบสร้างรหัสคำขอ + บันทึกทันที - มีแจ้งเตือนสวยงาม ใช้งานง่าย 🛠️ ฝั่งแอดมิน - ดูคำขอทั้งหมดแบบตาราง - กรองเฉพาะ “รออนุมัติ” - กดอนุมัติ / ปฏิเสธ ได้ทันที - เพิ่มรายการวัสดุใหม่ได้เองแบบ Real-time ✨ จุดเด่นของระบบนี้ ✅ ข้อมูลอัปเดตทันที (Real-time) ✅ ใช้งานง่าย UX ดี มีแจ้งเตือนสวย ✅ แยก User Admin ชัดเจน ✅ ใช้ฟรีบน Google ไม่ต้องมีเซิร์ฟเวอร์ 📌 เหมาะกับ: โรงเรียน / องค์กร / สำนักงาน ที่อยากเลิกใช้กระดาษ การเข้าใช้งานหน้า admin พิมพ์ ?page=admin ต่อท้าย exec

ระบบแบบประเมินความพึงพอใจ

ระบบ "แบบประเมินความพึงพอใจ" ออนไลน์ 🎉 ทำงานด้วย Google Apps Script + Google Sheets ใช้งานง่าย ✨ ✅ ครู / อาจารย์ / หน่วยงาน สามารถนำไปใช้เก็บข้อมูลออนไลน์ได้เลย ✅ เก็บผลลัพธ์ลง Google Sheets อัตโนมัติ ✅ นำไปทำสำเนา (Make a copy) แล้วใช้งานได้ทันที ❌ ไม่อนุญาตให้นำไปขาย หรือใช้ในเชิงพาณิชย์ 📌 ระบบนี้สร้างจากการทดลอง Canva AI + App Script เพื่อช่วยลดเวลาในการทำงาน

ระบบประเมินผลการปฏิบัติงานบุคลากร

ระบบประเมินผลการปฏิบัติงานบุคลากร ❌ ไม่อนุญาตให้นำไปจำหน่ายนะคะ สรุปภาพรวมการทำงานของโค้ดในหน้า Canvas (Index.html) ให้ฟังแบบเข้าใจง่ายค่ะ 👇 💻 ระบบนี้เป็น “หน้าจอผู้ใช้งาน (Frontend/UI)” ของระบบประเมินผล ซึ่งแบ่งการทำงานออกเป็น 3 ส่วนหลัก 🔹 1. ส่วนแสดงผล (UI & Layout) หน้าเว็บถูกออกแบบด้วย HTML และ Tailwind CSS ทำให้หน้าตาสวยงาม รองรับทุกอุปกรณ์ทั้งมือถือและคอมพิวเตอร์ (Responsive) ใช้ฟอนต์ “Sarabun” จาก Google Fonts เพื่อความเป็นทางการ อ่านง่าย ปุ่มให้คะแนน 1-5 มีการใช้ JavaScript ช่วยสร้างแบบอัตโนมัติ ลดโค้ดซ้ำ ทำให้โค้ดดูสะอาดและเป็นระเบียบมากขึ้น 🔹 2. ส่วนฟอร์มรับข้อมูล (Form Inputs) มีช่องกรอกข้อมูลสำคัญ เช่น - ชื่อผู้ประเมิน - ผู้ถูกประเมิน - แบบประเมิน 4 ด้าน (ความรับผิดชอบ / คุณภาพงาน / การทำงานเป็นทีม / ความคิดริเริ่ม) - ช่องข้อเสนอแนะเพิ่มเติม พร้อมปุ่ม “บันทึกผล” ที่มี Loading Spinner ซ่อนไว้ เพื่อแสดงสถานะตอนส่งข้อมูล 🔹 3. ส่วนประมวลผล (JavaScript Logic) เมื่อกด “บันทึก” ระบบจะไม่รีเฟรชหน้า (e.preventDefault()) และแสดง Loading เพื่อให้ผู้ใช้รู้ว่าระบบกำลังทำงาน จากนั้นจะรวบรวมข้อมูลทั้งหมดเป็น Object แล้วส่งไปยังฝั่ง Server (Code.gs) ด้วยคำสั่ง google.script.run เพื่อนำไปบันทึกลง Google Sheet 📌 ผลลัพธ์: ✅ ถ้าสำเร็จ → แจ้งเตือนด้วย SweetAlert2 + ล้างฟอร์ม ❌ ถ้าผิดพลาด → แจ้งเตือน Error ให้ผู้ใช้ทราบทันที 🎯 จุดเด่นของระบบนี้ ✔ ใช้งานง่าย ไม่ต้องมีเซิร์ฟเวอร์ ✔ ทำงานบน Google ทั้งระบบ ✔ เหมาะกับโรงเรียน/องค์กรที่ต้องการระบบประเมินแบบรวดเร็ว

ระบบรับแจ้งปัญหาการใช้งานระบบ

เคยไหมคะ? ผู้ใช้แจ้งปัญหาผ่านไลน์บ้าง โทรบ้าง ทักแชตบ้าง สุดท้ายข้อมูลกระจัดกระจาย ตามงานยาก 😵‍💫 ระบบนี้ถูกออกแบบมาเพื่อแก้ปัญหานั้นโดยตรงค่ะ 👇 ⸻ 💡 ระบบนี้ทำอะไรได้บ้าง? 📌 เป็น เว็บฟอร์มรับแจ้งปัญหาออนไลน์ ผู้ใช้กรอกข้อมูล → กดส่ง → ระบบบันทึกให้อัตโนมัติ ไม่ต้องลงโปรแกรม ไม่ต้องมีเซิร์ฟเวอร์ 📌 ใช้งานบน Google ทั้งระบบ • เปิดผ่านเว็บได้เลย • ข้อมูลเก็บใน Google Sheets • ดูย้อนหลัง แก้ไข และต่อยอดได้ง่ายมาก ⸻ 🖥️ การทำงานแบบเข้าใจง่าย 👤 ฝั่งผู้ใช้งาน • เปิดหน้าเว็บ • กรอกปัญหาที่พบ • กดส่งข้อมูล • ระบบแสดงแจ้งเตือนว่ารับเรื่องเรียบร้อย ✅ 🧑‍💻 ฝั่งผู้ดูแล • ข้อมูลถูกบันทึกลง Google Sheets ทันที • แต่ละรายการมี เลข Ticket สำหรับอ้างอิง • เปิดดู แยกงาน และจัดการต่อได้สะดวก ⸻ ✨ จุดเด่นของระบบ • หน้าตาสวย ใช้งานง่าย รองรับมือถือ 📱 • ไม่ต้องรีโหลดหน้าเว็บ • มีสถานะกำลังโหลด ไม่งงว่าระบบค้างหรือไม่ • แจ้งเตือนสวยงาม ดูเป็นมืออาชีพ • ฟอนต์ภาษาไทย อ่านง่าย ⸻ 🚀 สามารถพัฒนาต่อยอดอะไรได้อีก? • แจ้งเตือนอีเมล หรือ LINE เมื่อมีคนแจ้งปัญหา • แนบรูปภาพปัญหา เช่น หน้าจอ Error • ตรวจสอบสถานะงานจากเลข Ticket • ทำหน้า Admin สำหรับเจ้าหน้าที่ • ผูกกับอีเมลผู้ใช้ในองค์กรอัตโนมัติ ⸻ 🎯 เหมาะกับใคร? ✅ โรงเรียน ✅ หน่วยงานราชการ ✅ องค์กรขนาดเล็ก ✅ ครู / นักพัฒนา / คนดูแลระบบ ✅ คนที่อยากเริ่มทำระบบ Helpdesk แบบจริงจัง

ระบบรายงานการเรียนต่อของนักเรียนชั้น ม.6

ระบบรายงานการเรียนต่อ นักเรียนชั้น ม.6 🎓 ทำสำเนาใต้คอมเมนต์ (ไม่อนุญาตให้นำไปจำหน่าย) ใครกำลังมองหาระบบสรุปข้อมูลการเรียนต่อของนักเรียนแบบมืออาชีพ ใช้งานง่าย และดูสถิติได้ทันที บอกเลยว่าตัวนี้ตอบโจทย์มากค่ะ ✅ ระบบนี้ถูกออกแบบเป็น Single Page Application (SPA) ทำงานจบในหน้าเดียว ไม่ต้องรีเฟรชหน้าจอ พัฒนาด้วย Google Apps Script (GAS) + Google Sheets เป็นฐานข้อมูลหลังบ้าน ⸻ 🔹 1. ส่วนฟอร์มสำหรับนักเรียน (form-view) 📝 กรอกข้อมูลสำคัญ เช่น • รหัสนักเรียน • ชื่อ-สกุล • ห้อง • แผนการเรียน ⚙️ ฟิลด์แบบไดนามิก (Dynamic Fields) ถ้าเลือก “ศึกษาต่อมหาวิทยาลัย” หรือ “วิทยาลัย/อาชีวศึกษา” ระบบจะแสดงช่องกรอก ชื่อสถาบัน / คณะ / จังหวัด อัตโนมัติ แต่ถ้าเลือก “ทำงาน” หรือ “อื่นๆ” ช่องเหล่านี้จะซ่อนทันที 🚀 บันทึกข้อมูลแบบไม่ต้องรีโหลดหน้า ใช้ google.script.run เชื่อมต่อหลังบ้านโดยตรง บันทึกเสร็จมีหน้าต่างขอบคุณ พร้อมป้องกันการกดซ้ำด้วย Loading Spinner ⸻ 🔹 2. Dashboard สำหรับแอดมิน (admin-view) 👨‍💼 กดสลับโหมดเพื่อเข้าสู่หน้าแอดมิน ระบบจะดึงข้อมูลล่าสุดจาก Google Sheets อัตโนมัติ 📊 สรุปสถิติแบบเรียลไทม์ • จำนวนผู้กรอกข้อมูลทั้งหมด • สัดส่วนเรียนต่อ vs ทำงาน • 5 อันดับมหาวิทยาลัยยอดนิยม 📈 แสดงกราฟด้วย Chart.js • กราฟโดนัท แสดงสถานะการเรียนต่อ • กราฟแท่ง แสดงจำนวนนักเรียนแยกตามห้อง 🔍 ตารางข้อมูล + ค้นหาแบบ Real-time พิมพ์ปุ๊บ กรองข้อมูลทันที (รหัส / ชื่อ / มหาวิทยาลัย) ⸻ 🔹 3. เทคโนโลยีที่ใช้ (UI & UX) 🎨 ออกแบบ Responsive 100% ด้วย Tailwind CSS ใช้งานได้ทั้งมือถือและคอมพิวเตอร์ ✨ ไอคอนสวย ๆ จาก Lucide 📊 กราฟสถิติสวยงาม เข้าใจง่าย 🔄 Loading State ป้องกันการส่งข้อมูลซ้ำ ⸻ 💡 สรุปจุดเด่นของระบบนี้ ✅ ฟรี ใช้ Google Account ก็ทำได้ ✅ ไม่ต้องมีเซิร์ฟเวอร์ ✅ จัดการข้อมูลผ่าน Google Sheets ✅ ดูสถิติภาพรวมได้ทันที ✅ ปรับแต่งต่อยอดได้เอง เหมาะสำหรับ 🏫 โรงเรียนมัธยมศึกษา 👩‍🏫 งานวิชาการ / งานแนะแนว 📊 ผู้บริหารที่ต้องการข้อมูลภาพรวมทันที