cindy
280 lines
5.1 KiB
Markdown
280 lines
5.1 KiB
Markdown
# 🗺️ WebGIS - Sistem Informasi SPBU Kota Pontianak
|
|
|
|
[](https://php.net)
|
|
[](https://mysql.com)
|
|
[](https://leafletjs.com)
|
|
[](LICENSE)
|
|
|
|
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
|
|
|
|
```bash
|
|
git clone https://github.com/username/SPBU.git
|
|
```
|
|
|
|
#### 2. Pindahkan ke htdocs
|
|
|
|
```bash
|
|
C:/xampp/htdocs/webgis/SPBU/
|
|
```
|
|
|
|
#### 3. Import Database
|
|
|
|
**phpMyAdmin**
|
|
|
|
* http://localhost/phpmyadmin
|
|
* Buat database: `webgis`
|
|
* Import `webgis.sql`
|
|
|
|
**Command Line**
|
|
|
|
```bash
|
|
mysql -u root -p
|
|
CREATE DATABASE webgis;
|
|
USE webgis;
|
|
SOURCE webgis.sql;
|
|
```
|
|
|
|
#### 4. Konfigurasi Database
|
|
|
|
```php
|
|
<?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
|
|
|
|
1. Klik tombol SPBU
|
|
2. Klik peta
|
|
3. Isi form
|
|
4. Simpan
|
|
|
|
### Tambah Jalan
|
|
|
|
1. Klik Jalan
|
|
2. Klik titik di peta
|
|
3. Double click selesai
|
|
4. Simpan
|
|
|
|
### Tambah Parsil
|
|
|
|
1. Klik Parsil
|
|
2. Klik titik
|
|
3. Selesaikan polygon
|
|
4. 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**
|
|
|
|
```php
|
|
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. |