ระบบจัดการรายวิชา (Course Management Platform)

โปรเจกต์นี้เป็นเว็บแอปพลิเคชันพื้นฐานสำหรับจัดการรายวิชาแบบสองฝั่ง คือ

• นักเรียนเข้าเรียนด้วย รหัสวิชา
• อาจารย์สร้าง/แก้ไขเนื้อหาบทเรียนและไฟล์แนบได้

แอปนี้สร้างด้วย Next.js 15 และ React 19 บนโครงสร้าง App Router

---

🧩 ฟีเจอร์หลัก

• หน้าโฮมสวยงาม พร้อมลิงก์เข้าสู่ระบบนักเรียนและโหมดอาจารย์
• หน้า course ให้กรอกรหัสวิชาเพื่อเข้าสู่ระบบนักเรียน
• ฟอร์มลอยสำหรับอาจารย์ เพื่อสร้างหรือเข้าใช้งานวิชาใหม่
• backend API ตรวจรหัสวิชาและสร้างวิชาใหม่ผ่าน MySQL
• อาจารย์สามารถสร้างหัวข้อเนื้อหา, อัปโหลดไฟล์/รูป, ใส่ลิงก์ และบันทึกข้อมูลลง localStorage
• นักเรียนสามารถดูเนื้อหาที่อาจารย์สร้างไว้ และเปิดไฟล์/ลิงก์ได้
• ระบบคอมเมนต์ Q&A ระหว่างนักเรียนกับอาจารย์โดยเก็บใน localStorage

---

📁 โครงสร้างไฟล์สำคัญ

• app/page.js - หน้าแรกของเว็บ
• app/course/page.js - หน้าเข้าสู่ระบบโดยใช้รหัสวิชา
• app/[subjectCode]/page.js - หน้าสำหรับนักเรียนดูเนื้อหา
• app/teacher/[subjectCode]/page.js - หน้าสำหรับอาจารย์แก้ไขคอร์ส
• app/api/courses/route.js - API สำหรับสร้างวิชาใหม่
• app/api/courses/check/route.js - API ตรวจรหัสวิชาว่ามีอยู่ในระบบหรือไม่
• lib/db.js - ตั้งค่าการเชื่อมต่อฐานข้อมูล MySQL
• app/globals.css - สไตล์หลักของแอป
• app/course/style.css - สไตล์หน้าเขตนักเรียน/อาจารย์

---

⚙️ ติดตั้งและรันโปรเจกต์

1. ติดตั้ง dependencies

npm install

2. รันโหมดพัฒนา

npm run dev

3. เปิดเว็บที่

http://localhost:3000

---

🧪 การตั้งค่าฐานข้อมูล

ไฟล์ lib/db.js เชื่อมต่อกับ MySQL โดยใช้ค่าดังนี้:

• host: localhost
• user: root
• password: `` (ว่าง)
• database: lmsme

ตารางที่ต้องใช้

ตัวอย่างตาราง classt ใน MySQL:

CREATE TABLE classt (
  id INT AUTO_INCREMENT PRIMARY KEY,
  teacher_name VARCHAR(255),
  subject_name VARCHAR(255),
  subject_code VARCHAR(50)
);

หมายเหตุ: ถ้าใช้ XAMPP ให้ตรวจสอบว่า MySQL ทำงานและชื่อฐานข้อมูล lmsme ถูกสร้างไว้แล้ว

---

🚀 วิธีใช้งาน

นักเรียน

1. ไปที่หน้า COURSE (เมนูนักเรียน)
2. กรอกรหัสวิชา เช่น ABC1
3. ถ้ารหัสวิชาถูกต้อง ระบบจะพาไปยังหน้าเนื้อหาวิชา

อาจารย์

1. คลิกปุ่ม + ที่หน้า COURSE
2. กรอกชื่ออาจารย์, ชื่อวิชา, รหัสวิชา
3. ถ้าวิชาไม่มีอยู่ในระบบ จะสามารถสร้างใหม่ได้
4. เมื่อเข้าหน้าอาจารย์แล้ว สามารถ:
   • สร้างหัวข้อรายวิชา
   • เพิ่มเนื้อหา
   • อัปโหลดไฟล์หรือรูปภาพ
   • ใส่ลิงก์
   • บันทึกข้อมูลลง localStorage

---

🔧 สถานะปัจจุบัน

• ใช้ Next.js App Router
• มี API Node.js + MySQL
• ข้อมูลคอร์สภายในฝั่งอาจารย์/นักเรียนเก็บใน localStorage
• มีการสไตลิงและ UI เบื้องต้นในหน้า course

---

💡 ข้อเสนอแนะการพัฒนาเพิ่มเติม

• ย้ายเนื้อหา course จาก localStorage ไปเก็บในฐานข้อมูลจริง
• เพิ่มระบบผู้ใช้ (Authentication) สำหรับครูและนักเรียน
• ใส่ validation ของไฟล์และขนาดให้ชัดเจน
• ทำ UI ให้รองรับมือถือและ Tablet อย่างเต็มรูปแบบ

---

📌 Dependencies สำคัญ

• next 15.5.0
• react 19.1.0
• react-dom 19.1.0
• mysql2 3.22.3
• firebase 12.12.1

---

📝 หมายเหตุ

firebase ถูกติดตั้งใน package.json แต่ในโค้ดปัจจุบันยังไม่พบการใช้งานจริง