ระบบหัวข้อและรายละเอียด

หัวข้อหลัก

รายการทั้งหมด

ดู

อบรมวันที่ 17 มิถุนายน 2569 ดู

Leaderboard Overview ดู

Claude ดู

AI Poster ดู

รายละเอียดหัวข้อ

PROMPT สร้างระบบ

แสดงหัวข้อย่อย รายละเอียด และรูปภาพ

PROMPT สร้างระบบ

ระบบจัดเก็บสถิติข้อมูลการใช้งานห้องสมุดภายในโรงเรียน

ไม่มีรูป

ให้คุณสร้างระบบจัดเก็บสถิติข้อมูลการใช้งานห้องสมุดภายในโรงเรียน
โดยใช้ Google App Script เชื่อมต่อ Google Sheet และสร้างหน้าเว็บ UI ด้วย HTML/CSS/JS ในโทนสีฟ้าพาสเทล–เหลืองอ่อนมาก หน้าเว็บต้องรองรับการใช้งานผ่...

รายละเอียดทั้งหมด
ให้คุณสร้างระบบจัดเก็บสถิติข้อมูลการใช้งานห้องสมุดภายในโรงเรียน
โดยใช้ Google App Script เชื่อมต่อ Google Sheet และสร้างหน้าเว็บ UI ด้วย HTML/CSS/JS ในโทนสีฟ้าพาสเทล–เหลืองอ่อนมาก หน้าเว็บต้องรองรับการใช้งานผ่านมือถือและคอมพิวเตอร์ โดยระบบต้องมีฟีเจอร์ดังต่อไปนี้:

1. ระบบบันทึกข้อมูลผู้ใช้บริการห้องสมุด
- วันที่เข้าใช้ห้องสมุด
- เวลาเข้า – เวลาออก
- ชื่อ–สกุล
- เลขประจำตัวนักเรียน / ตำแหน่ง (ถ้าเป็นครู/บุคลากร)
- ระดับชั้น (ม.1–ม.6)
- วัตถุประสงค์ เช่น อ่านหนังสือ ยืมคืนหนังสือ ค้นคว้า ทำงานกลุ่ม ใช้คอมพิวเตอร์ อื่นๆ
- หมายเหตุเพิ่มเติม

2. ระบบสรุปสถิติแบบอัตโนมัติ
- จำนวนผู้เข้าใช้รายวัน / รายสัปดาห์ / รายเดือน / รายปี
- จำนวนผู้ใช้ตามระดับชั้น
- จำนวนผู้ใช้ตามวัตถุประสงค์
- กราฟแท่งและกราฟวงกลม (ใช้ Chart.js)
- แสดง top 10 ผู้ใช้งานสูงสุด

3. ระบบค้นหาและกรองข้อมูล
- ค้นหาตามชื่อ
- กรองระดับชั้น
- กรองตามวันที่
- แสดงผลแบบตาราง สามารถกดดูรายละเอียดแต่ละรายการได้

4. ฟังก์ชันอื่นๆ ที่ต้องมี
- ปุ่ม Export ข้อมูลเป็น Excel/CSV
- SweetAlert แจ้งเตือนเมื่อบันทึกสำเร็จ/ล้มเหลว
- ระบบลบ/แก้ไขข้อมูล (Edit/Delete)
- ป้องกันข้อมูลซ้ำตามชื่อ + วันเข้าใช้
- บันทึกข้อมูลผ่าน doPost(JSON)

5. โครงสร้างไฟล์ที่ต้องการ
- Code.gs (Google App Script ฝั่ง Backend)
- index.html (หน้า UI หลัก)
- style.css (ธีม pastel ฟ้า–เหลือง)
- main.js (จัดการ Event และการเชื่อม API)
- ตัวอย่าง Spreadsheet พร้อมชื่อคอลัมน์ตามระบบ

ฟีเจอร์ที่ต้องการให้มีใน Dashboard:

1. แผงควบคุมภาพรวม (Overview Dashboard)
- จำนวนผู้เข้าใช้วันนี้
- จำนวนผู้เข้าใช้เดือนนี้
- จำนวนผู้เข้าใช้รวมทั้งหมด
- ระดับชั้นที่เข้าใช้งานสูงสุด Top Rank
- วัตถุประสงค์ยอดนิยม เช่น ยืมหนังสือ อ่านหนังสือ ทำงานกลุ่ม ฯลฯ

2. กราฟสถิติ
- กราฟเส้นผู้ใช้ห้องสมุดรายวัน/รายเดือน (Line Chart)
- กราฟแท่งจำนวนผู้ใช้ตามระดับชั้น ม.1–ม.6 (Bar Chart)
- กราฟวงกลมวัตถุประสงค์การเข้าใช้งาน (Pie Chart)
- กราฟอันดับ Top 10 ผู้ใช้งาน (Horizontal Bar Chart)

3. ระบบค้นหาและฟิลเตอร์
- ค้นหาตามชื่อ
- เลือกวันที่
- เลือกระดับชั้น
- เลือกประเภทการใช้งาน
- ปุ่มรีเซ็ตค่า Filter

4. ตารางข้อมูลผู้ใช้ (Data Table)
- แสดงข้อมูลล่าสุดแบบเรียลไทม์
- ปุ่มดูรายละเอียด (View)
- ปุ่มแก้ไขข้อมูล (Edit)
- ปุ่มลบข้อมูล (Delete) พร้อม SweetAlert ยืนยันก่อนลบ

5. ฟีเจอร์ขั้นสูง
- Export ข้อมูลเป็น Excel, PDF, CSV
- ปุ่ม Refresh Data
- การบันทึกข้อมูลด้วย JSON ผ่าน doPost
- การโหลดข้อมูลแบบ Async (fetch API)
- ระบบตรวจสอบสิทธิ์ผู้ดูแล (ตั้งค่า Email ที่อนุญาตใน App Script)

6. โครงสร้างไฟล์ที่ต้องให้มา
- Code.gs (App Script)
- index.html (หน้า Dashboard)
- dashboard.html (หน้าแสดงกราฟและสถิติ)
- style.css (ธีมสีฟ้าพาสเทล–เหลืองอ่อน)
- main.js (การดึงข้อมูล + การวาดกราฟ)
- ตัวอย่างโครงสร้าง Google Sheet พร้อมชื่อคอลัมน์ เช่น:
Date, TimeIn, TimeOut, StudentName, StudentID,
Classroom, Purpose, Notes

ให้สร้างระบบทั้งหมด พร้อมโค้ดตัวอย่างครบทุกส่วน, UI ตัวอย่างแบบ Dashboard สวยงาม, และวิธี Deploy ขึ้น Web App รวมถึงการเชื่อม Chart.js และวิธีเชื่อม API กับ Google Sheet

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

สร้างระบบห้องเรียนออนไลน์ (Online Classroom System)

ไม่มีรูป

Master Prompt: สร้างระบบห้องเรียนออนไลน์ (Online Classroom System)

1. เป้าหมายหลัก

สร้างเว็บแอปพลิเคชัน "ระบบห้องเรียนออนไลน์" ที่สมบูรณ์แบบ โดยใช้ Google Apps Script (HTML/Java...

รายละเอียดทั้งหมด
Master Prompt: สร้างระบบห้องเรียนออนไลน์ (Online Classroom System)

1. เป้าหมายหลัก

สร้างเว็บแอปพลิเคชัน "ระบบห้องเรียนออนไลน์" ที่สมบูรณ์แบบ โดยใช้ Google Apps Script (HTML/JavaScript) เป็น Frontend และใช้ Google Sheets กับ Google Drive เป็น Backend ทั้งระบบต้องทำงานในไฟล์เดียว (code.gs และ index.html)

2. เทคโนโลยี

Backend: code.gs (Google Apps Script)

Frontend: index.html (ใช้ HTML, Tailwind CSS, และ JavaScript)

ฐานข้อมูล: Google Sheets (ไฟล์ ID: 1PRFtLT0ytw2kbwhVjtdSDBSiuz8QTZV_GUa44FjXUFU)

ที่เก็บไฟล์: Google Drive (โฟลเดอร์หลัก ID: 1q9KOq-fyNByg6f5SUxqqItJh5eupIlWC)

3. บทบาทผู้ใช้งาน (User Roles)

ระบบต้องมีผู้ใช้ 3 ประเภท:

ผู้ดูแลระบบ (Admin): เข้าสู่ระบบด้วยรหัสผ่าน (admin123) มีสิทธิ์สูงสุดเท่าครูผู้สอน

ครูผู้สอน (Teacher): เข้าสู่ระบบด้วยรหัสผ่าน (teacher123) มีสิทธิ์จัดการเนื้อหาและผู้ใช้

นักเรียน (Student): ไม่ต้องใช้รหัสผ่าน แต่ชื่อผู้ใช้ต้องมีอยู่ในชีต users เท่านั้น

4. ฐานข้อมูล (Google Sheets)

ระบบต้องสร้างและจัดการชีตต่อไปนี้โดยอัตโนมัติ:

users: เก็บ id, name, grade, lastLogin

assignments: เก็บ fileId, worksheetName, studentName, timestamp, fileUrl, status, score, comments

exams: เก็บ examId, title, duration, startTime, endTime, status, type (internal/external), url

questions: เก็บ questionId, examId, questionText, optionA, optionB, optionC, optionD, correctAnswer

exam_scores: เก็บ scoreId, studentName, examId, score, totalQuestions, submittedAt

ชีตสำหรับ Log ไฟล์: สร้างชีตตามชื่อเมนู (เช่น teaching-media) เพื่อเก็บ Log การอัปโหลดไฟล์ของครู

5. Backend (code.gs)

ต้องมีฟังก์ชันดังนี้:

doGet(e): สำหรับแสดงผลไฟล์ index.html

File Management:

uploadFileToGoogleDrive(data): รับไฟล์ Base64, บันทึกลง Drive ตามโครงสร้าง:

ครูอัปโหลด: [Section Name]/[Teacher Name]/[file]

นักเรียนส่งงาน: [Worksheet Section]/งานที่ส่งแล้ว/[Student Name]/[file]

getFolderContents(data): ดึงรายการไฟล์จากโฟลเดอร์ของครู (สำหรับแสดงให้นักเรียน)

deleteFileFromDrive(fileId): ลบไฟล์

User Management: loadUsers(), saveUser(userData), deleteUser(userId)

Assignment Management: loadAssignments(), gradeAssignment(data)

Exam Management:

getExams(), saveExamSettings(settings)

getQuestions(examId), saveQuestion(qData), deleteQuestion(qId)

uploadQuestionsFromTemplate(data): สำหรับอัปโหลดไฟล์ CSV

Student Functions:

getExamForStudent(examId): ดึงข้อสอบแบบสุ่มและไม่มีเฉลย

submitExam(submission): รับคำตอบ, ตรวจสอบ, และบันทึกคะแนนลงชีต exam_scores

getMyExamScores(studentName)

6. Frontend (index.html)

6.1 การออกแบบโดยรวม

ใช้ Tailwind CSS, Font 'Sarabun', และ Font Awesome

ดีไซน์แบบ Glass Card (พื้นหลังโปร่งแสง)

มี Sidebar Navigation และ Main Content Area

มี Footer แสดงข้อความลิขสิทธิ์

6.2 หน้า Login

เลือกโหมด (Admin, Teacher, Student)

แสดง/ซ่อน ช่องรหัสผ่านตามโหมด (นักเรียนไม่ต้องใช้)

ตรวจสอบสิทธิ์: Admin/Teacher (ต้องถูกรหัสผ่าน), Student (ต้องมีชื่อในชีต users)

6.3 Dashboard

Admin/Teacher: แสดงการ์ดสรุป (นักเรียนทั้งหมด, รอตรวจ ฯลฯ) และกราฟสถิติ

Student: แสดงการ์ดสรุป (คะแนนรวม, งานที่ส่งแล้ว, งานที่ต้องทำ) และกราฟสถิติส่วนตัว

กิจกรรมล่าสุด: โหลดข้อมูลจาก Backend และอัปเดตอัตโนมัติ (จำลอง Real-time)

6.4 หน้าจัดการเนื้อหา (ทุกหน้า)

Admin/Teacher: มี UI สำหรับ Drag-and-Drop อัปโหลดไฟล์, มีปุ่มลบ/แก้ไขไฟล์

Student: แสดงรายการไฟล์ที่ครูอัปโหลด

Popup Viewer: ในโหมดนักเรียน เมื่อคลิกไฟล์ในหน้า "สื่อการสอน", "คำอธิบายรายวิชา" ฯลฯ ให้แสดงไฟล์ใน Popup (รองรับ PDF, Video, YouTube)

6.5 หน้าใบกิจกรรม/ใบงาน (Student)

แสดงรายการใบงาน

หากยังไม่ส่ง: แสดงปุ่ม "ส่งงาน" (เมื่อกดให้อัปโหลดไฟล์)

หากส่งแล้ว (รอตรวจ): แสดงสถานะ "ส่งแล้ว (รอตรวจ)"

หากตรวจแล้ว: แสดง "คะแนน" และ "ความคิดเห็นจากครู"

6.6 หน้าสถานะการส่งงาน

Admin/Teacher: แสดงตารางงานที่นักเรียนส่งมาทั้งหมด (ลิงก์ไฟล์งาน, ชื่อ, วันที่)

มีช่องให้ "กรอกคะแนน" และ "ความคิดเห็น"

มีปุ่ม "บันทึกคะแนน" และ "แก้ไขคะแนน"

Student: แสดงตารางสรุปงานของตัวเอง (ชื่องาน, สถานะ, คะแนน) และ "คะแนนรวมทั้งหมด"

6.7 หน้าจัดการผู้ใช้งาน (Admin/Teacher)

แสดงในหน้าต่าง Popup เต็มจอ

แสดงตารางรายชื่อผู้ใช้จากชีต users

มีปุ่ม "เพิ่มผู้ใช้งานใหม่", "แก้ไข", "ลบ"

6.8 หน้าข้อสอบ

Admin/Teacher:

แสดงรายการข้อสอบ (กลางภาค, ปลายภาค) พร้อมปุ่ม "จัดการข้อสอบ"

หน้าต่าง "จัดการข้อสอบ" ต้องมี 2 แท็บ:

ตั้งค่า: ตั้งเวลาทำ (นาที), วันที่เปิด/ปิด, สถานะ, ประเภท (ในระบบ/ลิงก์ภายนอก), และช่องกรอก URL (ถ้าเป็นลิงก์)

คลังข้อสอบ: แสดงรายการคำถาม, ปุ่ม "เพิ่มคำถาม" (เปิด Popup Form), ปุ่ม "แก้ไข"/"ลบ" คำถาม, และปุ่ม "อัปโหลดเทมเพลต" (CSV)

Student:

แสดงรายการข้อสอบ พร้อมสถานะ (ทำแล้ว/ยังไม่ถึงเวลา/หมดเวลา/เปิดให้ทำ)

ปุ่ม "เริ่มทำข้อสอบ" จะกดได้ตามเงื่อนไขเวลาและสถานะ

หน้าทำข้อสอบ (Student):

Popup เต็มจอ มีตัวนับเวลาถอยหลัง

แสดงคำถามทีละข้อ (แบบสุ่ม) พร้อมตัวเลือก 4 ข้อ

มีปุ่ม "ข้อถัดไป" / "ข้อก่อนหน้า"

เมื่อถึงข้อสุดท้าย ปุ่มเปลี่ยนเป็น "ส่งคำตอบ"

เมื่อหมดเวลาหรือกดส่ง ให้แสดงคะแนนที่ได้ทันที

สร้างระบบแสดงผลงาน (Portfolio System) แบบเต็มระบบโดยใช้ Google Apps Script และ HTML

ไม่มีรูป

คำสั่งหลัก (Main Prompt)

สร้างระบบแสดงผลงาน (Portfolio System) แบบเต็มระบบโดยใช้ Google Apps Script และ HTML โดยมีข้อกำหนดดังนี้:

1. องค์ประกอบหลัก (Core Components):

Backe...

รายละเอียดทั้งหมด
คำสั่งหลัก (Main Prompt)

สร้างระบบแสดงผลงาน (Portfolio System) แบบเต็มระบบโดยใช้ Google Apps Script และ HTML โดยมีข้อกำหนดดังนี้:

1. องค์ประกอบหลัก (Core Components):

Backend: สร้างไฟล์ Code.gs สำหรับ Google Apps Script

Frontend: สร้างไฟล์ index.html สำหรับหน้าเว็บ

2. หน้าที่การทำงาน (Features):

A. หน้าแสดงผลงาน (Portfolio Gallery) (สำหรับบุคคลทั่วไป):

แสดงผลงานทั้งหมดในรูปแบบ Grid Card ที่สวยงาม

มีปุ่มสำหรับกรองผลงานตามประเภท: "ทั้งหมด", "ผู้บริหาร", "ครูและบุคลากร", "นักเรียน"

การ์ดผลงานต้องแสดงรูปภาพ, ชื่อผลงาน, ชื่อเจ้าของ, และประเภท

คลิกที่ผลงานเพื่อเปิดไฟล์ต้นฉบับ (จาก Google Drive)

B. ส่วนจัดการ (Admin Panel) (สำหรับผู้ดูแล):

มีหน้าล็อกอินเข้าสู่ระบบ โดยใช้:

User: admin

Pass: password

เมื่อล็อกอินสำเร็จ ให้แสดงตารางข้อมูลผลงานทั้งหมด

สามารถ เพิ่ม (Add) ผลงานใหม่ (พร้อมอัปโหลดไฟล์)

สามารถ แก้ไข (Edit) รายละเอียดผลงาน (ไม่จำเป็นต้องอัปโหลดไฟล์ใหม่)

สามารถ ลบ (Delete) ผลงาน (ให้ลบทั้งข้อมูลใน Sheet และไฟล์ใน Drive)

3. การเชื่อมต่อฐานข้อมูล (Database & Storage):

Google Sheet: ใช้สำหรับเก็บข้อมูลทั้งหมด

Sheet ID: 1f_ZzJ2hqe3sqZZMr1PXFZDlCzJiJfIbvMp0g5i1x6dY

ชื่อชีต (แท็บ): portfolios

หัวข้อคอลัมน์ (แถวที่ 1): id, timestamp, name, title, description, role, fileId, fileUrl

Google Drive: ใช้สำหรับเก็บไฟล์ที่อัปโหลด

Folder ID: 17mgHQ1v3rrW0M3mFvnfLj-uTSEEOwYMJ

(ต้องตั้งค่าแชร์โฟลเดอร์เป็น "Everyone with the link" -> "Viewer")

4. ข้อกำหนดทางเทคนิค (Technical Requirements):

Frontend: ใช้ Tailwind CSS สำหรับการออกแบบหน้าเว็บให้สวยงามและ Responsive

การสื่อสาร: ให้ใช้ google.script.run ในการรับ-ส่งข้อมูลระหว่าง index.html และ Code.gs (ห้ามใช้ fetch เพื่อป้องกันข้อผิดพลาด)

การแจ้งเตือน (Notifications): ให้ใช้ SweetAlert2 สำหรับการแจ้งเตือนทั้งหมด เช่น:

"กำลังบันทึก...", "บันทึกสำเร็จ"

"กำลังลบ...", "ลบสำเร็จ"

หน้าต่างยืนยันก่อนลบ (Confirm delete)

แจ้งเตือนข้อผิดพลาด (Error)

5. รายละเอียดอื่นๆ (Other Details):

Footer: ให้มี Footer ข้อความว่า: "Copyright © 2025 ระบบแสดงผลงาน ผู้บริหาร ครูและบุคลากรทางการศึกษา นักเรียน | By ครูเปิงมางfc"

Prompt สำหรับสร้างระบบแสดงผลงาน

ไม่มีรูป

ตัวอย่าง Prompt สำหรับสร้างระบบแสดงผลงาน

คำสั่ง:

สร้างระบบแสดงผลงาน (Portfolio Gallery) แบบหน้าเดียว (Single Page Application) โดยใช้ Google Apps Script เป็น Backend และ HTML/Tailwind CSS...

รายละเอียดทั้งหมด
ตัวอย่าง Prompt สำหรับสร้างระบบแสดงผลงาน

คำสั่ง:

สร้างระบบแสดงผลงาน (Portfolio Gallery) แบบหน้าเดียว (Single Page Application) โดยใช้ Google Apps Script เป็น Backend และ HTML/Tailwind CSS/JavaScript เป็น Frontend

ความต้องการของระบบ:

1. ไฟล์และเทคโนโลยี:

Code.gs: สำหรับจัดการ Logic ฝั่ง Backend ทั้งหมด (การเชื่อมต่อ Sheet, Drive)

index.html: สำหรับ UI และ Logic ฝั่ง Frontend ทั้งหมด (ใช้ Tailwind CSS สำหรับความสวยงาม)

2. ฐานข้อมูล (Backend):

Google Sheet ID: 1f_ZzJ2hqe3sqZZMr1PXFZDlCzJiJfIbvMp0g5i1x6dY

ใช้สำหรับเก็บข้อมูลผลงาน

ต้องมีคอลัมน์: id, name, category, description, fileUrl, fileId, timestamp, fileName

Google Drive Folder ID: 17mgHQ1v3rrW0M3mFvnfLj-uTSEEOwYMJ

ใช้สำหรับเก็บไฟล์ที่อัปโหลด (รูปภาพ, PDF, ฯลฯ)

3. หน้าแสดงผลงาน (Public View):

ต้องแสดงผลงานทั้งหมดที่ดึงมาจาก Google Sheet ในรูปแบบ "การ์ด" (Cards)

การกรอง (Filter): ผู้ใช้ต้องสามารถกรองผลงานตามประเภทได้ 3 ประเภท:

ผู้บริหาร

ครูและบุคลากรทางการศึกษา

นักเรียน

การแสดงผลบนการ์ด:

หากไฟล์ที่อัปโหลดเป็นรูปภาพ (เช่น .jpg, .png) ให้แสดงรูปภาพนั้นเป็นภาพปกของการ์ด

หากเป็นไฟล์ประเภทอื่น (เช่น .pdf, .docx) ให้แสดงเป็นไอคอนตามประเภทไฟล์

ต้องมีปุ่ม "เปิดไฟล์ผลงาน" เพื่อลิงก์ไปยัง fileUrl

Footer: ต้องมีข้อความ "Copyright © 2025 ระบบแสดงผลงาน | By ครูเปิงมางfc"

4. ส่วนจัดการ (Admin Panel):

การล็อกอิน:

มีปุ่ม "เข้าสู่ระบบผู้ดูแล"

เมื่อคลิก จะต้องแสดง Modal ให้กรอก Username และ Password

ล็อกอินด้วย User: admin และ Pass: password

เมื่อล็อกอินสำเร็จ:

ซ่อนปุ่ม "เข้าสู่ระบบผู้ดูแล"

แสดงปุ่ม "เพิ่ม/จัดการผลงาน" และ "ออกจากระบบ"

แสดงปุ่ม "แก้ไข" และ "ลบ" บนการ์ดผลงานแต่ละชิ้น

ฟอร์มเพิ่ม/แก้ไขผลงาน:

ต้องสามารถ เพิ่ม, แก้ไข, และ ลบ ผลงานได้

ฟอร์มต้องมีช่องสำหรับ: ชื่อ, ประเภท (Dropdown 3 ประเภท), คำอธิบาย, และช่องอัปโหลดไฟล์

การพรีวิว (Preview): เมื่อผู้ใช้อัปโหลดไฟล์รูปภาพในฟอร์ม ให้แสดงภาพตัวอย่าง (Image Preview) ทันที

การออกจากระบบ: เมื่อคลิกปุ่ม "ออกจากระบบ" ให้กลับสู่โหมด Public View

5. สิ่งที่ต้องส่งมอบ:

โค้ดสำหรับไฟล์ Code.gs

โค้ดสำหรับไฟล์ index.html

ขั้นตอนการ Deploy เป็น Google Apps Script Web App

ระบบสุ่มชื่อนักเรียน

ไม่มีรูป

สร้าง "ระบบสุ่มชื่อนักเรียน" นี้ขึ้นมาตั้งแต่ต้นจนถึงปัจจุบันครับ:

คำสั่งเริ่มต้น:

"สร้าระบบสุ่มชื่อนกเรียน" (เพื่อสร้างระบบสุ่มชื่อพื้นฐาน)

เพิ่มการแจ้...

รายละเอียดทั้งหมด
สร้าง "ระบบสุ่มชื่อนักเรียน" นี้ขึ้นมาตั้งแต่ต้นจนถึงปัจจุบันครับ:

คำสั่งเริ่มต้น:

"สร้าระบบสุ่มชื่อนกเรียน" (เพื่อสร้างระบบสุ่มชื่อพื้นฐาน)

เพิ่มการแจ้งเตือนสวยงาม:

"ใช้ sweet alert แสดงสถานะ" (เพื่อเปลี่ยนการแจ้งเตือนธรรมดาเป็น SweetAlert)

เพิ่มเสียง:

"ให้มีเสียงแสดงความยินดี" (เพื่อเพิ่มเสียงตอนสุ่มได้ผู้โชคดี)

นำไปออนไลน์:

"เรียกใช้งานผ่าน google app script" (เพื่อสร้างไฟล์ Code.gs และ index.html สำหรับ Google Apps Script)

ปรับแต่งธีมสี (ครั้งที่ 1):

"ให้ระบบมี โทนสี #F0E703 --> #B3DFA1" (เพื่อเปลี่ยนโทนสีเป็นเขียว-เหลือง)

ปรับแต่งธีมสี (ครั้งที่ 2):

"เปลี่ยนเป็นโทน #FFFF00 --> #FF1A1A" (เพื่อเปลี่ยนโทนสีเป็นเหลือง-แดง ที่เป็นเวอร์ชันปัจจุบัน)

ระบบสำรวจและสั่งซื้อเสื้อกีฬาออนไลน์' แบบครบวงจรในรูปแบบ Web App

ไม่มีรูป

Prompt ตัวอย่างสำหรับสร้างระบบทั้งหมด
"สวัสดี Gemini, ฉันต้องการสร้าง 'ระบบสำรวจและสั่งซื้อเสื้อกีฬาออนไลน์' แบบครบวงจรในรูปแบบ Web App

ข้อกำหนดด้านเทคโนโลยีและดีไซน์:

รายละเอียดทั้งหมด
Prompt ตัวอย่างสำหรับสร้างระบบทั้งหมด
"สวัสดี Gemini, ฉันต้องการสร้าง 'ระบบสำรวจและสั่งซื้อเสื้อกีฬาออนไลน์' แบบครบวงจรในรูปแบบ Web App

ข้อกำหนดด้านเทคโนโลยีและดีไซน์:

Frontend: สร้างเป็นไฟล์ HTML ไฟล์เดียว

Styling: ใช้ Tailwind CSS ในการจัดหน้าตา

Theme: ธีมสีหลักเป็น น้ำเงินพาสเทล และ เหลืองอ่อนมาก ใช้ฟอนต์ 'Kanit'

Notifications: ใช้ SweetAlert2 โดยเฉพาะการแจ้งเตือนแบบ Toast (มุมขวาบน) เมื่อบันทึกหรืออัปเดตสำเร็จ

Charts: ใช้ Chart.js สำหรับแสดงกราฟสถิติ

Backend: ใช้ Google Apps Script (GAS) เป็น API และใช้ Google Sheet เป็นฐานข้อมูล

ส่วนที่ 1: ฟอร์มกรอกข้อมูล (UI) สร้างฟอร์มสำหรับรับข้อมูลผู้สั่งซื้อ โดยมีช่องข้อมูลดังนี้:

ชื่อ-สกุล (Text)

เบอร์โทรศัพท์ (Tel)

เพศ (Dropdown: ชาย, หญิง, อื่นๆ)

แบบเสื้อ (Dropdown: แขนสั้นคอกลม, แขนสั้นคอวี, แขนยาว, โปโล)

ขนาด (Size) (Dropdown: S, M, L, XL, XXL)

ช่องทางการรับเสื้อ (Dropdown: รับด้วยตนเอง, จัดส่งไปรษณีย์)

Logic: สร้างช่อง textarea สำหรับ 'ที่อยู่สำหรับจัดส่ง' ซึ่งจะ แสดงขึ้นมา (Show) ก็ต่อเมื่อผู้ใช้เลือก 'จัดส่งไปรษณีย์' เท่านั้น และซ่อน (Hide) เมื่อเลือก 'รับด้วยตนเอง'

แนบหลักฐานการชำระเงิน (File input, รับเฉพาะรูปภาพ)

ปุ่ม 'บันทึกข้อมูล' (รองรับทั้งการสร้างใหม่และอัปเดต) และปุ่ม 'ล้างข้อมูล'

ส่วนที่ 2: ส่วนแสดงผลข้อมูล (UI) สร้างส่วนสำหรับแสดงข้อมูลที่ดึงมาจาก Google Sheet:

ปุ่ม 'เรียกดูข้อมูลจาก Google Sheet' (เพื่อโหลดข้อมูลล่าสุด)

ช่อง 'ค้นหา' (สำหรับค้นหาจาก 'ชื่อ-สกุล')

ปุ่ม 'ดาวน์โหลดข้อมูล (CSV)'

ตารางแสดงผลข้อมูลทั้งหมด โดยมีคอลัมน์: #, ชื่อ-สกุล, เบอร์โทร, เพศ, แบบเสื้อ, ขนาด, การรับ, ที่อยู่, หลักฐาน (แสดงเป็นลิงก์ 'ดูไฟล์'), และ 'จัดการ'

ในคอลัมน์ 'จัดการ' ให้มีปุ่ม 'แก้ไข' (เมื่อกดต้องดึงข้อมูลกลับไปที่ฟอร์ม) และปุ่ม 'ลบ'

ส่วนที่ 3: สรุปสถิติ (UI) สร้างการ์ดสำหรับแสดงกราฟสรุป 2 ส่วน:

กราฟแท่ง (Bar Chart) สรุปจำนวน 'ขนาดเสื้อ' (S, M, L, ...)

กราฟวงกลม (Pie Chart) สรุปสัดส่วน 'เพศ'

ส่วนที่ 4: การทำงานเบื้องหลัง (Backend - Google Apps Script) ฉันมี Google Sheet ID: 1Tc-8pyzFNoxMYsAzog6HnPw8TkzIeAe79TPmfN6XZXw และ GAS Web App URL: https://script.google.com/macros/s/AKfycbyCaLxBqhUk25Zwsnd_SKKBeAJ4A3d2okJPwuKc8TS33hBjBjTLXd5doCipJCDkNIAH/exec

โปรดสร้างโค้ด 2 ไฟล์:

index.html (สำหรับวางใน GAS):

ต้องมี JavaScript ที่ใช้ fetch() เพื่อสื่อสารกับ GAS URL

ต้องมีฟังก์ชัน handleSave, handleUpdate, handleDelete, fetchData, renderTable, renderCharts, downloadCSV

ฟังก์ชัน toBase64 สำหรับแปลงไฟล์รูปภาพก่อนส่ง

Data Cache: ใช้ localStorage เพื่อเก็บข้อมูลที่โหลดมาครั้งล่าสุด และแสดงผลทันทีเมื่อเปิดหน้าเว็บ (ก่อนที่จะกด 'เรียกดูข้อมูล')

Code.gs (สำหรับ Google Apps Script):

ต้องมีตัวแปร SHEET_ID และ FOLDER_ID (สำหรับ Google Drive)

doGet(e): ต้องรองรับ 2 สถานการณ์:

ถ้าเปิด URL ตรงๆ: ให้แสดงผล index.html (HtmlService.createHtmlOutputFromFile('index'))

ถ้ามี action=read หรือ action=delete: ให้เรียกฟังก์ชัน readData() หรือ deleteData()

doPost(e): ต้องรองรับ action=create และ action=update

ฟังก์ชัน CRUD:

createData(data): ต้องบันทึกข้อมูลทั้งหมด (รวม 'ที่อยู่' และ 'เบอร์โทร') ลงในแถวใหม่

readData(): ต้องอ่านข้อมูลทั้งหมด (รวม 'ที่อยู่' และ 'เบอร์โทร')

updateData(data): ต้องอัปเดตข้อมูลตามแถว (ID)

deleteData(id): ต้องลบข้อมูลตามแถว (ID)

File Handling: ต้องมีฟังก์ชัน saveFileToDrive(base64Data, fileName, fileType) ที่บันทึกไฟล์ลง Google Drive, ตั้งค่าเป็นสาธารณะ (Anyone with the link can view) และคืนค่า URL ของไฟล์กลับมาเพื่อบันทึกลง Sheet

ส่วนที่ 5: Footer ในหน้าเว็บ HTML ให้ใส่ Footer ข้อความ: Copyright © 2025 ระบบสำรวจและสั่งซื้อเสื้อกีฬา | By ครูเปิงมางfc "

ระบบงานสารสนเทศโรงเรียน (School Information System)

ไม่มีรูป

แจก PROMPT : ระบบงานสารสนเทศโรงเรียน (School Information System)
คุณคือผู้เชี่ยวชาญด้านการพัฒนา Web Application ด้วย Google Apps Script + Google Sheets
จงออกแบบและสร้างระบบ “งานสารสนเทศของโรงเรียน (Schoo...

รายละเอียดทั้งหมด
แจก PROMPT : ระบบงานสารสนเทศโรงเรียน (School Information System)
คุณคือผู้เชี่ยวชาญด้านการพัฒนา Web Application ด้วย Google Apps Script + Google Sheets
จงออกแบบและสร้างระบบ “งานสารสนเทศของโรงเรียน (School Information System)” แบบครบวงจร โดยมีรายละเอียดดังนี้:
🎯 วัตถุประสงค์:
- ใช้บริหารจัดการข้อมูลนักเรียน ครู บุคลากร และข้อมูลทางวิชาการ
- ใช้เป็น Dashboard สำหรับผู้บริหาร
- ใช้เก็บและวิเคราะห์ข้อมูลเพื่อการตัดสินใจ
📦 โครงสร้างระบบ (Modules):
1. 👨‍🎓 ระบบข้อมูลนักเรียน
- เพิ่ม / แก้ไข / ลบ / ค้นหา
- ข้อมูล: เลขประจำตัว, ชื่อ-สกุล, ห้อง, แผนการเรียน, เบอร์โทร, ผู้ปกครอง
- แสดงรายชื่อนักเรียนรายห้อง
- Export Excel / PDF
2. 👩‍🏫 ระบบข้อมูลครูและบุคลากร
- เก็บข้อมูล: ชื่อ, ตำแหน่ง, กลุ่มสาระ, เบอร์โทร
- แสดงโครงสร้างองค์กร
3. 📊 Dashboard ผู้บริหาร
- จำนวน นักเรียน / ครู
- สถิติการมาเรียน / ขาด / ลา
- กราฟแสดงข้อมูล (Chart.js)
- แยกตามระดับชั้น (ม.1–ม.6)
4. 📚 ระบบผลการเรียน
- บันทึกคะแนนรายวิชา
- คำนวณเกรดอัตโนมัติ
- แสดง GPA
- รายงานผลรายบุคคล
5. 📝 ระบบเช็คชื่อ / เวลาเรียน
- เช็คชื่อรายวัน
- สรุป ขาด / ลา / มาสาย
- Dashboard สถิติ
6. 📌 ระบบกิจกรรม
- บันทึกการเข้าร่วมกิจกรรม
- ระบบสะสมคะแนน
- ใช้ออกเกียรติบัตรได้
7. 📄 ระบบเอกสาร / คำร้อง
- นักเรียนยื่นคำร้องออนไลน์
- อนุมัติ (ครู / ผู้บริหาร)
- สถานะ: รอดำเนินการ / อนุมัติ / ไม่อนุมัติ
8. 🔐 ระบบ Login
- แบ่งสิทธิ์:
- Admin
- Teacher
- Student
🎨 UI/UX:
- ใช้ Sidebar Menu (Hamburger)
- โทนสี: ฟ้า + เหลือง (สไตล์โรงเรียน)
- Responsive รองรับมือถือ
- ใช้ SweetAlert แจ้งเตือน
⚙️ เทคโนโลยี:
- Google Apps Script (Backend)
- Google Sheets (Database)
- HTML + CSS + JavaScript (Frontend)
- ใช้ Fetch API / JSON
📁 โครงสร้างไฟล์:
- Code.gs
- index.html
- style.css
- script.js
🧩 ฟีเจอร์พิเศษ:
- ระบบค้นหาแบบ Real-time
- Export PDF
- QR Code (สำหรับนักเรียน)
- แจ้งเตือนผ่าน Line Notify
- ระบบ Log การใช้งาน
📊 โครงสร้าง Google Sheets:
- Sheet: Students
- Sheet: Teachers
- Sheet: Attendance
- Sheet: Scores
- Sheet: Activities
- Sheet: Requests
🎯 ผลลัพธ์ที่ต้องการ:
- Code พร้อมใช้งาน
- UI สวยงาม
- ใช้งานได้จริง
- มีตัวอย่างข้อมูล

ระบบส่งแผนการสอนและบันทึกหลังแผน (Google Apps Script)

ไม่มีรูป

คำสั่งสำหรับสร้าง: ระบบส่งแผนการสอนและบันทึกหลังแผน (Google Apps Script)

กรุณาสร้างเว็บแอปพลิเคชันแบบหน้าเดียว (Single Page Application) โดยใช้ Google Apps Script (ไฟล์ index.html สำหรับ Frontend และ Co...

รายละเอียดทั้งหมด
คำสั่งสำหรับสร้าง: ระบบส่งแผนการสอนและบันทึกหลังแผน (Google Apps Script)

กรุณาสร้างเว็บแอปพลิเคชันแบบหน้าเดียว (Single Page Application) โดยใช้ Google Apps Script (ไฟล์ index.html สำหรับ Frontend และ Code.gs สำหรับ Backend) สำหรับ "ระบบส่งแผนการสอนและบันทึกหลังแผน"

1. ข้อกำหนดทางเทคนิคและไลบรารี

Frontend: index.html

ใช้ Tailwind CSS สำหรับการออกแบบทั้งหมด

ใช้ SweetAlert2 สำหรับการแจ้งเตือน (บันทึกสำเร็จ, กำลังโหลด, ข้อผิดพลาด, ยืนยันการลบ)

ใช้ Chart.js สำหรับการแสดงผลกราฟสถิติ

ใช้ QRious สำหรับการสร้าง QR Code

ใช้ SheetJS (xlsx.full.min.js) สำหรับการส่งออกไฟล์ Excel

Backend: Code.gs

ทำหน้าที่เป็น API Server เพื่อสื่อสารกับ Google Sheets

Font: ใช้ "Sarabun" เป็นฟอนต์หลักของระบบ

Design: ธีมสีหลักเป็น สีน้ำเงินพาสเทล - เหลืองอ่อนมาก (Pastel Blue - Very Light Yellow) ออกแบบให้สวยงาม ทันสมัย และใช้งานง่าย

2. โครงสร้างหน้าเว็บ (Tabs)

สร้างระบบแบบแท็บ (Tabs) 5 ส่วนหลัก:

ส่งแผนการสอน: (แท็บเริ่มต้น)

สถานะแผนการสอน

ส่งบันทึกหลังแผน

สถานะบันทึกหลังแผน

สำหรับ Admin

3. โมดูลที่ 1 & 3: หน้าส่งข้อมูล (แผนการสอน และ บันทึกหลังแผน)

สร้างฟอร์มสำหรับกรอกข้อมูล โดยทั้งสองฟอร์มมีโครงสร้างเหมือนกัน แต่บันทึกข้อมูลไปยัง Google Sheet คนละไฟล์

ฟิลด์ข้อมูล:

ชื่อ-สกุล (text)

กลุ่มสาระการเรียนรู้ (select dropdown)

รหัสวิชา (text)

รายวิชา (text)

ภาคเรียนที่ (number)

ปีการศึกษา (number)

แนบลิงค์ (url)

ฟังก์ชัน:

เมื่อกรอกลิงค์ในช่อง "แนบลิงค์" ให้สร้าง QR Code แสดงผลในฟอร์มทันที

ปุ่ม "บันทึกข้อมูล": ใช้สำหรับ "สร้างใหม่" (Create) และ "อัปเดต" (Update) ข้อมูล (เมื่อคลิก "แก้ไข" จากหน้า Admin)

ปุ่ม "ล้างข้อมูล": สำหรับรีเซ็ตฟอร์ม

การเชื่อมต่อ (Backend):

แผนการสอน: บันทึกข้อมูลไปที่ Google Sheet ID 1z2hnk2C34pAR-VcMnipdNNdzwRob4BLAexRfet_hV1g ในแท็บชีตชื่อ Sheet1

บันทึกหลังแผน: บันทึกข้อมูลไปที่ Google Sheet ID 1nktP_nIcUzoBhotsOzKpMGL2or3fkfusYe7MiGgTseA ในแท็บชีตชื่อ Sheet2

เมื่อกดบันทึก ให้แสดง SweetAlert "กำลังบันทึก..." และ "บันทึกสำเร็จ!" เมื่อเสร็จสิ้น

4. โมดูลที่ 2 & 4: หน้าสถานะ (แผนการสอน และ บันทึกหลังแผน)

สร้างหน้าสำหรับให้ครูทั่วไปตรวจสอบสถานะ

แดชบอร์ด:

แสดงจำนวนการส่งทั้งหมด (เช่น "จำนวนส่งแผนการสอนทั้งหมด")

แสดงจำนวนการดูทั้งหมด (หากทำได้ หรือใส่ " - " ไว้ก่อน)

กราฟสถิติ:

ใช้ Chart.js แสดง กราฟแท่ง (Bar Chart) สรุปจำนวนการส่งตามสถานะ (อนุมัติ, ไม่อนุมัติ, รอตรวจ)

เครื่องมือ:

ช่องค้นหา (ค้นหาจากทุกฟิลด์)

ปุ่ม "รีเฟรชข้อมูล"

ตารางแสดงผล:

แสดงข้อมูลทั้งหมดจาก Google Sheet (ตามประเภท)

คอลัมน์: ชื่อ-สกุล, กลุ่มสาระฯ, รายวิชา, สถานะ (แสดงเป็น Badge สี), หมายเหตุ, QR Code

เมื่อนำเมาส์ไปวางบน QR Code ให้ขยายใหญ่ขึ้น

ดาวน์โหลด:

ปุ่ม "ดาวน์โหลดข้อมูล (CSV)"

5. โมดูลที่ 5: สำหรับผู้ดูแลระบบ (Admin)

ระบบ Login:

เมื่อคลิกแท็บ "สำหรับ Admin" ให้แสดง Modal Login

Username: admin, Password: 1234

หากล็อกอินผิด ให้แสดง SweetAlert แจ้งเตือน

หากล็อกอินถูก ให้ปิด Modal และแสดงหน้า Admin

หน้า Admin:

ปุ่มออกจากระบบ: แสดงปุ่มนี้หลังจากล็อกอินสำเร็จ เมื่อกดให้ออกจากระบบและกลับไปแท็บแรก

ตัวสลับโหมด: สร้าง Radio button เพื่อเลือกว่าจะจัดการ "แผนการสอน" หรือ "บันทึกหลังแผน"

แดชบอร์ด Admin: แสดงแดชบอร์ด (จำนวนส่ง, จำนวนดู, กราฟแท่งสรุปสถานะ) โดยข้อมูลจะเปลี่ยนไปตามโหมดที่เลือก (แผนการสอน หรือ บันทึกหลังแผน)

เครื่องมือ Admin:

ช่องค้นหา

Dropdown สำหรับ กรองกลุ่มสาระฯ (สำหรับใช้ในการส่งออก)

ปุ่ม "ส่งออกเป็น Excel (.xlsx)": ให้ส่งออกข้อมูลตามกลุ่มสาระฯ ที่เลือก (ถ้าเลือก "ทุกกลุ่มสาระฯ" ก็ให้ส่งออกทั้งหมด)

ปุ่ม "รีเฟรชข้อมูล"

ตารางจัดการข้อมูล:

แสดงข้อมูลเหมือนหน้าสถานะ แต่เพิ่มคอลัมน์ "จัดการ"

สถานะ: เปลี่ยนจากข้อความธรรมดาเป็น <select> dropdown (อนุมัติ, ไม่อนุมัติ, รอตรวจ) เพื่อให้ Admin แก้ไขได้ทันที

หมายเหตุ: เปลี่ยนจากข้อความธรรมดาเป็น <textarea> เพื่อให้ Admin พิมพ์แก้ไขได้ทันที

การอัปเดต: เมื่อ Admin เปลี่ยนสถานะหรือแก้ไขหมายเหตุ ให้แสดง SweetAlert "กำลังอัปเดต..." และ "อัปเดตสำเร็จ!" เมื่อเสร็จสิ้น

ปุ่ม "แก้ไข": เมื่อกด ให้พาทั้งแถวข้อมูลนั้นกลับไปเติมใน "ฟอร์มส่งข้อมูล" (ของโมดูล 1 หรือ 3) เพื่อให้ Admin แก้ไขข้อมูลหลักได้

ปุ่ม "ลบ": เมื่อกด ให้แสดง SweetAlert ยืนยันก่อนลบ

6. ข้อกำหนด Backend (Code.gs)

สร้างฟังก์ชัน doGet(e) เพื่อแสดงผล index.html

สร้างฟังก์ชัน getSheetData(type) เพื่อดึงข้อมูลตามประเภท (lessonPlan, postLog)

สร้างฟังก์ชัน submitData(dataObject, type) เพื่อรับข้อมูลจากฟอร์ม และแยกแยะระหว่างการสร้างใหม่ (create) หรืออัปเดต (update)

สร้างฟังก์ชัน updateField(rowId, field, value, type) สำหรับการอัปเดตสถานะและหมายเหตุจากหน้า Admin

สร้างฟังก์ชัน deleteData(rowId, type) สำหรับลบข้อมูล

สร้างฟังก์ชัน loginAdmin(credentials) เพื่อตรวจสอบการล็อกอิน

สำคัญ: ใช้ Configuration Object (SHEETS_CONFIG) ที่ส่วนบนของไฟล์ Code.gs เพื่อจัดการ ID และชื่อแท็บชีตของ Google Sheet ทั้งสองไฟล์ เพื่อให้แก้ไขได้ง่ายในอนาคต

7. อื่นๆ

Error Handling:

จัดการข้อผิดพลาดหากไม่สามารถเชื่อมต่อ Google Sheet ได้ (เช่น สิทธิ์ไม่พอ, หาชีตไม่เจอ) และแสดงผลผ่าน SweetAlert

สร้างหน้าจอแจ้งเตือนที่สวยงาม หากผู้ใช้เปิดไฟล์ index.html โดยตรงจากคอมพิวเตอร์ (ตรวจจับ google.script.run ว่า undefined)

Footer:

แสดงข้อความ "Copyright © 2025 ระบบส่งแผนการสอน | By ครูเปิงมางfc"

ระบบส่งงานเอกสาร วPA

ไม่มีรูป

✅ PROMPT สร้างระบบส่งงานเอกสาร วPA (พร้อมโค้ดตัวอย่างครบ)

คุณคือผู้เชี่ยวชาญด้าน Google App Script, HTML, CSS, JavaScript และ UX/UI สำหรับระบบโรงเรียน
ให้สร้าง ระบบส่งงานเอกสาร วPA ออนไลน์ สำหรั...

รายละเอียดทั้งหมด
✅ PROMPT สร้างระบบส่งงานเอกสาร วPA (พร้อมโค้ดตัวอย่างครบ)

คุณคือผู้เชี่ยวชาญด้าน Google App Script, HTML, CSS, JavaScript และ UX/UI สำหรับระบบโรงเรียน
ให้สร้าง ระบบส่งงานเอกสาร วPA ออนไลน์ สำหรับครูผู้สอน โดยมีคุณสมบัติดังนี้

🎯 1) คุณสมบัติระบบ
A. สำหรับผู้ส่งเอกสาร (ครูผู้สอนทุกคน)

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

ชื่อ - สกุล

กลุ่มสาระการเรียนรู้

ปีการศึกษา

รอบ PA (PA1 / PA2)

ประเภทเอกสารที่ส่ง เช่น

รายงานผลการจัดการเรียนรู้

บันทึกหลังการสอน

งานพัฒนาคุณภาพผู้เรียน

หลักฐานประกอบตัวชี้วัด

ช่องอัปโหลดไฟล์เอกสาร (PDF/Word/ภาพ)

หลังส่งข้อมูลให้มี SweetAlert แจ้งว่า “ส่งงานสำเร็จ”

B. การเก็บข้อมูล

เก็บข้อมูลทั้งหมดลง Google Sheet ID :

ไฟล์เอกสารอัปโหลดเก็บใน Google Drive ID :

Sheet ต้องมีลิงก์ไฟล์อัตโนมัติ

C. การค้นหา & ตรวจสอบสถานะ

หน้า “ตรวจสอบสถานะเอกสาร”

เลือกชื่อครู แล้วแสดงรายการเอกสารที่เคยส่ง

แสดงวัน-เวลา

แสดงลิงก์ไฟล์

แสดงสถานะการตรวจ (ยังไม่ตรวจ / ผ่าน / แก้ไข)

D. สำหรับผู้บริหาร/กรรมการ วPA

หน้า Dashboard

ดูรายการเอกสารทั้งหมด

ค้นหาโดย: ชื่อครู / รอบ PA / ปีการศึกษา

ปุ่มเปลี่ยนสถานะเป็น

ผ่าน

ต้องแก้ไข

รับแล้ว

ส่งแจ้งเตือนกลับไปยังครูด้วย SweetAlert

🎨 2) ข้อกำหนด UI

โทนสี “ฟ้าพาสเทล – เหลืองอ่อน”

จัดวางแบบเรียบง่าย ฟอนต์อ่านง่าย

ปุ่มสีฟ้าอ่อน ขอบมน 8px

กล่องฟอร์มมีเงาเบาๆ (box-shadow: 0px 2px 10px rgba(0,0,0,0.1))

🧩 3) โครงสร้างไฟล์

Code.gs — โค้ด App Script

index.html — แบบฟอร์มส่งงาน

status.html — หน้าแสดงสถานะ

dashboard.html — ผู้ตรวจ วPA

CSS ใน <style> ให้ใช้ธีมสีที่กำหนด

ใช้ SweetAlert2 ทุกหน้าสำหรับแจ้งเตือน

🧪 4) ตัวอย่างโค้ดที่ต้องสร้าง

ระบบต้องสร้างโค้ดตัวอย่างให้ครบดังนี้

A. Code.gs

function doGet() เลือกหน้า index ตั้งต้น

function upload() เก็บข้อมูลลง Sheet + Drive

function getStatus() ดึงข้อมูลผู้ส่ง

function updateStatus() สำหรับกรรมการ

ตั้งค่าการอนุญาตไฟล์ Drive

B. index.html

ฟอร์มส่งเอกสาร

ปุ่ม Upload → ส่งข้อมูลด้วย google.script.run

SweetAlert “ส่งงานเรียบร้อยแล้ว”

C. status.html

เลือกชื่อครู → แสดงรายการเอกสาร

ตารางสีฟ้าอ่อน

ลิงก์เปิดไฟล์

D. dashboard.html

ตารางข้อมูลทุกคน

ปุ่มสถานะ (ผ่าน / แก้ไข / รับแล้ว)

กดแล้วเปลี่ยนสถานะในชีตทันที

แจ้งเตือน SweetAlert2

🧾 5) ให้แสดงผลลัพธ์ดังนี้

โค้ด App Script ครบทุกฟังก์ชัน

โค้ด HTML+CSS+JS ครบทุกหน้า

โครงสร้าง Sheet ที่ต้องตั้งค่า

อธิบายวิธี deploy เป็น Web App

ตัวอย่าง UI (Mock Layout)

⭐ ใช้คำสั่งด้านบนนี้สร้างระบบให้สมบูรณ์แบบที่สุด

หากต้องการให้ผมสร้าง โค้ดจริงทุกไฟล์ พร้อม UI ให้เลย บอกได้เลยครับ
ครูเปิงมางต้องการเวอร์ชัน เต็ม หรือ ลดรูปเฉพาะหน้าส่งงาน ครับ?

ระบบส่งงานวิจัยในชั้นเรียน (Full System

ไม่มีรูป

Prompt: ระบบส่งงานวิจัยในชั้นเรียน (Full System)
คำสั่ง: ช่วยเขียนโค้ดสำหรับสร้าง "เว็บแอปพลิเคชันระบบส่งงานวิจัยในชั้นเรียน" โดยใช้ Google Apps Script (GAS) ร่วมกับ HTML/Bootstrap 5 แบบ Single Page A...

รายละเอียดทั้งหมด
Prompt: ระบบส่งงานวิจัยในชั้นเรียน (Full System)
คำสั่ง: ช่วยเขียนโค้ดสำหรับสร้าง "เว็บแอปพลิเคชันระบบส่งงานวิจัยในชั้นเรียน" โดยใช้ Google Apps Script (GAS) ร่วมกับ HTML/Bootstrap 5 แบบ Single Page Application (SPA) ที่มีคุณสมบัติครบถ้วนดังนี้:

1. การออกแบบ UI/UX

Theme: สีพาสเทล (ฟ้า Pastel - เหลืองอ่อน) สบายตา ทันสมัย

Layout: ใช้โครงสร้างแบบ Dashboard Sidebar (เมนูอยู่ด้านซ้าย)

บน Desktop: เมนูอยู่ซ้าย เนื้อหาอยู่ขวา

บน Mobile: เมนูปรับเป็นแถบด้านบน (Responsive)

Logo: มีโลโก้รูปวงกลมที่แถบเมนู (ใช้ URL: https://img5.pic.in.th/file/secure-sv1/unnamed2d82981d63fd6f73.jpg)

Footer: แสดงข้อความ "Copyright © 2025 ระบบส่งงานวิจัยในชั้นเรียน | By ครูเปิงมางfc"

2. ฟังก์ชันฝั่งผู้ใช้งาน (User - index.html) แบ่งหน้าจอเป็น 3 แท็บเมนู:

แท็บ 1: ภาพรวมสถิติ (Dashboard)

แสดง Card สรุปยอด 4 ใบ: ทั้งหมด, ผ่าน, ต้องแก้ไข, รอตรวจสอบ

แสดง Progress Bar สรุปยอดแยกตาม "ประเภทงานวิจัย"

แท็บ 2: ส่งงานวิจัย (Submission Form)

ฟิลด์ข้อมูล: ชื่อครู, กลุ่มสาระฯ (Dropdown), รายวิชา, ชื่อหัวข้อวิจัย, ประเภทวิจัย (Dropdown), ไฟล์แนบ, หมายเหตุ

ระบบอัปโหลดไฟล์:

ต้องใช้ระบบ Resumable Upload (ยิงผ่าน Google Drive API) เพื่อรองรับไฟล์ขนาดใหญ่

จำกัดขนาดไฟล์ไม่เกิน 10 MB (มี Alert แจ้งเตือนถ้าเกิน)

มี Progress Bar แสดงเปอร์เซ็นต์ขณะอัปโหลด

แท็บ 3: เช็คสถานะ (Check Status)

ค้นหาประวัติการส่งงานด้วย "ชื่อครู"

แสดงผลในรูปแบบ Card

ปุ่ม "รายละเอียด": กดแล้วขึ้น Popup (Modal) แสดงข้อมูลครบทุกช่อง รวมถึงสถานะและคอมเมนต์จาก Admin

ปุ่ม "ส่งงานแก้ไข": จะปรากฏเฉพาะเมื่อสถานะเป็น "แก้ไข"

เมื่อกดจะมี Popup ให้แนบไฟล์ใหม่และใส่หมายเหตุ

ระบบต้องไปอัปเดตแถวเดิมใน Google Sheet (ไม่เพิ่มแถวใหม่) และเปลี่ยนสถานะกลับเป็น "รอตรวจสอบ"

3. ฟังก์ชันฝั่งผู้ดูแล (Admin - admin.html)

แสดงตารางรายการทั้งหมด (ใช้ DataTables)

สามารถค้นหา, กรองข้อมูลได้

ปุ่ม "ตรวจ/แก้ไข": เปิด Modal เพื่อแก้ไขข้อมูลได้ทุกช่อง และเปลี่ยนสถานะงาน (รอตรวจสอบ/ผ่าน/แก้ไข) พร้อมใส่ข้อความ Feedback ถึงครูได้

ปุ่ม "ลบ": ลบข้อมูลออกจาก Sheet

4. โครงสร้างฐานข้อมูล (Google Sheet) ให้เขียนโค้ดรองรับคอลัมน์ดังนี้ (เรียงตามลำดับ):

ID (สร้างอัตโนมัติ)

วันที่ส่ง

ชื่อครูผู้สอน

กลุ่มสาระการเรียนรู้ / แผนกวิชา

รายวิชา

ชื่อหัวข้องานวิจัย

ประเภทงานวิจัย

หมายเหตุ

ชื่อไฟล์

ลิงก์ไฟล์ (URL)

สถานะ (Default = รอตรวจสอบ)

ข้อความจาก Admin

5. การตั้งค่าระบบ (Configuration)

Google Sheet ID: 1WYsGUcCymY348C_s8FU49BNunSA2xJ-Wmx4Dpv6vEhY

Google Drive Folder ID: 1f20OzNRqPDCzqyr1Jmgx6sdOn-ekanw_

สิทธิ์การเข้าถึง (Scopes): ระบุเนื้อหาในไฟล์ appsscript.json ให้รองรับ script.external_request และ drive เพื่อให้ระบบอัปโหลดทำงานได้

สิ่งที่ต้องการ: ขอโค้ดครบชุดประกอบด้วยไฟล์:

Code.gs (Backend)

index.html (User UI + CSS + JS)

admin.html (Admin UI + CSS + JS)

appsscript.json (Manifest file)

คำอธิบายวิธีติดตั้งและการเปิดใช้งาน Google Drive API ใน Cloud Console

สิ่งที่คุณต้องเตรียมเมื่อนำ Prompt นี้ไปใช้:
เมื่อ AI Gen โค้ดออกมาให้แล้ว สิ่งที่คุณต้องทำเอง (Manual Steps) คือ:

สร้าง Google Sheet และตั้งหัวข้อคอลัมน์ตามข้อ 4

เปิด Google Drive API ในเมนู Project Settings > Google Cloud Platform

Update Manifest แก้ไขไฟล์ appsscript.json ตามที่ AI ให้มา

Deploy เลือกเป็น Web App > User accessing: Anyone

Ai Poster

รายการทั้งหมด

PROMPT สร้างระบบ

PROMPT สร้างระบบ