WebGIS SPBU

WebGIS SPBU adalah aplikasi Sistem Informasi Geografis sederhana untuk memetakan dan mengelola titik Stasiun Pengisian Bahan Bakar Umum (SPBU). Aplikasi ini memakai Leaflet untuk peta interaktif, PHP untuk API, dan MySQL/MariaDB untuk penyimpanan data.

Fitur

• Menampilkan peta interaktif dengan pilihan layer peta standar dan satelit.
• Menambah data SPBU dengan klik lokasi langsung di peta.
• Mengedit data SPBU dan memindahkan marker dengan drag.
• Menghapus data SPBU dari halaman input maupun halaman daftar data.
• Menampilkan daftar SPBU, statistik total, statistik status operasional, pencarian, dan mini map sebaran.
• Mengelompokkan marker berdasarkan status Buka 24 Jam dan Tidak Buka 24 Jam.

Teknologi

• HTML, CSS, JavaScript
• PHP PDO
• MySQL atau MariaDB
• Leaflet
• Tailwind CSS CDN
• DaisyUI CDN
• Font Awesome CDN

Struktur Project

.
|-- api/
|   |-- config.php
|   |-- delete_spbu.php
|   |-- get_spbu.php
|   |-- save_spbu.php
|   `-- update_spbu.php
|-- database/
|   `-- schema.sql
|-- pages/
|   |-- input.html
|   `-- showdata.html
|-- .env.example
|-- index.html
`-- README.md

Prasyarat

• Web server lokal seperti Laragon, XAMPP, atau Apache/Nginx dengan PHP.
• PHP dengan ekstensi PDO MySQL aktif.
• MySQL atau MariaDB.
• Koneksi internet untuk memuat library CDN dan tile map.

Instalasi

1. Clone repository ini ke direktori web server lokal.

   git clone https://github.com/GuavaPopper/WebGIS_SPBU.git
   

2. Masuk ke folder project.

   cd WebGIS_SPBU
   

3. Buat database dan tabel dengan menjalankan script:

   database/schema.sql
   

   Script tersebut akan membuat database spbu_baru, tabel spbu, dan contoh data awal.

4. Salin file .env.example menjadi .env.

   cp .env.example .env
   

5. Sesuaikan konfigurasi database di file .env.

   DB_HOST=localhost
   DB_NAME=spbu_baru
   DB_USER=root
   DB_PASS=
   

6. Jalankan project melalui web server lokal, misalnya:

   http://localhost/SPBU_Enhanced/
   

Halaman Aplikasi

• index.html: halaman awal dan peta latar.
• pages/input.html: halaman input, edit, hapus, dan pemindahan titik SPBU.
• pages/showdata.html: halaman daftar data, statistik, pencarian, dan mini map.

Endpoint API

Endpoint	Method	Fungsi
api/get_spbu.php	GET	Mengambil semua data SPBU
api/save_spbu.php	POST	Menyimpan data SPBU baru
api/update_spbu.php	POST atau PUT	Memperbarui data SPBU
api/delete_spbu.php	DELETE atau POST dengan _method=DELETE	Menghapus data SPBU

Format Data SPBU

{
  "nama_spbu": "SPBU Jl. Ahmad Yani",
  "nomor_spbu": "64.751.01",
  "status": "Buka 24 Jam",
  "latitude": -0.0600366,
  "longitude": 109.3458023
}

Nilai status yang valid:

• Buka 24 Jam
• Tidak Buka 24 Jam

Catatan Konfigurasi

File .env ikut disertakan untuk kebutuhan setup repository private. Jika project dipindahkan ke environment lain, sesuaikan nilai database di .env atau gunakan .env.example sebagai template konfigurasi.