commit 62041a76aec8f921150c62ec68e9d51d24dbc0a0
Author: Kris <d1041231050@student.untan.ac.id>
Date:   Sat Jun 6 14:14:49 2026 +0000

    Upload files to "/"

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..305d0fd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,21 @@
+# Project 1 - WebGIS Pemetaan SPBU
+
+Project ini khusus untuk memetakan lokasi SPBU menggunakan marker.
+
+## Database
+
+Import file `database.sql` ke phpMyAdmin. Database yang dibuat adalah:
+
+`webgis_spbu_p1`
+
+Tabel utama:
+
+`spbu`
+
+## Cara Menjalankan
+
+1. Letakkan folder ini di `htdocs`.
+2. Jalankan Apache dan MySQL.
+3. Import `database.sql`.
+4. Buka `http://localhost/webgis_pisah/project_01_webgis_spbu/`.
+5. Gunakan tool marker di peta untuk menambah data SPBU.
diff --git a/api.php b/api.php
new file mode 100644
index 0000000..7002d69
--- /dev/null
+++ b/api.php
@@ -0,0 +1,65 @@
+<?php
+include 'connect.php';
+header('Content-Type: application/json; charset=utf-8');
+
+$action = $_GET['action'] ?? '';
+
+if ($action === 'tampil') {
+    $sql = "SELECT * FROM spbu ORDER BY id DESC";
+    $result = $conn->query($sql);
+    $data = [];
+
+    while ($row = $result->fetch_assoc()) {
+        $data[] = $row;
+    }
+
+    echo json_encode($data);
+}
+elseif ($action === 'simpan') {
+    $nama_spbu = trim($_POST['nama_spbu'] ?? '');
+    $alamat = trim($_POST['alamat'] ?? '');
+    $status_24_jam = $_POST['status_24_jam'] ?? 'Tidak';
+    $kontak = trim($_POST['kontak'] ?? '');
+    $geojson = $_POST['geojson'] ?? '';
+
+    if ($nama_spbu === '' || $geojson === '') {
+        echo json_encode(["status" => "error", "message" => "Nama SPBU dan lokasi wajib diisi."]);
+        exit;
+    }
+
+    $stmt = $conn->prepare("INSERT INTO spbu (nama_spbu, alamat, status_24_jam, kontak, geojson) VALUES (?, ?, ?, ?, ?)");
+    $stmt->bind_param("sssss", $nama_spbu, $alamat, $status_24_jam, $kontak, $geojson);
+
+    if ($stmt->execute()) {
+        echo json_encode(["status" => "success"]);
+    } else {
+        echo json_encode(["status" => "error", "message" => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+elseif ($action === 'hapus') {
+    $id = intval($_POST['id'] ?? 0);
+
+    if ($id <= 0) {
+        echo json_encode(["status" => "error", "message" => "ID tidak valid."]);
+        exit;
+    }
+
+    $stmt = $conn->prepare("DELETE FROM spbu WHERE id = ?");
+    $stmt->bind_param("i", $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(["status" => "success"]);
+    } else {
+        echo json_encode(["status" => "error", "message" => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+else {
+    echo json_encode(["status" => "error", "message" => "Action tidak dikenali."]);
+}
+
+$conn->close();
+?>
diff --git a/connect.php b/connect.php
new file mode 100644
index 0000000..c6ee073
--- /dev/null
+++ b/connect.php
@@ -0,0 +1,16 @@
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "webgis_spbu_p1";
+
+$conn = new mysqli($host, $user, $pass, $db);
+
+if ($conn->connect_error) {
+    http_response_code(500);
+    die(json_encode([
+        "status" => "error",
+        "message" => "Koneksi database gagal: " . $conn->connect_error
+    ]));
+}
+?>
diff --git a/database.sql b/database.sql
new file mode 100644
index 0000000..70647f0
--- /dev/null
+++ b/database.sql
@@ -0,0 +1,18 @@
+CREATE DATABASE IF NOT EXISTS webgis_spbu_p1;
+USE webgis_spbu_p1;
+
+DROP TABLE IF EXISTS spbu;
+CREATE TABLE spbu (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama_spbu VARCHAR(150) NOT NULL,
+    alamat TEXT NULL,
+    status_24_jam ENUM('Ya', 'Tidak') NOT NULL DEFAULT 'Tidak',
+    kontak VARCHAR(50) NULL,
+    geojson LONGTEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+);
+
+INSERT INTO spbu (nama_spbu, alamat, status_24_jam, kontak, geojson) VALUES
+('SPBU Ahmad Yani', 'Jl. Ahmad Yani, Pontianak', 'Ya', '081234567890', '{"type":"Point","coordinates":[109.3425,-0.0442]}'),
+('SPBU Gajah Mada', 'Jl. Gajah Mada, Pontianak', 'Tidak', '081234567891', '{"type":"Point","coordinates":[109.3338,-0.0271]}');
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f33665d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project 1 - WebGIS Pemetaan SPBU</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
+    <style>
+        body { margin: 0; font-family: Arial, sans-serif; }
+        #map { height: 100vh; width: 100%; }
+        .title-box {
+            position: absolute; top: 10px; left: 55px; z-index: 999;
+            background: white; padding: 10px 14px; border-radius: 6px;
+            box-shadow: 0 2px 10px rgba(0,0,0,.2);
+        }
+        .title-box h3 { margin: 0 0 4px; }
+        .title-box p { margin: 0; font-size: 13px; color: #555; }
+        .popup-form label { font-weight: bold; font-size: 13px; }
+        .popup-form input, .popup-form select, .popup-form textarea {
+            width: 100%; padding: 7px; margin: 4px 0 9px;
+            box-sizing: border-box;
+        }
+        .popup-form button, .btn-delete {
+            border: 0; padding: 7px 12px; border-radius: 4px; cursor: pointer;
+            background: #0d6efd; color: white;
+        }
+        .btn-delete { background: #dc3545; }
+    </style>
+</head>
+<body>
+<div class="title-box">
+    <h3>Project 1 - WebGIS SPBU</h3>
+    <p>Gunakan tool marker untuk menambahkan lokasi SPBU.</p>
+</div>
+<div id="map"></div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+<script>
+    const map = L.map('map').setView([-0.0227, 109.3425], 13);
+
+    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+
+    const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        attribution: 'Tiles &copy; Esri'
+    });
+
+    const spbuLayer = new L.FeatureGroup().addTo(map);
+    L.control.layers({ 'OpenStreetMap': osm, 'Satellite': satellite }, { '📍 Data SPBU': spbuLayer }, { collapsed: false }).addTo(map);
+
+    const drawControl = new L.Control.Draw({
+        edit: false,
+        draw: {
+            marker: true,
+            polyline: false,
+            polygon: false,
+            rectangle: false,
+            circle: false,
+            circlemarker: false
+        }
+    });
+    map.addControl(drawControl);
+
+    map.on(L.Draw.Event.CREATED, function (e) {
+        const layer = e.layer;
+        const geojson = JSON.stringify(layer.toGeoJSON().geometry);
+        showForm(layer.getLatLng(), geojson);
+    });
+
+    function showForm(latlng, geojson) {
+        const html = `
+            <div class="popup-form">
+                <h3>Tambah Data SPBU</h3>
+                <label>Nama SPBU</label>
+                <input type="text" id="nama_spbu" placeholder="Contoh: SPBU Ahmad Yani">
+
+                <label>Alamat</label>
+                <textarea id="alamat" rows="2" placeholder="Alamat singkat"></textarea>
+
+                <label>Buka 24 Jam?</label>
+                <select id="status_24_jam">
+                    <option value="Ya">Ya</option>
+                    <option value="Tidak">Tidak</option>
+                </select>
+
+                <label>Kontak / No. WA</label>
+                <input type="text" id="kontak" placeholder="Opsional">
+
+                <textarea id="geojson" style="display:none">${geojson}</textarea>
+                <button onclick="simpanData()">Simpan</button>
+            </div>
+        `;
+        L.popup({ minWidth: 280 }).setLatLng(latlng).setContent(html).openOn(map);
+    }
+
+    function simpanData() {
+        const nama_spbu = document.getElementById('nama_spbu').value.trim();
+        const alamat = document.getElementById('alamat').value.trim();
+        const status_24_jam = document.getElementById('status_24_jam').value;
+        const kontak = document.getElementById('kontak').value.trim();
+        const geojson = document.getElementById('geojson').value;
+
+        if (!nama_spbu) {
+            alert('Nama SPBU wajib diisi!');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('nama_spbu', nama_spbu);
+        formData.append('alamat', alamat);
+        formData.append('status_24_jam', status_24_jam);
+        formData.append('kontak', kontak);
+        formData.append('geojson', geojson);
+
+        fetch('api.php?action=simpan', { method: 'POST', body: formData })
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    map.closePopup();
+                    loadData();
+                } else {
+                    alert(data.message || 'Gagal menyimpan data.');
+                }
+            })
+            .catch(() => alert('Gagal terhubung ke server.'));
+    }
+
+    function loadData() {
+        spbuLayer.clearLayers();
+
+        fetch('api.php?action=tampil')
+            .then(res => res.json())
+            .then(data => {
+                data.forEach(item => {
+                    if (!item.geojson) return;
+
+                    const geometry = JSON.parse(item.geojson);
+                    const warna = item.status_24_jam === 'Ya' ? 'green' : 'red';
+                    const icon = new L.Icon({
+                        iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${warna}.png`,
+                        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+                        iconSize: [25, 41],
+                        iconAnchor: [12, 41],
+                        popupAnchor: [1, -34],
+                        shadowSize: [41, 41]
+                    });
+
+                    const marker = L.geoJSON(geometry, {
+                        pointToLayer: function(feature, latlng) {
+                            return L.marker(latlng, { icon });
+                        }
+                    });
+
+                    marker.bindPopup(`
+                        <b>${item.nama_spbu}</b><br>
+                        <b>Alamat:</b> ${item.alamat || '-'}<br>
+                        <b>Buka 24 Jam:</b> ${item.status_24_jam}<br>
+                        <b>Kontak:</b> ${item.kontak || '-'}<br><br>
+                        <button class="btn-delete" onclick="hapusData(${item.id})">Hapus</button>
+                    `);
+
+                    marker.bindTooltip(item.nama_spbu);
+                    spbuLayer.addLayer(marker);
+                });
+            });
+    }
+
+    function hapusData(id) {
+        if (!confirm('Yakin ingin menghapus data SPBU ini?')) return;
+
+        const formData = new FormData();
+        formData.append('id', id);
+
+        fetch('api.php?action=hapus', { method: 'POST', body: formData })
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    map.closePopup();
+                    loadData();
+                } else {
+                    alert(data.message || 'Gagal menghapus data.');
+                }
+            });
+    }
+
+    loadData();
+</script>
+</body>
+</html>