destra/d1041231044_webgis_geopoverty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: readme.md

Browse Source
This commit is contained in:
desztraa
2026-06-11 21:34:05 +07:00
parent 2747d616c7
commit e03721db39
1 changed files with 79 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+79 -151
View File
@@ -1,205 +1,133 @@
# 🗺️ WebGIS Project - Manajemen Data Spasial # 🗺️ WebGIS GeoPoverty - Pemetaan Kemiskinan Berbasis Partisipasi Rumah Ibadah
## 📌 Deskripsi Proyek ## 📌 Deskripsi Proyek
Proyek ini merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk mengelola data spasial dalam bentuk: **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.
* 📍 Point (SPBU)
* ➖ Line / Polyline (Jalan)
* 🔷 Polygon (Kavling Tanah)
Aplikasi ini memungkinkan user untuk: Aplikasi ini memungkinkan user untuk:
* Memetakan lokasi keluarga miskin dan data masjid.
* Menambahkan data langsung dari peta * Melihat visualisasi radius jangkauan layanan sosial masjid.
* Menyimpan ke database * Membantu perencanaan distribusi bantuan (seperti ZIS) agar lebih tepat sasaran.
* Menampilkan kembali data pada peta dengan visualisasi berbeda
--- ---
## 🎯 Tujuan Tugas ## 🎯 Tujuan Sistem
Mahasiswa diharapkan mampu: Sistem ini dirancang sebagai alat bantu pengambilan keputusan (*Decision Support Tool*) bagi:
* **Pengurus masjid:** Mengetahui sebaran keluarga miskin dalam radius layanannya.
* Mengimplementasikan WebGIS berbasis web * **Aparat kelurahan/kecamatan:** Pemetaan kemiskinan di wilayah administratif.
* Mengelola data spasial (Point, Line, Polygon) * **Relawan sosial:** Perencanaan rute dan target distribusi bantuan.
* Melakukan analisis sederhana:
* Panjang jalan
* Luas tanah
* Menggunakan LeafletJS untuk visualisasi peta
--- ---
## 🧩 Fitur Aplikasi ## 🧩 Fitur Aplikasi
### 1. 📍 Data Point - SPBU ### 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.
* Input dengan klik pada peta ### 2. 🕌 Pemetaan Masjid & Radius Layanan
* Menyimpan: * 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).
* Nama SPBU ### 3. 🛠️ Mode Tampil & Edit
* Nomor SPBU * **Mode View:** Mode *read-only* untuk publik. Semua fungsi edit dinonaktifkan.
* Status (24 jam / tidak) * **Mode Edit:** Mode aktif untuk operator menambah, menghapus, dan memperbarui data (CRUD).
* Latitude & Longitude
* Ditampilkan sebagai marker pada peta ### 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.
--- ---
### 2. ➖ Data Line - Jalan ## 🎨 Desain Antarmuka (Lumina GIS)
* Input dengan menggambar garis (Polyline) Platform ini mengadopsi filosofi desain **"Lumina GIS"** yang mengutamakan kejernihan data dan kedalaman visual:
* Status jalan: * **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.
* Jalan Nasional * **Tipografi:** Hanken Grotesk yang memberikan kesan modern dan teknis namun ramah pengguna.
* Jalan Provinsi
* Jalan Kabupaten
* Warna berbeda sesuai status:
* Nasional → Merah
* Provinsi → Biru
* Kabupaten → Hijau
* Panjang jalan dihitung otomatis (meter)
---
### 3. 🔷 Data Polygon - Kavling Tanah
* Input dengan menggambar area (Polygon)
* Status kepemilikan:
* SHM
* HGB
* HGU
* HP
* Warna berbeda sesuai status
* Luas tanah dihitung otomatis (m²)
--- ---
## ⚙️ Teknologi yang Digunakan ## ⚙️ Teknologi yang Digunakan
* 🌐 Frontend: HTML, CSS, JavaScript * 🌐 **Frontend:** HTML, CSS (Vanilla + Glassmorphism), JavaScript (Vanilla, Fetch API)
* 🗺️ Library: LeafletJS + Leaflet Draw ([leaflet.github.io][1]) * 🗺️ **Library Peta:** Leaflet.js + OpenStreetMap (OSM)
* 🖥️ Backend: PHP * 🖥️ **Backend:** PHP (Procedural, 7 API Endpoints)
* 🗄️ Database: MySQL * 🗄️ **Database:** MySQL
Leaflet mendukung berbagai bentuk geometri seperti:
* Marker (Point)
* Polyline (Line)
* Polygon (Area) ([igismap.com][2])
--- ---
## 🗄️ Struktur Database ## 🗄️ Struktur Database
### Tabel SPBU Sistem ini menggunakan dua tabel utama:
* nama ### 1. Tabel `kemiskinan`
* no_spbu * `id` (Primary Key)
* status * `nama_kepala_keluarga`
* latitude * `jumlah_kk`
* longitude * `alamat`
* `latitude` & `longitude`
* `created_at`
### Tabel Jalan ### 2. Tabel `masjid`
* `id` (Primary Key)
* nama * `nama_masjid`
* status * `pic_masjid`
* panjang * `alamat`
* geom (koordinat) * `radius` (Jangkauan layanan dalam meter)
* `latitude` & `longitude`
### Tabel Kavling * `created_at`
* nama
* status
* luas
* geom (koordinat)
--- ---
## 🔄 Alur Sistem ## 🔄 Alur Kerja Sistem
### Input Data ### 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.
1. User memilih mode (Point / Line / Polygon) ### Analisis Cakupan Distribusi
2. User melakukan input di peta: 1. Pengurus masjid mendaftarkan masjidnya dan menetapkan jangkauan/radius layanan.
2. Lingkaran jangkauan masjid divisualisasikan pada peta.
* Klik (Point) 3. Secara visual dapat dianalisis keluarga miskin mana yang terjangkau (*dalam lingkaran biru*) dan mana yang belum terjangkau.
* Draw (Line / Polygon) 4. Radius masjid dapat diperbarui secara dinamis menyesuaikan kapasitas bantuan yang tersedia.
3. Sistem menghitung:
* Panjang (Line)
* Luas (Polygon)
4. Data dikirim ke server (PHP)
5. Data disimpan ke MySQL
---
### Menampilkan Data
1. Data diambil dari database
2. Ditampilkan di peta
3. Warna disesuaikan berdasarkan kategori
4. Data juga ditampilkan di sidebar
---
## 🧠 Konsep GIS yang Digunakan
* Spatial Data:
* Point
* Line
* Polygon
* Attribute Data
* Visualisasi berbasis kategori
* Analisis spasial sederhana:
* Distance (panjang)
* Area (luas)
--- ---
## 🚀 Cara Menjalankan ## 🚀 Cara Menjalankan
1. Jalankan MySQL 1. Pastikan server lokal (XAMPP/MAMP/Laragon) dengan PHP dan MySQL telah berjalan.
2. Masuk ke folder project: 2. Import database jika ada skema `.sql` ke MySQL.
3. Masuk ke folder proyek:
``` ```bash
cd webgis-spbu cd webgis-geopoverty
```
3. Jalankan server:
``` ```
4. Jalankan *built-in server* PHP:
```bash
php -S localhost:8000 php -S localhost:8000
``` ```
4. Buka di browser: 5. Buka di *browser*:
``` ```
http://localhost:8000 http://localhost:8000
``` ```
--- *(Catatan: Memerlukan koneksi internet aktif untuk memuat peta dasar dari OpenStreetMap).*
## 📌 Catatan Penting
* Jangan menggunakan Live Server (tidak support PHP)
* Gunakan Leaflet Draw untuk input Line & Polygon
* Perhitungan panjang & luas HARUS otomatis (tidak manual)
--- ---
## 🎓 Kesimpulan ## 🎓 Kesimpulan
Aplikasi ini merupakan implementasi dasar WebGIS yang mencakup: 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.
* Input data spasial
* Penyimpanan database
* Visualisasi peta interaktif
Proyek ini menunjukkan pemahaman terhadap konsep dasar Sistem Informasi Geografis (SIG) dalam pengembangan aplikasi berbasis web.
---
[1]: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html?utm_source=chatgpt.com "Leaflet Draw Documentation"
[2]: https://www.igismap.com/leafletjs-point-polyline-polygon-rectangle-circle/?utm_source=chatgpt.com "Leaflet.js - Point, Polyline, Polygon, Rectangle, Circle"