Back
Projects Tutor Kang Baan ติวเตอร์ข้างบ้าน
หน้าหลัก 890 HALL OF FAME คอร์ส 123 456 89
Key Features
  • Analytics
    Dashboard สถิติกราฟ

    แสดงผลสถิติและข้อมูลการขายในรูปแบบกราฟที่เข้าใจง่ายแบบเรียลไทม์

  • Management
    จัดการคอร์ส (CRUD)

    ระบบจัดการเนื้อหาคอร์สเรียน เพิ่ม ลบ แก้ไข ได้อย่างครบวงจร

  • UX Design
    ลากวาง Drag & Drop

    เพิ่มประสบการณ์การใช้งานที่ลื่นไหลด้วยระบบลากวางองค์ประกอบ

  • E-Commerce
    ระบบตะกร้า AJAX

    การสั่งซื้อที่รวดเร็วไม่ต้องรอโหลดหน้าใหม่ด้วยเทคโนโลยี AJAX

แพลตฟอร์มคอร์สเรียนออนไลน์
Tutor Kang Baan ติวเตอร์ข้างบ้าน

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

จัดทำขึ้นเพื่อเป็นโปรเจกต์ (Final Project) ในรายวิชา: WEB APPLICATION DESIGN AND DEVELOPMENT
0 Technologies
0 Key Features
Technologies Used
Frontend
CSS3 JavaScript Bootstrap 5 Swiper.js Chart.js SortableJS Bootstrap Icons
Backend & Database
PHP MySQL (MariaDB)
Architecture & Concepts
AJAX Session Management CSRF Protection MVC-like Concept

โฟลว์การทำงานของระบบ (System Flowchart)

แผนผังแสดงขั้นตอนการทำงานหลักของระบบ (Main Workflow) แบ่งการทำงานออกเป็น 3 เส้นทางหลัก ได้แก่ ผู้ใช้ทั่วไป (General User), นักเรียน (Student) และ ผู้สอน/แอดมิน (Tutor/Admin):

graph TD classDef general fill:#6cb383,stroke:#fff,stroke-width:2px,color:#fff classDef action fill:#2563eb,stroke:#fff,stroke-width:2px,color:#fff classDef actionWhite fill:#fff,stroke:#000,stroke-width:1px,color:#000 classDef decision fill:#eab308,stroke:#fff,stroke-width:2px,color:#000 classDef terminate fill:#4b5563,stroke:#eab308,stroke-width:2px,stroke-dasharray: 5 5,color:#fff classDef warning fill:#dc2626,stroke:#fff,stroke-width:2px,color:#fff classDef success fill:#16a34a,stroke:#fff,stroke-width:2px,color:#fff classDef file fill:#9333ea,stroke:#fff,stroke-width:2px,color:#fff %% User Column StartUser([Start: ผู้ใช้ทั่วไป]):::general --> Browse[เรียกดูข้อมูล
หน้าแรก, คอร์ส, โปรไฟล์]:::action Browse --> CourseDetail[ดูรายละเอียดคอร์ส]:::action CourseDetail --> WantEnroll{ต้องการลงทะเบียน
เรียน?}:::decision WantEnroll -- ไม่ --> End1([END
สิ้นสุดการทำงาน]):::terminate WantEnroll -- ใช่ --> LoginReg[ไปยังหน้า Login/Register]:::warning %% Student Column StartStudent([Start: Student]):::general --> LoginStudent[เข้าสู่ระบบ
login.php]:::action LoginReg --> LoginStudent LoginStudent --> RequestEnroll[ทดลองลงทะเบียน/ชำระเงิน
course details]:::action RequestEnroll --> IsPaid{คอร์สมีค่าใช้จ่าย?}:::decision IsPaid -- ใช่ มีค่าใช้จ่าย --> Pay[\ชำระเงิน/]:::file Pay --> UploadSlip[\อัปโหลดสลิป
pending/]:::file IsPaid -- ไม่ คอร์สฟรี --> EnrollFree[\ลงทะเบียนคอร์สฟรี
enrollments/]:::success %% Admin Column StartAdmin([Start: Tutor/Admin]):::general --> LoginAdmin[เข้าสู่ระบบ]:::actionWhite LoginAdmin --> Dashboard[แดชบอร์ดหลัก]:::action Dashboard --> ManageCat[จัดการหมวดหมู่]:::action ManageCat --> ManageCourse[สร้าง/แก้ไขคอร์ส]:::action ManageCourse --> ManageContent[จัดการเนื้อหาคอร์ส]:::action ManageContent --> ApprovePay[อนุมัติการชำระเงิน
ตรวจสอบ transactions]:::action ApprovePay --> IsValid{สลิปถูกต้อง?}:::decision UploadSlip -.-> ApprovePay IsValid -- ไม่ --> Reject[\ปฏิเสธ: rejected/]:::warning IsValid -- ใช่ --> Approve[\อนุมัติ: approved
enrollments/]:::success Approve --> ManageProf[จัดการโปรไฟล์]:::action Reject --> EndAdmin([END
สิ้นสุดการทำงาน]):::terminate ManageProf --> EndAdmin EnrollFree --> StudentPanel[แดชบอร์ดนักเรียน]:::action UploadSlip --> StudentPanel Reject -.-> StudentPanel Approve -.-> StudentPanel StudentPanel --> Study[เข้าเรียน
ดูวิดีโอ]:::action Study --> Track[ติดตามความคืบหน้า]:::action Track --> Review[เขียนรีวิว]:::action Review --> EndStudent([END
สิ้นสุดการทำงาน]):::terminate StudentPanel --> EndStudent

* หากโฟลว์การทำงาน (System Flowchart) มีข้อผิดพลาดหรือตกหล่นประการใด ต้องขออภัยมา ณ ที่นี้ด้วยครับ

การออกแบบฐานข้อมูล (Database Design)

ระบบถูกออกแบบโครงสร้างฐานข้อมูลแบบ Normalized ให้มีความสัมพันธ์กันอย่างเป็นระบบ เพื่อรองรับการสเกลและประสิทธิภาพที่ดี คลอบคลุมระบบการจัดการผู้ใช้, เนื้อหาการเรียน, การติดตามผล และระบบ E-Commerce โดยประกอบด้วย 20 ตารางหลัก ได้แก่:

01
users
เก็บข้อมูลผู้ใช้ทั้งหมด (นักเรียน, ผู้ช่วย, แอดมิน)
02
categories
เก็บหมวดหมู่ของคอร์สเรียน
03
courses
เก็บข้อมูลคอร์สเรียนหลัก
04
enrollments
เก็บข้อมูลการลงทะเบียนเรียนในแต่ละคอร์ส
05
reviews
เก็บรีวิวสำหรับคอร์สและผู้สอน
06
teacher_portfolio
เก็บผลงานและรางวัลของผู้สอน
07
course_sections
เก็บชื่อบทเรียนภายในคอร์ส
08
course_videos
เก็บข้อมูลวิดีโอในแต่ละบทเรียน
09
course_materials
เก็บไฟล์เอกสารประกอบการเรียน
10
video_progress
ติดตามความคืบหน้าการดูวิดีโอ
11
orders
เก็บข้อมูลคำสั่งซื้อและยอดรวม
12
order_items
เก็บรายการคอร์สที่ถูกซื้อในแต่ละคำสั่งซื้อ
13
coupons
เก็บข้อมูลคูปองส่วนลดแบบต่างๆ
14
coupon_courses
ตารางเชื่อมระหว่างคูปองกับคอร์สที่ใช้ได้
15
cart
เก็บข้อมูลคอร์สที่อยู่ในตะกร้าของนักเรียน
16
wishlist
เก็บรายการคอร์สโปรดที่อยากเรียนในอนาคต
17
universities
เก็บรายชื่อมหาวิทยาลัย
18
student_success_stories
เก็บเรื่องราวความสำเร็จของนักเรียนที่สอบติด
19
notifications
เก็บการแจ้งเตือนสำหรับผู้ใช้ในระบบ
20
auth_tokens
เก็บโทเค็นฟังก์ชัน "จดจำฉัน" (Remember Me)
โครงสร้างแบบ Normalized: ตารางทั้งหมดถูกเชื่อมโยงด้วย Foreign Keys เพื่อรักษาความถูกต้องของข้อมูล (Data Integrity) เช่น course_id ที่ถูกอ้างอิงจากตารางหลัก ไปยังหมวดหมู่ บทเรียน วิดีโอ และการสั่งซื้อ ทำให้ระบบสามารถขยายตัวได้อย่างมีประสิทธิภาพ