WebGIS-PovertyMapping/README.md

WebGIS Pontianak

WebGIS Pontianak adalah proyek Sistem Informasi Geografis berbasis web untuk menampilkan dan mengelola data spasial di wilayah Pontianak. Proyek ini berisi tiga modul utama: WebGIS geometri dasar, WebGIS lokasi SPBU, dan WebGIS sosial untuk pemetaan masjid serta penduduk miskin.

Aplikasi dibuat menggunakan PHP native, MySQL, JavaScript, Leaflet.js, Leaflet Draw, dan CSS vanilla. Proyek ini cocok dijalankan di lingkungan lokal seperti XAMPP.

Fitur Utama

• Dashboard utama untuk memilih modul WebGIS.
• Peta interaktif berbasis Leaflet.
• CRUD data spasial melalui marker, polyline, dan polygon.
• Penyimpanan data ke database MySQL.
• Panel admin untuk pengelolaan data sosial.
• Analisis radius layanan masjid terhadap penduduk miskin.
• Visualisasi heatmap dan indikator blind spot pada modul sosial.

Modul Aplikasi

1. WebGIS Geometri

Lokasi publik: geometri/index.php
Lokasi admin: geometri/admin.php

Modul ini digunakan untuk latihan dan pengelolaan data geometri dasar.

Fitur publik:

• Menampilkan data point, jalan/polyline, dan polygon/parsil.
• Melihat detail data melalui popup peta.

Fitur admin:

• Menampilkan data point, jalan/polyline, dan polygon/parsil.
• Menambah point dengan nama dan kode point.
• Menambah jalan dengan nama dan klasifikasi.
• Menambah polygon/parsil dengan nama area dan status kepemilikan.
• Mengedit bentuk jalan dan polygon langsung dari peta.
• Menghapus data melalui tools Leaflet Draw.

2. WebGIS SPBU

Lokasi publik: spbu/index.php
Lokasi admin: spbu/admin.php

Modul ini digunakan untuk memetakan lokasi SPBU di Pontianak.

Fitur publik:

• Menampilkan titik SPBU.
• Membedakan SPBU 24 jam dan tidak 24 jam.
• Toggle layer untuk menampilkan/menyembunyikan SPBU berdasarkan status.

Fitur admin:

• Login admin.
• Menampilkan titik SPBU.
• Membedakan SPBU 24 jam dan tidak 24 jam.
• Menambah titik SPBU dari peta.
• Mengisi nama SPBU, nomor SPBU, dan status operasional.
• Menghapus titik SPBU.
• Toggle layer untuk menampilkan/menyembunyikan SPBU berdasarkan status.

3. WebGIS Sosial

Lokasi publik: sosial/index.php
Lokasi admin: sosial/admin.php

Modul ini digunakan untuk pemetaan sosial, khususnya lokasi masjid dan penduduk miskin. Sistem menghitung apakah penduduk miskin berada di dalam radius layanan masjid atau masuk kategori blind spot.

Fitur publik:

• Menampilkan lokasi masjid dan penduduk miskin.
• Menampilkan radius layanan masjid.
• Menampilkan status penduduk miskin, apakah berada dalam jangkauan masjid atau blind spot.
• Menampilkan heatmap kepadatan penduduk miskin.
• Menampilkan statistik sosial dan rekomendasi jenis bantuan.

Fitur admin:

• Login admin.
• Menambah titik masjid.
• Menambah titik penduduk miskin.
• Mengatur radius layanan masjid dari 100 sampai 5000 meter.
• Mengubah jenis bantuan yang direkomendasikan.
• Menghapus data masjid atau penduduk miskin.

Teknologi yang Digunakan

• HTML5
• CSS3 vanilla
• JavaScript vanilla
• PHP native
• MySQL
• Leaflet.js
• Leaflet Draw
• Leaflet Heat
• Leaflet GeometryUtil
• OpenStreetMap tile layer
• Nominatim reverse geocoding untuk membantu mengambil alamat penduduk

Struktur Folder

WebGIS2026/
├── css/
│   └── style.css
├── geometri/
│   └── index.php
├── js/
│   ├── draw_geometri.js
│   ├── draw_sosial.js
│   ├── draw_sosial_public.js
│   ├── draw_spbu_point.js
│   └── ...
├── php/
│   ├── db.php
│   ├── insert.php
│   ├── insert_line.php
│   ├── insert_masjid.php
│   ├── insert_penduduk.php
│   ├── insert_polygon.php
│   ├── show_geometri.php
│   ├── show_sosial.php
│   ├── show_spbu.php
│   ├── update_masjid.php
│   ├── update_penduduk.php
│   └── delete.php
├── sosial/
│   ├── index.php
│   ├── login.php
│   ├── admin.php
│   └── logout.php
├── spbu/
│   └── index.php
├── index.php
└── README.md

Persyaratan

Pastikan perangkat sudah memiliki:

• XAMPP atau web server lokal lain yang mendukung PHP dan MySQL.
• PHP 7.4 atau lebih baru.
• MySQL/MariaDB.
• Browser modern.
• Koneksi internet untuk memuat library CDN Leaflet, Google Fonts, OpenStreetMap, dan Nominatim.

Instalasi

1. Clone repository ini atau salin folder proyek ke direktori htdocs.

   git clone <url-repository>
   

2. Jika menggunakan XAMPP, letakkan folder proyek di:

   C:/xampp/htdocs/WebGIS2026
   

3. Jalankan Apache dan MySQL dari XAMPP Control Panel.

4. Siapkan konfigurasi database melalui environment variable. Contoh variabel tersedia di .env.example.

   DB_HOST=localhost
   DB_PORT=3306
   DB_DATABASE=webgis_spbu
   DB_USERNAME=root
   DB_PASSWORD=
   

   Pada Coolify, isi variabel tersebut dari menu Environment Variables project. Jangan menulis password database langsung di php/db.php.

5. Jalankan migration database yang sudah disediakan.

   SOURCE migrations/001_init_database.sql;
   

   File migration tersebut akan membuat database webgis_spbu, seluruh tabel aplikasi, dan akun default.

6. Buka aplikasi melalui browser:

   http://localhost/WebGIS2026/
   

Catatan Deploy Coolify

Untuk deploy di Coolify, project ini dapat dijalankan sebagai aplikasi PHP native. Pastikan project memiliki service MySQL/MariaDB, lalu set environment variable berikut pada aplikasi:

DB_HOST=<host service database>
DB_PORT=3306
DB_DATABASE=webgis_spbu
DB_USERNAME=<username database>
DB_PASSWORD=<password database>

Jika service database di Coolify memakai nama variabel MYSQL_*, aplikasi juga mendukung:

MYSQL_HOST=<host service database>
MYSQL_PORT=3306
MYSQL_DATABASE=webgis_spbu
MYSQL_USER=<username database>
MYSQL_PASSWORD=<password database>

Docker tidak wajib jika Coolify/Nixpacks berhasil mendeteksi aplikasi PHP dan menyediakan web server PHP. Namun repository ini sudah menyediakan Dockerfile, sehingga mode deployment paling stabil di Coolify adalah memilih build dari Dockerfile. Dockerfile tersebut memakai php:8.2-apache dan memasang ekstensi mysqli.

Menjalankan Dengan Docker Compose

Repository ini juga menyediakan docker-compose.yml untuk menjalankan seluruh service secara lokal:

• app: aplikasi PHP Apache
• db: MySQL 8.4
• phpmyadmin: panel database

Jalankan:

docker compose up -d --build

URL akses:

Aplikasi:   http://localhost:8080
phpMyAdmin: http://localhost:8081

Kredensial database default Docker Compose:

Host: db
Port internal: 3306
Port host/lokal: 3307
Database: webgis_spbu
Username: webgis_user
Password: webgis_password
Root password: root_password

File migration di folder migrations/ akan otomatis dijalankan oleh MySQL saat volume database pertama kali dibuat. File 001_init_database.sql membuat struktur tabel dan akun login, sedangkan 002_seed_sample_data.sql mengisi data contoh untuk Docker Compose.

Data contoh yang disediakan:

• 3 point geometri
• 3 polyline jalan
• 3 polygon/parsil
• 7 SPBU, terdiri dari 5 SPBU 24 jam dan 2 tidak 24 jam
• 3 masjid dengan radius layanan
• 14 data penduduk miskin, termasuk minimal 1 blind spot
• akun admin / password dan publik / password

Jika migration atau seed berubah dan ingin mengulang dari awal, hentikan container lalu hapus volume database:

docker compose down -v
docker compose up -d --build

Catatan: perintah down -v akan menghapus data database container.

Cara Penggunaan

Membuka Dashboard Utama

1. Buka http://localhost/WebGIS2026/.
2. Pilih salah satu modul:
   • WebGIS Geometri
   • WebGIS SPBU
   • WebGIS Sosial

Menggunakan Modul Geometri

1. Buka http://localhost/WebGIS2026/geometri/.
2. Gunakan toolbar gambar di sisi peta.
3. Pilih marker untuk menambah point.
4. Pilih polyline untuk menambah jalan.
5. Pilih polygon untuk menambah parsil/area.
6. Isi form yang muncul pada popup.
7. Klik tombol simpan.
8. Untuk mengedit jalan atau polygon, gunakan tombol edit pada toolbar Leaflet Draw.
9. Untuk menghapus data, gunakan tombol delete pada toolbar atau tombol hapus pada popup jika tersedia.

Menggunakan Modul SPBU

1. Buka http://localhost/WebGIS2026/spbu/.
2. Klik tombol marker pada toolbar peta.
3. Klik lokasi SPBU pada peta.
4. Isi data:
   • Nama SPBU
   • Nomor SPBU
   • Status operasional: 24 Jam atau Tidak 24 Jam
5. Klik simpan.
6. Gunakan tombol layer 24 Jam dan Tidak 24 Jam untuk memfilter tampilan.
7. Klik marker SPBU untuk melihat detail atau menghapus data.

Login Admin

1. Buka salah satu dashboard publik:

   • http://localhost/WebGIS2026/geometri/
   • http://localhost/WebGIS2026/spbu/
   • http://localhost/WebGIS2026/sosial/

2. Klik tombol Admin Login.

3. Masukkan salah satu akun default:

   Role Admin
   Username: admin
   Password: password
   
   Role Publik
   Username: publik
   Password: password
   

4. Akun admin akan diarahkan ke panel admin sesuai project yang sedang dibuka. Akun publik diarahkan ke dashboard publik. Dashboard publik juga dapat diakses tanpa login.

Catatan: akun default berasal dari tabel users. Ubah atau tambah akun melalui database, bukan dari sosial/login.php.

Menambah Data Masjid

1. Login ke panel admin sosial.
2. Pilih mode Tambah Masjid.
3. Klik lokasi masjid pada peta.
4. Isi nama masjid dan PIC atau penanggung jawab.
5. Atur radius deteksi menggunakan slider.
6. Klik simpan.
7. Sistem akan menampilkan marker masjid dan lingkaran radius layanan.

Menambah Data Penduduk Miskin

1. Login ke panel admin sosial.
2. Pilih mode Tambah Pend. Miskin.
3. Klik lokasi penduduk pada peta.
4. Isi data:
   • Nama kepala keluarga
   • Jumlah anggota keluarga
   • Alamat
   • Penghasilan
   • Kondisi rumah
   • Sumber air
5. Klik simpan.
6. Sistem akan menghitung skor kerentanan dan rekomendasi jenis bantuan.
7. Jika penduduk berada di dalam radius masjid, marker akan ditandai sebagai terjangkau. Jika tidak, penduduk berisiko tinggi dapat masuk ke daftar blind spot.

Mengubah Radius Layanan Masjid

1. Login ke panel admin sosial.
2. Klik marker masjid.
3. Geser slider radius layanan.
4. Klik Simpan Radius.
5. Sistem akan menghitung ulang status jangkauan penduduk miskin secara otomatis.

Mengubah Jenis Bantuan

1. Login ke panel admin sosial.
2. Klik marker penduduk miskin.
3. Pilih jenis bantuan dari dropdown.
4. Klik Simpan Bantuan.

Logout Admin

Klik tombol Keluar pada panel admin sosial untuk mengakhiri sesi admin.

Alur Singkat Sistem Sosial

1. Admin memasukkan data masjid beserta radius layanan.
2. Admin memasukkan data penduduk miskin.
3. Sistem menghitung jarak penduduk miskin terhadap masjid terdekat.
4. Penduduk yang berada dalam radius masjid dianggap masuk cakupan sosial masjid.
5. Penduduk yang berada di luar radius, terutama dengan skor kerentanan tinggi, ditandai sebagai blind spot.
6. Data ini dapat digunakan sebagai dasar prioritas bantuan, distribusi program sosial, dan evaluasi wilayah yang belum terjangkau.

Endpoint PHP

Beberapa endpoint utama yang digunakan aplikasi:

Endpoint	Fungsi
php/show_geometri.php	Mengambil data point, jalan, dan parsil
php/show_spbu.php	Mengambil data SPBU
php/show_sosial.php	Mengambil data masjid dan penduduk miskin
php/insert_point.php	Menambah data point geometri
php/insert.php	Menambah data SPBU
php/insert_line.php	Menambah data jalan
php/insert_polygon.php	Menambah data parsil
php/insert_masjid.php	Menambah data masjid
php/insert_penduduk.php	Menambah data penduduk miskin
php/update_line.php	Mengubah geometri jalan
php/update_polygon.php	Mengubah geometri parsil
php/update_masjid.php	Mengubah radius layanan masjid
php/update_penduduk.php	Mengubah jenis bantuan penduduk
php/delete.php	Menghapus data berdasarkan tipe

Catatan Keamanan

• Jangan gunakan kredensial admin default di server publik.
• Jangan menyimpan password database asli di repository publik.
• Pertimbangkan menggunakan file konfigurasi lokal seperti .env jika proyek dikembangkan lebih lanjut.
• Tambahkan validasi session untuk seluruh endpoint admin jika aplikasi akan dipakai di production.
• Batasi akses database sesuai kebutuhan aplikasi.

Rencana Pengembangan

• Import/export data GeoJSON.
• Filter data berdasarkan kecamatan atau kelurahan.
• Pemisahan akses admin dan publik untuk seluruh modul WebGIS.
• Upload dokumentasi/foto penduduk atau masjid.
• Dashboard laporan bantuan sosial.
• Integrasi data batas administrasi.
• Autentikasi admin berbasis database.

Lisensi

Proyek ini dibuat untuk kebutuhan pembelajaran dan pengembangan WebGIS. Silakan sesuaikan lisensi sesuai kebutuhan repository.