ขอขอบคุณและติดตามเพจได้ที่ ครูเปิงมาง.fc 
Prompt พรอมต์สำหรับสร้างเว็บไซต์โรงเรียน  ไฟล์ WORD      

PROMPT: พัฒนาเว็บไซต์ประชาสัมพันธ์และศูนย์บริการข้อมูลโรงเรียน (Modern School Portal)

คุณคือ Senior Full-Stack Developer, UI/UX Designer และผู้เชี่ยวชาญ Google Apps Script ที่มีประสบการณ์ในการพัฒนาเว็บไซต์สถานศึกษา

จงพัฒนาเว็บไซต์โรงเรียนแบบครบวงจร โดยใช้ภาพเว็บไซต์ที่แนบเป็น Reference ในการออกแบบ ทั้งด้านโครงสร้าง การจัดวางองค์ประกอบ และรูปแบบการนำเสนอข้อมูล แต่ต้องพัฒนาให้มีความทันสมัย สวยงาม และมีประสิทธิภาพมากยิ่งขึ้น

1. เทคโนโลยีและข้อกำหนดการพัฒนา

ใช้เทคโนโลยีดังนี้

• Frontend: HTML5, CSS3, JavaScript

• Backend: Google Apps Script

• Database: Google Sheets

• Storage: Google Drive

• UI Framework: Bootstrap 5 หรือ CSS Framework ที่เหมาะสม

• Icons: Font Awesome หรือ Lucide

• Charts: Chart.js

• Notifications: SweetAlert2

ข้อกำหนดสำคัญ

• สร้างไฟล์เพียง 2 ไฟล์เท่านั้น

  1. index.html สำหรับ Frontend

  2. code.gs สำหรับ Backend

• CSS และ JavaScript ทั้งหมดต้องอยู่ภายใน index.html

• ห้ามสร้างไฟล์เพิ่มเติมทุกกรณี

• ห้ามแยกไฟล์ CSS, JS หรือ JSON

• ต้องสามารถ Deploy เป็น Google Apps Script Web App ได้จริง

• เชื่อมต่อ Google Sheets เป็นฐานข้อมูลจริง

• เชื่อมต่อ Google Drive สำหรับจัดเก็บภาพและเอกสาร

• ทุกปุ่มและเมนูต้องสามารถใช้งานได้จริง

2. แนวคิดการออกแบบ UI/UX

ออกแบบเว็บไซต์ในสไตล์ Modern School Portal + Premium Education Dashboard

โทนสีหลัก:

• สีม่วงเข้ม #35104D

• สีม่วง #57216D

• สีทอง #D6A94F

• สีขาว #FFFFFF

• สีพื้นหลัง #F7F5FA

ลักษณะการออกแบบ:

• Header สีม่วงเข้ม มีโลโก้และชื่อโรงเรียน

• Navigation Bar สีทอง

• Hero Banner ขนาดใหญ่แบบ Slider

• Content Card มีมุมโค้งและเงาบาง ๆ

• หัวข้อแต่ละ Section ใช้ Gradient สีม่วง-ทอง

• ใช้ภาพถ่ายจริงเป็นองค์ประกอบหลัก

• จัด Layout แบบ Grid และ Responsive

• Typography อ่านง่าย รองรับภาษาไทย

• มี Hover Animation และ Smooth Transition

• รองรับ Desktop, Tablet และ Mobile 100%

3. โครงสร้างหน้าเว็บไซต์

ส่วนที่ 1: Header

แสดงข้อมูล:

• โลโก้โรงเรียน

• ชื่อโรงเรียน

• ชื่อภาษาอังกฤษ

• สังกัดหน่วยงาน

• วันที่และเวลาปัจจุบัน

• ปุ่มเข้าสู่ระบบผู้ดูแลเว็บไซต์

ส่วนที่ 2: Navigation Menu

ประกอบด้วยเมนู:

1. หน้าแรก

2. เกี่ยวกับโรงเรียน

3. บุคลากร

4. ITA ONLINE

5. ระบบบริหารงาน

6. ข่าวประชาสัมพันธ์

7. ติดต่อเรา

รองรับ Dropdown Menu และ Mobile Hamburger Menu

ส่วนที่ 3: Hero Banner

• แสดงภาพประชาสัมพันธ์ขนาดใหญ่

• รองรับหลายภาพแบบ Slider

• เปลี่ยนภาพอัตโนมัติ

• มีปุ่มก่อนหน้าและถัดไป

• สามารถกำหนดลิงก์เมื่อคลิกภาพได้

• ผู้ดูแลสามารถเพิ่ม ลบ และแก้ไขแบนเนอร์ได้

ส่วนที่ 4: ข่าวประชาสัมพันธ์

แสดงข่าวในรูปแบบ List Card ประกอบด้วย:

• ชื่อข่าว

• ภาพประกอบ

• รายละเอียดข่าว

• วันที่เผยแพร่

• จำนวนการเข้าชม

• ปุ่มอ่านเพิ่มเติม

• ปุ่มดูข่าวทั้งหมด

รองรับการแบ่งหน้า Pagination และค้นหาข่าว

ส่วนที่ 5: ผู้บริหารสถานศึกษา

แสดงข้อมูลผู้บริหาร:

• ภาพถ่าย

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

• ตำแหน่ง

• ข้อมูลประวัติ

• ช่องทางติดต่อ (ถ้ามี)

ส่วนที่ 6: ระบบบริหารงาน 4 กลุ่ม

สร้างการ์ดเชื่อมโยงระบบงาน ได้แก่

1. กลุ่มบริหารงานวิชาการ

2. กลุ่มบริหารงานงบประมาณ

3. กลุ่มบริหารงานบุคคล

4. กลุ่มบริหารงานทั่วไป

แต่ละการ์ดมี Icon ชื่อระบบ และ URL สำหรับเชื่อมโยงไปยังระบบภายนอก

ส่วนที่ 7: ข่าวกิจกรรมโรงเรียน

แสดงกิจกรรมในรูปแบบ 3 Column Grid ประกอบด้วย:

• ภาพกิจกรรม

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

• รายละเอียด

• วันที่จัดกิจกรรม

• ปุ่มอ่านเพิ่มเติม

รองรับการแสดงหลายภาพในแต่ละกิจกรรม

ส่วนที่ 8: ข้อมูลสารสนเทศโรงเรียน

สร้าง Dashboard แสดงข้อมูลสถิติแบบ Real-time ได้แก่

• จำนวนบุคลากร

• จำนวนนักเรียนชาย

• จำนวนนักเรียนหญิง

• จำนวนนักเรียนทั้งหมด

• จำนวนห้องเรียน

• จำนวนหลักสูตรหรือแผนการเรียน (ถ้ามี)

แสดงตัวเลขแบบ Animated Counter และมี Progress Bar

ส่วนที่ 9: ผลงานนักเรียนและครู

แสดงผลงานและรางวัลในรูปแบบ Card Gallery

• ภาพผลงาน

• ชื่อผลงาน

• ผู้ได้รับรางวัล

• ระดับรางวัล

• วันที่ได้รับรางวัล

• รายละเอียดเพิ่มเติม

ส่วนที่ 10: จดหมายข่าวประชาสัมพันธ์

สร้างระบบแสดงจดหมายข่าวแบบ Image Gallery

• แสดงภาพ Thumbnail

• คลิกเพื่อดูภาพขนาดใหญ่

• รองรับ Lightbox

• แสดงชื่อเรื่องและวันที่

• ค้นหาจดหมายข่าว

• แบ่งหน้ารายการ

ส่วนที่ 11: Online Services & Education Network

สร้างส่วนเชื่อมโยงบริการออนไลน์ เช่น

• ระบบสารสนเทศ Q-Info

• สำนักงานเขตพื้นที่การศึกษา

• สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน

• ระบบ SGS

• ระบบ DMC

• ระบบ School MIS

• ระบบ DLTV

• ระบบบริการอื่น ๆ ของโรงเรียน

ผู้ดูแลสามารถเพิ่ม แก้ไข ลบ และกำหนด URL ได้

ส่วนที่ 12: Footer

ประกอบด้วย:

• ชื่อและข้อมูลโรงเรียน

• ข้อมูลเกี่ยวกับโรงเรียน

• เมนูหลัก

• ช่องทางติดต่อ

• ที่อยู่

• เบอร์โทรศัพท์

• Email

• แผนที่ Google Maps

• ลิขสิทธิ์เว็บไซต์

แสดงสถิติผู้เข้าชม:

• วันนี้

• เมื่อวาน

• เดือนนี้

• ผู้เข้าชมทั้งหมด

4. ระบบจัดการหลังบ้าน (Admin Dashboard)

สร้างระบบผู้ดูแลเว็บไซต์ โดยสามารถเข้าสู่ระบบด้วยบัญชีที่กำหนดไว้ใน Google Sheets

Dashboard ต้องมีเมนูดังนี้

1. ภาพรวมระบบ

2. จัดการแบนเนอร์

3. จัดการข่าวประชาสัมพันธ์

4. จัดการกิจกรรมโรงเรียน

5. จัดการข้อมูลผู้บริหาร

6. จัดการข้อมูลบุคลากร

7. จัดการข้อมูลนักเรียน

8. จัดการสถิติสารสนเทศ

9. จัดการผลงานและรางวัล

10. จัดการจดหมายข่าว

11. จัดการระบบบริการออนไลน์

12. จัดการเมนูเว็บไซต์

13. จัดการข้อมูลติดต่อ

14. จัดการผู้ใช้งาน

15. รายงานสถิติผู้เข้าชม

16. ตั้งค่าระบบ

ฟังก์ชันการจัดการข้อมูล:

• เพิ่มข้อมูล (Create)

• แก้ไขข้อมูล (Update)

• ลบข้อมูล (Delete)

• ค้นหาข้อมูล (Search)

• แสดงรายการข้อมูล (Read)

• อัปโหลดภาพและเอกสารไปยัง Google Drive

• กำหนดสถานะเผยแพร่ / ไม่เผยแพร่

• กำหนดวันและเวลาเผยแพร่

• รองรับการแสดงตัวอย่างก่อนเผยแพร่

5. โครงสร้างฐานข้อมูล Google Sheets

สร้างฟังก์ชัน setupSystem() สำหรับติดตั้งฐานข้อมูลอัตโนมัติ

สร้างชีตดังต่อไปนี้:

1. Settings

2. Users

3. Banners

4. News

5. Activities

6. Executives

7. Personnel

8. Students

9. Statistics

10. Achievements

11. Newsletter

12. OnlineServices

13. Menus

14. Visitors

15. Logs

ระบบต้องสร้างหัวตารางอัตโนมัติ พร้อมข้อมูลตัวอย่างสำหรับทดสอบ

กำหนด Spreadsheet ID และ Drive Folder ID ไว้ใน CONFIG ของ code.gs

6. ฟังก์ชัน Backend

พัฒนา Google Apps Script ให้ครบถ้วน ได้แก่

• doGet()

• setupSystem()

• getWebsiteData()

• getDashboardData()

• getNews()

• saveNews()

• deleteNews()

• getActivities()

• saveActivity()

• uploadFile()

• getStatistics()

• getOnlineServices()

• saveSettings()

• login()

• logout()

• getVisitorStatistics()

• logActivity()

ฟังก์ชันต้องสามารถทำงานร่วมกับ Frontend ผ่าน google.script.run พร้อม Success Handler และ Failure Handler

7. ความปลอดภัย

• ตรวจสอบสิทธิ์ผู้ใช้งานฝั่ง Backend ทุกครั้ง

• ไม่เปิดเผยรหัสผ่านหรือข้อมูลสำคัญใน Frontend

• ป้องกันการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต

• ตรวจสอบและกรองข้อมูลก่อนบันทึก

• จำกัดชนิดและขนาดไฟล์อัปโหลด

• บันทึกประวัติการใช้งานระบบ

• ป้องกันการแสดงผล HTML ที่ไม่ปลอดภัย

• ไม่เปิดเผยข้อมูลส่วนบุคคลของนักเรียนโดยไม่ได้รับอนุญาต

• คำนึงถึง PDPA

8. ประสิทธิภาพและประสบการณ์ใช้งาน

• โหลดข้อมูลแบบ Asynchronous

• มี Loading Spinner

• มี Skeleton Loading

• ใช้ CacheService อย่างเหมาะสม

• ลดจำนวนการเรียก Google Apps Script

• ปรับขนาดภาพให้เหมาะสม

• รองรับการใช้งานผ่านมือถือ

• มีระบบแจ้งเตือนเมื่อบันทึกสำเร็จหรือเกิดข้อผิดพลาด

• ใช้งานง่ายแม้ผู้ดูแลไม่มีความรู้ด้านการเขียนโปรแกรม

9. ข้อกำหนดการส่งมอบงาน

ต้องเขียนโค้ดฉบับสมบูรณ์ ไม่ใช่ตัวอย่างหรือโค้ดจำลอง

ส่งมอบโค้ดเพียง 2 ไฟล์ ได้แก่

1. index.html

2. code.gs

ต้องตรวจสอบ:

• Syntax ของ JavaScript และ Google Apps Script

• การทำงานของทุกฟังก์ชัน

• การเชื่อมต่อ Google Sheets

• การอัปโหลด Google Drive

• การแสดงผลบนมือถือ

• การทำงานของระบบหลังบ้าน

• การจัดการข้อผิดพลาด

10. วิธีติดตั้งระบบ

อธิบายขั้นตอนติดตั้งอย่างละเอียด

1. สร้าง Google Spreadsheet

2. คัดลอก Spreadsheet ID

3. สร้าง Google Drive Folder

4. คัดลอก Drive Folder ID

5. นำโค้ด index.html และ code.gs ไปวางใน Google Apps Script

6. กำหนดค่า CONFIG

7. เรียกใช้ setupSystem() เพื่อติดตั้งฐานข้อมูลครั้งแรก

8. อนุญาตสิทธิ์การเข้าถึง Google Services

9. Deploy > New deployment > Web app

10. Execute as: Me

11. Who has access: เลือกตามนโยบายการใช้งานของโรงเรียน

12. เปิด URL เพื่อทดสอบเว็บไซต์

ผลลัพธ์ที่ต้องการ: เว็บไซต์โรงเรียนที่มีความสวยงามระดับมืออาชีพ มีหน้าประชาสัมพันธ์ครบทุกองค์ประกอบ มีระบบบริหารจัดการหลังบ้าน ใช้ Google Sheets เป็นฐานข้อมูล และสามารถนำไปใช้งานจริงได้ทันที

ให้เริ่มต้นจากการออกแบบโครงสร้างฐานข้อมูล จากนั้นพัฒนา Backend และ Frontend ให้เชื่อมต่อกันอย่างสมบูรณ์ โดยห้ามตัดฟังก์ชันหรือใช้ข้อมูลจำลองแทนฟังก์ชันที่ต้องทำงานจริง