โลโก้โรงเรียนฝายกวางวิทยาคม

FKW Repair Report System

โรงเรียนฝายกวางวิทยาคม

คู่มือโครงสร้างระบบและสถาปัตยกรรม (Portfolio Developer Documentation)

FKW Repair Report System

ระบบแจ้งจุดชำรุดภายในโรงเรียนฝายกวางวิทยาคม พัฒนาด้วยเทคโนโลยี Modern Web Development แบ่งสถาปัตยกรรมออกเป็น Frontend (Next.js Client) และ Backend (Node.js REST API Server)โดยเน้นการสื่อสารที่ปลอดภัย รวดเร็ว และรองรับผู้ใช้งานพร้อมกันได้เสถียร

1แผนผังสถาปัตยกรรมการรับส่งข้อมูล (Data Flow Diagram)

Frontend Client

Next.js App Router

รวบรวมฟอร์มข้อมูลและแปลงไฟล์รูปภาพเป็น Base64 Data URL ส่งคำขอผ่าน Fetch REST API

HTTP Request (JSON)➔

Backend API

Express.js (Node.js)

ตรวจสอบความถูกต้อง ตรวจเช็ก Token ใน DB, ย่อรูปภาพเป็น WebP ผ่าน Sharp และเก็บลง Disk

2การทำ REST API Endpoints และโครงสร้าง Payload

POST/api_v1/reportsฟังก์ชัน: ส่งใบแจ้งซ่อม

รับข้อมูลรายละเอียดพร้อมรูปภาพ Base64 แปลงรูปภาพบันทึกลงโฟลเดอร์ Image/ ในชื่อ UUID.webp และบันทึกข้อมูลหลักลงฐานข้อมูล MySQL

GET/api_v1/admin/reportsฟังก์ชัน: ดึงรายการแอดมิน (Pagination & Search)

รองรับการกรองข้อมูลด้วย query parameters เช่น page และ search เพื่อแบ่งหน้าทีละ 15 รายการ หรือค้นหาสูงสุด 30 รายการ

POST/api_v1/admin/reports/:id/deleteฟังก์ชัน: ลบรายงาน + ลบไฟล์รูปภาพ

ลบข้อมูลแถวในฐานข้อมูลพร้อมทั้งลบรูปภาพทั้งหมดที่เกี่ยวข้องออกจากดิสก์ของเซิร์ฟเวอร์โดยอัตโนมัติ เพื่อประหยัดพื้นที่ดิสก์

3โครงสร้างฐานข้อมูล (Database Schema)

ฐานข้อมูลทำงานบนระบบจัดการ MySQL ประกอบไปด้วย 2 ตารางหลัก:

ตาราง: reports (เก็บข้อมูลจุดชำรุด)

  • • id: INT AUTO_INCREMENT (PK)
  • • report_code: VARCHAR (รหัสอ้างอิง เช่น FKW-2026-xxx)
  • • title: VARCHAR (หัวข้อแจ้งซ่อม)
  • • description: TEXT (รายละเอียดอาการเสีย)
  • • location: VARCHAR (สถานที่/อาคาร)
  • • category: VARCHAR (ประเภทปัญหา เช่น ไฟฟ้า, ประปา)
  • • reporter_name: VARCHAR (ชื่อผู้แจ้ง)
  • • image_ids: LONGTEXT (รายการ UUID รูปภาพ คั่นด้วยเครื่องหมายจุลภาค)
  • • status: ENUM ('pending', 'in_progress', 'resolved')

ตาราง: users (เก็บข้อมูลแอดมิน)

  • • id: INT AUTO_INCREMENT (PK)
  • • username: VARCHAR UNIQUE (ชื่อผู้ใช้)
  • • password: VARCHAR (รหัสผ่านเข้ารหัส)
  • • role: VARCHAR (บทบาทสิทธิ์ เช่น admin)
  • • token: VARCHAR (Token เก็บไว้เช็กความถูกต้องฝั่งเซิร์ฟเวอร์)
  • • created_at / updated_at: DATETIME

4ระบบความปลอดภัยขั้นสูง (Security Best Practices)

ป้องกัน SQL Injection

การดึงคำสั่ง SQL ใช้ SQL Parameterized Prepared Statements ทั้งหมด เพื่อแยกข้อมูลออกจากคำสั่ง SQL ทำให้ไม่สามารถทำ SQL Injection ได้

ป้องกัน XSS (Cross-Site Scripting)

ฝั่งเซิร์ฟเวอร์กรองข้อมูล input ทุกประเภทด้วยฟังก์ชัน escapeHtml ก่อนบันทึก และฝั่งหน้าบ้านทำการหลีกเลี่ยงการใช้คำสั่ง HTML ที่ไม่ปลอดภัย และใช้การประมวลผลผ่าน JSX ซึ่งปลอดภัยจาก XSS

ป้องกันการสวมสิทธิ์แอดมิน

แอดมินทุกครั้งที่เรียก API ส่วนควบคุมของระบบ แอดมินต้องส่ง Bearer Token ที่ตรงกับในฐานข้อมูล หากไม่มี หรือไม่ถูกต้อง ระบบจะบล็อกคำขอและรีเทิร์นรหัส 401 Unauthorized กลับทันที

ความปลอดภัย Headers เครือข่าย

เซิร์ฟเวอร์ตอบสนองด้วยหัวข้อรักษาความปลอดภัย เช่น X-Content-Type-Options: nosniff และ X-Frame-Options: DENY เพื่อความปลอดภัยสูงสุด

กลับหน้าแรก