cindy🗺️ WebGIS - Sistem Informasi SPBU Kota Pontianak
Aplikasi WebGIS untuk mengelola dan memvisualisasikan data SPBU, Jaringan Jalan, dan Parsil Tanah di Kota Pontianak secara interaktif.
✨ Fitur Utama
📍 Manajemen SPBU
- Tambah, edit, hapus data SPBU
- Drag & drop marker untuk update posisi
- Kategorisasi (24 jam / Tidak 24 jam)
- Informasi kontak WhatsApp
🛣️ Manajemen Jalan
- Gambar polyline langsung di peta
- Klasifikasi status jalan (Nasional/Provinsi/Kabupaten)
- Hitung panjang jalan otomatis
- Edit dan hapus data jalan
🏠 Manajemen Parsil Tanah
- Gambar polygon untuk bidang tanah
- Klasifikasi status sertifikat (SHM/HGB/HGU/HP)
- Hitung luas tanah otomatis
- Edit dan hapus data parsil
🗺️ Fitur Peta
- Peta interaktif dengan Leaflet.js
- Multiple layer control
- Legend interaktif
- Search dan filter data
- Zoom to feature
⚙️ Layer Control & Tampilan
- Layer Control Terpisah - SPBU 24 jam dan Non 24 jam beda layer
- Tampilan Modern - UI lebih elegan dengan font DM Sans
- Popup Koordinat - Menampilkan latitude/longitude lengkap
- Loading State - Animasi loading yang halus
🛠️ Teknologi yang Digunakan
| Teknologi | Kegunaan |
|---|---|
| PHP 7.4+ | Backend API & koneksi database |
| MySQL | Database penyimpanan data |
| Leaflet.js | Library peta interaktif |
| Turf.js | Kalkulasi geometri |
| Leaflet Draw | Drawing tools |
| Leaflet Extra Markers | Marker kustom |
| HTML5/CSS3/JS | Frontend |
📁 Struktur Folder
🚀 Instalasi
Prasyarat
- XAMPP / Laragon / MAMP
- PHP ≥ 7.4
- MySQL ≥ 5.7
- Browser modern
Langkah Instalasi
1. Clone Repository
git clone https://github.com/username/SPBU.git
2. Pindahkan ke htdocs
C:/xampp/htdocs/webgis/SPBU/
3. Import Database
phpMyAdmin
- http://localhost/phpmyadmin
- Buat database:
webgis - Import
webgis.sql
Command Line
mysql -u root -p
CREATE DATABASE webgis;
USE webgis;
SOURCE webgis.sql;
4. Konfigurasi Database
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'webgis';
$conn = new mysqli($host, $user, $password, $database);
if ($conn->connect_error) {
die(json_encode(['error' => true, 'message' => $conn->connect_error]));
}
?>
5. Jalankan Aplikasi
http://localhost/webgis/01SPBU/
📖 Cara Penggunaan
Mode Navigasi
- Klik objek untuk melihat detail
- Klik list untuk zoom lokasi
Tambah SPBU
- Klik tombol SPBU
- Klik peta
- Isi form
- Simpan
Tambah Jalan
- Klik Jalan
- Klik titik di peta
- Double click selesai
- Simpan
Tambah Parsil
- Klik Parsil
- Klik titik
- Selesaikan polygon
- Simpan
Edit & Hapus
- Edit: tombol ✏️
- Hapus: tombol 🗑️
🔧 API Endpoints
SPBU
| Endpoint | Method |
|---|---|
| /SPBU/ambil.php | GET |
| /SPBU/simpan.php | POST |
| /SPBU/hapus.php | POST |
| /SPBU/update_lokasi.php | POST |
| /SPBU/update_spbu_info.php | POST |
Jalan
| Endpoint | Method |
|---|---|
| /Jalan/ambil_jalan.php | GET |
| /Jalan/simpan_jalan.php | POST |
| /Jalan/hapus_jalan.php | POST |
Parsil
| Endpoint | Method |
|---|---|
| /Parsil/ambil_parsil.php | GET |
| /Parsil/simpan_parsil.php | POST |
| /Parsil/hapus_parsil.php | POST |
📊 Database Structure
spbu
| Field | Type |
|---|---|
| id | INT |
| nama | VARCHAR |
| nomor | VARCHAR |
| kategori | ENUM |
| latitude | DECIMAL |
| longitude | DECIMAL |
jalan
| Field | Type |
|---|---|
| id | INT |
| nama | VARCHAR |
| status | VARCHAR |
| panjang | DOUBLE |
| geojson | LONGTEXT |
parsil_tanah
| Field | Type |
|---|---|
| id | INT |
| nama | VARCHAR |
| status | VARCHAR |
| luas | DOUBLE |
| geojson | LONGTEXT |
🐛 Troubleshooting
Data tidak muncul
require_once __DIR__ . '/../koneksi.php';
Path error
- Gunakan
__DIR__
Peta tidak muncul
- Cek internet & console
Data gagal simpan
- Cek DB & permission
👥 Kontributor
- Cindy Dyra Islamay — Fullstack Developer
📝 Lisensi
MIT License
📞 Kontak
- Email: [d1041231045@student.untan.ac.id]
⭐ Jika project ini membantu, beri bintang di repository.