# Dashboard Project
โปรเจ็คนี้เป็นระบบ Dashboard สำหรับแสดงข้อมูลสถิติต่าง ๆ จากฐานข้อมูล MySQL และไฟล์ CSV โดยสามารถแสดงผลในรูปแบบการ์ด ตาราง และกราฟ พร้อมรองรับการรีเฟรชข้อมูลอัตโนมัติและการจัดรูปแบบตามเงื่อนไข
## โครงสร้างโปรเจ็ค
- `index.html` — หน้าเว็บหลักของ Dashboard
- `css/style.css` — ไฟล์สไตล์สำหรับตกแต่งหน้าตา Dashboard
- `js/dashboard.js` — สคริปต์ฝั่ง client สำหรับโหลดและแสดงข้อมูล
- `api/data_source.php` — API สำหรับดึงข้อมูลจากฐานข้อมูลหรือไฟล์ CSV
- `setup_database.sql` — สคริปต์สำหรับสร้างฐานข้อมูลและตารางตัวอย่าง
- `data/` — โฟลเดอร์เก็บไฟล์ข้อมูล CSV
- `configs/dashboard.json` — คอนฟิกหน้าหลักของ Dashboard
- `configs/widgets/` — คอนฟิกของแต่ละ widget (เช่น การ์ด, ตาราง, กราฟ)
## วิธีติดตั้งและใช้งาน
1. **เตรียมฐานข้อมูล**
- สร้างฐานข้อมูล MySQL และนำไฟล์ `setup_database.sql` ไป import
- แก้ไขข้อมูลการเชื่อมต่อในไฟล์คอนฟิก widgets ให้ตรงกับฐานข้อมูลของคุณ
2. **ตั้งค่าเว็บเซิร์ฟเวอร์**
- วางโฟลเดอร์โปรเจ็คนี้ไว้ในโฟลเดอร์ของเว็บเซิร์ฟเวอร์ (เช่น XAMPP, Apache, Nginx)
- ตรวจสอบให้แน่ใจว่า PHP สามารถเชื่อมต่อฐานข้อมูลได้
3. **เปิดใช้งาน Dashboard**
- เข้าผ่านเบราว์เซอร์ที่ `http://localhost/your_project_path/index.html`
## ตัวอย่าง Widget
- **1_user_count_card.json**: แสดงจำนวนผู้ใช้ทั้งหมด
- **2_product_price_chart.json**: กราฟราคาสินค้า
- **3_recent_orders_table.json**: ตารางรายการสั่งซื้อล่าสุด
- **4_api_users_table.json**: ตารางข้อมูลผู้ใช้จาก API
## การตั้งค่าฐานข้อมูลในไฟล์คอนฟิก
ในแต่ละ widget ที่เชื่อมต่อฐานข้อมูล (เช่น `1_user_count_card.json`, `3_recent_orders_table.json`)
จะมีโครงสร้างการตั้งค่าดังนี้:
```json
"connection": {
"host": "localhost",
"dbname": "my_dashboard_db",
"user": "root",
"password": ""
}
```
- **host**: ชื่อโฮสต์ของ MySQL (เช่น `localhost`)
- **dbname**: ชื่อฐานข้อมูล
- **user**: ชื่อผู้ใช้ MySQL
- **password**: รหัสผ่าน (ถ้าไม่ได้ตั้งรหัสผ่าน ให้เว้นว่าง "")
> **หมายเหตุ**: หากใช้งานจริงควรตั้งรหัสผ่านให้ user และแก้ไขในไฟล์คอนฟิกให้ตรงกับฐานข้อมูลของคุณ
---
**ผู้พัฒนา:**
- Goragod Wiriya
**AI:**
- Google AI Studio
วันที่อัปเดตล่าสุด: 10 กรกฎาคม 2568