AufaHafizah/WebGIS_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add file

Browse Source
This commit is contained in:
AufaHafizah
2026-06-10 19:26:40 +07:00
parent 02c8394972
commit 7e2d324c2e
49 changed files with 6334 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
04/ambil.php
+12
View File
@@ -0,0 +1,12 @@
<?php
include 'koneksi.php';
$data = [];
$result = $conn->query("SELECT * FROM spbu");
while($row = $result->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data);
?>
04/ambildata.php
+13
View File
@@ -0,0 +1,13 @@
<?php
include 'koneksi.php';
$result = $conn->query("SELECT * FROM spbu");
$data = [];
while($row = $result->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data);
?>
04/edit.php
+19
View File
@@ -0,0 +1,19 @@
<?php
include 'koneksi.php';
$id = $_POST['id'];
$nama = $_POST['nama_spbu'];
$wa = $_POST['no_wa'];
$status = $_POST['status'];
$buka24 = $_POST['buka_24jam'];
$sql = "UPDATE spbu
SET nama_spbu='$nama', no_wa='$wa', status='$status', buka_24jam='$buka24'
WHERE id='$id'";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error;
}
?>
04/hapus.html
+13
View File
@@ -0,0 +1,13 @@
<?php
include 'koneksi.php';
$id = $_POST['id'];
$sql = "DELETE FROM spbu WHERE id='$id'";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error;
}
?>
04/hapus.php
+13
View File
@@ -0,0 +1,13 @@
<?php
include 'koneksi.php';
$id = $_POST['id'];
$sql = "DELETE FROM spbu WHERE id='$id'";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error;
}
?>
04/index.html
+80
View File
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start - Leaflet</title>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 400px;
width: 600px;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
const map = L.map('map').setView([-0.0552679922693441, 109.34961134769004], 13);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
const marker = L.marker([-0.0552679922693441, 109.34961134769004]).addTo(map)
.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
const circle = L.circle([-0.056, 109.35], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map).bindPopup('I am a circle.');
const polygon = L.polygon([
[-0.054, 109.34],
[-0.057, 109.36],
[-0.052, 109.355]
]).addTo(map).bindPopup('I am a polygon.');
const popup = L.popup()
.setLatLng([51.513, -0.09])
.setContent('I am a standalone popup.')
.openOn(map);
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent(`You clicked the map at ${e.latlng.toString()}`)
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>
04/index.php
+252
View File
@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html>
<head>
<title>Peta SPBU</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { height: 100vh; }
/* Custom styling untuk Layers Control */
.leaflet-control-layers {
border-radius: 8px !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}
.leaflet-control-layers-expanded {
padding: 10px 14px !important;
font-size: 13px !important;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// ================= MAP =================
var map = L.map('map').setView([-0.055353822919599796, 109.3495577035227], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
// ================= ICON =================
// SPBU 24 Jam - Hijau
var icon24Jam = L.icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
// SPBU Tidak 24 Jam - Merah
var iconTidak24Jam = L.icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
// ================= LAYER GROUPS =================
var layer24Jam = L.layerGroup().addTo(map); // tampil by default
var layerTidak24Jam = L.layerGroup().addTo(map); // tampil by default
// ================= LAYERS CONTROL =================
var overlayMaps = {
"🟢 SPBU Buka 24 Jam" : layer24Jam,
"🔴 SPBU Tidak Buka 24 Jam" : layerTidak24Jam
};
L.control.layers(null, overlayMaps, {
collapsed: false, // langsung tampil (tidak perlu klik expand)
position: 'topright'
}).addTo(map);
// ================= LOAD DATA =================
function loadData() {
// Bersihkan layer sebelum reload
layer24Jam.clearLayers();
layerTidak24Jam.clearLayers();
$.getJSON("ambil.php", function(data) {
data.forEach(function(d) {
var adalah24Jam = (d.buka_24jam === "yes");
var icon = adalah24Jam ? icon24Jam : iconTidak24Jam;
var targetLayer = adalah24Jam ? layer24Jam : layerTidak24Jam;
var marker = L.marker([d.lat, d.lng], {
icon: icon,
draggable: true
}).addTo(targetLayer);
// Simpan id & jenis di marker
marker.spbu_id = d.id;
marker.spbu_24jam = d.buka_24jam;
// ---- Popup edit + hapus ----
var labelStatus = adalah24Jam
? '<span style="color:green;font-weight:bold;">✅ Buka 24 Jam</span>'
: '<span style="color:red;font-weight:bold;">🔴 Tidak Buka 24 Jam</span>';
var popup = `
<form onsubmit="updateData(event, ${d.id})">
<b>Edit SPBU</b><br>
<small>${labelStatus}</small><br><br>
Nama:<br>
<input type="text" name="nama_spbu" value="${d.nama_spbu}" required style="width:180px"><br><br>
WA:<br>
<input type="text" name="no_wa" value="${d.no_wa}" required style="width:180px"><br><br>
Status Operasional:<br>
<select name="status">
<option value="yes" ${d.status=="yes"?"selected":""}>Beroperasi (Yes)</option>
<option value="no" ${d.status=="no" ?"selected":""}>Tidak Beroperasi (No)</option>
</select><br><br>
Jenis SPBU:<br>
<select name="buka_24jam">
<option value="yes" ${d.buka_24jam=="yes"?"selected":""}>Buka 24 Jam</option>
<option value="no" ${d.buka_24jam=="no" ?"selected":""}>Tidak Buka 24 Jam</option>
</select><br><br>
<button type="submit"
style="background:#2196F3;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;margin-right:6px">
Update
</button>
<button type="button" onclick="hapusData(${d.id})"
style="background:#f44336;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer">
Hapus
</button>
</form>
`;
marker.bindPopup(popup);
// ---- Drag → update koordinat ----
marker.on('dragend', function() {
var pos = marker.getLatLng();
$.post("update.php", {
id: d.id,
lat: pos.lat,
lng: pos.lng
});
});
});
});
}
loadData();
// ================= TAMBAH DATA (klik peta) =================
map.on('click', function(e) {
var form = `
<form id="formSPBU">
<b>Tambah SPBU</b><br><br>
Nama:<br>
<input type="text" name="nama_spbu" required style="width:180px"><br><br>
WA:<br>
<input type="text" name="no_wa" required style="width:180px"><br><br>
Status Operasional:<br>
<select name="status">
<option value="yes">Beroperasi (Yes)</option>
<option value="no">Tidak Beroperasi (No)</option>
</select><br><br>
Jenis SPBU:<br>
<select name="buka_24jam">
<option value="yes">Buka 24 Jam</option>
<option value="no">Tidak Buka 24 Jam</option>
</select><br><br>
<input type="hidden" name="lat" value="${e.latlng.lat}">
<input type="hidden" name="lng" value="${e.latlng.lng}">
<button type="submit"
style="background:#4CAF50;color:#fff;border:none;padding:6px 14px;border-radius:4px;cursor:pointer">
Simpan
</button>
</form>
`;
L.popup().setLatLng(e.latlng).setContent(form).openOn(map);
});
// ================= SIMPAN =================
$(document).on('submit', '#formSPBU', function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.post("simpan.php", formData, function(res) {
if (res.trim() === "success") {
alert("✅ Data berhasil disimpan");
map.closePopup();
loadData(); // reload marker tanpa refresh halaman
} else {
alert("❌ ERROR: " + res);
}
});
});
// ================= UPDATE DATA =================
function updateData(e, id) {
e.preventDefault();
var form = e.target;
var data = $(form).serialize() + "&id=" + id;
$.post("edit.php", data, function(res) {
if (res.trim() === "success") {
alert("✅ Data diupdate");
map.closePopup();
loadData(); // reload marker supaya ikon/layer langsung berubah
} else {
alert("❌ " + res);
}
});
}
// ================= HAPUS =================
function hapusData(id) {
if (confirm("Yakin hapus data ini?")) {
$.post("hapus.php", { id: id }, function(res) {
if (res.trim() === "success") {
map.closePopup();
loadData();
alert("✅ Data dihapus");
} else {
alert("❌ Gagal: " + res);
}
});
}
}
</script>
</body>
</html>
04/koneksi.php
+15
View File
@@ -0,0 +1,15 @@
<?php
$host = getenv('DB_HOST') ?: 'localhost';
$user = getenv('DB_USER') ?: 'root';
$pass = getenv('DB_PASSWORD');
$pass = ($pass === false) ? '' : $pass;
$db = getenv('DB_NAME') ?: 'spbu_db';
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Koneksi database gagal: " . $conn->connect_error);
}
$conn->set_charset("utf8mb4");
?>
04/simpan.php
+19
View File
@@ -0,0 +1,19 @@
<?php
include 'koneksi.php';
$nama = $_POST['nama_spbu'];
$wa = $_POST['no_wa'];
$status = $_POST['status'];
$buka24 = $_POST['buka_24jam'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];
$sql = "INSERT INTO spbu (nama_spbu, no_wa, status, buka_24jam, lat, lng)
VALUES ('$nama', '$wa', '$status', '$buka24', '$lat', '$lng')";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error;
}
?>
04/simpandata.php
+24
View File
@@ -0,0 +1,24 @@
<?php
include 'koneksi.php';
// DEBUG: cek apakah data terkirim
if (!isset($_POST['nama_spbu'])) {
echo "error: data tidak masuk";
exit;
}
$nama = $_POST['nama_spbu'];
$wa = $_POST['no_wa'];
$status = $_POST['status'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];
$sql = "INSERT INTO spbu (nama_spbu, no_wa, status, lat, lng)
VALUES ('$nama', '$wa', '$status', '$lat', '$lng')";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error; // 🔥 ini penting
}
?>
04/spbu_db.sql
+77
View File
@@ -0,0 +1,77 @@
-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 07, 2026 at 08:36 AM
-- Server version: 10.4.32-MariaDB
-- PHP Version: 8.2.12
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `spbu_db`
--
CREATE DATABASE IF NOT EXISTS `spbu_db` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `spbu_db`;
-- --------------------------------------------------------
--
-- Table structure for table `spbu`
--
CREATE TABLE `spbu` (
`id` int(11) NOT NULL,
`nama_spbu` varchar(100) NOT NULL,
`no_wa` varchar(20) NOT NULL,
`status` enum('yes','no') NOT NULL,
`lat` double NOT NULL,
`lng` double NOT NULL,
`buka_24jam` enum('yes','no') DEFAULT 'no'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Dumping data for table `spbu`
--
INSERT INTO `spbu` (`id`, `nama_spbu`, `no_wa`, `status`, `lat`, `lng`, `buka_24jam`) VALUES
(1, 'SPBU Wahidin', '12345678', 'yes', -0.05501782621888551, 109.34941275816585, 'no'),
(2, 'SPBU Ayani', '12323534', 'yes', -0.061969576295016156, 109.35348997289081, 'no'),
(3, 'SPBU Wahidin', '12345678', 'yes', -0.05553003299958369, 109.34949398529896, 'no'),
(4, 'SPBU Wahidin', '12345678', 'yes', -0.05518676231453869, 109.34936525640107, 'no'),
(5, 'SPBU Ayani', '12345678', 'no', -0.05385658839135921, 109.35633076365197, 'no');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `spbu`
--
ALTER TABLE `spbu`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `spbu`
--
ALTER TABLE `spbu`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
04/update.php
+15
View File
@@ -0,0 +1,15 @@
<?php
include 'koneksi.php';
$id = $_POST['id'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];
$sql = "UPDATE spbu SET lat='$lat', lng='$lng' WHERE id='$id'";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error;
}
?>