# data[].attributes.headline
พัฒนาเว็บแอพติดตามข้อมูลผู้สำเร็จการศึกษา

# data[].attributes.subject
พัฒนาเว็บแอพติดตามข้อมูลผู้สำเร็จการศึกษา

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปติดตามข้อมูลผู้สำเร็จการศึกษา 2567

# data[].attributes.headline
เว็บไซต์บันทึกข้อมูล by ภัทราพรรณ

# data[].attributes.subject
เว็บไซต์บันทึกข้อมูล by ภัทราพรรณ

# data[].attributes.attachment_link.title
แบบฟอร์มบันทึกข้อมูลนักศึกษา

# data[].attributes.headline
ระบบบันทึกเยี่ยมบ้าน

# data[].attributes.subject
ระบบบันทึกเยี่ยมบ้าน

# data[].attributes.attachment_link.title
สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต โดยกำหนดให้มีชื่อบนหัวฟอร์มว่า
“แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ...

# data[].attributes.headline
Gemini code ระบบเยี่ยมบ้าน 2025 นางสาวภัทราพรรณ อยู่คง เลขที่ 1

# data[].attributes.subject
Gemini code ระบบเยี่ยมบ้าน 2025 นางสาวภัทราพรรณ อยู่คง เลขที่ 1

# data[].attributes.attachment_link.title
Visit Home 2025 | บันทึกข้อมูลเยี่ยมบ้าน

# data[].attributes.headline
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.subject
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.attachment_link.title
NWVOC NEWs ข่าวประชาสัมพันธ์

# data[].attributes.headline
ระบบลงนามถวายพระพรชัยมงคลเนื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568

# data[].attributes.subject
ระบบลงนามถวายพระพรชัยมงคลเนื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568

# data[].attributes.attachment_link.title
ระบบลงนามถวายพระพรชัยมงคล

# data[].attributes.headline
สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวน พฤกษศาสตร์

# data[].attributes.subject
สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวน พฤกษศาสตร์

# data[].attributes.body
ผู้จัดทำ : นางสาวปิยนุช แสงสร้อย prompt 1. สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์โรงเรียน ของวิทยาลัยอาชีวศึกษานครสวรรค์ โดยให้มี ชื่อ “นางสาวปิยนุช แสงสร้อย" เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย รหัสพรรณไม้ (มีอักษรตัว T นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น) แสดงตัวอย่างการหัสพรรณไม้ และชื่อภาษาไทย ให้เห็นในรูปแบบตาราง อยู่ด้านล่างด้วย ชื่อภาษาไทย ชื่อทางวิทยาศาสตร์ ลักษณะทั่วไป ประเภทของพรรณไม้ (ไม้คลุมดิน,ไม้ล้มลุก,ไม้พุ่ม,ไม้ยืนต้น,ไม้เลื้อย,ไม้ประดับ) อัพโหลดรูปภาพพรรณไม้ สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6.เชื่อม App Script ที่ URL:https://script.google.com/macros/s/AKfycbwqnqU3cbj4zGLRgGTyrL4MiPO3HPbIeppjI5ZLtCx56Z2r0Pnrr8IeedE1jn1pgY-8lA/exec 7.SHEET_ID: 1MNyiuXVZLKWKVYYkduPCCAXEqwdw5AvHkCAyujiQYPA 8.FOLDER_ID:1M0HeEDDjvM0wqN3JDGL0azavHS6qrDbf 9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 10.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 11.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 12.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 13.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีเขียว ไล่ระดับแบบมืออาชีพ 14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
การพัฒนาระบบบันทึกข้อมูลพรรณไม้

# data[].attributes.headline
สติ๊กเกอร์ไลน์ 12 อารมณ์

# data[].attributes.subject
สติ๊กเกอร์ไลน์ 12 อารมณ์

# data[].attributes.body
Convert the photo above into a set of 12 chibi stickers (4 * 4grid) costumes like this image including expressions laughing, loudly, angry, crying, sulking, thinking, sleeping, winking suprise

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชันActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชันActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.body
ฟีเจอร์ที่ต้องมีในระบบ : • กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho • ใช้ font คือ Itim ทั้งระบบ • โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ, เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล) ชื่อกิจกรรม (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์, การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - - วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.) ประเภทกิจกรรม (เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม ) รายละเอียด (textarea) แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น) TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup TAB 3 : หน้าเพิ่มชื่อกิจกรรม - หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) - สามารถค้นหา - - - - Footer กรองตามปีการศึกษา ภาคเรียน ประเภทกิจกรรม ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวบัณฑิตา จันทร์อำไพ” ฟังก์ชันเพิ่มเติม : สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ 7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbzv3ozkT0Yatgfs0w4Avy61WfKvc-PxoIjJGbpB1TXj3raX2OUZfrALv4ZBi6uI19oo/exec 8. SHEET_ID : 1EkchCSpsNxyqSocbJBPdNYZP12SqJIzEITLqmvIi7Mw 9. FOLDER_ID IT : 1yZhMHhbVVBLxn-tNr4BeqWQqqOixE4Cu 9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568 10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง แดง ขาว ไล่ระดับแบบมืออาชีพ 14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย 15.ปีการศึกษาที่มีอยู่เมื่อเพิ่มแล้วและประเภทกิจกรรมที่มีอยู่ ขอให้มี ปุ่มแก้ไข ได้ด้วย และทำงานได้จริง 16.บันทึกข้อมูลไม่ต้องใส่รหัสผ่าน แต่ตอนเพิ่มปีการศึกษากับเพิ่มชื่อกิจกรรมต้องใส่รหัสผ่าน

# data[].attributes.attachment_link.title
การออกแบบระบบจัดการกิจกรรมการศึกษา

# data[].attributes.headline
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.subject
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.body
Prompt: ระบบบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01 ผู้จัดทำ: 👨‍💻 นางสาวบัณฑิตา จันทร์อำไพ(ผู้พัฒนาระบบ) 1. แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน แสดงชื่อผู้พัฒนา (นางสาวบัณฑิตา จันทร์อำไพ) พร้อมอิโมจิรูป 💻 อยู่ด้านข้างของฟอร์ม รายการข้อมูลที่ต้องมีในฟอร์ม: รหัสนักศึกษา (11 หลักเท่านั้น) ดึงตัวอย่างข้อมูล รหัสนักศึกษา + ชื่อ-นามสกุล จาก Google Sheet แสดงเฉพาะข้อมูลล่าสุดด้านข้าง คำนำหน้าชื่อ (นาย, นางสาว) ชื่อ นามสกุล ชื่อเล่น ระดับชั้น (ปวช., ปวส.) วันที่เยี่ยมบ้าน (เลือกจากปฏิทิน → ย้อนหลังถึงปัจจุบัน) บันทึกข้อมูลการเยี่ยมบ้าน (ข้อความ) รูปเยี่ยมบ้าน (อัปโหลดได้ 4 รูป) รูปนักศึกษา 2. การทำงาน CRUD รองรับ เพิ่ม / อ่าน / อัปเดต / ลบ ข้อมูลได้ครบถ้วน ฟังก์ชันลบ: ใช้ Custom Modal Dialog (แทน confirm() ของ browser) มีการยืนยันก่อนลบจริง จัดการข้อผิดพลาดกรณีข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 3. การอัปโหลดไฟล์ จัดการไฟล์โดยแปลงเป็น Base64 ใน Browser ส่งข้อมูลเป็น Base64 string + ชื่อไฟล์ + MIME type ใน Apps Script: ถอดรหัส Base64 สร้างไฟล์เก็บใน Google Drive 4. การเชื่อมต่อ Apps Script ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากับ Apps Script ได้ดีกว่า URL:https://script.google.com/macros/s/AKfycbxDIDb6804wCYmsTp0l8MAHhg35G2XNZZoShlDm-GEkram2GOSpQjvYzHuBLPxdrns57A/exec SHEET_ID: 1cNej9STH93yAn0BFGpJo1S9LGe7QwziMoB20qcO09XA รูป 1 →1m_Mp9LfE4-9OMNQY4arVuXoFN_1HFWMS รูป2 → 167Z3ZStx9bcF5RC5tok4nj36MkowD88A รูป 3 → 1epjrQ0f1pwsWC7RJWTu4slgLrih2N16N รูป 4 → 1wUmjaaKPHDCGX3gGbOwyVG30Iie9DuUI รูปนักศึกษา → 1R-vpYl4MwvdDLnEvWzy-ciuDaS4BjFY7 5. จัดการ Google Sheet ตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี → ให้สร้างใหม่พร้อมหัวตาราง เก็บ URL ของรูปนักศึกษาในรูปแบบ: https://lh3.googleusercontent.com/d/<fileId> 6. UI/UX และการโต้ตอบ ใช้ SweetAlert แสดงสถานะขณะรอการบันทึก แจ้งเตือนเมื่อบันทึกสำเร็จ โครงสร้างเว็บไซต์: ออกแบบเป็น Tab Menu ปุ่ม ดูตัวอย่างสรุปข้อมูล (พร้อมภาพ) → แสดงแบบ Pop-up โทนสีเว็บไซต์: ไล่ระดับสี ม่วง–แดง ดีไซน์แบบ มืออาชีพ 7. สรุปข้อมูล กราฟ: แสดงผลแยกตาม เพศ และ ระดับชั้น ตารางสรุป: แสดงข้อมูล → รูปนักศึกษา, ชื่อ, นามสกุล 8. โค้ดที่ต้องแสดง เมื่อสร้างระบบเสร็จ → แสดงโค้ด Google Apps Script (GS) ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.headline
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.subject
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.body
หัวข้อ: การพัฒนาเว็บแอปพลิเคชัน ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

สถานการณ์โจทย์:

เนื่องจากวิทยาลัยมีการจัดกิจกรรมหลากหลายตลอดปี เช่น ปฐมนิเทศ ทัศนศึกษา งานกีฬา และกิจกรรมชมรมต่าง ๆ ซึ่งจำเป็นต้องบันทึก

ข้อมูลกิจกรรมและแนบหลักฐานเพื่อใช้รายงานต่อผู้บริหารในแต่ละภาคเรียน แต่ปัจจุบันยังไม่มีระบบกลางในการเก็บข้อมูล จึงเกิดปัญหา

การสืบค้นและติดตามย้อนหลัง คณะกรรมการจึงต้องการให้พัฒนาเว็บแอปพลิเคชันเพื่อบันทึกกิจกรรม พร้อมแนบไฟล์ภาพและรายละเอียด

อื่น ๆ ได้อย่างเป็นระบบ

ฟีเจอร์ที่ต้องมีในระบบ:

• ใช้ font คือ Kanit ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้า บันทึกกิจกรรม

• - ชื่อระดับชั้น (ปวช. , ปวส.)

• - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,

• คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก

,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

• (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

o ชื่อกิจกรรม

o วันที่จัด (เป็นรูปแบบปฎิทินประเทศไทย 2568-2-3 )

o ประเภทกิจกรรม (เลือกได้ : กิจกรรมหลักสูตร, กิจกรรมชมรม, กิจกรรมภายนอก ดึงข้อมูลมาจาก หน้า เพิ่มชื่อกิจกรรม )

o รายละเอียด (textarea)

o แนบไฟล์ภาพได้หลายไฟล์ (Preview ได้ก่อนอัปโหลด)

• หน้า เพิ่มปีการศึกษา / ภาคเรียน แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• หน้า เพิ่มชื่อกิจกรรม แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• จัดเก็บข้อมูลลงฐานข้อมูล

• แสดงรายการกิจกรรมย้อนหลัง

• ระบบสามารถค้นหา/กรองตามปี/ภาคเรียน/ประเภทกิจกรรมได้

• สามารถแนบไฟล์ภาพได้ และระบบต้องสามารถรองรับการแนบไฟล์ภาพได้หลายไฟล์ และต้องสามารถ แสดงภาพตัวอย่างก่อน

อัปโหลด (preview)

คำสั่ง จากสถานการณ์ที่กำหนดข้างต้นนี้ ให้พัฒนาเว็บแอปพลิเคชั่น สำหรับการแก้ปัญหานี้

1. สร้างเว็บแอปพลิเคชั่น

2. จัดเก็บข้อมูลลงฐานข้อมูล

3. เผยแพร่สำหรับการนำไปใช้งาน

Footer

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวบัณฑิตา จันทร์อำไพ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog, modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยัน

การลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON JSON ที่ถูกต้อง ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน EonData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbzpUyoZHvjFA53obB5SXgy51EB8n-dslY7JAgFKQWZL__yxIGKiQ0clWx0FgYcXie9i/exec

8. SHEET ID: 1ewnnlKjoAFSxhxFIbIGFof3qlmgKjZaGPG7J8JiPIGA

9. FOLDER ID : 1RPEDpaFgin4FM9bHLUYDCTn-te65tGby

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง ดำ แดง ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

สามารถบันทึก ข้อมูล และภาพ ลง Google ซีต และ Google ไดรฟ์ ได้ด้วย

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปพลิเคชัน ActiDoc สำหรับจัดเก็บกิจกรรมวิทยาลัย

# data[].attributes.headline
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ระดับชั้น ปวส.

# data[].attributes.subject
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ระดับชั้น ปวส.

# data[].attributes.body
ผู้จัดทำ :บัณฑิตา จันทร์อำไพ

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL : https://script.google.com/macros/s/AKfycbx09VjgXDFDFX3DNfoSmommTOfApvCZss97pH1Wd_YiThm5IsHdQaVkS8BCy9FAOB4J/exec

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีฟ้า สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
สร้างฟอร์มเก็บข้อมูลนักศึกษา

# data[].attributes.headline
แบบฟอร์มแจ้งซ่อม online 24 ชัวโมง

# data[].attributes.subject
แบบฟอร์มแจ้งซ่อม online 24 ชัวโมง

# data[].attributes.body
แบบฟอร์มแจ้งซ่อม Online 2025

ผู้พัฒนาระบบ นางสาวบัณฑิตา จันทร์อำไพ

ส่วนที่ 1: ข้อมูลผู้แจ้ง

ชื่อ-สกุล:

แผนก: (ฝ่ายบุคคล,ฝ่ายบัญชี,ฝ่ายการเงิน,สำนักผู้บริหาร,ฝ่ายขาย)

เบอร์ติดต่อ: (แก้ปัญหาเลขศูนย์ แสดงให้ครบทั้ง 10 ตัว ใน google sheets ด้วย)

สถานที่/ห้อง: (ห้องประชุม , สำนักงาน , ห้องพักรับรอง)

ส่วนที่ 2: รายละเอียดปัญหา

หัวข้อปัญหา:

ประเภทปัญหา: (แสงสว่าง, น้ำประปา , เครื่องปรับอากาศ,ระบบเสียง )

กรุณาอธิบายปัญหาโดยละเอียด:

แนบไฟล์ภาพอุปกรณ์ที่เสีย

ส่วนที่ 3 ระดับความเร่งด่วนประเมินจากผู้แจ้ง (เลือก 1 ข้อเท่านั้น)

- สูง (High) – ปัญหานี้ทำให้ไม่สามารถทำงานหลักได้เลย

- กลาง (Medium) - ทำงานได้แต่ไม่สะดวก หรือมีผลกระทบกับงานบางส่วน

- ต่ำ (Low) - ยังทำงานได้ตามปกติ แต่ต้องการให้แก้ไข/ตรวจสอบ

ลงวันที่แจ้งข้อมูล (เลือกปฏิทิน ห้ามเลือกวันล่วงหน้า)

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล

และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2.กำหนดให้ Modal body มี scroll ให้ใช้งานได้

3. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

4. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

5.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

6.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

7.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbw3rJD0OOYtgrKoKLUlHyM9RxzLgZSQluSH2pgdlbIIJ2mV1wCoWJja6tT5Y7BZjJdl/exec

8.SHEET_ID: 18mXS1RiFQfsRSEF2l9ko4PjaHKlFFU-4_EDfSU-QkZ8

9.FOLDER_ID IT : 13Ro39fe6c5eTTA-9-Qp3Ao7PS2f_eI-i

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีส้ม แดง ขาว ไล่ระดับแบบมืออาชีพ

14.เพิ่ม tab memu กราฟสรุปข้อมูล และ รายการแจ้งซ่อม ให้ด้วย

15.ทำให้ระบบใช้งานได้จริง มีทั้ง เพิ่ม อ่าน อัพเดต และลบได้

16.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
แบบฟอร์มแจ้งซ่อม Online 2025

# data[].attributes.headline
สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์

# data[].attributes.subject
สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์

# data[].attributes.body
ผู้จัดทำ : นางสาวบัณฑิตา จันทร์อำไพ

prompt

1. สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์โรงเรียน

ของวิทยาลัยอาชีวศึกษานครสวรรค์

โดยให้มี ชื่อ “นางสาวบัณฑิตา จันทร์อำไพ" เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม

รายละเอียดประกอบด้วย

รหัสพรรณไม้ (มีอักษรตัว T นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น)

แสดงตัวอย่างการหัสพรรณไม้ และชื่อภาษาไทย ให้เห็นในรูปแบบตาราง อยู่ด้านล่างด้วย

ชื่อภาษาไทย

ชื่อทางวิทยาศาสตร์

ลักษณะทั่วไป

ประเภทของพรรณไม้ (ไม้คลุมดิน,ไม้ล้มลุก,ไม้พุ่ม,ไม้ยืนต้น,ไม้เลื้อย,ไม้ประดับ)

อัพโหลดรูปภาพพรรณไม้

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL:https://script.google.com/macros/s/AKfycbxMvroPiDLGIZdfluywmpWjEsDo0a5eK-d3lzOmo5_x7p8-9UAgJMXEMusqunNCVYi1/exec

7.SHEET_ID: 1WLx8_lyYBrYTVVAjwjcECpok4OA5DnM3OCC0uaumz4g

8.FOLDER_ID: 1DWGKnEOmgGWGLiVDP0RQqp2HDSxrMP56

9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

12.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU

13.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีเขียว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
การพัฒนาระบบบันทึกข้อมูลพรรณไม้

# data[].attributes.headline
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.subject
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.body
หัวข้อ: การพัฒนาเว็บแอปพลิเคชัน ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

สถานการณ์โจทย์:

เนื่องจากวิทยาลัยมีการจัดกิจกรรมหลากหลายตลอดปี เช่น ปฐมนิเทศ ทัศนศึกษา งานกีฬา และกิจกรรมชมรมต่าง ๆ ซึ่งจำเป็นต้องบันทึก

ข้อมูลกิจกรรมและแนบหลักฐานเพื่อใช้รายงานต่อผู้บริหารในแต่ละภาคเรียน แต่ปัจจุบันยังไม่มีระบบกลางในการเก็บข้อมูล จึงเกิดปัญหา

การสืบค้นและติดตามย้อนหลัง คณะกรรมการจึงต้องการให้พัฒนาเว็บแอปพลิเคชันเพื่อบันทึกกิจกรรม พร้อมแนบไฟล์ภาพและรายละเอียด

อื่น ๆ ได้อย่างเป็นระบบ

ฟีเจอร์ที่ต้องมีในระบบ:

• ใช้ font คือ Kanit ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้า บันทึกกิจกรรม

• - ชื่อระดับชั้น (ปวช. , ปวส.)

• - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,

• คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก

,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

• (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

o ชื่อกิจกรรม

o วันที่จัด (เป็นรูปแบบปฎิทินประเทศไทย 2568-2-3 )

o ประเภทกิจกรรม (เลือกได้ : กิจกรรมหลักสูตร, กิจกรรมชมรม, กิจกรรมภายนอก ดึงข้อมูลมาจาก หน้า เพิ่มชื่อกิจกรรม )

o รายละเอียด (textarea)

o แนบไฟล์ภาพได้หลายไฟล์ (Preview ได้ก่อนอัปโหลด)

• หน้า เพิ่มปีการศึกษา / ภาคเรียน แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• หน้า เพิ่มชื่อกิจกรรม แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• จัดเก็บข้อมูลลงฐานข้อมูล

• แสดงรายการกิจกรรมย้อนหลัง

• ระบบสามารถค้นหา/กรองตามปี/ภาคเรียน/ประเภทกิจกรรมได้

• สามารถแนบไฟล์ภาพได้ และระบบต้องสามารถรองรับการแนบไฟล์ภาพได้หลายไฟล์ และต้องสามารถ แสดงภาพตัวอย่างก่อน

อัปโหลด (preview)

คำสั่ง จากสถานการณ์ที่กำหนดข้างต้นนี้ ให้พัฒนาเว็บแอปพลิเคชั่น สำหรับการแก้ปัญหานี้

1. สร้างเว็บแอปพลิเคชั่น

2. จัดเก็บข้อมูลลงฐานข้อมูล

3. เผยแพร่สำหรับการนำไปใช้งาน

Footer

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาววัชรีพร ช้างสุวรรณ์”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog, modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยัน

การลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON JSON ที่ถูกต้อง ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน EonData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbzU1fwe2jS1h62cxKTf5P4u2y2QggvTji3snPBPvwfQLVSIURTxbVgBBLWtSpteFz7u/exec

8. SHEET ID: 1zpsydik5Qy_uutgc435Wg2pi_tPTXp3B63N9pa0c4H8

9. FOLDER ID : 1CM7e0c3-JDuKumCwMLnsYgwD2mNil1hS

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง ดำ แดง ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

สามารถบันทึก ข้อมูล และภาพ ลง Google ซีต และ Google ไดรฟ์ ได้ด้วย

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปพลิเคชันจัดเก็บข้อมูลกิจกรรมวิทยาลัย

# data[].attributes.headline
สร้างเว็บไซต์ลงนามถวายพระพรชัยมงคล

# data[].attributes.subject
สร้างเว็บไซต์ลงนามถวายพระพรชัยมงคล

# data[].attributes.body
Prompt (สำหรับใช้สร้างเว็บไซต์ลงนามถวายพระพรชัยมงคล)

สร้างระบบเว็บไซต์ลงนามถวายพระพรชัยมงคล เนื่องในวันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง ในวันที่ 12 สิงหาคม โดยมีรายละเอียดดังนี้:

🎨 ธีม & การออกแบบ:

พื้นหลัง: ไล่เฉดสีแนวตั้งจาก “น้ำเงินเข้ม” → “ฟ้า” → “ฟ้าอ่อน” แบบ gradient จากบนลงล่าง ให้ความรู้สึกสง่างามและอบอุ่น

พื้นหลังเสริม: มีลาย pattern ลายประจำยามจาง ๆ แบบโปร่งแสง เพื่อเพิ่มความเป็นไทย

ฟอนต์: ใช้ฟอนต์ไทยร่วมสมัย เช่น TH Chakra Petch, Sarabun, หรือ Prompt

ภาพกลาง: รูปพระราชินีอยู่ตรงกลาง มีกรอบโค้งมน และประดับด้วยดอกไม้สีขาว

ตราสัญลักษณ์: แสดงอยู่บนสุดของเว็บไซต์แบบวงกลม มีแสงสว่างนวลล้อมรอบ

รูปใช้จาก: https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Royal_Monogram_of_Queen_Sirikit.svg/640px-Royal_Monogram_of_Queen_Sirikit.svg.png

👑 ส่วนหัวเว็บไซต์:

ข้อความ:

ลงนามถวายพระพรชัยมงคลสมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง

วิทยาลัยอาชีวศึกษานครสวรรค์

สไตล์ข้อความ: ใช้ตัวอักษรสีขาวมีเงาอ่อน และมี แถบสีเหลืองอ่อน รองพื้นข้อความเพื่อให้โดดเด่น

📄 ฟอร์มลงนาม:

ช่องกรอกข้อมูล:

ชื่อ-นามสกุล (จำเป็น)

สังกัด (เช่น นักเรียน, นักศึกษา, วิทยาลัยอาชีวศึกษานครสวรรค์, ประชาชน)

ข้อความถวายพระพร (เลือกจากข้อความสวยงาม 3 แบบ)

ปุ่ม:

ยืนยันการลงนาม (ปุ่มหลัก สีฟ้าน้ำเงินไล่เฉด)

ยกเลิกการลงนาม (ปุ่มรอง สีเทา)

แสดง สถิติการลงนาม ทันทีถัดจากฟอร์มหรือใต้ฟอร์ม

📦 ฟังก์ชันระบบ (Full Stack):

รองรับ CRUD ครบถ้วน (Create, Read, Update, Delete)

การลบข้อมูล: ใช้ modal แบบกำหนดเอง ไม่ใช้ confirm() ของ browser

การลบและแก้ไข: ต้องใส่รหัสผ่าน (1234) สำหรับผู้ดูแลระบบ

รองรับการแสดงผลข้อความสถานะ เช่น “กำลังบันทึก...” หรือ “บันทึกสำเร็จ ✅”

🔗 การเชื่อมต่อ Apps Script:

เชื่อมต่อ Google Apps Script ผ่าน URL:

https://script.google.com/macros/s/AKfycbyMWQdPF5UlnHbgyWs6zEc7a515e0qsFRshRA2_9rhoxM95UVHs3zQMOEfIoYm9PfKpnQ/exec

ใช้ URLSearchParams แทน FormData เพื่อส่งข้อมูล

ใช้ Google Sheet ID: 1cqWVIM3sxa33QggmTv9Z8G4HtQNCvAb7tuVOQv_Nii4

ตรวจสอบว่า sheet มีอยู่ ถ้าไม่มีก็สร้างใหม่และกำหนดหัวตาราง

🖼 การอัปโหลดรูปภาพ (ถ้ามีในอนาคต):

แปลงไฟล์เป็น base64 บนเบราว์เซอร์

ส่งชื่อไฟล์ + MIME Type + string base64 ไปพร้อมกัน

ฝั่ง Apps Script ถอดรหัส base64 แล้วสร้างไฟล์เก็บใน Google Drive

🏫 Footer เว็บไซต์:

© 2025 วิทยาลัยอาชีวศึกษานครสวรรค์ | สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | พัฒนาโดย นางสาววัชรีพร ช้างสุวรรณ์

ขอโค้ดสำหรับGSด้วย

ขอธีมเป็นสีฟ้าอ่อน เอาตรววงกลมออกที่มีคำว่าพระบรมฉายาลักษณ์

สมเด็จพระนางเจ้าสิริกิติ์

ขอพื้นหลังเป็นสีฟ้าอ่อนแบบมืออาชีพเวลาเลื่อนลงก็ค่อยๆจาง

ใส่รูปภาพนี้ตรงกลางข้อความhttps://www.skprivate.go.th/images/events/64-08-12/mom.png

# data[].attributes.attachment_link.title
การสร้างเว็บไซต์ลงนามถวายพระพรชัยมงคล

# data[].attributes.headline
Sticker Line ที่ผ่่านการอนุมัติ

# data[].attributes.subject
Sticker Line ที่ผ่่านการอนุมัติ

# data[].attributes.headline
สอบปฏิบัติปลายภาค นางสาวอรรจมินทร์ พรมพิทักษ์

# data[].attributes.subject
สอบปฏิบัติปลายภาค นางสาวอรรจมินทร์ พรมพิทักษ์

# data[].attributes.body
ข้อสอบปฏิบัติปลายภาค

จงสร้างเว็บแอปพลิเคชั่น ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

สถานการณ์:

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ :

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ :

https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho- ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

- โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ, วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

- รหัสประจำตัว

- คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว)

- ชื่อ นามสกุล

- เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

- ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงานให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุลกรองตามระดับชั้น

ข้อมูลการติดตาม

Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวอรรจมินทร์ พรมพิทักษ์"

- ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

- ตกแต่งให้เหมาะสม และ Code html CSS โทนสีชมพู ฟ้า ไล่ระดับ แบบมืออาชีพ

- Progress Bar (เช่น progress 0% → 100%) น่าสนใจ ว้าวๆ

- เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
สร้างเว็บแอปติดตามข้อมูลนักเรียนปีการศึกษา 2567

# data[].attributes.headline
สอบปลายภาค ระบบสำเร็จการศึกษา

# data[].attributes.subject
สอบปลายภาค ระบบสำเร็จการศึกษา

# data[].attributes.body
ข้อสอบปฏิบัติปลายภาค

จงสร้างเว็บแอปพลิเคชัน ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

สถานการณ์

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนาเว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

ใช้เป็นฐานข้อมูลสำหรับรายงานสถานะการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน

ฟีเจอร์ที่ต้องมีในระบบ:

กำหนดโลโก้ให้ขยับได้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกับชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบกราฟข่าว และดูตัวอย่าง รายละเอียดบ่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

ปีการศึกษา (ตัวเลือกแบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

ชื่อระดับชั้น (ปวช., ปวส.)

ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีดิจิทัล)

รหัสประจำตัว

คำนำหน้าชื่อ (ตัวเลือก : นาย, นางสาว)

ชื่อ นามสกุล

เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

ข้อมูลการติดตาม มีตัวเลือก ดังนี้

ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือน และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

กรองตามระดับชั้น

ข้อมูลการติดตาม

Footer ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวจารุณี โพธิ์โต”ทำแบบสวยๆ

ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ชมพู ไล่ระดับ แบบมืออาชีพ

Progress Bar (เช่น progress 0% → 100%) น่าสนใจ รัวๆ

เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปพลิเคชันติดตามข้อมูลนักเรียนจบใหม่

# data[].attributes.headline
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
จงสร้างเว็บแอปพลิเคชัน ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

สถานการณ์ :

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนาเว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

- เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

- ใช้เป็นฐานข้อมูลสำหรับรายงานสถานะการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

- ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน

ฟีเจอร์ที่ต้องมีในระบบ :

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpuI9paSeVoNIbTsZ_86OH8ZHq

ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกับชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบกราฟข่าว และดูตัวอย่าง รายละเอียดบ่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือกแบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช., ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีดิจิทัล)

- รหัสประจำตัว

- คำนำหน้าชื่อ (ตัวเลือก : นาย, นางสาว)

- ชื่อ นามสกุล

- เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea)ระบุตำแหน่ง เงินเดือน และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

- สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

- กรองตามระดับชั้น

- ข้อมูลการติดตาม

Footer ใช้ข้อความ “© 2025 |วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวอาทิตยา แก้วเทศ”

ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ

Progress Bar (เช่น progress 0% → 100%) น่าสนใจ รัวๆ

เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
เว็บแอปติดตามข้อมูลนักศึกษาจบปี 2567

# data[].attributes.headline
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
น.ส.พรวิไล องอาจ สทท.2/1 เลขที่ 12

# data[].attributes.attachment_link.title
เว็บแอปติดตามข้อมูลนักเรียนนักศึกษา

# data[].attributes.headline
ข้อสอบปฏิบัติปลายภาค

# data[].attributes.subject
ข้อสอบปฏิบัติปลายภาค

# data[].attributes.body
จงสร้างเว็บแอปพลิเคชัน ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

สถานการณ์

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนาเว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

ใช้เป็นฐานข้อมูลสำหรับรายงานสถานะการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาค

ใช้ข้อมูลในการพัฒนาหลักสูตร ให้สอดคล้องกับความต้องการของตลาดแรงงาน

ฟีเจอร์ที่ต้องมีในระบบ:

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกับชัดเจนอ่านง่าย

TAB หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบกราฟข่าว และดูตัวอย่าง รายละเอียดบ่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

-ปีการศึกษา (ตัวเลือกแบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

-ชื่อระดับชั้น (ปวช., ปวส.)

-ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีดิจิทัล)

-รหัสประจำตัว

-คำนำหน้าชื่อ (ตัวเลือก : นาย, นางสาว)

-ชื่อ นามสกุล

-เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

-ข้อมูลการติดตาม มีตัวเลือก ดังนี้

-ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

-ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือน และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

-หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

-สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

-กรองตามระดับชั้น

-ข้อมูลการติดตาม

-Footer ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวปิยนุช แสงสร้อย”

ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ ชมพู เหลือง เขียว แยกสีแบบมืออาชีพ

Progress Bar (เช่น progress 0% → 100%) น่าสนใจ รัวๆ

เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปติดตามข้อมูลนักเรียนนักศึกษา 2567

# data[].attributes.headline
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
สร้างเว็บแอปพลิเคชัน ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567 สถานการณ์ วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนาเว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ ใช้เป็นฐานข้อมูลสำหรับรายงานสถานะการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ: กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpuI9paSeVoNIbTsZ_86OH8ZHq ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกับชัดเจนอ่านง่าย หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบกราฟข่าว และดูตัวอย่าง รายละเอียดบ่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ TAB 1 : บันทึกข้อมูล ปีการศึกษา (ตัวเลือกแบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) ชื่อระดับชั้น (ปวช., ปวส.) ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีดิจิทัล) (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีดิจิทัล) รหัสประจำตัว คำนำหน้าชื่อ (ตัวเลือก : นาย, นางสาว) ชื่อ นามสกุล เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307) TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา ข้อมูลการติดตาม มีตัวเลือก ดังนี้ ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือน และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น) TAB 3 : หน้าเพิ่มปีการศึกษา หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง) สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล กรองตามระดับชั้น ข้อมูลการติดตาม Footer ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาววัชรีพร ช้างสุวรรณ์” ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ Progress Bar (เช่น progress 0% → 100%) น่าสนใจ รัวๆ เก็บข้อมูลแบบ local storage และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปพลิเคชันติดตามข้อมูลนักเรียนนักศึกษาปี 2567

# data[].attributes.headline
เว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
เว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
สถานการณ์ : วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชั่น สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษา ในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ - เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือ สถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ - ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย - ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ : - กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho - ใช้ font คือ Itim ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ - โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ TAB 1 : บันทึกข้อมูล - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรม ศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัล กราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล) (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การ บริหารคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์, การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - รหัสประจำตัว - คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว) - ชื่อ นามสกุล - เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307) TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา - ข้อมูลการติดตาม มีตัวเลือก ดังนี้ - ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา - ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือน และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น) TAB 3 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้าสรุปข้อมูล (แสดงรูปแบบตาราง) - สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล - กรองตามระดับชั้น - ข้อมูลการติดตาม -Footer ใช้ข้อความ "©2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายรัฐภูมิ พรมจรรยา" - ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ - ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ -Progress Bar (เช่น progress 0% > 100%) น่าสนใจ ว้าวๆ - เก็บข้อมูลแบบ local storage

เมื่อกด ผู้ดูแลระบบ และ เข้ารหัส 1234 เรียบร้อย ช่วยทำให้สามารถแก้ไขข้อมูลหรือลบข้อมูลได้

ช่วยทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ ส่วนจะเอาไว้ TAB ใหน คุณเลือกตามความเหมาะสมได้เลย

# data[].attributes.attachment_link.title
เว็บแอปติดตามความก้าวหน้าผู้สำเร็จการศึกษา

# data[].attributes.headline
ระบบบันทึกกิจกรรม

# data[].attributes.subject
ระบบบันทึกกิจกรรม

# data[].attributes.body
Prompt : พัฒนาเว็บแอปพลิเคชัน ActiDoc v.3 ระบบบันทึกข้อมูลข่าวงานกิจกรรม ฟีเจอร์ที่ต้องมีในระบบ : • กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho • ใช้ font คือ Kanit ทั้งระบบ • โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่ายและใช้สีให้เป็นงานแบบทางการ หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ, เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล) (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์, การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - ชื่อกิจกรรม - วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.) - ประเภทกิจกรรม (เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม ) - รายละเอียด (textarea) - แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น) TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup TAB 3 : หน้าเพิ่มชื่อกิจกรรม - หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) - สามารถค้นหา - กรองตามปีการศึกษา - ภาคเรียน - ประเภทกิจกรรม - Footer ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายณัฐภูมิ กลิ่นนวล ”ฟังก์ชันเพิ่มเติม : สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ 7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbxvj6VYxllq-_b2GHUb0pq1b6qrs7-zjjN_p2bx-lDOHVvksmA6y6IpVG8Bfbk1DKRfXA/exec 8. SHEET_ID : spreadsheets/d/1LGscD5G1MqluZ7VIkmKgo19q2E7rBZcsT_Zh_eXxLp8 9. FOLDER_ID IT :1BNcsuork19v03FB1qukPboQnfi3nSfF- 9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568 10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีน้ำเงิน ฟ้า ขาว ไล่ระดับแบบมืออาชีพ 14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย --------------------------------------------------- เมื่อระบบใช้งานได้ ให้ทดสอบระบบ และ เพิ่มการทำงานให้ครบถ้วน สมมติข้อมูลในการบันทึกระบบให้มากกว่า 5 ข้อมูล ต้องมีปุ่ม เพิ่ม ลบ แก้ไข แต่ละส่วนต่าง ๆ ได้ เช่น ช่วยสร้าง การแสดงข้อมูลสารสนเทศ ช่วยสร้าง กราฟสรุปข้อมูล แยกตาม ............................. ระบุ ความต้องการในช่องว่างให้เหมาะ

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.3

# data[].attributes.headline
สอบปลายภาค ระบบติดตามผู้สำเร็จการศึกษา ปีการศึกษา

# data[].attributes.subject
สอบปลายภาค ระบบติดตามผู้สำเร็จการศึกษา ปีการศึกษา

# data[].attributes.body
🏫 Prompt: ระบบติดตามผู้สำเร็จการศึกษา ปีการศึกษา 2567 🎯 เป้าหมาย พัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลนักเรียนนักศึกษาที่จบการศึกษา ปี 2567 เพื่อ: เก็บข้อมูลความก้าวหน้าหลังเรียนจบ (ศึกษาต่อ / ทำงาน / อาชีพอิสระ / ว่างงาน) ใช้เป็นฐานข้อมูลรายงานผลสำหรับผู้บริหาร หน่วยงานต้นสังกัด และเครือข่ายความร่วมมือ วิเคราะห์และนำข้อมูลไปปรับปรุงหลักสูตรให้ตรงกับความต้องการตลาดแรงงาน 🎨 การออกแบบระบบ โลโก้ : คลิกที่นี่ ฟอนต์ : Kanit (ทั้งระบบ) โทนสี : ไล่ระดับ (Gradient) ทันสมัย มืออาชีพ UI : ปุ่มและข้อความชัดเจน อ่านง่าย ปุ่ม แก้ไข / ลบ (ล็อกด้วยรหัสผู้ดูแล: 1234) Footer : "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายภูริพัฒน์ ชูเฉลิม" 📌 โครงสร้างเมนู 1. หน้าหลัก (Dashboard) แสดง การ์ดข่าว / รายงานสรุป / รายละเอียดย่อ ปุ่มเข้าสู่ระบบผู้ดูแล (มุมขวาบน) 2. TAB 1 : บันทึกข้อมูล ฟอร์มกรอกข้อมูลนักศึกษา ปีการศึกษา (Dropdown → ดึงจาก “หน้าเพิ่มปีการศึกษา”) ระดับชั้น (ปวช., ปวส.) สาขาวิชา (ตัวเลือกจะแตกต่างตามระดับชั้น) รหัสประจำตัว คำนำหน้า (นาย, นางสาว) ชื่อ-นามสกุล เบอร์โทรศัพท์ (บังคับรูปแบบ 089-1234567) 3. TAB 2 : ข้อมูลการติดตาม ศึกษาต่อ → กรอกชื่อสถานศึกษา + สาขาวิชา ทำงาน → กรอกชื่อสถานที่ทำงาน + ที่อยู่ + อัปโหลดรูปภาพ (เฉพาะไฟล์ภาพ) อาชีพอิสระ / ว่างงาน → กรอกข้อมูลรายละเอียด 4. TAB 3 : จัดการข้อมูลพื้นฐาน เพิ่ม ปีการศึกษา เพิ่ม ชื่อกิจกรรม (Popup) 5. TAB 4 : รายงานสรุป (Reports) ตารางสรุปข้อมูล ค้นหาจากชื่อ-นามสกุล (บางส่วนได้) กรองข้อมูลตาม ระดับชั้น และ สถานะการติดตาม ⚙️ ฟีเจอร์เสริม Sweet Alert → แจ้งสถานะ “กำลังบันทึก / สำเร็จ” Progress Bar → แสดงผลการบันทึก (0% → 100%) แบบน่าสนใจ Local Storage → เก็บข้อมูลเบื้องต้น Analytics Dashboard → แสดงข้อมูลเชิงสถิติ / กราฟ / สารสนเทศสรุป

# data[].attributes.attachment_link.title
ระบบติดตามผู้สำเร็จการศึกษา ปีการศึกษา 2567

# data[].attributes.headline
ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

# data[].attributes.subject
ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

# data[].attributes.body
จงสร้างเว็บแอปพลิเคชัน ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

สถานการณ์:

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ :

- กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ :

https://1h3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B60H8Zho

- ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

- โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

-รหัสประจำตัว

-

คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว)

-

ชื่อ นามสกุล

-เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 092-2904890)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

- ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

- สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

- กรองตามระดับชั้น

- ข้อมูลการติดตาม

Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : ชื่อนาย ยุทธนาวี ลำมะหิต"

- ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

- ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ

- Progress Bar (เช่น progress 0% → 100%) น่าสนใจ ว้าวๆ

- เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเ

# data[].attributes.attachment_link.title
สำเนาของ พัฒนาเว็บแอปติดตามข้อมูลนักเรียนสำเร็จการศึกษา 2567

# data[].attributes.body
ผู้จัดทำ : นางสาวบัณฑิตา จันทร์อำไพ

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL : xxx

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีเทา สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
แบบฟอร์มบันทึกข้อมูลนักศึกษา

# data[].attributes.headline
ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา

# data[].attributes.subject
ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา

# data[].attributes.body
สร้างเว็บแอปพลิเคชัน "ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปีการศึกษา 2567" สำหรับวิทยาลัยอาชีวศึกษา โทนภาพรวม: สีพาสเทลไล่ระดับ (Gradient Pastel) แบบมืออาชีพ, ฟอนต์ทั้งระบบใช้ "Kanit", สีตัวอักษรอ่านง่ายชัดเจน (คอนทราสต์ดี), รองรับมือถือ/แท็บเล็ต/เดสก์ท็อป ทรัพยากร: - โลโก้เว็บไซต์: https:/1h3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho (แสดงโลโก้มุมซ้ายบน; ถ้าโหลดไม่ได้ให้แสดง placeholder) - ใช้ SweetAlert สำหรับแจ้งสถานะกำลังบันทึก/บันทึกสำเร็จ/ยืนยันก่อนลบ - มี Progress Bar 0% → 100% ขณะบันทึก - จัดเก็บข้อมูลทั้งหมดด้วย localStorage (key แยกชัดเจน เช่น years[], students[], activities[]) ความปลอดภัย: - ปุ่ม "แก้ไข" และ "ลบ" ทุกจุด ต้องยืนยันรหัสผ่านผู้ดูแลระบบ = 1234 - ปุ่ม "สำหรับผู้ดูแลระบบ" วางมุมขวาบนของจอ (sticky) โครงสร้างหน้า: หน้าแรก (Home) - การ์ดข่าว/การ์ดสรุปกิจกรรม + ตัวอย่างรายละเอียดสั้น - ปุ่ม “สำหรับผู้ดูแลระบบ” (มุมขวาบน) TAB 1: บันทึกข้อมูล - ปีการศึกษา: dropdown (รายการดึงจาก TAB 3) - ระดับชั้น: radio หรือ dropdown (ค่า: ปวช., ปวส.) - สาขาวิชา (dropdown ขึ้นกับระดับชั้น) ***ห้ามแก้ไขชื่อรายการต่อไปนี้*** • ถ้าเลือก "ปวช." ให้มีตัวเลือก EXACT: การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล • ถ้าเลือก "ปวส." ให้มีตัวเลือก EXACT: การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล - รหัสประจำตัว (บังคับกรอก) - คำนำหน้าชื่อ: dropdown (นาย, นางสาว) - ชื่อ, นามสกุล (บังคับกรอก) - เบอร์โทรศัพท์: input + ตรวจรูปแบบ “099-7655120” (pattern: ###-#######) TAB 2: ข้อมูลการติดตามผู้สำเร็จการศึกษา - ตัวเลือกสถานะติดตาม: ศึกษาต่อ, ทำงาน, อาชีพอิสระ, ว่างงาน • ถ้าเลือก "ศึกษาต่อ": ช่อง “ระบุชื่อสถานศึกษา”, “สาขาวิชา” • ถ้าเลือก "ทำงาน": ช่อง “ชื่อสถานที่ทำงาน”, “ที่อยู่ที่ทำงาน (textarea)”, “ตำแหน่ง”, “เงินเดือน”, “อัปโหลดรูปภาพสถานที่ทำงาน (ไฟล์ภาพเท่านั้น)” • ถ้าเลือก "อาชีพอิสระ": ช่อง “ลักษณะอาชีพ/บริการ”, “ที่ตั้งหรือพื้นที่ให้บริการ (textarea)”, “รายได้ประมาณการ/ช่วงราคา”, “อัปโหลดรูปผลงาน/สถานประกอบการ (ไฟล์ภาพเท่านั้น)” • ถ้าเลือก "ว่างงาน": ช่อง “เหตุผล/แผนการหางาน (textarea)”, “วันที่เริ่มหางาน (date)” - ปุ่มบันทึก: แสดง SweetAlert ระหว่างรอ + สำเร็จ และแสดง Progress Bar TAB 3: หน้าเพิ่มปีการศึกษา - ตารางรายการปีการศึกษา + ปุ่ม “เพิ่มปีการศึกษา” (เปิดเป็น Popup) - ช่องกรอกปีรูปแบบ พ.ศ. เช่น 2567 → กดบันทึกแล้วเพิ่มเข้า dropdown ของ TAB 1 (อัปเดต localStorage) - “หน้าเพิ่มชื่อกิจกรรม” แสดงเป็น Popup (เพิ่ม activity เก็บใน activities[]) TAB 4: สรุปรายงาน (ตาราง) - ตารางข้อมูลรวม (ชื่อ-นามสกุล, ระดับชั้น, สาขาวิชา, ปีการศึกษา, สถานะติดตาม) - ค้นหาจาก “บางส่วนของชื่อหรือสกุล” - กรองตาม “ระดับชั้น” และ “ข้อมูลการติดตาม” - ปุ่ม Export CSV/Excel (ดึงจากข้อมูลใน localStorage) - แสดงสรุปตัวเลข/ชาร์ตเล็กๆ ด้านบน (จำนวน ศึกษาต่อ/ทำงาน/อาชีพอิสระ/ว่างงาน) — ใช้กราฟแท่งหรือวงกลมโทนพาสเทล UI/UX เพิ่มเติม: - ใช้ปุ่ม, อินพุต, การ์ด ที่มีมุมโค้งมนเล็กน้อย (radius) โทนพาสเทลไล่ระดับ - Header/เมนูแบบ sticky, แถบค้นหาด่วนบน TAB 4 - ฟอร์มมี placeholder/ช่วยกรอก และแสดงข้อความแนะนำสั้น ๆ - แสดงไอคอนเล็ก ๆ บนปุ่ม (เช่น เพิ่ม/แก้ไข/ลบ/บันทึก) กติกาเชิงเทคนิค (JavaScript): - เมื่อผู้ใช้เลือก “ระดับชั้น” ให้สลับรายการ “สาขาวิชา” ตามชุดรายการที่กำหนดไว้ด้านบนแบบอัตโนมัติ (exact match) - ตรวจสอบรูปแบบเบอร์โทรศัพท์ด้วย regex ก่อนบันทึก (###-#######) - ปุ่ม “แก้ไข/ลบ” เรียก SweetAlert ให้กรอกรหัสผ่าน admin (1234) ก่อนดำเนินการ - ขณะบันทึก ให้แสดง Progress Bar จาก 0% → 100% แล้วค่อยแจ้ง Success - เก็บ/อ่าน/อัปเดตข้อมูลจาก localStorage เสมอ (ไม่มีแบ็คเอนด์) - การอัปโหลดรูป: รับเฉพาะไฟล์ภาพ (เช็ค MIME/นามสกุล) แล้วเก็บเป็น DataURL ใน localStorage Footer (ทุกหน้า): © 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : ชื่อ ด็อกเตอร์ศาสตราจารย์ณัฐภูมิ กลิ่นนวล ผลลัพธ์สุดท้าย: - ส่งมอบโค้ด HTML + CSS + JavaScript ครบ

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปฯ ติดตามข้อมูลนักเรียนนักศึกษา 2567

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
สถานการณ์:

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูล ของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือ สถานะว่างงาน มีรายละเอียด

ในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และ ภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน

ฟีเจอร์ที่ต้องมีในระบบ :

• กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

• ใช้ font คือ Itim ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ

โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,

เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

-รหัสประจำตัว

-คำหน้าชื่อ (ตัวเลือก : นาย, นางสาว)

-ชื่อ นามสกุล

-เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

-ข้อมูลการติดตาม มีตัวเลือก ดังนี้

-ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

-ถ้าเลิอก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ทำงาน (textarea) ระบุตำแหน่ง เงินเดือน

และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

-สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

-กรองตามระดับชั้น

-ข้อมูลการติดตาม

- Footer ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายพงษ์พิพัฒน์ เพ็ชรหงษ์”

ฟังก์ชันเพิ่มเติม :

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ

ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

7.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง แดง ขาว ไล่ระดับแบบมืออาชีพ

8.เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.headline
ระบบCRUDบันทึกข้อมูลนักศึกษา สทท 2/1

# data[].attributes.subject
ระบบCRUDบันทึกข้อมูลนักศึกษา สทท 2/1

# data[].attributes.body
ผู้จัดทำ : นางสาวบันฑิตา จันทร์อำไพ

prompt

1.สร้างฟอร์มบันทึกข้อมูลนักศึกษา ห้อง สทท.2/1 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล

โดยมีชื่อ "นางสาวบัณฑิตา จันทร์อำไพ" เป็นผู้พัฒนาระบบ อยู่ด้านล่างแบบฟอร์ม

รายละเอียดแบบฟอร์ม ประกอบด้วย

คำแนะนำชื่อ (นาย,นางสาว)

ชื่อ

สกุล

ชื่อเล่น

รูปโปรไฟล์

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัปเดต และลบ)ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชั่นการลบ

ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser

มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbyzEJHNkNG-HaSo3I1tsuzTL-nZhFGX54Aw6MA0rVv5in_iARvZsu6Iq-9lOUWhnt7hBA/exec

7.SHEET_ID: 1pXangGa4GqazId3_q4SnuLCzGpTUg5mwPweabuPdHcs

8.FOLDER_ID: 1p-in_yys3hqqopy3dDYvHFJWyn8OC_N-

9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก url ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

12.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง 2/1 ธุรกิจดิจิทัล

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
prompt: สถานการณ์: วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ • เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ • ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย • ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ : ฟีเจอร์ที่ต้องมีในระบบ กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho ใช้ font คือ 1 font family selected ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ - โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ TAB 1 : บันทึกข้อมูล - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ, เทคโนโลยีธุรกิจดิจิทัล) (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - รหัสประจำตัว - คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว) - ชื่อ นามสกุล - เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307) TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา - ข้อมูลการติดตาม มีตัวเลือก ดังนี้ - ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา - ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น) TAB 3 : หน้าเพิ่มปีการศึกษา หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง) - สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล - กรองตามระดับชั้น - ข้อมูลการติดตาม - Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : ชื่อ นางสาว กัลยรัตน์ สุขล้อม" - ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ - ตกแต่งให้เหมาะสม และ Code html CSS โทนสีส้มเหลือง ฟ้าอ่อนปนขาว ไล่ระดับ แบบมืออาชีพ - Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ - เก็บข้อมูลแบบ local storage ขอแบบเป็นทางการครับ

-เพิ่มปุ่ม ออกจากระบบ ให้หน่อยครับ-ทำสรุปข้อมูล กราฟวงกลม หรือแดชบอร์ด ให้หน่อยครับ

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.headline
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
นางสาววันฑนา แก่นอินทร์ เลขที่16 สทท.2/1

# data[].attributes.attachment_link.title
ระบบติดตามข้อมูลนักเรียนนักศึกษา

# data[].attributes.body
Gemini พรอมต์ที่ใช้งานได้จริง 1.สร้างเว็บแอป Visit Home2025 บันทึกข้อมูลลงชีตด้วย App Script โดยให้มี ชื่อ “นางสาวบัณฑิตา จันทร์อำไพ” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย - รหัสนักศึกษา (โดยกำหนดให้ใส่ตัวเลข 11 หลักเท่านั้น ห้ามใส่เกิน) - คำนำหน้าชื่อ (นาย, นางสาว) - ชื่อ - นามสกุล - ระดับชั้น (ปวช. , ปวส.) - ชั้นปีที่ (ถ้าเลือก ปวช. จะมีตัวเลือก 1 , 2 ,3 ) (ถ้าเลือก ปวส. จะมีตัวเลือก 1, 2) - วันที่บันทึกข้อมูลเยี่ยมบ้าน (แสดงเป็นปฏิทินให้เลือก ห้ามเลือกวันล่วงหน้า) - บันทึกข้อมูลการเยี่ยมบ้าน - รูปเยี่ยมบ้านรูปที่ 1 - รูปเยี่ยมบ้านรูปที่ 2 2.ใช้ form submit และ google.script.run 3.ใช้ tailwindcss แบบ Internal และกำหนดฟ้อนต์ Noto Sans Thai 4.สร้างหัวคอลัมน์ตาราง และชื่อชีตอัตโนมัติ 5.ใช้ Sweet Alert ในการแสดงสถานะขณะบันทึกข้อมูลและบันทึกสำเร็จ 6. SPREADSHEET_ID = 1IzWDtvAgIYnjI96ElLUftoxplaphrt6f8ZzGqXIze4k 7. FOLDER_ID 1 : 1EoJGv_wyHw1_ktXY6E4Y_JQIs1WZTsYq 8. FOLDER_ID 2 : 1nP2WZsOJaXcPmuh_T89tFrJMXZv6AclS 9.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 10.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 11.ตกแต่งแบบฟอร์ม html CSS โทนสีส้ม น้ำเงิน เทา ไล่ระดับแบบมืออาชีพ 12. เมื่อสร้างระบบเสร็จแล้วให้แสดงไฟล์ 2 ไฟล์ คือ code.gs และ index.html 13. อธิบายการนำไปสร้างทุกขั้นตอน

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลเยี่ยมบ้าน Visit Home 2025

# data[].attributes.headline
ข้อสอบปฏิบัติ พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
นางสาว อภิษฎา ธัญญกรรม เลขที่19 สทท.2/1

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.headline
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.subject
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.body
สร้างเว็บแอปฯ คำสั่ง prompt มีดังนี้ :

ชื่อระบบ : ภาษาไทย

ระบบข่าวสารประชาสัมพันธ์ วิทยาลัยอาชีวศึกษานครสวรรค์

ภาษาอังกฤษ

Information NEWs Nakhonsawan Vocational College.

รายละเอียดประกอบด้วย

1.กำหนดให้มี .setFaviconUrl('https://snkvc.ac.th/wp

content/uploads/2024/06/%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2

%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81

%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%B2%E0%B8%8A%E0%B8%B5

%E0%B8%A7%E0%B8%A8%E0%B8%B6%E0%B8%81%E0%B8%A9%E0%B8%B2.png')

2. กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

3. ให้หน้าเว็บมีความสวยงามทันสมัย ส่วนการแจ้งเตือน หรือกล่องโต้ตอบกับผู้ใช้ให้ใช้ sweet alert หน้าเว็บใช้ tailwind css ในการ

ออกแบบให้สวยงาม โดยมี ui เว็บ Magazine สวยงาม ใช้งานง่าย มีไอคอนประกอบ ใช้ font คือ Kanit ทั้งระบบ

4.รองรับการใช้งานทุกอุปกรณ์ แบบ responsive (มือถือแท็บเล็ต คอมพิวเตอร์)

5.โดยมีช่องกรอกข้อมูล หรือปุ่มต่าง ๆ กำหนดให้สีข้อความ แตกต่างกับสีตัวอักษร ชัดเจน อ่านง่าย

องค์ประกอบหน้าจอระบบ ดังนี้

หน้าแรก เป็นหน้าข่าวสารประชาสัมพันธ์ -

กำหนดให้ การ์ดข่าว ให้แสดง ชื่อข่าว หมวดหมู่ ภาพประจำเรื่อง และเนื้อข่าวโดยย่อ มีปุ่มอ่านเพิ่มเติม - - - - - - - - - -

มีตัวกรองเพื่อเลือกดูข่าวตามหมวดหมู่ อยู่ด้านบนขวาของหน้า โดยค่า default คือ ทั้งหมด

หน้าสอง เป็นหน้าฟอร์มบันทึกข้อมูลข่าวสาร สำหรับผู้ดูแลระบบเท่านั้น โดยต้องใส่รหัสผ่าน 1234

โดยมีช่องกรอกข้อมูล ในแบบฟอร์มดังนี้

ชื่อข่าว (textinput)

หมวดหมู่ข่าว (dropdown ดึงข้อมูลหมวดหมู่จากหน้าจัดการข้อมูล)

เนื้อข่าว (textinput)

ภาพข่าวหรือภาพวารสาร (อัพโหลดหรือลากวางได้ จำนวนไม่เกิน 4 ภาพ)

กำหนดรูปประจำข่าว (อัพโหลดหรือลากวางได้ จำนวน 1 ภาพ เพื่อแสดงเป็นตัวอย่างในหน้าข่าวสารประชาสัมพันธ์)

หน้าสาม เป็นหน้าจัดการข้อมูล (รูปแบบ CRUD)

แสดงข่าวทั้งหมดในตาราง พร้อมปุ่ม แก้ไข ลบ

แสดงส่วนจัดการหมวดหมู่

สามารถเพิ่ม ลบ แก้ไข หมวดหมู่ (รูปแบบ CRUD)

หน้าเพิ่มข่าวและจัดการข้อมูล แสดงเป็น popup

เข้าสู่ระบบ และ ออกจากระบบ และมีปุ่มกลับหน้าหลัก

- Footer

ใช้ข้อความ “© 2025 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | วิทยาลัยอาชีวศึกษานครสวรรค์ | ผู้พัฒนาระบบ : นางสาวบัณฑิตา จันทร์อำไพ ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog ,

modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดใน

กรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

8. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

9. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

10. ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

11. ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

12.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีฟ้า ส้ม ม่วง ไล่ระดับ แบบมืออาชีพ

13.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ

14. ทดสอบระบบด้วย ข้อมูลแบบ local storage ให้ใช้งานได้จริง

15. มีระบบการบันทึกข้อมูลแบบถาวร เมื่อปิดและเปิดใหม่ข้อมูลยังอยู่

# data[].attributes.attachment_link.title
Book Manager - ระบบจัดการหนังสือ

# data[].attributes.headline
ระบบลงนามถวายพระพรชัยมงคล เนื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568 

# data[].attributes.subject
ระบบลงนามถวายพระพรชัยมงคล เนื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568 

# data[].attributes.body
Prompt (สำหรับใช้สร้างเว็บไซต์ลงนามถวายพระพรชัยมงคล)

สร้างระบบเว็บไซต์ลงนามถวายพระพรชัยมงคล เนื่องในวันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง ในวันที่ 12 สิงหาคม โดยมีรายละเอียดดังนี้:

🎨 ธีม & การออกแบบ:

พื้นหลัง: ไล่เฉดสีแนวตั้งจาก “น้ำเงินเข้ม” → “ฟ้า” → “ฟ้าอ่อน” แบบ gradient จากบนลงล่าง ให้ความรู้สึกสง่างามและอบอุ่น

พื้นหลังเสริม: มีลาย pattern ลายประจำยามจาง ๆ แบบโปร่งแสง เพื่อเพิ่มความเป็นไทย

ฟอนต์: ใช้ฟอนต์ไทยร่วมสมัย เช่น TH Chakra Petch, Sarabun, หรือ Prompt

ภาพกลาง: รูปพระราชินีอยู่ตรงกลาง มีกรอบโค้งมน และประดับด้วยดอกไม้สีขาว

ตราสัญลักษณ์: แสดงอยู่บนสุดของเว็บไซต์แบบวงกลม มีแสงสว่างนวลล้อมรอบ

รูปใช้จาก: https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Royal_Monogram_of_Queen_Sirikit.svg/640px-Royal_Monogram_of_Queen_Sirikit.svg.png

👑 ส่วนหัวเว็บไซต์:

ข้อความ:

ลงนามถวายพระพรชัยมงคลสมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง

วิทยาลัยอาชีวศึกษานครสวรรค์

สไตล์ข้อความ: ใช้ตัวอักษรสีขาวมีเงาอ่อน และมี แถบสีเหลืองอ่อน รองพื้นข้อความเพื่อให้โดดเด่น

📄 ฟอร์มลงนาม:

ช่องกรอกข้อมูล:

ชื่อ-นามสกุล (จำเป็น)

สังกัด (เช่น นักเรียน, นักศึกษา, วิทยาลัยอาชีวศึกษานครสวรรค์, ประชาชน)

ข้อความถวายพระพร (เลือกจากข้อความสวยงาม 3 แบบ)

ปุ่ม:

ยืนยันการลงนาม (ปุ่มหลัก สีฟ้าน้ำเงินไล่เฉด)

ยกเลิกการลงนาม (ปุ่มรอง สีเทา)

แสดง สถิติการลงนาม ทันทีถัดจากฟอร์มหรือใต้ฟอร์ม

📦 ฟังก์ชันระบบ (Full Stack):

รองรับ CRUD ครบถ้วน (Create, Read, Update, Delete)

การลบข้อมูล: ใช้ modal แบบกำหนดเอง ไม่ใช้ confirm() ของ browser

การลบและแก้ไข: ต้องใส่รหัสผ่าน (1234) สำหรับผู้ดูแลระบบ

รองรับการแสดงผลข้อความสถานะ เช่น “กำลังบันทึก...” หรือ “บันทึกสำเร็จ ✅”

🔗 การเชื่อมต่อ Apps Script:

เชื่อมต่อ Google Apps Script ผ่าน URL:

https://script.google.com/macros/s/AKfycbyMWQdPF5UlnHbgyWs6zEc7a515e0qsFRshRA2_9rhoxM95UVHs3zQMOEfIoYm9PfKpnQ/exec

ใช้ URLSearchParams แทน FormData เพื่อส่งข้อมูล

ใช้ Google Sheet ID: 1cqWVIM3sxa33QggmTv9Z8G4HtQNCvAb7tuVOQv_Nii4

ตรวจสอบว่า sheet มีอยู่ ถ้าไม่มีก็สร้างใหม่และกำหนดหัวตาราง

🖼 การอัปโหลดรูปภาพ (ถ้ามีในอนาคต):

แปลงไฟล์เป็น base64 บนเบราว์เซอร์

ส่งชื่อไฟล์ + MIME Type + string base64 ไปพร้อมกัน

ฝั่ง Apps Script ถอดรหัส base64 แล้วสร้างไฟล์เก็บใน Google Drive

🏫 Footer เว็บไซต์:

© 2025 วิทยาลัยอาชีวศึกษานครสวรรค์ | สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | พัฒนาโดย นางสาวบัณฑิตา จันทร์ฮำไพ

ขอโค้ดสำหรับGSด้วย

ขอธีมเป็นสีฟ้าอ่อน เอาตรววงกลมออกที่มีคำว่าพระบรมฉายาลักษณ์

สมเด็จพระนางเจ้าสิริกิติ์

ขอพื้นหลังเป็นสีฟ้าอ่อนแบบมืออาชีพเวลาเลื่อนลงก็ค่อยๆจาง

ใส่รูปภาพนี้ตรงกลางข้อความhttps://www.skprivate.go.th/images/events/64-08-12/mom.png

# data[].attributes.attachment_link.title
ระบบลงนามถวายพระพรชัยมงคล

# data[].attributes.headline
ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา 

# data[].attributes.subject
ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา 

# data[].attributes.body
นางสาวสาวิทตรี ยาแสง

# data[].attributes.attachment_link.title
ระบบติดตามข้อมูลนักเรียนนักศึกษา ปี 2567

# data[].attributes.headline
ข้อสอบ ปฎิบัติพัฒนาเว็บแอปพลิเคชันระบบติมตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบ ปฎิบัติพัฒนาเว็บแอปพลิเคชันระบบติมตามผู้สำเร็จการศึกษา

# data[].attributes.body
นางสาวณัฐชา พิมะมะดี เลขที่ 14สทท2/1

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปติดตามความก้าวหน้านักเรียนนักศึกษา 2567

# data[].attributes.headline
ข้อสอบปฏิบัติปลายภาค

# data[].attributes.subject
ข้อสอบปฏิบัติปลายภาค

# data[].attributes.body
สรัลนุช คำวิเศษ

ข้อมูลดังนี้

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ :

- กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ :

https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

-ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

-โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

- รหัสประจำตัว

- คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว)

- ชื่อ นามสกุล

- เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

- ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4: หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

- สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

กรองตามระดับชั้น

ข้อมูลการติดตาม

Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : สรัลนุช  คำวิเศษ"

- ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

- ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ

- Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ

- เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปฯ ติดตามข้อมูลนักเรียนจบการศึกษา

# data[].attributes.attachment_caption
นางสาวบัณฑิตา จันทร์อำไพ เลขที่8 สทท.2/1

# data[].attributes.headline
ข้อสอบปฏิบัติ พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
จงสร้างเว็บแอปพลิเคชัน ระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปี 2567

สถานการณ์

.วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนาเว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

ใช้เป็นฐานข้อมูลสำหรับรายงานสถานะการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน

ฟีเจอร์ที่ต้องมีในระบบ:

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกับชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบกราฟข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

-ปีการศึกษา (ตัวเลือกแบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

-ชื่อระดับชั้น (ปวช., ปวส.)

-ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีดิจิทัล)

-รหัสประจำตัว

-คำนำหน้าชื่อ (ตัวเลือก : นาย, นางสาว)

-ชื่อ นามสกุล

-เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

-ข้อมูลการติดตาม มีตัวเลือก ดังนี้

-ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

-ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือน และ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

-หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

-สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

-กรองตามระดับชั้น

-ข้อมูลการติดตาม

Footer ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวบัณฑิตา จันทร์อำไพ”

ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ

Progress Bar (เช่น progress 0% → 100%) น่าสนใจ น่าทึ่งๆ

เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
สร้างเว็บแอปติดตามข้อมูลนักเรียนนักศึกษาสำเร็จการศึกษา 2567

# data[].attributes.headline
สอบปฏิบัติปลายภาค

# data[].attributes.subject
สอบปฏิบัติปลายภาค

# data[].attributes.body
สถานการณ์:

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ :

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

- ใช้ font คือ  อิติม ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

- โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงาน แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ, วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

- รหัสประจำตัว

- คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว)

- ชื่อ นามสกุล

- เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

- ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงานให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุลกรองตามระดับชั้น

ข้อมูลการติดตาม

Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวภัทราพรรณ อยู่คง

- ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

- ตกแต่งให้เหมาะสม และ Code html CSS โทนสีฟ้า ชมพู ม่วง ขาว ไล่ระดับ แบบมืออาชีพ

- Progress Bar (เช่น progress 0% → 100%) น่าสนใจ ว้าวๆ

- เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปติดตามข้อมูลผู้สำเร็จการศึกษา 2567

# data[].attributes.headline
ข้อสอบปฏิบัติปลายภาค

# data[].attributes.subject
ข้อสอบปฏิบัติปลายภาค

# data[].attributes.body
นางสาว กัลยา บุญมา

ข้อมูล ดังนี้

วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ :

- กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ :

https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

-ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

-โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

- รหัสประจำตัว

- คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว)

- ชื่อ นามสกุล

- เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

- ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4: หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

- สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

กรองตามระดับชั้น

ข้อมูลการติดตาม

Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาว กัลยา บุญมา "

- ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

- ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ

- Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ

- เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปติดตามข้อมูลนักเรียนสำเร็จการศึกษา 2567

# data[].attributes.body
ข้อมูลดังนี้ วิทยาลัยอาชีวศึกษาแห่งหนึ่งต้องการพัฒนา เว็บแอปพลิเคชัน สำหรับติดตามข้อมูลของนักเรียนนักศึกษาที่สำเร็จการศึกษาในปีการศึกษา 2567 โดยมีวัตถุประสงค์เพื่อ

• เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังเรียนจบ เช่น การศึกษาต่อ การทำงาน การประกอบอาชีพอิสระ หรือสถานะว่างงาน มีรายละเอียดในแต่ละข้อมูล รูปภาพ

• ใช้เป็นฐานข้อมูลสำหรับรายงานผลการจัดการศึกษาให้แก่ผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

• ใช้ข้อมูลในการพัฒนาหลักสูตรให้สอดคล้องกับความต้องการของตลาดแรงงาน ฟีเจอร์ที่ต้องมีในระบบ :

- กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ :

https://1h3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

-ใช้ font คือ Kanit ทั้งระบบ ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

-โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ อยู่มุมบนขวามือของจอภาพ

TAB 1 : บันทึกข้อมูล

- ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา)

- ชื่อระดับชั้น (ปวช. , ปวส.)

- ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรมศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

- รหัสประจำตัว

- คำนำหน้าชื่อ (ตัวเลือก : นาย , นางสาว)

- ชื่อ นามสกุล

- เบอร์โทรศัพท์ (กำหนดรูปแบบเป็นเบอร์โทรศัพท์ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

- ข้อมูลการติดตาม มีตัวเลือก ดังนี้

- ถ้าเลือก ศึกษาต่อ ให้แสดง ช่อง ระบุชื่อสถานศึกษา สาขาวิชา

- ถ้าเลือก ทำงาน ให้แสดง ช่อง ระบุชื่อสถานที่ทำงาน ที่อยู่ที่ทำงาน(textarea) ระบุตำแหน่ง เงินเดือนและ อัพโหลดรูปภาพสถานที่ทำงาน (รองรับไฟล์ภาพ เท่านั้น)

TAB 3 : หน้าเพิ่มปีการศึกษา

- หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4: หน้า สรุปรายงาน (แสดงรูปแบบตาราง)

- สามารถค้นหาได้จากบางส่วนของ ชื่อ นามสกุล

กรองตามระดับชั้น

ข้อมูลการติดตาม

Footer ใช้ข้อความ "© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : ปวีณ์ธิดา เณรทอง นักศึกษา"

- ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

- ตกแต่งให้เหมาะสม และ Code html CSS โทนสี ไล่ระดับ แบบมืออาชีพ

- Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ

- เก็บข้อมูลแบบ local storage

และเมื่อระบบใช้งานได้ครบถ้วน ให้สั่ง prompt ทำสรุปข้อมูลแบบกราฟ หรือ dashboard หรือ ข้อมูลสารสนเทศ

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปพลิเคชันติดตามข้อมูลนักศึกษาจบการศึกษา 2567

# data[].attributes.headline
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
ข้อสอบปฏิบัติปลายภาค

หัวข้อ: พัฒนาเว็บแอปพลิเคชันระบบติดตามข้อมูลนักเรียนนักศึกษาที่สำเร็จการศึกษา ปีการศึกษา 2567

สถานการณ์

วิทยาลัยอาชีวศึกษาแห่งหนึ่งมีความประสงค์ในการพัฒนา เว็บแอปพลิเคชันระบบติดตามผู้สำเร็จการศึกษา สำหรับนักเรียน–นักศึกษา ปีการศึกษา 2567 โดยมีวัตถุประสงค์ดังนี้

เก็บรวบรวมข้อมูลความก้าวหน้าของผู้เรียนหลังจบการศึกษา เช่น

การศึกษาต่อ

การทำงาน

การประกอบอาชีพอิสระ

การว่างงาน

(แต่ละข้อมูลสามารถบันทึกรายละเอียดและอัปโหลดรูปภาพได้)

ใช้เป็น ฐานข้อมูลรายงานสถานภาพการจัดการศึกษา สำหรับผู้บริหาร หน่วยงานต้นสังกัด และภาคีเครือข่าย

ใช้เป็น ข้อมูลประกอบการพัฒนาหลักสูตร ให้สอดคล้องกับความต้องการของตลาดแรงงาน

คุณสมบัติและฟีเจอร์ที่ต้องพัฒนา

1. ข้อกำหนดทั่วไป

ใช้ โลโก้เว็บไซต์ จากลิงก์นี้:

https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

ใช้ Font Kanit ทั้งระบบ

ปุ่ม แก้ไข / ลบ ต้องมีการยืนยันรหัสผ่านผู้ดูแลระบบ คือ 1234

สีและการออกแบบต้องเน้น อ่านง่าย ชัดเจน และมืออาชีพ

มี ปุ่มเข้าสู่ระบบผู้ดูแล (Admin) ที่มุมบนขวาของหน้าจอ

ใช้ SweetAlert แสดงสถานะ เช่น

ระหว่างการบันทึกข้อมูล

การบันทึกสำเร็จ

ใช้ Progress Bar แสดงผลความคืบหน้า (0% → 100%)

เก็บข้อมูลใน Local Storage

2. โครงสร้างหน้าเว็บ

หน้าหลัก (Dashboard):

แสดงข้อมูลสรุปและสถิติ (ในรูปแบบ กราฟหรือแผนภาพ)

แสดงข้อมูลข่าว/กิจกรรม

สามารถดูรายละเอียดแต่ละข้อมูลเพิ่มเติมได้

TAB 1 : บันทึกข้อมูล

ช่องกรอกข้อมูล:

ปีการศึกษา (Dropdown ดึงข้อมูลจาก “หน้าเพิ่มปีการศึกษา”)

ระดับชั้น: ปวช. / ปวส.

สาขาวิชา:

ถ้าเลือก ปวช. → ตัวเลือก:

การบัญชี, การตลาด, ธุรกิจค้าปลีก, การจัดการสำนักงานดิจิทัล, คหกรรมศาสตร์, การโรงแรม, โลจิสติกส์, อาหารและโภชนาการ, วิจิตรศิลป์, การออกแบบ, การถ่ายภาพและมัลติมีเดีย, ดิจิทัลกราฟิก, แฟชั่นและสิ่งทอ, เทคโนโลยีสารสนเทศ, เทคโนโลยีดิจิทัล

ถ้าเลือก ปวส. → ตัวเลือก:

การบัญชี, การตลาด, การจัดการธุรกิจค้าปลีก, การจัดการสำนักงานดิจิทัล, การบริหารงานคหกรรมศาสตร์, การจัดการโลจิสติกส์และซัพพลายเชน, อาหารและโภชนาการ, วิจิตรศิลป์, การออกแบบ, การถ่ายภาพและมัลติมีเดีย, ดิจิทัลกราฟิก, เทคโนโลยีแฟชั่นและเครื่องแต่งกาย, เทคโนโลยีดิจิทัล

รหัสประจำตัว

คำนำหน้า (นาย, นางสาว)

ชื่อ – นามสกุล

เบอร์โทรศัพท์ (รูปแบบ 089-2091307)

TAB 2 : ข้อมูลการติดตามผู้สำเร็จการศึกษา

ตัวเลือกสถานะ:

ศึกษาต่อ → ระบุชื่อสถานศึกษา, สาขาวิชา

ทำงาน → ระบุชื่อสถานที่ทำงาน, ที่อยู่ (Textarea), ตำแหน่ง, เงินเดือน, และ อัปโหลดรูปภาพสถานที่ทำงาน (เฉพาะไฟล์ภาพ)

ประกอบอาชีพอิสระ → ระบุรายละเอียดอาชีพ

ว่างงาน → ระบุเหตุผล/รายละเอียดเพิ่มเติม

TAB 3 : เพิ่มปีการศึกษา

สามารถเพิ่มปีการศึกษาใหม่ได้ (แสดงเป็น Popup Modal)

TAB 4 : สรุปรายงาน (Report)

แสดงข้อมูลในรูปแบบ ตาราง

สามารถ ค้นหาจากชื่อ/นามสกุล (บางส่วน)

สามารถ กรองข้อมูลตามระดับชั้น และสถานะการติดตาม

Footer

แสดงข้อความ:

“© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายธินกร ชวาลิตร”

ข้อกำหนดเพิ่มเติม

ใช้การตกแต่ง HTML + CSS ด้วยโทนสี Gradient แบบมืออาชีพ

ระบบต้องสามารถทำงานครบทุกฟีเจอร์ที่ระบุ

เมื่อใช้งานได้ครบ ให้ระบบสามารถ สรุปข้อมูลเป็น Dashboard หรือกราฟสถิติ ได้อัตโนมัติ

ขอมีแบบใส่รูปนักศึกษาให้ด้วยขอแบบUIสวยๆ

เวลากดบันทึกข้อมูลขอมีพลุด้วย ขึ้นข้อความบันทึกสำเร็จแล้วพร้อมพลุ

ขอตรงรูปภาพโลโก้ เด้วขึ้นลงได้ และเวลาเอาเมาส์จิ้มตรงไหนก็มีอนิเมชั่นกระโดด

และเวลาแก้ไขกับลบข้อมูลต้องเป็นผู้ดูแลก่อน

ตรงหน้าเพิ่มปีการศึกษาใช้ได้เฉพาะผู้ดูแล และตรงสรุปรายงานไม่มีชื่อขึ้นและตรงสถิติการติดตามผู้สำเร็จการศึกษาก็ไม่ขึ้นและสถิติตามระดับชั้นก็ไม่ขึ้นแก้ไขให้หน่อย

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปพลิเคชันติดตามข้อมูลนักเรียนปีการศึกษา 2567

# data[].attributes.headline
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.subject
ข้อสอบปฏิบัติ   พัฒนาเว็บแอปพลิเคชั่น ระบบติดตามผู้สำเร็จการศึกษา

# data[].attributes.body
นางสาวพิริยะ บุญเนาว์ เลขที่13 สทท.2/1

# data[].attributes.attachment_link.title
ระบบติดตามข้อมูลนักเรียนนักศึกษา ปี 2567

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.body
ฟีเจอร์ที่ต้องมีในระบบ :

• กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

• ใช้ font คือ Itim ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ

TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ

โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,

เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

ชื่อกิจกรรม

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - -

วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.)

ประเภทกิจกรรม

(เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม )

รายละเอียด (textarea)

แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น)

TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup

TAB 3 : หน้าเพิ่มชื่อกิจกรรม -

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) -

สามารถค้นหา - - - - Footer

กรองตามปีการศึกษา

ภาคเรียน

ประเภทกิจกรรม

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวอาทิตยา แก้วเทศ”

ฟังก์ชันเพิ่มเติม :

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ

ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbwZXTWzxR3fOLvaqKTPon_plTnJXvscPdNYiPmerbV3C2GoYYZ4UWgzOB9Vnu1JU3i1/exec

8. SHEET_ID : 1MRCIgrqLVKVIsALidhpeBWMD_5Hbcz5Ncxvn4q8NgGg

9. FOLDER_ID IT : 1bfE-rPmkv8_InemIUE42WUvq4gD07m30

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง แดง ขาว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

15.ปีการศึกษาที่มีอยู่เมื่อเพิ่มแล้วและประเภทกิจกรรมที่มีอยู่ ขอให้มี ปุ่มแก้ไข ได้ด้วย และทำงานได้จริง

# data[].attributes.attachment_link.title
ระบบจัดการกิจกรรมการศึกษา

# data[].attributes.headline
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.subject
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.body
หัวข้อ: การพัฒนาเว็บแอปพลิเคชัน ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

สถานการณ์โจทย์:

เนื่องจากวิทยาลัยมีการจัดกิจกรรมหลากหลายตลอดปี เช่น ปฐมนิเทศ ทัศนศึกษา งานกีฬา และกิจกรรมชมรมต่าง ๆ ซึ่งจำเป็นต้องบันทึก

ข้อมูลกิจกรรมและแนบหลักฐานเพื่อใช้รายงานต่อผู้บริหารในแต่ละภาคเรียน แต่ปัจจุบันยังไม่มีระบบกลางในการเก็บข้อมูล จึงเกิดปัญหา

การสืบค้นและติดตามย้อนหลัง คณะกรรมการจึงต้องการให้พัฒนาเว็บแอปพลิเคชันเพื่อบันทึกกิจกรรม พร้อมแนบไฟล์ภาพและรายละเอียด

อื่น ๆ ได้อย่างเป็นระบบ

ฟีเจอร์ที่ต้องมีในระบบ:

• ใช้ font คือ Kanit ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้า บันทึกกิจกรรม

• - ชื่อระดับชั้น (ปวช. , ปวส.)

• - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,

• คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก

,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

• (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

o ชื่อกิจกรรม

o วันที่จัด (เป็นรูปแบบปฎิทินประเทศไทย 2568-2-3 )

o ประเภทกิจกรรม (เลือกได้ : กิจกรรมหลักสูตร, กิจกรรมชมรม, กิจกรรมภายนอก ดึงข้อมูลมาจาก หน้า เพิ่มชื่อกิจกรรม )

o รายละเอียด (textarea)

o แนบไฟล์ภาพได้หลายไฟล์ (Preview ได้ก่อนอัปโหลด)

• หน้า เพิ่มปีการศึกษา / ภาคเรียน แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• หน้า เพิ่มชื่อกิจกรรม แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• จัดเก็บข้อมูลลงฐานข้อมูล

• แสดงรายการกิจกรรมย้อนหลัง

• ระบบสามารถค้นหา/กรองตามปี/ภาคเรียน/ประเภทกิจกรรมได้

• สามารถแนบไฟล์ภาพได้ และระบบต้องสามารถรองรับการแนบไฟล์ภาพได้หลายไฟล์ และต้องสามารถ แสดงภาพตัวอย่างก่อน

อัปโหลด (preview)

คำสั่ง จากสถานการณ์ที่กำหนดข้างต้นนี้ ให้พัฒนาเว็บแอปพลิเคชั่น สำหรับการแก้ปัญหานี้

1. สร้างเว็บแอปพลิเคชั่น

2. จัดเก็บข้อมูลลงฐานข้อมูล

3. เผยแพร่สำหรับการนำไปใช้งาน

Footer

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวอาทิตยา แก้วเทศ ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog, modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยัน

การลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON JSON ที่ถูกต้อง ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน EonData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbx_9gKNF7xwC1zna_R5lSLa7Nen3e3KfzKs4NTHP9V5dpkzE-UXmCyn-HqLp1kLLl9eOQ/exec

8. SHEET ID: 17X0Zpte5mGaZYIeo8oA37FHU-AegDM-uOl201ebABOg

9. FOLDER ID :11YtOe-ifu8zglgMZuQxDdXuXw5OHb5l2

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง ดำ แดง ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

สามารถบันทึก ข้อมูล และภาพ ลง Google ซีต และ Google ไดรฟ์ ได้ด้วย

# data[].attributes.attachment_link.title
พัฒนาเว็บแอปพลิเคชัน ActiDoc สำหรับจัดเก็บข้อมูลกิจกรรมวิทยาลัย

# data[].attributes.headline
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.subject
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.body
สร้างเว็บแอปฯ คำสั่ง prompt มีดังนี้ :

ชื่อระบบ : ภาษาไทย

ระบบข่าวสารประชาสัมพันธ์ วิทยาลัยอาชีวศึกษานครสวรรค์

ภาษาอังกฤษ

Information NEWs Nakhonsawan Vocational College.

รายละเอียดประกอบด้วย

1.กำหนดให้มี .setFaviconUrl('https://snkvc.ac.th/wp

content/uploads/2024/06/%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2

%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81

%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%B2%E0%B8%8A%E0%B8%B5

%E0%B8%A7%E0%B8%A8%E0%B8%B6%E0%B8%81%E0%B8%A9%E0%B8%B2.png')

2. กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

3. ให้หน้าเว็บมีความสวยงามทันสมัย ส่วนการแจ้งเตือน หรือกล่องโต้ตอบกับผู้ใช้ให้ใช้ sweet alert หน้าเว็บใช้ tailwind css ในการ

ออกแบบให้สวยงาม โดยมี ui เว็บ Magazine สวยงาม ใช้งานง่าย มีไอคอนประกอบ ใช้ font คือ Kanit ทั้งระบบ

4.รองรับการใช้งานทุกอุปกรณ์ แบบ responsive (มือถือแท็บเล็ต คอมพิวเตอร์)

5.โดยมีช่องกรอกข้อมูล หรือปุ่มต่าง ๆ กำหนดให้สีข้อความ แตกต่างกับสีตัวอักษร ชัดเจน อ่านง่าย

องค์ประกอบหน้าจอระบบ ดังนี้

หน้าแรก เป็นหน้าข่าวสารประชาสัมพันธ์ -

กำหนดให้ การ์ดข่าว ให้แสดง ชื่อข่าว หมวดหมู่ ภาพประจำเรื่อง และเนื้อข่าวโดยย่อ มีปุ่มอ่านเพิ่มเติม - - - - - - - - - -

มีตัวกรองเพื่อเลือกดูข่าวตามหมวดหมู่ อยู่ด้านบนขวาของหน้า โดยค่า default คือ ทั้งหมด

หน้าสอง เป็นหน้าฟอร์มบันทึกข้อมูลข่าวสาร สำหรับผู้ดูแลระบบเท่านั้น โดยต้องใส่รหัสผ่าน 1234

โดยมีช่องกรอกข้อมูล ในแบบฟอร์มดังนี้

ชื่อข่าว (textinput)

หมวดหมู่ข่าว (dropdown ดึงข้อมูลหมวดหมู่จากหน้าจัดการข้อมูล)

เนื้อข่าว (textinput)

ภาพข่าวหรือภาพวารสาร (อัพโหลดหรือลากวางได้ จำนวนไม่เกิน 4 ภาพ)

กำหนดรูปประจำข่าว (อัพโหลดหรือลากวางได้ จำนวน 1 ภาพ เพื่อแสดงเป็นตัวอย่างในหน้าข่าวสารประชาสัมพันธ์)

หน้าสาม เป็นหน้าจัดการข้อมูล (รูปแบบ CRUD)

แสดงข่าวทั้งหมดในตาราง พร้อมปุ่ม แก้ไข ลบ

แสดงส่วนจัดการหมวดหมู่

สามารถเพิ่ม ลบ แก้ไข หมวดหมู่ (รูปแบบ CRUD)

หน้าเพิ่มข่าวและจัดการข้อมูล แสดงเป็น popup

เข้าสู่ระบบ และ ออกจากระบบ และมีปุ่มกลับหน้าหลัก

- Footer

ใช้ข้อความ “© 2025 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | วิทยาลัยอาชีวศึกษานครสวรรค์ | ผู้พัฒนาระบบ : นางสาวอาทิตยา แก้วเทศ ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog ,

modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดใน

กรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

8. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

9. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

10. ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

11. ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

12.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีฟ้า ส้ม ม่วง ไล่ระดับ แบบมืออาชีพ

13.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ

14. ทดสอบระบบด้วย ข้อมูลแบบ local storage ให้ใช้งานได้จริง

15. มีระบบการบันทึกข้อมูลแบบถาวร เมื่อปิดและเปิดใหม่ข้อมูลยังอยู่

# data[].attributes.attachment_link.title
Nvoc ข่าวประชาสัมพันธ์ - เว็บแอป (html เดียว, Tailwind + Sweet Alert + Local Storage + Base64 Upload)

# data[].attributes.attachment_link.description
ChatGPT helps you get answers, find inspiration and be more productive. It is free to use and easy to try. Just ask and ChatGPT can help with writing, learning, brainstorming and more.

# data[].attributes.headline
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง สทท.2/1

# data[].attributes.subject
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง สทท.2/1

# data[].attributes.body
ผู้จัดทำ : นางสาวอาทิตยา แก้วเทศ

prompt

1.สร้างฟอร์มบันทึกข้อมูลนักศึกษา ห้อง สทท.2/1 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล

โดยมีชื่อ "นางสาวอาทิตยา แก้วเทศ" เป็นผู้พัฒนาระบบ อยู่ด้านล่างแบบฟอร์ม

รายละเอียดแบบฟอร์ม ประกอบด้วย

คำแนะนำชื่อ (นาย,นางสาว)

ชื่อ

สกุล

ชื่อเล่น

รูปโปรไฟล์

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัปเดต และลบ)ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชั่นการลบ

ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser

มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbzgiZ8ybidZk2i54hhkw6JT80ZZznw9PqQd23dLAMz0Okuy5a2mAeegDxQxLtANIX6h_Q/exec

7.SHEET_ID: 1j2P56es0htK6Ci3UvzW4IriPGYN09S3iXF_FFCqnk7U

8.FOLDER_ID: 1Id3BTa13H3nQvnMyg3Gmxm-nfSRbi9Wn

9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก url ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

12.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
การสร้างระบบบันทึกข้อมูลนักศึกษา

# data[].attributes.headline
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.subject
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.body
Prompt: ระบบบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

ผู้จัดทำ:

👨‍💻 นางสาวอาทิตยา แก้วเทศ(ผู้พัฒนาระบบ)

1. แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน

แสดงชื่อผู้พัฒนา (นางสาวอาทิตยา แก้วเทศ) พร้อมอิโมจิรูป 💻 อยู่ด้านข้างของฟอร์ม

รายการข้อมูลที่ต้องมีในฟอร์ม:

รหัสนักศึกษา (11 หลักเท่านั้น)

ดึงตัวอย่างข้อมูล รหัสนักศึกษา + ชื่อ-นามสกุล จาก Google Sheet

แสดงเฉพาะข้อมูลล่าสุดด้านข้าง

คำนำหน้าชื่อ (นาย, นางสาว)

ชื่อ

นามสกุล

ชื่อเล่น

ระดับชั้น (ปวช., ปวส.)

วันที่เยี่ยมบ้าน (เลือกจากปฏิทิน → ย้อนหลังถึงปัจจุบัน)

บันทึกข้อมูลการเยี่ยมบ้าน (ข้อความ)

รูปเยี่ยมบ้าน (อัปโหลดได้ 4 รูป)

รูปนักศึกษา

2. การทำงาน CRUD

รองรับ เพิ่ม / อ่าน / อัปเดต / ลบ ข้อมูลได้ครบถ้วน

ฟังก์ชันลบ:

ใช้ Custom Modal Dialog (แทน confirm() ของ browser)

มีการยืนยันก่อนลบจริง

จัดการข้อผิดพลาดกรณีข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

3. การอัปโหลดไฟล์

จัดการไฟล์โดยแปลงเป็น Base64 ใน Browser

ส่งข้อมูลเป็น Base64 string + ชื่อไฟล์ + MIME type

ใน Apps Script:

ถอดรหัส Base64

สร้างไฟล์เก็บใน Google Drive

4. การเชื่อมต่อ Apps Script

ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากับ Apps Script ได้ดีกว่า

URL:https://script.google.com/macros/s/AKfycbzjvG-gMjBJXpeTKY7FArrHr3aA_siGpxO74_u0NE58l22v4kKFrpH7lvNsmFDLVIhF/exec

SHEET_ID: 1O99yeFtr1ivSihRW8fjn1x3ehBlH4QNHel3i8XBet6Y

FOLDER_IDs:

รูปเยี่ยมบ้าน 1 → 1EGIKvTruIqLEO5Zw4DC98dVozjhq61LX

รูปเยี่ยมบ้าน 2 → 1UYJ_Mqd3QxrPxTjq5-AW7OAgjY8SDu_M

รูปเยี่ยมบ้าน 3 → 1vTnQmsfQkCyzD1o_PzJhYyq48w1DtAXK

รูปเยี่ยมบ้าน 4 → 1DtdCDChGAP-LmKXJ_tWiMUm9TFLZroxv

รูปนักศึกษา →1ZH230SQVFftSSZwyklP6BWObJrSQxSgC

5. จัดการ Google Sheet

ตรวจสอบว่า Sheet มีอยู่หรือไม่

ถ้าไม่มี → ให้สร้างใหม่พร้อมหัวตาราง

เก็บ URL ของรูปนักศึกษาในรูปแบบ:

https://lh3.googleusercontent.com/d/<fileId>

6. UI/UX และการโต้ตอบ

ใช้ SweetAlert

แสดงสถานะขณะรอการบันทึก

แจ้งเตือนเมื่อบันทึกสำเร็จ

โครงสร้างเว็บไซต์:

ออกแบบเป็น Tab Menu

ปุ่ม ดูตัวอย่างสรุปข้อมูล (พร้อมภาพ) → แสดงแบบ Pop-up

โทนสีเว็บไซต์:

ไล่ระดับสี ม่วง–แดง

ดีไซน์แบบ มืออาชีพ

7. สรุปข้อมูล

กราฟ:

แสดงผลแยกตาม เพศ และ ระดับชั้น

ตารางสรุป:

แสดงข้อมูล → รูปนักศึกษา, ชื่อ, นามสกุล

8. โค้ดที่ต้องแสดง

เมื่อสร้างระบบเสร็จ → แสดงโค้ด Google Apps Script (GS) ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.headline
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.subject
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.body
สร้างเว็บแอปฯ คำสั่ง prompt มีดังนี้ :

ชื่อระบบ : ภาษาไทย

ระบบข่าวสารประชาสัมพันธ์ วิทยาลัยอาชีวศึกษานครสวรรค์

ภาษาอังกฤษ

Information NEWs Nakhonsawan Vocational College.

รายละเอียดประกอบด้วย

1.กำหนดให้มี .setFaviconUrl('https://snkvc.ac.th/wp

content/uploads/2024/06/%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2

%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81

%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%B2%E0%B8%8A%E0%B8%B5

%E0%B8%A7%E0%B8%A8%E0%B8%B6%E0%B8%81%E0%B8%A9%E0%B8%B2.png')

2. กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

3. ให้หน้าเว็บมีความสวยงามทันสมัย ส่วนการแจ้งเตือน หรือกล่องโต้ตอบกับผู้ใช้ให้ใช้ sweet alert หน้าเว็บใช้ tailwind css ในการ

ออกแบบให้สวยงาม โดยมี ui เว็บ Magazine สวยงาม ใช้งานง่าย มีไอคอนประกอบ ใช้ font คือ Kanit ทั้งระบบ

4.รองรับการใช้งานทุกอุปกรณ์ แบบ responsive (มือถือแท็บเล็ต คอมพิวเตอร์)

5.โดยมีช่องกรอกข้อมูล หรือปุ่มต่าง ๆ กำหนดให้สีข้อความ แตกต่างกับสีตัวอักษร ชัดเจน อ่านง่าย

องค์ประกอบหน้าจอระบบ ดังนี้

หน้าแรก เป็นหน้าข่าวสารประชาสัมพันธ์ -

กำหนดให้ การ์ดข่าว ให้แสดง ชื่อข่าว หมวดหมู่ ภาพประจำเรื่อง และเนื้อข่าวโดยย่อ มีปุ่มอ่านเพิ่มเติม - - - - - - - - - -

มีตัวกรองเพื่อเลือกดูข่าวตามหมวดหมู่ อยู่ด้านบนขวาของหน้า โดยค่า default คือ ทั้งหมด

หน้าสอง เป็นหน้าฟอร์มบันทึกข้อมูลข่าวสาร สำหรับผู้ดูแลระบบเท่านั้น โดยต้องใส่รหัสผ่าน 1234

โดยมีช่องกรอกข้อมูล ในแบบฟอร์มดังนี้

ชื่อข่าว (textinput)

หมวดหมู่ข่าว (dropdown ดึงข้อมูลหมวดหมู่จากหน้าจัดการข้อมูล)

เนื้อข่าว (textinput)

ภาพข่าวหรือภาพวารสาร (อัพโหลดหรือลากวางได้ จำนวนไม่เกิน 4 ภาพ)

กำหนดรูปประจำข่าว (อัพโหลดหรือลากวางได้ จำนวน 1 ภาพ เพื่อแสดงเป็นตัวอย่างในหน้าข่าวสารประชาสัมพันธ์)

หน้าสาม เป็นหน้าจัดการข้อมูล (รูปแบบ CRUD)

แสดงข่าวทั้งหมดในตาราง พร้อมปุ่ม แก้ไข ลบ

แสดงส่วนจัดการหมวดหมู่

สามารถเพิ่ม ลบ แก้ไข หมวดหมู่ (รูปแบบ CRUD)

หน้าเพิ่มข่าวและจัดการข้อมูล แสดงเป็น popup

เข้าสู่ระบบ และ ออกจากระบบ และมีปุ่มกลับหน้าหลัก

- Footer

ใช้ข้อความ “© 2025 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | วิทยาลัยอาชีวศึกษานครสวรรค์ | ผู้พัฒนาระบบ : นางสาววัชรีพร ช้างสุวรรณ์ ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog ,

modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดใน

กรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

8. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

9. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

10. ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

11. ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

12.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีฟ้า ส้ม ม่วง ไล่ระดับ แบบมืออาชีพ

13.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ

14. ทดสอบระบบด้วย ข้อมูลแบบ local storage ให้ใช้งานได้จริง

15. มีระบบการบันทึกข้อมูลแบบถาวร เมื่อปิดและเปิดใหม่ข้อมูลยังอยู่

# data[].attributes.attachment_link.title
nwvoc new - ข่าวประชาสัมพันธ์

# data[].attributes.body
Gemini พรอมต์ที่ใช้งานได้จริง 1.สร้างเว็บแอป Visit Home2025 บันทึกข้อมูลลงชีตด้วย App Script โดยให้มี ชื่อ “วัชรีพร ช้างสุวรรณ์” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย - รหัสนักศึกษา (โดยกำหนดให้ใส่ตัวเลข 11 หลักเท่านั้น ห้ามใส่เกิน) - คำนำหน้าชื่อ (นาย, นางสาว) - ชื่อ - นามสกุล - ระดับชั้น (ปวช. , ปวส.) - ชั้นปีที่ (ถ้าเลือก ปวช. จะมีตัวเลือก 1 , 2 ,3 ) (ถ้าเลือก ปวส. จะมีตัวเลือก 1, 2) - วันที่บันทึกข้อมูลเยี่ยมบ้าน (แสดงเป็นปฏิทินให้เลือก ห้ามเลือกวันล่วงหน้า) - บันทึกข้อมูลการเยี่ยมบ้าน - รูปเยี่ยมบ้านรูปที่ 1 - รูปเยี่ยมบ้านรูปที่ 2 2.ใช้ form submit และ google.script.run 3.ใช้ tailwindcss แบบ Internal และกำหนดฟ้อนต์ Noto Sans Thai 4.สร้างหัวคอลัมน์ตาราง และชื่อชีตอัตโนมัติ 5.ใช้ Sweet Alert ในการแสดงสถานะขณะบันทึกข้อมูลและบันทึกสำเร็จ 6. SPREADSHEET_ID = 1IzWDtvAgIYnjI96ElLUftoxplaphrt6f8ZzGqXIze4k 7. FOLDER_ID 1 : 1EoJGv_wyHw1_ktXY6E4Y_JQIs1WZTsYq 8. FOLDER_ID 2 : 1nP2WZsOJaXcPmuh_T89tFrJMXZv6AclS 9.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 10.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 11.ตกแต่งแบบฟอร์ม html CSS โทนสีส้ม น้ำเงิน เทา ไล่ระดับแบบมืออาชีพ 12. เมื่อสร้างระบบเสร็จแล้วให้แสดงไฟล์ 2 ไฟล์ คือ code.gs และ index.html 13. อธิบายการนำไปสร้างทุกขั้นตอน

Gemini พรอมต์ที่ใช้งานได้จริง 1.สร้างเว็บแอป Visit Home2025 บันทึกข้อมูลลงชีตด้วย App Script โดยให้มี ชื่อ “วัชรีพร ช้างสุวรรณ์” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย - รหัสนักศึกษา (โดยกำหนดให้ใส่ตัวเลข 11 หลักเท่านั้น ห้ามใส่เกิน) - คำนำหน้าชื่อ (นาย, นางสาว) - ชื่อ - นามสกุล - ระดับชั้น (ปวช. , ปวส.) - ชั้นปีที่ (ถ้าเลือก ปวช. จะมีตัวเลือก 1 , 2 ,3 ) (ถ้าเลือก ปวส. จะมีตัวเลือก 1, 2) - วันที่บันทึกข้อมูลเยี่ยมบ้าน (แสดงเป็นปฏิทินให้เลือก ห้ามเลือกวันล่วงหน้า) - บันทึกข้อมูลการเยี่ยมบ้าน - รูปเยี่ยมบ้านรูปที่ 1 - รูปเยี่ยมบ้านรูปที่ 2 2.ใช้ form submit และ google.script.run 3.ใช้ tailwindcss แบบ Internal และกำหนดฟ้อนต์ Noto Sans Thai 4.สร้างหัวคอลัมน์ตาราง และชื่อชีตอัตโนมัติ 5.ใช้ Sweet Alert ในการแสดงสถานะขณะบันทึกข้อมูลและบันทึกสำเร็จ 6. SPREADSHEET_ID = 1IzWDtvAgIYnjI96ElLUftoxplaphrt6f8ZzGqXIze4k 7. FOLDER_ID 1 : 1EoJGv_wyHw1_ktXY6E4Y_JQIs1WZTsYq 8. FOLDER_ID 2 : 1nP2WZsOJaXcPmuh_T89tFrJMXZv6AclS 9.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 10.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 11.ตกแต่งแบบฟอร์ม html CSS โทนสีส้ม น้ำเงิน เทา ไล่ระดับแบบมืออาชีพ 12. เมื่อสร้างระบบเสร็จแล้วให้แสดงไฟล์ 2 ไฟล์ คือ code.gs และ index.html 13. อธิบายการนำไปสร้างทุกขั้นตอน

# data[].attributes.headline
นางสาวอรรจมินทร์ พรมพิทักษ์

# data[].attributes.subject
นางสาวอรรจมินทร์ พรมพิทักษ์

# data[].attributes.headline
ระบบลงนามถวายพระพร

# data[].attributes.subject
ระบบลงนามถวายพระพร

# data[].attributes.body
https://nwvoc.my.canva.site/dagw5fw3rzi

นางสาวอรรจมินทร์ พรมพิทักษ์

# data[].attributes.attachment_link.title
ออกแบบเว็บไซต์ถวายพระพรแด่สมเด็จพระนางเจ้าสิริกิติ์

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.body
ฟีเจอร์ที่ต้องมีในระบบ :

• กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

• ใช้ font คือ Itim ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ

TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ

โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,

เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

ชื่อกิจกรรม

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - -

วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.)

ประเภทกิจกรรม

(เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม )

รายละเอียด (textarea)

แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น)

TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup

TAB 3 : หน้าเพิ่มชื่อกิจกรรม -

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) -

สามารถค้นหา - - - - Footer

กรองตามปีการศึกษา

ภาคเรียน

ประเภทกิจกรรม

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาววัชรีพร ช้างสุวรรณ์”

ฟังก์ชันเพิ่มเติม :

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ

ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbw3IvrXsTlzrP4COG9vbEzukwKS3EATaKTb_4C3UPu9G7tHQPHtdfTPfCvvIqwKnLkQZA/exec

8. SHEET_ID : 1S4FC6wfEnMVoSbDIyEeF_lSDTHsYG4pY2B8nuflYHiY

9. FOLDER_ID IT : 18X8NiskoAcwgzndlXIMg5l8UKxou8DW1

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง แดง ขาว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

15.ปีการศึกษาที่มีอยู่เมื่อเพิ่มแล้วและประเภทกิจกรรมที่มีอยู่ ขอให้มี ปุ่มแก้ไข ได้ด้วย และทำงานได้จริง

16.บันทึกข้อมูลไม่ต้องใส่รหัสผ่าน แต่ตอนเพิ่มปีการศึกษากับเพิ่มชื่อกิจกรรมต้องใส่รหัสผ่าน

# data[].attributes.attachment_link.title
การพัฒนาระบบจัดการกิจกรรมโรงเรียน

# data[].attributes.headline
สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์

# data[].attributes.subject
สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์

# data[].attributes.body
ผู้จัดทำ : นางสาววัชรีพร ช้างสุวรรณ์

prompt

1. สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์โรงเรียน

ของวิทยาลัยอาชีวศึกษานครสวรรค์

โดยให้มี ชื่อ “นางสาววัชรีพร ช้างสุวรรณ์" เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม

รายละเอียดประกอบด้วย

รหัสพรรณไม้ (มีอักษรตัว T นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น)

แสดงตัวอย่างการหัสพรรณไม้ และชื่อภาษาไทย ให้เห็นในรูปแบบตาราง อยู่ด้านล่างด้วย

ชื่อภาษาไทย

ชื่อทางวิทยาศาสตร์

ลักษณะทั่วไป

ประเภทของพรรณไม้ (ไม้คลุมดิน,ไม้ล้มลุก,ไม้พุ่ม,ไม้ยืนต้น,ไม้เลื้อย,ไม้ประดับ)

อัพโหลดรูปภาพพรรณไม้

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL:https://script.google.com/macros/s/AKfycbxPYoZJT-OkOHuDoGsMOhkcz-8_H96wql_k1Hr8sfv8qrsth2C-TKvrj0cKZEqJQsYGhg/exec

7.SHEET_ID: 1z607SPgaCEL2JeKWiEdyeIrpfBTbhAvi_VLs-uW5CDI

8.FOLDER_ID: 14hpJAlPGhnKdnlzD278yeHLF42jAqWda

9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

12.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU

13.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีเขียว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
แบบฟอร์มบันทึกข้อมูลพรรณไม้สำหรับสวนพฤกษศาสตร์

# data[].attributes.headline
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง สทท.2/1

# data[].attributes.subject
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง สทท.2/1

# data[].attributes.body
ผู้จัดทำ : นางสาววัชรีพร ช้างสุวรรณ์

prompt

1.สร้างฟอร์มบันทึกข้อมูลนักศึกษา ห้อง สทท.2/1 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล

โดยมีชื่อ "นางสาววัชรีพร ช้างสุวรรณ์" เป็นผู้พัฒนาระบบ อยู่ด้านล่างแบบฟอร์ม

รายละเอียดแบบฟอร์ม ประกอบด้วย

คำแนะนำชื่อ (นาย,นางสาว)

ชื่อ

สกุล

ชื่อเล่น

รูปโปรไฟล์

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัปเดต และลบ)ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชั่นการลบ

ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser

มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbyzEJHNkNG-HaSo3I1tsuzTL-nZhFGX54Aw6MA0rVv5in_iARvZsu6Iq-9lOUWhnt7hBA/exec

7.SHEET_ID: 1pXangGa4GqazId3_q4SnuLCzGpTUg5mwPweabuPdHcs

8.FOLDER_ID: 1p-in_yys3hqqopy3dDYvHFJWyn8OC_N-

9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก url ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

12.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
การพัฒนาระบบฟอร์มบันทึกข้อมูลนักศึกษา

# data[].attributes.headline
ระบบแจ้งซ่อม IT & CoM

# data[].attributes.subject
ระบบแจ้งซ่อม IT & CoM

# data[].attributes.body
แบบฟอร์มแจ้งซ่อม Online 2025

ผู้พัฒนาระบบ นางสาววัชรีพร ช้างสุวรรณ์

ส่วนที่ 1: ข้อมูลผู้แจ้ง

ชื่อ-สกุล:

แผนก: (ฝ่ายบุคคล,ฝ่ายบัญชี,ฝ่ายการเงิน,สำนักผู้บริหาร,ฝ่ายขาย)

เบอร์ติดต่อ: (แก้ปัญหาเลขศูนย์ แสดงให้ครบทั้ง 10 ตัว ใน google sheets ด้วย)

สถานที่/ห้อง: (ห้องประชุม , สำนักงาน , ห้องพักรับรอง)

ส่วนที่ 2: รายละเอียดปัญหา

หัวข้อปัญหา:

ประเภทปัญหา: (แสงสว่าง, น้ำประปา , เครื่องปรับอากาศ,ระบบเสียง )

กรุณาอธิบายปัญหาโดยละเอียด:

แนบไฟล์ภาพอุปกรณ์ที่เสีย

ส่วนที่ 3 ระดับความเร่งด่วนประเมินจากผู้แจ้ง (เลือก 1 ข้อเท่านั้น)

- สูง (High) – ปัญหานี้ทำให้ไม่สามารถทำงานหลักได้เลย

- กลาง (Medium) - ทำงานได้แต่ไม่สะดวก หรือมีผลกระทบกับงานบางส่วน

- ต่ำ (Low) - ยังทำงานได้ตามปกติ แต่ต้องการให้แก้ไข/ตรวจสอบ

ลงวันที่แจ้งข้อมูล (เลือกปฏิทิน ห้ามเลือกวันล่วงหน้า)

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล

และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2.กำหนดให้ Modal body มี scroll ให้ใช้งานได้

3. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

4. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

5.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

6.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

7.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbzpvQUqAptAmIGzOioifPHBGIMbEkzi1zogPfUb6CW2ksP9ryWYvylbgrra3ALGDwZUXw/exec

8.SHEET_ID: 1bMuhquM2jD2EbBDWRVicYi7DNTz_jXbcbFS6rj4ticU

9.FOLDER_ID IT : 1BTL9QE5xJDAU11RS95SG_uX6TVGmdvpA

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีส้ม แดง ขาว ไล่ระดับแบบมืออาชีพ

14.เพิ่ม tab memu กราฟสรุปข้อมูล และ รายการแจ้งซ่อม ให้ด้วย

15.ทำให้ระบบใช้งานได้จริง มีทั้ง เพิ่ม อ่าน อัพเดต และลบได้

16.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
แบบฟอร์มแจ้งซ่อม Online 2025

# data[].attributes.headline
แบบฟอร์มข้อมูลนักศึกษา

# data[].attributes.subject
แบบฟอร์มข้อมูลนักศึกษา

# data[].attributes.body
ผู้จัดทำ : นางสาววัชรีพร ช้างสุวรรณ์

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL :https://script.google.com/macros/s/AKfycbxg5_pEjLzNXjQeJGcfo_C5SACxROBT13EOjT9ODo7DXCarqoiGDROyAUUCQJeC3JI4zw/exec

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีเทา สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วยผู้จัดทำ : นางสาววัชรีพร ช้างสุวรรณ์

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL :https://script.google.com/macros/s/AKfycbxg5_pEjLzNXjQeJGcfo_C5SACxROBT13EOjT9ODo7DXCarqoiGDROyAUUCQJeC3JI4zw/exec

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีเทา สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
สร้างฟอร์มเก็บข้อมูลนักศึกษาแบบ JSONP

# data[].attributes.headline
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ระดับชั้น ปวส.

# data[].attributes.subject
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ระดับชั้น ปวส.

# data[].attributes.body
ผู้จัดทำ : วัชรีพร ช้างสุวรรณ์

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL : https://script.google.com/macros/s/AKfycbwgSvEEgMd5Ba6P8hefbxrfTCXD2iXqYPHbEuh2I486hfzpDE4fqi8UiYuYOeV5KzDFjw/exec

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีฟ้า สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
สร้างฟอร์มสำหรับเก็บข้อมูลนักศึกษา

# data[].attributes.headline
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.subject
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.body
Prompt: ระบบบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

ผู้จัดทำ:

👨‍💻 นางสาววัชรีพร ช้างสุวรรณ์(ผู้พัฒนาระบบ)

1. แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน

แสดงชื่อผู้พัฒนา (นางสาววัชรีพร ช้างสุวรรณ์) พร้อมอิโมจิรูป 💻 อยู่ด้านข้างของฟอร์ม

รายการข้อมูลที่ต้องมีในฟอร์ม:

รหัสนักศึกษา (11 หลักเท่านั้น)

ดึงตัวอย่างข้อมูล รหัสนักศึกษา + ชื่อ-นามสกุล จาก Google Sheet

แสดงเฉพาะข้อมูลล่าสุดด้านข้าง

คำนำหน้าชื่อ (นาย, นางสาว)

ชื่อ

นามสกุล

ชื่อเล่น

ระดับชั้น (ปวช., ปวส.)

วันที่เยี่ยมบ้าน (เลือกจากปฏิทิน → ย้อนหลังถึงปัจจุบัน)

บันทึกข้อมูลการเยี่ยมบ้าน (ข้อความ)

รูปเยี่ยมบ้าน (อัปโหลดได้ 4 รูป)

รูปนักศึกษา

2. การทำงาน CRUD

รองรับ เพิ่ม / อ่าน / อัปเดต / ลบ ข้อมูลได้ครบถ้วน

ฟังก์ชันลบ:

ใช้ Custom Modal Dialog (แทน confirm() ของ browser)

มีการยืนยันก่อนลบจริง

จัดการข้อผิดพลาดกรณีข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

3. การอัปโหลดไฟล์

จัดการไฟล์โดยแปลงเป็น Base64 ใน Browser

ส่งข้อมูลเป็น Base64 string + ชื่อไฟล์ + MIME type

ใน Apps Script:

ถอดรหัส Base64

สร้างไฟล์เก็บใน Google Drive

4. การเชื่อมต่อ Apps Script

ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากับ Apps Script ได้ดีกว่า

URL:https://script.google.com/macros/s/AKfycbxJQIuveGGPeup6UtrnvPPsq5YvWU3pBWy8LR8aVx9_Cdhf9I5TkeoTRUVJ6cU1Jpunag/exec

SHEET_ID: 1OBQSY6hwCOIZqO8EDnvoXTRtARMwpHbhxj8hOoo84u0

FOLDER_IDs:

รูปเยี่ยมบ้าน 1 → 1TmNII3-CulQ8saK8BVjqXloM2a48thtl

รูปเยี่ยมบ้าน 2 → 1uvtL4jxqD7w9x9Wod-sabmUerPReArts

รูปเยี่ยมบ้าน 3 → 1pDTju4ObKHUPSNy78hxYZ7ara-tQaXbo

รูปเยี่ยมบ้าน 4 → 19YC4XwvDY70Ni_XDC36giBa91JQ1Po7i

รูปนักศึกษา → 1isOb9Owzqby0nK33GpN0GEZyN3YGZoyV

5. จัดการ Google Sheet

ตรวจสอบว่า Sheet มีอยู่หรือไม่

ถ้าไม่มี → ให้สร้างใหม่พร้อมหัวตาราง

เก็บ URL ของรูปนักศึกษาในรูปแบบ:

https://lh3.googleusercontent.com/d/<fileId>

6. UI/UX และการโต้ตอบ

ใช้ SweetAlert

แสดงสถานะขณะรอการบันทึก

แจ้งเตือนเมื่อบันทึกสำเร็จ

โครงสร้างเว็บไซต์:

ออกแบบเป็น Tab Menu

ปุ่ม ดูตัวอย่างสรุปข้อมูล (พร้อมภาพ) → แสดงแบบ Pop-up

โทนสีเว็บไซต์:

ไล่ระดับสี ม่วง–แดง

ดีไซน์แบบ มืออาชีพ

7. สรุปข้อมูล

กราฟ:

แสดงผลแยกตาม เพศ และ ระดับชั้น

ตารางสรุป:

แสดงข้อมูล → รูปนักศึกษา, ชื่อ, นามสกุล

8. โค้ดที่ต้องแสดง

เมื่อสร้างระบบเสร็จ → แสดงโค้ด Google Apps Script (GS) ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01

# data[].attributes.headline
แบบฟอร์มข้อมูลเยี่ยมบ้าน

# data[].attributes.subject
แบบฟอร์มข้อมูลเยี่ยมบ้าน

# data[].attributes.body
ผู้จัดทำ : นางสาวอาทิตยา แก้วเทศ

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL : https://script.google.com/macros/s/AKfycbwnVZCaj3DSAcPwvGN9hZGpRebK_KOUaxQbpWpH9ZPBX6wE7MoYEyB4R5F-AV4mYM0g/exec

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีเทา สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ฟอร์มเก็บข้อมูลนักศึกษา

# data[].attributes.headline
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ระดับชั้น ปวส.

# data[].attributes.subject
แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน ระดับชั้น ปวส.

# data[].attributes.body
ผู้จัดทำ : นางสาว อาทิตยา แก้วเทศ

prompt

สร้างฟอร์มสำหรับเก็บข้อมูลลงในชีต ดังนี้ :

คำนำหน้าชื่อ (นาย , นางสาว)

ชื่อ

นามสกุล

รหัสนักศึกษา

เลขที่ (เปลี่ยนเป็นรูปแบบ dropdown ที่มีตัวเลือกตั้งแต่ 01-40 เท่านั้น ทำให้ผู้ใช้ไม่สามารถกรอกค่าอื่นนอกเหนือจากที่กำหนดได้

สาขาวิชา (เปลี่ยนเป็นรูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ, การตลาด , การบัญชี ,การโรงแรม , โลจิสติกส์ , การจัดการสำนักงานดิจิทัล , คอมพิวเตอร์กราฟิก , การออกแบบ , แฟชั่นและสิ่งทอ , อาหารและโภชนาการ)

แบ่งสัดส่วนหน้าจอสำหรับการบันทึกข้อมูลให้เหมาะสม

โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL :https://script.google.com/macros/s/AKfycbw9-HJ-J8H59_D3iM5UiKl_enYHx02DxG7JLDGEVeopxWXLPnylXw1_UnDFh3t9XKWjww/exec

มีไอคอนอยู่ด้านหน้าช่องกรอกข้อมูล ตกแต่งให้เหมาะสม และ Code html CSS

สีน้ำเงินเข้ม สีฟ้า สีขาว ตกแต่งระดับมืออาชีพ

ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

เมื่อสร้างระบบเสร็จแล้ว ให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
สร้างฟอร์มเก็บข้อมูลนักศึกษาใน HTML/CSS

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.body
ฟีเจอร์ที่ต้องมีในระบบ :

• กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

• ใช้ font คือ Itim ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ

TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ

โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,

เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

ชื่อกิจกรรม

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - -

วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.)

ประเภทกิจกรรม

(เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม )

รายละเอียด (textarea)

แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น)

TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup

TAB 3 : หน้าเพิ่มชื่อกิจกรรม -

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) -

สามารถค้นหา - - - - Footer

กรองตามปีการศึกษา

ภาคเรียน

ประเภทกิจกรรม

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายธินกร ชวาลิตร”

ฟังก์ชันเพิ่มเติม :

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ

ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL :https://script.google.com/macros/s/AKfycbyp-5ht0OL0oU6usYwruh0Z-xMXHgkXDwXZn8noW3aNxJBqrbKkus_rrwUYebesTIY_RA/exec

8. SHEET_ID :1BBkGCuhJeUdqPCCYX4ggUVMgO_TkC2dBGgOHRTnlEX8

9. FOLDER_ID IT : 1TLHn-LN-Noi4oCJpz3rKFEi9QDubXZx2

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง แดง ขาว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

15.ปีการศึกษาที่มีอยู่เมื่อเพิ่มแล้วและประเภทกิจกรรมที่มีอยู่ ขอให้มี ปุ่มแก้ไข ได้ด้วย และทำงานได้จริง

# data[].attributes.attachment_link.title
การออกแบบและฟีเจอร์ระบบจัดการกิจกรรม

# data[].attributes.headline
คำขวัญห้องสมุด

# data[].attributes.subject
คำขวัญห้องสมุด

# data[].attributes.headline
ระบบแจ้งซ่อม IT & CoM

# data[].attributes.subject
ระบบแจ้งซ่อม IT & CoM

# data[].attributes.body
ระบบแจ้งซ่อม แบบฟอร์มแจ้งปัญหา IT ผู้พัฒนาระบบ รัฐภูมิ พรมจรรยา ส่วนที่ 1: ข้อมูลผู้แจ้ง ชื่อ-สกุล: แผนก: (ฝ่ายบุคคล,ฝ่ายบัญชี,ฝ่ายการเงิน,สำนักผู้บริหาร,ฝ่ายขาย) เบอร์ติดต่อ: สถานที่/ห้อง: (ห้องประชุม , สำนักงาน , ห้องพักรับรอง) ส่วนที่ 2: รายละเอียดปัญหา หัวข้อปัญหา: ประเภทปัญหา: (แสงสว่าง, น้ำประปา , เครื่องปรับอากาศ,ระบบเสียง ) กรุณาอธิบายปัญหาโดยละเอียด: แนบไฟล์ภาพอุปกรณ์ที่เสีย ส่วนที่ 3 ระดับความเร่งด่วนประเมินจากผู้แจ้ง (เลือก 1 ข้อเท่านั้น) - สูง (High) – ปัญหานี้ทำให้ไม่สามารถทำงานหลักได้เลย - กลาง (Medium) - ทำงานได้แต่ไม่สะดวก หรือมีผลกระทบกับงานบางส่วน - ต่ำ (Low) - ยังทำงานได้ตามปกติ แต่ต้องการให้แก้ไข/ตรวจสอบ ลงวันที่แจ้งข้อมูล (เลือกปฏิทิน ห้ามเลือกวันล่วงหน้า) สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbwreJgfEcccUZxRPZAvUTY8pFFAiXodccGuIHtTdu-5hwW1iLlP49mGefi-qZf5H6-HYA/exec 7.SHEET_ID: 1Iu_gqiLGupf7knz0D2YnJ_fvdPd8tDNIc2rmjRz2sdA 8.FOLDER_ID IT : 1fle09PN_Vy-L-lhL35dWAnO-pRhWJwDx 11.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 12.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 13.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 15.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วงเข้ม เทา ขาว ไล่ระดับแบบมืออาชีพ 17.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

พบปัญหา เกิดข้อผิดพลาด Failed to fetch

ทำออกมาได้สวยมากครับ ทีนี้ช่วยเพิ่มระบบกราฟเข้าไปด้วย

ช่วยสร้างกราฟให้หน่อย

# data[].attributes.attachment_link.title
ระบบแจ้งซ่อม IT แบบฟอร์มและการพัฒนา

# data[].attributes.headline
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง สทท.2/1

# data[].attributes.subject
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง สทท.2/1

# data[].attributes.body
พรอมต์ ระบบ CRUD Prompt : 1.สร้างฟอร์มบันทึกข้อมูลนักศึกษา ห้อง สทท.2/1 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล โดยมีชื่อ “นายรัฐภูมิ พรมจรรยา” เป็นผู้พัฒนาระบบ อยู่ด้านล่างแบบฟอร์ม ------------------------- รายละเอียดแบบฟอร์ม ประกอบด้วย คำนำหน้าชื่อ (นาย , นางสาว) ชื่อ สกุล ชื่อเล่น รูปโปรไฟล์ -------------------------- สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชั่นการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2.ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbzxhpdq6ZG3T7mfP5PYta32sabOS8FDj1dqEH9SJjX83ubJjeLBO5YyvqAuxmj64EdYjg/exec 7.SHEET_ID: 1M1F2l_mwXs1PB77zowRQkYo-SBOxCk8lgfZ-O_xpdH0 8. FOLDER_ID: 1oQpycmlxdWcWEH57uVcMApf8UidEOfFK 9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 10.ให้บันทึก url ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 11.ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 12.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

สั่งเพิ่มเติม พรอมต์ เกียวกับ กราฟ ดังนี้ ปรับหน้าจอให้เป็น แบบ TAB MENU และมีกราฟสรุป แยกตามเพศ

# data[].attributes.attachment_link.title
ระบบ CRUD บันทึกข้อมูลนักศึกษา ห้อง 2/1 ธุรกิจดิจิทัล

# data[].attributes.headline
แต่งเพลงด้วย suno.com

# data[].attributes.subject
แต่งเพลงด้วย suno.com

# data[].attributes.attachment_link.title
แผ่นดินแห่งใจ

# data[].attributes.attachment_link.description
แผ่นดินแห่งใจ by ratthaphum.phrm (@ratthaphum.phrm). Listen and make your own on Suno.

# data[].attributes.headline
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.subject
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปพลิเคชันจัดเก็บข้อมูลกิจกรรมวิทยาลัย ActiDoc

# data[].attributes.headline
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.subject
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.body
หัวข้อ: การพัฒนาเว็บแอปพลิเคชัน ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

สถานการณ์โจทย์:

เนื่องจากวิทยาลัยมีการจัดกิจกรรมหลากหลายตลอดปี เช่น ปฐมนิเทศ ทัศนศึกษา งานกีฬา และกิจกรรมชมรมต่าง ๆ ซึ่งจำเป็นต้องบันทึก

ข้อมูลกิจกรรมและแนบหลักฐานเพื่อใช้รายงานต่อผู้บริหารในแต่ละภาคเรียน แต่ปัจจุบันยังไม่มีระบบกลางในการเก็บข้อมูล จึงเกิดปัญหา

การสืบค้นและติดตามย้อนหลัง คณะกรรมการจึงต้องการให้พัฒนาเว็บแอปพลิเคชันเพื่อบันทึกกิจกรรม พร้อมแนบไฟล์ภาพและรายละเอียด

อื่น ๆ ได้อย่างเป็นระบบ

ฟีเจอร์ที่ต้องมีในระบบ:

• ใช้ font คือ Kanit ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้า บันทึกกิจกรรม

• - ชื่อระดับชั้น (ปวช. , ปวส.)

• - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,

• คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก

,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

• (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

o ชื่อกิจกรรม

o วันที่จัด (เป็นรูปแบบปฎิทินประเทศไทย 2568-2-3 )

o ประเภทกิจกรรม (เลือกได้ : กิจกรรมหลักสูตร, กิจกรรมชมรม, กิจกรรมภายนอก ดึงข้อมูลมาจาก หน้า เพิ่มชื่อกิจกรรม )

o รายละเอียด (textarea)

o แนบไฟล์ภาพได้หลายไฟล์ (Preview ได้ก่อนอัปโหลด)

• หน้า เพิ่มปีการศึกษา / ภาคเรียน แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• หน้า เพิ่มชื่อกิจกรรม แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• จัดเก็บข้อมูลลงฐานข้อมูล

• แสดงรายการกิจกรรมย้อนหลัง

• ระบบสามารถค้นหา/กรองตามปี/ภาคเรียน/ประเภทกิจกรรมได้

• สามารถแนบไฟล์ภาพได้ และระบบต้องสามารถรองรับการแนบไฟล์ภาพได้หลายไฟล์ และต้องสามารถ แสดงภาพตัวอย่างก่อน

อัปโหลด (preview)

คำสั่ง จากสถานการณ์ที่กำหนดข้างต้นนี้ ให้พัฒนาเว็บแอปพลิเคชั่น สำหรับการแก้ปัญหานี้

1. สร้างเว็บแอปพลิเคชั่น

2. จัดเก็บข้อมูลลงฐานข้อมูล

3. เผยแพร่สำหรับการนำไปใช้งาน

Footer

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ :นายธินกร ชวาลิตร ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog, modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยัน

การลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON JSON ที่ถูกต้อง ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน EonData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbzp-QRnxiUCwi9QC_-1E9Ddnc8lgar0REYiOuCecYFsnmTj3D0hrZskBRKJeBKtE8zP/exec

8. SHEET ID: 1NXMWD-gK-XDmpRJd0kkKdgADwWLPIx0IA-zTeNgdZQ8

9. FOLDER ID : 1AwObxyoUFkjxXih_av_SfXaI4jFhekAa

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง สีชมพู แดงอ่อนไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

สามารถบันทึก ข้อมูล และภาพ ลง Google ซีต และ Google ไดรฟ์ ได้ด้วย

# data[].attributes.attachment_link.title
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.headline
ระบบแจ้งซ่อม IT & CoM

# data[].attributes.subject
ระบบแจ้งซ่อม IT & CoM

# data[].attributes.attachment_link.title
แบบฟอร์มแจ้งซ่อม Online 2025

# data[].attributes.headline
คำขวัญห้องสมุด

# data[].attributes.subject
คำขวัญห้องสมุด

# data[].attributes.attachment_link.title
library คำขวัญห้องสมุด

# data[].attributes.headline
ระบบ CRUD บันทึกข้อมูลพรรณไม้

# data[].attributes.subject
ระบบ CRUD บันทึกข้อมูลพรรณไม้

# data[].attributes.attachment_link.title
สอบปฏิบัติ สร้างเว็บแอปฯ คำสั่ง prompt มีดังนี้ : 1. สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสต...

# data[].attributes.headline
Gemini code ระบบเยี่ยมบ้าน 2025 นาย ยุทธนาวี ลำมะหิต เลขที่24 

# data[].attributes.subject
Gemini code ระบบเยี่ยมบ้าน 2025 นาย ยุทธนาวี ลำมะหิต เลขที่24 

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลเยี่ยมบ้านนักศึกษา Visit Home 2025

# data[].attributes.headline
ขั้นตอนพัฒนาระบบ 5 ขั้นตอน Napkin

# data[].attributes.subject
ขั้นตอนพัฒนาระบบ 5 ขั้นตอน Napkin

# data[].attributes.headline
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.subject
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.attachment_link.title
Book Manager - ระบบจัดการหนังสือ

# data[].attributes.headline
ระบบลงนามถวายพระพรชัยมงคล เนื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568

# data[].attributes.subject
ระบบลงนามถวายพระพรชัยมงคล เนื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568

# data[].attributes.attachment_link.title
ระบบลงนามถวายพระพรชัยมงคล สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถพระบรมราชชนนีพ...

# data[].attributes.headline
ระบบบันทึกข้อมูลกิจกรรมวิทยาลัย

# data[].attributes.subject
ระบบบันทึกข้อมูลกิจกรรมวิทยาลัย

# data[].attributes.body
promt

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

• ใช้ font คือ Itim ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ

TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ

โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,

เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

ชื่อกิจกรรม

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - -

วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.)

ประเภทกิจกรรม

(เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม )

รายละเอียด (textarea)

แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น)

TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup

TAB 3 : หน้าเพิ่มชื่อกิจกรรม -

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) -

สามารถค้นหา - - - - Footer

กรองตามปีการศึกษา

ภาคเรียน

ประเภทกิจกรรม

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวพรวิไล องอาจ”

ฟังก์ชันเพิ่มเติม :

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ

ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL :https://script.google.com/macros/s/AKfycbwwYMtyYy9MKpZVcErXys6a3pSaj3sYjivrwqMpTasg_NwcgQiGmVV8oPC-Xe0BJi8/exec

8. SHEET_ID : 1s43U4Q3r9f3w_hBTEAOtAPu9OiHjWJu-Hb0btS2DDXw

9. FOLDER_ID IT :1Lcnxnn5TPjRg3c7H_eI3Xaxy6oMwPqxG

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีน้ำเงิน ฟ้า ม่วง ขาว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

ช่วยเพิ่มปุ่ม ลบ แก้ไข แต่ละส่วนต่าง ๆ ได้

และ ช่วยสร้าง การแสดงข้อมูลสารสนเทศ

ช่วยสร้าง กราฟสรุปข้อมูล แยกตาม

ขอโค้ดgsอีกรอบด้วยนะ

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลกิจกรรม ActiDoc v.4

# data[].attributes.headline
ระบบแจ้งซ่อม

# data[].attributes.subject
ระบบแจ้งซ่อม

# data[].attributes.body
ผู้พัฒนาระบบ น.ส.วันฑนา แก่นอินทร์

เเบบฟอร์มเเจ้งซ่อม Online 24 ชั่วโมง

ผู้พัฒนาระบบ :น.ส.วันฑนา แก่นอินทร์ (อยู่ด้านข้างเเบบฟอร์ม)

ส่วนที่ 1: ข้อมูลผู้แจ้ง ชื่อ-สกุล:

แผนก: (ฝ่ายบุคคล,ฝ่ายบัญชี,ฝ่ายการเงิน,สำนักผู้บริหาร,ฝ่ายขาย)

เบอร์ติดต่อ: (เเก้ปัญหาเลขศูนย์ เเสดงให้ครบทั้ง10ตัว ใน google sheetsด้วย)

สถานที่/ห้อง: (ห้องประชุม , สำนักงาน , ห้องพักรับรอง)

ส่วนที่ 2: รายละเอียดปัญหา

หัวข้อปัญหา:

ประเภทปัญหา: (แสงสว่าง, น้ำประปา , เครื่องปรับอากาศ,ระบบเสียง )

กรุณาอธิบายปัญหาโดยละเอียด:

แนบไฟล์ภาพอุปกรณ์ที่เสีย: (รองรับไฟล์ภาพเท่านั้น)

ส่วนที่ 3 ระดับความเร่งด่วนประเมินจากผู้แจ้ง (เลือก 1 ข้อเท่านั้น)

- สูง (High) – ปัญหานี้ทำให้ไม่สามารถทำงานหลักได้เลย

- กลาง (Medium) - ทำงานได้แต่ไม่สะดวก หรือมีผลกระทบกับงานบางส่วน

- ต่ำ (Low) - ยังทำงานได้ตามปกติ แต่ต้องการให้แก้ไข/ตรวจสอบ

ลงวันที่แจ้งข้อมูล: (เลือกปฏิทิน ห้ามเลือกวันล่วงหน้า)

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

3.กำหนดให้ Modal body มี scroll ให้ใช้งานได้ 4. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

5. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

6.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

7.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

8.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbw-hG1hRfj2oHf82NIHOKXRosl0Vk4TfJrgDwS3UWx1psNLTSaLakAnad8esn5Bpw7tcQ/exec

10. FOLDER_ID IT : 1XbfeVVoN3YqTGdGnsVTELy7cYmXuRjp7

11.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

12.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

13.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

14.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีชมพู ส้ม ขาว ไล่ระดับแบบมืออาชีพ

15.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบแจ้งซ่อมออนไลน์ 24 ชั่วโมง

# data[].attributes.headline
napkin การพัฒนาซอฟต์เเวร์

# data[].attributes.subject
napkin การพัฒนาซอฟต์เเวร์

# data[].attributes.body
การพัฒนาระบบมีขั้นตอน ต่อไปนี้

1.การวิเคราะห์ความต้องการ (Requirement Analysis)

2.การออกแบบระบบ (System Design)

3.การพัฒนาโปรแกรม (Implementation / Coding)

4.การทดสอบระบบ (Testing)

5.การติดตั้งและใช้งานจริง (Deployment)

6.การบำรุงรักษา (Maintenance)

# data[].attributes.headline
ระบบเยี่ยมบ้าน

# data[].attributes.subject
ระบบเยี่ยมบ้าน

# data[].attributes.body
1. สร้างแบบฟอร์มบันทึกข้อมูล แบบฟอร์มบันทึกข้อมูลการเยี่ยมบ้าน V.2025.01 โดยให้มี ชื่อ "วันฑนา แก่นอินทร์” เป็นผู้พัฒนาระบบ

อยู่ด้านข้างของแบบฟอร์มและมีอิโมจิ รูปเครื่องคอมพิวเตอร์อยู่ด้วย รายละเอียดประกอบด้วย - รหัสนักศึกษา

โดยกำหนดให้ใส่ตัวเลข 11 หลักเท่านั้น) (แสดงตัวอย่างข้อมูล รหัสนักศึกษา และชื่อ นามสกุล

โดยดึงข้อมูลจาก Google sheet และแสดงข้อมูลล่าสุดเท่านั้น อยู่ด้านข้างด้วย)

- คำนำหน้าชื่อ (นาย, นางสาว) - ชื่อ - นามสกุล - ชื่อเล่น - ระดับชั้น (ปวช. , ปวส.) - วันที่เยี่ยมบ้าน

(แสดงเป็นปฏิทินให้เลือก วันที่ย้อนหลัง - วันที่ปัจจุบัน)

- บันทึกข้อมูลการเยี่ยมบ้าน

- รูปเยี่ยมบ้านรูปที่ 1

- รูปเยี่ยมบ้านรูปที่ 2

- รูปเยี่ยมบ้านรูปที่ 3

- รูปเยี่ยมบ้านรูปที่ 4

- รูปนักศึกษา

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog

แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData

เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ : https://script.google.com/macros/s/AKfycbzm-lFuPeHVEcC27BFg-xR93qCiv_IET8BrZT-8NlGiCSrqc9IIBWMn0qSvXGLVgee6Pg/exec

7.SHEET_ID: 1t8aPoOYbJ9cT1OdScTu0dnoWBQMtUuMglV3lM5kORvo

8. FOLDER_ID 1 : 1NHD3nDGzVXRXb3M_jKrXh4JBH4DKaCMk

9. FOLDER_ID 2 : 1KDnb2Rv91bNn7Xg3jRzdMPlNlcB8Higv

10. FOLDER_ID 3 : 1f19ZYsW0IQ2xL4ab75Vf1FbDRH-EoxsX

11. FOLDER_ID 4 : 1453oEdRDG0Qj_-Bo04JFNJOksigVvBYT

12. FOLDER_ID pic :1aUvEI_ijDpepdL_sHXkSjBPiWr5Nvso2

13.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

14.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

15.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

16.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU

17.มีปุ่มกดดูตัวอย่างสรุปข้อมูลพร้อมภาพ แบบ pop up

18.ตกแต่งให้เหมาะสม และ Code html CSS โทนน้ำเงิน กรมท่าฟ้า ไล่ระดับแบบมืออาชีพ

19. ช่วยสร้างกราฟสรุป โดยแยกตาม เพศ และ ระดับชั้น

20. ช่วยสร้างตารางข้อมูลสรุป รูปภาพนักศึกษา ชื่อ นามสกุล

21.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบเยี่ยมบ้าน

# data[].attributes.body
1.สร้างเว็บแอป Visit Home2025 บันทึกข้อมูลลงชีตด้วย App Script

โดยให้มี ชื่อ “วันฑนา แก่นอินทร์” เป็นผู้พัฒนาระบบ  อยู่ด้านข้างของแบบฟอร์ม

รายละเอียดประกอบด้วย

- รหัสนักศึกษา    (โดยกำหนดให้ใส่ตัวเลข 11 หลักเท่านั้น  ห้ามใส่เกิน)

- คำนำหน้าชื่อ   (นาย, นางสาว)

- ชื่อ

- นามสกุล

- ระดับชั้น  (ปวช.  , ปวส.)

- ชั้นปีที่  (ถ้าเลือก ปวช. จะมีตัวเลือก 1 , 2 ,3 ) (ถ้าเลือก ปวส. จะมีตัวเลือก 1, 2)

- วันที่บันทึกข้อมูลเยี่ยมบ้าน  (แสดงเป็นปฏิทินให้เลือก  ห้ามเลือกวันล่วงหน้า)

- บันทึกข้อมูลการเยี่ยมบ้าน

- รูปเยี่ยมบ้านรูปที่ 1

- รูปเยี่ยมบ้านรูปที่ 2

2.ใช้ form submit และ google.script.run

3.ใช้ tailwindcss แบบ Internal และกำหนดฟ้อนต์ Noto Sans Thai

4.สร้างหัวคอลัมน์ตาราง และชื่อชีตอัตโนมัติ

5.ใช้ Sweet Alert ในการแสดงสถานะขณะบันทึกข้อมูลและบันทึกสำเร็จ

6. SPREADSHEET_ID : 1LZNJYG9-JSvgX-f6xiDqzioNX5aNcKGaqogQzHZOGHU

7. FOLDER_ID 1 :  1_Cu-77ZfK7OVRE2y7ueDZ69kZSCs3g_j

8. FOLDER_ID 2 :  19mPr_c3hhdN9Ua1_CwM3XrEa8AZCl7Jd

9.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

10.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU

11.ตกแต่งแบบฟอร์ม html CSS โทนสีสวยๆไล่ระดับแบบมืออาชีพ

12. เมื่อสร้างระบบเสร็จแล้วให้แสดงไฟล์ 2 ไฟล์ คือ code.gs และ index.html

13. อธิบายการนำไปสร้างทุกขั้นตอน

# data[].attributes.headline
ระบบCRUD:บันทึกข้อมูลพรรณไม้

# data[].attributes.subject
ระบบCRUD:บันทึกข้อมูลพรรณไม้

# data[].attributes.body
ผู้จัดทำ : วันฑนา แก่นอินทร์

prompt มีดังนี้: 1. สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์โรงเรียน ของวิทยาลัยอาชีวศึกษานครสวรรค์ โดยให้มี ชื่อ “ครูปานเทพ รัตนอัมพร” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย รหัสพรรณไม้ (มีอักษรตัว 1 นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น) แสดงตัวอย่างการรหัสพรรณไม้ และชื่อภาษาไทย ให้เห็นในรูปแบบตาราง อยู่ด้านข้างด้วย ชื่อภาษาไทย ชื่อทางวิทยาศาสตร์ - ลักษณะทั่วไป - ประเภทของพรรณไม้ (ไม้คลุมดิน, ไม้ล้มลุก, ไม้พุ่ม, ไม้ยืนต้น, ไม้เลื้อย, ไม้ประดับ) อัพโหลดรูปภาพพรรณไม้ สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการ ข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ https://script.google.com/macros/s/AKfycbzKaqDojHVutOM1CzsBQG5zXPdj3rUvHELAscMkXObd4PovSyjkbkXfHvpmtmASYv0B/exec

7.SHEET ID:1seT5LIhiyyeZpquCbiiysJ1osnt4yYhh2bvd2f1keys

8. FOLDER_ID: 15CnQMD9PUlT7Bx4At_3whqJMXymR-qid

9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 12. จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU

13.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีเขียว ไล่ระดับแบบมืออาชีพ เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ให้ด้วย

# data[].attributes.attachment_link.title
สร้างระบบบันทึกข้อมูลพรรณไม้

# data[].attributes.headline
ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย ActiDoc

# data[].attributes.subject
ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย ActiDoc

# data[].attributes.body
ผู้จัดทำ : วันฑนา แก่นอินทร์

prompt มีดังนี้: 1. สร้างแบบฟอร์มบันทึกข้อมูลพรรณไม้ งานสวนพฤกษศาสตร์โรงเรียน ของวิทยาลัยอาชีวศึกษานครสวรรค์ โดยให้มี ชื่อ “ครูปานเทพ รัตนอัมพร” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย รหัสพรรณไม้ (มีอักษรตัว 1 นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น) แสดงตัวอย่างการรหัสพรรณไม้ และชื่อภาษาไทย ให้เห็นในรูปแบบตาราง อยู่ด้านข้างด้วย ชื่อภาษาไทย ชื่อทางวิทยาศาสตร์ - ลักษณะทั่วไป - ประเภทของพรรณไม้ (ไม้คลุมดิน, ไม้ล้มลุก, ไม้พุ่ม, ไม้ยืนต้น, ไม้เลื้อย, ไม้ประดับ) อัพโหลดรูปภาพพรรณไม้ สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการ ข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL:https://script.google.com/macros/s/AKfycbz4g0B0tvw_9oh4N14JgseOumqBr9DnI_ZSTINVhwJ5ABsO_4l9pfKlhrqPepKAb4xe/exec

7.SHEET ID:1P8bmIdgkpgmBKGTwN7lpLHIyosTrjno_hqcRMRfWA9E/edit?gid=0#gid=0

8. FOLDER_ID: 1RUrX6sUM5ZgTuxaHBVUdx8vm7WcLuz4c 9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

10.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

11.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 12. จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU

13.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีเขียว ไล่ระดับแบบมืออาชีพ เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ให้ด้วย

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.headline
ระบบลงนามถวายพระพรชัย เรื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568

# data[].attributes.subject
ระบบลงนามถวายพระพรชัย เรื่องในวันแม่แห่งชาติ 12 สิงหาคม 2568

# data[].attributes.attachment_link.title
ออกแบบหน้าเว็บไซต์ลงนามถวายพระพรออนไลน์ 12 สิงหาคม 2568

# data[].attributes.headline
ระบบบันทึกข้อมูลงานกิจกรรม ActiveDoc v.4

# data[].attributes.subject
ระบบบันทึกข้อมูลงานกิจกรรม ActiveDoc v.4

# data[].attributes.body
Prompt : พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม ฟีเจอร์ที่ต้องมีในระบบ : • กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho • ใช้ font คือ IBM Plex Sans Thai Looped ทั้งระบบ • โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ, เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล) ชื่อกิจกรรม (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์, การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - - วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.) ประเภทกิจกรรม (เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม ) รายละเอียด (textarea) แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น) TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup TAB 3 : หน้าเพิ่มชื่อกิจกรรม - หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) - สามารถค้นหา - - - - Footer กรองตามปีการศึกษา ภาคเรียน ประเภทกิจกรรม ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : .................................................” ฟังก์ชันเพิ่มเติม : สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ 7. เชื่อม App Script ที่ URL : 1i-pUzIdyIX6Yeo-0toSbhhIR33WrWtt9zASUII3-G8OH49TI7J-g56of 8. SHEET_ID : 1su6oO_RVbQW35hccOVOHVhnK2IbHQP4ZgbYfdO1i5sI 9. FOLDER_ID IT : 1wS96jDWLFG0K8B1gSCmujdkw4Bj21RK0 9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568 10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีน้ำเงิน ฟ้า ขาว ไล่ระดับแบบมืออาชีพ 14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย --------------------------------------------------- เมื่อระบบใช้งานได้ ให้ทดสอบระบบ และ เพิ่มการทำงานให้ครบถ้วน สมมติข้อมูลในการบันทึกระบบให้มากกว่า 5 ข้อมูล ต้องมีปุ่ม เพิ่ม ลบ แก้ไข แต่ละส่วนต่าง ๆ ได้ เช่น ช่วยสร้าง การแสดงข้อมูลสารสนเทศ ช่วยสร้าง กราฟสรุปข้อมูล แยกตาม ............................. ระบุ ความต้องการในช่องว่างให้เหมาะสม มีปุ่นเพิ่มลบแก้ไขได้ เอาเป็นโทนสีม่วง ผู้พัฒนาระบบ นางสาวพิริยะ บุญเนาว์

# data[].attributes.attachment_link.title
ระบบบันทึกงานกิจกรรม

# data[].attributes.headline
ระบบบันทึกข้อมูลกิจกรรม V.4

# data[].attributes.subject
ระบบบันทึกข้อมูลกิจกรรม V.4

# data[].attributes.body
https://nwvoc.my.canva.site/dagvcwwucj4

นางสาวอรรจมินทร์ พรมพิทักษ์

# data[].attributes.attachment_link.title
การพัฒนาเว็บแอปพลิเคชัน ActiDoc v.4

# data[].attributes.headline
เว็บแอปพลิเคชัน ActiDoc v.4 สำหรับบันทึกกิจกรรม

# data[].attributes.subject
เว็บแอปพลิเคชัน ActiDoc v.4 สำหรับบันทึกกิจกรรม

# data[].attributes.body
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม ฟีเจอร์ที่ต้องมีในระบบ : • กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho • ใช้ font คือ Kanit ทั้งระบบ • โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ : สร้างปุ่ม สำหรับผู้ดูแลระบบ TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ, เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล) ชื่อกิจกรรม (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์, การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - - วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.) ประเภทกิจกรรม (เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม ) รายละเอียด (textarea) แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น) TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup TAB 3 : หน้าเพิ่มชื่อกิจกรรม - หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) - สามารถค้นหา - - - - Footer กรองตามปีการศึกษา ภาคเรียน ประเภทกิจกรรม ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : "อภิษฎา ธัญญกรรม" ฟังก์ชันเพิ่มเติม : สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ 7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbwjWJSn4XHAxPxHLDLGGcGcy_cUBDvfIkg7hpOTaECstrxMo_2pIMVbxJk_mnsjgW1N/exec 8. SHEET_ID : 1Bir9KFLnIbWgD4dycemtRMN7DPefrmw9jQa7MaJf2Ww 9. FOLDER_ID IT : 186j9Phb0ou_zmVjiA2ZJi5Kl1hgHPHvV 9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568 10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีน้ำเงิน ฟ้า ขาว ไล่ระดับแบบมืออาชีพ 14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

ช่วยเพิ่มปุ่ม ลบ แก้ไข แต่ละส่วนต่าง ๆ ได้ และ ช่วยสร้าง การแสดงข้อมูลสารสนเทศ ช่วยสร้าง กราฟสรุปข้อมูล แยกตาม และช่วยแก้ไขฟอนต์เป็น Playpen Sans Thai ทั้งระบบ ขอโค้ดgsอีกรอบด้วยนะ

# data[].attributes.attachment_link.title
เว็บแอปพลิเคชัน ActiDoc v.4 สำหรับบันทึกกิจกรรม

# data[].attributes.headline
ระบบบันทึกข้อมูลงานกิจกรรม ActivDoc v.4

# data[].attributes.subject
ระบบบันทึกข้อมูลงานกิจกรรม ActivDoc v.4

# data[].attributes.body
https://nwvoc.my.canva.site/dagvxbcws3e

ผู้พัฒนาระบบ นางสาวสรัลนุช คำวิเศษ

# data[].attributes.headline
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.subject
ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

# data[].attributes.body
หัวข้อ: การพัฒนาเว็บแอปพลิเคชัน ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

สถานการณ์โจทย์:

เนื่องจากวิทยาลัยมีการจัดกิจกรรมหลากหลายตลอดปี เช่น ปฐมนิเทศ ทัศนศึกษา งานกีฬา และกิจกรรมชมรมต่าง ๆ ซึ่งจำเป็นต้องบันทึก

ข้อมูลกิจกรรมและแนบหลักฐานเพื่อใช้รายงานต่อผู้บริหารในแต่ละภาคเรียน แต่ปัจจุบันยังไม่มีระบบกลางในการเก็บข้อมูล จึงเกิดปัญหา

การสืบค้นและติดตามย้อนหลัง คณะกรรมการจึงต้องการให้พัฒนาเว็บแอปพลิเคชันเพื่อบันทึกกิจกรรม พร้อมแนบไฟล์ภาพและรายละเอียด

อื่น ๆ ได้อย่างเป็นระบบ

ฟีเจอร์ที่ต้องมีในระบบ:

• ใช้ font คือ Kanit ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้า บันทึกกิจกรรม

• - ชื่อระดับชั้น (ปวช. , ปวส.)

• - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,

• คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก

,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

• (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล)

o ชื่อกิจกรรม

o วันที่จัด (เป็นรูปแบบปฎิทินประเทศไทย 2568-2-3 )

o ประเภทกิจกรรม (เลือกได้ : กิจกรรมหลักสูตร, กิจกรรมชมรม, กิจกรรมภายนอก ดึงข้อมูลมาจาก หน้า เพิ่มชื่อกิจกรรม )

o รายละเอียด (textarea)

o แนบไฟล์ภาพได้หลายไฟล์ (Preview ได้ก่อนอัปโหลด)

• หน้า เพิ่มปีการศึกษา / ภาคเรียน แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• หน้า เพิ่มชื่อกิจกรรม แบบ Popup Modal

o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม

• จัดเก็บข้อมูลลงฐานข้อมูล

• แสดงรายการกิจกรรมย้อนหลัง

• ระบบสามารถค้นหา/กรองตามปี/ภาคเรียน/ประเภทกิจกรรมได้

• สามารถแนบไฟล์ภาพได้ และระบบต้องสามารถรองรับการแนบไฟล์ภาพได้หลายไฟล์ และต้องสามารถ แสดงภาพตัวอย่างก่อน

อัปโหลด (preview)

คำสั่ง จากสถานการณ์ที่กำหนดข้างต้นนี้ ให้พัฒนาเว็บแอปพลิเคชั่น สำหรับการแก้ปัญหานี้

1. สร้างเว็บแอปพลิเคชั่น

2. จัดเก็บข้อมูลลงฐานข้อมูล

3. เผยแพร่สำหรับการนำไปใช้งาน

Footer

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นางสาวสรัลนุช คำวิเศษ นายพงษ์พิพัฒน์ เพ็ชรหงษ์ ”

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog, modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยัน

การลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON JSON ที่ถูกต้อง ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน EonData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbwniEJwtPXrOdXCXqwGuNT8BhoCXv57iZxZSkoXUxvKvfwLhgKE8oWkzytv8jyzj_th/exec

8. SHEET ID: 1uiVVDVpY5eCPfimkVYJE0fZkKY7YyQoAIVMZAWk2_zY

9. FOLDER ID : 1UqAt-XT2k1IzAaq4vRSkOa71LWnQQHzv

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง ดำ แดง ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

สามารถบันทึก ข้อมูล และภาพ ลง Google ซีต และ Google ไดรฟ์ ได้ด้วย

# data[].attributes.attachment_link.title
จัดเก็บข้อมูลกิจกรรมวิทยาลัย

# data[].attributes.headline
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.subject
พัฒนาเว็บแอปพลิเคชัน ActiDoc v.4 ระบบบันทึกข้อมูลข่าวงานกิจกรรม

# data[].attributes.body
ฟีเจอร์ที่ต้องมีในระบบ :

• กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

• ใช้ font คือ Itim ทั้งระบบ

• โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย

หน้าหลัก : แสดงข้อมูลสรุปรายงานกิจกรรม แบบการ์ดข่าว และดูตัวอย่าง รายละเอียดย่อ

: สร้างปุ่ม สำหรับผู้ดูแลระบบ

TAB 1 : บันทึกกิจกรรม - ปีการศึกษา (ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มปีการศึกษา) - ระบุเทอม (เทอม1 , เทอม2) - ชื่อระดับชั้น (ปวช. , ปวส.) - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,คหกรรมศาสตร์,การ

โรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,แฟชั่นและสิ่งทอ,

เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล)

ชื่อกิจกรรม

(ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม

ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์,

การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) - - - - -

วันที่จัด (แสดงการเลือกแบบ ปฏิทิน เช่น 1 สิงหาคม 2568 ในรูปแบบ พ.ศ.)

ประเภทกิจกรรม

(เลือกได้ : ตัวเลือก แบบ dropdown ให้ดึงข้อมูลจาก หน้าเพิ่มชื่อกิจกรรม )

รายละเอียด (textarea)

แนบไฟล์ภาพ (อัพโหลดได้หลายไฟล์ และรองรับไฟล์ภาพ เท่านั้น)

TAB 2 : หน้าเพิ่มปีการศึกษา - หน้าเพิ่มปีการศึกษา แสดงเป็น popup

TAB 3 : หน้าเพิ่มชื่อกิจกรรม -

หน้าเพิ่มชื่อกิจกรรม แสดงเป็น popup

TAB 4 : หน้า สรุปรายงานกิจกรรม (แสดงรูปแบบตาราง) -

สามารถค้นหา - - - - Footer

กรองตามปีการศึกษา

ภาคเรียน

ประเภทกิจกรรม

ใช้ข้อความ “© 2025 | วิทยาลัยอาชีวศึกษานครสวรรค์ | พัฒนาระบบ : นายพงษ์พิพัฒน์ เพ็ชรหงษ์”

ฟังก์ชันเพิ่มเติม :

สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ

ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการ

ยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง

2. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6. ปุ่ม แก้ไข ลบ โดยต้องใส่รหัสผ่าน 1234 สำหรับผู้ดูแลระบบ

7. เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycbygWg3-a8ZdYrKn-0iGgsryjn2NIgSJ4K4CoZz0GL8Pe-ThUZb1CQCYkMXOGL4v3d5_qA/exec

8. SHEET_ID : 1l2aLa6Ck-rD5cya7v7x0WYuSJwCye1_feBuEmPOfIu8

9. FOLDER_ID IT : 1U3fa_q4xTGtLsV-UWTEFaFCwMV3lT_tJ

9.1 เก็บภาพในสร้าง Folder แยกตามปีการศึกษา เช่น 2568

10.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง

11.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

12.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีม่วง แดง ขาว ไล่ระดับแบบมืออาชีพ

14.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

15.ปีการศึกษาที่มีอยู่เมื่อเพิ่มแล้วและประเภทกิจกรรมที่มีอยู่ ขอให้มี ปุ่มแก้ไข ได้ด้วย และทำงานได้จริง

# data[].attributes.attachment_link.title
ระบบบันทึกข้อมูลงานกิจกรรม ActiveDoc v.4

# data[].attributes.headline
ระบบบันทึกกิจกรรมวิทยาลัย

# data[].attributes.subject
ระบบบันทึกกิจกรรมวิทยาลัย

# data[].attributes.body
promt

1.การพัฒนาเว็บแอปพลิเคชัน ActiDoc ระบบจัดเก็บข้อมูลงานกิจกรรมวิทยาลัย

2. กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ :https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho

3. หน้า “บันทึกกิจกรรม” ฟอร์มกรอกข้อมูล พร้อมการจัดรูปแบบตัวอักษรให้อ่านง่าย (ใช้ font “Kanit” ทั้งระบบ) โดยมีช่องป้อน โดยกำหนดให้ สีข้อความ แตกต่างกันชัดเจนอ่านง่าย หน้า บันทึกกิจกรรม • - ชื่อระดับชั้น (ปวช. , ปวส.) • - ชื่อสาขาวิชา (ถ้าเลือก ปวช. จะมีตัวเลือก : การบัญชี,การตลาด,ธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล, คหกรรมศาสตร์,การโรงแรม,โลจิสติกส์,อาหารและโภชนาการ,วิจิตรศิลป์,การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก ,แฟชั่นและสิ่งทอ,เทคโนโลยีสารสนเทศ,เทคโนโลยีธุรกิจดิจิทัล) • (ถ้าเลือก ปวส. จะมีตัวเลือก : การบัญชี,การตลาด,การจัดการธุรกิจค้าปลีก,การจัดการสำนักงานดิจิทัล,การบริหารงานคหกรรม ศาสตร์,การจัดการโลจิสติกส์และซัพพลายเชน,อาหารและโภชนาการ,วิจิตรศิลป์, การออกแบบ,การถ่ายภาพและมัลติมีเดีย,ดิจิทัลกราฟิก,เทคโนโลยีแฟชั่นและเครื่องแต่งกาย,เทคโนโลยีธุรกิจดิจิทัล) -ชื่อกิจกรรม -วันที่จัด -ประเภทกิจกรรม (เลือกได้ : กิจกรรมหลักสูตร, กิจกรรมชมรม, กิจกรรมภายนอก ดึงข้อมูลมาจาก หน้า เพิ่มชื่อกิจกรรม ) -รายละเอียด (textarea) -แนบไฟล์ภาพได้หลายไฟล์ (Preview ได้ก่อนอัปโหลด) หน้า เพิ่มปีการศึกษา / ภาคเรียน แบบ Popup Modal(เลือกได้ : ภาคเรียนที่1 , ภาคเรียนที่2) o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม หน้า เพิ่มชื่อกิจกรรม แบบ Popup Modal o ข้อมูลจะถูกนำไปแสดงใน dropdown หน้าแบบฟอร์ม บันทึกกิจกรรม จัดเก็บข้อมูลลงฐานข้อมูล • แสดงรายการกิจกรรมย้อนหลัง • ระบบสามารถค้นหา/กรองตามปี/ภาคเรียน/ประเภทกิจกรรมได้ • สามารถแนบไฟล์ภาพได้ และระบบต้องสามารถรองรับการแนบไฟล์ภาพได้หลายไฟล์ และต้องสามารถ แสดงภาพตัวอย่างก่อน อัปโหลด (preview) หน้า ผู้ดูเเละระบบ( สำหรับผู้ดูแลระบบเท่านั้น โดยต้องใส่รหัสผ่าน 1234) จัดการข้อมูล -สำหรับเเก้ไขข้อมูล -ลบข้อมูล -ย้อนกลับ ออกจากระบบ

4.ชื่อม App Script ที่ URL:https://script.google.com/macros/s/AKfycbzX-SqR5HXkkqBsZTMYUOB-PTtt-aq8U_gVp-0-3-XZi8FPShONNUeku4L4RJ3bmvfv/exec 5.SHEET ID: 1u813wevTLRrhdN7IAFcQteS06qNjycEE_lXJES-4SI8

6.FODER ID:12yLWA-AUqqR5m2zZAeJR7bIT3OcRgFKv

7.ตกแต่งด้วย โทนสีน้ำเงิน ฟ้า ขาว ไล่ระดับ แบบมืออาชีพ

8..ขอโค้ดgsด้วย

# data[].attributes.attachment_link.title
เเบบฟอร์มจัดเก็บข้อมูลกิจกรรม

# data[].attributes.headline
ระบบลงนามถวายพระพร

# data[].attributes.subject
ระบบลงนามถวายพระพร

# data[].attributes.body
ออกแบบหน้าระบบลงนามถวายพระพรออนไลน์ 12 สิงหาคม ๒๕๖๘ โอกาส: วันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง แสดงคำถวายพระพรในรูปแบบ: • “ขอพระองค์ทรงพระเจริญ” • “ด้วยเกล้าด้วยกระหม่อม ขอเดชะ” 🎨 ธีมหลัก: โทนสี: น้ำเงินเข้ม → ฟ้า → ฟ้าอ่อน แบบ ไล่เฉด (gradient) จากบนลงล่าง ให้ความรู้สึกหรูหรา อบอุ่น สมพระเกียรติ พื้นหลัง: โปร่งแสงเล็กน้อย (background pattern เช่น ลายประจำยาม) ฟอนต์: ใช้ฟอนต์ไทยร่วมสมัย เช่น TH Chakra Petch, Sarabun, Prompt 👑 ส่วนหัวเว็บไซต์: ตราสัญลักษณ์ วันแม่แห่งชาติ https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Royal_Monogram_of_Queen_Sirikit.svg/640px-Royal_Monogram_of_Queen_Sirikit.svg.png ขนาดกลางอยู่บนสุด เก็บข้อมูลดังต่อไปนี้ 1.มีปุ่ม “ลงนามถวายพระพรชัยมงคล สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง” เมื่อกดปุ่มแล้วให้มี popup แสดงรายละเอียดดังนี้ - ชื่อ-นามสกุล * - หน่วยงาน/สถานศึกษา - ข้อความถวายพระพร (“ขอสมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถพระบรมราชชนนีพันปีหลวงทรงพระเจริญยิ่งยืนนาน”, “ขออานุภาพแห่งคุณพระศรีรัตนตรัยและสิ่งศักดิ์สิทธิ์ทั้งหลาย จงดลบันดาลให้ใต้ฝ่าละอองธุลีพระบาท ทรงพระเจริญด้วยจตุรพิธพรชัย”, “ข้าพระพุทธเจ้าทั้งหลาย ขอพระราชทานถวายพระพรชัยมงคล ขออานุภาพแห่งคุณพระศรีรัตนตรัย และสิ่งศักดิ์สิทธิ์ในสากล โปรดอภิบาลรักษาใต้ฝ่าละอองธุลีพระบาท” ) - ปุ่มบันทึก “ยืนยันการลงนาม” - ปุ่มยกเลิกการลงนาม 2. ถัดจากปุ่ม “ลงนามถวายพระพร” มีสถิติการลงนามถวายพระพร 3. มีระบบการบันทึกข้อมูลแบบถาวร เมื่อปิดและเปิดใหม่ข้อมูลยังอยู่ 4. สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัปเดต และลบ)ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชั่นการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 5. สำหรับปุ่มแก้ไข และ ปุ่มลบ ต้องใส่รหัสผ่านเท่านั้น สำหรับ ผู้ดูแลระบบ (รหัสผ่าน คือ 1234) 6.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 7.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 8.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 9.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 10.เชื่อม App Script ที่ URL : https://script.google.com/macros/s/AKfycby1bBdZS53Rv7RGYoYU7PM_LaSyIjTVVq6mAbgfb6lBtfRXY-u2IKVuSSNFgIoBHjNM/exec 11. SHEET_ID : 1JzVixSB30IbYrxRvGrKA7j68j_yP0RFp1mTq2IOgmSw 12. เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มีให้สร้างใหม่พร้อมหัวตาราง 13. แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 🏫 Footer เว็บไซต์: "© 2025 วิทยาลัยอาชีวศึกษานครสวรรค์ | สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | พัฒนาโดย นางสาววันฑนา แก่นอินทร์ 15. เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

# data[].attributes.attachment_link.title
ระบบลงนามถวายพระพร

# data[].attributes.headline
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.subject
ระบบข่าวประชาสัมพันธ์ NEWs 2025

# data[].attributes.body
คำสั่ง prompt มีดังนี้ : ชื่อระบบ : ภาษาไทย ระบบข่าวสารประชาสัมพันธ์ วิทยาลัยอาชีวศึกษานครสวรรค์ ภาษาอังกฤษ Information NEWs Nakhonsawan Vocational College. รายละเอียดประกอบด้วย 1.กำหนดให้มี .setFaviconUrl('https://snkvc.ac.th/wp content/uploads/2024/06/%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2 %E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81 %E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%B2%E0%B8%8A%E0%B8%B5 %E0%B8%A7%E0%B8%A8%E0%B8%B6%E0%B8%81%E0%B8%A9%E0%B8%B2.png') 2. กำหนดโลโก้ เว็บไซต์จากลิงก์นี้ : https://lh3.googleusercontent.com/d/1wPx40zjpui9psSeVoNIbTsZ_B6OH8Zho 3. ให้หน้าเว็บมีความสวยงามทันสมัย ส่วนการแจ้งเตือน หรือกล่องโต้ตอบกับผู้ใช้ให้ใช้ sweet alert หน้าเว็บใช้ tailwind css ในการ ออกแบบให้สวยงาม โดยมี ui เว็บ Magazine สวยงาม ใช้งานง่าย มีไอคอนประกอบ ใช้ font คือ Kanit ทั้งระบบ 4.รองรับการใช้งานทุกอุปกรณ์ แบบ responsive (มือถือแท็บเล็ต คอมพิวเตอร์) 5.โดยมีช่องกรอกข้อมูล หรือปุ่มต่าง ๆ กำหนดให้สีข้อความ แตกต่างกับสีตัวอักษร ชัดเจน อ่านง่าย องค์ประกอบหน้าจอระบบ ดังนี้ หน้าแรก เป็นหน้าข่าวสารประชาสัมพันธ์ - กำหนดให้ การ์ดข่าว ให้แสดง ชื่อข่าว หมวดหมู่ ภาพประจำเรื่อง และเนื้อข่าวโดยย่อ มีปุ ่มอ่านเพิ่มเติม - - - - - - - - - - มีตัวกรองเพื่อเลือกดูข่าวตามหมวดหมู่ อยู่ด้านบนขวาของหน้า โดยค่า default คือ ทั้งหมด หน้าสอง เป็นหน้า ฟอร์มบันทึกข้อมูลข่าวสาร สำหรับผู้ดูแลระบบเท่านั้น โดยต้องใส่รหัสผ่าน 1234 โดยมีช่องกรอกข้อมูล ในแบบฟอร์มดังนี้ ชื่อข่าว (textinput) หมวดหมู่ข่าว (dropdown ดึงข้อมูลหมวดหมู่จากหน้าจัดการข้อมูล) เนื้อข่าว (textinput) ภาพข่าวหรือภาพวารสาร (อัพโหลดหรือลากวางได้ จำนวนไม่เกิน 4 ภาพ) กำหนดรูปประจำข่าว (อัพโหลดหรือลากวางได้ จำนวน 1 ภาพ เพื่อแสดงเป็นตัวอย่างในหน้าข่าวสารประชาสัมพันธ์) หน้าสาม เป็นหน้า จัดการข้อมูล (รูปแบบ CRUD) แสดงข่าวทั้งหมดในตาราง พร้อมปุ่ม แก้ไข ลบ แสดงส่วนจัดการหมวดหมู่ สามารถเพิ่ม ลบ แก้ไข หมวดหมู่ (รูปแบบ CRUD) หน้าเพิ่มข่าวและจัดการข้อมูล แสดงเป็น popup เข้าสู่ระบบ และ ออกจากระบบ และมีปุ่มกลับหน้าหลัก - Footer ใช้ข้อความ “© 2025 สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล | วิทยาลัยอาชีวศึกษานครสวรรค์ | ผู้พัฒนาระบบ : นางสาว กัลยรัตน์ สุขล้อม ” สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัพเดต และลบ) ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชันการลบ ให้สร้าง modal dialog , modal scrolling แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดใน กรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 8. ใช้วิธีการจัดการการอัพโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 9. การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 10. ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 11. ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 12.ตกแต่งด้วยอิโมจิ ภาพเคลื่อนไหวให้เหมาะสม และ Code html CSS โทนสีน้ำเงิน ฟ้าอ่อนขาวปุยเมฆ ไล่ระดับ แบบมืออาชีพ 13.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ Progress Bar (เช่น progress 0% → 100% ) น่าสนใจ ว้าวๆ 14. ทดสอบระบบด้วย ข้อมูลแบบ local storage ให้ใช้งานได้จริง 15. มีระบบการบันทึกข้อมูลแบบถาวร เมื ่อปิดและเปิดใหม่ข้อมูลยังอย

# data[].attributes.attachment_link.title
การสร้างระบบข่าวสารประชาสัมพันธ์ วิทยาลัยอาชีวศึกษานครสวรรค์