TUGAS_SIG_JOHANESSATRIACHRISTIO/Projek SPBU 24 JAM/SETUP_AND_TESTING_GUIDE.md

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)

# 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

# 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:

// 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:

// 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:

// 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)

// 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:

# 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:

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