# WebGIS

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: `geometri/index.php`

Modul ini digunakan untuk latihan dan pengelolaan data geometri dasar.

Fitur:

- 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: `spbu/index.php`

Modul ini digunakan untuk memetakan lokasi SPBU di Pontianak.

Fitur:

- 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. Buat database MySQL, contoh:

   ```sql
   CREATE DATABASE webgis_spbu;
   ```

5. Sesuaikan konfigurasi koneksi database pada file `php/db.php`.

   ```php
   $conn = new mysqli("localhost", "root", "password_database", "webgis_spbu");
   ```

6. Buat tabel yang dibutuhkan. Jika belum memiliki file `.sql`, gunakan struktur dasar berikut sebagai acuan.

   ```sql
   CREATE TABLE spbu (
       id INT AUTO_INCREMENT PRIMARY KEY,
       nama VARCHAR(150) NOT NULL,
       no_spbu VARCHAR(100) NOT NULL,
       status VARCHAR(50) NOT NULL,
       latitude DOUBLE NOT NULL,
       longitude DOUBLE NOT NULL
   );

   CREATE TABLE jalan (
       id INT AUTO_INCREMENT PRIMARY KEY,
       nama VARCHAR(150) NOT NULL,
       status VARCHAR(50) NOT NULL,
       panjang DOUBLE DEFAULT 0,
       geom LONGTEXT NOT NULL
   );

   CREATE TABLE parsil (
       id INT AUTO_INCREMENT PRIMARY KEY,
       nama VARCHAR(150) NOT NULL,
       status VARCHAR(50) NOT NULL,
       luas DOUBLE DEFAULT 0,
       geom LONGTEXT NOT NULL
   );

   CREATE TABLE masjid (
       id INT AUTO_INCREMENT PRIMARY KEY,
       nama VARCHAR(150) NOT NULL,
       pic VARCHAR(150) NOT NULL,
       radius DOUBLE DEFAULT 500,
       latitude DOUBLE NOT NULL,
       longitude DOUBLE NOT NULL,
       radius_layanan DOUBLE DEFAULT 500
   );

   CREATE TABLE penduduk_miskin (
       id INT AUTO_INCREMENT PRIMARY KEY,
       nama_kk VARCHAR(150) NOT NULL,
       jumlah_anggota INT DEFAULT 1,
       alamat TEXT NOT NULL,
       latitude DOUBLE NOT NULL,
       longitude DOUBLE NOT NULL,
       penghasilan VARCHAR(50),
       kondisi_rumah VARCHAR(50),
       sumber_air VARCHAR(50),
       skor_kerentanan DOUBLE DEFAULT 0,
       jenis_bantuan VARCHAR(100)
   );
   ```

7. Buka aplikasi melalui browser:

   ```text
   http://localhost/WebGIS2026/
   ```

## 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 Modul Sosial

1. Buka `http://localhost/WebGIS2026/sosial/`.
2. Klik tombol `Admin Login`.
3. Masukkan akun default:

   ```text
   Username: admin
   Password: admin123
   ```

4. Setelah berhasil login, sistem akan membuka panel admin di `sosial/admin.php`.

Catatan: ubah kredensial default di `sosial/login.php` sebelum proyek digunakan di lingkungan publik.

### 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.php` | Menambah data SPBU/point |
| `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.
- Role user untuk admin, petugas, dan viewer.
- 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.