Porawit/gravity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Porawit Dongwang
2026-09-16 23:20:08 +07:00
commit 0041668dbb
32577 changed files with 3687927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ระบบแจ้งเตือนส่งงานของนักเรียน/manual.php
+217
View File
@@ -0,0 +1,217 @@
<?php
require_once 'config.php';
requireLogin();
$role = $_SESSION['role'];
include 'includes/header.php';
include 'includes/sidebar.php';
?>
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-800">คู่มือการใช้งานระบบ</h2>
<p class="text-gray-600 mt-1">ยินดีต้อนรับสู่คู่มือการใช้งานระบบแจ้งเตือนส่งงาน</p>
</div>
<div class="flex flex-col md:flex-row gap-6 items-start">
<!-- Table of Contents (Sidebar) -->
<div class="w-full md:w-1/4 bg-white rounded-lg shadow-sm p-4 sticky top-4 shrink-0 border border-gray-100">
<h3 class="font-bold text-gray-800 mb-3 uppercase text-sm tracking-wider border-b pb-2">สารบัญ</h3>
<nav class="flex flex-col space-y-1">
<?php if ($role === 'admin'): ?>
<a href="#overview" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">1. ภาพรวม / Dashboard</a>
<a href="#assignments" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">2. การจัดการงาน (Assignments)</a>
<a href="#users" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">3. การจัดการผู้ใช้ (Users)</a>
<a href="#settings" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">4. การตั้งค่าระบบ (Settings)</a>
<a href="#logs" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">5. ประวัติการใช้งาน (Activity Logs)</a>
<a href="#notifications" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">6. การเชื่อมต่อแจ้งเตือน & Cron</a>
<?php else: ?>
<a href="#student-tasks" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">1. งานของฉัน (My Assignments)</a>
<a href="#student-alerts" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">2. ระบบการแจ้งเตือน</a>
<a href="#responsive-ui" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 py-1 px-2 rounded text-sm transition-colors">3. การใช้งานบนมือถือ</a>
<?php endif; ?>
</nav>
</div>
<!-- Content Area -->
<div class="w-full md:w-3/4 space-y-8 pb-12">
<?php if ($role === 'admin'): ?>
<!-- Admin Section -->
<section id="overview" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-blue-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">1. ภาพรวมระบบ (Dashboard)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
หน้า Dashboard เป็นหน้าแรกหลังจากเข้าสู่ระบบ ใช้สำหรับติดตามภาพรวมของงานทั้งหมด
</p>
<ul class="list-disc pl-6 text-sm text-gray-700 space-y-2">
<li><strong class="text-gray-900">การ์ดสรุปข้อมูล:</strong> แสดงจำนวนงานทั้งหมด, งานที่รอดำเนินการ, งานที่เสร็จสิ้น และจำนวนนักเรียน <span class="bg-yellow-100 text-yellow-800 px-1 rounded text-xs">คุณสามารถคลิกที่การ์ดเพื่อกรองข้อมูลในตารางด้านล่างได้ทันที</span></li>
<li><strong class="text-gray-900">ตารางงานใกล้กำหนดส่ง:</strong> แสดงรายการงานที่ต้องรีบติดตาม โดยเรียงลำดับจากงานที่เพิ่มล่าสุด (ลำดับ 1)</li>
<li><strong class="text-gray-900">ป้ายแจ้งเตือนวันที่เหลือ:</strong> หากใกล้กำหนดจะแสดง <span class="bg-orange-500 text-white px-2 py-0.5 rounded text-xs">สีส้ม</span> หากเลยกำหนดจะแสดง <span class="bg-gray-800 text-white px-2 py-0.5 rounded text-xs">สีดำ</span></li>
<li><strong class="text-gray-900">การส่งออกไฟล์:</strong> สามารถกดปุ่ม "ส่งออก Excel" เพื่อโหลดข้อมูลตารางไปประมวลผลต่อได้</li>
</ul>
</section>
<section id="assignments" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-indigo-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">2. การจัดการงาน (Assignments)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
เมนูสำหรับ มอบหมายงานใหม่ แก้ไข และติดตามสถานะงานของนักเรียนแต่ละคน
</p>
<ul class="list-disc pl-6 text-sm text-gray-700 space-y-2">
<li><strong class="text-gray-900">เพิ่มงานใหม่:</strong> เลือกเมนู "จัดการงาน" จะพบฟอร์มสำหรับสร้างงาน กรอก ชื่องาน/ชื่อวิชา, กำหนดส่ง <span class="bg-green-100 text-green-800 px-1 rounded text-xs">คุณสามารถค้นหาชื่อและติ๊กเลือกนักเรียนได้หลายคนพร้อมกันในครั้งเดียว (Multiple Select)</span></li>
<li><strong class="text-gray-900">แก้ไขงาน:</strong> กดปุ่มสีเหลืองรูปดินสอเพื่อแก้ไขรายละเอียด หรือเปลี่ยนสถานะเป็น "เสร็จสิ้น" <br><span class="text-blue-600 text-xs">* พิเศษ: ในหน้าแก้ไขงาน คุณสามารถติ๊กเลือกชื่อนักเรียนคนอื่นเพิ่มได้ ระบบจะทำการโคลน (Clone) งานนี้ไปสั่งนักเรียนคนใหม่ให้ทันที</span></li>
<li><strong class="text-gray-900">ลบงาน:</strong> กดปุ่มสีแดงรูปถังขยะหากต้องการลบงานนั้นออกจากระบบ (ระบบจะลบข้อมูลออกจากฐานข้อมูลทันที)</li>
</ul>
</section>
<section id="users" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-green-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">3. การจัดการผู้ใช้ (Users)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
เมนูสำหรับเพิ่มและจัดการบัญชีนักเรียน รวมถึงบัญชีผู้ดูแลระบบท่านอื่นๆ (รายชื่อจะถูกเรียงตามตัวอักษร ก-ฮ โดยอัตโนมัติ)
</p>
<ul class="list-disc pl-6 text-sm text-gray-700 space-y-2">
<li><strong class="text-gray-900">เพิ่มนักเรียนใหม่:</strong> ต้องกำหนด "ชื่อผู้ใช้ (Username)" และ "รหัสผ่าน" ให้นักเรียนนำไปล็อกอิน</li>
<li><strong class="text-gray-900">รีเซ็ตรหัสผ่าน:</strong> หากนักเรียนลืมรหัสผ่าน แอดมินสามารถกดแก้ไข และพิมพ์รหัสผ่านใหม่ลงไปได้เลย หากปล่อยว่างไว้จะเป็นการใช้รหัสผ่านเดิม</li>
<li><strong class="text-gray-900">การลบบัญชี:</strong> แอดมินไม่สามารถลบบัญชีของตัวเองได้ เพื่อป้องกันความผิดพลาด</li>
</ul>
</section>
<section id="settings" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-yellow-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">4. การตั้งค่าระบบ (Settings)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
เมนูสำหรับควบคุมการทำงานทั้งหมดของระบบ แบ่งออกเป็น 2 แท็บ คือ "การตั้งค่าทั่วไป" และ "ประวัติการใช้งาน"
</p>
<ul class="list-disc pl-6 text-sm text-gray-700 space-y-2">
<li><strong class="text-gray-900">จำนวนวันแจ้งเตือน:</strong> กำหนดว่าถ้านานแค่ไหนก่อนถึงวันส่ง ให้ถือว่าเป็น "ใกล้กำหนด" (เช่น 3 วัน) ตัวอักษรจะเป็นสีส้ม</li>
<li><strong class="text-gray-900">เวลาแจ้งเตือนรายวัน:</strong> เวลาอ้างอิงสำหรับการตั้งค่า Cron Job</li>
<li><strong class="text-gray-900">ข้อความ Footer:</strong> ข้อความลิขสิทธิ์ด้านล่างสุดของเว็บ สามารถเปลี่ยนเป็นชื่อโรงเรียนหรือชื่อวิชาได้</li>
<li><strong class="text-gray-900">เปิด-ปิด API:</strong> สามารถติ๊กเลือกเปิดหรือปิดระบบแจ้งเตือนเข้ากลุ่ม LINE และ Telegram ได้</li>
<li><strong class="text-gray-900">ปุ่มทดสอบส่ง:</strong> แนะนำให้กดปุ่มนี้เสมอเมื่อตั้งค่า Token ใหม่ เพื่อทดสอบว่าบอทสามารถส่งข้อความเข้ากลุ่มได้จริง</li>
</ul>
</section>
<section id="logs" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">5. ประวัติการใช้งาน (Activity Logs)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
แท็บที่สองในหน้าตั้งค่าระบบ ใช้สำหรับตรวจสอบความเคลื่อนไหวทั้งหมดที่เกิดขึ้นในระบบ
</p>
<ul class="list-disc pl-6 text-sm text-gray-700 space-y-2">
<li>บันทึกการ Login เข้าสู่ระบบ (รวมถึงคนที่พยายามเข้าสู่ระบบแต่รหัสผิด พร้อมบันทึก IP Address)</li>
<li>บันทึกการเพิ่ม แก้ไข หรือลบงาน และ ผู้ใช้งาน (รู้ว่าใครเป็นคนลบหรือแก้)</li>
<li>บันทึกการปรับปรุงการตั้งค่าระบบ</li>
<li>บันทึกประวัติการส่งแจ้งเตือนอัตโนมัติ (Cron) ว่าส่งไปกี่ข้อความในแต่ละวัน</li>
<li><span class="bg-gray-100 px-1 rounded border border-gray-300">รองรับการ Export ออกเป็น Excel เพื่อเก็บไว้เป็นหลักฐานย้อนหลังได้</span></li>
</ul>
</section>
<section id="notifications" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-purple-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">6. การเชื่อมต่อแจ้งเตือน & Cron Job</h3>
<div class="space-y-6">
<!-- LINE Notify -->
<div class="border border-green-200 rounded p-4 bg-green-50">
<h5 class="font-bold text-green-700 mb-2"><i class="fab fa-line mr-1"></i> วิธีตั้งค่า LINE Notify (แบบกลุ่ม)</h5>
<ol class="list-decimal pl-4 text-sm text-gray-700 space-y-1">
<li>เข้าไปที่เว็บ <a href="https://notify-bot.line.me/" target="_blank" class="text-blue-600 underline">notify-bot.line.me</a> แล้วเข้าสู่ระบบ</li>
<li>ไปที่ "หน้าของฉัน" (My Page) เลื่อนลงมากดปุ่ม "ออก Token" (Generate token)</li>
<li>ตั้งชื่อบอท และ <strong class="text-red-500">เลือกกลุ่มแชทของห้องเรียน</strong></li>
<li>คัดลอก Token ที่ได้ มาใส่ในหน้าตั้งค่าระบบของเว็บไซต์นี้</li>
<li>เข้าไปที่กลุ่มแชท LINE ในมือถือ แล้วเชิญบัญชีชื่อ <strong class="text-green-600">LINE Notify</strong> เข้ากลุ่ม</li>
</ol>
</div>
<!-- Telegram -->
<div class="border border-blue-200 rounded p-4 bg-blue-50">
<h5 class="font-bold text-blue-700 mb-2"><i class="fab fa-telegram-plane mr-1"></i> วิธีตั้งค่า Telegram (แบบกลุ่ม)</h5>
<ol class="list-decimal pl-4 text-sm text-gray-700 space-y-1">
<li>ในแอป Telegram ค้นหาบอทชื่อ <strong>@BotFather</strong></li>
<li>พิมพ์ <code>/newbot</code> เพื่อสร้างบอทใหม่และรับ <strong class="text-blue-600">Bot Token</strong></li>
<li>สร้างกลุ่มแชท Telegram ใหม่ แล้วดึงบอทที่คุณสร้างเข้ากลุ่ม</li>
<li>ดึงบอทชื่อ <strong>@RawDataBot</strong> เข้ากลุ่ม หาคำว่า <code>"chat": {"id": -100xxxxxxxx}</code> นำตัวเลขนั้นมาใส่ช่อง <strong class="text-blue-600">Group Chat ID</strong></li>
</ol>
</div>
</div>
<div class="mt-6 border-t pt-4">
<h4 class="font-bold text-lg text-gray-800 mb-3"><i class="fas fa-clock mr-2 text-gray-500"></i> การตั้งค่า Cron Job (แจ้งเตือนอัตโนมัติ)</h4>
<p class="text-sm text-gray-700 mb-3">
เพื่อให้ระบบทำงานส่งแจ้งเตือนทุกวันอัตโนมัติ คุณต้องตั้งค่า Cron Job ใน Hosting ของคุณ ให้เรียกไฟล์ <code class="bg-gray-100 px-1 py-0.5 rounded border border-gray-300">cron_notify.php</code>
</p>
<div class="bg-gray-800 text-white p-4 rounded font-mono text-sm overflow-x-auto">
<span class="text-gray-400"># ตัวอย่างการตั้ง Cron ให้รันทุกวัน เวลา 08:00</span><br>
0 8 * * * wget -qO- http://yourwebsite.com/cron_notify.php &gt; /dev/null 2&gt;&amp;1
</div>
<p class="text-xs text-gray-500 mt-2">* หรือกดปุ่ม "เปิดรัน Cron Job แบบ Manual" ด้านล่างของหน้าตั้งค่า เพื่อสั่งรันด้วยตัวเองก็ได้</p>
</div>
</section>
<?php else: ?>
<!-- Student Section -->
<section id="student-tasks" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-blue-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">1. งานของฉัน (My Assignments)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
หน้านี้จะรวบรวมงานทั้งหมดที่คุณต้องส่ง โดยเรียงลำดับจากงานใหม่ล่าสุดอยู่บนสุด (ลำดับที่ 1)
</p>
<ul class="list-disc pl-6 text-sm text-gray-700 space-y-2">
<li><strong class="text-gray-900">ดูรายละเอียดงาน:</strong> กดปุ่ม "ดูรายละเอียด" เพื่อเปิดหน้าต่าง Popup อ่านคำอธิบายแบบเต็ม และ <span class="bg-blue-100 text-blue-800 px-1 rounded text-xs">ดูรายชื่อเพื่อนทั้งหมดที่ได้รับมอบหมายงานชิ้นเดียวกันนี้ได้</span></li>
<li><strong class="text-gray-900">ป้ายสีแจ้งเตือน:</strong> หากใกล้ถึงวันส่ง จะมีป้ายสีส้มบอกจำนวนวันที่เหลือ แต่หาก <span class="bg-gray-800 text-white px-2 py-0.5 rounded text-xs">ป้ายเป็นสีดำ</span> หมายความว่าคุณส่งงานล่าช้ากว่ากำหนดแล้ว</li>
<li><strong class="text-yellow-600">รอดำเนินการ:</strong> งานที่ยังไม่ได้ส่ง</li>
<li><strong class="text-green-600">เสร็จสิ้น:</strong> งานที่คุณส่งแล้วและคุณครูยืนยันในระบบแล้ว</li>
</ul>
</section>
<section id="student-alerts" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-indigo-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">2. ระบบการแจ้งเตือน</h3>
<p class="text-gray-700 leading-relaxed mb-4">
ระบบจะช่วยเตือนความจำให้คุณไม่พลาดการส่งงาน ผ่าน 2 ช่องทาง:
</p>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-window-restore text-3xl text-indigo-400 mr-4 mt-1"></i>
<div>
<strong class="block text-gray-800">แจ้งเตือนบนเว็บไซต์ (Popup)</strong>
<p class="text-sm text-gray-600">ทุกครั้งที่คุณล็อกอินเข้าสู่ระบบ หากมีงานใกล้กำหนดส่ง จะมีกล่องแจ้งเตือนเด้งขึ้นมากลางหน้าจอ **เพียง 1 ครั้งเท่านั้น** (สามารถใช้นิ้วเลื่อนดูรายการงานทั้งหมดในกล่องได้หากมีหลายงาน)</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-mobile-alt text-3xl text-green-500 mr-4 mt-1"></i>
<div>
<strong class="block text-gray-800">แจ้งเตือนเข้าแอปพลิเคชัน</strong>
<p class="text-sm text-gray-600">ข้อความแจ้งเตือนจะถูกส่งเข้าไปในกลุ่มแชทของห้องเรียน (เช่น LINE หรือ Telegram) ในตอนเช้าของทุกวัน</p>
</div>
</div>
</div>
</section>
<section id="responsive-ui" class="bg-white rounded-lg shadow-md p-6 scroll-mt-6 border-l-4 border-green-500">
<h3 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2 text-blue-700">3. การใช้งานบนมือถือ (Mobile Responsive)</h3>
<p class="text-gray-700 leading-relaxed mb-4">
เว็บไซต์ถูกออกแบบมาให้รองรับการใช้งานบนหน้าจอทุกขนาด:
</p>
<div class="flex items-start">
<i class="fas fa-plus-circle text-3xl text-green-500 bg-white mr-4 mt-1"></i>
<div>
<strong class="block text-gray-800">ปุ่มขยายข้อมูล (เครื่องหมายบวก)</strong>
<p class="text-sm text-gray-600">หากคุณเปิดเว็บด้วยโทรศัพท์มือถือ ตารางจะซ่อนข้อมูลบางส่วนอัตโนมัติเพื่อให้พอดีกับหน้าจอ คุณสามารถแตะที่ปุ่ม <strong class="text-green-600">+ (บวก)</strong> ที่อยู่หน้าแถว เพื่อกางข้อมูลส่วนที่ซ่อนอยู่ออกมาดูได้ทันที</p>
</div>
</div>
</section>
<?php endif; ?>
</div>
</div>
<script>
// Simple smooth scrolling for sidebar links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<?php include 'includes/footer.php'; ?>