Prompt :

เปลี่ยนเป็นภาพ figures 3d เหมือนจริง ที่อยู่ในบรรจุภัณฑ์

โดยบนบรรจุภัณฑ์ให้มีข้อความว่า “Thanchanok”

📱ช่องอุปกรณ์เสริม (Accessories Section):

ไอเทมที่ 1: มือถือไอโฟน 11 สีดำ

ไอเทมที่ 2: นาฬิกา

ไอเทมที่ 3: นํ้าโค้ก

ไอเทมที่ 4: รองเท้าNike

ไอเทมที่ 5 : โดเลม่อน

ไอเทมที่ 6 : แมว

ขนาด 9:16

กันต์

11/09/2549

092-829-1263

mrthanakrit2006@gmail.com

คติประจำใจ: งานหนักไม่เอา งานเบาสู้ตาย

ชื่อเล่น แฟรงค์

17/02/48

0660534581

ezjuhabach@gmail.com

คติ ทำวันนี้ให้ดี

ช่องอุปกรณ์เสริม (Accessories Section): ให้อยู่ขวามือ

ไอเทมที่ 1: Oppo A3x

ไอเทมที่ 2: สร้อยทองที่คอ

ไอเทมที่ 3: แก้วน้ำเยติสีดำ

ไอเทมที่ 4: หมวกแก๊ปสีขาว

ไอเทมที่ 5 : คอมพิวเตอร์ Note Book

ไอเทมที่ 6 : กราฟเทรดทอง

ไอเทมที่ 7 : กระเป๋าเป้สีดำ

ขนาด 9:16

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

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

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

1. แอคชั่น : ทำมือเป็น มินิฮาร์ท

2. แอคชั่น : ปลื้มใจ

3. แอคชั่น : ยกนิ้วโป้งข้างเดียว

4. แอคชั่น : ยกนิ้วโป้งสองข้าง

5. แอคชั่น : เก๊กหล่อ

6. แอคชั่น : OK

7. แอคชั่น : ชูสองนิ้ว ยิ้มกว้าง

8. แอคชั่น : นอนหลับห่มผ้า

9. แอคชั่น : โบกมือ

ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

- รูปแบบเว็บแอปให้แสดงรูปภาพเป็นหัวเว็บแบบเต็มพื้นที่หัวเว็บ ขนาด 1600 x 500 พิกเซลโดยนำเข้าไฟล์รูปภาพจาก xxx

- ไม่ต้องมีข้อความใดๆบนหัวเว็บ

- สไตล์โดยรวม: เรียบง่าย (Minimal), ใช้งานง่าย (User-friendly)

-โทนสีหลัก: พาสเทลโทนสีทอง, ทองอ่อนมากเป็นพื้นหลัง

-ฟอนต์: อ่านง่าย (เช่น Sarabun หรือ Noto Sans Thai)

-สามารถใช้งานผ่านโทรศัพท์มือถือและคอมพิวเตอร์ได้ดี(Responsive)

และเก็บข้อมูลดังต่อไปนี้

1.มีปุ่ม”ลงนามถวายพระพร” เมื่อกดปุ่มแล้วให้มี popup แสดงรายละเอียดดังนี้

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

- สังกัด/ประชาชน มีตัวอย่างข้อความที่กรอก “เช่น วิทยาลัยอาชีวศึกษานครสวรรค์, ประชาชน”

- ข้อความถวายพระพร (“ขอองค์สมเด็จพระเจ้าอยู่หัวทรงพระเจริญยิ่งยืนนาน”,ข้าพระพุทธเจ้าขอพระราชทานถวายพระพรชัยมงคล ขอองค์สมเด็จพระเจ้าอยู่หัว ทรงมีพระพลานามัยสมบูรณ์แข็งแรง และทรงพระเกษมสำราญ, ขอพระองค์ทรงพระเจริญ มีพระชนย์มายุยิ่งยืนนานเป็นร่มโพธิ์ร่มไทรแก่ปวงชนชาวไทยขอให้พระองค์ทรงมีพลามัยสมบูรณ์แข็งแรงเป็นพ่อหลวงของปวงชนชาวไทยตลอดไป)

- ปุ่มบันทึก “ยืนยันการลงนาม”

- ปุ่มยกเลิกการลงนาม

2. ถัดจากปุ่ม”ลงนามถวายพระพร” มีสถิติการลงนามถวายพระพร

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

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

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

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

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

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

9.เชื่อม App Script ที่ URL: xxx

10. SHEET_ID: xxx

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

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

14. footer “พัฒนาโดย : xxx ”

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

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

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


สิ่งที่ควรพัฒนา:
เพราะการมั่วแต่คิดเยอะทำให้ไม่ค่อยได้ลงมือทำเป็นชิ้นเป็นอัน หรือทำอะไรหลาย ๆ อย่างพร้อมกันจนไม่ได้โฟกัสรายละเอียดเท่าที่ควร และบางครั้งทำให้ไม่ได้จัดลำดับความสำคัญของงาน

prompt ชิ้นงานที่ 2

Prompt 1 : เปลี่ยนเป็นภาพน่ารักสไตล์ Chibi 9 ช่อง

เพื่อทำสติ๊กเกอร์ไลน์ พร้อมท่าทาง 9 แอคชั่น ดังนี้

1. แอคชั่น : ทำมือเป็น มินิฮาร์ท

2. แอคชั่น : ปลื้มใจ

3. แอคชั่น : ยกนิ้วโป้งข้างเดียว

4. แอคชั่น : ยกนิ้วโป้งสองข้าง

5. แอคชั่น : ทำความเคารพแบบทหาร

6. แอคชั่น : OK

7. แอคชั่น : ชูสองนิ้ว ยิ้มกว้าง

8. แอคชั่น : นอนหลับห่มผ้า

9. แอคชั่น : โบกมือ

ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

Onjira Wilairat

ผิง

10 สิงหาคม 2549

0625274445

onjira416@gmail.com

คติประจำใจ : คิดไม่ออก ให้ออกไปคิด

เป็นคนที่ชอบความมั่นคงสูง ไม่ชอบการเปลี่ยนแปลง เน้นช้าแต่ชัว เน้นคุณภาพและกระบวนการที่ถูกต้องเป็นระบบ ชอบหาข้อมูลรายละเอียด มีระเบียบวินัยสูง ชอบอยู่คนเดียวโลกส่วนตัวสูง คนกลุ่มนี้มักไม่ค่อยแสดงความรู้สึกและไม่ชอบความวุ่นวาย การสื่อสารกับหมีต้องเน้นหลักการและทฤษฎี

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

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

3. 3 เมษายน 2549

4. 0980078726

5. aumaumm2112@gmail.com

6. ขอให้เป็นวันที่ดีอีกวัน

เป็นคนที่ชอบความมั่นคงสูง ไม่ชอบการเปลี่ยนแปลง เน้นช้าแต่ชัว เน้นคุณภาพและกระบวนการที่ถูกต้องเป็นระบบ ชอบหาข้อมูลรายละเอียด มีระเบียบวินัยสูง ชอบอยู่คนเดียวโลกส่วนตัวสูง คนกลุ่มนี้มักไม่ค่อยแสดงความรู้สึกและไม่ชอบความวุ่นวาย การสื่อสารกับหมีต้องเน้นหลักการและทฤษฎี

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

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

ใบเตย

13/10/2549

0993274994

napattpannak@gmail.com

อย่าท้อกับชีวิต แม้วันนี้มันไม่ดี ก็ไม่ได้แปลว่าไม่ดีเสมอไป

Prompt : เปลี่ยนเป็นภาพ figures 3d เหมือนจริง ที่อยู่ในบรรจุภัณฑ์ โดยบนบรรจุภัณฑ์ให้มีข้อความว่า “Panthep” ช่องอุปกรณ์เสริม (Accessories Section):

ไอเทมที่ 1: มือถือไอโฟน xr สีดำ

ไอเทมที่ 2: นาฬิกา casio

ไอเทมที่ 3: แก้วกาแฟ

ไอเทมที่ 4: ไอแพด

ไอเทมที่ 5 : คอมพิวเตอร์ MAC Book

ไอเทมที่ 6 : กราฟเทรดทอง ขนาด 9:16

ปัญญา นกรรัมย์

19 มีนาคม 2550

0637310838phu63446@gmail.com

คติประจำใจ:เรื่องบังเอิญไม่มีจริง

Prompt :

เปลี่ยนเป็นภาพ figures 3d เหมือนจริง ที่อยู่ในบรรจุภัณฑ์

โดยบนบรรจุภัณฑ์ให้มีข้อความว่า “Onjira”

📱ช่องอุปกรณ์เสริม (Accessories Section):

ไอเทมที่ 1: Iphone 16 สีชมพู

ไอเทมที่ 2: สร้อยข้อมือ PANDORA สีชมพู

ไอเทมที่ 3: labubu สีชมพู

ไอเทมที่ 4: รองเท้าแตะCrocsสีขาว

ไอเทมที่ 5 : IPAD

ไอเทมที่ 6 : DIOR BACKSTAGE EYE PALETTE

ไอเทมที่ 7 : Hello Kitty and my melody

ขนาด 9:16

เป็นคนที่ชอบความมั่นคงสูง ไม่ชอบการเปลี่ยนแปลง เน้นช้าแต่ชัว เน้นคุณภาพและกระบวนการที่ถูกต้องเป็นระบบ ชอบหาข้อมูลรายละเอียด มีระเบียบวินัยสูง ชอบอยู่คนเดียวโลกส่วนตัวสูง คนกลุ่มนี้มักไม่ค่อยแสดงความรู้สึกและไม่ชอบความวุ่นวาย การสื่อสารกับหมีต้องเน้นหลักการและทฤษฎี

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

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

Chibi 9 ช่อง

เพื่อทำสติ๊กเกอร์ไลน์ พร้อมท่าทาง 9 แอคชั่น ดังนี้ 1. แอคชั่น : ทำมือเป็น มินิฮาร์ท

2. แอคชั่น : ปลื้มใจ

3. แอคชั่น : ยกนิ้วโป้งข้างเดียว

4. แอคชั่น : ยกนิ้วโป้งสองข้าง

5. แอคชั่น : ทำความเคารพแบบทหาร

6. แอคชั่น : OK

7. แอคชั่น : ชูสองนิ้ว ยิ้มกว้าง

8. แอคชั่น : นอนหลับห่มผ้า

9. แอคชั่น : โบกมือ ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

Prompt 1 : เปลี่ยนเป็นภาพน่ารักสไตล์ Chibi 9 ช่อง

เพื่อทำสติ๊กเกอร์ไลน์ พร้อมท่าทาง 9 แอคชั่น ดังนี้

1. แอคชั่น : ทำมือเป็นหัวใจ🫶🏻

2. แอคชั่น : โกรธ

3. แอคชั่น : ขอบคุณค่ะ

4. แอคชั่น : ยกนิ้วโป้งสองข้าง ทำหน้าว้าว

5. แอคชั่น : ไหว้ย่อ

6. แอคชั่น : OK

7. แอคชั่น : ชูสองนิ้ว ยิ้มกว้าง

8. แอคชั่น : นอนหลับห่มผ้า Good Night

9. แอคชั่น : โบกมือ Bye

ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

เปลี่ยนเป็นภาพ figures 3d เหมือนจริง ที่อยู่ในบรรจุภัณฑ์

โดยบนบรรจุภัณฑ์ให้มีข้อความว่า “thananchai”

📱ช่องอุปกรณ์เสริม (Accessories Section) อยู่ด้านซ้ายมือของต้นฉบับ:

ไอเทมที่ 1: โทรศัพษ์รุ่น oppo

ไอเทมที่ 2: laptop

ไอเทมที่ 3: แก้วกาแฟ

ไอเทมที่ 4: สุนัข

ไอเทมที่ 5 : คอมพิวเตอร์

ไอเทมที่ 6 : แมว

ขนาด 9:16

ลิ้งก์สั้น : https://forms.gle/Lpr9vboVFhVCLJEY8

จั่น

19/3/2550

0902689845

Junkjxx2550@gmail.com

อย่าทิ้งความฝัน เพียงเพราะไม่มีใครไปเป็นเพื่อน

เปลี่ยนเป็นภาพ figures 3d เหมือนจริง ที่อยู่ในบรรจุภัณฑ์

โดยบนบรรจุภัณฑ์ให้มีข้อความว่า “Naphat”

📱ช่องอุปกรณ์เสริม (Accessories Section): ให้อยู่ด้านซ้ายมือ

ไอเทมที่ 1: มือถือซัมซุง A15 สีฟ้า

ไอเทมที่ 2: นาฬิกา casio

ไอเทมที่ 3: แก้วชาเขียวอเมซอน

ไอเทมที่ 4: ไอแพด

ไอเทมที่ 5 : คอมพิวเตอร์ MAC Book

ไอเทมที่ 6 : กระเป๋ากุชชี่

ไอเทมที่ 7 : สร้อยทอง

ไอเทมที่ 8 : แหวนน่ารักๆ

ขนาด 9:16

เพื่อทำสติ๊กเกอร์ไลน์ พร้อมท่าทาง 9 แอคชั่น ดังนี้

1. แอคชั่น : ทำมือเป็น มินิฮาร์ท

2. แอคชั่น : ปลื้มใจ

3. แอคชั่น : ยกนิ้วโป้งข้างเดียว

4. แอคชั่น : ยกนิ้วโป้งสองข้าง

5. แอคชั่น : ทำความเคารพแบบทหาร

6. แอคชั่น : OK

7. แอคชั่น : ชูสองนิ้ว ยิ้มกว้าง

8. แอคชั่น : นอนหลับห่มผ้า

9. แอคชั่น : โบกมือ

ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

เกิด 4/7/49

เบอร์ 0858393401

อีเมล thinnapat1303@gmail.com

คติประจำใจ ใช้ชีวิตให้สนุก

เพื่อทำสติ๊กเกอร์ไลน์ พร้อมท่าทาง 9 แอคชั่น ดังนี้

1. แอคชั่น : โกรธ

2. แอคชั่น : ปลื้มใจ

3. แอคชั่น : ยกนิ้วโป้งข้างเดียว

4. แอคชั่น : มึนงง

5. แอคชั่น : เศร้า

6. แอคชั่น : OK

7. แอคชั่น : นอน

8. แอคชั่น : กอดอก

9. แอคชั่น : โบกมือ

ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

1.สร้างฟอร์มบันทึกข้อมูลนักศึกษา ห้อง สทท.1/4 ทวิภาคี โดยให้มี ชื่อ “นายปัญญา นุกรรัมย์” เป็นผู้พัฒนาระบบ โดยมีรายละเอียดประกอบด้วย รหัสนักศึกษา (กำหนดตัวเลข 11 หลักเท่านั้น) คำนำหน้าชื่อ (นาย , นางสาว) ชื่อ นามสกุล ชื่อเล่น สาขาวิชา (รูปแบบ dropdown : ธุรกิจดิจิทัล , เทคโนโลยีสารสนเทศ) ห้อง (1/4) ครูที่ปรึกษา (ครูมานพ) รูปโปรไฟล์ โดยทุกข้อมูล ทุกช่อง “ห้ามมีค่าว่าง”

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

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

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

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbxWcJclhmtiD1oZSTL_UfVIxn beVmmYXp5qzd7r7zC600ePqCyKp7lZi7Ky-GASY0vKMA/exec

7.บันทึกข้อมูลลงในชีตที่ SHEET_ID:1-NuschewNDZMJj_RcY8GX7JrEyVZz-z-fej6pxYy_Ho

8.ระบบอัปโหลดภาพโปรไฟล์ ให้บันทึกไฟล์ลงใน FOLDER_ID:1J5LU0e5FFoA3Qj9n4fMffAnoszlWasFO

9.ให้นำ url ของไฟล์บันทึกลงในชีต

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

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

12.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีชมพู เทา

https://forms.gle/9zGXm1zSC1B6PJsN8

สร้างระบบระบบลงนามถวายพระพรออนไลน์ - รูปแบบเว็บแอปให้แสดงรูปภาพเป็นหัวเว็บแบบเต็มพื้นที่หัวเว็บ ขนาด 1600 x 500 พิกเซลโดยนำเข้าไฟล์รูปภาพจากhttps://img5.pic.in.th/file/secure-sv1/50f0474de9c1ff404ae89d8a230ed275.png - ไม่ต้องมีข้อความใดๆบนหัวเว็บ - สไตล์โดยรวม: เรียบง่าย (Minimal), ใช้งานง่าย (User-friendly) -โทนสีหลัก: พาสเทลโทนสีทอง, ทองอ่อนมากเป็นพื้นหลัง -ฟอนต์: อ่านง่าย (เช่น Sarabun หรือ Noto Sans Thai) -สามารถใช้งานผ่านโทรศัพท์มือถือและคอมพิวเตอร์ได้ดี(Responsive) และเก็บข้อมูลดังต่อไปนี้

1.มีปุ่ม”ลงนามถวายพระพร” เมื่อกดปุ่มแล้วให้มี popup แสดงรายละเอียดดังนี้ - ชื่อ-นามสกุล * - สังกัด/ประชาชน มีตัวอย่างข้อความที่กรอก “เช่น วิทยาลัยอาชีวศึกษานครสวรรค์, ประชาชน” - ข้อความถวายพระพร (“ขอองค์สมเด็จพระเจ้าอยู่หัวทรงพระเจริญยิ่งยืนนาน”,ข้าพระพุทธเจ้าขอพระราชทานถวายพระพรชัยมงคล ขอองค์สมเด็จพระเจ้าอยู่หัว ทรงมีพระพลานามัยสมบูรณ์แข็งแรง และทรงพระเกษมสำราญ, ขอพระองค์ทรงพระเจริญ มีพระชนย์มายุยิ่งยืนนานเป็นร่มโพธิ์ร่มไทรแก่ปวงชนชาวไทยขอให้พระองค์ทรงมีพลามัยสมบูรณ์แข็งแรงเป็นพ่อหลวงของปวงชนชาวไทยตลอดไป) - ปุ่มบันทึก “ยืนยันการลงนาม” - ปุ่มยกเลิกการลงนาม

2. ถัดจากปุ่ม”ลงนามถวายพระพร” มีสถิติการลงนามถวายพระพร

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

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

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

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

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

8.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 9.เชื่อม App Script ที่ URL:https://script.google.com/macros/s/AKfycbw0uHHvxyvrf78CWvThVdCijiNrvzeHZ6V7YYPynRMVD-PpkYUb9TNelCSezwjEQDtP-g/exec

10. SHEET_ID:15fwoTMkZLfo2d_f_hq5zQptjN0dEIKWjwXylB_nUbOs

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

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

13. footer “พัฒนาโดย : นายปัญญา นุกรรัมย์ ”

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

https://nwvoc.my.canva.site/dagp2hhxitk

ชนิตร์นัน ชมมณี

1. Suda Bunsri

2. ไอซ์

3. 26/03/49

4. 0831342773

5. sudabunsri8@gmail.com

6. ความคิด อยู่ดี

จัดทำโดย : นางสาวณภัทร ปั้นนาค

https://nwvoc.my.canva.site/chanitnan15

ผู้พัฒนาระบบ นางสาวชนิตร์นัน ชมมณี

https://nwvoc.my.canva.site/shop-mobile-napatt

ผู้พัฒนาระบบ นางสาวณภัทร ปั้นนาค

https://chanitnan.my.canva.site/

ผู้พัฒนาระบบ นางสาวชนิตร์นัน ชมมณี

https://nwvoc.my.canva.site/dagsetqcwlc

นางสาวชนิตร์นัน ชมมณี

จัดทำโดย :นางสาว ธันย์ชนก กล้ากสิกิจ

ชื่อผู้จัดทำ ณภัทร ปั้นนาค

https://nwvoc.my.canva.site/mobile-shop-thanchanok

ผู้พัฒนาระบบ นางสาวธันย์ชนก กล้ากสิกิจ

ผู้จัดทำ ณภัทร ปั้นนาค

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

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

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

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

6.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbznoIYN8Pr-nYBBk7ltZBAsOZ3VcjiEvisjJwwRMIlIJFni9edClDS-iiCApC_71DeU/exec

7.SHEET_ID: 1KrPVcBgxNX1bij1AvxKnOApNn15kGP0TVXWU2i_ncm0

8. FOLDER_ID: 1_4a7ftv-dxdMwnQcQhUqArc8Pq1KvNh3

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

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

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

12.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีชมพู ขาว แดง ไล่ระดับแบบมืออาชีพ

14. ช่วยสร้างกราฟสรุป 2 รูปแบบ โดยแยกตาม ยี่ห้อ และ สี และ ระบบปฏิบัติการ

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

ผู้พัฒนาระบบ นางสาวธันย์ชนก กล้ากสิกิจ

ผู้พัฒนาระบบ ธันย์ชนก กล้ากสิกิจ

1. สร้างแบบฟอร์มบันทึกข้อมูล ร้าน PN-Weapon Shop โดยให้มี ชื่อ “Panya PN” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย - รหัสสินค้า (มีอักษรตัว T นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น) แสดงตัวอย่างการรหัสสินค้า และยี่ห้อ โดยดึงข้อมูลจาก Google sheet แสดงข้อมูลล่าสุดเท่านั้น อยู่ด้านข้างด้วย) -ประเภท (Sword , Claymores , Polearms , Catelysts , Bow) -ชื่อ -ระดับ (4 ดาว , 5 ดาว) - อัพโหลดรูปภาพสินค้า -มีการตรวจสอบรหัสสินค้าห้ามซ้ำกัน สามารถทำงานในรูปแบบ 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/AKfycby4YnusPXYQJGCipaUoFLuFRAyR94xOhruBg5nGv3y_AuxN60iKJofEQtQQA7jHAwOj/exec 7.SHEET_ID:1eL5rete7utTv6usyTiv-8jste4V44GLNrr0LD0kLr2A

8. FOLDER_ID:1B6VB1fXxRWrcInRfCGHj7qGRYsnEUPgn

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

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

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

12.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีเขียวเข้ม เขียว เทา ไล่ระดับแบบมืออาชีพ

14. ช่วยสร้างกราฟสรุป 3 รูปแบบ โดยแยกตาม ประเภท ชื่อ และ ระดับ

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

นางสาวธันย์ชนก กล้ากสิกิจ

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/AKfycbxleUSAPs9culGnpiQuDXEXHXMGbXe9Y2wzdHI7P52TnxMKq74RhIkJtHubCPWG_im4/exec 7.SHEET_ID:1pfmXS7oO_1lN4cztX1sv2jgGJPM0GMNECGep5huNmhw 8.FOLDER_ID IT :1uihL4k-Tf94-fhtlLTr8Ow-ibrNdqj0Z

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

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

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

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

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

14. modal body สามารถ scroll ได้

เปลี่ยนเป็นภาพ figures 3d เหมือนจริง ที่อยู่ในบรรจุภัณฑ์

โดยบนบรรจุภัณฑ์ให้มีข้อความว่า “chanitnan”

📱ช่องอุปกรณ์เสริม (Accessories Section):

ไอเทมที่ 1: Vivo Y22 สีขาว

ไอเทมที่ 2: กำไลเพชร CQ CHIC

ไอเทมที่ 3: รองเท้าผ้าใบสีขาว

ไอเทมที่ 4: แก้วน้ำชาไทย

ไอเทมที่ 5 : กระเป๋าสะพายสีดำ

ไอเทมที่ 6 : แมวสีส้มตัวผู้ 1 ตัว

พื้นหลังสีฟ้าอ่อน

เพื่อทำสติ๊กเกอร์ไลน์ พร้อมท่าทาง 9 แอคชั่น ดังนี้

1. แอคชั่น : ทำมือเป็นรูปหัวใจ

2. แอคชั่น : ปลื้มใจ

3. แอคชั่น : ยกนิ้วโป้งข้างเดียว

4. แอคชั่น : ทำหน้าอ้อน

5. แอคชั่น : ทำความเคารพแบบทหาร

6. แอคชั่น : ชูมือโอเค

7. แอคชั่น : ชูสองนิ้ว ยิ้มกว้าง

8. แอคชั่น : นอนหลับห่มผ้า

9. แอคชั่น : โบกมือ

ทำให้ภาพไม่มีพื้นหลัง ขนาดภาพ 1:1

1.ระบบ Authentication & Security

ระบบ Login/Logout

ตรวจสอบสิทธิ์การใช้งานทุกหน้า (Session Management)

การเข้ารหัสรหัสผ่าน (Encryption)

การจัดการสิทธิ์การเข้าถึงตามบทบาท (Role-based Access Control)

2.ระบบสมาชิก

สมัครสมาชิกใหม่

ตรวจสอบความถูกต้องของข้อมูล (Validate)

แก้ไขโปรไฟล์ส่วนตัว

เปลี่ยนรหัสผ่าน

ระบบกู้คืนรหัสผ่าน (Forgot Password)

3.เมนูผู้ดูแลระบบ (Admin Panel)

จัดการข้อมูลสมาชิก (ค้นหา/ระงับสิทธิ์)

จัดการเนื้อหา (เพิ่ม-ลบ-แก้ไข-ค้นหา-ตั้งเวลาแสดงผล)

ระบบแจ้งเตือน (สมาชิกใหม่, รายงานปัญหา)

4.ผู้ใช้งานทั่วไปไม่สามารถ ใช้ในส่วนของผู้ดูแลระบบ

5.สร้างหน้าผู้ใช้งานทั่วไปแยกกันกับหน้าผู้ดูแลระบบ

6.โดยหน้าผู้ใช้งานทั่วไปมีรายละเอียดดังนี้

6.1 กรอกข้อมูลจำนวนขยะที่เก็บไปทิ้งแล้ว (กิโลกรัม)

6.2 สร้างระบบคำนวณ โดยที่ทุกๆ 1 กิโลกรัม สามารถแลกเป็นเงินได้ 1 บาท

6.3 แสดงจำนวนข้อมูลขยะที่เก็บไปทิ้ง และเงินที่แลกได้

4.แดชบอร์ด (Dashboard)

แสดงข้อมูลภาพรวม เช่น จำนวนสมาชิก สถิติการใช้งาน

5.ระบบรายงานผล (Data Visualization)

แสดงข้อมูลในรูปแบบกราฟ/แผนภูมิ

10.ใช้ Local Storage

ลิ้งก์เว็บ : https://pollutiondigital.my.canva.site/

ผู้พัฒนา

นายธนกฤต แย้มสุข

นางสาวธันย์ชนก กล้ากสิกิจ

นางสาวชนิดร์นัน ชมมณี

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/AKfycbyN3CsAlZPGwqIJ_8wD3ytFHdlB85jQ-GVlmS3ynDHFFtnmBTGDLyKX34sMjhx2D04t/exec

7.SHEET_ID: 1RJeApKkQZ31VdEXFRWb8Zl8xzu7agxEpv9PBfsCbXtA

8.FOLDER_ID IT :1QEPvueSQ9UI__VYqQzlmAG5gCO4JIy6C

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

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

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

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

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

14. modal body สามารถ scroll ได้

1.       ผู้ใช้งาน: Admin, Teacher, Student, Guest ( แยกรหัสในการ login ตามสถานะ )

2.       สามารถจัดเก็บข้อมูลพันธุ์พืช เช่น ชื่อพันธุ์พืช ลักษณะ แหล่งที่พบ พิกัด ภาพถ่าย

3.       มีระบบจัดการผู้ใช้งาน (User Management) และทำงานแบบ CRUD

4.       รองรับการสืบค้นข้อมูลและค้นหาตามชื่อ, พิกัด, ลักษณะ

5.       แสดงข้อมูลผ่านแผนที่และสรุปสถิติผ่าน Dashboard

6.       รองรับการเข้าถึงแบบสาธารณะ (Public Access)

7.       มีการแสดงผลแบบ Responsive บนอุปกรณ์ต่าง ๆ

8.       จัดเก็บข้อมูลใน Local Storage และ ให้ระบบเป็นแบบ crud

9.       มีระบบ Login พร้อมสิทธิ์การใช้งานแยกตามบทบาท

10.   มีฟีเจอร์สร้าง QR Code สำหรับต้นไม้แต่ละต้น

11.   สามารถส่งออกข้อมูลเป็น Excel และ PDF ได้

12.   แอดมิน ครู เข้าหน้าที่ สามารถจัดการข้อมูลได้

13.   บุคคลทั่วไป เข้าดูได้บางส่วน

14.   สามารถคอมเม้น หรือ ประเมินได้ และ รองรับภาษาไทย อังกฤษ

15.   ให้ใช้ sweetalert ที่มีการโหลดข้อมูลหรือเพิ่มข้อมูล แก้ไข ต่างๆให้ sweetalert เล่นเสียง correct เมื่อ status = success จาก url: https://www.myinstants.com/media/sounds/answer-correct.mp3 และ error เมื่อ status = error จาก url: https://www.myinstants.com/media/sounds/error_CDOxCYm.mp3

https://nwvoc.my.canva.site/dagxejrgrku

"ช่วยออกแบบและพัฒนาเว็บแอปพลิเคชันสำหรับงานสวนพฤกษศาสตร์โรงเรียน – วิทยาลัยอนุรักษ์พรณไม้ โดยมีคุณสมบัติและฟังก์ชันดังนี้:

วัตถุประสงค์หลัก:

1. เป็นฐานข้อมูลการอนุรักษ์พันธุ์ไม้และข้อมูลวิทยาศาสตร์

2. ใช้เป็นแหล่งเรียนรู้สำหรับนักเรียน นักศึกษา และบุคคลทั่วไป

3. ส่งเสริมการเรียนรู้ด้านสิ่งแวดล้อม ความหลากหลายทางชีวภาพ และภูมิปัญญาท้องถิ่น

4. ใช้เป็นเครื่องมือในการบันทึก-ติดตามกิจกรรมปลูก ดูแล และศึกษาในสวนพฤกษศาสตร์

ผู้ใช้งานหลัก:

ครู/อาจารย์

นักเรียน/นักศึกษา

บุคคลทั่วไป

ผู้เยี่ยมชม

Functional Requirements:

ระบบจัดการข้อมูลพันธุ์ไม้ (ชื่อสามัญ, ชื่อวิทยาศาสตร์, สกุล, วงศ์, ลักษณะ, อัปโหลดรูปภาพ)

แผนที่เชิงโต้ตอบ (Interactive Map) แสดงตำแหน่งต้นไม้ในโรงเรียน/วิทยาลัย

ระบบผู้ใช้งาน (User Management) → Admin, Teacher, Student, Guest

นักเรียนสามารถเข้าดู/ค้นหา/ศึกษาได้

บุคคลทั่วไปสามารถเข้าชมแบบ Public Access

ระบบบันทึกกิจกรรม/รายงาน/สถิติการปลูกและดูแลต้นไม้

Dashboard สรุปข้อมูล เช่น จำนวนพันธุ์ไม้, การจัดลำดับ, การพืชพรรณ

ระบบรายงาน/ส่งออกข้อมูลเป็น Excel, PDF

Non-Functional Requirements:

รองรับการใช้งานหลายอุปกรณ์ (Responsive) ทั้งออนไลน์/ออฟไลน์

ระบบ Login & สิทธิการเข้าถึง (Admin, Teacher, Student, Guest)

รองรับ 2 ภาษา (ไทย/อังกฤษ)

ข้อจำกัด:

ฐานข้อมูลต้องถูกต้องทางวิชาการ และเข้าใจง่ายสำหรับนักเรียนทั่วไป

ฟีเจอร์เสริม:

ระบบ QR Code ติดต้นไม้เพื่อเข้าถึงข้อมูล

ระบบค้นหา/กรองข้อมูลตามชื่อ, วงศ์, ประโยชน์

การส่งออกข้อมูลและรายงาน

ลิ้งก์เว็บ : https://pollutiondigital.my.canva.site/

ผู้พัฒนา

นายธนกฤต แย้มสุข

นางสาวธันย์ชนก กล้ากสิกิจ

นางสาวชนิดร์นัน ชมมณี

ภายในเว็บใช้ฟ้อนต์ TH Fah Kwangทั้งหมด

ตัวหน้าเว็บเป็นสีเขียวอ่อนดูแล้วสบายตา

ภายในสัญลักษณ์ ต่างๆมีลูกเล่น เช่นการขยับได้ เคลื่อนไหวได้เมื่อนำเม้าชี้

ทุกหน้าสามารถกดได้แบบ CRU

หน้าแรกมีปุ่ม เข้าสู่ระบบ Login

ถัดลงมาคือ ลงทะเบียน Register

*** เงื่อนไขคือต้องลงทะเบียนก่อนเข้าสู่ระบบ

ในหน้าลงทะเบียน Register

มี•คำนำหน้า (select dropdown)

มีตัวเลือก: นาย ,นาง , นางสาว

•ชื่อ* (input)

•นามสกุล * (input)

•อายุ (input number)

•(select dropdown)

มีตัวเลือก: ครู/อาจารย์ ,นักเรียน/นักศึกษา,บุคคลทั่วไป

ระบบแผนที่สวนพฤกษศาสตร์ (Interactive Map) แสดงแปลงปลูก / ต้นไม้แต่ละต้นบนแผนที่ มีปุ่มรูปต้นไม้

สำหรับคลิกที่ต้นไม้เพื่อดูรายละเอียดระบบผู้ใช้งาน (User Management)

👑แอดมิน(ครู/อาจารย์ผู้ดูแลโครงการ)

-สามารถเข้าถึงข้อมูลทั้งหมดได้ และสามารถแก้ไข ลบ ดูรายละเอียดได้

👩‍🎓 นักเรียน/นักศึกษา

-สามารถเข้าถึงข้อมูล ทั้งหมด ค้นหา ,ศึกษา ยกเว้นการแก้ไข และ ลบ

👤นักวิชาการ/บุคคลทั่วไป

-สามารถเข้าดูได้เฉพาะข้อมูลหลัก คือ รูปภาพที่ถูกเพิ่มเข้ามา ชื่อต้นไม้ ชื่อวิทยาศาสตร์ วงศ์ เท่านั้น

เมื่อเข้าสู่ระบบแล้วจะพบข้อมูล

⭕️ งานสวนพฤกษศาสตร์โรงเรียน - วิทยาลัยอนุรักษ์พรรณไม้

1. เป็นฐานข้อมูลการอนุรักษ์พันธุ์ไม้ของวิทยาลัย

2. ใช้เป็นแหล่งเรียนรู้ดิจิทัลสำหรับนักเรียน นักศึกษา และบุคคล ทั่วไป

3. ส่งเสริมการเรียนรู้ด้านสิ่งแวดล้อม ความหลากหลายทางชีวภาพ และภูมิปัญญาท้องถิ่น

4. ใช้เป็นเครื่องมือ บันทึก-ติดตามกิจกรรมปลูก ดูแล และศึกษาพืชในสวนพฤกษศาสตร์

- ครู/อาจารยผู้ดูแลโครงการ

- นักเรียน/นักศึกษา

- นักวิชาการ/บุคคลทั่วไป

- ผู้เยี่ยมชมระบบจัดการข้อมูลพันธุ์ไม้ เพิ่ม/แก้ไข/ลบ ข้อมูลพืช

(ชื่อวิทยาศาสตร์, ชื่อสามัญ, สกุล, วงศ์, ลักษณะ, อับโหลด รูปภาพ + พิกัดแผนที่ภายในโรงเรียน)

ฟังก์ชัน ฟีเจอร์เสริม

ปุ่ม Qr Codeเพื่อ ติดใต้ต้นไม้ให้แสกนหาข้อมูลใช้ชื่อเป็นเป็น👉🏻"สร้างQr Codeสำหรับต้นไม้" เชื่อมกับลิงค์นี้ https://me-qr.com/th/qr-code-generator/link?bannerid=4272528713&gclsrc=aw.ds&&utm_source=google&gad_source=1&gad_campaignid=20957927467&gbraid=0AAAAADpot1390J5qhm3Foz4IGI_EqFFPG&gclid=CjwKCAjwk7DFBhBAEiwAeYbJsfmQFbMMHhofU8NgVugI99hPYEaqHHMoUDtCZ6ZNmTmXrjZgeest5RoCc14QAvD_BwE

ระบบการเรียนรู้และกิจกรรม ,แบบทดสอบออนไลน์เรื่องพันธุ์ไม้ , รายงาน & Dashboard

ข้อมูลสารสนเทศเกี่ยวกับ จำนวนพันธุ์ไม้ ในสวน สรุป จัดลำดับ พืชหายาก / พืชใกล้สูญพันธุ์ กราฟ/สถิติ

- รองรับการใช้งานหลายอุปกรณ์ (Responsive)

- ใช้งานได้ทั้งออนไลน์/ออฟไลน์ (ถ้าเชื่อม Local Storage)

- มีระบบ Login/สิทธิ์การเข้าถึง (Admin, Teacher, Student, Guest)

- รองรับภาษาไทย และ อังกฤษ

- ข้อมูลพันธุ์ไม้ต้องมีความถูกต้องทางวิชาการ

- ต้องใช้งานง่ายสำหรับนักเรียนทั่วไป

✅ระบบเสริม : ระบบ OR Code → ติดต้นไม้ แต่ละต้นสแกนแล้วเห็นข้อมูลระบบค้นหา / กรองข้อมูล → ค้นหาจากชื่อ, วงศ์, ประโยชน์ส่งออกข้อมูล → Excel, PDF สำหรับทำรายงานส่งหน่วยงาน

และ เก็บข้อมูลในฐานข้อมูล/Local storage

https://nwvoc.my.canva.site/dagxecsyryw

ช่วยออกแบบและพัฒนาเว็บแอปพลิเคชันสำหรับงานสวนพฤกษศาสตร์โรงเรียน – วิทยาลัยอนุรักษ์พรณไม้ โดยมีคุณสมบัติและฟังก์ชันดังนี้: วัตถุประสงค์หลัก: 1. เป็นฐานข้อมูลการอนุรักษ์พันธุ์ไม้และข้อมูลวิทยาศาสตร์ 2. ใช้เป็นแหล่งเรียนรู้สำหรับนักเรียน นักศึกษา และบุคคลทั่วไป 3. ส่งเสริมการเรียนรู้ด้านสิ่งแวดล้อม ความหลากหลายทางชีวภาพ และภูมิปัญญาท้องถิ่น 4. ใช้เป็นเครื่องมือในการบันทึก-ติดตามกิจกรรมปลูก ดูแล และศึกษาในสวนพฤกษศาสตร์ ผู้ใช้งานหลัก: ครู/อาจารย์ นักเรียน/นักศึกษา บุคคลทั่วไป ผู้เยี่ยมชม Functional Requirements: ระบบจัดการข้อมูลพันธุ์ไม้ (ชื่อสามัญ, ชื่อวิทยาศาสตร์, สกุล, วงศ์, ลักษณะ, อัปโหลดรูปภาพ) แผนที่เชิงโต้ตอบ (Interactive Map) แสดงตำแหน่งต้นไม้ในโรงเรียน/วิทยาลัย ระบบผู้ใช้งาน (User Management) → Admin, Teacher, Student, Guest นักเรียนสามารถเข้าดู/ค้นหา/ศึกษาได้ บุคคลทั่วไปสามารถเข้าชมแบบ Public Access ระบบบันทึกกิจกรรม/รายงาน/สถิติการปลูกและดูแลต้นไม้ Dashboard สรุปข้อมูล เช่น จำนวนพันธุ์ไม้, การจัดลำดับ, การพืชพรรณ ระบบรายงาน/ส่งออกข้อมูลเป็น Excel, PDF Non-Functional Requirements: รองรับการใช้งานหลายอุปกรณ์ (Responsive) ทั้งออนไลน์/ออฟไลน์ ระบบ Login & สิทธิการเข้าถึง (Admin, Teacher, Student, Guest) รองรับ 2 ภาษา (ไทย/อังกฤษ) ข้อจำกัด: ฐานข้อมูลต้องถูกต้องทางวิชาการ และเข้าใจง่ายสำหรับนักเรียนทั่วไป ฟีเจอร์เสริม: ระบบ QR Code ติดต้นไม้เพื่อเข้าถึงข้อมูล ระบบค้นหา/กรองข้อมูลตามชื่อ, วงศ์, ประโยชน์ การส่งออกข้อมูลและรายงาน โปรดออกแบบระบบ (UI/UX + Database + ฟังก์ชัน) และเขียนข้อเสนอแนะในการพัฒนาแอปนี้ให้ครบถ้วน"

https://nwvoc.my.canva.site/dagxerb0f6e

1. รองรับผู้ใช้งานหลายประเภท: Admin, Teacher, Student, Guest โดยมีระบบ Login แยกสิทธิ์ตามบทบาท

2. จัดเก็บข้อมูลพันธุ์พืช เช่น ชื่อพันธุ์พืช ลักษณะ แหล่งที่พบ พิกัด และภาพถ่าย

3. ระบบ User Management สำหรับจัดการผู้ใช้งาน สามารถทำงานแบบ CRUD ได้

4. ระบบสืบค้นข้อมูล รองรับการค้นหาตามชื่อพันธุ์พืช ลักษณะ หรือพิกัด

5. แสดงข้อมูลบนแผนที่ พร้อม Dashboard สรุปสถิติ

6. รองรับการเข้าถึงแบบ Public Access สำหรับบุคคลทั่วไป

7. การแสดงผลเป็น Responsive รองรับทุกอุปกรณ์

8. ระบบจัดเก็บข้อมูลใน Local Storage และรองรับการทำงานแบบ CRUD

9. สามารถสร้าง QR Code สำหรับต้นไม้แต่ละต้น

10. รองรับการส่งออกข้อมูลเป็น Excel และ PDF

11. Admin และ Teacher สามารถจัดการข้อมูลได้เต็มรูปแบบ

12. บุคคลทั่วไปสามารถเข้าชมและดูข้อมูลบางส่วนได้

13. มีฟีเจอร์คอมเม้นท์หรือประเมินต้นไม้

14. รองรับการใช้งานหลายภาษา เช่น ไทยและอังกฤษ

แก้ไขเพิ่มเติม แก้ไขให้ฟัทุกงก์ชั่นตัวกดได้

เพิ่มสมัครสมาชิกกับออกจากระบบด้วย

1.ระบบผู้ใช้งาน (Authentication & Authorization)

-Login/Logout

-การเข้ารหัสรหัสผ่าน

-การจัดการสิทธิ์การเข้าถึง (Role-based Access Control)

-Session Management

1.1หน้าสำหรับผู้ดูแลระบบ (Admin / อาจารย์) -จัดการสมาชิก (ค้นหา, ระงับสิทธิ์)

-จัดการเนื้อหา (เพิ่ม/แก้ไข/ลบ/ค้นหา/ตั้งเวลาแสดงผล)

-ระบบแจ้งเตือน (สมาชิกใหม่, รายงานปัญหา)

-ดูสถิติการใช้งานและจำนวนสมาชิก (แสดงเป็นกราฟ/แผนภูมิ)

1.2หน้าสำหรับนักเรียน/นักศึกษา

-แสดงหน้า Index และกล่องค้นหาพรรณไม้

-เพิ่ม/แก้ไข/ลบ/ค้นหาพรรณไม้ (ข้อมูล: ชื่อวิทยาศาสตร์, ชื่อสามัญ, สกุล, วงศ์, ลักษณะ, รูปภาพ, พิกัดในโรงเรียน)

-จัดการโปรไฟล์และรหัสผ่าน (เปลี่ยน/กู้คืน) 1.3หน้าสำหรับผู้ใช้งานทั่วไป (สมาชิกทั่วไป) -สมัครสมาชิกใหม่

-ค้นหาและดูข้อมูลพรรณไม้ได้เท่านั้น (ไม่สามารถเพิ่ม/ลบ/แก้ไขได้)

-จัดการโปรไฟล์และรหัสผ่าน (เปลี่ยน/กู้คืน) 2.หน้า Index แสดงพรรณไม้ -แสดงข้อมูลพรรณไม้ (ชื่อวิทยาศาสตร์, ชื่อสามัญ, สกุล, วงศ์, ลักษณะ) -มีรูปภาพพรรณไม้ จัดเรียง 3 พรรณไม้ต่อแถว

-มีกล่องค้นหาชื่อพรรณไม้ -มีปุ่ม (ไอคอนรูปต้นไม้) เพื่อดูรายละเอียดของพรรณไม้นั้น

3.ฟังก์ชันเสริม

-รองรับ Responsive Design -ใช้ Local Storage

-อ้างอิงข้อมูลพรรณไม้จาก: https://www.baanlaesuan.com/243996/plant-scoop/top-50-plants/

-สร้างตัวอย่างจากลิ้งค์อย่างน้อย 10-15 พรรณไม้ -กำหนด ID/Passwordสำหรับอาจารย์และนักเรียน

1. ผู้ใช้งาน: Admin, Teacher, Student, Guest ( แยกรหัสในการ login ตามสถานะ )

2. สามารถจัดเก็บข้อมูลพันธุ์พืช เช่น ชื่อพันธุ์พืช ลักษณะ แหล่งที่พบ พิกัด ภาพถ่าย

3. มีระบบจัดการผู้ใช้งาน (User Management) และทำงานแบบ CRUD

4. รองรับการสืบค้นข้อมูลและค้นหาตามชื่อ, พิกัด, ลักษณะ

5. แสดงข้อมูลผ่านแผนที่และสรุปสถิติผ่าน Dashboard

6. รองรับการเข้าถึงแบบสาธารณะ (Public Access)

7. มีการแสดงผลแบบ Responsive บนอุปกรณ์ต่าง ๆ

8. จัดเก็บข้อมูลใน Local Storage และ ให้ระบบเป็นแบบ crud

9. มีระบบ Login พร้อมสิทธิ์การใช้งานแยกตามบทบาท

10. มีฟีเจอร์สร้าง QR Code สำหรับต้นไม้แต่ละต้น

11. สามารถส่งออกข้อมูลเป็น Excel และ PDF ได้

12. แอดมิน ครู เข้าหน้าที่ สามารถจัดการข้อมูลได้

13. บุคคลทั่วไป เข้าดูได้บางส่วน

14. สามารถคอมเม้น หรือ ประเมินได้ และ รองรับภาษาไทย อังกฤษ

15. ให้ใช้ sweetalert ที่มีการโหลดข้อมูลหรือเพิ่มข้อมูล แก้ไข ต่างๆ

ลิ้งก์เว็บ : https://nwvoc.my.canva.site/safetreenwvoc

ณภัทร ปั้นนาค"

โดยมีความต้องการดังนี้:

1. ผู้ใช้งาน: Admin, Teacher, Student, Guest ( แยกรหัสในการ login ตามสถานะ )

2. สามารถจัดเก็บข้อมูลพันธุ์พืช เช่น ชื่อพันธุ์พืช ลักษณะ ภาพถ่าย

3. มีระบบจัดการผู้ใช้งาน (User Management) และทำงานแบบ CRUD

4. รองรับการสืบค้นข้อมูลและค้นหาตามชื่อ, ลักษณะ

5. แสดงข้อมูลและสรุปสถิติผ่าน Dashboard

6. รองรับการเข้าถึงแบบสาธารณะ (Public Access)

7. มีการแสดงผลแบบ Responsive บนอุปกรณ์ต่าง ๆ

8. จัดเก็บข้อมูลใน Local Storage และ ให้ระบบเป็นแบบ crud

9. มีระบบ Login พร้อมสิทธิ์การใช้งานแยกตามบทบาท

10. มีฟีเจอร์สร้าง QR Code สำหรับต้นไม้แต่ละต้น

11. การจัดหมวดหมู่พันธุ์ไม้ (เช่น สมุนไพร, ไม้ยืนต้น, พืชกินได้)

12. สามารถส่งออกข้อมูลเป็น Excel และ PDF ได้

13. แอดมิน ครู เข้าหน้าที่ สามารถจัดการข้อมูลได้

14. บุคคลทั่วไป เข้าดูได้บางส่วน

15. รองรับภาษาไทยและอังกฤษ

16. ให้ใช้ sweetalert ที่มีการโหลดข้อมูลหรือเพิ่มข้อมูล แก้ไข ต่างๆ

สร้างระบบระบบลงนามถวายพระพรออนไลน์ - รูปแบบเว็บแอปให้แสดงรูปภาพเป็นหัวเว็บแบบเต็มพื้นที่หัวเว็บ ขนาด 1600 x 500 พิกเซลโดยนำเข้าไฟล์รูปภาพจาก https://pic.in.th/image/XfLpjz - ไม่ต้องมีข้อความใดๆบนหัวเว็บ - สไตล์โดยรวม: เรียบง่าย (Minimal), ใช้งานง่าย (User-friendly) -โทนสีหลัก: พาสเทลโทนสีทอง, ทองอ่อนมากเป็นพื้นหลัง -ฟอนต์: อ่านง่าย (เช่น Sarabun หรือ Noto Sans Thai) -สามารถใช้งานผ่านโทรศัพท์มือถือและคอมพิวเตอร์ได้ดี(Responsive) และเก็บข้อมูลดังต่อไปนี้ 1.มีปุ่ม”ลงนามถวายพระพร” เมื่อกดปุ่มแล้วให้มี popup แสดงรายละเอียดดังนี้ - ชื่อ-นามสกุล * - สังกัด/ประชาชน มีตัวเลือก (ผู้บริหาร, ครู , บุคลากรทางการศึกษา , นักเรียน นักศึกษา , ประชาชน) - ข้อความถวายพระพร (ขอองค์สมเด็จพระเจ้าอยู่หัวทรงพระเจริญยิ่งยืนนาน, ข้าพระพุทธเจ้าขอพระราชทานถวายพระพรชัยมงคล ขอองค์สมเด็จพระเจ้าอยู่หัว ทรงมีพระพลานามัยสมบูรณ์แข็งแรง และทรงพระเกษมสำราญ, ขอพระองค์ทรงพระเจริญมีพระชนย์มายุยิ่งยืนนานเป็นร่มโพธิ์ร่มไทรแก่ปวงชนชาวไทยขอให้พระองค์ทรงมีพลามัยสมบูรณ์แข็งแรงเป็นพ่อหลวงของปวงชนชาวไทยตลอดไป , ขอพระองค์ทรงเป็นศูนย์รวมจิตใจของปวงชนชาวไทย ทรงนำพาประเทศชาติไปสู่ความสงบสุขและความเจริญรุ่งเรืองอย่างมั่นคง ,ข้าพระพุทธเจ้าขอถวายคำอธิษฐานจิตให้พระองค์ทรงพระเกษมสำราญ มีพระพลานามัยแข็งแรงตลอดไป) - ปุ่มบันทึก “ยืนยันการลงนาม” - ปุ่มยกเลิกการลงนาม 2. ถัดจากปุ่ม”ลงนามถวายพระพร” มีสถิติการลงนามถวายพระพร 3. มีระบบการบันทึกข้อมูลแบบถาวร เมื่อปิดและเปิดใหม่ข้อมูลยังอยู่ 4. สามารถทำงานในรูปแบบ CRUD (เพิ่ม อ่าน อัปเดต และลบ)ได้อย่างสมบูรณ์แบบ โดยเฉพาะฟังก์ชั่นการลบ ให้สร้าง modal dialog แบบกำหนดเองแทนการใช้ confirm() ของ browser มีการยืนยันการลบข้อมูล และปรับปรุงการจัดการข้อผิดพลาดในกรณีที่ข้อมูลตอบกลับไม่ใช่ JSON ที่ถูกต้อง 5.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์ 6.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME 7.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น 8.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น 9.สำหรับ ปุ่มแก้ไข และ ปุ่มลบ ต้องใส่รหัสผ่าน เท่านั้น รหัสผ่าน คือ0248 10.เชื่อม App Script ที่ URL: https://script.google.com/macros/s/AKfycbxmND_5W7wpMtIUAoVKG5VCFI-mtGg2jK6h1U_kNzMKRZggqJS7JFJzsz8oouK8Acro/exec 11. SHEET_ID: 1b3oz0sslcedxiNVzz_NCtuJ97gVvOLawVYYurbszyyY 12. เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มีให้สร้างใหม่พร้อมหัวตาราง 13. แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 14. footer “พัฒนาโดย : เกียรติภูมิ สุขแจ่ม ” 15.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

1. สร้างแบบฟอร์มบันทึกข้อมูล ร้าน Mobile FRANKYโดยให้มี ชื่อ “kriadtiphum” เป็นผู้พัฒนาระบบ อยู่ด้านข้างของแบบฟอร์ม รายละเอียดประกอบด้วย - รหัสสินค้า (มีอักษรตัว M นำหน้า ช่องกรอกข้อมูล โดยกำหนดให้ใส่ตัวเลข 3 หลักเท่านั้น) แสดงตัวอย่างการรหัสสินค้า และยี่ห้อ โดยดึงข้อมูลจาก Google sheet แสดงข้อมูลล่าสุดเท่านั้น อยู่ด้านข้างด้วย) - ยี่ห้อ (Samsung , Apple , Xiaomi , OPPO , Vivo, ) - รุ่น - สี (ดำ , ขาว , เทาเงิน , ทอง) - รองรับระบบปฏิบัติการ (Android , iOS , HarmonyOS) - RAM หน่วยเป็น GB (4GB , 6GB , 8GB , 12GB) อัพโหลดรูปภาพสินค้า มีการตรวจสอบข้อมูลซ้ำ ห้ามรหัสสินค้าซ้ำกัน สามารถทำงานในรูปแบบ 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/AKfycbx49BStAGw2ZCPBAg-y0SjOQFsk9DD2WnqS7EQ1dzOjBkA0bAWTPrbgJiSdejit_u4I4w/exec 7.SHEET_ID: 1JVGtKrRnd-lUufSz9lMywEQfiDmuDKPkeVYjODhRd78 8. FOLDER_ID: 1B82QhZ-SKLHbmXsfFS5vDEZ6zICdxpvG 9.เพิ่มการตรวจสอบว่า Sheet มีอยู่หรือไม่ ถ้าไม่มี ให้สร้างใหม่พร้อมหัวตาราง 10.ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป 11.ใช้ Sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ 12.จัดรูปแบบหน้าเว็บไซต์เป็นแบบ TAB MENU 13.ตกแต่งให้เหมาะสม และ Code html CSS โทนสีส้ม น้ำเงิน เทา ไล่ระดับแบบมืออาชีพ 14. ช่วยสร้างกราฟสรุป 2 รูปแบบ โดยแยกตาม ยี่ห้อ และ สี และ ระบบปฏิบัติการ 15.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย

เพื่อเข้าสู่ระบบ ใช้งานเว็บแอปที่เคยสร้างไว้แล้ว

โดยมีคุณสมบัติดังนี้:

1. ส่วนหัว (Header)

 - แสดงชื่อเว็บแอปที่จะเข้าระบบด้านบน กลางหน้าจอ

เช่น “ลงชื่อ-นามสกุลเข้าสอบปลายภาค”

2. ปุ่มกดสองปุ่มกลางหน้าจอ

 - ปุ่ม “ลงชื่อเข้าใช้” เมื่อคลิกแล้วให้แสดง Popup สำหรับกรอก“ชื่อผู้ใช้”และ“รหัสผ่าน”

 - ปุ่ม “สมัครสมาชิก” แสดง Popup ให้กรอกชื่อผู้ใช้และตั้งรหัสผ่าน

3. หน้า Popup “ลงชื่อเข้าใช้”

 - มีช่องกรอก “ชื่อผู้ใช้” และ “รหัสผ่าน”

 - มีปุ่ม “Login”

 - เมื่อกด Login แล้ว ตรวจสอบข้อมูลจาก Google Sheet ลิงค์ 1S5SkeDrlJaK-ldAydF-0bsOiptfldxzzOukmoi_RlkQ ว่ามี“ชื่อผู้ใช้” และ “รหัสผ่าน” ตรงกันหรือไม่

 - หากตรง ให้ redirect ไปที่เว็บไซต์: https://thanakirt.com/menu_boot
 - หากไม่ตรง ให้แสดงข้อความ “ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง”

4. หน้า Popup “สมัครสมาชิก”

 - ช่องกรอก“ชื่อผู้ใช้” และ “รหัสผ่าน”

 - ปุ่ม “สมัครสมาชิก”

 - เมื่อกดแล้ว ให้บันทึกข้อมูล(สร้างHeaderด้วย) ใน Google Sheet ลิงค์ 1S5SkeDrlJaK-ldAydF-0bsOiptfldxzzOukmoi_RlkQ

โดยเก็บชื่อผู้ใช้ และรหัสผ่าน โดยส่งข้อมูลแบบ JSONP โดยตรงแทนการใช้ iframe

ซึ่งอาจจะมีปัญหาเรื่อง cross-origin ไปยัง App Script ที่ URL : https://script.google.com/macros/s/AKfycbwhqRrMGV4GIZB8dCbhACAZohbNj73Za1sVMsuFi43IQywh14FTl7LJzrOXe7P_cdO0/exec

 ใช้ sweet alert แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS (Google App Script) ในหน้าแชตนี้ด้วย - แสดงข้อความว่า “สมัครสมาชิกสำเร็จ กรุณาลงชื่อเข้าใช้”

5. รูปแบบเว็บต้องสวยงามใช้งานง่าย ทั้งมือถถือและคอมพิวเตอร์ ตกแต่งและปรับประยุกต์กับโปรเจคได้จริง

1. Google sheet_ID :1OZNl4M4_YMJDSxrG8YeMFoxGQhHZPJl6Nk7q4EoA-rM

2. Title คือ ระบบข่าวสารประชาสัมพันธ์ โรงเรียนเทศบาลวัดจอมคีรีนาคพรต

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

4. .setFaviconUrl('https://img5.pic.in.th/file/secure-sv1/-removebg-preview3a88f314866e0b88.png')

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

6. ให้หน้าเว็บมีความสวยงามทันสมัย ส่วนการแจ้งเตือน หรือกล่องโต้ตอบกับผู้ใช้ให้ใช้ sweet alert
   หน้าเว็บใช้ tailwind css ในการออกแบบให้สวยงาม โดยมี ui เว็บ Magazine ให้มีสี gradient สวยงาม ใช้งานง่าย
   มีไอคอนประกอบ ใช้ font คือ Kanit ทั้งระบบ รองรับการใช้งานทุกอุปกรณ์แบบ responsive (มือถือแท็บเล็ต คอมพิวเตอร์)

7. มีหน้าแรกเป็นหน้าข่าวสารประชาสัมพันธ์ -
   โดยการ์ดข่าวให้แสดง ชื่อข่าว หมวดหมู่ ภาพประจำเรื่อง และเนื้อข่าวโดยย่อ อ่านเพิ่มเติม -
   มีตัวกรองเพื่อเลือกดูข่าวตามหมวดหมู่ อยู่ด้านบนขวาของหน้า โดยค่า default คือ ทั้งหมด

8. หน้าสองเป็นหน้า ฟอร์มบันทึกข้อมูลข่าวสาร โดยมีช่องป้อน -
   ชื่อข่าว (textinput) - - - -
   หมวดหมู่ข่าว (dropdown ดึงข้อมูลหมวดหมู่จากหน้าจัดการข้อมูล)
   เนื้อข่าว (textinput)
   ภาพข่าวหรือภาพวารสาร (อัพโหลดหรือลากวางได้ จำนวนไม่เกิน 4 ภาพ)
   กำหนดรูปประจำข่าว (อัพโหลดหรือลากวางได้ จำนวน 1 ภาพ เพื่อแสดงเป็นตัวอย่างในหน้าข่าวสารประชาสัมพันธ์)

9. ให้มีโฟลเดอร์เก็บภาพ : 1Brd3M45Q-zk7MvnNz9nezphkiH-c9Fib
   ให้บันทึก URL ของรูปโปรไฟล์ในชีตแบบ : https://lh3.googleusercontent.com/d/ + idของรูป

10. หน้า 3 : จัดการข้อมูล -
    แสดงข่าวทั้งหมดในตาราง พร้อมปุ่ม แก้ไข ลบ (รูปแบบ CRUD) - -
    แสดงส่วนจัดการหมวดหมู่
    สามารถเพิ่ม ลบ แก้ไข หมวดหมู่ (รูปแบบ CRUD)

หน้าเพิ่มข่าวและจัดการข้อมูล แสดงเป็น popup สำหรับผู้ดูแลระบบ (user : admin , pass : 13799)
เข้าสู่ระบบ และ ออกจากระบบ และมีปุ่มกลับหน้าหลัก
Footer ใช้ข้อความ “© 2025 ระบบข่าวสารประชาสัมพันธ์ โรงเรียนเทศบาลวัดจอมคีรีนาคพรต |Jomkiri| ”
ลิงก์ไปที่ https://www.facebook.com/jomkiri/?locale=th_TH
11. มีสถิติเว็บไซต์ใน footer และมีชีตเก็บสถิติ -
โดยเขียนโค้ด index.html และ code.gs ให้เชื่อมโยงกับ google sheet โดยใช้ google apps cript หากข้อมูลจำเป็นต้องใช้ sheetname,
foldername อะไร และหากไม่มี sheetname, foldername นั้นให้เขียนโค้ด google apps script - - - -
สร้าง sheetname และ foldername นั้นให้ และหากไม่มี column header ให้ google apps script สร้าง column header ให้ด้วย โดย
ไฟล์ index.html ต้องดึง URL ของ Web App มาแสดงแบบอัตโนมัติ (ไม่ต้องเขียน URL เอง) โดยใช้ ScriptApp.getService().getUrl()
ฝั่ง Code.gs ต้องดึงข้อมูลจาก Google Sheets โดยใช้ getActiveSpreadsheet().getActiveSheet()
ไม่ต้องสร้างสเปรดชีตใหม่ ใช้สเปรดชีตปัจจุบันที่รัน apps script
12. ฟีเจอร์พิเศษและความว้าว : SweetAlert2 สำหรับแจ้งเตือน
Animation ปุ่ม, modal , และ scrolling AOS.js หรือ Animate.css
สำหรับ fade-in แต่ละองค์ประกอบ
13. กรุณาเขียนโค้ดให้ครบทุกไฟล์ (Code.gs , index.html) และใช้งานได้จริง