Initial commit

ระบบแจ้งเตือนส่งงานของนักเรียน/document/system_explanation.txt

@@ -0,0 +1,24 @@
+เอกสารอธิบายการทำงานของระบบแจ้งเตือนส่งงาน
+=========================================
+
+1. การทำงานของระบบแจ้งเตือน และวิธีการแจ้งเตือนผู้ใช้เมื่อใกล้กำหนดส่ง
+ระบบแจ้งเตือนถูกออกแบบมาเพื่อป้องกันการลืมส่งงานของนักเรียน โดยแบ่งการทำงานออกเป็น 2 ช่องทางหลัก:
+- แจ้งเตือนบนหน้าเว็บไซต์ (In-app Popup Alert): ทันทีที่นักเรียนเข้าสู่ระบบ (Login) สำเร็จ ระบบจะเช็คข้อมูลงานทั้งหมดที่สถานะยังเป็น "รอดำเนินการ" และตรวจสอบว่ามีงานใดที่เข้าข่าย "ใกล้ถึงกำหนดส่ง" หรือ "เลยกำหนดส่ง" ไปแล้ว หากพบระบบจะเด้งหน้าต่าง Popup แสดงรายการงานเหล่านั้นขึ้นมากลางหน้าจอทันที (โดยจะแสดงแค่ 1 ครั้งต่อการล็อกอิน เพื่อไม่ให้รบกวนการใช้งานหน้าอื่นๆ)
+- แจ้งเตือนผ่านแอปพลิเคชันแชท (LINE Notify / Telegram): ระบบจะมีสคริปต์ทำงานอยู่เบื้องหลัง (Cron Job) ที่จะถูกสั่งให้รันตามเวลาที่กำหนดไว้ทุกวัน (เช่น 08:00 น. ของทุกวัน) สคริปต์นี้จะกวาดข้อมูลงานที่ใกล้ถึงกำหนดส่งทั้งหมด แล้วส่งข้อความสรุปแจ้งเตือนเข้าไปยังกลุ่มแชทของห้องเรียนผ่าน API แบบอัตโนมัติ
+
+2. วิธีการนำวันและเวลามาใช้ เพื่อคำนวณและแจ้งเตือน
+ระบบใช้หลักการเปรียบเทียบ "วันปัจจุบัน" กับ "กำหนดส่ง" เพื่อสร้างเงื่อนไขการแจ้งเตือนดังนี้:
+- การเก็บข้อมูล: วันกำหนดส่ง (Due Date) จะถูกบันทึกลงในฐานข้อมูลในรูปแบบ YYYY-MM-DD
+- การหาจำนวนวันที่เหลือ: ระบบใช้ฟังก์ชันหาส่วนต่างของวัน (เช่น DATEDIFF ใน SQL) โดยนำ "วันที่กำหนดส่ง" มาลบด้วย "วันที่ปัจจุบัน" เพื่อหาค่า "จำนวนวันที่เหลือ"
+- เงื่อนไขการแจ้งเตือน: แอดมินสามารถกำหนดค่า "จำนวนวันล่วงหน้าที่จะให้ระบบเริ่มเตือน" ได้ในหน้าตั้งค่า (ตัวอย่างเช่น กำหนดไว้ 3 วัน)
+  * ถ้า (วันกำหนดส่ง - วันปัจจุบัน) < 0 หมายถึง "เลยกำหนดส่ง" ระบบจะขึ้นป้ายสีดำ
+  * ถ้า (วันกำหนดส่ง - วันปัจจุบัน) <= 3 หมายถึง "ใกล้กำหนดส่ง" ระบบจะขึ้นป้ายสีส้ม และนำงานนี้ไปใส่ใน Popup แจ้งเตือน และส่งเข้าแชท LINE/Telegram
+  * ถ้าเหลือมากกว่า 3 วัน หมายถึงเวลายังเหลือเยอะ ระบบจะยังไม่แจ้งเตือน เพื่อป้องกันข้อความขยะ (Spam)
+
+3. ส่วนประกอบหลักของระบบ
+ระบบถูกแบ่งการทำงานออกเป็นส่วนต่างๆ อย่างชัดเจน ดังนี้:
+- หน้าบันทึกงาน (หน้า "จัดการงาน"): เป็นส่วนของแอดมินหรือครู มีฟอร์มสำหรับเพิ่มงานใหม่ ระบุชื่องาน/ชื่อวิชา, ใส่รายละเอียด, เลือกตัวนักเรียน, และตั้งวันกำหนดส่ง ทันทีที่บันทึก ข้อมูลจะถูกลงฐานข้อมูลและเริ่มเข้าสู่กระบวนการนับถอยหลังทันที
+- หน้าดูรายการงาน (หน้า "Dashboard" และ "งานของฉัน"): เป็นหน้าแสดงผลรายการงานทั้งหมดในรูปแบบตาราง (DataTables) โดยมีการเรียงลำดับจากงานที่ถูกสั่งล่าสุด (รัน Running Number) และแสดง "ป้ายสี" ท้ายวันที่กำหนดส่งเพื่อบอกสถานะความเร่งด่วน 
+- หน้า/ส่วนของการแจ้งเตือน (Notification Module):
+  * แจ้งเตือนฝั่งผู้ใช้งานเว็บ: มีการฝังสคริปต์ไว้ในส่วน Footer ของเว็บ เมื่อนักเรียนล็อกอิน ระบบจะเรียกใช้ AJAX ไปดึงข้อมูลงานที่เข้าเงื่อนไขเตือน มาแสดงเป็นกราฟิกสวยงามผ่าน SweetAlert2
+  * แจ้งเตือนฝั่งแชท: มีไฟล์ cron_notify.php ที่ทำหน้าที่สรุปข้อมูลเป็นข้อความตัวอักษร และยิงข้อมูลไปที่ Server ของ LINE หรือ Telegram ตาม Token ที่แอดมินตั้งค่าไว้

ระบบแจ้งเตือนส่งงานของนักเรียน/document/system_explanation_newbie.txt

@@ -0,0 +1,53 @@
+เอกสารอธิบายการทำงานของระบบแจ้งเตือนส่งงาน (ฉบับเข้าใจง่ายสำหรับผู้เริ่มต้น/นักเรียน)
+========================================================================
+
+สวัสดีครับ! ถ้าน้องๆ กำลังสงสัยว่า "เว็บไซต์ที่ช่วยเตือนเราส่งงานนี้ มันทำงานได้ยังไงเบื้องหลัง?" เอกสารฉบับนี้จะช่วยอธิบายให้เห็นภาพรวมของระบบคอมพิวเตอร์และการเขียนโปรแกรมแบบง่ายๆ โดยไม่ต้องมีพื้นฐานมาก่อนเลยครับ
+
+---------------------------------------------------------
+1. ระบบแจ้งเตือนทำงานอย่างไร และมันรู้ได้ยังไงว่าต้องเตือนเรา?
+---------------------------------------------------------
+เวลาเราใช้งานเว็บนี้ ระบบจะเตือนเราผ่าน 2 วิธี ซึ่งทำงานแยกกัน:
+
+แบบที่ 1: แจ้งเตือนเด้งขึ้นมาบนหน้าเว็บ (Popup Alert)
+- เปรียบเทียบง่ายๆ: เหมือนพนักงานต้อนรับที่จะทักทายเราเฉพาะตอนที่เราเดินเข้าประตูมา
+- ทำงานอย่างไร?: ทันทีที่น้องๆ พิมพ์ชื่อผู้ใช้และรหัสผ่านเพื่อ "เข้าสู่ระบบ (Login)" โปรแกรมจะแอบวิ่งไปเปิด "สมุดจด (ฐานข้อมูล หรือ Database)" เพื่อดูว่าเรามีงานอะไรที่ค้างอยู่และใกล้ถึงวันส่งหรือเปล่า ถ้ามี โค้ดส่วนหน้าเว็บ (เราเรียกว่า Frontend) จะวาดกล่องข้อความเด้งขึ้นมากลางจอทันที แต่ถ้าไม่มีก็ผ่านไป
+
+แบบที่ 2: แจ้งเตือนผ่านแอปแชท (LINE / Telegram)
+- เปรียบเทียบง่ายๆ: เหมือนมีหุ่นยนต์ผู้ช่วย (Bot) ประจำห้องเรียน
+- ทำงานอย่างไร?: หุ่นยนต์ตัวนี้ไม่ได้เฝ้าหน้าเว็บตลอดเวลา แต่เราตั้งนาฬิกาปลุกให้มันตื่นขึ้นมาทำงาน "ทุกเช้าเวลา 08:00 น." (ในภาษาคอมพิวเตอร์ เราเรียกการตั้งเวลาให้โปรแกรมทำงานเองว่า Cron Job) เมื่อมันตื่น มันจะเช็คงานของทุกคนในห้อง ถ้างบานไหนใกล้กำหนดส่ง มันจะรีบส่งข้อความเข้าไปในกลุ่ม LINE ทันทีแล้วก็กลับไปนอนต่อ
+
+---------------------------------------------------------
+2. เว็บไซต์เอา "วันและเวลา" มาคำนวณได้อย่างไร? (คณิตศาสตร์ของโปรแกรม)
+---------------------------------------------------------
+คอมพิวเตอร์ไม่ได้มีความรู้สึกว่า "ใกล้ถึงวันส่งหรือยัง" มันรู้แค่ตัวเลข! ดังนั้นโปรแกรมเมอร์จึงใช้วิธีสอนคอมพิวเตอร์ด้วยคณิตศาสตร์พื้นฐานครับ:
+
+ขั้นตอนที่ A (จดจำ):
+เมื่อคุณครูสั่งงาน ระบบจะบันทึก "วันกำหนดส่ง (Due Date)" เอาไว้ในรูปแบบตัวเลข เช่น 2026-10-15 (ปี-เดือน-วัน)
+
+ขั้นตอนที่ B (คำนวณหาส่วนต่าง):
+ทุกครั้งที่ระบบเช็คข้อมูล มันจะถามคอมพิวเตอร์ว่า "วันนี้วันที่เท่าไหร่?" (Today) จากนั้นมันจะจับตัวเลขมาลบกัน:
+[วันกำหนดส่ง] ลบ [วันปัจจุบัน] = จำนวนวันที่เหลือ (Days Left)
+
+ขั้นตอนที่ C (การสร้างเงื่อนไข หรือ If-Else):
+สมมติว่าคุณครูตั้งค่าไว้ว่า "ให้เตือนล่วงหน้า 3 วันนะ" โปรแกรมจะใช้ตรรกะแบบนี้ครับ:
+- ถ้า (If) จำนวนวันที่เหลือติดลบ (< 0) -> แปลว่า "เลยกำหนดแล้ว!" ระบบจะสั่งระบายสีดำ
+- ถ้า (If) จำนวนวันที่เหลือน้อยกว่าหรือเท่ากับ 3 (<= 3) -> แปลว่า "ใกล้กำหนดแล้ว!" ระบบจะสั่งระบายสีส้ม และเอาไปแจ้งเตือน
+- ไม่อย่างนั้น (Else) ถ้ายังเหลือเวลาอีกนาน -> แปลว่า "ยังชิลได้" ระบบจะไม่ส่งแจ้งเตือนอะไรไปกวนใจนักเรียน
+
+---------------------------------------------------------
+3. ชิ้นส่วนต่างๆ ของเว็บไซต์ (ส่วนประกอบของระบบ)
+---------------------------------------------------------
+เวลาเราสร้างเว็บๆ หนึ่ง มันเกิดจากการเอาชิ้นส่วนหลายๆ ชิ้นมาประกอบกัน เหมือนต่อเลโก้ครับ:
+
+ส่วนที่ 1: หน้าบันทึกงาน (ส่วนนำเข้าข้อมูล / Input)
+คือหน้าเว็บที่มี "ฟอร์ม (Form)" ให้คุณครูพิมพ์ชื่องาน เลือกวันที่ และกดปุ่มตกลง หน้าที่ของหน้านี้คือรับข้อมูลจากมนุษย์ และแปลงไปเก็บไว้ใน "ฐานข้อมูล (Database)" ซึ่งเปรียบเสมือนตู้เก็บเอกสารดิจิทัล
+
+ส่วนที่ 2: หน้าดูรายการงาน (ส่วนแสดงผลข้อมูล / Output)
+คือหน้า Dashboard หรือหน้างานของฉัน ที่แสดงข้อมูลออกมาเป็น "ตาราง" โค้ดในส่วนนี้ (เราใช้ภาษา PHP) จะไปค้นหาเอกสารในตู้เก็บเอกสาร ดึงข้อมูลออกมาจัดเรียงให้สวยงาม ใส่สี (CSS/Tailwind) รันลำดับที่ 1,2,3 ให้ดูง่าย และวาดลงบนหน้าจอคอมพิวเตอร์หรือมือถือของเรา
+
+ส่วนที่ 3: ระบบแจ้งเตือน (ส่วนประสานงาน / API & Background)
+เป็นส่วนที่มองไม่เห็นบนหน้าเว็บ ประกอบด้วย "API" ซึ่งเป็นสะพานเชื่อมต่อให้เว็บไซต์ของเราสามารถโยนข้อความข้ามไปโผล่ในเครื่องเซิร์ฟเวอร์ของ LINE หรือ Telegram ได้นั่นเองครับ!
+
+---------------------------------------------------------
+สรุปสั้นๆ สำหรับนักเรียนที่อยากเป็นโปรแกรมเมอร์:
+"ระบบนี้คือการนำ ข้อมูล (งาน) มาเก็บไว้ในตู้ (Database) จากนั้นใช้ คณิตศาสตร์ (วันลบกัน) มาสร้างเป็น เงื่อนไข (If-Else) เพื่อสั่งให้หน้าเว็บ (HTML/CSS) หรือ หุ่นยนต์ (LINE Bot) แสดงผลออกมาให้มนุษย์เห็นนั่นเองครับ!"