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

ระบบลงทะเบียนฉีดวัคซีนสัตว์เลี้ยง

ระบบลงทะเบียนฉีดวัคซีนสัตว์เลี้ยง (Web App) พร้อมเชื่อม Google Sheets วันนี้ขอแบ่งปันตัวอย่าง โค้ดระบบรับข้อมูลออนไลน์ ที่พัฒนาด้วย Google Apps Script + HTML + Tailwind CSS สามารถนำไปประยุกต์ใช้ทำระบบต่างๆ ได้ เช่น ระบบลงทะเบียน ระบบบันทึกข้อมูล หรือแบบฟอร์มออนไลน์ของหน่วยงานครับ 🔎 ภาพรวมการทำงานของโค้ด (Frontend) โค้ดส่วนนี้เป็น หน้าบ้าน (Frontend) ทำหน้าที่รับข้อมูลจากผู้ใช้งานและส่งต่อไปบันทึก โดยแบ่งการทำงานหลัก ๆ ออกเป็น 3 ส่วน 🧩 1. ส่วนหน้าตาฟอร์ม (UI Design) • ใช้ HTML สร้างโครงสร้างฟอร์มรับข้อมูล เช่น • ชื่อสัตว์เลี้ยง • ประเภทสัตว์ • สายพันธุ์ • ข้อมูลเจ้าของ • ข้อมูลการนัดหมาย • ใช้ Tailwind CSS ช่วยตกแต่งหน้าตาให้สวยงามและรองรับมือถือ (Responsive) • ใช้ฟอนต์ Kanit เพื่อให้อ่านง่าย เหมาะกับผู้ใช้งานภาษาไทย ⚙️ 2. ส่วนควบคุมการทำงานเมื่อกดส่งข้อมูล (JavaScript Logic) เมื่อผู้ใช้กดปุ่ม “ยืนยันการลงทะเบียน” ระบบจะ • หยุดการรีเฟรชหน้าเว็บด้วย e.preventDefault() • ล็อคปุ่มกดชั่วคราว เพื่อป้องกันการส่งข้อมูลซ้ำ • เปลี่ยนข้อความเป็น “กำลังบันทึก…” พร้อมไอคอน Loading • รวบรวมข้อมูลจากฟอร์มทั้งหมดมาเก็บไว้ในตัวแปร data 🔗 3. ส่วนเชื่อมต่อและแจ้งเตือนผลลัพธ์ (API & Feedback) ระบบจะใช้คำสั่ง google.script.run เพื่อส่งข้อมูล data ไปยังฟังก์ชัน processForm() ที่อยู่ในฝั่งหลังบ้าน (Google Apps Script / Code.gs) เพื่อบันทึกลง Google Sheets ✅ กรณีบันทึกสำเร็จ • แสดงข้อความสีเขียวแจ้งว่า บันทึกข้อมูลเรียบร้อย • ล้างข้อมูลในฟอร์ม (Reset Form) • ปลดล็อคปุ่มให้ใช้งานได้ตามปกติ ❌ กรณีเกิดข้อผิดพลาด • แสดงข้อความแจ้งเตือนสีแดง • ปลดล็อคปุ่มให้ผู้ใช้สามารถกดส่งข้อมูลใหม่ได้ ⏱️ ข้อความแจ้งเตือนทั้งหมดจะค่อยๆ ซ่อนหายไปเองภายใน 5 วินาที 💡 โค้ดนี้สามารถนำไปต่อยอดทำเป็น • ระบบลงทะเบียนกิจกรรม • ระบบบันทึกข้อมูลประชาชน • ระบบลงทะเบียนสัตว์เลี้ยง • ระบบแบบฟอร์มออนไลน์ของหน่วยงาน

ระบบลงเวลาปฏิบัติงานด้วย GPS

ระบบลงเวลาปฏิบัติงานด้วย GPS ด้วย Google Apps Script เหมาะสำหรับหน่วยงานที่ต้องการระบบลงเวลาออนไลน์ ใช้งานง่าย ไม่ต้องติดตั้งแอป รองรับมือถือทันที ❗ แจกฟรีสำหรับการใช้งานเท่านั้น ไม่อนุญาตให้นำไปจำหน่ายหรือดัดแปลงเพื่อขาย 📥 สำเนาโค้ดอยู่ใต้คอมเมนต์ ⸻ ⏰ ระบบลงเวลาปฏิบัติงานด้วย GPS (Google Apps Script) ระบบนี้ถูกพัฒนาในรูปแบบ Web Application สามารถเปิดใช้งานผ่านมือถือหรือคอมพิวเตอร์ได้ทันที โดยมีโครงสร้างการทำงานหลัก 3 ส่วนสำคัญ ดังนี้ 🛠️ องค์ประกอบหลักของระบบ 1️⃣ ส่วนหน้าบ้าน (Front-end / UI) ไฟล์ index.html ทำหน้าที่เป็นหน้าเว็บสำหรับให้พนักงานลงเวลา • ออกแบบให้ใช้งานบนมือถือได้ดี • ใช้ Tailwind CSS เพื่อให้หน้าตาสวยงาม • ใช้ SweetAlert2 สำหรับระบบแจ้งเตือนแบบ Pop-up ผู้ใช้งานสามารถกรอกข้อมูลและกดบันทึกเวลาได้อย่างสะดวก ⸻ 2️⃣ ส่วนหลังบ้าน (Back-end / Server) ไฟล์ Code.gs ซึ่งเป็น Google Apps Script ทำหน้าที่ • รับข้อมูลจากหน้าเว็บ • ประมวลผลข้อมูล • สร้างลิงก์แผนที่จากพิกัด GPS • บันทึกข้อมูลลงฐานข้อมูล ⸻ 3️⃣ ส่วนฐานข้อมูล (Database) ใช้ Google Sheets เป็นฐานข้อมูลหลัก • เก็บข้อมูลการลงเวลาทั้งหมด • สามารถนำข้อมูลไปวิเคราะห์หรือสรุปรายงานได้ทันที ⸻ 🔄 ขั้นตอนการทำงานของระบบ 1️⃣ ผู้ใช้เปิดระบบ พนักงานเปิดลิงก์ Web App ผ่านมือถือหรือคอมพิวเตอร์ 2️⃣ กรอกข้อมูลการลงเวลา • รหัสพนักงาน • ชื่อ-นามสกุล • ประเภทการลงเวลา (เข้างาน / ออกงาน) 3️⃣ ระบบดึงพิกัด GPS เมื่อกดปุ่ม บันทึกเวลาและพิกัด GPS ระบบจะขออนุญาตเข้าถึงตำแหน่งของอุปกรณ์ และดึงค่า • Latitude • Longitude 4️⃣ ส่งข้อมูลไปยังหลังบ้าน หน้าเว็บจะส่งข้อมูลทั้งหมดไปยัง Apps Script 5️⃣ บันทึกลง Google Sheets ระบบจะ • สร้าง Timestamp วันและเวลา • สร้างลิงก์ Google Maps จากพิกัด • บันทึกข้อมูลลงเป็นแถวใหม่ใน Sheets 6️⃣ แจ้งผลการบันทึก เมื่อบันทึกสำเร็จ ระบบจะแสดง Pop-up แจ้งว่า ✅ บันทึกข้อมูลเวลาเรียบร้อยแล้ว ⸻ ✨ จุดเด่นของระบบ ✅ ไม่ต้องติดตั้งแอป ใช้งานผ่าน Browser ได้เลย ✅ ตรวจสอบพิกัดจริงจาก GPS ✅ ดูตำแหน่ง Check-in ผ่าน Google Maps ได้ทันที ✅ ใช้เครื่องมือฟรีของ Google ทั้งระบบ ✅ Deploy ครั้งเดียวใช้งานได้ทันที ⸻ 🚀 แนวทางการพัฒนาต่อยอด ท่านสามารถนำระบบนี้ไปพัฒนาต่อยอดได้ เช่น 🔹 เพิ่ม ระบบ Login ด้วยบัญชี Google / รหัสพนักงาน 🔹 เพิ่ม การจำกัดพื้นที่ลงเวลา (Geofence) 🔹 เพิ่ม ระบบถ่ายรูปตอน Check-in 🔹 เพิ่ม Dashboard สรุปเวลาการทำงาน 🔹 เชื่อมต่อ Looker Studio ทำรายงาน HR อัตโนมัติ 🔹 เพิ่ม ระบบแจ้งเตือน LINE เมื่อพนักงานลงเวลา ⸻ 📌 เหมาะสำหรับ • โรงเรียน • องค์กรราชการ • บริษัทเอกชน • อบต. / เทศบาล • หน่วยงานที่มีพนักงานลงพื้นที่

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

ระบบ “ลางานออนไลน์” ใช้งานได้จริง ไม่ต้องมีเซิร์ฟเวอร์เอง! ใครที่กำลังหาวิธีทำระบบลางานแบบง่ายๆ แต่ดูโปร ใช้งานได้ทั้งองค์กร โรงเรียน หรือหน่วยงานราชการ บอกเลยว่าตัวนี้ตอบโจทย์มากค่ะ 👇 💻 ระบบนี้เป็น Web Application ทำงานครบจบใน Google Workspace ✨ ไม่ต้องเช่าโฮสต์ ✨ ไม่ต้องดูแลเซิร์ฟเวอร์ ✨ ใช้งานผ่านลิงก์ได้ทันที ⸻ 🔥 จุดเด่นของระบบ • มีหน้าฟอร์มกรอกใบลา ใช้งานง่าย (มือถือก็สบาย) • บันทึกข้อมูลลง Google Sheets อัตโนมัติ • มีสถานะ “รออนุมัติ” ให้จัดการต่อได้ • ตรวจสอบ “สรุปวันลารายเดือน” ได้ทันที • แยกประเภทการลา + คำนวณวันลาให้อัตโนมัติ • ทำงานเร็ว เสถียร ด้วย google.script.run ⸻ 🧠 โครงสร้างระบบ (เข้าใจง่ายมาก) 👉 Frontend: หน้าเว็บ (HTML + Tailwind + JavaScript) 👉 Backend: Google Apps Script (Code.gs) 👉 Database: Google Sheets ทั้ง 3 ส่วนทำงานเชื่อมกันแบบเนียนๆ ไม่ต้องพึ่งระบบภายนอกเลยค่ะ ⸻ 📌 วิธีทำงานคร่าวๆ 1. กรอกข้อมูลใบลา → กดส่ง 2. ข้อมูลวิ่งเข้า Apps Script 3. บันทึกลง Google Sheets + ใส่สถานะ 4. เรียกดูสรุปรายเดือน → ระบบคำนวณให้เสร็จ จบ! ใช้งานได้จริงทันที 💯

ระบบแลกเวรออนไลน์

ระบบ “แลกเวรออนไลน์” ด้วย Google Apps Script ใช้งานได้จริง 💼✨ ใครกำลังมองหาระบบจัดการ “การขอแลกเวร” แบบออนไลน์ ที่ใช้งานง่าย ไม่ต้องติดตั้งโปรแกรม เพิ่มความสะดวกให้บุคลากรและลดภาระงานเอกสาร — โพสต์นี้มีให้ค่ะ! 🎯 🔧 จุดเด่นของระบบ ✅ กรอกคำขอผ่านหน้าเว็บ ใช้งานง่าย ✅ บันทึกข้อมูลอัตโนมัติลง Google Sheets ✅ แจ้งเตือนผู้อนุมัติผ่านอีเมลทันที ✅ อนุมัติ/ไม่อนุมัติ ผ่านลิงก์ในอีเมลได้เลย ✅ ป้องกันการกดอนุมัติซ้ำ ✅ ตรวจสอบสถานะได้แบบเรียลไทม์ 🧩 ภาพรวมการทำงาน (เข้าใจง่าย) 1️⃣ ผู้ใช้งานกรอกแบบฟอร์ม (ชื่อ / เวรเดิม / เวรใหม่ / เหตุผล / อีเมลผู้อนุมัติ) 2️⃣ ระบบส่งข้อมูลไปเก็บใน Google Sheets (สถานะ: รออนุมัติ) 3️⃣ ส่งอีเมลแจ้งหัวหน้าพร้อมปุ่ม ✅ อนุมัติ / ❌ ไม่อนุมัติ 4️⃣ หัวหน้าคลิกจากอีเมล → ระบบอัปเดตสถานะอัตโนมัติ 💡 เหมาะกับหน่วยงานแบบไหน? 🏫 โรงเรียน / สถานศึกษา (ครูเวร, เจ้าหน้าที่) 🏥 โรงพยาบาล / คลินิก (พยาบาล, เวรบุคลากร) 🏢 องค์กรภาครัฐ / เอกชน ที่มีการจัดกะการทำงาน 🏭 โรงงาน / ธุรกิจที่มีพนักงานเป็นกะ 👮‍♂️ หน่วยงานที่มีเวรยาม / เวรปฏิบัติการ

ระบบสแกนเอกสารเข้า Google Drive แยกโฟลเดอร์อัตโนมัติ

ระบบสแกน/อัปโหลดเอกสารออนไลน์ ❌ ไม่อนุญาตให้นำไปจำหน่าย นี่คือระบบ “สแกน/อัปโหลดเอกสารออนไลน์” ที่พัฒนาด้วย Google Apps Script ใช้งานได้จริง เหมาะกับหน่วยงาน โรงเรียน อบต เทศบาล หรือองค์กรที่อยากมีระบบจัดเก็บเอกสารแบบง่ายๆ ไม่ต้องเขียนระบบเองใหม่ทั้งหมด 🏗️ ภาพรวมของระบบ ระบบนี้ช่วยเปลี่ยน Google Workspace ของคุณ ให้กลายเป็นระบบจัดการเอกสารออนไลน์ขนาดย่อม โดยแบ่งเป็น 3 ส่วนหลัก: 🔹 หน้าเว็บ (Frontend - Index.html) หน้าจอสวยๆ ใช้งานง่าย พัฒนาด้วย Bootstrap 5 ผู้ใช้สามารถเลือกไฟล์ ตั้งชื่อ และเลือกหมวดหมู่ได้ทันที ระบบจะเข้ารหัสไฟล์เป็น Base64 แล้วส่งไปยังหลังบ้าน 🔹 ระบบประมวลผล (Backend - Code.gs) ทำหน้าที่รับไฟล์จากหน้าเว็บ สร้างไฟล์จริงลงใน Google Drive 📂 แยกโฟลเดอร์ตาม “หมวดหมู่” อัตโนมัติ! 🔹 ฐานข้อมูล (Google Sheets) เก็บประวัติเอกสารทั้งหมด 📌 บันทึกวันที่ / ชื่อไฟล์ / หมวดหมู่ / ลิงก์เปิดไฟล์ ใช้งานง่าย ตรวจสอบย้อนหลังได้ทันที 🚀 วิธีนำไปใช้งาน ทำสำเนาแล้วใช้ได้เลย 📂 วิธีเพิ่มหมวดหมู่เอกสาร ระบบนี้ “ฉลาด” มาก! 😄 👉 ถ้าไม่มีโฟลเดอร์ = สร้างให้ใหม่ 👉 ถ้ามีอยู่แล้ว = เก็บไฟล์เข้าโฟลเดอร์นั้นทันที วิธีเพิ่มหมวดหมู่: แก้ไขที่ไฟล์ Index.html ตรง Sales - ฝ่ายขายและการตลาด 📌 จำง่ายๆ value = ชื่อโฟลเดอร์จริงใน Drive ข้อความด้านนอก = ชื่อที่แสดงบนหน้าเว็บ ⚙️ เปลี่ยนชื่อโฟลเดอร์หลัก ไปที่ Code.gs แล้วแก้บรรทัดนี้: var mainFolderName = “Scanned_Documents_System”; ➡️ เปลี่ยนเป็นชื่อที่คุณต้องการได้เลย 💡 เหมาะสำหรับ • งานสารบรรณ • ระบบรับ-ส่งเอกสาร • งานพัสดุ / งานบุคคล • ใช้ในโรงเรียน / อบต / เทศบาล • หรือองค์กรที่อยากเริ่ม Digital แบบง่ายๆ ลองเอาไปต่อยอดใช้งานจริงได้เลย 👍

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

ส่งงานนักเรียน” อัปโหลดเข้า Google Drive อัตโนมัติ (ฉบับครูยุคใหม่ ไม่ต้องง้อไลน์ ไม่ต้องง้ออีเมล) ไฟล์งานหมดอายุในไลน์? อีเมลเต็มจนส่งงานไม่ได้? ค้นไฟล์ไม่เจอ? ปัญหาเหล่านี้… “จบวันนี้ค่ะ!” 😍 เพราะครูสามารถสร้าง เว็บส่งงานส่วนตัว ที่ ✔ อัปโหลดไฟล์ตรงเข้า Google Drive ✔ บันทึกชื่อ-เลขที่-วิชา ลง Google Sheets อัตโนมัติ ✔ ใช้งานง่าย ดูโปร ✔ และที่สำคัญ… ฟรีตลอดชีพ! ทั้งหมดนี้ทำได้ด้วย Google Apps Script + HTML/CSS ที่ครูใช้อยู่ทุกวันนี่แหละค่ะ 💡💻 ⸻ 🛠️ ระบบนี้ทำงานยังไง? • Front-end (HTML/CSS): นักเรียนกรอกชื่อ เลือกวิชา แนบไฟล์ • Back-end (Apps Script): รับไฟล์ → อัปโหลดเข้า Drive → บันทึกข้อมูลลง Google Sheets ง่ายแต่ทรงพลังมาก! ⸻ 🌟 สิ่งที่คุณจะได้ • ไม่ต้องเลื่อนหาไฟล์ในไลน์ • ไม่ต้องให้เด็กส่งอีเมลอีกต่อไป • ไม่ต้องกลัวไฟล์หมดอายุ • ไม่ต้องโหลดไฟล์ทีละคน • ข้อมูลนักเรียนเรียงเป็นตารางใน Google Sheets สวยงามพร้อมตรวจ ครูเปิดชีต > คลิกลิงก์ไฟล์ > ตรวจได้ทันที!