d1041231044_webgis_geopoverty/README.md

🗺️ 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:

   cd webgis-geopoverty
   

4. Jalankan built-in server PHP:

   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.