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

ระบบ 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

ระบบประกาศของหาย

📢 แจกระบบประกาศของหาย (Lost & Found Web App) พร้อม Source Code ใช้งานจริง + คู่มือพัฒนาแบบละเอียด ของหายในโรงเรียนแล้วหาเจ้าของไม่เจอ หรือเก็บของได้แล้วไม่รู้จะประกาศตรงไหน... ระบบนี้ตอบโจทย์ค่ะ เป็นเว็บแอปพลิเคชันศูนย์กลางประกาศของหาย ให้ใครก็แจ้งของหายได้ทันทีโดยไม่ต้อง Login แล้วให้ผู้ดูแลติดตามสถานะจนกว่าจะได้ของคืน เหมาะสำหรับโรงเรียนหรือหน่วยงานที่อยากมีระบบแจ้งของหายไว้ใช้งานจริง ✅ ฟีเจอร์ในระบบ แจ้งของหายได้ทันทีผ่านฟอร์มสาธารณะ ไม่ต้อง Login หน้ารายละเอียดประกาศ แชร์ลิงก์ให้คนอื่นช่วยตามหาได้ ระบบสถานะ 3 ระดับ: กำลังตามหา → กำลังตรวจสอบ → ได้ของคืนแล้ว ผู้ดูแลระบบจัดการ อัปเดตสถานะ และกรองตามหมวดหมู่ได้ พัฒนาด้วย PHP + MySQL ติดตั้งบน AppServ ได้ทันที 📦 สิ่งที่ได้รับ ไฟล์ Source Code (PHP + SQL) พร้อมใช้งานจริง ผ่านการทดสอบระบบเรียบร้อยแล้ว คู่มือพัฒนาฉบับเต็ม (Word) อธิบายทุกไฟล์ พร้อม ER-Diagram, ขั้นตอนติดตั้ง และวิธีอัปโหลดขึ้นโฮสต์จริงด้วย FTP 🎁 สิทธิพิเศษสำหรับสมาชิก VIP เท่านั้น ดาวน์โหลดได้ฟรีที่ CodeHub ⚠️ แจกให้สมาชิกนำไปศึกษาและใช้งานส่วนตัวเท่านั้น ไม่อนุญาตให้นำไปจำหน่ายต่อในทุกกรณี #krunoomdevtech #ระบบประกาศของหาย #PHP #MySQL #สื่อการสอน #ครูไทย

ระบบคลังสะสมผลงานนักเรียน

📁 แจกระบบคลังสะสมผลงานนักเรียน (Student Portfolio Web App) พร้อม Source Code ใช้งานจริง + คู่มือพัฒนาแบบละเอียด การเก็บผลงานนักเรียนไม่จำเป็นต้องเป็นไฟล์ PDF กระจัดกระจายอีกต่อไปค่ะ ระบบนี้คือเว็บแอปพลิเคชันสำเร็จรูปที่ช่วยให้เก็บผลงานทั้งหมดไว้ในที่เดียว จัดหมวดหมู่เป็นระเบียบ แล้วแชร์เป็นลิงก์สาธารณะให้ใครก็เข้าดูได้ทันที เหมาะสำหรับโรงเรียนหรือครูที่อยากมีระบบคลังผลงานนักเรียนไว้ใช้งานจริง ✅ ฟีเจอร์ในระบบ ระบบ Login ผู้ดูแล จัดการผลงานได้ครบ เพิ่ม / แก้ไข / ลบ จัดหมวดหมู่ผลงาน (วิชาการ กีฬา ศิลปะ จิตอาสา ความเป็นผู้นำ) พร้อมตัวกรอง หน้าโปรไฟล์สาธารณะ แชร์ลิงก์ให้ดูได้โดยไม่ต้อง Login พัฒนาด้วย PHP + MySQL ติดตั้งบน AppServ ได้ทันที 📦 สิ่งที่ได้รับ ไฟล์ Source Code (PHP + SQL) พร้อมใช้งานจริง ผ่านการทดสอบระบบเรียบร้อยแล้ว คู่มือพัฒนาฉบับเต็ม (Word) อธิบายทุกไฟล์ พร้อม ER-Diagram, ขั้นตอนติดตั้ง และวิธีอัปโหลดขึ้นโฮสต์จริงด้วย FTP 🎁 สิทธิพิเศษสำหรับสมาชิก VIP เท่านั้น ดาวน์โหลดได้ฟรีที่ CodeHub ⚠️ แจกให้สมาชิกนำไปศึกษาและใช้งานส่วนตัวเท่านั้น ไม่อนุญาตให้นำไปจำหน่ายต่อในทุกกรณี #krunoomdevtech #ระบบคลังผลงานนักเรียน #PHP #MySQL #สื่อการสอน #ครูไทย

ระบบบันทึกการใช้งานห้องพยาบาล

แจกฟรี! ระบบบันทึกการใช้งานห้องพยาบาล สำหรับโรงเรียน 🏥💻 เบื้องหลังการพัฒนาระบบครั้งนี้ เริ่มต้นจากการใช้ AiPASS กับโมเดล Claude Sonnet เพื่อช่วยคิดโครงสร้างและพัฒนาระบบ แต่สุดท้ายก็ยังต้องกลับมาจบงานด้วย Claude Sonnet Pro ส่วนตัว เพื่อไล่ตรวจ แก้ไข ปรับ Logic และเก็บรายละเอียดของระบบให้พร้อมใช้งานมากขึ้น อีกหนึ่งระบบที่พัฒนาขึ้นมาเพื่อช่วยโรงเรียนจัดเก็บข้อมูลการใช้งานห้องพยาบาลให้เป็นระบบมากขึ้น ระบบนี้ใช้ Google Apps Script + Google Sheets เป็น Backend และฐานข้อมูล สามารถนำไปปรับใช้กับบริบทของแต่ละโรงเรียนได้ ภายในระบบมีแนวคิดสำหรับการจัดการข้อมูล เช่น • บันทึกการเข้ารับบริการห้องพยาบาล • ข้อมูลนักเรียน • อาการและการปฐมพยาบาล • การให้ยาและจัดการ Stock ยา • การพักห้องพยาบาล • การติดต่อผู้ปกครอง • ประวัติการใช้บริการ • Dashboard และสถิติ • รายงานข้อมูล • ระบบกำหนดสิทธิ์ผู้ใช้งาน • Audit Log สำหรับตรวจสอบการทำงาน สิ่งที่อยากแชร์คือ AI ช่วยให้การสร้างระบบเร็วขึ้นมาก แต่การทำให้ “ระบบใช้งานได้จริง” ยังต้องอาศัยคนพัฒนาในการวางโครงสร้าง ตรวจสอบ และแก้ปัญหาที่เกิดขึ้นระหว่างทาง 📥 ดาวน์โหลดฟรีในระบบ CodeHub ระบบนี้แจกฟรีเพื่อการศึกษาและพัฒนางานในสถานศึกษา ❌ ไม่อนุญาตให้นำระบบไปจำหน่าย ❌ ไม่อนุญาตให้นำไปขายต่อหรือเรียกเก็บค่าดาวน์โหลด ✅ สามารถนำไปศึกษา ปรับแต่ง และพัฒนาต่อยอดให้เหมาะกับโรงเรียนของตนเองได้ ถ้าระบบนี้มีประโยชน์ ฝากแชร์ต่อให้ครูและโรงเรียนที่กำลังมองหาระบบจัดการห้องพยาบาลด้วยนะคะ