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

คุณคือ Senior Full Stack Developer และ UI/UX Designer มืออาชีพ
จงออกแบบและพัฒนา “เว็บไซต์โรงเรียน” แบบครบระบบ โดยใช้เทคโนโลยีดังนี้

- PHP 8+
- MySQL
- HTML5
- CSS3
- JavaScript
- Bootstrap 5
- Responsive Design
- รองรับ Dark Mode
- ใช้งานได้ทั้งมือถือ Tablet และ Desktop

แนวคิดการออกแบบ:
- ทันสมัย สวยงาม น่าเชื่อถือ
- ใช้โทนสีหลักของโรงเรียน (แดง-เหลือง)
- UI ดูเป็นทางการแต่ทันสมัย
- โหลดเร็ว
- รองรับ SEO
- มี Animation เบา ๆ
- ใช้ Font ภาษาไทยที่อ่านง่าย
- Dashboard ดู Professional

โครงสร้างเว็บไซต์ประกอบด้วย:

1. หน้าแรก (Home)
- Hero Section พร้อมภาพโรงเรียน
- ข่าวประชาสัมพันธ์
- ปฏิทินกิจกรรม
- ผู้บริหาร
- สถิติผู้ใช้งาน
- แนะนำโรงเรียน
- Quick Links
- แกลเลอรีภาพ
- วิดีโอแนะนำโรงเรียน
- Footer ครบถ้วน

2. ระบบข่าวประชาสัมพันธ์
- เพิ่ม/แก้ไข/ลบข่าว
- อัปโหลดรูปภาพ
- แสดงข่าวล่าสุด
- ระบบหมวดหมู่ข่าว
- ระบบค้นหาข่าว

3. ระบบบุคลากร
- ข้อมูลครูและบุคลากร
- แสดงรูปภาพ
- แบ่งกลุ่มสาระ
- ระบบค้นหา

4. ระบบนักเรียน
- แสดงข้อมูลนักเรียน
- ห้องเรียน
- ระดับชั้น
- ระบบค้นหา

5. ระบบดาวน์โหลดเอกสาร
- อัปโหลดไฟล์ PDF/Word
- แบ่งหมวดหมู่
- นับจำนวนดาวน์โหลด

6. ระบบแกลเลอรี
- อัลบั้มรูป
- Lightbox
- Lazy Load

7. ระบบติดต่อโรงเรียน
- ฟอร์มติดต่อ
- Google Map
- Social Media

8. ระบบ Admin
- Login / Logout
- Dashboard
- จัดการผู้ใช้งาน
- จัดการข่าว
- จัดการแกลเลอรี
- จัดการเอกสาร
- จัดการ Banner

9. ระบบความปลอดภัย
- Password Hashing
- Prepared Statements (PDO)
- CSRF Protection
- Session Security
- Validation Input
- Upload Security

10. ฐานข้อมูล MySQL
ออกแบบ ER Diagram และ SQL Script สำหรับ:
- users
- news
- galleries
- gallery_images
- teachers
- students
- downloads
- categories
- banners
- settings

11. สิ่งที่ต้องการเพิ่มเติม
- ใช้ MVC Structure
- แยกไฟล์เป็นระบบระเบียบ
- Clean Code
- Comment อธิบายโค้ด
- รองรับ .htaccess Rewrite URL
- ระบบ Pagination
- Toast Notification
- SweetAlert2
- DataTables
- CKEditor

12. ต้องการผลลัพธ์ดังนี้
- โครงสร้างโฟลเดอร์ทั้งหมด
- SQL Script
- ตัวอย่างไฟล์ config.php
- ตัวอย่างระบบ Login
- ตัวอย่าง CRUD ข่าวประชาสัมพันธ์
- ตัวอย่าง Dashboard Admin
- ตัวอย่างหน้า Home
- ตัวอย่าง CSS Modern Design
- ตัวอย่าง JavaScript
- วิธีติดตั้งระบบบน XAMPP/MAMP
- วิธี Deploy ขึ้น Hosting

13. รูปแบบการเขียนโค้ด
- เขียนโค้ดแบบ Production Ready
- ใช้มาตรฐาน PSR
- อธิบายทุกส่วน
- แสดงตัวอย่างไฟล์ครบ
- แสดงโค้ดเต็ม ไม่ตัด

14. เพิ่มฟีเจอร์ AI ภายในเว็บไซต์
- AI Chatbot ตอบคำถามโรงเรียน
- AI สรุปข่าวอัตโนมัติ
- AI สร้างประกาศ
- AI ช่วยค้นหาเอกสาร

15. ต้องการ UI เพิ่มเติม
- Glassmorphism
- Soft Shadow
- Gradient Modern
- Card Design
- Hover Effect
- Animated Counter
- Loading Animation

กรุณาสร้าง:
- Wireframe
- Database Schema
- Folder Structure
- Full Source Code Example
- Responsive UI Design
- Modern Admin Dashboard
- Beautiful Landing Page
- พร้อมอธิบายทุกขั้นตอนแบบละเอียด

Prompt:
“ออกแบบหน้าเว็บไซต์ของโรงเรียนสมัยใหม่ โทนสีสุภาพ น่าเชื่อถือ ใช้สีประจำโรงเรียน (สีน้ำเงิน–เหลือง หรือปรับตามต้องการ) เน้นความเป็นมืออาชีพ ใช้งานง่าย และรองรับการนำไปเป็นหน้า Landing Page จริง
ให้มีโครงสร้างดังนี้:
1. ส่วนหัวเว็บไซต์ (Hero Section)
• รูปภาพโรงเรียนหรือภาพสื่อถึงการเรียนรู้
• ข้อความเด่น: ‘โรงเรียน…(ชื่อโรงเรียน)… มุ่งสู่ความเป็นเลิศทางวิชาการและคุณธรรม’
• ปุ่ม Call-to-Action เช่น ‘ดูข้อมูลเพิ่มเติม’ หรือ ‘ระบบรับสมัคร’
2. เมนูหลัก
• หน้าแรก | เกี่ยวกับโรงเรียน | ข่าวประชาสัมพันธ์ | แผนการเรียน | ติดต่อเรา
3. ส่วนแสดงข่าว/ประกาศล่าสุด
• การ์ดข่าว 3–4 ใบ แนวสมัยใหม่
• ไอคอน/กราฟิกสื่อการศึกษา
4. ส่วนแนะนำโรงเรียน (About School)
• จุดเด่นของโรงเรียน
• ภาพกิจกรรม
• ข้อความสั้นแต่ชัดเจน
5. ส่วนกิจกรรม/ภาพถ่าย
• แกลเลอรีหรือกริดภาพขนาดสวยงาม
6. ส่วนลิงก์บริการออนไลน์
• ปุ่มแบบการ์ด: ระบบงานสารบรรณ, ระบบรับสมัครนักเรียน, ระบบส่งงานออนไลน์ ฯลฯ
7. ส่วนท้ายเว็บไซต์ (Footer)
• ชื่อโรงเรียน
• ที่อยู่ เบอร์ติดต่อ
• ไอคอนโซเชียลมีเดีย

สไตล์ทั้งหมดให้เป็นแบบโมเดิร์น ตัวหนังสืออ่านง่าย จัดวางเป็นระเบียบ ใช้ไอคอนและกราฟิกแบบ Flat Design รองรับการใช้งานบนมือถือ (Responsive).”

“โปรดสร้าง โค้ด HTML และ CSS พื้นฐาน สำหรับหน้าเว็บ [ระบุวัตถุประสงค์ เช่น หน้า Landing Page สำหรับโปรโมทหลักสูตร] โดยเน้นโครงสร้างที่ประกอบด้วย Header, ส่วนเนื้อหาหลัก 3 ส่วน, และ Footer โดยใช้ โทนสี [ระบุโทนสี เช่น สีน้ำเงินและขาว] และใช้โค้ดที่สะอาดและอ่านง่าย เหมาะสำหรับผู้เริ่มต้น”

สร้างเว็บไซต์โปรแกรมคำนวณชั่วโมงสอน (PA)
โดยมีรายละเอียดดังนี้:

🎯 ฟังก์ชันหลัก:
- ให้ผู้ใช้กรอก “กำหนดเวลาสอน” หน่วยเป็นนาที/คาบ (editable field)
- ให้กรอกข้อมูลรายวิชา (ชื่อวิชา, จำนวนคาบ/สัปดาห์)
- มีปุ่ม “➕ เพิ่มรายวิชา” เพื่อเพิ่มแถวกรอกข้อมูลได้ไม่จำกัด
- ระบบคำนวณอัตโนมัติ:
• ชั่วโมงสอนของแต่ละวิชา (คาบ × นาที ÷ 60)
• รวมจำนวน “ชั่วโมงสอนทั้งหมด” และ “นาทีทั้งหมด” ที่ส่วนล่างของตารางโดยอัตโนมัติ
- สามารถแก้ไข หรือลบรายวิชาได้
- รองรับ Responsive ทั้งมือถือและคอมพิวเตอร์

🧩 การออกแบบ:
- ส่วนหัวเว็บไซต์: “โปรแกรมคำนวณชั่วโมงสอน (PA)”
พร้อมโลโก้ทางซ้าย: https://imprnoom.com/images/logonoom1.png
- โทนสีหลัก: ฟ้า-ขาว ดูสะอาดตาแบบโปร
- ฟอนต์: “Sarabun”
- ปุ่มและกล่องกรอกข้อมูลโค้งมน (rounded-xl)
- มีเงาแบบ soft shadow ให้แต่ละการ์ด

📊 ส่วนแสดงผลรวม:
- แสดง “รวมชั่วโมงทั้งหมด (ชั่วโมง)” และ “รวมเวลาทั้งหมด (นาที)” แบบ real-time

📱 Footer:
Dev by Pichayanart Reerak.

💡 ใช้ HTML + Tailwind CSS + JavaScript
รองรับ Responsive ทั้งหน้าจอคอมพิวเตอร์และมือถือ

สร้างหน้าออกแบบ UI สำหรับ “กระดานข้อความสด (Live Sticky Notes Board)” ขนาด 1440×900 px สำหรับเว็บ/แท็บเล็ต — ออกแบบสไตล์ friendly, school/office friendly:
1) โครงหลัก:
- header บาง ๆ ตรงกลางโลโก้และชื่อ “Live Board”
- main grid: พื้นที่กว้างแสดง sticky notes แบบ draggable (3 คอลัมน์บน desktop, 1 คอลัมน์บน mobile)
- แต่ละ sticky note เป็นการ์ดมุมมน ขนาดเปลี่ยนได้ มีสีสลับ (เหลือง, ชมพูอ่อน, ฟ้าอ่อน, เขียวอ่อน) และเงาเบา ๆ
2) ช่องอินพุต:
- บาร์ด้านล่าง fixed: กล่องข้อความ (placeholder: “พิมพ์ข้อความของคุณ…”), ปุ่มแนบรูป, ปุ่มส่ง (ไอคอนส่ง)
- เมื่อส่ง ให้โน้ตใหม่ slide-in จากขวาและเด้งเบา ๆ
3) realtime UI:
- มุมขวาล่าง: small floating badge แสดง “ผู้ใช้งานออนไลน์: 12” (ห้ามบังเนื้อหา) — ทำเป็น bubble สีอ่อน พร้อมไอคอนคน
- ด้านบนมุมซ้ายแสดงแบนเนอร์เล็กเมื่อมีข้อความใหม่: “มีข้อความใหม่จาก [ชื่อ]”
4) อินเตอร์แอคชัน/แอนิเมชัน:
- note appear: slide + fade
- hover note: ยกขึ้นเล็กน้อย, show action icons (edit/delete/pin)
5) เสริม:
- ปุ่ม Export → PDF / ปุ่ม Clear Board (confirm)
- ให้รวมตัวอย่าง sticky notes 8 ข้อความ (ภาษาไทย) และ mock user avatars
ออกแบบไฟล์ให้พร้อมเป็นโพรโทไทป์ใน Canva (รวม layer แยกสำหรับ note, badge, header, input bar)

ออกแบบหน้าเว็บเข้าสู่ระบบ (Login Page) โทนสีส้มทันสมัย ดูอบอุ่นและเป็นทางการ
มีโลโก้ด้านบน ชื่อเรื่อง “ระบบเข้าสู่เว็บไซต์”
ใต้ชื่อมีข้อความชื่อหน่วยงาน “โรงเรียนแม่จันวิทยาคม จังหวัดเชียงราย"
กลางหน้ามีฟอร์มเข้าสู่ระบบ ประกอบด้วยช่องกรอก
• ชื่อผู้ใช้ (Username)
• รหัสผ่าน (Password)
• ช่องใส่รหัสยืนยัน (Captcha)
ปุ่มเข้าสู่ระบบสีส้มเข้ม
ใต้ฟอร์มมีลิงก์ “ลืมรหัสผ่าน”
พื้นหลังเป็นลวดลายเรียบหรู มีแสงเฉียงหรือกราฟิกโค้งสีส้มอ่อน
ฟอนต์อ่านง่าย สไตล์ทันสมัย

สร้างเว็บไซต์ ฝึกการเขียน Prompt สำหรับครู
โดยใช้ โทนสีฟ้า–ขาว ดูสะอาด สบายตา และรองรับ Responsive Design
เว็บไซต์ควรมีโครงสร้างดังนี้ 👇

🔹 ส่วน Header
• โลโก้ + ชื่อเว็บ “Prompt Training for Teachers”

🔹 ส่วน Hero (แนะนำ)
• พื้นหลังสีฟ้าอ่อน + ข้อความต้อนรับ เช่น
💡 “พื้นที่สำหรับครู ฝึกการเขียน Prompt ให้มีประสิทธิภาพ”
• ปุ่ม CTA: “เริ่มฝึกเขียน Prompt”

🔹 ส่วน Practice (ฝึกเขียน)
• กล่องข้อความ (Text Area) สำหรับพิมพ์ Prompt
• ปุ่ม “ส่งประเมิน”
• พื้นที่แสดงผลคะแนน/Feedback อัตโนมัติ (Progress bar สีฟ้า/เขียว)
• ตัวอย่าง Prompt ที่ดี (เป็นการ์ดหรือกล่องตัวอย่าง)

🔹 ส่วน Leaderboard (กระดานคะแนน)
• ตารางรายชื่อผู้ใช้ + คะแนนรวม
• แสดง Badge/Level เช่น 🥇 🥈 🥉
• รองรับการแสดงผลบนมือถือ (Responsive table)

🔹 ส่วน Footer
• ลิงก์เมนูซ้ำ (Home | Practice | Leaderboard | Resources | About)
• ข้อความลิขสิทธิ์ เช่น
© 2025 Prompt Training by Krunoom.dev
• ไอคอน Social Media (Facebook, YouTube, Line OA)

🎨 การออกแบบ
• โทนสีหลัก: ฟ้า (#2196F3, #BBDEFB) + ขาว (#FFFFFF)
• ฟอนต์: Sarabun (อ่านง่ายในภาษาไทย)
• ปุ่ม/CTA: สีฟ้าเข้ม + ตัวอักษรหนา
• Layout รองรับ Desktop / Tablet / Mobile

ฉันจะสร้างเว็บไซต์ฝึกการเขียน Prompt สำหรับครูให้คุณ โดยใช้โทนสีฟ้า-ขาว ที่สะอาดตาและรองรับทุกอุปกรณ์!

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


เปลี่ยนฟ้อนต์เป็น Prompt ไม่ต้องมีตารางคะแนน และเมนูต่างๆ ในเมื่อคุณเป็นผู้เชี่ยวชาญด้าน AI ขอรูปแบบการตรวจ Prompt ที่ฝึกเขียนแบบละเอียด

สร้างเว็บไซต์ประเมิน วPA ครู ตำแหน่ง วิทยฐานะ ชำนาญการ ให้ครบทุกหัวข้อ

ออกแบบระบบ คลังบทเรียนวิทยาศาสตร์พลังสิบ โรงเรียนแม่จันวิทยาคม
📌 โทนสีหลัก: เหลือง – ขาว
📌 ฟ้อนต์: Prompt
📌 รองรับ Responsive ทั้งมือถือ แท็บเล็ต และคอมพิวเตอร์

🖥 ส่วนหน้าเว็บไซต์ (Frontend)
1. โครงสร้างหลัก
• แถบเมนูด้านบน (Navbar) → หน้าแรก, คลังบทเรียน, สมัครสมาชิก, เข้าสู่ระบบ
• หน้าหลัก → แสดงโลโก้โรงเรียน, ชื่อระบบ “คลังบทเรียนวิทยาศาสตร์พลังสิบ โรงเรียนแม่จันวิทยาคม” และปุ่ม เข้าสู่ระบบ / สมัครสมาชิก
• หน้าคลังบทเรียน → แยกหมวดหมู่ตาม ระดับชั้น ม.1 - ม.6
• ภายในแต่ละระดับชั้น → มีรายวิชา
• วิทยาศาสตร์พลังสิบ
• คณิตศาสตร์
• ฟิสิกส์
• เคมี
• ชีววิทยา
• เทคโนโลยี
2. รายละเอียดรายวิชา
• แสดง ตัวอย่างภาพ Thumbnail ของสื่อการเรียนรู้
• เมื่อกด → เข้าหน้ารายละเอียด
• แสดง:
• 📄 เอกสารประกอบ (ลิงก์ PDF)
• 🎞 คลิปวิดีโอ (ลิงก์ YouTube/Google Drive)
• 🖼 ภาพตัวอย่างสื่อ
• สมาชิกสามารถ เข้าดูสื่อ และ ทำแบบประเมิน ได้
3. ฟีเจอร์เพิ่มเติม
• ระบบสมัครสมาชิก + เข้าสู่ระบบ (Register / Login)
• หน้าทำแบบประเมิน (Quiz / แบบสอบถามความพึงพอใจ)
• Responsive Design สวยงาม เหมาะกับทุกอุปกรณ์

⸻

🔧 ส่วนหลังบ้าน (Backend สำหรับ Admin)
1. ระบบเข้าสู่ระบบ Admin
• Username / Password
• Security Basic
2. เมนูจัดการข้อมูล
• จัดการ ระดับชั้น (เพิ่ม / แก้ไข / ลบ)
• จัดการ รายวิชา (เพิ่ม / แก้ไข / ลบ)
• จัดการ เอกสาร PDF (อัปโหลด / แก้ไข / ลบ)
• จัดการ สื่อการเรียนรู้ (ใส่ชื่อเรื่อง + ลิงก์ + ภาพตัวอย่าง)
• จัดการ คลิปวิดีโอ (เพิ่ม URL / ฝังลิงก์)
3. ระบบสมาชิก
• จัดการรายชื่อผู้สมัครสมาชิก
• ตรวจสอบผลการทำแบบประเมิน

⸻

✅ คุณสมบัติพิเศษ
• ดีไซน์ทันสมัย สะอาดตา ใช้ สีเหลือง – ขาว
• ใช้ ฟ้อนต์ Prompt (ภาษาไทย)
• แต่ละบทเรียนมี Preview Image + รายละเอียดสื่อ
• ระบบถูกออกแบบให้รองรับการใช้งานจริงในโรงเรียน