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

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

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

ระบบจัดเก็บข้อมูล Tablet โครงการ Anywhere Anytime

📱✨ แจกฟรี App Script “ระบบจัดการ Tablet โครงการ Anywhere Anytime” ไม่อนุญาตให้จำหน่าย ดาวน์โหลดได้ในระบบ CodeHub เปิดเทอมนี้ โรงเรียนไหนกำลังจัดการแท็บเล็ตนักเรียนอยู่ ระบบนี้ช่วยได้ 💻📚 จัดเก็บข้อมูลแท็บเล็ตนักเรียนได้อย่างเป็นระบบ ใช้งานผ่านเว็บได้ทั้งมือถือและคอมพิวเตอร์ ✅ บันทึกข้อมูลนักเรียนและแท็บเล็ต ✅ จัดการสถานะการใช้งาน/ซ่อม/คืนเครื่อง ✅ แสดงข้อมูลแบบเรียลไทม์ผ่าน Google Sheets ✅ เพิ่ม ลบ ดูข้อมูลได้ทันที ✅ ใช้งานง่าย รองรับทั้งครูและแอดมิน ✅ ฟรี! ทำงานบน Google Apps Script ไม่ต้องมีเซิร์ฟเวอร์ 🔄 ระบบทำงานในรูปแบบ Web App เชื่อมต่อ Google Sheets โดยแบ่งการทำงานเป็น 3 ส่วนหลัก 📌 Frontend (index.html) ฟอร์มกรอกข้อมูล + ตารางแสดงผล ออกแบบด้วย Tailwind CSS รองรับทุกอุปกรณ์ แจ้งเตือนสวยงามด้วย SweetAlert2 📌 Backend (Code.gs) จัดการบันทึก ดึงข้อมูล และลบข้อมูลผ่าน Google Apps Script ทำงานแบบไม่ต้องรีเฟรชหน้าเว็บ 📌 Database (Google Sheets) เก็บข้อมูลแบบออนไลน์ ดูข้อมูลต่อยอดหรือสรุปรายงานได้ทันที 🚀 จุดเด่นของระบบ • ใช้งานฟรีบนโครงสร้างพื้นฐานของ Google • เปิดใช้งานได้ทุกที่ผ่าน Browser • ข้อมูลอัปเดตแบบ Real-time • เหมาะสำหรับโรงเรียนในโครงการ Anywhere Anytime

ระบบปฏิทินข่าวประชาสัมพันธ์ (PR Content Planner)

📢 แจกฟรี App Script ระบบปฏิทินข่าวประชาสัมพันธ์ (PR Content Planner) จัดการแผนคอนเทนต์ได้ครบ จบในระบบเดียว ✨ 📌 ไม่อนุญาตให้จำหน่าย หมดปัญหาวางแผนโพสต์กระจัดกระจาย ลืมโพสต์ หรือทีมงานสื่อสารไม่ตรงกัน เพราะระบบนี้ออกแบบมาเพื่อช่วยวางแผนและบริหารคอนเทนต์ประชาสัมพันธ์แบบมืออาชีพ ผ่านหน้าเว็บเดียว เชื่อมต่อ Google Calendar อัตโนมัติด้วย Google Apps Script (GAS) 🔹 ฟีเจอร์หลักของระบบ ✅ สร้างแผนโพสต์ข่าวประชาสัมพันธ์ได้ง่าย ✅ ดูตารางคอนเทนต์ทั้งหมดในหน้าเดียว ✅ แก้ไข / ลบ แผนงานได้ทันที ✅ ซิงค์ข้อมูลกับ Google Calendar อัตโนมัติ ✅ แจ้งเตือนก่อนถึงเวลาลงโพสต์ ✅ จัดเก็บข้อมูลเป็นระบบผ่าน Google Sheets ⚙️ การทำงานของระบบ 🖥 Frontend (หน้าเว็บ) ใช้สำหรับกรอกข้อมูลโพสต์ เช่น วันที่ เวลา แพลตฟอร์ม และหัวข้อข่าว พร้อมแสดงตารางสรุปแผนงานทั้งหมด 🧠 Backend (Google Apps Script) ทำหน้าที่รับคำสั่งจากหน้าเว็บ ประมวลผลข้อมูล และเชื่อมต่อบริการต่าง ๆ ของ Google 📊 Database & Notification ข้อมูลทั้งหมดถูกเก็บใน Google Sheets และสร้าง Event ใน Google Calendar พร้อมแจ้งเตือนอัตโนมัติ 🚀 Workflow การทำงาน 📌 เปิดหน้าเว็บ → โหลดข้อมูลจาก Google Sheets มาแสดงทันที 📌 สร้างแผนใหม่ → ระบบสร้าง Event ใน Google Calendar พร้อมตั้งแจ้งเตือน 📌 แก้ไขข้อมูล → อัปเดตทั้ง Sheet และ Calendar อัตโนมัติ 📌 ลบรายการ → ลบทั้งฐานข้อมูลและปฏิทินพร้อมกัน 🔔 ระบบแจ้งเตือนอัจฉริยะ ⏰ Popup แจ้งเตือนล่วงหน้า 30 นาที 📧 Email แจ้งเตือนล่วงหน้า 1 วัน ✨ จุดเด่นของระบบ ✔ Google Sheet เป็นฐานข้อมูลกลาง ดูง่าย จัดการสะดวก ✔ ทุกการเปลี่ยนแปลง Sync กับ Calendar ทันที ✔ ลดความผิดพลาดจากการลืมโพสต์ ✔ เหมาะสำหรับโรงเรียน องค์กร หน่วยงาน หรือทีมประชาสัมพันธ์ เปิดเทอมนี้ หรือช่วงกิจกรรมแน่น ๆ มีระบบช่วยวางแผนคอนเทนต์กันหรือยัง 😊

ระบบแจ้งผู้ปกครองเมื่อเด็กขาดเรียนผ่าน Telegram

📢 แจกฟรี App Script “ระบบแจ้งผู้ปกครองเมื่อเด็กขาดเรียนผ่าน Telegram” ❌ ไม่อนุญาตให้นำไปจำหน่าย 📌 จะเปิดเทอมแล้ว… โรงเรียนของคุณมีระบบแจ้งเตือนผู้ปกครองหรือยัง? ระบบนี้ถูกออกแบบมาให้คุณครูสามารถเช็กนักเรียนขาดเรียน และส่งแจ้งเตือนไปยังผู้ปกครองผ่าน Telegram ได้อย่างรวดเร็ว ใช้งานผ่าน Web App ได้ทั้งคอมพิวเตอร์และมือถือ สะดวก ใช้งานง่าย ไม่ต้องติดตั้งโปรแกรมเพิ่ม ✨ สรุปภาพรวมการทำงานของระบบ 🔹 หน้าเว็บใช้งานง่าย (Frontend UI) ระบบออกแบบด้วย Tailwind CSS ให้สวยงาม รองรับทุกอุปกรณ์ พร้อมใช้ SweetAlert2 สำหรับ Pop-up แจ้งเตือน และ Font Awesome สำหรับไอคอนต่าง ๆ 🔹 โหลดรายชื่อนักเรียนอัตโนมัติ เมื่อเปิดหน้าเว็บ ระบบจะแสดงวันที่ปัจจุบัน พร้อมดึงรายชื่อนักเรียนจาก Google Sheet ผ่าน Google Apps Script มาแสดงในรูปแบบตารางทันที 🔹 เลือกนักเรียนที่ขาดเรียนได้สะดวก สามารถติ๊ก Checkbox รายบุคคล หรือกด “เลือกทั้งหมด” ได้ทันที เหมาะสำหรับกรณีขาดเรียนหลายคน 🔹 แจ้งเตือนไปยัง Telegram อัตโนมัติ เมื่อกดปุ่ม “แจ้งเตือนไปยัง Telegram” ระบบจะตรวจสอบรายการ ยืนยันก่อนส่ง และส่งข้อมูลไปยังหลังบ้านเพื่อยิง API เข้า Telegram แบบอัตโนมัติ 🔹 แจ้งผลการทำงานแบบ Real-time ✅ ส่งสำเร็จ → แจ้งเตือนสีเขียว พร้อมล้างรายการที่เลือก ❌ ส่งล้มเหลว → แจ้งสาเหตุทันทีผ่าน Pop-Up สีแดง 💡 เหมาะสำหรับ ✅ ครูที่ปรึกษา ✅ งานระบบดูแลช่วยเหลือนักเรียน ✅ โรงเรียนที่ต้องการสื่อสารกับผู้ปกครองรวดเร็วขึ้น ✅ ลดภาระงานเอกสารและการโทรแจ้งรายบุคคล :::