Project UAS Sistem Informasi Geografis (SIG)

2026-06-08 20:24:54 +07:00
commit c6087ed7dd
33 changed files with 4549 additions and 0 deletions
@@ -0,0 +1,366 @@
+# 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.