348 lines
8.9 KiB
Markdown
348 lines
8.9 KiB
Markdown
# Panduan Setup dan Testing Layer Groups SPBU Manager
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### 1. Persyaratan
|
|
- PHP 5.6+ dengan support SQLite3
|
|
- Browser modern dengan support ES6 JavaScript
|
|
- Internet connection (untuk CDN libraries)
|
|
|
|
### 2. Struktur File
|
|
|
|
```
|
|
Projek SPBU 24 JAM/
|
|
├── index.html # Main HTML file
|
|
├── app.js # Main JavaScript (MODIFIED)
|
|
├── css/
|
|
│ └── style.css # Styling (MODIFIED with Layers Control CSS)
|
|
├── api/
|
|
│ ├── config.php # Database configuration
|
|
│ ├── save_point.php # API untuk simpan point
|
|
│ ├── get_points.php # API untuk ambil points
|
|
│ ├── delete_point.php # API untuk hapus point
|
|
│ └── ... # API files lainnya
|
|
├── db/
|
|
│ └── markers.db # SQLite database (auto-created)
|
|
└── LAYER_GROUPS_DOCUMENTATION.md # Dokumentasi lengkap
|
|
```
|
|
|
|
### 3. Instalasi & Running
|
|
|
|
#### Menggunakan PHP Built-in Server (Rekomendasi untuk Development)
|
|
|
|
```bash
|
|
# 1. Navigate ke project folder
|
|
cd "d:\Projek SPBU 24 JAM"
|
|
|
|
# 2. Start PHP server
|
|
php -S localhost:8000
|
|
|
|
# 3. Buka di browser
|
|
# http://localhost:8000
|
|
```
|
|
|
|
#### Menggunakan Apache/XAMPP
|
|
|
|
```bash
|
|
# 1. Copy folder ke htdocs
|
|
# cp -r "Projek SPBU 24 JAM" "C:\xampp\htdocs\spbu-manager"
|
|
|
|
# 2. Start Apache di XAMPP Control Panel
|
|
|
|
# 3. Akses di browser
|
|
# http://localhost/spbu-manager
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Testing & Demo Data
|
|
|
|
### Test Case 1: Tambah SPBU 24 Jam
|
|
|
|
**Steps:**
|
|
1. Buka aplikasi di browser
|
|
2. Klik tombol "+ Add Point Manually" atau klik di peta
|
|
3. Isi form dengan data:
|
|
- **Name:** Pertamina SPBU 24 Jam Medan
|
|
- **Latitude:** 3.1455
|
|
- **Longitude:** 101.6969
|
|
- **Open 24 Hours:** ✓ (CHECKED)
|
|
4. Klik "Save"
|
|
5. **Hasil:** Marker akan muncul dan otomatis masuk ke layer "SPBU 24 Jam"
|
|
|
|
### Test Case 2: Tambah SPBU Limited Hours
|
|
|
|
**Steps:**
|
|
1. Klik "+ Add Point Manually" atau klik di peta
|
|
2. Isi form dengan data:
|
|
- **Name:** Pertamina SPBU Jl. Gatot Subroto
|
|
- **Latitude:** 3.1400
|
|
- **Longitude:** 101.6900
|
|
- **Open 24 Hours:** ☐ (UNCHECKED)
|
|
3. Klik "Save"
|
|
4. **Hasil:** Marker akan muncul dan otomatis masuk ke layer "SPBU Limited Hours"
|
|
|
|
### Test Case 3: Toggle Layer dengan Layers Control
|
|
|
|
**Steps:**
|
|
1. Pastikan kedua SPBU sudah ditambahkan (dari Test Case 1 & 2)
|
|
2. Lihat "Layers Control" di sudut kanan atas peta
|
|
3. **Uncheck** "🕐 SPBU 24 Jam"
|
|
4. **Hasil:** Marker SPBU 24 Jam hilang dari peta, hanya Limited Hours yang terlihat
|
|
5. **Check kembali** "🕐 SPBU 24 Jam"
|
|
6. **Hasil:** Semua marker muncul lagi
|
|
|
|
### Test Case 4: Toggle Multiple Layers
|
|
|
|
**Steps:**
|
|
1. Di Layers Control, uncheck kedua layer ("🕐 SPBU 24 Jam" dan "⏰ SPBU Limited Hours")
|
|
2. **Hasil:** Peta menjadi kosong tanpa marker
|
|
3. Check "⏰ SPBU Limited Hours" saja
|
|
4. **Hasil:** Hanya markers dari SPBU Limited Hours yang terlihat
|
|
5. Check "🕐 SPBU 24 Jam" juga
|
|
6. **Hasil:** Semua markers kembali muncul
|
|
|
|
### Test Case 5: Delete SPBU dari Specific Layer
|
|
|
|
**Steps:**
|
|
1. Pastikan ada markers di kedua layer
|
|
2. Klik marker SPBU 24 Jam
|
|
3. Popup muncul dengan tombol "Delete"
|
|
4. Klik "Delete" dan confirm
|
|
5. **Hasil:**
|
|
- Marker dihapus dari peta dan layer SPBU 24 Jam
|
|
- Marker di layer "SPBU Limited Hours" tetap ada
|
|
- Counter di sidebar update
|
|
|
|
---
|
|
|
|
## 🎨 Demo Data Koordinat (Indonesia)
|
|
|
|
### Medan Region
|
|
```
|
|
SPBU 24 Jam:
|
|
- Latitude: 3.1455, Longitude: 101.6969 (Medan Pusat)
|
|
- Latitude: 3.1500, Longitude: 101.7000 (Medan Selatan)
|
|
|
|
SPBU Limited:
|
|
- Latitude: 3.1400, Longitude: 101.6900 (Medan Utara)
|
|
- Latitude: 3.1350, Longitude: 101.6850 (Medan Barat)
|
|
```
|
|
|
|
### Jakarta Region
|
|
```
|
|
SPBU 24 Jam:
|
|
- Latitude: -6.2088, Longitude: 106.8456 (Jakarta Pusat)
|
|
- Latitude: -6.1945, Longitude: 106.8227 (Jakarta Selatan)
|
|
|
|
SPBU Limited:
|
|
- Latitude: -6.2100, Longitude: 106.8300 (Jakarta Utara)
|
|
- Latitude: -6.2200, Longitude: 106.8500 (Jakarta Timur)
|
|
```
|
|
|
|
---
|
|
|
|
## 🔍 Verifying Layer Implementation
|
|
|
|
### Browser DevTools Check
|
|
|
|
**Open Console (F12) dan jalankan:**
|
|
|
|
```javascript
|
|
// Check layer groups exist
|
|
console.log('SPBU 24 Hours Layer:', spbu24HoursLayer);
|
|
console.log('SPBU Limited Hours Layer:', spbuLimitedHoursLayer);
|
|
|
|
// Check layer control exists
|
|
console.log('Layer Control:', layerControl);
|
|
|
|
// Get markers count in each layer
|
|
console.log('24h Markers:', spbu24HoursLayer.getLayers().length);
|
|
console.log('Limited Markers:', spbuLimitedHoursLayer.getLayers().length);
|
|
|
|
// Check all markers structure
|
|
console.log('All Markers:', markers);
|
|
```
|
|
|
|
**Expected Output:**
|
|
- Kedua layer groups harus terdefinisi
|
|
- Layer control harus ada dan bisa di-toggle
|
|
- Markers object harus berisi struktur dengan `marker` dan `open_24_hours`
|
|
|
|
### Network Request Check
|
|
|
|
1. Buka **Network tab** di DevTools (F12)
|
|
2. Tambahkan SPBU baru
|
|
3. Lihat requests ke:
|
|
- `api/save_point.php` - Response harus `{"success": true, "id": ..., ...}`
|
|
- `api/get_points.php` - Response harus berisi array of points
|
|
- `api/delete_point.php` - Response harus `{"success": true}`
|
|
|
|
---
|
|
|
|
## 🐛 Debugging Tips
|
|
|
|
### Issue: Layers Control tidak muncul
|
|
|
|
**Cek:**
|
|
```javascript
|
|
// Di console, jalankan:
|
|
console.log(L.control.layers); // Harus ada function
|
|
|
|
// Cek HTML untuk div dengan class leaflet-control-layers
|
|
document.querySelector('.leaflet-control-layers'); // Harus return element
|
|
```
|
|
|
|
### Issue: Markers tidak masuk ke layer
|
|
|
|
**Cek:**
|
|
```javascript
|
|
// Lihat structure markers object
|
|
console.log(Object.entries(markers)[0]);
|
|
// Should output: [id, {marker: L.Marker, open_24_hours: true/false}]
|
|
|
|
// Cek marker di layer
|
|
spbu24HoursLayer.getLayers().map(m => m.getLatLng());
|
|
spbuLimitedHoursLayer.getLayers().map(m => m.getLatLng());
|
|
```
|
|
|
|
### Issue: Delete tidak berfungsi
|
|
|
|
**Cek:**
|
|
1. Open Network tab, delete marker
|
|
2. Check response dari `api/delete_point.php` - harus `{"success": true}`
|
|
3. Check console untuk error message
|
|
4. Pastikan `markers[id]` object punya property `marker` dan `open_24_hours`
|
|
|
|
---
|
|
|
|
## 📈 Performance Metrics
|
|
|
|
### Expected Performance
|
|
|
|
| Metrik | Value |
|
|
|--------|-------|
|
|
| Initial Load | < 2 seconds |
|
|
| Add Marker | < 500ms |
|
|
| Delete Marker | < 300ms |
|
|
| Toggle Layer | Instant (< 50ms) |
|
|
| Max Markers Smooth | ~1000 per layer |
|
|
|
|
### Monitor Performance (Console)
|
|
|
|
```javascript
|
|
// Measure add marker time
|
|
console.time('addMarker');
|
|
// ... add marker code
|
|
console.timeEnd('addMarker');
|
|
|
|
// Measure toggle layer time
|
|
console.time('toggleLayer');
|
|
// ... toggle layer code
|
|
console.timeEnd('toggleLayer');
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Common Database Issues
|
|
|
|
### Issue: Database file not created
|
|
|
|
**Penyebab:**
|
|
- Folder `db/` tidak bisa di-write
|
|
- PHP tidak punya permission
|
|
|
|
**Solusi:**
|
|
```bash
|
|
# Linux/Mac
|
|
chmod -R 755 db/
|
|
|
|
# Windows - Right click folder > Properties > Security > Edit permissions
|
|
# atau jalankan VS Code as Administrator
|
|
```
|
|
|
|
### Issue: "Database connection failed"
|
|
|
|
**Penyebab:**
|
|
- SQLite3 module tidak installed
|
|
- Database file corrupted
|
|
|
|
**Solusi:**
|
|
```bash
|
|
# Check PHP SQLite support
|
|
php -m | grep -i sqlite
|
|
|
|
# Atau di browser:
|
|
# http://localhost:8000/api/config.php
|
|
# Harus return JSON, bukan error
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Testing Checklist
|
|
|
|
- [ ] Aplikasi bisa di-akses tanpa error
|
|
- [ ] Peta ter-load dengan OpenStreetMap
|
|
- [ ] Layers Control muncul di sudut kanan atas
|
|
- [ ] Bisa tambah SPBU 24 Jam
|
|
- [ ] Bisa tambah SPBU Limited Hours
|
|
- [ ] Markers otomatis masuk ke layer yang benar
|
|
- [ ] Toggle layer berfungsi (markers hide/show)
|
|
- [ ] Delete marker berfungsi dengan benar
|
|
- [ ] Marker count di sidebar ter-update
|
|
- [ ] Database data persist setelah refresh halaman
|
|
- [ ] Responsive design di mobile device
|
|
- [ ] Console tidak ada error messages
|
|
|
|
---
|
|
|
|
## 🎓 Learning Resources
|
|
|
|
### Leaflet Documentation
|
|
- Layer Groups: https://leafletjs.com/examples/layers-control/
|
|
- Layers Control: https://leafletjs.com/reference.html#control-layers
|
|
- API Reference: https://leafletjs.com/reference.html
|
|
|
|
### JavaScript Concepts Digunakan
|
|
- Arrow Functions & Template Literals
|
|
- Fetch API untuk HTTP requests
|
|
- Object destructuring & spreading
|
|
- Event listeners & DOM manipulation
|
|
- JSON parsing & stringifying
|
|
|
|
---
|
|
|
|
## 📞 Troubleshooting Support
|
|
|
|
Jika mengalami issue:
|
|
|
|
1. **Check Browser Console** (F12 > Console)
|
|
- Catat error message lengkap
|
|
- Check Network tab untuk failed requests
|
|
|
|
2. **Check PHP Error Log**
|
|
- Biasanya di: `C:\xampp\apache\logs\error.log`
|
|
- Atau check Terminal output jika pakai PHP built-in server
|
|
|
|
3. **Verify Database**
|
|
- SQLite file di: `db/markers.db`
|
|
- Bisa di-inspect dengan SQLite Browser tool
|
|
|
|
4. **Clear Cache**
|
|
- Ctrl+Shift+Delete di browser
|
|
- Refresh halaman: Ctrl+F5
|
|
|
|
---
|
|
|
|
## 🎉 Success Indicators
|
|
|
|
Jika implementasi Layer Groups berhasil, Anda akan lihat:
|
|
|
|
✅ Layers Control UI di peta dengan checkbox untuk setiap layer
|
|
✅ Markers terbagi ke dalam 2 layer yang berbeda
|
|
✅ Checkbox berfungsi untuk show/hide markers berdasarkan tipe
|
|
✅ Smooth toggle tanpa lag atau loading
|
|
✅ Data persist di database dengan kategori yang benar
|
|
|
|
Selamat! Layer Groups dan Layers Control sudah siap digunakan! 🚀
|