chore: update readme.md webgis-geopoverty
This commit is contained in:
+43
-169
@@ -1,205 +1,79 @@
|
|||||||
# 🗺️ WebGIS Project - Manajemen Data Spasial
|
# 🤝 GeoPoverty - Sistem Informasi Geografis Pemetaan Sosial
|
||||||
|
|
||||||
## 📌 Deskripsi Proyek
|
## 📌 Deskripsi Proyek
|
||||||
|
|
||||||
Proyek ini merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk mengelola data spasial dalam bentuk:
|
**GeoPoverty** adalah aplikasi **WebGIS interaktif berbasis LeafletJS, PHP, dan MySQL** yang dirancang khusus untuk memetakan keluarga prasejahtera (kemiskinan) dan rumah ibadah.
|
||||||
|
|
||||||
* 📍 Point (SPBU)
|
Tujuan utama dari sistem ini adalah untuk membantu identifikasi dan distribusi bantuan sosial agar lebih tepat sasaran. Aplikasi ini menggunakan konsep *buffer radius* (zona jangkauan) rumah ibadah untuk memantau rumah mana saja yang masuk ke dalam radius bantuan dan mana yang belum terjangkau.
|
||||||
* ➖ Line / Polyline (Jalan)
|
|
||||||
* 🔷 Polygon (Kavling Tanah)
|
|
||||||
|
|
||||||
Aplikasi ini memungkinkan user untuk:
|
|
||||||
|
|
||||||
* Menambahkan data langsung dari peta
|
|
||||||
* Menyimpan ke database
|
|
||||||
* Menampilkan kembali data pada peta dengan visualisasi berbeda
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🎯 Tujuan Tugas
|
## 🎯 Fitur Utama
|
||||||
|
|
||||||
Mahasiswa diharapkan mampu:
|
### 1. 👥 Manajemen Data Kemiskinan
|
||||||
|
* Pemetaan titik lokasi (Point) keluarga prasejahtera.
|
||||||
|
* Menyimpan informasi detail seperti Nama Kepala Keluarga, Jumlah Anggota KK, dan Alamat.
|
||||||
|
* Tampil sebagai marker interaktif di atas peta.
|
||||||
|
|
||||||
* Mengimplementasikan WebGIS berbasis web
|
### 2. 🕌 Manajemen Data Rumah Ibadah
|
||||||
* Mengelola data spasial (Point, Line, Polygon)
|
* Pemetaan lokasi rumah ibadah beserta penanggung jawab (PIC).
|
||||||
* Melakukan analisis sederhana:
|
* **Fitur Radius (Buffer):** Secara otomatis menggambar lingkaran dengan radius 500 meter di sekitar rumah ibadah.
|
||||||
|
* Memudahkan identifikasi keluarga prasejahtera yang berada di dalam maupun di luar zona jangkauan bantuan rumah ibadah tersebut.
|
||||||
|
|
||||||
* Panjang jalan
|
### 3. 📢 Sistem Laporan Warga & Pesan
|
||||||
* Luas tanah
|
* Memungkinkan warga untuk melaporkan kondisi sosial atau keluarga yang membutuhkan bantuan di sekitarnya.
|
||||||
* Menggunakan LeafletJS untuk visualisasi peta
|
* Data laporan dikelola secara terpusat dan memiliki status penanganan (Menunggu, Diproses, Selesai).
|
||||||
|
|
||||||
---
|
### 4. 🗺️ Simulasi Rute (Routing)
|
||||||
|
* Integrasi Leaflet Routing Machine.
|
||||||
|
* Mampu menyimulasikan dan menggambar rute jalan dari titik posko/rumah ibadah menuju rumah tujuan penerima bantuan.
|
||||||
|
|
||||||
## 🧩 Fitur Aplikasi
|
### 5. 🖨️ Ekspor Data & Laporan
|
||||||
|
* **Cetak Peta (PDF):** Mengekspor tampilan peta saat ini ke dalam format PDF menggunakan tangkapan layar otomatis.
|
||||||
### 1. 📍 Data Point - SPBU
|
* **Unduh Data (CSV):** Mengunduh data atribut kemiskinan dan rumah ibadah ke format CSV untuk analisis lanjutan.
|
||||||
|
|
||||||
* Input dengan klik pada peta
|
|
||||||
* Menyimpan:
|
|
||||||
|
|
||||||
* Nama SPBU
|
|
||||||
* Nomor SPBU
|
|
||||||
* Status (24 jam / tidak)
|
|
||||||
* Latitude & Longitude
|
|
||||||
* Ditampilkan sebagai marker pada peta
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. ➖ Data Line - Jalan
|
|
||||||
|
|
||||||
* Input dengan menggambar garis (Polyline)
|
|
||||||
* Status jalan:
|
|
||||||
|
|
||||||
* Jalan Nasional
|
|
||||||
* 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:** HTML5, CSS3 (Custom UI Glassmorphism), Vanilla JavaScript
|
||||||
* 🗺️ Library: LeafletJS + Leaflet Draw ([leaflet.github.io][1])
|
* **Pemetaan (GIS):** Leaflet.js
|
||||||
* 🖥️ Backend: PHP
|
* **Plugin GIS:**
|
||||||
* 🗄️ Database: MySQL
|
* Leaflet Routing Machine (Rute jalan)
|
||||||
|
* dom-to-image & jsPDF (Ekspor PDF)
|
||||||
Leaflet mendukung berbagai bentuk geometri seperti:
|
* **Backend:** PHP (Native)
|
||||||
|
* **Database:** MySQL (Cloud/Remote Database)
|
||||||
* Marker (Point)
|
|
||||||
* Polyline (Line)
|
|
||||||
* Polygon (Area) ([igismap.com][2])
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🗄️ Struktur Database
|
## 🗄️ Struktur Database
|
||||||
|
|
||||||
### Tabel SPBU
|
Sistem ini terhubung ke MySQL dan secara otomatis membuat tabel jika belum ada (*Auto Bootstrap*). Tabel utama meliputi:
|
||||||
|
|
||||||
* nama
|
1. **`kemiskinan`**: Menyimpan identitas, jumlah anggota, alamat, serta koordinat (Latitude & Longitude) keluarga.
|
||||||
* no_spbu
|
2. **`masjid`**: Menyimpan data rumah ibadah, PIC, koordinat, serta besaran radius cakupan bantuan (default: 500m).
|
||||||
* status
|
3. **`laporan`**: Menyimpan data laporan dari warga beserta bukti foto dan titik koordinat temuan.
|
||||||
* latitude
|
4. **`pesan`**: Menyimpan pesan/kontak masuk dari pengunjung.
|
||||||
* longitude
|
|
||||||
|
|
||||||
### Tabel Jalan
|
|
||||||
|
|
||||||
* nama
|
|
||||||
* status
|
|
||||||
* panjang
|
|
||||||
* geom (koordinat)
|
|
||||||
|
|
||||||
### Tabel Kavling
|
|
||||||
|
|
||||||
* nama
|
|
||||||
* status
|
|
||||||
* luas
|
|
||||||
* geom (koordinat)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🔄 Alur Sistem
|
## 🚀 Cara Menjalankan Aplikasi
|
||||||
|
|
||||||
### Input Data
|
Aplikasi ini menggunakan server bawaan PHP sehingga **tidak memerlukan XAMPP/Laragon**. Sangat ringan dan praktis untuk dijalankan langsung dari terminal IDE (seperti VSCode).
|
||||||
|
|
||||||
1. User memilih mode (Point / Line / Polygon)
|
1. Buka terminal di dalam folder utama proyek (bukan di dalam folder `webgis-geopoverty`, melainkan di luarnya).
|
||||||
2. User melakukan input di peta:
|
2. Jalankan perintah server PHP bawaan:
|
||||||
|
```bash
|
||||||
* Klik (Point)
|
|
||||||
* Draw (Line / Polygon)
|
|
||||||
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
|
|
||||||
|
|
||||||
1. Jalankan MySQL
|
|
||||||
2. Masuk ke folder project:
|
|
||||||
|
|
||||||
```
|
|
||||||
cd webgis-spbu
|
|
||||||
```
|
|
||||||
3. Jalankan server:
|
|
||||||
|
|
||||||
```
|
|
||||||
php -S localhost:8000
|
php -S localhost:8000
|
||||||
```
|
```
|
||||||
4. Buka di browser:
|
3. Buka *browser* pilihan Anda dan akses alamat:
|
||||||
|
```text
|
||||||
|
http://localhost:8000/webgis-geopoverty/
|
||||||
```
|
```
|
||||||
http://localhost:8000
|
4. Sistem akan otomatis terhubung ke *Cloud Database MySQL* yang sudah dikonfigurasi di file `php/koneksi.php`.
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📌 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:
|
GeoPoverty bukan sekadar peta digital biasa, melainkan sebuah instrumen pengambilan keputusan spasial (*Spatial Decision Support System*). Dengan adanya fitur *buffer* radius rumah ibadah dan simulasi rute, diharapkan penyaluran bantuan sosial kepada keluarga prasejahtera bisa dilakukan dengan jauh lebih merata, transparan, dan efisien.
|
||||||
|
|
||||||
* 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"
|
|
||||||
|
|||||||
Reference in New Issue
Block a user