367 lines
11 KiB
Markdown
367 lines
11 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: `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.
|