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
|
||||
|
||||
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)
|
||||
* ➖ 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 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.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 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
|
||||
* Mengelola data spasial (Point, Line, Polygon)
|
||||
* Melakukan analisis sederhana:
|
||||
### 2. 🕌 Manajemen Data Rumah Ibadah
|
||||
* Pemetaan lokasi rumah ibadah beserta penanggung jawab (PIC).
|
||||
* **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
|
||||
* Luas tanah
|
||||
* Menggunakan LeafletJS untuk visualisasi peta
|
||||
### 3. 📢 Sistem Laporan Warga & Pesan
|
||||
* Memungkinkan warga untuk melaporkan kondisi sosial atau keluarga yang membutuhkan bantuan di sekitarnya.
|
||||
* 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
|
||||
|
||||
### 1. 📍 Data Point - SPBU
|
||||
|
||||
* 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²)
|
||||
### 5. 🖨️ Ekspor Data & Laporan
|
||||
* **Cetak Peta (PDF):** Mengekspor tampilan peta saat ini ke dalam format PDF menggunakan tangkapan layar otomatis.
|
||||
* **Unduh Data (CSV):** Mengunduh data atribut kemiskinan dan rumah ibadah ke format CSV untuk analisis lanjutan.
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Teknologi yang Digunakan
|
||||
|
||||
* 🌐 Frontend: HTML, CSS, JavaScript
|
||||
* 🗺️ Library: LeafletJS + Leaflet Draw ([leaflet.github.io][1])
|
||||
* 🖥️ Backend: PHP
|
||||
* 🗄️ Database: MySQL
|
||||
|
||||
Leaflet mendukung berbagai bentuk geometri seperti:
|
||||
|
||||
* Marker (Point)
|
||||
* Polyline (Line)
|
||||
* Polygon (Area) ([igismap.com][2])
|
||||
* **Frontend:** HTML5, CSS3 (Custom UI Glassmorphism), Vanilla JavaScript
|
||||
* **Pemetaan (GIS):** Leaflet.js
|
||||
* **Plugin GIS:**
|
||||
* Leaflet Routing Machine (Rute jalan)
|
||||
* dom-to-image & jsPDF (Ekspor PDF)
|
||||
* **Backend:** PHP (Native)
|
||||
* **Database:** MySQL (Cloud/Remote Database)
|
||||
|
||||
---
|
||||
|
||||
## 🗄️ Struktur Database
|
||||
|
||||
### Tabel SPBU
|
||||
Sistem ini terhubung ke MySQL dan secara otomatis membuat tabel jika belum ada (*Auto Bootstrap*). Tabel utama meliputi:
|
||||
|
||||
* nama
|
||||
* no_spbu
|
||||
* status
|
||||
* latitude
|
||||
* longitude
|
||||
|
||||
### Tabel Jalan
|
||||
|
||||
* nama
|
||||
* status
|
||||
* panjang
|
||||
* geom (koordinat)
|
||||
|
||||
### Tabel Kavling
|
||||
|
||||
* nama
|
||||
* status
|
||||
* luas
|
||||
* geom (koordinat)
|
||||
1. **`kemiskinan`**: Menyimpan identitas, jumlah anggota, alamat, serta koordinat (Latitude & Longitude) keluarga.
|
||||
2. **`masjid`**: Menyimpan data rumah ibadah, PIC, koordinat, serta besaran radius cakupan bantuan (default: 500m).
|
||||
3. **`laporan`**: Menyimpan data laporan dari warga beserta bukti foto dan titik koordinat temuan.
|
||||
4. **`pesan`**: Menyimpan pesan/kontak masuk dari pengunjung.
|
||||
|
||||
---
|
||||
|
||||
## 🔄 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)
|
||||
2. User melakukan input di peta:
|
||||
|
||||
* 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:
|
||||
|
||||
```
|
||||
1. Buka terminal di dalam folder utama proyek (bukan di dalam folder `webgis-geopoverty`, melainkan di luarnya).
|
||||
2. Jalankan perintah server PHP bawaan:
|
||||
```bash
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📌 Catatan Penting
|
||||
|
||||
* Jangan menggunakan Live Server (tidak support PHP)
|
||||
* Gunakan Leaflet Draw untuk input Line & Polygon
|
||||
* Perhitungan panjang & luas HARUS otomatis (tidak manual)
|
||||
4. Sistem akan otomatis terhubung ke *Cloud Database MySQL* yang sudah dikonfigurasi di file `php/koneksi.php`.
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Kesimpulan
|
||||
|
||||
Aplikasi ini merupakan implementasi dasar WebGIS yang mencakup:
|
||||
|
||||
* 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"
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user