# 🗺️ WebGIS GeoPoverty - Pemetaan Kemiskinan Berbasis Partisipasi Rumah Ibadah

## 📌 Deskripsi Proyek

**GeoPoverty** merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk pemetaan interaktif titik-titik kemiskinan dan lokasi masjid di wilayah Kota Pontianak. Sistem ini membantu mengelola data spasial dengan fitur radius layanan masjid, yang secara visual menunjukkan keluarga miskin mana yang berada dalam jangkauan layanan sosial suatu masjid dan mana yang belum terjangkau.

Aplikasi ini memungkinkan user untuk:
* Memetakan lokasi keluarga miskin dan data masjid.
* Melihat visualisasi radius jangkauan layanan sosial masjid.
* Membantu perencanaan distribusi bantuan (seperti ZIS) agar lebih tepat sasaran.

---

## 🎯 Tujuan Sistem

Sistem ini dirancang sebagai alat bantu pengambilan keputusan (*Decision Support Tool*) bagi:
* **Pengurus masjid:** Mengetahui sebaran keluarga miskin dalam radius layanannya.
* **Aparat kelurahan/kecamatan:** Pemetaan kemiskinan di wilayah administratif.
* **Relawan sosial:** Perencanaan rute dan target distribusi bantuan.

---

## 🧩 Fitur Aplikasi

### 1. 📍 Pemetaan Keluarga Miskin
* Input lokasi titik kemiskinan langsung pada peta.
* Menyimpan atribut:
  * Nama Kepala Keluarga
  * Jumlah KK (Anggota Keluarga)
  * Alamat Lengkap
  * Koordinat (Latitude & Longitude)
* Ditampilkan sebagai **marker oranye** pada peta.

### 2. 🕌 Pemetaan Masjid & Radius Layanan
* Input lokasi masjid pada peta.
* Menyimpan atribut:
  * Nama Masjid
  * Nama PIC / Pengurus
  * Alamat Lengkap
  * Radius Layanan (dalam meter)
* Ditampilkan sebagai **marker biru** dengan visualisasi lingkaran jangkauan radius layanan (default 500m, dapat diatur 100m - 5000m).

### 3. 🛠️ Mode Tampil & Edit
* **Mode View:** Mode *read-only* untuk publik. Semua fungsi edit dinonaktifkan.
* **Mode Edit:** Mode aktif untuk operator menambah, menghapus, dan memperbarui data (CRUD).

### 4. 🎛️ Filter Layer & Navigasi
* Toggle tampil/sembunyikan layer Kemiskinan dan Masjid secara independen.
* Fitur **Fokus**: Mengklik *card* data pada *sidebar* akan otomatis menavigasi peta ke lokasi entitas tersebut.

---

## 🎨 Desain Antarmuka (Lumina GIS)

Platform ini mengadopsi filosofi desain **"Lumina GIS"** yang mengutamakan kejernihan data dan kedalaman visual:
* **Glassmorphic Panels:** Efek transparansi (*blur*) pada *sidebar* dan *header* yang memberikan kesan premium.
* **Color Palette:** *Electric Indigo* (#6366F1) untuk aksi utama, *Ghost White* untuk latar, *Teal* dan *Crimson* untuk indikator.
* **Tipografi:** Hanken Grotesk yang memberikan kesan modern dan teknis namun ramah pengguna.

---

## ⚙️ Teknologi yang Digunakan

* 🌐 **Frontend:** HTML, CSS (Vanilla + Glassmorphism), JavaScript (Vanilla, Fetch API)
* 🗺️ **Library Peta:** Leaflet.js + OpenStreetMap (OSM)
* 🖥️ **Backend:** PHP (Procedural, 7 API Endpoints)
* 🗄️ **Database:** MySQL

---

## 🗄️ Struktur Database

Sistem ini menggunakan dua tabel utama:

### 1. Tabel `kemiskinan`
* `id` (Primary Key)
* `nama_kepala_keluarga`
* `jumlah_kk`
* `alamat`
* `latitude` & `longitude`
* `created_at`

### 2. Tabel `masjid`
* `id` (Primary Key)
* `nama_masjid`
* `pic_masjid`
* `alamat`
* `radius` (Jangkauan layanan dalam meter)
* `latitude` & `longitude`
* `created_at`

---

## 🔄 Alur Kerja Sistem

### Input Data Partisipatif
1. Relawan melakukan survei lapangan.
2. Operator (dalam **Mode Edit**) mengklik lokasi pada peta dan mengisi formulir untuk titik kemiskinan atau masjid baru.
3. Data disimpan ke database MySQL melalui PHP API.
4. Peta akan memperbarui *layer* secara *real-time* tanpa *reload* halaman.

### Analisis Cakupan Distribusi
1. Pengurus masjid mendaftarkan masjidnya dan menetapkan jangkauan/radius layanan.
2. Lingkaran jangkauan masjid divisualisasikan pada peta.
3. Secara visual dapat dianalisis keluarga miskin mana yang terjangkau (*dalam lingkaran biru*) dan mana yang belum terjangkau.
4. Radius masjid dapat diperbarui secara dinamis menyesuaikan kapasitas bantuan yang tersedia.

---

## 🚀 Cara Menjalankan

1. Pastikan server lokal (XAMPP/MAMP/Laragon) dengan PHP dan MySQL telah berjalan.
2. Import database jika ada skema `.sql` ke MySQL.
3. Masuk ke folder proyek:
   ```bash
   cd webgis-geopoverty
   ```
4. Jalankan *built-in server* PHP:
   ```bash
   php -S localhost:8000
   ```
5. Buka di *browser*:
   ```
   http://localhost:8000
   ```

*(Catatan: Memerlukan koneksi internet aktif untuk memuat peta dasar dari OpenStreetMap).*

---

## 🎓 Kesimpulan

WebGIS **GeoPoverty** mengubah data kemiskinan yang berbentuk teks menjadi informasi spasial interaktif. Dengan pendekatan partisipasi Rumah Ibadah (Masjid), sistem ini membantu menghubungkan sumber daya bantuan sosial dengan masyarakat yang membutuhkan secara lebih terukur, strategis, dan tepat sasaran.