# 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! 🚀