2025-12-19 05:19:41 +07:00
|
|
|
# Setup Lokal Development (Laragon/XAMPP)
|
|
|
|
|
|
|
|
|
|
## Masalah: "Failed to fetch" di Localhost
|
|
|
|
|
|
|
|
|
|
Jika Anda mendapat error "Failed to fetch" saat mengakses:
|
|
|
|
|
```
|
|
|
|
|
http://localhost/retribusi_bapenda/retribusi%20(frontend)/public/index.html
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Solusi
|
|
|
|
|
|
|
|
|
|
### Opsi 1: Akses Langsung ke Public Folder (Recommended)
|
|
|
|
|
|
|
|
|
|
Karena document root seharusnya di folder `public/`, akses langsung ke:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
http://localhost/retribusi_bapenda/retribusi%20(frontend)/public/index.html
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Atau jika folder `public/` sudah di-set sebagai document root:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
http://localhost/index.html
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Opsi 2: Setup Virtual Host di Laragon
|
|
|
|
|
|
|
|
|
|
1. Buka Laragon
|
|
|
|
|
2. Klik kanan pada folder project → **Add Virtual Host**
|
|
|
|
|
3. Set document root ke: `C:\laragon\www\RETRIBUSI_BAPENDA\retribusi (frontend)\public`
|
|
|
|
|
4. Set domain: `retribusi.local` (atau sesuai keinginan)
|
|
|
|
|
5. Restart Laragon
|
|
|
|
|
6. Akses: `http://retribusi.local/index.html`
|
|
|
|
|
|
|
|
|
|
### Opsi 3: Gunakan PHP Built-in Server
|
|
|
|
|
|
2025-12-19 05:26:28 +07:00
|
|
|
**Frontend:**
|
2025-12-19 05:19:41 +07:00
|
|
|
```bash
|
|
|
|
|
cd "C:\laragon\www\RETRIBUSI_BAPENDA\retribusi (frontend)\public"
|
|
|
|
|
php -S localhost:8080
|
|
|
|
|
```
|
|
|
|
|
|
2025-12-19 05:26:28 +07:00
|
|
|
**Backend API (PENTING - harus dengan router.php):**
|
|
|
|
|
```bash
|
|
|
|
|
cd "C:\laragon\www\RETRIBUSI_BAPENDA\api-btekno\public"
|
|
|
|
|
php -S localhost:8000 router.php
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
**Akses:**
|
|
|
|
|
- Frontend: `http://localhost:8080/index.html`
|
|
|
|
|
- Backend API: `http://localhost:8000` (dengan router.php)
|
2025-12-19 05:19:41 +07:00
|
|
|
|
|
|
|
|
## Konfigurasi API
|
|
|
|
|
|
|
|
|
|
Pastikan file `public/dashboard/js/config.js` sudah benar untuk lokal:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// Untuk Laragon/Apache (path-based)
|
|
|
|
|
return 'http://localhost/api-btekno/public';
|
|
|
|
|
|
|
|
|
|
// ATAU untuk PHP built-in server
|
|
|
|
|
return 'http://localhost:8000';
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Troubleshooting
|
|
|
|
|
|
|
|
|
|
### Error: "Failed to fetch"
|
|
|
|
|
|
|
|
|
|
1. **Cek path file**: Pastikan file `public/index.html` ada
|
|
|
|
|
2. **Cek document root**: Pastikan server mengarah ke folder `public/`
|
|
|
|
|
3. **Cek CORS**: Pastikan backend API sudah allow origin `http://localhost`
|
|
|
|
|
4. **Cek browser console**: Lihat error detail di Developer Tools (F12)
|
|
|
|
|
|
|
|
|
|
### Error: "Module not found"
|
|
|
|
|
|
|
|
|
|
1. Pastikan menggunakan ES6 modules (`type="module"` di script tag)
|
|
|
|
|
2. Pastikan path import benar (relative path dari file HTML)
|
|
|
|
|
3. Pastikan file JavaScript ada di lokasi yang benar
|
|
|
|
|
|
|
|
|
|
### Error: "CORS policy"
|
|
|
|
|
|
|
|
|
|
1. Pastikan backend API sudah setup CORS untuk `http://localhost`
|
|
|
|
|
2. Cek file `api/cors_handler.php` atau `api/cors-handler.php`
|
|
|
|
|
3. Pastikan header `Access-Control-Allow-Origin` sudah di-set
|
|
|
|
|
|
|
|
|
|
## Struktur Path yang Benar
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
retribusi (frontend)/
|
|
|
|
|
└── public/ ← Document root
|
|
|
|
|
├── index.html ← Login page
|
|
|
|
|
└── dashboard/
|
|
|
|
|
├── dashboard.html
|
|
|
|
|
├── event.html
|
|
|
|
|
└── js/
|
|
|
|
|
├── config.js
|
|
|
|
|
├── api.js
|
|
|
|
|
└── auth.js
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Quick Test
|
|
|
|
|
|
|
|
|
|
1. Buka browser
|
|
|
|
|
2. Akses: `http://localhost/retribusi_bapenda/retribusi%20(frontend)/public/index.html`
|
|
|
|
|
3. Atau setup virtual host dan akses: `http://retribusi.local/index.html`
|
|
|
|
|
4. Cek browser console (F12) untuk error detail
|
|
|
|
|
|