repair README.md
This commit is contained in:
@@ -1,115 +1,170 @@
|
|||||||
🗺️ WebGIS Pemetaan Kemiskinan dan Distribusi Bantuan (Kota Pontianak)
|
# 🗺️ WebGIS Pemetaan Kemiskinan dan Distribusi Bantuan (Kota Pontianak)
|
||||||
|
|
||||||
Sebuah Sistem Informasi Geografis (GIS) berbasis web yang dirancang dengan arsitektur Single Page Application (SPA) untuk memetakan demografi kemiskinan, mengkalkulasi kelayakan bantuan secara otomatis, mengelola respons darurat musibah, dan memfasilitasi pendataan talenta untuk program pemberdayaan warga.
|
Sebuah Sistem Informasi Geografis (*Geographic Information System / GIS*) berbasis web yang dirancang dengan arsitektur *Single Page Application (SPA)* untuk:
|
||||||
|
|
||||||
Sistem ini dibangun dengan kontrol otorisasi tingkat lanjut (Single-Tier Gatekeeper) serta menggunakan algoritma Sistem Pendukung Keputusan (SPK) terintegrasi untuk distribusi bantuan yang tepat sasaran.
|
* Memetakan demografi kemiskinan
|
||||||
|
* Mengkalkulasi kelayakan bantuan secara otomatis
|
||||||
|
* Mengelola respons darurat musibah
|
||||||
|
* Memfasilitasi pendataan talenta untuk pemberdayaan warga
|
||||||
|
|
||||||
✨ Fitur Utama (Core Features)
|
Sistem ini dibangun dengan kontrol otorisasi tingkat lanjut (*Role-Based Access Control / RBAC* & *Geofencing*) serta menggunakan algoritma *Sistem Pendukung Keputusan (SPK)* terintegrasi.
|
||||||
|
|
||||||
Gatekeeper Authentication: Sistem layar kunci persisten dengan enkripsi kata sandi menggunakan standar BCRYPT dan validasi sesi via API (Anti Client-Side Amnesia).
|
---
|
||||||
|
|
||||||
Pemetaan Spasial & Geofencing: Visualisasi interaktif titik infrastruktur dan batas wewenang radius operasional rumah ibadah menggunakan Leaflet.js dan Reverse Geocoding via Nominatim API.
|
## ✨ Fitur Utama (Core Features)
|
||||||
|
|
||||||
SPK Kemiskinan Otomatis: Menghitung Tingkat Kemiskinan (Sangat Miskin, Miskin, Rentan) secara dinamis menggunakan parameter Garis Kemiskinan Regional dan observasi aset fisik (Proxy Means Testing / PMT).
|
### 🔐 Gatekeeper Authentication
|
||||||
|
|
||||||
Distribusi Bantuan Cerdas (Smart Autofill): Memberikan rekomendasi takaran logistik pro-rata berdasarkan status keparahan kemiskinan.
|
* Sistem layar kunci persisten
|
||||||
|
* Enkripsi kata sandi menggunakan standar *BCRYPT*
|
||||||
|
* Validasi sesi berbasis API (*Anti Client-Side Amnesia*)
|
||||||
|
|
||||||
Manajemen Krisis (Visual Alert): Peringatan dini berbasis geospasial menggunakan rendering animasi kelap-kelip merah (GPU Accelerated) pada titik lokasi keluarga yang mengalami musibah darurat.
|
### 🗺️ Pemetaan Spasial & Geofencing
|
||||||
|
|
||||||
Resolusi Musibah Otomatis (Auto-Resolve): Menerapkan Database Transactions di mana penyaluran logistik akan secara otomatis memadamkan status darurat warga.
|
* Visualisasi interaktif menggunakan *Leaflet.js*
|
||||||
|
* Penentuan radius wewenang operasional
|
||||||
|
* *Reverse Geocoding* via *Nominatim API*
|
||||||
|
|
||||||
Filter Pelatihan Algoritmik: Guard clause otomatis untuk menyeleksi kandidat pelatihan berdasarkan batas usia produktif, tingkat pendidikan, dan status pengangguran dari tabel Anggota Keluarga.
|
### 📊 SPK Kemiskinan Otomatis
|
||||||
|
|
||||||
🛠️ Stack Teknologi (Tech Stack)
|
* Klasifikasi tingkat kemiskinan:
|
||||||
|
|
||||||
Frontend:
|
* Sangat Miskin
|
||||||
|
* Miskin
|
||||||
|
* Rentan
|
||||||
|
* Menggunakan:
|
||||||
|
|
||||||
HTML5 & CSS3 (Native)
|
* Garis Kemiskinan Regional
|
||||||
|
* *Proxy Means Testing (PMT)*
|
||||||
|
|
||||||
JavaScript (ES6+ / Vanilla JS)
|
### 📦 Distribusi Bantuan Cerdas (Smart Autofill)
|
||||||
|
|
||||||
Leaflet.js (Pustaka Pemetaan Klien)
|
* Rekomendasi logistik berbasis status kemiskinan
|
||||||
|
* Perhitungan proporsional (*pro-rata*)
|
||||||
|
|
||||||
Fetch API (Asynchronous HTTP Requests)
|
### 🚨 Manajemen Krisis (Visual Alert)
|
||||||
|
|
||||||
Backend:
|
* Peringatan dini berbasis geospasial
|
||||||
|
* Animasi visual (kelap-kelip merah) untuk lokasi darurat
|
||||||
|
|
||||||
PHP 8.x (API Endpoints & Sesi)
|
### 🔄 Resolusi Musibah Otomatis (Auto-Resolve)
|
||||||
|
|
||||||
PDO (PHP Data Objects) untuk interaksi basis data
|
* Menggunakan *Database Transactions*
|
||||||
|
* Status darurat otomatis selesai setelah bantuan disalurkan
|
||||||
|
|
||||||
MySQL / MariaDB (Database Relasional)
|
### 🎯 Filter Pelatihan Algoritmik
|
||||||
|
|
||||||
⚙️ Persyaratan Sistem (Prerequisites)
|
* Seleksi otomatis kandidat pelatihan berdasarkan:
|
||||||
|
|
||||||
Untuk menjalankan proyek ini di mesin lokal, Anda membutuhkan:
|
* Usia produktif
|
||||||
|
* Tingkat pendidikan
|
||||||
|
* Status pengangguran
|
||||||
|
|
||||||
Web Server lokal seperti XAMPP, MAMP, atau Laragon.
|
---
|
||||||
|
|
||||||
PHP Engine (Minimal versi 7.4, direkomendasikan versi 8.x).
|
## 🛠️ Stack Teknologi (Tech Stack)
|
||||||
|
|
||||||
MySQL Database.
|
### Frontend
|
||||||
|
|
||||||
Koneksi internet stabil (diperlukan untuk memuat aset basemap OpenStreetMap dan fitur Reverse Geocoding).
|
* HTML5 & CSS3 (*Native*)
|
||||||
|
* JavaScript (*ES6+ / Vanilla JS*)
|
||||||
|
* *Leaflet.js*
|
||||||
|
* *Fetch API*
|
||||||
|
|
||||||
🚀 Panduan Instalasi (Installation Guide)
|
### Backend
|
||||||
|
|
||||||
Ikuti langkah-langkah berikut untuk menjalankan sistem di lingkungan pengembangan lokal (localhost):
|
* PHP 8.x (API & Session Handling)
|
||||||
|
* PDO (*PHP Data Objects*)
|
||||||
|
* MySQL / MariaDB
|
||||||
|
|
||||||
Clone Repositori
|
---
|
||||||
Buka terminal/CMD dan jalankan perintah berikut di dalam direktori publik web server Anda (misal: C:\xampp\htdocs\):
|
|
||||||
|
|
||||||
git clone [https://github.com/username-anda/nama-repositori-anda.git](https://github.com/username-anda/nama-repositori-anda.git)
|
## ⚙️ Persyaratan Sistem (Prerequisites)
|
||||||
|
|
||||||
|
Untuk menjalankan proyek ini secara lokal:
|
||||||
|
|
||||||
Konfigurasi Database
|
* Web Server (*XAMPP / MAMP / Laragon*)
|
||||||
|
* PHP ≥ 7.4 (disarankan 8.x)
|
||||||
|
* MySQL / MariaDB
|
||||||
|
* Koneksi internet (untuk OpenStreetMap & Nominatim API)
|
||||||
|
|
||||||
Buka phpMyAdmin (biasanya di http://localhost/phpmyadmin).
|
---
|
||||||
|
|
||||||
Buat sebuah database baru dengan nama webgis_kemiskinan (atau sesuai nama database Anda).
|
## 🚀 Panduan Instalasi (Installation Guide)
|
||||||
|
|
||||||
Import file SQL database_lengkap.sql yang telah disediakan di repositori ini ke dalam database yang baru dibuat.
|
### 1. Clone Repositori
|
||||||
|
|
||||||
Konfigurasi Koneksi PHP
|
```bash
|
||||||
Buka file koneksi.php di dalam root direktori proyek, dan pastikan kredensial basis data sesuai dengan konfigurasi lokal Anda:
|
git clone https://github.com/ChronosSilver/WebGis-SIG-UAS.git
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Konfigurasi Database
|
||||||
|
|
||||||
|
* Buka: `http://localhost/phpmyadmin`
|
||||||
|
* Buat database:
|
||||||
|
|
||||||
|
```
|
||||||
|
webgis_kemiskinan
|
||||||
|
```
|
||||||
|
* Import file `.sql` dari repositori
|
||||||
|
|
||||||
|
### 3. Konfigurasi Koneksi PHP
|
||||||
|
|
||||||
|
Edit file `koneksi.php`:
|
||||||
|
|
||||||
|
```php
|
||||||
$host = "localhost";
|
$host = "localhost";
|
||||||
$user = "root"; // Username default XAMPP
|
$user = "root";
|
||||||
$pass = ""; // Kosongkan jika XAMPP default
|
$pass = "";
|
||||||
$dbname = "webgis_kemiskinan"; // Sesuaikan dengan nama database Anda
|
$dbname = "webgis_pontianak";
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Jalankan Aplikasi
|
||||||
|
|
||||||
Jalankan Aplikasi
|
Akses melalui browser:
|
||||||
Buka web browser dan akses direktori proyek Anda:
|
|
||||||
|
|
||||||
http://localhost/nama-folder-proyek/
|
```
|
||||||
|
http://localhost/004(fin)/
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
🔒 Akses Pengujian (Dummy Credentials)
|
## 🔒 Akses Pengujian (Dummy Credentials)
|
||||||
|
|
||||||
Gunakan kredensial berikut untuk melewati layar kunci (Gatekeeper) pada saat pengujian sistem:
|
Gunakan akun berikut:
|
||||||
|
|
||||||
Username: admin (contoh, ubah sesuai isi database Anda)
|
```
|
||||||
|
Username: admin
|
||||||
|
Password: admin
|
||||||
|
```
|
||||||
|
|
||||||
Password: 123456 (contoh)
|
> Anda juga dapat membuat akun baru melalui fitur registrasi.
|
||||||
(Catatan: Anda dapat membuat akun baru melalui tab "Daftar" di layar awal sistem jika tabel users masih kosong).
|
|
||||||
|
|
||||||
📂 Struktur Direktori (Directory Structure)
|
---
|
||||||
|
|
||||||
|
## 📂 Struktur Direktori
|
||||||
|
|
||||||
|
```
|
||||||
📦 root-directory
|
📦 root-directory
|
||||||
┣ 📂 components # Komponen UI modular (Sidebar, Modals)
|
┣ 📂 components # UI modular (Sidebar, Modal)
|
||||||
┣ 📂 otak_auth # API Backend untuk Login, Register, Sesi & Logout
|
┣ 📂 otak_auth # API autentikasi
|
||||||
┣ 📂 otak_kemiskinan # API Backend untuk logika CRUD & SPK warga, anggota, pelatihan
|
┣ 📂 otak_kemiskinan # CRUD & SPK warga
|
||||||
┣ 📂 otak_jalan # API Backend manajemen data garis (Polyline)
|
┣ 📂 otak_jalan # Data Polyline
|
||||||
┣ 📂 otak_tanah # API Backend manajemen persil tanah (Polygon)
|
┣ 📂 otak_tanah # Data Polygon
|
||||||
┣ 📂 otak_spbu # API Backend manajemen SPBU
|
┣ 📂 otak_spbu # Data SPBU
|
||||||
┣ 📜 app.js # Otak Utama Sistem (Logika Spasial & State Management)
|
┣ 📜 app.js # Logika utama sistem
|
||||||
┣ 📜 style.css # Desain Kosmetik UI dan Animasi GPU
|
┣ 📜 style.css # UI & animasi
|
||||||
┣ 📜 koneksi.php # Jembatan penghubung ke Database MySQL
|
┣ 📜 koneksi.php # Koneksi database
|
||||||
┣ 📜 database_lengkap.sql # File dump database mutlak untuk instalasi
|
┗ 📜 index.php # Entry point
|
||||||
┗ 📜 index.php # Entry point aplikasi
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
📝 Lisensi
|
## 📝 Lisensi
|
||||||
|
|
||||||
Proyek ini dikembangkan sebagai bagian dari penelitian akademik/tugas perkuliahan Universitas Tanjungpura (2026). Segala bentuk distribusi dan modifikasi mengacu pada kebijakan hak cipta yang berlaku.
|
Proyek ini dikembangkan sebagai bagian dari penelitian akademik / tugas perkuliahan
|
||||||
|
Universitas Tanjungpura (2026) oleh Nelson Davey (D1041231058).
|
||||||
|
|
||||||
|
Segala bentuk distribusi dan modifikasi mengikuti kebijakan hak cipta yang berlaku.
|
||||||
|
|
||||||
|
---
|
||||||
Reference in New Issue
Block a user