commit 8c74b19cc6551f68e02e73c052d914bea4e002f3
Author: ocabacaa <oca.locago@gmail.com>
Date:   Thu Jun 11 03:02:00 2026 +0700

    Initial commit

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8acd11f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,77 @@
+# WebGIS SPBU
+
+## Deskripsi
+
+WebGIS SPBU merupakan Sistem Informasi Geografis berbasis web yang digunakan untuk memetakan, mengelola, dan mencari lokasi SPBU dengan rute terdekat dari titik lokasi user saat ini.
+
+**Nama:** Clara Oxana Azalia  
+**NIM:** D1041231051
+
+## Fitur
+
+- CRUD Data SPBU
+- Upload Foto SPBU
+- Pencarian SPBU
+- Lokasi Saya
+- SPBU Terdekat
+- Routing ke SPBU Terdekat
+- Status Buka/Tutup Otomatis
+- Filter SPBU
+- Mode Admin dan View
+- Digitasi Polygon
+- Digitasi Polyline
+- Edit dan Hapus Objek Spasial
+- Penyimpanan GeoJSON ke Database
+
+## Teknologi
+
+- PHP Native
+- MySQL
+- JavaScript
+- Leaflet.js
+- Leaflet Draw
+- Leaflet Routing Machine
+- OpenStreetMap
+- Tailwind CSS
+
+## Instalasi
+
+1. Clone repository
+
+```bash
+git clone https://github.com/USERNAME/webgis-spbu.git
+```
+
+2. Import database
+
+```text
+database.sql
+```
+
+3. Sesuaikan konfigurasi database pada:
+
+```php
+koneksi.php
+```
+
+4. Jalankan pada server lokal:
+
+```text
+http://localhost/webgis-spbu
+```
+
+## Struktur Project
+
+```text
+api/
+assets/
+uploads/
+database.sql
+koneksi.php
+index.php
+```
+
+## Pengembang
+
+Clara Oxana Azalia  
+D1041231051
\ No newline at end of file
diff --git a/api/edit_spbu.php b/api/edit_spbu.php
new file mode 100644
index 0000000..7e05c86
--- /dev/null
+++ b/api/edit_spbu.php
@@ -0,0 +1,133 @@
+<?php
+
+include '../koneksi.php';
+header('Content-Type: application/json');
+
+$id = $_POST['id'];
+$nama = $_POST['nama'];
+$alamat = $_POST['alamat'];
+$lat = $_POST['lat'];
+$lng = $_POST['lng'];
+
+$fotoLama = '';
+
+$jam_buka = $_POST['jam_buka'];
+$jam_tutup = $_POST['jam_tutup'];
+$buka_24_jam = $_POST['buka_24_jam'];
+
+$getData = mysqli_query(
+    $conn,
+    "SELECT foto
+    FROM spbu
+    WHERE id='$id'"
+);
+
+if($row = mysqli_fetch_assoc($getData)){
+
+    $fotoLama = $row['foto'];
+
+}
+
+$updateFoto = "";
+
+$hapusFotoLama = false;
+
+if(
+    isset($_FILES['foto']) &&
+    $_FILES['foto']['error'] == 0
+){
+
+    $namaFile =
+    time().'_'.
+    $_FILES['foto']['name'];
+
+    $allowed = [
+        'jpg',
+        'jpeg',
+        'png',
+        'webp'
+    ];
+
+    $fileType = strtolower(
+        pathinfo(
+            $_FILES['foto']['name'],
+            PATHINFO_EXTENSION
+        )
+    );
+
+    if(!in_array($fileType, $allowed)){
+
+        echo json_encode([
+            'status'=>'error',
+            'message'=>'File type not allowed'
+        ]);
+
+        exit;
+
+    }
+
+    move_uploaded_file(
+
+        $_FILES['foto']['tmp_name'],
+
+        '../uploads/spbu/' .
+        $namaFile
+
+    );
+
+    $updateFoto =
+    ", foto='$namaFile'";
+
+    $hapusFotoLama = true;
+
+}
+
+$query = mysqli_query(
+
+    $conn,
+
+    "UPDATE spbu SET
+
+    nama_spbu='$nama',
+    alamat='$alamat',
+    latitude='$lat',
+    longitude='$lng',
+    jam_buka='$jam_buka',
+    jam_tutup='$jam_tutup',
+    buka_24_jam='$buka_24_jam'
+    $updateFoto
+
+    WHERE id='$id'
+    "
+);
+
+if($query){
+
+    if(
+        $hapusFotoLama &&
+        !empty($fotoLama) &&
+        file_exists(
+            '../uploads/spbu/' .
+            $fotoLama
+        )
+    ){
+
+        unlink(
+            '../uploads/spbu/' .
+            $fotoLama
+        );
+
+    }
+
+    echo json_encode([
+        'status'=>'success'
+    ]);
+
+} else{
+
+    echo json_encode([
+        'status'=>'error',
+        'message'=>mysqli_error($conn)
+    ]);
+
+}
\ No newline at end of file
diff --git a/api/get_objek.php b/api/get_objek.php
new file mode 100644
index 0000000..370017f
--- /dev/null
+++ b/api/get_objek.php
@@ -0,0 +1,22 @@
+<?php
+
+include '../koneksi.php';
+
+$query =
+mysqli_query(
+$conn,
+"SELECT * FROM objek_peta"
+);
+
+$data = [];
+
+while(
+$row =
+mysqli_fetch_assoc($query)
+){
+
+$data[] = $row;
+
+}
+
+echo json_encode($data);
\ No newline at end of file
diff --git a/api/get_spbu.php b/api/get_spbu.php
new file mode 100644
index 0000000..fd082d2
--- /dev/null
+++ b/api/get_spbu.php
@@ -0,0 +1,16 @@
+<?php
+
+include '../koneksi.php';
+
+$query = mysqli_query(
+$conn,
+"SELECT * FROM spbu"
+);
+
+$data = [];
+
+while($row = mysqli_fetch_assoc($query)){
+    $data[] = $row;
+}
+
+echo json_encode($data);
\ No newline at end of file
diff --git a/api/hapus_objek.php b/api/hapus_objek.php
new file mode 100644
index 0000000..40c8219
--- /dev/null
+++ b/api/hapus_objek.php
@@ -0,0 +1,15 @@
+<?php
+
+include '../koneksi.php';
+
+$id = $_POST['id'];
+
+mysqli_query(
+
+$conn,
+
+"DELETE FROM objek_peta
+
+WHERE id='$id'"
+
+);
\ No newline at end of file
diff --git a/api/hapus_spbu.php b/api/hapus_spbu.php
new file mode 100644
index 0000000..1ca23d2
--- /dev/null
+++ b/api/hapus_spbu.php
@@ -0,0 +1,51 @@
+<?php
+
+include '../koneksi.php';
+
+$data = json_decode(
+file_get_contents("php://input"),
+true
+);
+
+$id = $data['id'];
+
+$foto = '';
+
+$getData = mysqli_query(
+
+    $conn,
+
+    "SELECT foto
+    FROM spbu
+    WHERE id='$id'"
+
+);
+
+if($row = mysqli_fetch_assoc($getData)){
+
+    $foto = $row['foto'];
+
+}
+
+if(!empty($foto) && file_exists('../uploads/spbu/' . $foto)){
+    unlink('../uploads/spbu/' . $foto);
+}
+
+$query = mysqli_query(
+$conn,
+"DELETE FROM spbu WHERE id='$id'"
+);
+
+if($query){
+
+    echo json_encode([
+        'status'=>'success'
+    ]);
+
+}else{
+
+    echo json_encode([
+        'status'=>'error'
+    ]);
+
+}
\ No newline at end of file
diff --git a/api/simpan_objek.php b/api/simpan_objek.php
new file mode 100644
index 0000000..44ff5a1
--- /dev/null
+++ b/api/simpan_objek.php
@@ -0,0 +1,35 @@
+<?php
+
+include '../koneksi.php';
+
+$nama = $_POST['nama'];
+$deskripsi = $_POST['deskripsi'];
+$tipe = $_POST['tipe'];
+$geojson = $_POST['geojson'];
+
+mysqli_query(
+
+$conn,
+
+"INSERT INTO objek_peta
+(
+    nama,
+    deskripsi,
+    tipe,
+    geojson
+)
+
+VALUES
+(
+    '$nama',
+    '$deskripsi',
+    '$tipe',
+    '$geojson'
+)"
+);
+
+$id = mysqli_insert_id($conn);
+
+echo json_encode([
+    'id'=>$id
+]);
\ No newline at end of file
diff --git a/api/tambah_spbu.php b/api/tambah_spbu.php
new file mode 100644
index 0000000..e3aa7df
--- /dev/null
+++ b/api/tambah_spbu.php
@@ -0,0 +1,104 @@
+<?php
+
+include '../koneksi.php';
+
+$nama = $_POST['nama'];
+$alamat = $_POST['alamat'];
+$lat = $_POST['lat'];
+$lng = $_POST['lng'];
+
+$jam_buka = $_POST['jam_buka'] ?? null;
+$jam_tutup = $_POST['jam_tutup'] ?? null;
+$buka_24_jam = $_POST['buka_24_jam'] ?? 0;
+$foto = '';
+
+if(isset($_FILES['foto'])){
+
+    $namaFile =
+    time().'_'.
+    $_FILES['foto']['name'];
+
+    $allowed = [
+        'jpg',
+        'jpeg',
+        'png',
+        'webp'
+    ];
+
+    $ext =
+    strtolower(
+        pathinfo(
+            $_FILES['foto']['name'],
+            PATHINFO_EXTENSION
+        )
+    );
+
+    if(
+        !in_array(
+            $ext,
+            $allowed
+        )
+    ){
+
+        echo json_encode([
+            'status'=>'error',
+            'message'=>'Format file tidak valid'
+        ]);
+
+        exit;
+
+    }
+
+    move_uploaded_file(
+
+        $_FILES['foto']['tmp_name'],
+
+        '../uploads/spbu/'.
+        $namaFile
+
+    );
+
+    $foto = $namaFile;
+
+}
+
+$query = mysqli_query(
+    $conn,
+    "INSERT INTO spbu
+    (
+        nama_spbu,
+        alamat,
+        latitude,
+        longitude,
+        foto,
+        jam_buka,
+        jam_tutup,
+        buka_24_jam
+    )
+    VALUES
+    (
+        '$nama',
+        '$alamat',
+        '$lat',
+        '$lng',
+        '$foto',
+        '$jam_buka',
+        '$jam_tutup',
+        '$buka_24_jam'
+    )"
+);
+
+if($query){
+
+    echo json_encode([
+        'status'=>'success'
+    ]);
+
+}else{
+
+    echo json_encode([
+        'status'=>'error',
+        'message'=>mysqli_error($conn)
+    ]);
+
+}
\ No newline at end of file
diff --git a/api/update_objek.php b/api/update_objek.php
new file mode 100644
index 0000000..abb32a8
--- /dev/null
+++ b/api/update_objek.php
@@ -0,0 +1,43 @@
+<?php
+
+include '../koneksi.php';
+
+$id = $_POST['id'];
+
+$nama = $_POST['nama'] ?? '';
+
+$deskripsi = $_POST['deskripsi'] ?? '';
+
+if(isset($_POST['geojson'])){
+
+    $geojson = $_POST['geojson'];
+
+    mysqli_query(
+
+        $conn,
+
+        "UPDATE objek_peta
+        SET geojson='$geojson'
+        WHERE id='$id'"
+
+    );
+
+}else{
+
+    mysqli_query(
+
+        $conn,
+
+        "UPDATE objek_peta
+        SET
+        nama='$nama',
+        deskripsi='$deskripsi'
+        WHERE id='$id'"
+
+    );
+
+}
+
+echo json_encode([
+    'status'=>'success'
+]);
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..e26f57a
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,3 @@
+.leaflet-interactive{
+    cursor:pointer;
+}
\ No newline at end of file
diff --git a/assets/js/map.js b/assets/js/map.js
new file mode 100644
index 0000000..6f2bf0c
--- /dev/null
+++ b/assets/js/map.js
@@ -0,0 +1,1072 @@
+let currentMarker = null;
+let userMarker = null;
+let userLat = null;
+let userLng = null;
+let markerData = {};
+
+let routingControl = null;
+let modeAdmin = true;
+let currentObjekLayer = null;
+let sedangMenggambar = false;
+
+const markerHijau = new L.Icon({
+  iconUrl:
+    "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
+
+  shadowUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+});
+
+const markerMerah = new L.Icon({
+  iconUrl:
+    "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
+
+  shadowUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+});
+
+// 1. Inisialisasi Peta
+let map = L.map("map").setView([-0.0263, 109.3425], 13);
+
+L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
+
+let markerGroup = L.layerGroup().addTo(map);
+
+let drawnItems = new L.FeatureGroup();
+
+map.addLayer(drawnItems);
+
+let drawControl = new L.Control.Draw({
+  draw: {
+    marker: false,
+    polyline: true,
+    polygon: true,
+    rectangle: false,
+    circle: false,
+    circlemarker: false,
+  },
+
+  edit: {
+    featureGroup: drawnItems,
+  },
+});
+
+map.addControl(drawControl);
+
+// TAMBAH DI SINI
+map.on(L.Draw.Event.DRAWSTART, function () {
+  sedangMenggambar = true;
+});
+
+map.on(L.Draw.Event.DRAWSTOP, function () {
+  sedangMenggambar = false;
+});
+
+console.log("draw berhasil");
+
+// 2. Load Marker Dari Database
+loadSPBU();
+loadObjekPeta();
+
+function loadSPBU() {
+  markerGroup.clearLayers();
+  markerData = {};
+
+  currentMarker = null;
+
+  fetch("api/get_spbu.php")
+    .then((res) => res.json())
+    .then((data) => {
+      data.forEach((spbu) => {
+        let marker = L.marker([spbu.latitude, spbu.longitude], {
+          icon: spbu.buka_24_jam == 1 ? markerHijau : markerMerah,
+          draggable: false,
+        }).addTo(markerGroup);
+
+        marker.spbuData = spbu;
+        markerData[spbu.id] = marker;
+
+        marker.on("dragend", function () {
+          let pos = marker.getLatLng();
+
+          let latInput = document.getElementById("edit_lat");
+
+          let lngInput = document.getElementById("edit_lng");
+
+          if (latInput && lngInput) {
+            latInput.value = pos.lat;
+            lngInput.value = pos.lng;
+          }
+
+          alert("Posisi marker berubah, klik Simpan untuk menyimpan perubahan");
+        });
+
+        marker.bindPopup(`
+
+<div class="w-56">
+
+${
+  spbu.foto
+    ? `
+<img
+src="uploads/spbu/${spbu.foto}?t=${Date.now()}"
+class="w-full h-32 object-cover rounded mb-2">
+`
+    : ""
+}
+
+<h3 class="font-bold text-lg">
+${spbu.nama_spbu}
+</h3>
+
+<p class="mb-2">
+${spbu.alamat}
+</p>
+
+<p class="mt-2">
+
+Status :
+
+${statusSPBU(spbu)}
+
+</p>
+
+<p>
+
+Jam :
+
+${spbu.buka_24_jam == 1 ? "24 Jam" : spbu.jam_buka + " - " + spbu.jam_tutup}
+
+</p>
+
+<p class="text-xs">
+Lat : ${spbu.latitude}
+</p>
+
+<p class="text-xs mb-2">
+Lng : ${spbu.longitude}
+</p>
+
+${
+  modeAdmin
+    ? `
+<div class="flex gap-2 mt-2">
+
+<button
+onclick="openEditById(${spbu.id})"
+class="bg-yellow-500 text-white px-3 py-1 rounded">
+
+Edit
+
+</button>
+
+<button
+onclick="hapusSPBU(${spbu.id})"
+class="bg-red-500 text-white px-3 py-1 rounded">
+
+Hapus
+
+</button>
+
+</div>
+`
+    : ""
+}
+
+</div>
+
+`);
+      });
+    });
+}
+
+function statusSPBU(spbu) {
+  if (spbu.buka_24_jam == 1) {
+    return `
+        <span class="text-green-600 font-bold">
+        BUKA 24 JAM
+        </span>
+        `;
+  }
+
+  if (!spbu.jam_buka || !spbu.jam_tutup) {
+    return `
+        <span class="text-gray-500">
+        Jam belum diatur
+        </span>
+        `;
+  }
+
+  let now = new Date().toTimeString().substring(0, 5);
+
+  let buka = spbu.jam_buka.substring(0, 5);
+
+  let tutup = spbu.jam_tutup.substring(0, 5);
+
+  let bukaStatus = false;
+
+  if (buka < tutup) {
+    bukaStatus = now >= buka && now <= tutup;
+  } else {
+    bukaStatus = now >= buka || now <= tutup;
+  }
+
+  return bukaStatus
+    ? `<span class="text-green-600 font-bold">BUKA</span>`
+    : `<span class="text-red-600 font-bold">TUTUP</span>`;
+}
+
+map.on("click", function (e) {
+  if (!modeAdmin) {
+    return;
+  }
+
+  if (sedangMenggambar) {
+    return;
+  }
+
+  if (
+    map._container.classList.contains("leaflet-draw-draw-polygon") ||
+    map._container.classList.contains("leaflet-draw-draw-polyline")
+  ) {
+    return;
+  }
+
+  let lat = e.latlng.lat;
+  let lng = e.latlng.lng;
+
+  L.popup()
+    .setLatLng(e.latlng)
+    .setContent(
+      `
+        
+        <div class="w-64">
+
+            <h3 class="font-bold mb-3">
+                Tambah SPBU
+            </h3>
+
+            <input
+                id="nama"
+                type="text"
+                placeholder="Nama SPBU"
+                class="border p-2 w-full mb-2 rounded">
+
+            <textarea
+                id="alamat"
+                placeholder="Alamat"
+                class="border p-2 w-full mb-2 rounded"></textarea>
+
+            <input
+                id="lat"
+                value="${lat}"
+                readonly
+                class="border p-2 w-full mb-2 rounded">
+
+            <input
+                id="lng"
+                value="${lng}"
+                readonly
+                class="border p-2 w-full mb-2 rounded">
+
+            <label class="block mb-1">
+                Jam Buka
+            </label>
+
+            <input
+                type="time"
+                id="jam_buka"
+                class="border p-2 w-full mb-2 rounded">
+
+            <label class="block mb-1">
+               Jam Tutup
+            </label>
+
+            <input
+                type="time"
+                id="jam_tutup"
+                class="border p-2 w-full mb-2 rounded">
+
+            <label
+             class="flex items-center gap-2 mb-2">
+
+            <input
+                type="checkbox"
+                id="buka_24_jam">
+
+              Buka 24 Jam
+
+            </label>
+
+            <input
+                type="file"
+                id="foto"
+                class="border p-2 w-full mb-2 rounded">
+
+            <img
+            id="previewFoto"
+            class="hidden w-full h-32 object-cover rounded mb-2">
+
+            <button
+                onclick="simpanSPBU()"
+                class="bg-green-500 text-white px-3 py-2 rounded w-full">
+
+                Simpan
+
+            </button>
+
+        </div>
+
+        `,
+    )
+    .openOn(map);
+});
+
+document.addEventListener("change", function (e) {
+  if (e.target.id !== "buka_24_jam") return;
+
+  let checked = e.target.checked;
+
+  document.getElementById("jam_buka").disabled = checked;
+
+  document.getElementById("jam_tutup").disabled = checked;
+});
+
+function simpanSPBU() {
+  let nama = document.getElementById("nama").value;
+  let alamat = document.getElementById("alamat").value;
+  let lat = document.getElementById("lat").value;
+  let lng = document.getElementById("lng").value;
+
+  let formData = new FormData();
+
+  formData.append("nama", nama);
+  formData.append("alamat", alamat);
+  formData.append("lat", lat);
+  formData.append("lng", lng);
+  let jamBuka = document.getElementById("jam_buka").value;
+
+  let jamTutup = document.getElementById("jam_tutup").value;
+
+  let buka24Jam = document.getElementById("buka_24_jam").checked ? 1 : 0;
+
+  formData.append("jam_buka", jamBuka);
+
+  formData.append("jam_tutup", jamTutup);
+
+  formData.append("buka_24_jam", buka24Jam);
+
+  let foto = document.getElementById("foto");
+
+  if (foto && foto.files.length > 0) {
+    formData.append("foto", foto.files[0]);
+  }
+
+  fetch("api/tambah_spbu.php", {
+    method: "POST",
+
+    body: formData,
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (data.status == "success") {
+        alert("Data berhasil disimpan");
+
+        map.closePopup();
+
+        loadSPBU();
+        loadObjekPeta();
+      }
+    });
+}
+
+function openEdit(spbu) {
+  if (!modeAdmin) {
+    return;
+  }
+
+  if (currentMarker) {
+    currentMarker.dragging.disable();
+  }
+
+  document.getElementById("sidebar").classList.remove("hidden");
+
+  document.getElementById("edit_id").value = spbu.id;
+
+  document.getElementById("edit_nama").value = spbu.nama_spbu;
+
+  document.getElementById("edit_alamat").value = spbu.alamat;
+
+  document.getElementById("edit_foto").value = "";
+
+  let preview = document.getElementById("preview_edit_foto");
+
+  if (spbu.foto) {
+    preview.src = "uploads/spbu/" + spbu.foto + "?t=" + Date.now();
+
+    preview.classList.remove("hidden");
+  } else {
+    preview.src = "";
+
+    preview.classList.add("hidden");
+  }
+
+  document.getElementById("edit_jam_buka").value = spbu.jam_buka || "";
+
+  document.getElementById("edit_jam_tutup").value = spbu.jam_tutup || "";
+
+  document.getElementById("edit_24jam").checked = spbu.buka_24_jam == 1;
+
+  document.getElementById("edit_jam_buka").disabled = spbu.buka_24_jam == 1;
+
+  document.getElementById("edit_jam_tutup").disabled = spbu.buka_24_jam == 1;
+
+  document.getElementById("edit_lat").value = spbu.latitude;
+
+  document.getElementById("edit_lng").value = spbu.longitude;
+
+  currentMarker = markerData[spbu.id];
+
+  if (currentMarker) {
+    currentMarker.dragging.enable();
+  }
+}
+
+function openEditById(id) {
+  if (!modeAdmin) {
+    return;
+  }
+
+  let marker = markerData[id];
+
+  if (!marker) return;
+
+  openEdit(marker.spbuData);
+}
+
+function tutupSidebar() {
+  document.getElementById("sidebar").classList.add("hidden");
+
+  if (currentMarker) {
+    currentMarker.dragging.disable();
+  }
+
+  currentMarker = null;
+}
+
+function updateSPBU() {
+  if (!modeAdmin) {
+    return;
+  }
+
+  let formData = new FormData();
+
+  formData.append("id", document.getElementById("edit_id").value);
+
+  formData.append("nama", document.getElementById("edit_nama").value);
+
+  formData.append("alamat", document.getElementById("edit_alamat").value);
+
+  formData.append("lat", document.getElementById("edit_lat").value);
+
+  formData.append("lng", document.getElementById("edit_lng").value);
+
+  let foto = document.getElementById("edit_foto");
+
+  if (foto.files.length > 0) {
+    formData.append("foto", foto.files[0]);
+  }
+
+  formData.append("jam_buka", document.getElementById("edit_jam_buka").value);
+
+  formData.append("jam_tutup", document.getElementById("edit_jam_tutup").value);
+
+  formData.append(
+    "buka_24_jam",
+    document.getElementById("edit_24jam").checked ? 1 : 0,
+  );
+
+  fetch("api/edit_spbu.php", {
+    method: "POST",
+    body: formData,
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (data.status == "success") {
+        alert("Data berhasil diperbarui");
+
+        tutupSidebar();
+
+        loadSPBU();
+        loadObjekPeta();
+      }
+    });
+}
+
+function hapusSPBU(id) {
+  if (!modeAdmin) {
+    return;
+  }
+
+  if (!confirm("Yakin hapus data ini?")) {
+    return;
+  }
+
+  fetch("api/hapus_spbu.php", {
+    method: "POST",
+
+    headers: {
+      "Content-Type": "application/json",
+    },
+
+    body: JSON.stringify({
+      id: id,
+    }),
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (data.status == "success") {
+        alert("Data berhasil dihapus");
+
+        loadSPBU();
+        loadObjekPeta();
+      }
+    });
+}
+
+document.addEventListener("keyup", function (e) {
+  if (e.target.id !== "search_spbu") return;
+
+  let keyword = e.target.value.toLowerCase();
+
+  markerGroup.eachLayer(function (marker) {
+    let nama = (marker.spbuData.nama_spbu || "").toLowerCase();
+
+    if (nama.includes(keyword)) {
+      map.setView(marker.getLatLng(), 18);
+
+      marker.openPopup();
+    }
+  });
+});
+
+function cariSPBU() {
+  let keyword = document.getElementById("search_spbu").value.toLowerCase();
+
+  let ditemukan = false;
+
+  markerGroup.eachLayer(function (marker) {
+    let nama = (marker.spbuData.nama_spbu || "").toLowerCase();
+
+    if (nama.includes(keyword)) {
+      ditemukan = true;
+
+      map.setView(marker.getLatLng(), 18);
+
+      marker.openPopup();
+    }
+  });
+
+  if (!ditemukan) {
+    alert("SPBU tidak ditemukan");
+  }
+}
+
+function lokasiSaya() {
+  if (!navigator.geolocation) {
+    alert("Browser tidak mendukung geolocation");
+    return;
+  }
+
+  navigator.geolocation.getCurrentPosition(
+    function (position) {
+      let lat = position.coords.latitude;
+
+      let lng = position.coords.longitude;
+
+      userLat = lat;
+      userLng = lng;
+
+      if (userMarker) {
+        map.removeLayer(userMarker);
+      }
+
+      userMarker = L.circleMarker([lat, lng], {
+        radius: 10,
+        color: "#2563eb",
+        fillColor: "#2563eb",
+        fillOpacity: 1,
+      }).addTo(map);
+
+      userMarker.bindPopup(`
+            <b>Lokasi Anda</b>
+            <br>
+            Lat : ${lat}
+            <br>
+            Lng : ${lng}
+            `);
+
+      userMarker.openPopup();
+
+      map.setView([lat, lng], 16);
+    },
+
+    function () {
+      alert("Lokasi tidak dapat diakses");
+    },
+  );
+}
+
+function hitungJarak(lat1, lon1, lat2, lon2) {
+  const R = 6371;
+
+  const dLat = ((lat2 - lat1) * Math.PI) / 180;
+
+  const dLon = ((lon2 - lon1) * Math.PI) / 180;
+
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos((lat1 * Math.PI) / 180) *
+      Math.cos((lat2 * Math.PI) / 180) *
+      Math.sin(dLon / 2) *
+      Math.sin(dLon / 2);
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  return R * c;
+}
+
+function cariTerdekat() {
+  if (userLat === null) {
+    alert("Klik Lokasi Saya terlebih dahulu");
+
+    return;
+  }
+
+  let terdekat = null;
+
+  let jarakMin = Infinity;
+
+  markerGroup.eachLayer(function (marker) {
+    let lat = marker.getLatLng().lat;
+
+    let lng = marker.getLatLng().lng;
+
+    let jarak = hitungJarak(userLat, userLng, lat, lng);
+
+    if (jarak < jarakMin) {
+      jarakMin = jarak;
+
+      terdekat = marker;
+    }
+  });
+
+  if (terdekat) {
+    map.setView(terdekat.getLatLng(), 18);
+
+    terdekat.openPopup();
+
+    alert(
+      "SPBU terdekat: " +
+        terdekat.spbuData.nama_spbu +
+        "\nJarak: " +
+        jarakMin.toFixed(2) +
+        " km",
+    );
+  }
+}
+
+function getMarkerTerdekat() {
+  let terdekat = null;
+
+  let jarakMin = Infinity;
+
+  markerGroup.eachLayer(function (marker) {
+    let lat = marker.getLatLng().lat;
+
+    let lng = marker.getLatLng().lng;
+
+    let jarak = hitungJarak(userLat, userLng, lat, lng);
+
+    if (jarak < jarakMin) {
+      jarakMin = jarak;
+
+      terdekat = marker;
+    }
+  });
+
+  return terdekat;
+}
+
+function buatRuteTerdekat() {
+  if (userLat === null) {
+    alert("Klik Lokasi Saya terlebih dahulu");
+
+    return;
+  }
+
+  let marker = getMarkerTerdekat();
+
+  if (!marker) {
+    alert("Tidak ada SPBU ditemukan");
+
+    return;
+  }
+
+  if (routingControl) {
+    map.removeControl(routingControl);
+  }
+
+  routingControl = L.Routing.control({
+    show: false,
+
+    collapsible: true,
+    waypoints: [
+      L.latLng(userLat, userLng),
+
+      L.latLng(marker.getLatLng().lat, marker.getLatLng().lng),
+    ],
+
+    router: L.Routing.osrmv1({
+      serviceUrl: "https://router.project-osrm.org/route/v1",
+    }),
+
+    routeWhileDragging: false,
+
+    addWaypoints: false,
+
+    draggableWaypoints: false,
+  }).addTo(map);
+}
+
+document.addEventListener("change", function (e) {
+  if (e.target.id !== "foto") return;
+
+  let file = e.target.files[0];
+
+  if (!file) return;
+
+  let preview = document.getElementById("previewFoto");
+
+  preview.src = URL.createObjectURL(file);
+
+  preview.classList.remove("hidden");
+});
+
+document.addEventListener("change", function (e) {
+  if (e.target.id !== "edit_foto") return;
+
+  let file = e.target.files[0];
+
+  if (!file) return;
+
+  let preview = document.getElementById("preview_edit_foto");
+
+  preview.src = URL.createObjectURL(file);
+
+  preview.classList.remove("hidden");
+});
+
+document.addEventListener("change", function (e) {
+  if (e.target.id !== "edit_24jam") return;
+
+  let checked = e.target.checked;
+
+  document.getElementById("edit_jam_buka").disabled = checked;
+
+  document.getElementById("edit_jam_tutup").disabled = checked;
+});
+
+function isBuka(spbu) {
+  if (spbu.buka_24_jam == 1) {
+    return true;
+  }
+
+  if (!spbu.jam_buka || !spbu.jam_tutup) {
+    return false;
+  }
+
+  let now = new Date().toTimeString().substring(0, 5);
+
+  let buka = spbu.jam_buka.substring(0, 5);
+
+  let tutup = spbu.jam_tutup.substring(0, 5);
+
+  if (buka < tutup) {
+    return now >= buka && now <= tutup;
+  }
+
+  return now >= buka || now <= tutup;
+}
+
+function filterSPBU() {
+  let filter = document.getElementById("filter_spbu").value;
+
+  markerGroup.clearLayers();
+
+  Object.values(markerData).forEach(function (marker) {
+    let spbu = marker.spbuData;
+
+    let tampil = false;
+
+    if (filter == "all") {
+      tampil = true;
+    }
+
+    if (filter == "24" && spbu.buka_24_jam == 1) {
+      tampil = true;
+    }
+
+    if (filter == "non24" && spbu.buka_24_jam == 0) {
+      tampil = true;
+    }
+
+    if (filter == "buka" && isBuka(spbu)) {
+      tampil = true;
+    }
+
+    if (filter == "tutup" && !isBuka(spbu)) {
+      tampil = true;
+    }
+
+    if (tampil) {
+      marker.addTo(markerGroup);
+    }
+  });
+}
+
+function toggleMode() {
+  modeAdmin = !modeAdmin;
+
+  let btn = document.getElementById("btnMode");
+
+  let banner = document.getElementById("bannerMode");
+
+  if (modeAdmin) {
+    banner.classList.add("hidden");
+
+    btn.innerHTML = "Pindah ke Mode Lihat";
+
+    btn.classList.remove("bg-green-600");
+
+    btn.classList.add("bg-blue-600");
+
+    status.className =
+      "bg-blue-100 text-blue-700 px-3 py-2 rounded font-semibold";
+  } else {
+    banner.classList.remove("hidden");
+
+    btn.innerHTML = "Masuk Mode Admin";
+
+    btn.classList.remove("bg-blue-600");
+
+    btn.classList.add("bg-yellow-600");
+
+    status.innerHTML = "View";
+
+    status.className =
+      "bg-yellow-100 text-yellow-700 px-3 py-2 rounded font-semibold";
+
+    tutupSidebar();
+
+    map.closePopup();
+  }
+  loadSPBU();
+  loadObjekPeta();
+  updateModeUI();
+}
+
+function updateModeUI() {
+  let status = document.getElementById("statusMode");
+
+  let banner = document.getElementById("bannerMode");
+
+  if (modeAdmin) {
+    status.innerHTML = "🔓 ADMIN";
+
+    banner.classList.add("hidden");
+  } else {
+    status.innerHTML = "👁️ VIEW";
+
+    banner.classList.remove("hidden");
+  }
+}
+
+function loadObjekPeta() {
+  fetch("api/get_objek.php")
+    .then((res) => res.json())
+
+    .then((data) => {
+      drawnItems.clearLayers();
+
+      data.forEach((obj) => {
+        let geo = JSON.parse(obj.geojson);
+
+        let layer = L.geoJSON(geo);
+
+        layer.eachLayer(function (l) {
+          l.objekId = obj.id;
+
+            l.on("click", function (e) {
+            L.DomEvent.stopPropagation(e);
+
+            l.bindPopup(`
+                    <b>${obj.nama || "-"}</b>
+                    <br>
+                    ${obj.deskripsi || "-"}
+                `);
+
+            l.openPopup();
+            });
+
+            l.on("dblclick", function (e) {
+              L.DomEvent.stopPropagation(e);
+
+              if (!modeAdmin) {
+                return;
+              }
+
+              openObjekSidebar(obj, l);
+            });
+
+          drawnItems.addLayer(l);
+        });
+      });
+    });
+}
+
+map.on(L.Draw.Event.CREATED, function (e) {
+  let layer = e.layer;
+
+  drawnItems.addLayer(layer);
+
+  currentObjekLayer = layer;
+
+  document.getElementById("sidebarObjek").classList.remove("hidden");
+  document.getElementById("objek_id").value = "";
+  document.getElementById("objek_nama").value = "";
+  document.getElementById("objek_deskripsi").value = "";
+  document.getElementById("objek_tipe").value = layer.toGeoJSON().geometry.type;
+});
+
+map.on("draw:edited", function (e) {
+  e.layers.eachLayer(function (layer) {
+    let geojson = JSON.stringify(layer.toGeoJSON());
+
+    fetch("api/update_objek.php", {
+      method: "POST",
+
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+
+      body: "id=" + layer.objekId + "&geojson=" + encodeURIComponent(geojson),
+    });
+  });
+});
+
+map.on("draw:deleted", function (e) {
+  e.layers.eachLayer(function (layer) {
+    fetch("api/hapus_objek.php", {
+      method: "POST",
+
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+
+      body: "id=" + layer.objekId,
+    });
+  });
+});
+
+function openObjekSidebar(obj, layer) {
+  currentObjekLayer = layer;
+
+  document.getElementById("sidebarObjek").classList.remove("hidden");
+
+  document.getElementById("objek_id").value = obj.id;
+
+  document.getElementById("objek_nama").value = obj.nama || "";
+
+  document.getElementById("objek_deskripsi").value = obj.deskripsi || "";
+
+  document.getElementById("objek_tipe").value = obj.tipe;
+}
+
+function tutupSidebarObjek() {
+  document.getElementById("sidebarObjek").classList.add("hidden");
+
+  currentObjekLayer = null;
+}
+
+function updateObjek() {
+  let id = document.getElementById("objek_id").value;
+
+  let nama = document.getElementById("objek_nama").value;
+
+  let deskripsi = document.getElementById("objek_deskripsi").value;
+
+  let tipe = document.getElementById("objek_tipe").value;
+
+  if (id == "") {
+    let geojson = JSON.stringify(currentObjekLayer.toGeoJSON());
+
+    fetch("api/simpan_objek.php", {
+      method: "POST",
+
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+
+      body:
+        "nama=" +
+        encodeURIComponent(nama) +
+        "&deskripsi=" +
+        encodeURIComponent(deskripsi) +
+        "&tipe=" +
+        tipe +
+        "&geojson=" +
+        encodeURIComponent(geojson),
+    })
+      .then((res) => res.json())
+
+      .then((data) => {
+        alert("Objek berhasil disimpan");
+
+        tutupSidebarObjek();
+
+        loadObjekPeta();
+      });
+  } else {
+    fetch("api/update_objek.php", {
+      method: "POST",
+
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+
+      body:
+        "id=" +
+        id +
+        "&nama=" +
+        encodeURIComponent(nama) +
+        "&deskripsi=" +
+        encodeURIComponent(deskripsi),
+    })
+      .then((res) => res.json())
+
+      .then((data) => {
+        alert("Objek berhasil diperbarui");
+
+        tutupSidebarObjek();
+
+        loadObjekPeta();
+      });
+  }
+}
diff --git a/database.sql b/database.sql
new file mode 100644
index 0000000..94041a9
--- /dev/null
+++ b/database.sql
@@ -0,0 +1,23 @@
+CREATE TABLE spbu (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama_spbu VARCHAR(100),
+    alamat TEXT,
+    latitude DOUBLE,
+    longitude DOUBLE,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+ALTER TABLE spbu
+ADD foto VARCHAR(255);
+
+ALTER TABLE spbu
+ADD buka_24_jam TINYINT(1) DEFAULT 0,
+ADD jam_buka TIME,
+ADD jam_tutup TIME;
+
+CREATE TABLE objek_peta (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama VARCHAR(100),
+    tipe VARCHAR(20),
+    geojson LONGTEXT
+);
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..0d2ee2e
--- /dev/null
+++ b/index.php
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
+
+    <style>
+    #map {
+        height: 100vh;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="flex h-screen">
+
+        <div class="flex-1 relative">
+
+            <div style="
+                position:absolute;
+                top:15px;
+                left:60px;
+                z-index:9999;
+                background:white;
+                padding:10px;
+                border-radius:8px;
+                box-shadow:0 2px 8px rgba(0,0,0,.2);
+                ">
+
+                <div style="margin-bottom:10px;">
+
+                    <h1 style="
+                        font-size:24px;
+                        font-weight:bold;
+                        color:#2563eb;
+                        margin:0;
+                    ">
+                        Dashboard WebGIS SPBU
+                    </h1>
+
+                    <p style="
+                        margin:0;
+                        color:#666;
+                        font-size:14px;
+                    ">
+                        Sistem Informasi Geografis Pemetaan dan Pencarian Lokasi SPBU
+                    </p>
+
+                    <p style="
+                        margin:3px 0 0 0;
+                        color:#999;
+                        font-size:12px;
+                    ">
+                        Clara Oxana Azalia | D1041231051
+                    </p>
+
+                </div>
+
+                <!-- toolbar -->
+                <div class="flex gap-2">
+
+                    <input type="text" id="search_spbu" placeholder="Cari SPBU..." class="border p-2 rounded">
+
+                    <button onclick="cariSPBU()" class="bg-blue-500 text-white px-3 rounded">
+                        Cari
+                    </button>
+
+                    <button onclick="lokasiSaya()" class="bg-green-500 text-white px-3 rounded">
+                        Lokasi Saya
+                    </button>
+
+                    <button onclick="cariTerdekat()" class="bg-red-500 text-white px-3 rounded">
+                        SPBU Terdekat
+                    </button>
+
+                    <button onclick="buatRuteTerdekat()" class="bg-purple-500 text-white px-3 rounded">
+
+                        Rute
+
+                    </button>
+
+                    <select id="filter_spbu" onchange="filterSPBU()" class="border p-2 rounded">
+
+                        <option value="all">
+                            Semua SPBU
+                        </option>
+
+                        <option value="24">
+                            SPBU 24 Jam
+                        </option>
+
+                        <option value="non24">
+                            Non 24 Jam
+                        </option>
+
+                        <option value="buka">
+                            Sedang Buka
+                        </option>
+
+                        <option value="tutup">
+                            Sedang Tutup
+                        </option>
+
+                    </select>
+
+                    <button onclick="toggleMode()" id="btnMode" class="bg-blue-600 text-white px-3 rounded">
+
+                        Ganti Mode
+
+                    </button>
+                    <span id="statusMode" class="bg-blue-100 text-blue-700 px-3 py-2 rounded font-semibold">
+
+                        🔓 ADMIN
+
+                    </span>
+
+                </div>
+
+            </div>
+
+            <div style="
+                position:absolute;
+                bottom:20px;
+                left:20px;
+                z-index:9999;
+                background:white;
+                padding:12px;
+                border-radius:8px;
+                box-shadow:0 2px 8px rgba(0,0,0,.2);
+                ">
+
+                <h3 class="font-bold mb-2">
+                    Keterangan
+                </h3>
+
+                <div class="flex items-center gap-2 mb-1">
+
+                    <span class="w-4 h-4 bg-green-500 rounded-full"></span>
+
+                    SPBU 24 Jam
+
+                </div>
+
+                <div class="flex items-center gap-2">
+
+                    <span class="w-4 h-4 bg-red-500 rounded-full"></span>
+
+                    SPBU Non 24 Jam
+
+                </div>
+
+            </div>
+
+            <div id="bannerMode" class="hidden" style="
+                position:absolute;
+                top:120px;
+                left:50%;
+                transform:translateX(-50%);
+                z-index:99999;
+                ">
+
+            </div>
+
+            <div id="map" class="h-full"></div>
+
+        </div>
+
+        <!-- edit -->
+        <div id="sidebar" class="w-96 bg-white shadow-lg p-5 hidden overflow-y-auto">
+
+            <h2 class="text-xl font-bold mb-4">
+                Edit SPBU
+            </h2>
+
+            <input type="hidden" id="edit_id">
+
+            <label class="block mb-1">
+                Nama SPBU
+            </label>
+
+            <input id="edit_nama" class="w-full border p-2 rounded mb-3">
+
+            <label class="block mb-1">
+                Alamat
+            </label>
+
+            <textarea id="edit_alamat" class="w-full border p-2 rounded mb-3"></textarea>
+
+            <label class="block mb-1">
+                Foto SPBU
+            </label>
+
+            <img id="preview_edit_foto" src="" class="w-full h-40 object-cover rounded mb-2 hidden">
+
+            <input type="file" id="edit_foto" class="w-full border p-2 rounded mb-3">
+
+            <label class="block mb-1">
+                Jam Buka
+            </label>
+
+            <input type="time" id="edit_jam_buka" class="w-full border p-2 rounded mb-3">
+
+            <label class="block mb-1">
+                Jam Tutup
+            </label>
+
+            <input type="time" id="edit_jam_tutup" class="w-full border p-2 rounded mb-3">
+
+            <label class="flex items-center gap-2 mb-3">
+
+                <input type="checkbox" id="edit_24jam">
+
+                Buka 24 Jam
+
+            </label>
+
+            <label class="block mb-1">
+                Latitude
+            </label>
+
+            <input id="edit_lat" class="w-full border p-2 rounded mb-3">
+
+            <label class="block mb-1">
+                Longitude
+            </label>
+
+            <input id="edit_lng" class="w-full border p-2 rounded mb-3">
+
+            <div class="flex gap-2">
+
+                <button onclick="updateSPBU()" class="bg-blue-500 text-white px-4 py-2 rounded">
+
+                    Simpan
+                </button>
+
+                <button onclick="tutupSidebar()" class="bg-gray-500 text-white px-4 py-2 rounded">
+
+                    Tutup
+                </button>
+
+            </div>
+
+        </div>
+        <div id="sidebarObjek" class="w-96 bg-white shadow-lg p-5 hidden overflow-y-auto">
+
+            <h2 class="text-xl font-bold mb-4">
+                Edit Objek Peta
+            </h2>
+
+            <input type="hidden" id="objek_id">
+
+            <label class="block mb-1">
+                Nama Objek
+            </label>
+
+            <input id="objek_nama" class="w-full border p-2 rounded mb-3">
+
+            <label class="block mb-1">
+                Deskripsi
+            </label>
+
+            <textarea id="objek_deskripsi" class="w-full border p-2 rounded mb-3"></textarea>
+
+            <label class="block mb-1">
+                Tipe
+            </label>
+
+            <input id="objek_tipe" readonly class="w-full border p-2 rounded mb-3 bg-gray-100">
+
+            <div class="flex gap-2">
+
+                <button onclick="updateObjek()" class="bg-blue-500 text-white px-4 py-2 rounded">
+
+                    Simpan
+
+                </button>
+
+                <button onclick="tutupSidebarObjek()" class="bg-gray-500 text-white px-4 py-2 rounded">
+
+                    Tutup
+
+                </button>
+
+            </div>
+
+        </div>
+    </div>
+
+
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
+    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
+
+    <script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
+
+    <script src="assets/js/map.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/koneksi.php b/koneksi.php
new file mode 100644
index 0000000..9e78397
--- /dev/null
+++ b/koneksi.php
@@ -0,0 +1,12 @@
+<?php
+
+$conn = mysqli_connect(
+    "localhost",
+    "root",
+    "",
+    "gis_spbu"
+);
+
+if(!$conn){
+    die(mysqli_connect_error());
+}
\ No newline at end of file
diff --git a/uploads/spbu/1781102052_spbu-pertamina_169.jpeg b/uploads/spbu/1781102052_spbu-pertamina_169.jpeg
new file mode 100644
index 0000000..62658a4
Binary files /dev/null and b/uploads/spbu/1781102052_spbu-pertamina_169.jpeg differ
diff --git a/uploads/spbu/1781103877_WhatsApp-Image-2020-12-24-at-11.19.34.jpeg b/uploads/spbu/1781103877_WhatsApp-Image-2020-12-24-at-11.19.34.jpeg
new file mode 100644
index 0000000..c8fcfd6
Binary files /dev/null and b/uploads/spbu/1781103877_WhatsApp-Image-2020-12-24-at-11.19.34.jpeg differ