From 8365c0e3199160a902992944ada248a0c987b4be Mon Sep 17 00:00:00 2001 From: desztraa Date: Wed, 10 Jun 2026 17:24:07 +0700 Subject: [PATCH] chore: update readme.md webgis-geopoverty --- webgis-geopoverty/README.md | 212 ++++++++---------------------------- 1 file changed, 43 insertions(+), 169 deletions(-) diff --git a/webgis-geopoverty/README.md b/webgis-geopoverty/README.md index 1ab2401..4810215 100644 --- a/webgis-geopoverty/README.md +++ b/webgis-geopoverty/README.md @@ -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.