initial commit

2026-06-10 19:20:46 +07:00
commit ec94359f9a
21 changed files with 23023 additions and 0 deletions
@@ -0,0 +1,280 @@
+# 🗺️ WebGIS - Sistem Informasi SPBU Kota Pontianak
+
+[![PHP Version](https://img.shields.io/badge/PHP-7.4+-blue.svg)](https://php.net)
+[![MySQL](https://img.shields.io/badge/MySQL-5.7+-orange.svg)](https://mysql.com)
+[![Leaflet](https://img.shields.io/badge/Leaflet-1.9.4-green.svg)](https://leafletjs.com)
+[![License](https://img.shields.io/badge/License-MIT-red.svg)](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.