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

ระบบคุมเลขทะเบียนเกียรติบัตร

🎉 แจกฟรี App Script ระบบจองเลขทะเบียนเกียรติบัตร ดาวน์โหลดได้ในระบบ CodeHub 🚀 หมดปัญหา “เลขทะเบียนซ้ำ” และการจัดการเลขเกียรติบัตรแบบวุ่นวาย! ระบบนี้ถูกออกแบบมาเพื่อช่วยหน่วยงาน โรงเรียน และฝ่ายงานต่าง ๆ บริหารจัดการเลขทะเบียนเกียรติบัตรแบบส่วนกลางได้อย่างเป็นระบบ 💯 ✨ พัฒนาด้วย Google Apps Script + Google Sheets ใช้งานฟรี ไม่ต้องเช่า Hosting และไม่ต้องมี Server 📌 แนวคิดการทำงานของระบบ ระบบนี้ทำงานแบบ “จองเป็นชุด” (Reserve by Block) เหมาะสำหรับกิจกรรมที่มีผู้เข้าร่วมจำนวนมาก เพียงกรอก “จำนวนคน” ระบบจะคำนวณช่วงเลขทะเบียนให้อัตโนมัติทันที 🔄 Workflow การทำงานของระบบ 1️⃣ ฝั่งผู้ใช้งาน (Frontend / Web UI) ผู้ใช้งานเข้าใช้งานผ่าน Web App รองรับทั้งมือถือและคอมพิวเตอร์ 📱💻 กรอกข้อมูลสำคัญ ได้แก่: ✅ กลุ่มสาระ / ฝ่ายงาน ✅ ชื่อโครงการหรือกิจกรรม ✅ จำนวนเกียรติบัตรที่ต้องการ ✅ วันที่ลงในเกียรติบัตร เมื่อกด “ยืนยันการจองเลข” ระบบจะล็อกปุ่มทันที ป้องกันการกดซ้ำ 2️⃣ ฝั่งประมวลผล (Backend / GAS) ระบบจะตรวจสอบข้อมูลล่าสุดใน Google Sheets แล้วคำนวณเลขทะเบียนถัดไปอัตโนมัติ ตัวอย่าง: หากเลขล่าสุดจบที่ 2569/0120 ระบบจะเริ่มใหม่ที่ 2569/0121 🎯 รองรับการขึ้นปี พ.ศ. ใหม่อัตโนมัติ พร้อมรีเซ็ตเลขกลับไปเริ่มที่ 0001 3️⃣ ฝั่งฐานข้อมูล (Database) ระบบจะบันทึกข้อมูลลง Google Sheets อัตโนมัติ เช่น: 📌 วันเวลาที่จอง 📌 ช่วงเลขทะเบียนที่ได้รับ 📌 จำนวนใบรวม 📌 ชื่อโครงการ / ฝ่ายงาน 📌 วันที่ออกเกียรติบัตร 4️⃣ การแสดงผลลัพธ์ (Feedback) เมื่อจองสำเร็จ ระบบจะแสดง Pop-up สรุปผลผ่าน SweetAlert2 🎉 พร้อมแจ้ง: ✅ เลขเริ่มต้น ✅ เลขสิ้นสุด ✅ ช่วงเลขที่ได้รับทั้งหมด เพื่อนำไปใช้ต่อกับ: 📄 Mail Merge 📄 ระบบสร้างเกียรติบัตร 📄 ไฟล์ Word อัตโนมัติ 🌟 จุดเด่นของระบบ ✅ จบปัญหาเลขทะเบียนชนกัน ✅ ทำงาน Real-time ผ่าน Google Sheets ✅ รองรับผู้ใช้งานหลายคนพร้อมกัน ✅ ไม่ต้องพิมพ์ชื่อทีละคน ✅ เหมาะกับกิจกรรมขนาดใหญ่ ✅ ใช้งานฟังก์ชัน Ecosystem ของ Google ✅ ไม่ต้องเช่า Server หรือ Database ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อ ✅ สามารถนำไปศึกษาและพัฒนาต่อยอดได้

ระบบลงทะเบียนอบรมออนไลน์

🎉 แจกฟรี App Script ระบบลงทะเบียนออนไลน์ ดาวน์โหลดได้แล้วในระบบ CodeHub 🚀 เหมาะสำหรับโรงเรียน หน่วยงานราชการ อบรม สัมมนา และกิจกรรมต่าง ๆ ระบบนี้พัฒนาด้วย Google Apps Script + Google Sheets ใช้งานฟรี ไม่ต้องเช่า Hosting และไม่ต้องมี Server เอง 💻☁️ ✨ จุดเด่นของระบบ ✅ ลงทะเบียนออนไลน์ผ่านเว็บได้ทันที ✅ บันทึกข้อมูลอัตโนมัติลง Google Sheets ✅ มี Dashboard ดูข้อมูลผู้ลงทะเบียน ✅ แสดงสถิติผู้ลงทะเบียนแบบเรียลไทม์ ✅ ใช้งานง่าย รองรับมือถือและคอมพิวเตอร์ ✅ ดีไซน์สวยด้วย Tailwind CSS ✅ แจ้งเตือนสวยงามด้วย SweetAlert2 🔧 โครงสร้างระบบแบ่งออกเป็น 3 ส่วนหลัก 1️⃣ Frontend (Index.html) * หน้าเว็บสำหรับกรอกข้อมูล * แบ่งแท็บ “ลงทะเบียน” และ “Dashboard” * จัดการการแสดงผลด้วย JavaScript * รองรับ Pop-up แจ้งเตือนแบบทันสมัย 2️⃣ Backend (Code.gs) * ทำงานผ่าน Google Apps Script * รับข้อมูลจากฟอร์ม * ส่งข้อมูลเข้า Google Sheets * ดึงข้อมูลกลับมาแสดงผลใน Dashboard 3️⃣ Database * ใช้ Google Sheets เป็นฐานข้อมูล * เก็บชื่อ อีเมล เบอร์โทร ประเภทผู้ใช้งาน และเวลาที่ลงทะเบียน 🔄 Workflow การทำงาน 📌 เมื่อผู้ใช้ลงทะเบียน กรอกข้อมูล → กดบันทึก → ระบบส่งข้อมูลไป Apps Script → บันทึกลง Google Sheets → แจ้งผลสำเร็จอัตโนมัติ 📌 เมื่อเปิด Dashboard ระบบดึงข้อมูลทั้งหมดจาก Google Sheets → คำนวณสถิติ → แสดงผลเป็นตารางสวยงามทันที 💡 จุดเด่นสำคัญคือ “ไม่ต้องมีความรู้ด้าน Server ก็สามารถสร้างระบบออนไลน์ใช้งานจริงได้” ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อ ✅ สามารถนำไปศึกษา พัฒนา และประยุกต์ใช้งานได้

ระบบบันทึกการประชุมออนไลน์

📋 แจกฟรี App Script “ระบบบันทึกการประชุมออนไลน์” ใช้งานผ่าน Google Sheets พร้อมระบบจัดการข้อมูลครบจบในตัว! ระบบนี้ถูกออกแบบให้เป็น Web Application แบบหน้าเดียว (Single Page Application - SPA) ทำงานบน Google Workspace โดยใช้ Google Apps Script (GAS) เชื่อมต่อกับ Google Sheets แบบ Serverless ไม่ต้องเช่า Hosting ไม่ต้องใช้ Firebase หรือ SQL ติดตั้งง่าย ใช้งานได้ทันที 💡 ✨ ฟีเจอร์เด่นภายในระบบ ✅ บันทึกข้อมูลการประชุมออนไลน์ ✅ แก้ไข / ลบ / ดูรายละเอียดข้อมูลย้อนหลัง ✅ Dashboard สรุปสถิติการประชุม ✅ ค้นหาและกรองข้อมูลได้ทันที ✅ รองรับ Action Items และลิงก์เอกสารประกอบ ✅ แจ้งเตือนสถานะการทำงานด้วย Toast Notification ✅ Responsive รองรับมือถือและคอมพิวเตอร์ ✅ ใช้ Tailwind CSS + Phosphor Icons ✅ โหลดข้อมูลแบบ Real-time ไม่ต้อง Refresh หน้าเว็บ 📌 โครงสร้างระบบ 🔹 Frontend - index.html - ใช้ Tailwind CSS ออกแบบ UI - เชื่อม Backend ด้วย google.script.run 🔹 Backend - code.gs (Google Apps Script) - จัดการ CRUD และ Logic ทั้งหมด 🔹 Database - Google Sheets - เก็บข้อมูลการประชุมทั้งหมดแบบตาราง 📊 ฟีเจอร์การจัดการข้อมูล (CRUD) ➕ Create : เพิ่มบันทึกการประชุม 👀 Read : ดูรายละเอียดการประชุม ✏️ Update : แก้ไขข้อมูลเดิม 🗑️ Delete : ลบข้อมูลพร้อมระบบยืนยันก่อนลบ 📌 เหมาะสำหรับ 🏫 โรงเรียน 🏢 หน่วยงานราชการ 🏛️ อบต. / เทศบาล 🎓 มหาวิทยาลัย 👥 องค์กรและทีมงานต่างๆ ⚡ จุดเด่นสำคัญ ใช้ google.script.run เชื่อมต่อ GAS โดยตรง ไม่ต้องตั้งค่า API เพิ่ม ไม่ต้องกังวลเรื่อง CORS ติดตั้งง่าย มือใหม่ก็ใช้งานได้ 🔒 สำหรับใช้งานและศึกษาพัฒนาเพิ่มเติม ❌ ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี

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

📢 แจกฟรี 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 🏢 เหมาะสำหรับหน่วยงาน ✅ โรงเรียน / สถานศึกษา ✅ อบต. / เทศบาล / อบจ. ✅ หน่วยงานราชการ ✅ มหาวิทยาลัย ✅ โรงพยาบาล / สาธารณสุข ✅ บริษัทเอกชน ✅ องค์กรที่มีการใช้ห้องประชุมหลายห้อง 💡 แจกเพื่อการศึกษาและใช้งานภายในองค์กร ❌ ไม่อนุญาตให้นำไปจำหน่ายต่อทุกกรณี

ระบบส่งงานออนไลน์

🎁 แจกฟรีสำหรับสมาชิก VIP ในระบบ Code Hub 🎉 ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี 📚 ระบบส่งงานออนไลน์ พร้อมโค้ดครบทั้ง Frontend + Backend ใช้งานได้จริง รองรับการส่งงานผ่าน Google Drive และ Google Sheets 🚀 📊 ภาพรวมและคู่มือการใช้งานระบบส่งงาน ระบบส่งงานออนไลน์นี้ถูกออกแบบมาในสถาปัตยกรรมแบบ API (Client-Server) โดยแยกส่วนหน้าบ้านและหลังบ้านออกจากกันอย่างชัดเจน เพื่อให้มีความยืดหยุ่นในการนำไปใช้งานและรองรับผู้ใช้งานจำนวนมากได้ดีขึ้น 🏗️ 1. โครงสร้างและการทำงานของระบบ (System Architecture) ระบบประกอบด้วย 2 ส่วนหลักที่ทำงานประสานกัน: 🌐 1.1 ฝั่งหน้าบ้าน (Frontend - index.html) เป็นหน้าเว็บไซต์ที่นักเรียนและครูใช้โต้ตอบ (User Interface) รูปแบบ: Single Page Application (SPA) สลับหน้าได้โดยไม่ต้องโหลดเว็บใหม่ เทคโนโลยี: HTML, CSS, JavaScript (รองรับมือถือด้วย Bootstrap 5) การเชื่อมต่อ: ใช้ Fetch API ส่งข้อมูลรูปแบบ JSON ไปยัง Backend ฟีเจอร์: ✅ ส่งงาน: แปลงไฟล์ที่อัปโหลดเป็น Base64 และส่งไปพร้อมกับข้อมูลฟอร์ม ✅ เช็คสถานะ: ส่งคำค้นหาไปถาม Backend และนำผลลัพธ์มาแสดงผลแบบ Card ✅ แดชบอร์ด: ดึงข้อมูลสถิติมาวาดเป็นกราฟด้วย Chart.js ⚙️ 1.2 ฝั่งหลังบ้าน (Backend - Code.gs) ทำหน้าที่เป็น REST API คอยรับคำสั่ง จัดการไฟล์ และบันทึกข้อมูล เทคโนโลยี: Google Apps Script (GAS) 📂 ระบบจัดการไฟล์ (Google Drive) • เมื่อมีไฟล์ส่งเข้ามา ระบบจะสร้างโฟลเดอร์แยกตาม “ห้องเรียน” อัตโนมัติ • ภายในโฟลเดอร์ห้องเรียน จะสร้างซับโฟลเดอร์แยกตาม “ชื่อชิ้นงาน” ให้อีกชั้น • ตั้งชื่อไฟล์ใหม่ให้อ่านง่าย: รหัสนักเรียน_ชื่อ_ชิ้นงาน.นามสกุล 📑 ระบบฐานข้อมูล (Google Sheets) ทำงานแบบ Dual Save (บันทึก 2 ที่) • บันทึกลงชีตหลัก SubmissionLogs • บันทึกลงชีตชื่อชิ้นงานแยกอัตโนมัติ เพื่อให้ครูตรวจงานง่ายขึ้น 🚀 2. ขั้นตอนการติดตั้งและนำไปใช้งาน (Deployment Guide) 📌 ขั้นตอนที่ 1: เตรียมพื้นที่จัดเก็บ (Drive & Sheets) • สร้างโฟลเดอร์หลักใน Google Drive • คัดลอก Folder ID • สร้าง Google Sheets สำหรับฐานข้อมูล • คัดลอก Spreadsheet ID 📌 ขั้นตอนที่ 2: ตั้งค่าฝั่ง Backend (Google Apps Script) • เปิด Extensions > Apps Script • วางโค้ดไฟล์ Code.gs • ใส่ Folder ID และ Spreadsheet ID • กดบันทึก 📌 ขั้นตอนที่ 3: Deploy ระบบ Backend • Deploy > New Deployment • เลือก Web App • ตั้งค่า Anyone • กด Deploy และอนุญาตสิทธิ์ • คัดลอก Web App URL 📌 ขั้นตอนที่ 4: ตั้งค่าฝั่ง Frontend • เปิดไฟล์ index.html • ใส่ WEB_APP_URL • บันทึกไฟล์และนำไปใช้งานได้ทันที 🌐 รองรับการนำขึ้นใช้งานผ่าน GitHub Pages / Netlify / Google Sites 💡 3. คำแนะนำเพิ่มเติมสำหรับการดูแลระบบ ✅ เพิ่มชิ้นงานใหม่ได้ง่าย เพียงเพิ่ม ใน index.html ระบบจะสร้างโฟลเดอร์และชีทให้อัตโนมัติ ✅ ครูสามารถตรวจงานและอัปเดตคะแนนผ่าน Google Sheets ได้ทันที นักเรียนตรวจสอบสถานะล่าสุดได้แบบ Real-time 📥 ดาวน์โหลดได้เฉพาะในระบบ Code Hub สำหรับสมาชิก VIP เท่านั้น ⚠️ ไม่อนุญาตให้นำไปจำหน่าย ดัดแปลงเพื่อขาย หรือแจกต่อเชิงพาณิชย์ทุกกรณี :::

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

📍 แจกฟรี 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'