Add WebGIS SPBU project documentation

2026-06-11 02:29:29 +07:00
commit 529d8bcc70
13 changed files with 1905 additions and 0 deletions
@@ -0,0 +1,128 @@
+# 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.