commit aa7be42b5d104d344b260d2fc7f1fd8936762e49 Author: YaraAqmal Date: Thu Jun 11 08:03:34 2026 +0700 Initial commit - Fresh Clean Code with User Manual README diff --git a/LinkWebsite_SPBU_Marker.txt b/LinkWebsite_SPBU_Marker.txt new file mode 100644 index 0000000..aa08eb1 --- /dev/null +++ b/LinkWebsite_SPBU_Marker.txt @@ -0,0 +1 @@ +https://sigwebsite.free.je/SPBU_Marker/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..2f4ef5d --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ +# ??? Panduan Penggunaan Sistem Informasi Geografis (SIG) - SPBU Marker + +Selamat datang di Panduan Pengguna aplikasi **Sistem Informasi Geografis Pemetaan SPBU**. Aplikasi ini dirancang untuk mempermudah Anda dalam melihat, menambah, mengubah, dan menghapus data marker SPBU secara interaktif di atas peta. + +## ?? Link Akses Website +Aplikasi dapat diakses langsung melalui tautan berikut: +?? [Demo Live Website SPBU Marker](https://sigwebsite.free.je/SPBU_Marker/) + +--- + +## ?? Fitur Utama & Cara Menggunakannya + +### 1. Menampilkan Daftar & Fokus Lokasi SPBU +* **Cara Kerja:** Di sebelah kanan layar terdapat panel **"Daftar SPBU Terdaftar"** yang menampilkan semua nama, nomor registrasi, dan alamat SPBU yang ada di database. +* **Fitur Utama:** Jika Anda **mengklik salah satu item** pada daftar tersebut, kamera peta akan otomatis melakukan *fly-to* (meluncur/fokus) ke titik lokasi SPBU tersebut dengan tingkat perbesaran yang tinggi (*zoom-in*), dan form input di sebelah kanan akan otomatis berubah menjadi mode edit. + +### 2. Menambah Data SPBU Baru (Lacak Alamat Otomatis) +* **Langkah 1:** Klik tombol hijau besar bertuliskan **"TAMBAH SPBU BARU"** di bawah peta. Kursor mouse pada area peta akan berubah menjadi tanda bidik (*crosshair*). +* **Langkah 2:** Cari lokasi yang diinginkan pada peta, lalu **klik sekali** pada titik tersebut. Sebuah pin (marker) sementara akan muncul. +* **Fitur Cerdas (Geocoding):** Sistem akan otomatis melacak koordinat (Latitude & Longitude) serta mengisi kolom alamat secara otomatis berdasarkan titik yang Anda klik menggunakan layanan *OpenStreetMap Nominatim*. +* **Langkah 3:** Lengkapi kolom nama SPBU, nomor register, dan tipe operasional (24 Jam atau Biasa) pada form di sebelah kanan. +* **Langkah 4:** Klik tombol **"SIMPAN DATA"** untuk memasukkannya ke database. + +### 3. Mengubah / Mengedit Data SPBU (Interaktif) +Ada dua cara mudah untuk mengubah data yang sudah terdaftar: +* **Melalui Form:** Klik salah satu SPBU di daftar sebelah kanan, ubah informasi yang diinginkan pada form (seperti mengganti nama atau tipe), lalu klik **"UPDATE DATA SPBU"**. +* **Melalui Geser Pin (Drag & Drop):** Anda bisa langsung **mengklik dan menahan (drag)** ikon pin SPBU di atas peta, lalu menggesernya ke lokasi baru. Saat pin dilepas, sistem akan otomatis memperbarui koordinat posisi baru dan melacak ulang alamat terbarunya secara instan. + +### 4. Menghapus Data SPBU +* **Cara Kerja:** Klik pin SPBU yang ingin dihapus di atas peta sampai muncul jendela kecil (*popup*). +* **Langkah:** Klik tombol merah bertuliskan **"Hapus"** di dalam popup tersebut. Sistem akan menampilkan konfirmasi keamanan sebelum benar-benar menghapus data tersebut dari server. + +--- + +## ?? Indikator Warna Pin di Peta +Untuk mempermudah visualisasi, tanda pin di peta memiliki dua warna berbeda berdasarkan tipe operasionalnya: +* ?? **Pin Hijau:** Menandakan SPBU yang beroperasi penuh **24 Jam**. +* ?? **Pin Merah:** Menandakan SPBU dengan jam operasional **Biasa / Standar**. diff --git a/api_spbu.php b/api_spbu.php new file mode 100644 index 0000000..05c31de --- /dev/null +++ b/api_spbu.php @@ -0,0 +1,36 @@ +query("SELECT * FROM spbu ORDER BY created_at DESC"); + $data = []; + while ($row = $result->fetch_assoc()) { $data[] = $row; } + sendResponse(true, 'Data dimuat', $data); +} +elseif ($method === 'POST' && $action === 'create') { + $input = json_decode(file_get_contents('php://input'), true); + $stmt = $conn->prepare("INSERT INTO spbu (nama, no_spbu, alamat, tipe, latitude, longitude) VALUES (?, ?, ?, ?, ?, ?)"); + $stmt->bind_param("ssssdd", $input['nama'], $input['no_spbu'], $input['alamat'], $input['tipe'], $input['latitude'], $input['longitude']); + if ($stmt->execute()) sendResponse(true, 'Berhasil simpan', ['id' => $conn->insert_id]); + else sendResponse(false, 'Gagal simpan: ' . $stmt->error); +} +elseif ($method === 'PUT' && $action === 'update') { + $id = intval($_GET['id']); + $input = json_decode(file_get_contents('php://input'), true); + $stmt = $conn->prepare("UPDATE spbu SET nama=?, no_spbu=?, alamat=?, tipe=?, latitude=?, longitude=? WHERE id=?"); + $stmt->bind_param("ssssddi", $input['nama'], $input['no_spbu'], $input['alamat'], $input['tipe'], $input['latitude'], $input['longitude'], $id); + if ($stmt->execute()) sendResponse(true, 'Berhasil update'); + else sendResponse(false, 'Gagal update'); +} +elseif ($method === 'DELETE' && $action === 'delete') { + $id = intval($_GET['id']); + $stmt = $conn->prepare("DELETE FROM spbu WHERE id=?"); + $stmt->bind_param("i", $id); + if ($stmt->execute()) sendResponse(true, 'Berhasil hapus'); + else sendResponse(false, 'Gagal hapus'); +} +?> \ No newline at end of file diff --git a/config.php b/config.php new file mode 100644 index 0000000..d2e8a3a --- /dev/null +++ b/config.php @@ -0,0 +1,26 @@ +connect_error) { + die(json_encode(['success' => false, 'message' => 'Koneksi gagal: ' . $conn->connect_error])); +} + +$conn->set_charset("utf8"); + +function sendResponse($success, $message, $data = null) { + echo json_encode(['success' => $success, 'message' => $message, 'data' => $data]); + exit; +} +?> \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..45e8286 --- /dev/null +++ b/index.html @@ -0,0 +1,285 @@ + + + + + Sistem GIS SPBU - Mandiri + + + + + + + +
+
+
+
+
+ +
+ + Navigasi: Klik item di daftar untuk Edit. Geser pin di peta untuk pindah lokasi. +
+
+
+ +
+
+
+
+ Form SPBU + +
+
+ +
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ +
+
+ +
+
Daftar SPBU Terdaftar
+ 0 +
+ +
+
+
+
+
+
+ + + + + \ No newline at end of file