WebGIS-Tugas-Setiap-Pertemuan/SPBU/README.md

# 🗺️ WebGIS SPBU - Sistem Informasi Lokasi Stasiun Pengisian Bahan Bakar Umum

Sistem Informasi Geografis berbasis web untuk memvisualisasikan dan mengelola data Stasiun Pengisian Bahan Bakar Umum (SPBU) di Pontianak. Dibangun menggunakan Leaflet.js sebagai peta interaktif, PHP sebagai backend, dan MySQL sebagai database.

---

## ✨ Fitur Utama

### 🗺️ Visualisasi Peta

* Peta interaktif menggunakan Leaflet.js
* Tile map dari CartoDB Voyager
* Marker kustom untuk setiap SPBU
* Popup informasi detail SPBU
* Zoom dan navigasi yang smooth

### 📊 Dashboard Sidebar

* Statistik total SPBU
* Jumlah SPBU 24 Jam
* Daftar SPBU yang dapat dicari
* Klik untuk zoom ke lokasi SPBU

### 🔐 Sistem Autentikasi

* Login admin dengan session PHP
* Password hashing menggunakan bcrypt
* Protected API endpoints
* Auto-logout saat session expired
* Logout manual dengan konfirmasi

### ✏️ Manajemen Data (Admin Only)

* **Tambah SPBU**: Mode pilih titik di peta → isi form → simpan
* **Edit SPBU**: Update nama, nomor, status, dan koordinat
* **Hapus SPBU**: Hapus dengan konfirmasi
* **Pindah Lokasi**: Drag & drop marker untuk update koordinat
* **Auto-save**: Perubahan langsung tersimpan ke database

### 🎨 Visual Marker

* **SPBU 24 Jam**: Marker berwarna **Biru** (`#3b82f6`)
* **SPBU Terbatas**: Marker berwarna **Hijau** (`#10b981`)
* Animasi pulse pada marker sementara saat memilih lokasi

### 🔍 Pencarian

* Search bar di header dan sidebar mobile
* Filter berdasarkan nama atau nomor SPBU
* Real-time filtering
* Klik hasil untuk zoom ke lokasi

---

## 📁 Struktur Project

```text
SPBU/
│
├── index.php                          # Main application file
│
├── config/
│   └── database.php                   # Database configuration & connection
│
├── api/
│   ├── get_spbu.php                   # GET - Fetch all SPBU data
│   ├── add_spbu.php                   # POST - Add new SPBU
│   ├── update_spbu.php                # PUT - Update SPBU data
│   ├── update_position.php            # PUT - Update marker position only
│   ├── delete_spbu.php                # DELETE - Remove SPBU
│   ├── login.php                      # POST - Admin authentication
│   ├── logout.php                     # GET - Destroy session
│   └── check_session.php              # GET - Check admin session status
│
├── database/
│   └── spbu_db.sql                    # Database schema & sample data
│
└── README.md                          # Project documentation
```

---

## 🗄️ Database Schema

### Tabel: `admin`

| Kolom      | Tipe         | Deskripsi                |
| ---------- | ------------ | ------------------------ |
| id         | INT (PK)     | Auto-increment ID        |
| username   | VARCHAR(50)  | Username admin (unique)  |
| password   | VARCHAR(255) | Password (bcrypt hashed) |
| created_at | TIMESTAMP    | Waktu pembuatan akun     |

### Tabel: `spbu`

| Kolom      | Tipe          | Deskripsi                    |
| ---------- | ------------- | ---------------------------- |
| id         | INT (PK)      | Auto-increment ID            |
| nama       | VARCHAR(200)  | Nama SPBU                    |
| no_spbu    | VARCHAR(50)   | Nomor registrasi SPBU        |
| status     | ENUM          | '24jam' atau 'terbatas'      |
| latitude   | DECIMAL(10,7) | Koordinat latitude           |
| longitude  | DECIMAL(10,7) | Koordinat longitude          |
| created_at | TIMESTAMP     | Waktu pembuatan data         |
| updated_at | TIMESTAMP     | Waktu update terakhir (auto) |

---

## 🚀 Instalasi

### Prasyarat

* **Web Server**: Apache 2.4+ atau Nginx
* **PHP**: Versi 7.4 atau lebih tinggi
* **MySQL**: Versi 5.7 atau lebih tinggi
* **PHP Extensions**: PDO, PDO_MySQL, JSON, Session

### Langkah Instalasi

#### 1. Clone atau Download Project

```bash
git clone https://git.ifuntanhub.dev/FH/WebGIS-Tugas-Setiap-Pertemuan.git
cd SPBU
```

Atau download ZIP dan extract ke folder web server Anda (misal: `htdocs/SPBU`).

#### 2. Setup Database

```bash
# Login ke MySQL
mysql -u root -p

# Import database
source /path/to/database/spbu_db.sql
```

Atau melalui phpMyAdmin:

* Buat database baru: `spbu_db`
* Import file `database/spbu_db.sql`

#### 3. Konfigurasi Database

Edit file `config/database.php`:

```php
class Database {
    private $host = "localhost";        // Host database
    private $db_name = "spbu_db";       // Nama database
    private $username = "root";         // Username MySQL
    private $password = "";             // Password MySQL
    // ...
}
```

#### 4. Set Folder Permissions

```bash
# Pastikan web server bisa membaca semua file
chmod -R 755 webgis-spbu/
```

#### 5. Akses Aplikasi

Buka browser dan akses:

```text
http://localhost/SPBU/
```

---

## 🔑 Login Admin

### Default Credentials

* Username: `admin`
* Password: `admin123`

⚠️ **Keamanan:** Ganti password default segera setelah instalasi!

Gunakan password hash generator bcrypt untuk membuat password baru.

---

## 📖 Panduan Penggunaan

### Mode Normal (Public)

* Melihat SPBU: Buka peta, semua marker SPBU akan ditampilkan
* Info Detail: Klik marker untuk melihat informasi SPBU (nama, nomor, status, koordinat)
* Pencarian: Gunakan search bar di header untuk mencari SPBU
* Navigasi: Klik item di sidebar untuk zoom ke lokasi SPBU
* Statistik: Lihat total SPBU dan jumlah SPBU 24 jam di sidebar

### Mode Admin

#### Login

Klik tombol "Login" di pojok kanan atas → masukkan kredensial

#### Tambah SPBU

* Klik tombol "Tambah" di sidebar
* Akan muncul indikator "Mode Pilih Titik"
* Klik pada peta untuk memilih lokasi
* Isi form yang muncul (nama, nomor, status)
* Klik "Simpan"

#### Edit SPBU

* Klik marker SPBU
* Klik tombol "Edit" di popup
* Ubah data yang diperlukan
* Klik "Simpan"

#### Hapus SPBU

* Klik marker SPBU
* Klik tombol "Hapus" di popup
* Konfirmasi penghapusan

#### Pindah Lokasi

* Tahan (hold) marker yang ingin dipindahkan
* Geser (drag) ke lokasi baru
* Lepaskan (drop), posisi akan auto-update

#### Logout

Klik ikon logout di samping toggle admin

---

## 🎨 Kustomisasi

### Mengubah Lokasi Awal Peta

Edit di `index.php` pada fungsi `initMap()`:

```javascript
// Format: [latitude, longitude], zoomLevel
map = L.map('map', { zoomControl: true }).setView([-0.0263, 109.3425], 13);
```

### Mengubah Warna Marker

Edit di `index.php` pada fungsi `createSpbuIcon()`:

```javascript
// Warna untuk 24 jam (biru) dan terbatas (hijau)
const color = status === '24jam' ? '#3b82f6' : '#10b981';
```

### Mengubah Tile Map

Edit di `index.php` pada fungsi `initMap()`:

```javascript
// Ganti URL tile provider
L.tileLayer('URL_TILE_PROVIDER', { ... }).addTo(map);
```

### Menambah Data Contoh

Edit file `database/spbu_db.sql` dan tambahkan INSERT statements:

```sql
INSERT INTO spbu (nama, no_spbu, status, latitude, longitude) VALUES
('SPBU Contoh', '00.000.00', '24jam', -0.0263, 109.3425);
```

---

## 🔒 Keamanan

Aplikasi ini memiliki beberapa lapisan keamanan:

* Session PHP: Autentikasi admin menggunakan session
* Password Hashing: Password disimpan menggunakan bcrypt
* API Protection: Setiap endpoint admin memeriksa session
* Input Validation: Validasi input di client dan server side
* CORS Headers: Protected API access

### ⚠️ Rekomendasi Keamanan Tambahan

* Implementasi CSRF token
* Gunakan HTTPS di production
* Rate limiting untuk API endpoints
* Backup database secara berkala

---

## 🛠️ Teknologi yang Digunakan

### Frontend

* HTML5/CSS3 - Struktur dan styling
* Tailwind CSS - Utility-first CSS framework
* JavaScript (ES6+) - Interaktivitas dan logika client
* Leaflet.js 1.9.4 - Library peta interaktif
* CartoDB Voyager - Basemap tiles

### Backend

* PHP 7.4+ - Server-side scripting
* PDO - Database abstraction layer
* MySQL - Relational database

### Libraries & Plugins

* Fontsource Inter - Font keluarga Inter
* SVG Icons - Heroicons-style icons

---

## 🐛 Troubleshooting

### 1. Database Connection Error

```text
Solusi:
- Cek kredensial di config/database.php
- Pastikan MySQL service running
- Cek nama database sudah benar
```

### 2. Session Tidak Berfungsi

```text
Solusi:
- Pastikan folder session PHP writable
- Cek konfigurasi session di php.ini
- Clear browser cache
```

### 3. Marker Tidak Muncul

```text
Solusi:
- Cek console browser untuk error JavaScript
- Pastikan API get_spbu.php berfungsi
- Cek data di database
```

### 4. Tidak Bisa Login

```text
Solusi:
- Cek username & password default
- Reset password dengan bcrypt hash generator
- Cek session PHP berfungsi
```

### 5. Peta Tidak Loading

```text
Solusi:
- Cek koneksi internet (untuk tile map)
- Cek tidak ada error JavaScript
- Pastikan Leaflet.js loaded dengan benar
```

---

## 📊 API Documentation

### Endpoints

| Method | Endpoint                 | Auth | Deskripsi                   |
| ------ | ------------------------ | ---- | --------------------------- |
| GET    | /api/get_spbu.php        | No   | Mendapatkan semua data SPBU |
| POST   | /api/add_spbu.php        | Yes  | Menambah SPBU baru          |
| PUT    | /api/update_spbu.php     | Yes  | Mengupdate data SPBU        |
| PUT    | /api/update_position.php | Yes  | Update posisi marker saja   |
| DELETE | /api/delete_spbu.php     | Yes  | Menghapus SPBU              |
| POST   | /api/login.php           | No   | Login admin                 |
| GET    | /api/logout.php          | Yes  | Logout admin                |
| GET    | /api/check_session.php   | No   | Cek status session          |

### Contoh Request/Response

#### Tambah SPBU

```json
POST /api/add_spbu.php
Content-Type: application/json

{
  "nama": "SPBU Contoh",
  "no_spbu": "00.000.00",
  "status": "24jam",
  "latitude": -0.0263,
  "longitude": 109.3425
}
```

Response 201:

```json
{
  "message": "SPBU berhasil ditambahkan",
  "id": 4
}
```

---

## 🔄 Changelog

### Version 1.0.0 (2024)

* ✨ Initial release
* 🗺️ Peta interaktif dengan Leaflet.js
* 🔐 Sistem login admin
* ✏️ CRUD operasi untuk data SPBU
* 🎨 Marker berbeda untuk status SPBU
* 🔍 Pencarian dan navigasi
* 📊 Dashboard statistik
* 🗄️ MySQL database integration
* 🔒 Basic security implementation