2nd commit: Pemisahan halaman autentifikasi dengan halaman utama, modifikasi ikon, dan pemisahakan fitur berdasarkan role
This commit is contained in:
@@ -1,117 +1,67 @@
|
||||
# 🗺️ WebGIS Pemetaan Kemiskinan dan Distribusi Bantuan (Kota Pontianak)
|
||||
# 🗺️ WebGIS-Pontianak (Pemetaan Kemiskinan & Tata Ruang)
|
||||
|
||||
Sebuah Sistem Informasi Geografis (*Geographic Information System / GIS*) berbasis web yang dirancang dengan arsitektur *Single Page Application (SPA)* untuk:
|
||||
Sebuah Sistem Informasi Geografis (*Geographic Information System / GIS*) komprehensif berbasis web yang dirancang untuk memetakan infrastruktur kota dan demografi sosial, dengan fokus utama pada pemetaan kemiskinan dan distribusi bantuan di Pontianak.
|
||||
|
||||
* Memetakan demografi kemiskinan
|
||||
* Mengkalkulasi kelayakan bantuan secara otomatis
|
||||
* Mengelola respons darurat musibah
|
||||
* Memfasilitasi pendataan talenta untuk pemberdayaan warga
|
||||
|
||||
Sistem ini dibangun dengan kontrol otorisasi tingkat lanjut (*Role-Based Access Control / RBAC* & *Geofencing*) serta menggunakan algoritma *Sistem Pendukung Keputusan (SPK)* terintegrasi.
|
||||
Sistem ini dikembangkan dengan arsitektur **Multi-Page Application** tersinkronisasi dan dilindungi oleh kontrol akses berbasis peran (*Role-Based Access Control / RBAC*) tingkat lanjut.
|
||||
|
||||
---
|
||||
|
||||
## ✨ Fitur Utama (Core Features)
|
||||
|
||||
### 🔐 Gatekeeper Authentication
|
||||
### 🔐 Keamanan & Autentikasi Berlapis
|
||||
- **Halaman Login Terisolasi:** Autentikasi dipisah sepenuhnya dari halaman utama peta (`login.php`) untuk mencegah kebocoran *resource* ke klien yang tidak sah.
|
||||
- **Proteksi Kata Sandi BCRYPT:** Standar keamanan industri, divalidasi minimal 8 karakter baik di sisi klien (*frontend*) maupun server (*backend*).
|
||||
- **Role-Based Access Control (RBAC):** Pemisahan hak akses ketat antara *Admin* (hak penuh) dan *User* biasa (hanya-baca & lapor musibah).
|
||||
- **Server-side Gatekeeper:** Validasi *Session* ketat berbasis PHP di setiap akses masuk API maupun perlindungan pengalihan instan (*instant redirection*) di halaman utama.
|
||||
- **Stylish Notification:** Notifikasi *pop-up* responsif berbasis SweetAlert2 untuk menyambut identitas pengguna.
|
||||
|
||||
* Sistem layar kunci persisten
|
||||
* Enkripsi kata sandi menggunakan standar *BCRYPT*
|
||||
* Validasi sesi berbasis API (*Anti Client-Side Amnesia*)
|
||||
### 🗺️ Pemetaan Spasial Multi-Layer
|
||||
- **Leaflet.js Interaktif:** Peta dinamis dengan *FontAwesome Icon* premium untuk visualisasi marker.
|
||||
- **Peta Aset Beragam:** Menampilkan visualisasi tumpang tindih untuk *Polyline* (Jaringan Jalan), *Polygon* (Parsil Tanah), dan *Marker* (SPBU & Rumah Ibadah).
|
||||
- **Z-Index & Event Handling Terkelola:** Penempatan *interactive: false* pada radius wewenang rumah ibadah agar tidak menutupi klik (pointer events) dari poligon jalan dan tanah di bawahnya.
|
||||
- **Reverse Geocoding:** Pelacakan koordinat GPS *real-time* terintegrasi Nominatim API.
|
||||
|
||||
### 🗺️ Pemetaan Spasial & Geofencing
|
||||
### 📊 Algoritma SPK Kemiskinan & Kesejahteraan
|
||||
Sistem penentuan status keluarga (Sangat Miskin, Miskin, Rentan) yang dikalkulasi secara terpusat berdasarkan parameter *Garis Kemiskinan* dinamis. Modul ini menyertakan *Smart Autofill* untuk merekomendasikan jumlah logistik.
|
||||
|
||||
* Visualisasi interaktif menggunakan *Leaflet.js*
|
||||
* Penentuan radius wewenang operasional
|
||||
* *Reverse Geocoding* via *Nominatim API*
|
||||
|
||||
### 📊 SPK Kemiskinan Otomatis
|
||||
|
||||
* Klasifikasi tingkat kemiskinan:
|
||||
|
||||
* Sangat Miskin
|
||||
* Miskin
|
||||
* Rentan
|
||||
* Menggunakan:
|
||||
|
||||
* Garis Kemiskinan Regional
|
||||
* *Proxy Means Testing (PMT)*
|
||||
|
||||
### 📦 Distribusi Bantuan Cerdas (Smart Autofill)
|
||||
|
||||
* Rekomendasi logistik berbasis status kemiskinan
|
||||
* Perhitungan proporsional (*pro-rata*)
|
||||
|
||||
### 🚨 Manajemen Krisis (Visual Alert)
|
||||
|
||||
* Peringatan dini berbasis geospasial
|
||||
* Animasi visual (kelap-kelip merah) untuk lokasi darurat
|
||||
|
||||
### 🔄 Resolusi Musibah Otomatis (Auto-Resolve)
|
||||
|
||||
* Menggunakan *Database Transactions*
|
||||
* Status darurat otomatis selesai setelah bantuan disalurkan
|
||||
|
||||
### 🎯 Filter Pelatihan Algoritmik
|
||||
|
||||
* Seleksi otomatis kandidat pelatihan berdasarkan:
|
||||
|
||||
* Usia produktif
|
||||
* Tingkat pendidikan
|
||||
* Status pengangguran
|
||||
### 🚨 Manajemen Bantuan & Krisis Darurat
|
||||
- Pemantauan rumah tangga yang berada di dalam maupun luar radius cakupan wewenang rumah ibadah.
|
||||
- Peringatan darurat musibah dengan efek kelap-kelip visual pada marker (*SOS Blink*).
|
||||
- Pencatatan riwayat distribusi bantuan dengan hak visibilitas CRUD yang otomatis disembunyikan dari antarmuka User biasa demi mencegah manipulasi data.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Stack Teknologi (Tech Stack)
|
||||
|
||||
### Frontend
|
||||
|
||||
* HTML5 & CSS3 (*Native*)
|
||||
* JavaScript (*ES6+ / Vanilla JS*)
|
||||
* *Leaflet.js*
|
||||
* *Fetch API*
|
||||
* **UI/UX:** HTML5, CSS3 Murni (Custom RBAC rules, Smooth Animations, Glassmorphism), SweetAlert2
|
||||
* **Peta Geospasial:** Leaflet.js
|
||||
* **Logika Aplikasi:** Vanilla JavaScript (ES6+), Fetch API
|
||||
|
||||
### Backend
|
||||
|
||||
* PHP 8.x (API & Session Handling)
|
||||
* PDO (*PHP Data Objects*)
|
||||
* MySQL / MariaDB
|
||||
* **Logika Server & Sesi:** PHP 8.x (*Stateful Session Management*)
|
||||
* **Jembatan Database:** PDO (*PHP Data Objects*) dengan arsitektur *Prepared Statements*
|
||||
* **Database Relasional:** MySQL / MariaDB
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Persyaratan Sistem (Prerequisites)
|
||||
|
||||
Untuk menjalankan proyek ini secara lokal:
|
||||
|
||||
* Web Server (*XAMPP / MAMP / Laragon*)
|
||||
* PHP ≥ 7.4 (disarankan 8.x)
|
||||
* MySQL / MariaDB
|
||||
* Koneksi internet (untuk OpenStreetMap & Nominatim API)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Panduan Instalasi (Installation Guide)
|
||||
|
||||
### 1. Clone Repositori
|
||||
## 🚀 Panduan Instalasi Lokal
|
||||
|
||||
### 1. Kloning Repositori
|
||||
```bash
|
||||
git clone https://github.com/ChronosSilver/WebGis-SIG-UAS.git
|
||||
git clone https://github.com/ChronosSilver/SIG-Poverty-Mapping.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`:
|
||||
### 2. Persiapan Database
|
||||
1. Buka *control panel* MySQL Anda (`http://localhost/phpmyadmin`)
|
||||
2. Buat database kosong baru dengan nama:
|
||||
```
|
||||
webgis_pontianak
|
||||
```
|
||||
3. Import file cadangan `.sql` yang disertakan di repositori ini ke dalam database tersebut.
|
||||
|
||||
### 3. Konfigurasi Sistem
|
||||
Sistem ini menggunakan parameter *default* localhost (contoh: XAMPP). Jika *password* MySQL Anda kosong, tidak ada yang perlu diedit. Sesuaikan pengaturan ini di dalam file `koneksi.php`:
|
||||
```php
|
||||
$host = "localhost";
|
||||
$user = "root";
|
||||
@@ -119,52 +69,34 @@ $pass = "";
|
||||
$dbname = "webgis_pontianak";
|
||||
```
|
||||
|
||||
### 4. Jalankan Aplikasi
|
||||
|
||||
Akses melalui browser:
|
||||
|
||||
### 4. Eksekusi WebGIS
|
||||
Akses direktori proyek melalui browser pilihan Anda:
|
||||
```
|
||||
http://localhost/004(fin)/
|
||||
http://localhost/SIG1/webgis/Poverty_Mapping/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Akses Pengujian (Dummy Credentials)
|
||||
|
||||
Gunakan akun berikut:
|
||||
|
||||
## 📂 Struktur Direktori Terbaru
|
||||
```
|
||||
Username: admin
|
||||
Password: admin
|
||||
```
|
||||
|
||||
> Anda juga dapat membuat akun baru melalui fitur registrasi.
|
||||
|
||||
---
|
||||
|
||||
## 📂 Struktur Direktori
|
||||
|
||||
```
|
||||
📦 root-directory
|
||||
┣ 📂 components # UI modular (Sidebar, Modal)
|
||||
┣ 📂 otak_auth # API autentikasi
|
||||
┣ 📂 otak_kemiskinan # CRUD & SPK warga
|
||||
┣ 📂 otak_jalan # Data Polyline
|
||||
┣ 📂 otak_tanah # Data Polygon
|
||||
┣ 📂 otak_spbu # Data SPBU
|
||||
┣ 📜 app.js # Logika utama sistem
|
||||
┣ 📜 style.css # UI & animasi
|
||||
┣ 📜 koneksi.php # Koneksi database
|
||||
┗ 📜 index.php # Entry point
|
||||
📦 Poverty_Mapping
|
||||
┣ 📂 components # Kerangka antarmuka modular (Sidebar, Modal Template)
|
||||
┣ 📂 otak_auth # API gerbang keamanan & manajer sesi PHP
|
||||
┣ 📂 otak_kemiskinan # Endpoint CRUD penduduk, bantuan & laporan musibah
|
||||
┣ 📂 otak_jalan # Endpoint spasial penyimpan Polyline Jalan
|
||||
┣ 📂 otak_tanah # Endpoint spasial penyimpan Polygon Parsil Tanah
|
||||
┣ 📂 otak_spbu # Endpoint penampung data POI SPBU
|
||||
┣ 📜 app.js # Otak logika SPA Frontend & Leaflet Rendering
|
||||
┣ 📜 style.css # Desain tema global & Filter Visibilitas RBAC
|
||||
┣ 📜 koneksi.php # Jembatan asinkron ke MySQL PDO
|
||||
┣ 📜 login.php # Lobi isolasi layar kunci (Gatekeeper Entry)
|
||||
┗ 📜 index.php # Kanvas Peta Utama WebGIS (Terproteksi Sesi)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 Lisensi
|
||||
## 📝 Pengembang & Lisensi
|
||||
Sistem Informasi Geografis (*SIG*) berbasis web ini merupakan purwarupa penelitian/tugas akhir yang secara kontinu berevolusi dari tahun ke tahun.
|
||||
**Hak Cipta (2026) oleh Nelson Davey (NIM: D1041231058) - Universitas Tanjungpura**.
|
||||
|
||||
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.
|
||||
|
||||
---
|
||||
Mendukung prinsip kode aman dengan akses terotentikasi berlapis. Segala bentuk salinan, distribusi, dan modifikasi harus mencantumkan sumber orisinalitas serta mengikuti kebijakan akademik yang berlaku.
|
||||
Reference in New Issue
Block a user