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

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

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

# 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:

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

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

5. Akses Aplikasi

Buka browser dan akses:

http://localhost/SPBU/

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

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():

// 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():

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

Mengubah Tile Map

Edit di index.php pada fungsi initMap():

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

Menambah Data Contoh

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

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

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

2. Session Tidak Berfungsi

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

3. Marker Tidak Muncul

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

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

5. Peta Tidak Loading

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

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:

{
  "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

README.md

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

✨ Fitur Utama

🗺️ Visualisasi Peta

📊 Dashboard Sidebar

🔐 Sistem Autentikasi

✏️ Manajemen Data (Admin Only)

🎨 Visual Marker

🔍 Pencarian

📁 Struktur Project

🗄️ Database Schema

Tabel: admin

Tabel: spbu

🚀 Instalasi

Prasyarat

Langkah Instalasi

1. Clone atau Download Project

2. Setup Database

3. Konfigurasi Database

4. Set Folder Permissions

5. Akses Aplikasi

🔑 Login Admin

Default Credentials

📖 Panduan Penggunaan

Mode Normal (Public)

Mode Admin

Login

Tambah SPBU

Edit SPBU

Hapus SPBU

Pindah Lokasi

Logout

🎨 Kustomisasi

Mengubah Lokasi Awal Peta

Mengubah Warna Marker

Mengubah Tile Map

Menambah Data Contoh

🔒 Keamanan

⚠️ Rekomendasi Keamanan Tambahan

🛠️ Teknologi yang Digunakan

Frontend

Backend

Libraries & Plugins

🐛 Troubleshooting

1. Database Connection Error

2. Session Tidak Berfungsi

3. Marker Tidak Muncul

4. Tidak Bisa Login

5. Peta Tidak Loading

📊 API Documentation

Endpoints

Contoh Request/Response

Tambah SPBU

🔄 Changelog

Version 1.0.0 (2024)

Tabel: `admin`

Tabel: `spbu`