# 🎨 คู่มือการใช้งาน AdminLTE Theme สำหรับ PHP 5.6.40
## 📋 ภาพรวม
AdminLTE Theme ที่ใช้ในระบบ STKT ได้รับการปรับให้รองรับ **PHP 5.6.40** และเบราว์เซอร์สมัยใหม่ โดยใช้:
- **AdminLTE 3.x** - Admin dashboard template
- **Bootstrap 4.6** - CSS framework
- **jQuery 3.5.1+** - JavaScript library
- **FontAwesome 5** - Icon library
- **Sarabun Font** - ฟอนต์ไทยที่สวยงาม
---
## 📁 โครงสร้างไฟล์ Theme
```
theme/
├── dist/ # ไฟล์ที่ compile แล้ว
│ ├── css/
│ │ └── adminlte.min.css # Main CSS file ⭐
│ └── js/
│ └── adminlte.js # Main JS file ⭐
├── plugins/ # External plugins
│ ├── jquery/
│ ├── bootstrap/
│ ├── fontawesome-free/
│ ├── datatables/
│ ├── chart.js/
│ ├── daterangepicker/
│ ├── summernote/
│ ├── select2/
│ └── sweetalert2/
├── fonts/ # ฟอนต์ไทย
│ ├── Sarabun.css # Sarabun font CSS ⭐
│ └── tawan.css # Alternative Thai font
└── docs/ # เอกสารประกอบ
```
---
## 🔧 การ Setup Theme
### 1. การ Include CSS ในหน้า HTML
```php
```
### 2. การ Include JavaScript ในหน้า HTML
```php
```
---
## 🎨 การใช้งาน Components
### 1. Layout Structure
```html
```
### 2. Cards (การ์ด)
```html
```
### 3. DataTables
```html
| ชื่อ |
นามสกุล |
โรงเรียน |
สถานะ |
|
|
|
อนุมัติแล้ว
|
```
### 4. Forms
```html
```
### 5. Alerts และ Notifications
```html
```
---
## 🎨 การปรับแต่ง CSS
### 1. ฟอนต์ไทย
```css
/* ใน header หรือ custom CSS */
```
### 2. สีและธีมที่กำหนดเอง
```css
/* Custom colors */
.bg-primary-custom {
background-color: #1e3a8a !important;
}
.text-primary-custom {
color: #1e3a8a !important;
}
/* Custom card styles */
.card-custom {
border-left: 4px solid #1e3a8a;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
```
### 3. Responsive Design
```css
/* Mobile optimizations */
@media (max-width: 768px) {
.content-wrapper {
margin-left: 0;
}
.main-sidebar {
margin-left: -250px;
}
.table-responsive {
font-size: 0.9em;
}
}
```
---
## 🔌 การใช้งาน Plugins
### 1. Chart.js สำหรับกราฟ
```html
```
### 2. DateRangePicker สำหรับเลือกวันที่
```html
```
### 3. Summernote สำหรับ Rich Text Editor
```html
```
---
## 📱 Responsive Design
### Breakpoints
- **xs**: < 576px (มือถือ)
- **sm**: ≥ 576px (มือถือขนาดใหญ่)
- **md**: ≥ 768px (แท็บเล็ต)
- **lg**: ≥ 992px (เดสก์ท็อป)
- **xl**: ≥ 1200px (หน้าจอใหญ่)
### การใช้งาน Classes
```html
แสดงเฉพาะใน tablet+
แสดงเฉพาะใน mobile
```
---
## 🔧 การแก้ไขปัญหาที่พบบ่อย
### 1. ฟอนต์ไทยไม่แสดง
```css
/* ตรวจสอบการ include ฟอนต์ */
/* กำหนดฟอนต์สำรอง */
body {
font-family: 'Sarabun', 'Tahoma', sans-serif;
}
```
### 2. DataTables ไม่แสดงภาษาไทย
```javascript
$('.table').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Thai.json"
}
});
```
### 3. Icons ไม่แสดง
```html
```
### 4. JavaScript ไม่ทำงาน
```javascript
// ตรวจสอบว่า jQuery load ก่อน
$(document).ready(function() {
// Your code here
});
// หรือใช้
$(function () {
// Your code here
});
```
---
## 📊 Performance Tips
### 1. การโหลด CSS/JS
```html
```
### 2. การใช้ CDN (ไม่บังคับ)
```html
```
### 3. การ Minify และ Optimize
- ใช้ไฟล์ `.min.css` และ `.min.js`
- รวม CSS/JS หลายไฟล์เป็นไฟล์เดียว (ถ้าจำเป็น)
- ใช้ browser caching
---
## ✅ Checklist การใช้งาน
- [ ] Include jQuery ก่อน plugins อื่นๆ
- [ ] Include Bootstrap ก่อน AdminLTE
- [ ] กำหนดฟอนต์ไทย Sarabun
- [ ] ใช้ responsive classes สำหรับ mobile
- [ ] ตรวจสอบ console ใน browser สำหรับ errors
- [ ] ทดสอบใน mobile devices
- [ ] ตรวจสอบการทำงานของ DataTables
- [ ] ทดสอบ forms และ validation
---
## 📚 Resources
### เอกสารอ้างอิง
- [AdminLTE Documentation](https://adminlte.io/docs)
- [Bootstrap 4 Documentation](https://getbootstrap.com/docs/4.6/)
- [jQuery Documentation](https://api.jquery.com/)
- [FontAwesome Icons](https://fontawesome.com/icons)
### การตรวจสอบ
```
# ตรวจสอบ Theme compatibility
http://localhost/stkt/theme/check_theme_compatibility.php
# ตรวจสอบระบบทั้งหมด
http://localhost/stkt/check_compatibility.php
```
---
**สถานะ**: ✅ พร้อมใช้งานกับ PHP 5.6.40
**ธีม**: AdminLTE 3.x
**การรองรับ**: Responsive, Multi-browser, Thai fonts