Logo

Prompt Library ครูนุ่มเดฟเทค

prompthub.krudevtech.com

แหล่งรวม Prompt

สำหรับครูและนักพัฒนา

ค้นพบ Prompt ที่หลากหลายเพื่อช่วยในการสอน การสร้างสื่อ การจัดการเรียนการสอน และการทำงานอย่างมีประสิทธิภาพ

หมวดหมู่ Prompt

เกมจับคู่เปิดแผ่นป้าย
เกม

เกมจับคู่เปิดแผ่นป้าย

สร้างเกม “เปิดแผ่นป้าย” สำหรับนักเรียน ม.1 เพื่อใช้ในการทบทวนบทเรียนเรื่อง คอมพิวเตอร์และระบบสารสนเทศในงานอาชีพ โดยในแต่ละแผ่นป้ายจะมี
• ด้านหน้า: เป็นตัวเลข หรือไอคอน
• ด้านหลัง: เป็นคำถาม หรือคำตอบ
ผู้เล่นจะต้องเปิดแผ่นป้ายทีละ 2 แผ่นเพื่อจับคู่คำถาม-คำตอบให้ถูกต้อง เช่น:
❓ คำถาม: “ฮาร์ดแวร์หมายถึงอะไร?”
✅ คำตอบ: “อุปกรณ์ที่สามารถจับต้องได้ เช่น คอมพิวเตอร์ เมาส์”
หรืออาจเป็นการจับคู่ “ชื่ออาชีพ” กับ “การใช้คอมพิวเตอร์ในอาชีพนั้น” เช่น
• ครู ↔ ใช้สร้างสื่อการสอน
• หมอ ↔ ใช้ดูประวัติคนไข้
ใช้รูปแบบสีสันสดใส เข้าใจง่าย เหมาะกับเด็กระดับชั้น ม.1 มีปุ่มเริ่มเกม / รีเซ็ต และคะแนน
• สร้าง grid ขนาด 4x4 หรือ 5x4 เพื่อสุ่มแผ่นป้าย
• ใช้ไอคอนน่ารัก เช่น 💡📱👩‍🏫 เพื่อเป็นหน้าป้าย
• เมื่อจับคู่ได้ถูกต้อง แสดงคำว่า “เก่งมาก!” พร้อมเสียงเอฟเฟกต์
• มีการจับเวลาเพื่อเพิ่มความสนุก
เปลี่ยนคำตอบเป็นข้อความและรูป ที่จับคู่กับคำถามให้ถูกต้อง และให้นักเรียนสามารถกรอกชื่อ นามสกุล ชั้น เลขที่ และเก็บข้อมูลให้ด้วย
ปรับหน้าจอให้แสดงผลได้ดีทั้งในคอมพิวเตอร์ โน๊ตบุ๊ค แล็ปท๊อป มือถือ
**Header**: โลโก้ https://imprnoom.com/logonoom1.png ขนาดเหมาะสม (ไม่เกิน 150px) มี title เกมจับคู่ คอมพิวเตอร์และระบบสารสนเทศในงานอาชีพ อยู่ด้านล่าง ไม่ต้องมี background
**Footer**: ข้อความ “© 2025 เกมจับคู่ คอมพิวเตอร์และระบบสารสนเทศในงานอาชีพ | Pichayanart Reerak” อยู่ตรงกลาง ไม่ต้องมี background

ระบบค้นหาเกียรติบัตร
ระบบ

ระบบค้นหาเกียรติบัตร

ระบบค้นหาเกียรติบัตร
1. ค้นหาชื่อของตนเอง
2. เมื่อเจอ ให้ปุ่มสำหรับดาวน์โหลดเกียรติบัตรเป็น PDF
3. ข้อมูลรายชื่อทั้งหมดอยู่ใน Google Sheet โดยมีคอลัมน์:
ID: รหัสเกียรติบัตร
TITLE : ชื่อเรื่อง
PRENAME : คำนำหน้า
FIRSTNAME: ชื่อ
LASTNAME : นามสกุล
PDFURL: ลิงก์ดาวน์โหลดไฟล์ PDF
🎯 ฟังก์ชันระบบ:
หน้าค้นหาที่มีช่องให้กรอกชื่อหรือนามสกุล
เมื่อค้นเจอ ให้แสดงรหัสเกียรติบัตร ชื่อ-นามสกุล ชื่อเรื่อง และมีปุ่ม “ดาวน์โหลด PDF” ลิงก์ไปที่ PDFURL
หากไม่พบข้อมูล ให้แสดงข้อความ “ไม่พบข้อมูลของคุณในระบบ”
รูปแบบการแสดงผล:
สไตล์หน้าเว็บเรียบง่าย สวยงาม โทนสีฟ้า–ขาว
ชื่อผู้รับอยู่บนหัวข้อ
ปุ่มดาวน์โหลด PDF ด้านใต้ข้อมูล
ลิงก์เปิดไฟล์ PDF ในแท็บใหม่
4. ใช้ Font google : Noto sans Thai
5. – **Header**: โลโก้ https://imprnoom.com/logonoom1.png ขนาดเหมาะสม (ไม่เกิน 150px)
มี title ระบบค้นหาเกียรติบัตร ครูนุ่ม แอดมจว. อยู่ด้านล่าง ไม่ต้องมี background
6. **Footer**: ข้อความ “© 2025 ระบบค้นหาเกียรติบัตร ครูนุ่ม แอดมจว. | Pichayanart Reerak” อยู่ตรงกลาง ไม่ต้องมี background
7. แปลง ID เป็นลิงก์อัตโนมัติของ PDFURL ใน google drive เปิดไฟล์แทนการดาวน์โหลดไฟล์ PDF จาก ID ในคอลัมน์ PDFURL จากใน SHEET_ID=xxxx
8.เชื่อม App Script ที่ URL:xxxx
9.SHEET_NAME=certificate
10. เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ให้ด้วย

Prompt Engineer for Education
เว็บไซต์

Prompt Engineer for Education

สร้างเว็บไซต์สอนเขียน Prompt ชื่อว่า Prompt Engineer for Education โดยมีเนื้อหาแบ่งหมวดหมู่ได้แก่
- รู้จัก Prompt Engineer
- Prompt สำหรับการวิเคราะห์และพัฒนาหลักสูตร
- Prompt สำหรับออกแบบวิธีการสอนแบบใหม่ๆ
- Prompt สำหรับสร้างแบบวัดและประเมินผล
- Prompt สำหรับประเมินผลการเรียนรู้ของนักเรียน
- Prompt สำหรับการพัฒนางานวิจัยในชั้นเรียน
แต่ละหมวดหมู่ขอให้มีเนื้อหาอย่างละเอียด และมีตัวอย่างคำสั่ง Prompt จากระดับพื้นฐานไปสู่ระดับสูงในลักษณะของ Prompt Engineering
และ Prompt ตัวอย่าง มีปุ่ม copy ซึ่งเมื่อคลิกจะสามารถคัดลอก prompt นั้นไปใช้ได้ทันที

ระบบแจ้งคะแนนสอบออนไลน์
ระบบ

ระบบแจ้งคะแนนสอบออนไลน์

ออกแบบระบบแจ้งคะแนนสอบออนไลน์ให้นักเรียน
สามารถเข้ามาค้นหาคะแนนของตนเองได้ โดยกรอกรหัสประจำตัวนักเรียนหรือเลขประจำตัวประชาชน ระบบจะแสดงข้อมูลดังนี้:
• ชื่อ-นามสกุล
• ห้อง/ระดับชั้น
• รายวิชา
• คะแนนสอบกลางภาค/ปลายภาค/รวม
• เกรดหรือผลประเมิน
จัดแสดงผลในรูปแบบตารางสวยงาม มีการเน้นสีผลคะแนนสูง/ต่ำ หรือผ่าน/ไม่ผ่าน
โครงสร้างหน้าเว็บให้มี:
• Header: ชื่อระบบ เช่น “ระบบแจ้งคะแนนสอบนักเรียน”
• Form สำหรับค้นหาคะแนน โดยกรอกเลขประจำตัว
• Section แสดงผลคะแนน (ถ้าพบข้อมูล)
• Footer: แสดงชื่อโรงเรียน ปีการศึกษา และผู้พัฒนา เช่น “© 2025 โรงเรียนxxxxxxxxx | พัฒนาโดย xxxxxxxx”
ใช้ Bootstrap หรือ Tailwind CSS ก็ได้ ให้หน้าเว็บสวยงามและแสดงผลได้ดีทั้งในคอมและมือถือ (Responsive Design)

เว็บไซต์บทเรียนออนไลน์ 1
เว็บไซต์

เว็บไซต์บทเรียนออนไลน์ 1

สร้างเว็บไซต์บทเรียนออนไลน์
ออกแบบหน้าเว็บไซต์รายวิชา xxxxxxxxxxxx ครูผู้สอน : xxxxxxxx
คำอธิบายเกี่ยวกับเว็บไซต์ xxxxxxxxxx
รายละเอียด:
1. ใช้โทนสีแดงอ่อนที่เหมาะกับการเรียนรู้ ไม่ต้องไล่สี แต่ต้องสวยงาม เหมาะกับนักเรียนมัธยม
2. ออกแบบ Header ใหม่ให้ดูเรียบง่ายแต่โดดเด่น พร้อมโลโก้ "บทเรียนออนไลน์ xxxxxxxxx" และเมนูนำทาง เช่น หน้าแรก | คำอธิบายรายวิชา | ใบความรู้ | ใบกิจกรรม | แบบทดสอบ | สื่อวิดีทัศน์ | ผู้จัดทำ
3. Banner ด้านบนเป็นภาพกราฟิกหรือไอคอนที่เกี่ยวกับเทคโนโลยีพร้อมข้อความต้อนรับเช่น "บทเรียนออนไลน์ xxxxxxxxxxxxxx"
4. แสดงใบความรู้ในรูปแบบ Card หรือ Grid ที่คลิกได้ มีทั้งหมด 4 บท
บทที่ 1 xxxxxxxxxx
บทที่ 2 xxxxxxxxxx
บทที่ 3 xxxxxxxxxx
บทที่ 4 xxxxxxxxxx
แสดงไอคอนที่เกี่ยวข้องกับแต่ละบทให้สวยงาม มีปุ่ม เริ่มเรียนด้านล่าง
5. Footer มีข้อมูลติดต่อ Copyright © 2025 บทเรียนออนไลน์xxxxxxxxx
Dev by xxxxxxxxxxxxxx , All rights reserved. พื้นหลังสี #333333
6. ใช้ Font "Nota sans Thai" เหมาะกับนักเรียน และรองรับการแสดงผลทั้งบนมือถือและคอมพิวเตอร์
7. รองรับการแสดงแบบ Responstive ทั้งมือถือ แท็บเล็ตและคอมพิวเตอร์

ข้อสอบ Microsoft Word
แบบทดสอบ

ข้อสอบ Microsoft Word

ข้อสอบ Microsoft Word สำหรับนักเรียนชั้น ม.1 จำนวน 20 ข้อ (ตัวเลือกปรนัย 4 ตัวเลือก) พร้อมโครงสร้างการกรอกข้อมูลนักเรียน และแนวทางการตรวจข้อถูกโดยอัตโนมัติ โดยไม่มีการเฉลยแต่แจ้งคะแนนหลังสอบเสร็จ
📋 แบบทดสอบเรื่อง Microsoft Word
ระดับชั้นมัธยมศึกษาปีที่ 1 (ม.1)
เวลาในการทำข้อสอบ: 20 นาที
จำนวนข้อ: 20 ข้อ คะแนนเต็ม: 20 คะแนน
🔹ข้อมูลนักเรียน
กรุณากรอกข้อมูลให้ครบถ้วนก่อนเริ่มทำข้อสอบ:
• เลขประจำตัวนักเรียน: __________________
• คำนำหน้า: (นาย / เด็กชาย / เด็กหญิง)
• ชื่อ: __________________
• นามสกุล: __________________
• ชั้น: ม.1/ (4, 5, 6 หรือ 7)
🔹คำชี้แจง:
ข้อสอบมีทั้งหมด 20 ข้อ เป็นแบบปรนัย 4 ตัวเลือก
ให้นักเรียนเลือกคำตอบที่ถูกที่สุดเพียงข้อเดียว
ระบบจะตรวจคำตอบให้ทันทีเมื่อกดส่ง และแสดงคะแนนรวม
ห้ามรีเฟรชหน้าระหว่างทำข้อสอบ
❓ ข้อสอบ จำนวน 20 ข้อ มี 4 ตัวเลือก
📊 ระบบตรวจคะแนนอัตโนมัติ
• ตรวจคำตอบทันทีหลังส่งแบบทดสอบ
• แจ้งคะแนนทันที เช่น “คุณได้ 18/20 คะแนน”
• บันทึกข้อมูลนักเรียนและคะแนนลงใน Google Sheet โดยใช้ Google Apps Script

เว็บไซต์งานสัปดาห์วันวิทยาศาสตร์
เว็บไซต์

เว็บไซต์งานสัปดาห์วันวิทยาศาสตร์

ออกแบบหน้าเว็บไซต์สำหรับ “งานสัปดาห์วันวิทยาศาสตร์ โรงเรียนแม่จันวิทยาคม” โทนสีเหลือง เหมาะกับการศึกษาและมีไอคอนที่เกี่ยวข้อง ให้หน้าเว็บไซต์มีองค์ประกอบดังนี้:
1. หัวเรื่อง (Header)
• ชื่อกิจกรรม: งานสัปดาห์วันวิทยาศาสตร์ โรงเรียนแม่จันวิทยาคม
• วันที่จัดกิจกรรม
• โลโก้ https://scipower10.mwk.ac.th/img/logomwk.png และ https://img2.pic.in.th/pic/logoscitech1.png
2. คำอธิบายกิจกรรม (About)
• ข้อความสั้น ๆ แนะนำความสำคัญของ “วันวิทยาศาสตร์แห่งชาติ”
• อธิบายวัตถุประสงค์ของการจัดกิจกรรม
3. รายการแข่งขัน (Competitions)
• แสดงชื่อกิจกรรมการแข่งขันเป็นรายการ พร้อมปุ่ม “ลงทะเบียน” ใต้แต่ละกิจกรรม
• รายการที่ต้องมี:
• การเขียนเรียงความวันวิทยาศาสตร์
• โครงงานวิทยาศาสตร์
• การตอบปัญหาวิทยาศาสตร์
• ทักษะกระบวนการแก้ปัญหา (จรวดขวดน้ำ)
• การประกวดชุดรีไซเคิล
• การออกแบบบรรจุภัณฑ์
• การแข่งขัน E-Sports (ROV)
4. แบบฟอร์มลงทะเบียนออนไลน์ (Registration Form)
• แบบฟอร์มให้ผู้เข้าแข่งขันกรอกข้อมูล ได้แก่ ชื่อ-นามสกุล, ระดับชั้น, รายการที่สมัคร, ชื่อครูที่ปรึกษา, เบอร์โทร และอีเมล
• มีปุ่ม “ส่งข้อมูล” และข้อความแจ้งเตือนเมื่อส่งสำเร็จ
5. ติดต่อสอบถาม (Contact Info)
• ลิงก์เฟซบุ๊กของงานกิจกรรม https://web.facebook.com/ScienceMWK
จัดวางองค์ประกอบให้อ่านง่าย ใช้ไอคอนวิทยาศาสตร์ เช่น หลอดทดลอง จรวด อะตอม และดาว เพื่อเพิ่มความสนุกและดึงดูดสายตา
ใช้ font "prompt"

ระบบบันทึกการเยี่ยมบ้าน
ระบบ

ระบบบันทึกการเยี่ยมบ้าน

ระบบบันทึกการเยี่ยมบ้าน
1. เป้าหมายหลัก (Primary Goal):
สร้างหน้าเว็บฟอร์มออนไลน์สำหรับ "แบบบันทึกการเยี่ยมบ้านนักเรียน" ของโรงเรียนแม่จันวิทยาคม เพื่อให้นักเรียนและครูสามารถกรอกข้อมูลได้อย่างสะดวก รวดเร็ว และเป็นระบบผ่านอุปกรณ์ต่างๆ เช่น คอมพิวเตอร์ แท็บเล็ต หรือสมาร์ทโฟน
2. กลุ่มเป้าหมาย (Target Audience):
นักเรียน คณะครูและบุคลากรทางการศึกษาของโรงเรียนแม่จันวิทยาคม
3. โทนและสไตล์ (Tone & Style):
เป็นทางการและน่าเชื่อถือ: ใช้ภาษาที่เหมาะสมและมีการจัดวางที่เป็นระเบียบสะอาดและทันสมัย (Clean & Modern): ออกแบบให้ดูเรียบง่าย สบายตา ไม่ซับซ้อน
ใช้งานง่าย (User-Friendly): ผู้ใช้สามารถเข้าใจและกรอกข้อมูลได้โดยไม่ต้องมีคู่มือ
4. โครงสร้างและเลย์เอาต์ (Structure & Layout):
Responsive Design: หน้าเว็บต้องปรับขนาดและการจัดวางให้เหมาะสมกับทุกขนาดหน้าจอ โดยเฉพาะบนมือถือ
Single-Column Layout: จัดวางเนื้อหาหลักในคอลัมน์เดียวเพื่อให้อ่านง่ายบนอุปกรณ์พกพา
การแบ่งส่วนที่ชัดเจน (Clear Sectioning): ใช้การ์ด (Card) หรือกล่อง (Box) ที่มีเงาและขอบมนเพื่อแยกแต่ละส่วนของฟอร์มออกจากกันอย่างชัดเจน
หัวข้อที่โดดเด่น: แต่ละส่วนต้องมีหัวข้อ (Legend/Heading) ที่ชัดเจนและอ่านง่าย
5. องค์ประกอบหลัก (Key Components):
อ้างอิงข้อมูลจากเอกสาร "แบบบันทึกการเยี่ยมบ้านนักเรียน" ให้ครบถ้วน โดยแบ่งเป็นส่วนต่างๆ ดังนี้:
ส่วนหัว (Header):
ใส่ Logo โรงเรียน http://bit.ly/logomwk ขนาด 150px
หัวข้อหลัก: "แบบบันทึกการเยี่ยมบ้านนักเรียน"
ชื่อโรงเรียน: "โรงเรียนแม่จันวิทยาคม"
ส่วนข้อมูลทั่วไป:
ช่องสำหรับกรอก "วันที่บันทึกข้อมูล" (Date Input)
ส่วนข้อมูลนักเรียน:
ช่องกรอกข้อความ (Text Input) สำหรับ: ชื่อ-สกุล, ชั้นมัธยมศึกษาปีที่, หมายเลขโทรศัพท์
ส่วนข้อมูลผู้ปกครอง:
ช่องกรอกข้อความสำหรับ: ชื่อ-สกุล, ความสัมพันธ์กับนักเรียน, หมายเลขโทรศัพท์
ส่วนข้อมูลที่พักอาศัยและการเดินทาง:
กลุ่มตัวเลือก (Radio Button) สำหรับ "บ้านที่พักอาศัย" บ้านของตัวเอง ,บ้านเช่า เดือนละ.....บาท ,อาศัยอยู่กับผู้อื่น/ญาติ, หอพัก, อื่นๆ
ช่องกรอกตัวเลข (Number Input) สำหรับ: ระยะทาง, เวลาเดินทาง (ชั่วโมง/นาที), ค่าใช้จ่ายในการเดินทาง
กลุ่มตัวเลือกสำหรับ "การเดินทางมาโรงเรียน" พร้อมตัวเลือกย่อยสำหรับ "รถจักรยานยนต์" (มี/ไม่มีใบขับขี่)
ส่วนข้อมูลครอบครัว:
ช่องกรอกตัวเลขสำหรับ "จำนวนสมาชิกในครัวเรือน"
กลุ่มตัวเลือกสำหรับ "สถานภาพครอบครัว" และ "นักเรียนอาศัยอยู่กับ"
กลุ่มตัวเลือกสำหรับ "ความสัมพันธ์ของสมาชิกในครอบครัว"
พื้นที่ข้อความ (Text Area) สำหรับ "ภาระงาน/ความรับผิดชอบของนักเรียน"
ส่วนพฤติกรรมความเสี่ยง (ใช้ Checkbox เพราะเลือกได้มากกว่า 1 ข้อ):
ด้านสุขภาพ
พฤติกรรมการใช้สารเสพติด
พฤติกรรมเสี่ยงทางเพศ
การติดเกม
ส่วนปัญหาด้านการเรียน (ใช้ Checkbox):
รวมตัวเลือกต่างๆ เช่น ไม่มี, ติด 0/ร, เรียนซ้ำชั้น, ขาดเรียนบ่อย, หนีเรียน
ส่วนความช่วยเหลือที่ต้องการจากโรงเรียน:
กลุ่มตัวเลือก (Checkbox) สำหรับ: ด้านการเรียน, ด้านพฤติกรรม, ด้านทุนการศึกษา
พื้นที่ข้อความสำหรับ "ความช่วยเหลืออื่นๆ"
ปุ่มส่งข้อมูล (Submit Button):
ปุ่มขนาดใหญ่เต็มความกว้าง แสดงข้อความ "บันทึกข้อมูล" อย่างชัดเจน
6. เทคโนโลยีและเครื่องมือ (Technology & Tools):
Frontend: HTML5, CSS3
Framework: Tailwind CSS เพื่อความรวดเร็วในการสร้างดีไซน์ที่สวยงามและ Responsive
Font: ใช้ฟอนต์ภาษาไทยที่อ่านง่ายและเป็นทางการ เช่น 'Sarabun' จาก Google Fonts
7. สีและกราฟิก (Color & Graphics):
สีหลัก: ใช้สีน้ำเงิน (#3b82f6) สำหรับองค์ประกอบที่ต้องการเน้น เช่น ปุ่ม, ลิงก์, หรือเส้นขอบของช่องที่กำลังใช้งาน (Focus State)
สีพื้นหลัง: ใช้สีเทาอ่อน (#f3f4f6) สำหรับพื้นหลังของหน้า และสีขาวสำหรับพื้นหลังของการ์ดฟอร์มเพื่อสร้างความแตกต่าง
สีตัวอักษร: ใช้สีเทาเข้ม (#1f2937) สำหรับเนื้อหาทั่วไปและหัวข้อ เพื่อให้อ่านง่าย
8. ประสบการณ์ผู้ใช้ (User Experience - UX):
Visual Feedback: เมื่อผู้ใช้คลิกที่ช่องกรอกข้อมูล ควรมีเส้นขอบสีหรือเงาปรากฏขึ้น
Placeholders: ในช่องกรอกข้อความควรมีข้อความแนะนำ (Placeholder) เพื่อบอกใบ้ว่าควรกรอกข้อมูลอะไร
Logical Flow: ลำดับของหัวข้อในฟอร์มต้องเรียงตามเอกสารต้นฉบับเพื่อให้ผู้ใช้กรอกข้อมูลได้อย่างลื่นไหล
9. Footer:
ข้อความ: “© 2025 แบบบันทึกการเยี่ยมบ้าน โรงเรียนแม่จันวิทยาคม” อีกบรรทัด
Dev by Pichayanart Reerak

ระบบบันทึกข้อมูลประวัติการปฏิบัติงาน
ระบบ

ระบบบันทึกข้อมูลประวัติการปฏิบัติงาน

สร้าง Web Application ระบบบันทึกข้อมูลประวัติการปฏิบัติงาน
1. สร้างแท็บ Dashboard สารสนเทศ
- ใช้ Library เช่น Chart.js, ApexCharts หรือ Google Charts
แสดงกราฟสรุปข้อมูลทั้งหมด เช่น
- การ์ดแสดงจำนวน (ปีการศึกษา 2568 , จำนวนผลงาน / รางวัลที่บันทึกไว้, จำนวนกิจกรรมอบรม/สัมมนา, รวมจำนวนชั่วโมงที่เข้าร่วม)
- กราฟแท่งหรือวงกลมเปรียบเทียบจำนวนผลงานและกิจกรรมในแต่ละเดือน
2.สร้างฟอร์มแท็บผลงาน / รางวัลที่ได้รับ**
- ตารางแสดงผลงาน / รางวัลที่ได้รับ (ใช้ DataTable)
- คอลัมน์: ลำดับ, เรื่อง, หน่วยงานที่มอบ, วันเดือนปีที่ได้รับ, ไฟล์เกียรติบัตร (PDF)
- ปุ่ม “เพิ่มข้อมูล” อยู่ด้านบน กดแล้วเปิด **Modal Form**
- ฟอร์มกรอกข้อมูล
- เรื่อง
- หน่วยงานที่มอบ
- วันเดือนปีที่ได้รับ (ใช้เป็น datepicker) เป็นปีพ.ศ.
- อัพโหลดไฟล์เกียรติบัตร แจ้งการรองรับไฟล์ .pdf ไม่เกิน 5MB
3. สร้างฟอร์มแท็บการประชุม อบรม สัมมนา หรือศึกษาดูงาน**
- ตารางการประชุม อบรม สัมมนา หรือศึกษาดูงาน (ใช้ DataTable)
- คอลัมน์: ลำดับ, เรื่อง, หน่วยงานที่มอบ, วันเดือนปีที่ได้รับ, ไฟล์เกียรติบัตร (PDF)
- ปุ่ม “เพิ่มข้อมูล” อยู่ด้านบน กดแล้วเปิด **Modal Form**
- ฟอร์มกรอกข้อมูล
- เรื่อง
- หน่วยงานที่จัด
- วันเดือนปี (ใช้เป็น datepicker) เป็นปีพ.ศ.
- จำนวนชั่วโมง
- อัพโหลดไฟล์เกียรติบัตร แจ้งการรองรับไฟล์ .pdf ไม่เกิน 5MB
ระบบควรคำนวณและแสดง “รวมจำนวนครั้ง / จำนวนวัน / จำนวนชั่วโมง” อัตโนมัติ
4.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ และเปลี่ยนชื่อไฟล์ตามด้วยวันเวลา
5.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME
6.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น
7.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น
8.เชื่อม App Script ที่ URL: xxxx
9.บันทึกข้อมูลลงในชีตที่ SHEET_ID: xxxx
10.ระบบอัปโหลดไฟล์ ให้บันทึกไฟล์ลงใน FOLDER_ID: xxxx
11.ให้นำ url ของไฟล์บันทึกลงในชีต
12.แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ