update: readme.md
This commit is contained in:
@@ -1,205 +1,133 @@
|
||||
# 🗺️ WebGIS Project - Manajemen Data Spasial
|
||||
# 🗺️ WebGIS GeoPoverty - Pemetaan Kemiskinan Berbasis Partisipasi Rumah Ibadah
|
||||
|
||||
## 📌 Deskripsi Proyek
|
||||
|
||||
Proyek ini merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk mengelola data spasial dalam bentuk:
|
||||
|
||||
* 📍 Point (SPBU)
|
||||
* ➖ Line / Polyline (Jalan)
|
||||
* 🔷 Polygon (Kavling Tanah)
|
||||
**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:
|
||||
|
||||
* Menambahkan data langsung dari peta
|
||||
* Menyimpan ke database
|
||||
* Menampilkan kembali data pada peta dengan visualisasi berbeda
|
||||
* 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 Tugas
|
||||
## 🎯 Tujuan Sistem
|
||||
|
||||
Mahasiswa diharapkan mampu:
|
||||
|
||||
* Mengimplementasikan WebGIS berbasis web
|
||||
* Mengelola data spasial (Point, Line, Polygon)
|
||||
* Melakukan analisis sederhana:
|
||||
|
||||
* Panjang jalan
|
||||
* Luas tanah
|
||||
* Menggunakan LeafletJS untuk visualisasi peta
|
||||
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. 📍 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
|
||||
* Menyimpan:
|
||||
### 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).
|
||||
|
||||
* Nama SPBU
|
||||
* Nomor SPBU
|
||||
* Status (24 jam / tidak)
|
||||
* Latitude & Longitude
|
||||
* Ditampilkan sebagai marker pada peta
|
||||
### 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.
|
||||
|
||||
---
|
||||
|
||||
### 2. ➖ Data Line - Jalan
|
||||
## 🎨 Desain Antarmuka (Lumina GIS)
|
||||
|
||||
* 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²)
|
||||
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, 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:** HTML, CSS (Vanilla + Glassmorphism), JavaScript (Vanilla, Fetch API)
|
||||
* 🗺️ **Library Peta:** Leaflet.js + OpenStreetMap (OSM)
|
||||
* 🖥️ **Backend:** PHP (Procedural, 7 API Endpoints)
|
||||
* 🗄️ **Database:** MySQL
|
||||
|
||||
---
|
||||
|
||||
## 🗄️ Struktur Database
|
||||
|
||||
### Tabel SPBU
|
||||
Sistem ini menggunakan dua tabel utama:
|
||||
|
||||
* nama
|
||||
* no_spbu
|
||||
* status
|
||||
* latitude
|
||||
* longitude
|
||||
### 1. Tabel `kemiskinan`
|
||||
* `id` (Primary Key)
|
||||
* `nama_kepala_keluarga`
|
||||
* `jumlah_kk`
|
||||
* `alamat`
|
||||
* `latitude` & `longitude`
|
||||
* `created_at`
|
||||
|
||||
### Tabel Jalan
|
||||
|
||||
* nama
|
||||
* status
|
||||
* panjang
|
||||
* geom (koordinat)
|
||||
|
||||
### Tabel Kavling
|
||||
|
||||
* nama
|
||||
* status
|
||||
* luas
|
||||
* geom (koordinat)
|
||||
### 2. Tabel `masjid`
|
||||
* `id` (Primary Key)
|
||||
* `nama_masjid`
|
||||
* `pic_masjid`
|
||||
* `alamat`
|
||||
* `radius` (Jangkauan layanan dalam meter)
|
||||
* `latitude` & `longitude`
|
||||
* `created_at`
|
||||
|
||||
---
|
||||
|
||||
## 🔄 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)
|
||||
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)
|
||||
### 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. Jalankan MySQL
|
||||
2. Masuk ke folder project:
|
||||
|
||||
```
|
||||
cd webgis-spbu
|
||||
```
|
||||
3. Jalankan server:
|
||||
|
||||
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
|
||||
```
|
||||
4. Buka di browser:
|
||||
|
||||
5. Buka di *browser*:
|
||||
```
|
||||
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)
|
||||
*(Catatan: Memerlukan koneksi internet aktif untuk memuat peta dasar dari OpenStreetMap).*
|
||||
|
||||
---
|
||||
|
||||
## 🎓 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"
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user