fitur kelola bantuan melalui rumah ibadah
This commit is contained in:
Farha
@@ -0,0 +1,385 @@
|
||||
# 📍 PANDUAN FITUR GIS PONTIANAK
|
||||
|
||||
## Setup Awal
|
||||
|
||||
### 1. Inisialisasi Database
|
||||
|
||||
```bash
|
||||
# Buka di browser:
|
||||
http://localhost/web-gis/create_tables.php
|
||||
```
|
||||
|
||||
**Respons berhasil:**
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "success",
|
||||
"message": "Tabel berhasil dibuat atau sudah ada"
|
||||
}
|
||||
```
|
||||
|
||||
Ini akan membuat 3 tabel baru:
|
||||
|
||||
- `rumah_ibadah` - Lokasi tempat ibadah
|
||||
- `penduduk_miskin` - Lokasi keluarga kurang mampu
|
||||
- `jalan_rusak` - Laporan jalan rusak
|
||||
|
||||
---
|
||||
|
||||
## Fitur 1: RUMAH IBADAH (Tempat Ibadah)
|
||||
|
||||
### Cara Menggunakan:
|
||||
|
||||
**Step 1:** Buka GIS Interface
|
||||
|
||||
```
|
||||
http://localhost/web-gis/index.html
|
||||
```
|
||||
|
||||
**Step 2:** Klik tombol "Rumah Ibadah" di toolbar
|
||||
|
||||
- Ikon: 🏛️ (bangunan dengan tanda plus)
|
||||
- Di toolbar utama sebelah atas map
|
||||
|
||||
**Step 3:** Klik di mana saja di peta
|
||||
|
||||
- Status akan berubah: "Klik Peta untuk menambah lokasi..."
|
||||
- Modal dialog akan muncul
|
||||
|
||||
**Step 4:** Isi form:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ INPUT RUMAH IBADAH │
|
||||
├─────────────────────────────────────┤
|
||||
│ Nama : [Masjid Al-Nur] │
|
||||
│ Alamat : [Auto-fill] │ ← Otomatis dari koordinat
|
||||
│ PIC (Nama) : [Pengurus] │
|
||||
│ Radius Pencarian: [1000] meter │ ← Geser slider
|
||||
│ Koordinat : -0.1234, 109.3456 │
|
||||
│ │
|
||||
│ [SIMPAN] [BATAL] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Field Penjelasan:**
|
||||
|
||||
- **Nama:** Nama tempat ibadah (Masjid/Gereja/dll)
|
||||
- **Alamat:** Otomatis terisi pakai Nominatim (Reverse Geocoding)
|
||||
- Tunggu pesan "Mencari alamat..." hingga selesai
|
||||
- **PIC:** Nama Pengurus/Koordinator
|
||||
- **Radius:** Jarak pencarian untuk keluarga miskin sekitar (default 1000m)
|
||||
|
||||
**Step 5:** Klik "SIMPAN"
|
||||
|
||||
- Marker teal + lingkaran akan muncul di peta
|
||||
- Data tersimpan di database
|
||||
|
||||
### Interaksi Lanjutan:
|
||||
|
||||
**Edit:**
|
||||
|
||||
1. Klik marker di peta
|
||||
2. Popup muncul → Klik "Edit"
|
||||
3. Modal akan terbuka dengan data lama
|
||||
4. Ubah dan klik "Simpan"
|
||||
|
||||
**Hapus:**
|
||||
|
||||
1. Klik marker
|
||||
2. Popup → Klik "Hapus"
|
||||
3. Konfirmasi → Data terhapus
|
||||
|
||||
**Cari:**
|
||||
|
||||
- Gunakan Registry Drawer (kanan peta)
|
||||
- Filter: Input Type = "Rumah Ibadah"
|
||||
- Cari nama atau ketik untuk filter
|
||||
|
||||
---
|
||||
|
||||
## Fitur 2: PENDUDUK MISKIN (Keluarga Kurang Mampu)
|
||||
|
||||
### Cara Menggunakan:
|
||||
|
||||
**Step 1:** Klik tombol "Penduduk Miskin" di toolbar
|
||||
|
||||
- Ikon: 👤 (orang dengan tanda plus)
|
||||
|
||||
**Step 2:** Klik di peta untuk lokasi keluarga miskin
|
||||
|
||||
**Step 3:** Isi form:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ INPUT PENDUDUK MISKIN │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Nama Ketua KK : [Nama Kepala Keluarga]│
|
||||
│ Jumlah Anggota : [5] │
|
||||
│ Rumah Ibadah Terdekat: [OTOMATIS] │
|
||||
│ Nama : Masjid Al-Nur │ ← Sistem mencari
|
||||
│ Jarak : 234 meter │ otomatis
|
||||
│ Koordinat : -0.1234, 109.3456 │
|
||||
│ │
|
||||
│ [SIMPAN] [BATAL] │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Field Penjelasan:**
|
||||
|
||||
- **Nama Ketua KK:** Nama kepala keluarga yang bertanggung jawab
|
||||
- **Jumlah Anggota:** Total orang dalam keluarga termasuk ketua
|
||||
- **Rumah Ibadah Terdekat:** Sistem otomatis menemukan tempat ibadah terdekat
|
||||
- Nama dan jarak ditampilkan (berdasarkan radius yang Anda set di rumah ibadah)
|
||||
- TIDAK perlu isi manual
|
||||
|
||||
**Step 4:** Klik "SIMPAN"
|
||||
|
||||
- Marker merah akan muncul
|
||||
- Data tersimpan beserta referensi rumah ibadah terdekat
|
||||
|
||||
### Fitur Khusus: Pencarian Miskin Sekitar Rumah Ibadah
|
||||
|
||||
**Gunakan tombol di popup Rumah Ibadah:**
|
||||
|
||||
1. Klik marker Rumah Ibadah di peta
|
||||
2. Di popup klik: **"Cari Miskin"**
|
||||
3. Semua keluarga miskin dalam radius akan ter-zoom
|
||||
4. Map akan fit ke cluster keluarga miskin
|
||||
|
||||
---
|
||||
|
||||
## Fitur 3: CHOROPLETH KECAMATAN (Peta Populasi)
|
||||
|
||||
### Cara Menggunakan:
|
||||
|
||||
**Step 1:** Klik tombol "Choropleth" di toolbar
|
||||
|
||||
- Ikon: 🗺️ (peta)
|
||||
|
||||
**Step 2:** Peta akan berubah
|
||||
|
||||
- Menampilkan 6 kecamatan Pontianak
|
||||
- Warna berbeda sesuai populasi
|
||||
|
||||
**Gradasi Warna:**
|
||||
|
||||
```
|
||||
🔴 Merah Tua = Populasi > 120,000 jiwa
|
||||
🟥 Merah Terang = Populasi > 100,000 jiwa
|
||||
🟨 Merah Muda = Populasi > 80,000 jiwa
|
||||
🟧 Merah Pucat = Populasi ≤ 80,000 jiwa
|
||||
```
|
||||
|
||||
**Step 3:** Klik salah satu kecamatan
|
||||
|
||||
- Panel di kanan bawah muncul:
|
||||
|
||||
```
|
||||
┌──────────────────────────────────┐
|
||||
│ Choropleth Kecamatan Pontianak │
|
||||
├──────────────────────────────────┤
|
||||
│ PONTIANAK BARAT │
|
||||
│ 148,800 jiwa │
|
||||
│ │
|
||||
│ Kepadatan: 2,500 jiwa/km² │
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Data Populasi (BPS 2025):**
|
||||
|
||||
| # | Kecamatan | Populasi | Warna |
|
||||
| --- | ------------------ | -------- | ----- |
|
||||
| 1 | Pontianak Barat | 148,800 | 🔴 |
|
||||
| 2 | Pontianak Selatan | 133,600 | 🔴 |
|
||||
| 3 | Pontianak Utara | 129,200 | 🔴 |
|
||||
| 4 | Pontianak Timur | 121,500 | 🔴 |
|
||||
| 5 | Pontianak Kota | 98,500 | 🟥 |
|
||||
| 6 | Pontianak Tenggara | 52,900 | 🟧 |
|
||||
|
||||
**Fitur Interaksi:**
|
||||
|
||||
- **Hover:** Kecamatan akan highlight
|
||||
- **Klik:** Info populasi muncul di panel
|
||||
- **Keluar Mode:** Klik tombol lain atau click tombol Choropleth lagi
|
||||
|
||||
---
|
||||
|
||||
## Layer Control (Kontrol Visibilitas)
|
||||
|
||||
### Tombol Layer (atas kiri map):
|
||||
|
||||
Klik ikon **☰** untuk membuka layer control.
|
||||
|
||||
```
|
||||
✓ Choropleth Kecamatan
|
||||
✓ Rumah Ibadah
|
||||
✓ Penduduk Miskin
|
||||
✓ Jalan Rusak
|
||||
✓ Lokasi SPBU
|
||||
... (layer lainnya)
|
||||
```
|
||||
|
||||
**Toggle on/off:**
|
||||
|
||||
- Centang untuk tampilkan layer
|
||||
- Uncheck untuk sembunyikan
|
||||
|
||||
**Catatan:** Saat aktif mode Choropleth, layer lain otomatis disembunyikan untuk fokus pada peta kecamatan.
|
||||
|
||||
---
|
||||
|
||||
## Registry / Pencarian
|
||||
|
||||
### Buka Registry Drawer:
|
||||
|
||||
Klik tombol **📋** di toolbar atau panel kanan.
|
||||
|
||||
### Cara Mencari:
|
||||
|
||||
**1. Filter by Type (Dropdown atas):**
|
||||
|
||||
```
|
||||
Input Type:
|
||||
▼ Semua
|
||||
□ Point
|
||||
□ Polyline
|
||||
□ Polygon
|
||||
□ Rumah Ibadah ← Pilih ini
|
||||
□ Penduduk Miskin ← atau ini
|
||||
□ Jalan Rusak
|
||||
```
|
||||
|
||||
**2. Filter by Registry (Dropdown bawah):**
|
||||
|
||||
```
|
||||
Registry Type:
|
||||
▼ Semua
|
||||
□ Jalan Nasional
|
||||
□ Parkir
|
||||
□ Rumah Ibadah
|
||||
□ Penduduk Miskin
|
||||
```
|
||||
|
||||
**3. Cari (Kolom input):**
|
||||
|
||||
```
|
||||
Cari nama: [Masjid] 🔍
|
||||
|
||||
Hasil:
|
||||
┌─────────────────────────────┐
|
||||
│ ✓ Masjid Al-Nur │
|
||||
│ Rumah Ibadah │
|
||||
│ -0.1234, 109.3456 │
|
||||
├─────────────────────────────┤
|
||||
│ ✓ Masjid Besar Pontianak │
|
||||
│ Rumah Ibadah │
|
||||
│ -0.1245, 109.3467 │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
**Klik hasil → Map akan:**
|
||||
|
||||
- Zoom ke lokasi
|
||||
- Buka popup
|
||||
- Highlight marker
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### ❌ Tombol tidak muncul
|
||||
|
||||
**Solusi:**
|
||||
|
||||
- Refresh browser (Ctrl+F5)
|
||||
- Clear cache
|
||||
- Cek console (F12) untuk error
|
||||
|
||||
### ❌ Alamat tidak terisi (Reverse Geocode gagal)
|
||||
|
||||
**Penyebab:** Tidak ada koneksi internet atau Nominatim API timeout
|
||||
**Solusi:**
|
||||
|
||||
- Pastikan internet terhubung
|
||||
- Coba refresh modal
|
||||
- Manual isi alamat
|
||||
|
||||
### ❌ Rumah Ibadah tidak ditemukan saat input miskin
|
||||
|
||||
**Penyebab:** Belum ada data rumah ibadah, atau lokasi terlalu jauh
|
||||
**Solusi:**
|
||||
|
||||
- Tambahkan rumah ibadah terlebih dahulu di mode Rumah Ibadah
|
||||
- Pastikan radius rumah ibadah cukup besar
|
||||
|
||||
### ❌ Choropleth tidak tampil
|
||||
|
||||
**Penyebab:** File GeoJSON tidak ditemukan
|
||||
**Solusi:**
|
||||
|
||||
- Cek file ada di: `data/pontianak-kecamatan.geojson`
|
||||
- Cek console untuk error message
|
||||
|
||||
### ❌ Database error
|
||||
|
||||
**Solusi:**
|
||||
|
||||
- Jalankan ulang `create_tables.php`
|
||||
- Cek koneksi database di `db_config.php`
|
||||
|
||||
---
|
||||
|
||||
## Tips & Trik
|
||||
|
||||
### 💡 Shortcut
|
||||
|
||||
- **Double-click** marker untuk langsung edit
|
||||
- **Scroll zoom** di map untuk zoom in/out
|
||||
- **Drag** untuk geser peta
|
||||
- **Ctrl+A** di search untuk select all results
|
||||
|
||||
### 📊 Export Data
|
||||
|
||||
Semua data tersimpan di database MySQL. Untuk export:
|
||||
|
||||
```sql
|
||||
SELECT * FROM rumah_ibadah;
|
||||
SELECT * FROM penduduk_miskin;
|
||||
```
|
||||
|
||||
### 🎨 Customize Warna
|
||||
|
||||
Edit di `index.html` function:
|
||||
|
||||
- `getPopulationFill()` - Ubah warna choropleth
|
||||
- `createRumahIbadahIcon()` - Ubah marker rumah ibadah
|
||||
- `createPendudukMiskinIcon()` - Ubah marker miskin
|
||||
|
||||
---
|
||||
|
||||
## File Penting
|
||||
|
||||
```
|
||||
web-gis/
|
||||
├── index.html ← Main GIS Interface
|
||||
├── create_tables.php ← Init database
|
||||
├── db_config.php ← Database config
|
||||
│
|
||||
├── api/
|
||||
│ ├── save_rumah_ibadah.php
|
||||
│ ├── get_rumah_ibadah.php
|
||||
│ ├── delete_rumah_ibadah.php
|
||||
│ ├── save_penduduk_miskin.php
|
||||
│ ├── get_penduduk_miskin.php
|
||||
│ └── delete_penduduk_miskin.php
|
||||
│
|
||||
└── data/
|
||||
├── pontianak-kecamatan.geojson ← Choropleth data
|
||||
└── Export_Output_2.json ← Road network data
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Versi:** 2025-04-20
|
||||
**Status:** Production Ready ✅
|
||||
Reference in New Issue
Block a user