FH/pontianak-poverty-webgis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d34d27208b4bb0bc6cd86d9def0fa5e677a49f36
pontianak-poverty-webgis/README.md
T
FH d34d27208b fix(format) : memperbaiki format pada README.md 
Memperbaiki format spasi pada README.md agar lebih mudah dibaca.
2026-06-03 13:38:43 +00:00

15 KiB
Raw Blame History

🌏 WebGIS Kemiskinan & Jangkauan Bantuan

Sistem Informasi Geospasial interaktif untuk memetakan penduduk miskin dan menganalisis jangkauan bantuan dari rumah ibadah di Kota Pontianak, Kalimantan Barat.

✍️ Author

Nama: Ferdyan Handoko

NIM: D1041231039

Kelas: SIG B

🌐 Live Demo

Sistem ini telah di-hosting dan dapat diakses langsung melalui tautan berikut:

Halaman Tautan

🗺️ Halaman Publik https://pontianak-poverty-webgis.freedev.app/

🔐 Halaman Login Admin https://pontianak-poverty-webgis.freedev.app/login.php

Kredensial Demo Admin:

Username: admin

Password: admin123

⚠️ Catatan: Kredensial di atas hanya untuk keperluan demo. Ganti password setelah instalasi di server produksi.

📑 Daftar Isi

📘 Deskripsi

Sistem ini dibangun untuk membantu pemangku kepentingan di Kota Pontianak dalam mengidentifikasi sebaran penduduk miskin yang belum terjangkau bantuan dari rumah ibadah. Dengan pendekatan WebGIS, pengguna dapat menjelajahi peta interaktif, melihat klasifikasi titik miskin (terjangkau / tidak), serta kerapatan penduduk per kecamatan.

Admin dapat mengelola data penduduk miskin langsung dari peta melalui antarmuka sidebar, sedangkan pengguna umum dapat melihat seluruh informasi tanpa bisa mengubah data.

✨ Fitur Utama

  • Peta Interaktif berbasis OpenStreetMap dengan navigasi zoom, pan, dan tombol kontrol.
  • 6 Layer Geospasial: Batas Kecamatan, Kerapatan Penduduk Belum Terjangkau, Zona Buffer, Titik Miskin, Fasilitas Umum, Jaringan Jalan, Rumah Ibadah.
  • Klasifikasi Titik Miskin: Hijau (terjangkau) dan Merah (belum terjangkau).
  • Zona Jangkauan (Buffer Union): Gabungan buffer dari seluruh rumah ibadah, radius dapat diubah secara dinamis.
  • Dashboard Ringkasan: Total titik miskin, jumlah keluarga, rata‑rata penghasilan, distribusi per kecamatan.
  • Tabel Data Lengkap: Dapat diurutkan (sort) dan diakses melalui modal.
  • Manajemen Data Admin: Tambah, edit, hapus titik penduduk miskin langsung dari peta atau tabel.
  • Validasi Formulir & Konfirmasi Aksi: Mencegah kesalahan input dan perubahan tidak disengaja.
  • Loading Overlay untuk umpan balik saat data dimuat.
  • Toast Notification untuk notifikasi sukses/gagal.
  • Sidebar dengan tab navigasi, kontrol layer, legenda, dan analisis.
  • Login Admin dengan password terenkripsi (hash).
  • Keamanan Dasar: Escape HTML (XSS), session PHP, prepared statements untuk query SQL.
  • Responsif (mobile‑friendly) melalui drawer sidebar.

🛠 Teknologi yang Digunakan

Komponen Teknologi
Frontend HTML5, CSS3, JavaScript (ES6+), Leaflet JS, Turf.js
Backend PHP 7.4+ (prosedural)
Database MySQL / MariaDB
Sumber Data Geospasial File GeoJSON dari Overpass Turbo (data OpenStreetMap)
Tile Peta OpenStreetMap (gratis)
Font Inter (Google Fonts)
Ikon Emoji & SVG

💻 Persyaratan Sistem

  • Server lokal: XAMPP, Laragon, atau sejenisnya dengan PHP 7.4+ dan MySQL 5.7+
  • Web browser modern: Google Chrome, Mozilla Firefox, Microsoft Edge
  • Koneksi internet (untuk memuat tile peta dan font)
  • Git (untuk clone repository)

📥 Instalasi (dari Gitea)

1. Clone Repository

git clone https://your-gitea-instance.com/username/Web-SIG-Kemiskinan.git
cd Web-SIG-Kemiskinan

2. Persiapan Database

  1. Buka phpMyAdmin atau client MySQL favorit Anda
  2. Jalankan script schema.sql: 
    source schema.sql;
    Atau copy-paste isi file schema.sql dan jalankan di MySQL client
  3. Tabel berikut akan terbuat otomatis:
    • admins (username: admin, password sudah di-hash)
    • poor_residents (data penduduk miskin)
    • settings (pengaturan aplikasi seperti buffer_radius)

3. Konfigurasi Environment (.env)

  1. Buat file .env di root project:

    cp .env.example .env  # atau buat file baru jika tidak ada .env.example

  2. Edit .env dengan kredensial database Anda:

    DB_HOST=localhost
DB_USER=root
DB_PASS=
DB_NAME=webgis_pontianak

  3. Sesuaikan nilai sesuai konfigurasi MySQL Anda

4. Setup Web Server

Menggunakan Laragon:

  • Copy folder Web-SIG-Kemiskinan ke folder C:\laragon\www\
  • Akses melalui http://webgis-kemiskinan.test (atau sesuai konfigurasi)

Menggunakan XAMPP:

  • Copy folder ke C:\xampp\htdocs\Web-SIG-Kemiskinan\
  • Akses melalui http://localhost/Web-SIG-Kemiskinan

5. Verifikasi Instalasi

  • Buka browser dan akses aplikasi
  • Jika berhasil, Anda akan melihat peta interaktif dengan semua layer
  • Untuk login sebagai admin: Login Admin

📂 Struktur Proyek

Web-SIG-Kemiskinan/
├── config.php                  # Konfigurasi database (pembaca file .env)
├── index.php                   # Halaman utama peta interaktif
├── login.php                   # Halaman login admin
├── logout.php                  # Script logout
├── save_poor.php               # API: Tambah data penduduk miskin
├── edit_poor.php               # API: Edit data penduduk miskin
├── delete_poor.php             # API: Hapus data penduduk miskin
├── update_settings.php         # API: Update pengaturan (buffer radius)
├── schema.sql                  # Script pembuatan database
├── .env                        # File konfigurasi environment (tidak di-commit)
├── README.md                   # Dokumentasi proyek
└── json/                       # Data GeoJSON (sumber data peta)
    ├── Kecamatan_Pontianak.json
    ├── Jalan_Pontianak.json
    ├── Fasilitas_Pontianak.json
    ├── Ibadah_Pontianak.json
    └── ...

Penjelasan File Utama

File Fungsi
config.php Koneksi database dan pembaca file .env
index.php Frontend utama dengan peta Leaflet dan logika JavaScript
login.php Form login dengan autentikasi password hash
save_poor.php AJAX endpoint untuk tambah data (admin only)
edit_poor.php AJAX endpoint untuk edit data (admin only)
delete_poor.php AJAX endpoint untuk hapus data (admin only)
update_settings.php AJAX endpoint untuk update buffer radius
schema.sql SQL script untuk setup database otomatis

🔧 Konfigurasi .env

Buat file .env di root project dengan isi berikut:

# Database Configuration
DB_HOST=localhost
DB_USER=root
DB_PASS=
DB_NAME=webgis_pontianak

Penjelasan:

  • DB_HOST: Host database (biasanya localhost untuk lokal)
  • DB_USER: Username MySQL
  • DB_PASS: Password MySQL (kosong jika tidak ada)
  • DB_NAME: Nama database yang sudah dibuat

Catatan Penting:

  • File .env TIDAK boleh di-commit ke Git (tambahkan ke .gitignore)
  • Setiap developer harus membuat .env mereka sendiri dengan kredensial lokal

🔐 Login Admin

Kredensial Default

Username: admin
Password: admin

Catatan Keamanan:

  • Password di-hash menggunakan password_hash() dengan algoritma bcrypt
  • Ubah password default setelah instalasi pertama kali
  • Password disimpan di tabel admins dengan hash, bukan plaintext

Mengubah Password Admin

  1. Login ke server database

  2. Update tabel admins:

    UPDATE admins SET password = '$2y$10$NEW_HASH_HERE' WHERE username = 'admin';

    Untuk generate hash baru, gunakan script PHP:

    <?php
$password = 'password_baru_anda';
echo password_hash($password, PASSWORD_BCRYPT);
?>

📖 Cara Menggunakan

1. Akses Aplikasi

  • Buka browser dan akses URL aplikasi (sesuai setup Anda)
  • Peta interaktif akan langsung terlihat

2. Navigasi Peta

  • Zoom: Gunakan scroll mouse atau tombol +/- di peta
  • Pan: Klik dan drag peta
  • Tombol Kontrol: Zoom in/out, fullscreen, lokasi saat ini

3. Menampilkan/Menyembunyikan Layer

Menggunakan Tombol Top Bar:

  • 🟣 Buffer: Zona jangkauan bantuan dari rumah ibadah
  • 🟢 Density: Kerapatan penduduk belum terjangkau
  • 🏥 Fasilitas: Fasilitas umum (puskesmas, sekolah, dll)
  • 🛣️ Jalan: Jaringan jalan
  • 🕌 Ibadah: Lokasi rumah ibadah
  • 🟧 Kecamatan: Batas-batas kecamatan

Menggunakan Sidebar:

  • Klik tab 🗂️ Layer untuk melihat daftar semua layer
  • Aktifkan/matikan layer dengan toggle switch

4. Melihat Legenda

  • Klik tab 📋 Legenda di sidebar
  • Legenda menjelaskan warna dan simbol di peta

5. Analisis Data

  • Klik tab 📊 Analisis di sidebar
  • Lihat statistik:
    • Total penduduk miskin
    • Total keluarga
    • Rata-rata penghasilan
    • Distribusi per kecamatan

6. Tabel Data Lengkap

  • Klik tab 📋 Data di sidebar atau tombol Tabel di top bar
  • Lihat daftar lengkap semua penduduk miskin
  • Tabel dapat diurutkan berdasarkan kolom (asc/desc)
  • Admin: Klik pada baris untuk edit/hapus

7. Mengelola Data (Admin Only)

Tambah Data Baru

  1. Klik tombol + Tambah Data (hanya muncul jika login)
  2. Isi form modal:
    • Nama (wajib)
    • NIK
    • Jumlah Keluarga
    • Penghasilan (Rp)
    • RT/RW
    • Koordinat (lat/lng)
  3. Klik Simpan

Menambah Data via Klik Peta (Admin)

  1. Pastikan sudah login
  2. Aktifkan mode "Add Mode" (jika ada) atau klik kanan di peta
  3. Sistem akan membuka form dengan koordinat otomatis terisi
  4. Isi data lainnya dan simpan

Edit Data

  1. Klik pada titik di peta atau baris di tabel
  2. Ubah data di form modal
  3. Klik Update

Hapus Data

  1. Klik pada titik di peta atau baris di tabel
  2. Klik tombol Hapus atau Delete
  3. Konfirmasi penghapusan

8. Mengubah Buffer Radius

  1. Login sebagai admin
  2. Klik tab ⚙️ Pengaturan di sidebar
  3. Ubah nilai Buffer Radius (dalam meter)
  4. Klik Simpan
  5. Peta akan refresh dengan zona buffer yang baru

9. Logout

  • Klik tombol Logout di sidebar
  • Atau tutup sesi browser

�📊 Database Schema

Tabel: admins

CREATE TABLE admins (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

Tabel: poor_residents

CREATE TABLE poor_residents (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    nik VARCHAR(16),
    family_size INT DEFAULT 1,
    income INT DEFAULT 0,
    rt_rw VARCHAR(20),
    lat DOUBLE NOT NULL,
    lng DOUBLE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

Tabel: settings

CREATE TABLE settings (
    setting_key VARCHAR(50) PRIMARY KEY,
    setting_value TEXT NOT NULL
);

📁 Data GeoJSON

Data geospasial disimpan dalam folder json/:

File Keterangan
Kecamatan_Pontianak.json Batas-batas wilayah kecamatan
Jalan_Pontianak.json Jaringan jalan di Pontianak
Fasilitas_Pontianak.json Fasilitas umum (puskesmas, sekolah, dll)
Ibadah_Pontianak.json Lokasi rumah ibadah

Semua file GeoJSON berasal dari Overpass Turbo (query OpenStreetMap):

  • Format: GeoJSON standar dengan geometri dan properties
  • Proyeksi: WGS84 (EPSG:4326)
  • Digunakan untuk rendering layer di Leaflet

🐛 Troubleshooting

Masalah: Peta tidak muncul

  • Solusi: Periksa koneksi internet, pastikan CDN Leaflet dapat diakses
  • Alternatif: Gunakan Leaflet offline atau host sendiri

Masalah: Data tidak muncul di database

  • Solusi: Pastikan file .env benar dan database sudah dibuat via schema.sql
  • Cek koneksi database di phpMyAdmin

Masalah: Login gagal

  • Solusi: Pastikan username admin ada di tabel admins
  • Gunakan password default: admin
  • Jika lupa, reset password via database

Masalah: Layer GeoJSON tidak muncul

  • Solusi: Periksa file GeoJSON di folder json/ ada lengkap
  • Buka browser console (F12) cek error messages
  • Pastikan path file GeoJSON benar di file index.php

Masalah: Sidebar tidak merespons

  • Solusi: Clear cache browser (Ctrl+Shift+Delete)
  • Reload halaman (Ctrl+R atau F5)
  • Cek browser console untuk JavaScript error

🔒 Keamanan

Fitur keamanan yang diimplementasikan:

  1. Authentication: Login dengan session PHP
  2. Authorization: Admin-only endpoints mengecek $_SESSION['admin']
  3. Input Validation: Prepared statements untuk mencegah SQL injection
  4. Password Hashing: Menggunakan password_hash() dengan bcrypt
  5. Output Escaping: Data divalidasi saat output ke HTML
  6. CORS: GET endpoint untuk GeoJSON dapat diakses publik
  7. Session Management: Logout menghapus session

Catatan untuk Production:

  • Gunakan HTTPS
  • Set cookie HttpOnly dan Secure
  • Implementasi CSRF protection
  • Rate limiting untuk login
  • Update PHP dan MySQL secara berkala
  • Backup database reguler

🚀 Pengembangan Lebih Lanjut

Fitur yang Bisa Ditambahkan

  • Export data (CSV, Excel, PDF)
  • Import data dari file bulk
  • Visualisasi grafik statistik
  • Filter data berdasarkan kriteria (RT/RW, range penghasilan, dll)
  • Heatmap real-time dengan WebSocket
  • Mobile app native (React Native, Flutter)
  • Multi-language support
  • Dark mode
  • API REST yang lebih lengkap

Setup Development Environment

# Install dependencies (jika menggunakan npm/composer)
composer install  # untuk PHP dependencies

# Setup local server dengan PHP built-in
cd Web-SIG-Kemiskinan
php -S localhost:8000

# Atau gunakan Laragon/XAMPP untuk development

Git Workflow

# Clone repository
git clone https://git.ifuntanhub.dev/FH/pontianak-poverty-webgis.git

# Buat branch baru untuk feature
git checkout -b feature/nama-fitur

# Commit changes
git add .
git commit -m "feat: tambah fitur baru"

# Push ke remote
git push origin feature/nama-fitur

# Buat Pull Request di Gitea

👥 Kontribusi

Kontribusi sangat diterima! Silahkan:

  1. Fork repository
  2. Buat branch untuk feature/bugfix
  3. Commit dan push
  4. Buat Pull Request

📞 Kontak & Support

Untuk pertanyaan, laporan bug, atau saran:

📝 Catatan Versi

v1.0 (Current)

  • ✅ Peta interaktif dengan 7 layer geospasial
  • ✅ Dashboard dan statistik
  • ✅ CRUD data penduduk miskin
  • ✅ Login admin dengan password hash
  • ✅ Buffer radius dinamis
  • ✅ Responsif mobile
  • ✅ Validasi form dan data

Last Updated: June 3, 2026

Reference in New Issue View Git Blame Copy Permalink