# 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 ```text . |-- 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. ```bash git clone https://github.com/GuavaPopper/WebGIS_SPBU.git ``` 2. Masuk ke folder project. ```bash cd WebGIS_SPBU ``` 3. Buat database dan tabel dengan menjalankan script: ```sql database/schema.sql ``` Script tersebut akan membuat database `spbu_baru`, tabel `spbu`, dan contoh data awal. 4. Salin file `.env.example` menjadi `.env`. ```bash cp .env.example .env ``` 5. Sesuaikan konfigurasi database di file `.env`. ```env DB_HOST=localhost DB_NAME=spbu_baru DB_USER=root DB_PASS= ``` 6. Jalankan project melalui web server lokal, misalnya: ```text 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 ```json { "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.