commit 529d8bcc709a78c6e66df31d31acd63a0a26ec08 Author: GuavaPopper Date: Thu Jun 11 02:29:29 2026 +0700 Add WebGIS SPBU project documentation diff --git a/.env b/.env new file mode 100644 index 0000000..8411efd --- /dev/null +++ b/.env @@ -0,0 +1,4 @@ +DB_HOST=127.0.0.1 +DB_NAME=spbu_baru +DB_USER=root +DB_PASS= diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..184d260 --- /dev/null +++ b/.env.example @@ -0,0 +1,4 @@ +DB_HOST=localhost +DB_NAME=spbu_baru +DB_USER=root +DB_PASS= diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6c6fdf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +# OS/editor files +.DS_Store +Thumbs.db +.vscode/ +.idea/ + +# Logs +*.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..118871e --- /dev/null +++ b/README.md @@ -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. diff --git a/api/config.php b/api/config.php new file mode 100644 index 0000000..883bdd5 --- /dev/null +++ b/api/config.php @@ -0,0 +1,38 @@ + false, 'message' => 'File .env tidak ditemukan']); + exit(); +} + +foreach (file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) { + if (str_starts_with(trim($line), '#') || !str_contains($line, '=')) continue; + [$key, $value] = explode('=', $line, 2); + $_ENV[trim($key)] = trim($value); +} + +$host = $_ENV['DB_HOST'] ?? 'localhost'; +$dbname = $_ENV['DB_NAME'] ?? ''; +$username = $_ENV['DB_USER'] ?? 'root'; +$password = $_ENV['DB_PASS'] ?? ''; + +// ── KONEKSI PDO ─────────────────────────────────────────────────────────────── +try { + $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password, [ + PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, + PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, + PDO::ATTR_EMULATE_PREPARES => false, + ]); +} catch (PDOException $e) { + http_response_code(500); + header('Content-Type: application/json'); + echo json_encode(['success' => false, 'message' => 'Koneksi database gagal: ' . $e->getMessage()]); + exit(); +} diff --git a/api/delete_spbu.php b/api/delete_spbu.php new file mode 100644 index 0000000..6fdf4ba --- /dev/null +++ b/api/delete_spbu.php @@ -0,0 +1,49 @@ + false, 'message' => 'Method not allowed']); + exit(); +} + +// ── VALIDASI ID ─────────────────────────────────────────────────────────────── +$id = intval($data['id'] ?? 0); +if ($id <= 0) { + http_response_code(400); + echo json_encode(['success' => false, 'message' => 'ID tidak valid']); + exit(); +} + +// ── HAPUS DATA ──────────────────────────────────────────────────────────────── +try { + $stmt = $pdo->prepare("DELETE FROM spbu WHERE id = :id"); + $stmt->execute([':id' => $id]); + + if ($stmt->rowCount() === 0) { + http_response_code(404); + echo json_encode(['success' => false, 'message' => 'Data tidak ditemukan']); + } else { + echo json_encode(['success' => true, 'message' => 'Data SPBU berhasil dihapus']); + } + +} catch (PDOException $e) { + http_response_code(500); + echo json_encode(['success' => false, 'message' => 'Gagal menghapus data: ' . $e->getMessage()]); +} diff --git a/api/get_spbu.php b/api/get_spbu.php new file mode 100644 index 0000000..82315b7 --- /dev/null +++ b/api/get_spbu.php @@ -0,0 +1,23 @@ +query("SELECT * FROM spbu ORDER BY created_at DESC"); + $rows = $stmt->fetchAll(); + echo json_encode($rows); +} catch (PDOException $e) { + http_response_code(500); + echo json_encode(['error' => 'Gagal mengambil data: ' . $e->getMessage()]); +} diff --git a/api/save_spbu.php b/api/save_spbu.php new file mode 100644 index 0000000..8f7e2f0 --- /dev/null +++ b/api/save_spbu.php @@ -0,0 +1,69 @@ + false, 'message' => 'Method not allowed']); + exit(); +} + +// ── BACA JSON BODY ───────────────────────────────────────────────────────────── +$body = file_get_contents('php://input'); +$data = json_decode($body, true); + +if (!$data) { + http_response_code(400); + echo json_encode(['success' => false, 'message' => 'Data tidak valid (JSON parse error)']); + exit(); +} + +// ── VALIDASI ────────────────────────────────────────────────────────────────── +$nama_spbu = trim($data['nama_spbu'] ?? ''); +$nomor_spbu = trim($data['nomor_spbu'] ?? ''); +$status = trim($data['status'] ?? ''); +$latitude = floatval($data['latitude'] ?? 0); +$longitude = floatval($data['longitude'] ?? 0); + +$valid_status = ['Buka 24 Jam', 'Tidak Buka 24 Jam']; + +if (empty($nama_spbu)) { echo json_encode(['success' => false, 'message' => 'Nama SPBU tidak boleh kosong']); exit(); } +if (empty($nomor_spbu)) { echo json_encode(['success' => false, 'message' => 'Nomor SPBU tidak boleh kosong']); exit(); } +if (!in_array($status, $valid_status)) { echo json_encode(['success' => false, 'message' => 'Status tidak valid']); exit(); } +if ($latitude === 0.0 && $longitude === 0.0) { echo json_encode(['success' => false, 'message' => 'Koordinat tidak valid']); exit(); } + +// ── INSERT DATA ─────────────────────────────────────────────────────────────── +try { + $stmt = $pdo->prepare(" + INSERT INTO spbu (nama_spbu, nomor_spbu, status, latitude, longitude, created_at) + VALUES (:nama_spbu, :nomor_spbu, :status, :latitude, :longitude, NOW()) + "); + + $stmt->execute([ + ':nama_spbu' => $nama_spbu, + ':nomor_spbu' => $nomor_spbu, + ':status' => $status, + ':latitude' => $latitude, + ':longitude' => $longitude, + ]); + + echo json_encode([ + 'success' => true, + 'message' => 'Data SPBU berhasil disimpan', + 'id' => $pdo->lastInsertId() + ]); + +} catch (PDOException $e) { + http_response_code(500); + echo json_encode(['success' => false, 'message' => 'Gagal menyimpan data: ' . $e->getMessage()]); +} diff --git a/api/update_spbu.php b/api/update_spbu.php new file mode 100644 index 0000000..8087fc9 --- /dev/null +++ b/api/update_spbu.php @@ -0,0 +1,79 @@ + false, 'message' => 'Method not allowed']); + exit(); +} + +// ── BACA JSON BODY ───────────────────────────────────────────────────────────── +$body = file_get_contents('php://input'); +$data = json_decode($body, true); + +if (!$data) { + http_response_code(400); + echo json_encode(['success' => false, 'message' => 'Data tidak valid (JSON parse error)']); + exit(); +} + +// ── VALIDASI ────────────────────────────────────────────────────────────────── +$id = intval($data['id'] ?? 0); +$nama_spbu = trim($data['nama_spbu'] ?? ''); +$nomor_spbu = trim($data['nomor_spbu'] ?? ''); +$status = trim($data['status'] ?? ''); +$latitude = floatval($data['latitude'] ?? 0); +$longitude = floatval($data['longitude'] ?? 0); + +$valid_status = ['Buka 24 Jam', 'Tidak Buka 24 Jam']; + +if ($id <= 0) { echo json_encode(['success' => false, 'message' => 'ID tidak valid']); exit(); } +if (empty($nama_spbu)) { echo json_encode(['success' => false, 'message' => 'Nama SPBU tidak boleh kosong']); exit(); } +if (empty($nomor_spbu)) { echo json_encode(['success' => false, 'message' => 'Nomor SPBU tidak boleh kosong']); exit(); } +if (!in_array($status, $valid_status)) { echo json_encode(['success' => false, 'message' => 'Status tidak valid']); exit(); } +if ($latitude === 0.0 && $longitude === 0.0) { echo json_encode(['success' => false, 'message' => 'Koordinat tidak valid']); exit(); } + +// ── UPDATE DATA ─────────────────────────────────────────────────────────────── +try { + $stmt = $pdo->prepare(" + UPDATE spbu + SET nama_spbu = :nama_spbu, + nomor_spbu = :nomor_spbu, + status = :status, + latitude = :latitude, + longitude = :longitude + WHERE id = :id + "); + + $stmt->execute([ + ':id' => $id, + ':nama_spbu' => $nama_spbu, + ':nomor_spbu' => $nomor_spbu, + ':status' => $status, + ':latitude' => $latitude, + ':longitude' => $longitude, + ]); + + if ($stmt->rowCount() === 0) { + http_response_code(404); + echo json_encode(['success' => false, 'message' => 'Data tidak ditemukan atau tidak ada perubahan']); + } else { + echo json_encode(['success' => true, 'message' => 'Data SPBU berhasil diperbarui']); + } + +} catch (PDOException $e) { + http_response_code(500); + echo json_encode(['success' => false, 'message' => 'Gagal memperbarui data: ' . $e->getMessage()]); +} diff --git a/database/schema.sql b/database/schema.sql new file mode 100644 index 0000000..35333be --- /dev/null +++ b/database/schema.sql @@ -0,0 +1,33 @@ +-- ============================================================ +-- WebGIS SPBU - Database Schema +-- Jalankan script ini di phpMyAdmin atau MySQL CLI +-- ============================================================ + +-- Buat database (jika belum ada) +CREATE DATABASE IF NOT EXISTS spbu_baru + CHARACTER SET utf8mb4 + COLLATE utf8mb4_unicode_ci; + +USE spbu_baru; + +-- Buat tabel spbu +CREATE TABLE IF NOT EXISTS spbu ( + id INT UNSIGNED NOT NULL AUTO_INCREMENT, + nama_spbu VARCHAR(255) NOT NULL, + nomor_spbu VARCHAR(50) NOT NULL, + status ENUM('Buka 24 Jam', 'Tidak Buka 24 Jam') NOT NULL, + latitude DECIMAL(10, 7) NOT NULL, + longitude DECIMAL(10, 7) NOT NULL, + created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, + + PRIMARY KEY (id), + INDEX idx_status (status), + INDEX idx_created (created_at) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; + +-- ============================================================ +-- Contoh data awal (opsional, hapus jika tidak diperlukan) +-- ============================================================ +INSERT INTO spbu (nama_spbu, nomor_spbu, status, latitude, longitude) VALUES +('SPBU Jl. Ahmad Yani', '64.751.01', 'Buka 24 Jam', -0.0600366, 109.3458023), +('SPBU Jl. Gajah Mada', '64.751.02', 'Tidak Buka 24 Jam', -0.0596729, 109.3469671); diff --git a/index.html b/index.html new file mode 100644 index 0000000..a987a26 --- /dev/null +++ b/index.html @@ -0,0 +1,212 @@ + + + + + + WebGIS SPBU + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
⛽
+

WebGIS SPBU

+

+ Sistem Informasi Geografis untuk pemetaan dan pengelolaan + titik-titik Stasiun Pengisian Bahan Bakar Umum. +

+ + +
+ + + Input Data SPBU + + + + Lihat Data & Peta + +
+ + +
+

Mengarahkan ke halaman Input dalam 3 detik...

+ +
+
+
+ + + + diff --git a/pages/input.html b/pages/input.html new file mode 100644 index 0000000..d876b60 --- /dev/null +++ b/pages/input.html @@ -0,0 +1,683 @@ + + + + + + Input Data SPBU - WebGIS + + + + + + + + + + + + + + + + + + + + +
+
+ + + WebGIS SPBU + +
+
+ +
+
+ + +
+
+ + +
+ + Klik peta untuk tambah SPBU • Drag marker untuk pindah lokasi +
+ + + +
+ + + +
+ + +

+ + Tambah Data SPBU +

+

Isi atribut titik lokasi baru

+ + +
+ + Memuat koordinat... +
+ + + + + + + + +
+ + +
+
+ +
+ +
+ + + + +
+ +

+ + Edit Data SPBU +

+

Perbarui atribut titik lokasi

+ +
+ + Memuat koordinat... +
+ + + + + + + +
+ + +
+
+
+ +
+ + + + +
+
🗑️
+

Hapus Data SPBU?

+

+ Data akan dihapus secara permanen. +

+

⚠️ Tindakan ini tidak dapat dibatalkan.

+ +
+ + +
+
+
+ +
+ + + +
+ + + + + + diff --git a/pages/showdata.html b/pages/showdata.html new file mode 100644 index 0000000..e6e02ec --- /dev/null +++ b/pages/showdata.html @@ -0,0 +1,575 @@ + + + + + + Data SPBU - WebGIS + + + + + + + + + + + + + + + + + + + + +
+
+ + + WebGIS SPBU + +
+
+ +
+
+ + +
+ + +
+
+

📊 Data SPBU

+

+ Daftar seluruh titik SPBU yang telah terdata dalam sistem +

+
+ + Tambah SPBU + +
+ + +
+
+
+ +
+
Total SPBU
+
—
+
+
+
+ +
+
Buka 24 Jam
+
—
+
+
+
+ +
+
Tidak 24 Jam
+
—
+
+
+ + +
+ + +
+
+ + +
+

+ + Daftar SPBU +

+ Memuat... +
+ + +
+ +
+ + +
+ + Memuat data... +
+ +
+ + + + + + + + + + + + + +
+ + + +
+
+ + +
+ + +
+
+
+ + Peta Sebaran +
+
+
+ + + Buka 24 Jam + + + + Tidak 24 Jam + +
+
+
+ + +
+
+
+ + Daftar Cepat +
+
+
+ + Memuat... +
+
+
+
+ +
+
+
+ + + +
+ +
+
+ +
+
+

Hapus Data SPBU

+

Tindakan ini tidak dapat dibatalkan

+
+ +
+ +

+ Apakah kamu yakin ingin menghapus data SPBU berikut? +

+
—
+
+ + Data yang dihapus tidak bisa dikembalikan. +
+ +
+ + +
+
+
+ +
+ + + +
+ + + + + +