423 lines
13 KiB
Markdown
423 lines
13 KiB
Markdown
# 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
|
|
|
|
```text
|
|
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`.
|
|
|
|
```bash
|
|
git clone <url-repository>
|
|
```
|
|
|
|
2. Jika menggunakan XAMPP, letakkan folder proyek di:
|
|
|
|
```text
|
|
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`.
|
|
|
|
```text
|
|
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.
|
|
|
|
```sql
|
|
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:
|
|
|
|
```text
|
|
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:
|
|
|
|
```text
|
|
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:
|
|
|
|
```text
|
|
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:
|
|
|
|
```bash
|
|
docker compose up -d --build
|
|
```
|
|
|
|
URL akses:
|
|
|
|
```text
|
|
Aplikasi: http://localhost:8080
|
|
phpMyAdmin: http://localhost:8081
|
|
```
|
|
|
|
Kredensial database default Docker Compose:
|
|
|
|
```text
|
|
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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```text
|
|
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.
|