=============================================================================== ระบบคอร์สเรียนออนไลน์ (Online Course System) เอกสารอธิบายโครงสร้างระบบ =============================================================================== ================================================================================ ส่วนที่ 1: สิ่งที่ควรมี (Recommended System Components) ================================================================================ 1. ระบบจัดการผู้ใช้งาน (User Management System) -------------------------------------------------- - ระบบสมัครสมาชิก (Registration) * สมัครด้วยอีเมล * สมัครผ่าน Social Login (Google, Facebook, Line) * ยืนยันตัวตนผ่านอีเมล - ระบบเข้าสู่ระบบ (Authentication) * Login/Logout * Remember Me * Forgot Password * Two-Factor Authentication (2FA) - บทบาทผู้ใช้งาน (User Roles) * ผู้ดูแลระบบ (Admin) * ผู้สอน (Instructor/Teacher) * ผู้เรียน (Student) * ผู้ช่วยสอน (Teaching Assistant) - โปรไฟล์ผู้ใช้ (User Profile) * ข้อมูลส่วนตัว * รูปโปรไฟล์ * ประวัติการเรียน * ใบรับรอง/Certificate ที่ได้รับ 2. ระบบจัดการคอร์ส (Course Management System) -------------------------------------------------- - การสร้างและจัดการคอร์ส * สร้างคอร์สใหม่ * แก้ไข/ลบคอร์ส * จัดหมวดหมู่คอร์ส * กำหนดระดับความยาก (Beginner, Intermediate, Advanced) * ภาษาที่ใช้สอน * ราคาคอร์ส (ฟรี/เสียเงิน) - โครงสร้างเนื้อหา * หมวดหมู่ (Category) * หลักสูตร (Course) * บท (Section/Module) * บทเรียน (Lesson) - ประเภทเนื้อหา * วิดีโอบทเรียน * เอกสาร PDF * สไลด์นำเสนอ * เสียง (Audio) * แบบทดสอบ (Quiz) * แบบฝึกหัด (Assignment) * ลิงก์ภายนอก 3. ระบบการเรียนการสอน (Learning Management) -------------------------------------------------- - ระบบเล่นวิดีโอ * เล่นวิดีโอออนไลน์ * ปรับความเร็ว * คุณภาพวิดีโอ (360p, 720p, 1080p) * บันทึกจุดที่ดูค้างไว้ * ป้องกันการข้ามวิดีโอ (ถ้าต้องการ) - ติดตามความก้าวหน้า * เปอร์เซ็นต์ที่เรียนไปแล้ว * บทเรียนที่เรียนจบแล้ว * เวลาที่ใช้เรียน * ประวัติการเรียน - ระบบแบบทดสอบ/ควิซ * คำถามแบบเลือกตอบ (Multiple Choice) * คำถามแบบถูก/ผิด (True/False) * คำถามแบบเติมคำ (Fill in the blank) * คำถามแบบอัตนัย (Essay) * กำหนดเวลาทำข้อสอบ * แสดงผลคะแนน * เกณฑ์ผ่าน - ระบบงานมอบหมาย * ส่งงาน * กำหนดส่ง (Deadline) * ตรวจงาน/ให้คะแนน * แสดงผลป้อนกลับ (Feedback) 4. ระบบการชำระเงิน (Payment System) -------------------------------------------------- - ช่องทางการชำระเงิน * บัตรเครดิต/เดบิต * Mobile Banking * QR Code Payment (PromptPay) * PayPal * โอนเงินผ่านธนาคาร - การจัดการ * ตะกร้าสินค้า (Shopping Cart) * Coupon/ส่วนลด * ใบเสร็จรับเงิน/ใบกำกับภาษี * ประวัติการซื้อ * ระบบ Refund 5. ระบบใบรับรอง (Certificate System) -------------------------------------------------- - การออกใบรับรอง * ออกใบรับรองอัตโนมัติเมื่อจบคอร์ส * ตรวจสอบความถูกต้องด้วย QR Code * ดาวน์โหลด PDF * แชร์บน LinkedIn - เงื่อนไขการรับใบรับรอง * ดูวิดีโอครบ 100% * ทำแบบทดสอบผ่านตามเกณฑ์ * ส่งงานครบทุกชิ้น 6. ระบบการสื่อสาร (Communication System) -------------------------------------------------- - Q&A / ถามตอบ * ถามคำถามในแต่ละบทเรียน * ตอบคำถามโดยผู้สอน/ผู้ช่วย * โหวตคำตอบที่ดี * ค้นหาคำถาม - กระดานสนทนา (Discussion Board) * สร้างกระทู้ * แสดงความคิดเห็น * แจ้งเตือนการตอบกลับ - การแจ้งเตือน (Notification) * อีเมล * แจ้งเตือนในระบบ * Push Notification (ถ้ามี Mobile App) - ข้อความส่วนตัว (Direct Message) * ส่งข้อความถึงผู้สอน * ส่งข้อความระหว่างนักเรียน 7. ระบบรีวิวและการให้คะแนน (Review & Rating System) -------------------------------------------------- - รีวิวคอร์ส * ให้คะแนนดาว (1-5 ดาว) * เขียนรีวิว * แสดงรีวิวโดยเฉลี่ย * กรองรีวิวตามคะแนน - รีวิวผู้สอน * ประเมินการสอน * ความชัดเจนของเนื้อหา * การตอบคำถาม 8. ระบบรายงานและสถิติ (Reporting & Analytics) -------------------------------------------------- - สำหรับผู้เรียน * ความก้าวหน้าการเรียน * คะแนนแบบทดสอบ * เวลาที่ใช้เรียน * คอร์สที่สนใจ/Wishlist - สำหรับผู้สอน * จำนวนนักเรียน * อัตราการจบคอร์ส * รายได้ * คะแนนเฉลี่ยของคอร์ส * คำถามที่ถูกถามบ่อย - สำหรับผู้ดูแลระบบ * Dashboard ภาพรวม * รายได้ทั้งหมด * จำนวนผู้ใช้ * คอร์สยอดนิยม * User Activity Logs 9. ระบบค้นหาและกรองข้อมูล (Search & Filter System) -------------------------------------------------- - ค้นหาคอร์ส * ค้นหาตามชื่อ * ค้นหาตามหมวดหมู่ * ค้นหาตามผู้สอน - กรองข้อมูล * ระดับความยาก * ราคา (ฟรี/เสียเงิน) * คะแนนรีวิว * ภาษา * ระยะเวลา * เรียงลำดับ (ยอดนิยม, ใหม่สุด, ราคา) 10. ระบบ Admin Dashboard -------------------------------------------------- - จัดการผู้ใช้ * เพิ่ม/ลบ/แก้ไขผู้ใช้ * เปลี่ยนบทบาท * ระงับการใช้งาน - จัดการคอร์ส * อนุมัติ/ปฏิเสธคอร์ส * แก้ไข/ลบคอร์ส * จัดการหมวดหมู่ - จัดการการเงิน * ตรวจสอบรายการชำระเงิน * จัดการ Coupon * รายงานรายได้ - ตั้งค่าระบบ * การตั้งค่าทั่วไป * ตั้งค่าอีเมล * ตั้งค่า Payment Gateway * การสำรองข้อมูล 11. ความปลอดภัย (Security) -------------------------------------------------- - การเข้ารหัสข้อมูล (Encryption) - SSL Certificate - ป้องกัน SQL Injection - ป้องกัน XSS (Cross-Site Scripting) - CSRF Protection - Rate Limiting (ป้องกัน DDoS) - การสำรองข้อมูล (Backup) 12. ระบบเสริม (Additional Features) -------------------------------------------------- - Multi-language Support (หลายภาษา) - Responsive Design (รองรับมือถือ/แท็บเล็ต) - SEO Optimization - Social Media Integration - Email Marketing - Live Streaming (ถ่ายทอดสดการสอน) - Webinar - Gamification (ระบบคะแนน, Badge, Leaderboard) - AI Chatbot สำหรับตอบคำถามเบื้องต้น - Recommendation System (แนะนำคอร์ส) ================================================================================ ส่วนที่ 2: สิ่งที่ผู้ใช้ต้องการ (User Requirements) ================================================================================ [บันทึก: ส่วนนี้จะเพิ่มเติมตามความต้องการของผู้ใช้งาน] --- เพิ่มเติมความต้องการของคุณได้ที่นี่: --- 1. ระบบปรับแต่งหน้าตาและเนื้อหา (Customization System) -------------------------------------------------- ต้องการให้ระบบหลักสามารถเปลี่ยนแปลง/ปรับแต่งได้ตามต้องการ ดังนี้: ก) การตั้งค่าทั่วไป (General Settings) - เปลี่ยนชื่อระบบ/เว็บไซต์ - อัพโหลด/เปลี่ยน Logo - อัพโหลด/เปลี่ยน Favicon (icon) - เปลี่ยนแบนเนอร์หน้าแรก - เปลี่ยนรูปภาพพื้นหลัง ข) การจัดการเนื้อหาหน้าเว็บ (Content Management) - แก้ไขข้อความบนหน้าหลัก (Homepage) - แก้ไขข้อความหน้าติดต่อเรา (Contact Page) - แก้ไขข้อความหน้าเกี่ยวกับเรา (About Page) - แก้ไขชื่อเมนูต่างๆ - แก้ไขข้อความใน Footer - แก้ไขข้อความต้อนรับ ค) ระบบธีม/สีของเว็บไซต์ (Theme & Color System) - เลือกธีมสำเร็จรูป (Pre-built Themes) * ธีมสว่าง (Light Theme) * ธีมมืด (Dark Theme) * ธีมสีน้ำเงิน (Blue Theme) * ธีมสีเขียว (Green Theme) * ธีมสีแดง (Red Theme) * และอื่นๆ - ปรับแต่งสีเอง (Custom Color Picker) * สีหลัก (Primary Color) * สีรอง (Secondary Color) * สีพื้นหลัง (Background Color) * สีตัวอักษร (Text Color) * สีปุ่ม (Button Color) * สีเมนู (Menu Color) * สีลิงก์ (Link Color) - ตัวอย่างสีแบบ Real-time Preview - บันทึกธีมที่สร้างเอง - Import/Export ธีม ง) การจัดการฟอนต์ (Font Management) - เลือกแบบอักษร (Font Family) - ขนาดตัวอักษร (Font Size) - น้ำหนักตัวอักษร (Font Weight) จ) การตั้งค่าอื่นๆ - เปลี่ยนภาษาของระบบ (TH/EN) - แก้ไข SEO Meta Tags - แก้ไข Social Media Links - เปิด/ปิดฟีเจอร์ต่างๆ 2. เทคโนโลยีที่ใช้พัฒนา (Technology Stack) -------------------------------------------------- - Backend: PHP - Database: SQL (MySQL/MariaDB) - CSS Framework: Tailwind CSS - Frontend: HTML, CSS, JavaScript โครงสร้างการพัฒนา: - ใช้ PHP สำหรับประมวลผลฝั่ง Server - ใช้ SQL สำหรับจัดเก็บข้อมูล - ใช้ Tailwind CSS สำหรับจัดการ Styling และ Theme - ใช้ JavaScript สำหรับ Interactive Features - รองรับ Responsive Design ข้อกำหนดเพิ่มเติม: - ระบบ Admin Panel สำหรับจัดการการปรับแต่งทั้งหมด - บันทึกการตั้งค่าลงฐานข้อมูล - แยกไฟล์ Config สำหรับการปรับแต่ง - ใช้ CSS Variables สำหรับการเปลี่ยนสี - Cache System สำหรับโหลดเร็วขึ้น 3. สภาพแวดล้อมการพัฒนาและติดตั้งระบบ (Development & Deployment Environment) -------------------------------------------------- ก) Local Development Environment - ระบบปฏิบัติการ: Windows - Server Stack: XAMPP * Apache Web Server * MySQL Database * PHP * phpMyAdmin - พอร์ตเริ่มต้น: * Apache: 80, 443 * MySQL: 3306 ข) Production Server Environment - ระบบปฏิบัติการ: Ubuntu Server - Server Stack: LAMP * Apache Web Server * MySQL/MariaDB Database * PHP - การติดตั้ง: * sudo apt update * sudo apt install apache2 * sudo apt install mysql-server * sudo apt install php libapache2-mod-php php-mysql * sudo apt install php-curl php-gd php-mbstring php-xml php-zip ค) การตั้งค่าให้รองรับทั้ง 2 ระบบ (Cross-Platform Configuration) 1) ใช้ Path แบบ Relative แทน Absolute - ใช้ __DIR__, __FILE__ ในการอ้างอิง Path - หลีกเลี่ยง Hard-coded Path 2) ใช้ DIRECTORY_SEPARATOR - ใช้ DIRECTORY_SEPARATOR หรือ '/' สำหรับ Path - PHP จะแปลง '/' ให้ถูกต้องทั้ง Windows และ Linux 3) ไฟล์ Config แบบ Environment-Based สร้างไฟล์ config.php ที่ตรวจสอบ Environment อัตโนมัติ: ```php ``` 4) ใช้ .env File (แนะนำ - วิธีมาตรฐาน) - สร้างไฟล์ .env สำหรับ Local - สร้างไฟล์ .env สำหรับ Production (บน Server) - ใช้ Library เช่น vlucas/phpdotenv - ไม่ Commit ไฟล์ .env ลง Git - สร้าง .env.example เป็นตัวอย่าง ตัวอย่าง .env (Local): ``` APP_ENV=development DB_HOST=localhost DB_USER=root DB_PASS= DB_NAME=course_online BASE_URL=http://localhost/course_online/ ``` ตัวอย่าง .env (Production): ``` APP_ENV=production DB_HOST=localhost DB_USER=prod_user DB_PASS=secure_password DB_NAME=course_online_prod BASE_URL=https://yourdomain.com/ ``` 5) โครงสร้างไฟล์และโฟลเดอร์ ``` course_online/ ├── config/ │ ├── config.php # ไฟล์ Config หลัก │ └── database.php # การเชื่อมต่อ Database ├── public/ # Document Root │ ├── index.php │ ├── assets/ │ │ ├── css/ │ │ ├── js/ │ │ └── images/ │ └── uploads/ ├── includes/ │ ├── header.php │ ├── footer.php │ └── functions.php ├── admin/ ├── .env # ไม่ Commit ├── .env.example # Commit ได้ └── .htaccess # สำหรับ Apache ``` 6) .htaccess Configuration (สำหรับ Apache) ```apache # .htaccess RewriteEngine On RewriteBase /course_online/ # Redirect to public folder RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ public/$1 [L] ``` 7) Database Migration & Seeding - สร้าง SQL Script ที่รันได้ทั้ง 2 ระบบ - ใช้ Relative Path ในการ Import/Export - สร้าง Install Script สำหรับติดตั้งครั้งแรก 8) File Permissions (สำคัญสำหรับ Ubuntu) ```bash # ตั้งค่า Permission บน Ubuntu Server sudo chown -R www-data:www-data /var/www/html/course_online sudo chmod -R 755 /var/www/html/course_online sudo chmod -R 777 /var/www/html/course_online/uploads sudo chmod -R 777 /var/www/html/course_online/cache ``` 9) Git Ignore Configuration ``` # .gitignore .env /uploads/* /cache/* /logs/* .DS_Store Thumbs.db ``` ง) การ Deploy จาก Local ไป Production 1. ใช้ Git สำหรับ Version Control 2. Clone Repository บน Ubuntu Server 3. สร้าง .env สำหรับ Production 4. Import Database 5. ตั้งค่า Permission 6. ทำให้ Virtual Host บน Apache (Ubuntu) 7. Enable SSL Certificate (Let's Encrypt) จ) ข้อดีของวิธีนี้: - ไม่ต้องเปลี่ยนโค้ดเมื่อย้ายระบบ - Config แยกออกจากโค้ด - ปลอดภัย (ไม่ Commit ข้อมูล Sensitive) - Maintainable และ Scalable - รองรับการทำงานแบบ Team 4. การออกแบบ Layout และ UI/UX Design -------------------------------------------------- ก) หลักการออกแบบ (Design Principles) - Modern & Minimal Design - ดูเรียบหรู ทันสมัย - Clean Layout - เน้นความกระชับ อ่านง่าย - Professional Look - ดูเป็นมืออาชีพ น่าเชื่อถือ - User-Friendly Interface - ใช้งานง่าย สะดวก - Consistent Design - มีความสม่ำเสมอทั้งระบบ ข) Responsive Design - รองรับทุกอุปกรณ์ 1) Mobile First Approach - ออกแบบจาก Mobile ก่อน แล้วขยายไป Tablet และ PC - ใช้ Tailwind CSS Responsive Breakpoints: * sm: 640px (Mobile Landscape) * md: 768px (Tablet) * lg: 1024px (Desktop) * xl: 1280px (Large Desktop) * 2xl: 1536px (Extra Large) 2) Mobile Design (< 640px) - Single Column Layout - Hamburger Menu (ซ่อนเมนูในไอคอน 3 ขีด) - Touch-Friendly Buttons (ขนาดใหญ่พอกด) - Stack Content แนวตั้ง - Font Size ที่อ่านง่ายบนมือถือ - Bottom Navigation (ถ้าจำเป็น) - Swipeable Cards 3) Tablet Design (768px - 1024px) - 2 Column Layout (บางส่วน) - Side Menu หรือ Collapsed Menu - Grid System 2-3 คอลัมน์ - Optimized Touch & Click - Moderate Spacing 4) Desktop/PC Design (> 1024px) - Full Navigation Menu - Multi-Column Layout (2-4 คอลัมน์) - Sidebar Layout - Hover Effects - Larger Content Area - Advanced Features Display ค) Layout Components ที่ต้องมี 1) Header/Navigation - Logo (ซ้าย) - Menu หลัก (กลาง/ขวา) - Search Bar - User Profile / Login Button (ขวาสุด) - Sticky Header (ติดด้านบนเมื่อ Scroll) - Notification Icon (สำหรับผู้ที่ Login) Desktop: Full Menu Tablet: Condensed Menu Mobile: Hamburger Menu 2) Homepage Layout - Hero Section (แบนเนอร์ใหญ่ด้านบน) * Background Image/Video * Heading + Subheading * Call-to-Action Button - Featured Courses (คอร์สแนะนำ) * Grid Layout: 4 คอลัมน์ (PC), 2 คอลัมน์ (Tablet), 1 คอลัมน์ (Mobile) * Course Card พร้อม Hover Effect - Categories Section * Icon + ชื่อหมวดหมู่ * Grid/Carousel Layout - Stats/Numbers Section * จำนวนนักเรียน, คอร์ส, ครูผู้สอน * แสดงเป็นตัวเลขใหญ่พร้อมไอคอน - Testimonials/Reviews * Carousel/Slider * รีวิวจากนักเรียน - Call-to-Action Section * ชวนสมัครสมาชิก/เริ่มเรียน 3) Course Listing Page - Sidebar Filters (ซ้าย - Desktop/Tablet) * กรองตามหมวดหมู่ * กรองตามราคา * กรองตามระดับ * กรองตามคะแนน - Main Content (ขวา) * Search + Sort Options * Grid/List View Toggle * Course Cards * Pagination Mobile: Filter Button เปิด Modal 4) Course Detail Page - Video Preview/Course Image (ด้านบน) - Course Info Card (Sticky Sidebar - Desktop) * ราคา * ปุ่มซื้อ/สมัครเรียน * สิ่งที่ได้เรียน * ข้อกำหนด - Content Tabs * Overview * Curriculum (เนื้อหาคอร์ส) * Instructor * Reviews * Q&A - Related Courses 5) Learning Page (หน้าเรียน) - Video Player (เต็มจอหรือ Main Area) - Course Sidebar * รายการบทเรียนทั้งหมด * แสดง Progress * Collapse/Expand Sections - Tabs ด้านล่างวิดีโอ * Overview * Resources * Q&A * Notes - Navigation Buttons (บทก่อนหน้า/ถัดไป) Mobile: Fullscreen Video Collapsible Sidebar 6) User Dashboard - Sidebar Menu (ซ้าย) * My Courses * Wishlist * Purchase History * Messages * Settings * Certificates - Main Content Area (ขวา) * Welcome Message * Progress Overview * Continue Learning Cards * Achievements Mobile: Bottom Tab Navigation 7) Footer - 4 Column Layout (Desktop) * About Us * Quick Links * Categories * Contact & Social Media - Newsletter Signup - Copyright & Legal Links Mobile: Stack แนวตั้ง (1 คอลัมน์) ง) UI Elements & Components 1) Cards - Course Card * รูปภาพ Thumbnail * ป้าย Bestseller/New * ชื่อคอร์ส * ชื่อผู้สอน * Rating (ดาว + จำนวนรีวิว) * ราคา * Hover Effect (ยกขึ้น + เงา) - Clean White Card พร้อม Shadow - Rounded Corners - Smooth Transition 2) Buttons - Primary Button (สีหลัก - Call to Action) - Secondary Button (สีรอง) - Outline Button - Icon Button - Ghost Button - Rounded Corners - Hover & Active States - Loading State 3) Forms - Clean Input Fields - Label Animation - Error Validation Messages - Success States - Inline Icons - Placeholder Text 4) Navigation - Breadcrumbs - Tabs - Pagination - Dropdown Menu - Mega Menu (สำหรับหมวดหมู่เยอะ) 5) Modals & Popups - Login/Register Modal - Video Preview Modal - Confirmation Dialog - Alert Messages - Smooth Animation 6) Loading & Progress - Skeleton Loading - Progress Bar - Spinner - Lazy Loading Images จ) Color Scheme (แนวทางการใช้สี) - Primary Color: สีหลักของแบรนด์ - Secondary Color: สีเสริม - Accent Color: สีเน้น (Call-to-Action) - Background: สีพื้นหลัง (#F9FAFB, #FFFFFF) - Text Colors: * Heading: #111827 (เข้ม) * Body: #374151 (ปานกลาง) * Muted: #6B7280 (อ่อน) - Success: #10B981 (เขียว) - Warning: #F59E0B (ส้ม) - Error: #EF4444 (แดง) - Info: #3B82F6 (น้ำเงิน) ฉ) Typography - Font Family: * Heading: Inter, Poppins, Prompt (สำหรับภาษาไทย) * Body: Inter, Sarabun (สำหรับภาษาไทย) - Font Sizes (Tailwind Scale): * Heading 1: text-4xl (2.25rem) → text-5xl (PC) * Heading 2: text-3xl → text-4xl * Heading 3: text-2xl → text-3xl * Body: text-base (1rem) * Small: text-sm (0.875rem) - Line Height: 1.5 - 1.75 (อ่านง่าย) - Font Weight: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold) ช) Spacing & Rhythm - ใช้ระบบ 8px Grid System - Consistent Padding & Margin - White Space (ช่องว่างเพียงพอ) - Visual Hierarchy ชัดเจน ซ) Animations & Interactions - Subtle Animations (ไม่ฉูดฉาดเกินไป) - Hover Effects * Scale (1.02 - 1.05) * Shadow * Color Change - Smooth Transitions (0.2s - 0.3s) - Page Transitions - Scroll Animations (Fade In, Slide In) - Loading Animations ฌ) Icons & Images - Icon Library: Font Awesome, Heroicons, Feather Icons - SVG Icons (น้ำหนักเบา) - Consistent Icon Style - Optimized Images (WebP format) - Lazy Loading - Placeholder Images ญ) Accessibility (การเข้าถึง) - Contrast Ratio ที่เหมาะสม (WCAG AA) - Keyboard Navigation - Screen Reader Friendly - Alt Text สำหรับรูปภาพ - Focus States ชัดเจน - Readable Font Sizes (min 16px for body) ฎ) Performance Optimization - Minify CSS/JS - Compress Images - Lazy Loading - CDN สำหรับ Assets - Caching - Fast Loading Time (< 3 วินาที) 5. ระบบ Developer Mode และ Error Handling (Professional System) -------------------------------------------------- ก) Developer Key System (ระบบตรวจสอบโหมดการทำงาน) 1) ไฟล์ key.json - ตำแหน่ง: /config/key.json - ข้อมูล: เก็บ Key ที่ถูกเข้ารหัส - รูปแบบ: ```json { "developer_key": "encrypted_key_here", "created_at": "2026-01-18", "expires_at": "2027-01-18", "description": "Developer Mode Key" } ``` 2) การเข้ารหัส Developer Key - Key ต้นฉบับ: "kisaragiz_dev_2603" - วิธีการเข้ารหัส: SHA-256 หรือ Base64 (ตามความเหมาะสม) ตัวอย่าง PHP Code: ```php $encrypted_key, 'created_at' => date('Y-m-d'), 'expires_at' => date('Y-m-d', strtotime('+1 year')), 'description' => 'Developer Mode Key' ]; file_put_contents( __DIR__ . '/config/key.json', json_encode($key_data, JSON_PRETTY_PRINT) ); ?> ``` 3) ระบบตรวจสอบ Developer Mode สร้างไฟล์ config/developer_mode.php: ```php $expiryDate) { self::$isDeveloperMode = false; return false; } } self::$isDeveloperMode = true; return true; } self::$isDeveloperMode = false; return false; } /** * ตั้งค่า Error Reporting ตามโหมด */ public static function configureErrorReporting() { if (self::isEnabled()) { // Developer Mode - แสดง Error ทั้งหมด error_reporting(E_ALL); ini_set('display_errors', 1); ini_set('display_startup_errors', 1); ini_set('log_errors', 1); ini_set('error_log', __DIR__ . '/../logs/php_errors.log'); } else { // Production Mode - ซ่อน Error error_reporting(0); ini_set('display_errors', 0); ini_set('display_startup_errors', 0); ini_set('log_errors', 1); ini_set('error_log', __DIR__ . '/../logs/php_errors.log'); } } /** * แสดงข้อความ Debug (เฉพาะ Developer Mode) */ public static function debug($data, $label = 'DEBUG') { if (self::isEnabled()) { echo "
";
                     echo "[$label]\n";
                     print_r($data);
                     echo "
"; } } /** * Log ข้อมูล (ทั้ง Dev และ Production) */ public static function log($message, $type = 'INFO') { $logFile = __DIR__ . '/../logs/system.log'; $timestamp = date('Y-m-d H:i:s'); $logMessage = "[$timestamp] [$type] $message\n"; file_put_contents($logFile, $logMessage, FILE_APPEND); } } // ตั้งค่า Error Reporting ทันทีที่โหลดไฟล์ DeveloperMode::configureErrorReporting(); // กำหนด Constant สำหรับใช้งานในระบบ define('IS_DEVELOPER_MODE', DeveloperMode::isEnabled()); ?> ``` ข) Error Handling System (ระบบจัดการข้อผิดพลาด) 1) Custom Error Pages สร้างไฟล์ includes/error_handler.php: ```php 'Bad Request', 401 => 'Unauthorized', 403 => 'Forbidden', 404 => 'Page Not Found', 500 => 'Internal Server Error', 503 => 'Service Unavailable' ]; $errorMessages = [ 400 => 'คำขอของคุณไม่ถูกต้อง กรุณาตรวจสอบข้อมูลและลองใหม่อีกครั้ง', 401 => 'กรุณาเข้าสู่ระบบเพื่อเข้าถึงหน้านี้', 403 => 'คุณไม่มีสิทธิ์เข้าถึงหน้านี้', 404 => 'ขออภัย ไม่พบหน้าที่คุณกำลังค้นหา', 500 => 'เกิดข้อผิดพลาดภายในระบบ กรุณาลองใหม่อีกครั้ง', 503 => 'ระบบไม่สามารถให้บริการได้ชั่วคราว กรุณาลองใหม่ภายหลัง' ]; $title = $errorTitles[$errorCode] ?? 'Error'; $defaultMessage = $errorMessages[$errorCode] ?? 'เกิดข้อผิดพลาด'; $displayMessage = $message ?: $defaultMessage; // ถ้าเป็น Developer Mode แสดงรายละเอียด Error $showDetails = IS_DEVELOPER_MODE && !empty($details); // โหลด Template Error Page include __DIR__ . '/../templates/error_page.php'; exit; } /** * จัดการ Exception */ public static function handleException($exception) { DeveloperMode::log( 'Exception: ' . $exception->getMessage() . ' in ' . $exception->getFile() . ' on line ' . $exception->getLine(), 'ERROR' ); if (IS_DEVELOPER_MODE) { // Developer Mode - แสดงข้อมูล Exception ทั้งหมด self::showError( 500, 'Exception: ' . $exception->getMessage(), $exception->getTraceAsString() ); } else { // Production Mode - แสดงข้อความทั่วไป self::showError(500); } } /** * จัดการ PHP Errors */ public static function handleError($errno, $errstr, $errfile, $errline) { $errorTypes = [ E_ERROR => 'ERROR', E_WARNING => 'WARNING', E_NOTICE => 'NOTICE', E_USER_ERROR => 'USER_ERROR', E_USER_WARNING => 'USER_WARNING', E_USER_NOTICE => 'USER_NOTICE' ]; $type = $errorTypes[$errno] ?? 'UNKNOWN'; DeveloperMode::log( "[$type] $errstr in $errfile on line $errline", 'PHP_ERROR' ); if (IS_DEVELOPER_MODE) { echo "
"; echo "[$type] $errstr
"; echo "File: $errfile | Line: $errline"; echo "
"; } return true; } /** * จัดการ Fatal Errors */ public static function handleShutdown() { $error = error_get_last(); if ($error && in_array($error['type'], [E_ERROR, E_PARSE, E_CORE_ERROR, E_COMPILE_ERROR])) { DeveloperMode::log( 'Fatal Error: ' . $error['message'] . ' in ' . $error['file'] . ' on line ' . $error['line'], 'FATAL' ); if (!IS_DEVELOPER_MODE) { self::showError(500); } } } } // ลงทะเบียน Error Handlers set_exception_handler(['ErrorHandler', 'handleException']); set_error_handler(['ErrorHandler', 'handleError']); register_shutdown_function(['ErrorHandler', 'handleShutdown']); ?> ``` 2) Error Page Template สร้างไฟล์ templates/error_page.php: ```php <?php echo $errorCode; ?> - <?php echo $title; ?>

Developer Details:

ย้อนกลับ กลับหน้าแรก
🔧 Developer Mode Active
``` 3) การใช้งานใน Application ในไฟล์ index.php หรือ bootstrap.php: ```php ``` ค) โครงสร้างไฟล์ที่เพิ่มเติม ``` course_online/ ├── config/ │ ├── key.json # Developer Key (ไม่ Commit) │ ├── developer_mode.php # ระบบตรวจสอบโหมด │ └── config.php ├── includes/ │ ├── error_handler.php # Error Handling System │ └── functions.php ├── templates/ │ ├── error_page.php # Error Page Template │ └── ... ├── logs/ │ ├── php_errors.log # PHP Error Logs │ ├── system.log # System Logs │ └── .htaccess # ป้องกันการเข้าถึง └── .gitignore ``` ง) .gitignore Configuration ``` # .gitignore config/key.json logs/*.log !logs/.gitkeep ``` จ) ข้อดีของระบบนี้ ✓ ปลอดภัย - Developer Key ถูกเข้ารหัส ✓ มืออาชีพ - Error Handling ที่สมบูรณ์ ✓ ยืดหยุ่น - แยก Developer Mode และ Production Mode อย่างชัดเจน ✓ Debug ง่าย - Developer สามารถดู Error ได้เต็มรูปแบบ ✓ User-Friendly - ผู้ใช้เห็นหน้า Error ที่สวยงาม ไม่เห็นรายละเอียดที่ซับซ้อน ✓ Logging - บันทึก Error ทุกครั้งเพื่อการตรวจสอบ ✓ SEO-Friendly - ส่ง HTTP Status Code ที่ถูกต้อง ✓ Maintainable - จัดการง่าย แก้ไขสะดวก ================================================================================ หมายเหตุ ================================================================================ - เอกสารนี้เป็นแนวทางในการพัฒนาระบบคอร์สเรียนออนไลน์ - สามารถปรับแต่งตามความเหมาะสมของแต่ละโปรเจค - ควรพิจารณาความต้องการของผู้ใช้งานเป็นหลัก - อาจเริ่มต้นด้วยฟีเจอร์พื้นฐานก่อน แล้วค่อยขยายเพิ่มเติม (MVP Approach) วันที่สร้าง: 18 มกราคม 2026 ===============================================================================