# 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.