# 🗺️ 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.