Gladys23/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:
Gladys23
2026-06-10 18:07:01 +07:00
parent c4295c5395
commit 5257946cfa
69 changed files with 10741 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/Dockerfile
+8
View File
@@ -0,0 +1,8 @@
FROM php:8.2-apache
RUN docker-php-ext-install mysqli pdo pdo_mysql \
&& a2enmod rewrite
COPY . /var/www/html/
RUN chown -R www-data:www-data /var/www/html
01/ambil.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);
?>
01/edit.php
+14
View File
@@ -0,0 +1,14 @@
<?php
include 'koneksi.php';
$id = $_POST['id'];
$nama = $_POST['nama'];
$wa = $_POST['wa'];
$status = $_POST['status'];
$conn->query("UPDATE spbu SET
nama_spbu='$nama',
no_wa='$wa',
status='$status'
WHERE id=$id");
?>
01/hapus.php
+7
View File
@@ -0,0 +1,7 @@
<?php
include 'koneksi.php';
$id = $_GET['id'];
$conn->query("DELETE FROM spbu WHERE id=$id");
?>
01/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.0553, 109.3495], 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.0553, 109.3495]).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>
01/index.php
+195
View File
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html>
<head>
<title>GIS SPBU PRO FINAL</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
#map { height: 100vh; }
.btn {
padding: 4px 8px;
margin-top: 5px;
border: none;
cursor: pointer;
}
.edit { background: orange; color: white; }
.delete { background: red; color: white; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([-0.02, 109.34], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
let markers = [];
// ICON
const greenIcon = new L.Icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
iconSize: [32, 32]
});
const redIcon = new L.Icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
iconSize: [32, 32]
});
// ================= LOAD DATA =================
function loadData() {
markers.forEach(m => map.removeLayer(m));
markers = [];
fetch('ambil.php')
.then(res => res.json())
.then(data => {
data.forEach(d => {
let icon = d.status === 'yes' ? greenIcon : redIcon;
const marker = L.marker([d.latitude, d.longitude], {
icon: icon,
draggable: true
}).addTo(map);
// DRAG SIMPAN LOKASI (FIX)
marker.on('dragend', function(e){
const pos = e.target.getLatLng();
const dataSend = new URLSearchParams();
dataSend.append("id", d.id);
dataSend.append("lat", pos.lat);
dataSend.append("lng", pos.lng);
fetch('update_lokasi.php', {
method: 'POST',
body: dataSend
})
.then(res => res.text())
.then(res => {
console.log(res);
alert("Lokasi berhasil diupdate!");
});
});
marker.bindPopup(`
<b>${d.nama_spbu}</b><br>
WA: ${d.no_wa}<br>
24 Jam: <span style="color:${d.status === 'yes' ? 'green' : 'red'}">${d.status}</span><br>
<button class="btn edit" onclick="editData(${d.id}, '${d.nama_spbu}', '${d.no_wa}', '${d.status}')">Edit</button>
<button class="btn delete" onclick="hapusData(${d.id})">Hapus</button>
`);
markers.push(marker);
});
});
}
// ================= EDIT =================
function editData(id, nama, wa, status) {
const form = `
<form id="editForm">
Nama:<br>
<input type="text" name="nama" value="${nama}"><br>
WA:<br>
<input type="text" name="wa" value="${wa}"><br>
Status:<br>
<select name="status">
<option ${status=='yes'?'selected':''} value="yes">Yes</option>
<option ${status=='no'?'selected':''} value="no">No</option>
</select><br><br>
<button type="submit">Update</button>
</form>
`;
L.popup().setLatLng(map.getCenter()).setContent(form).openOn(map);
setTimeout(()=>{
document.getElementById('editForm').addEventListener('submit', function(e){
e.preventDefault();
const data = new FormData(this);
data.append('id', id);
fetch('edit.php', {
method:'POST',
body:data
}).then(()=>{
alert("Data diupdate!");
loadData();
});
});
},300);
}
// ================= HAPUS =================
function hapusData(id) {
if(confirm("Yakin hapus?")) {
fetch('hapus.php?id=' + id)
.then(()=>{
alert("Data dihapus!");
loadData();
});
}
}
// ================= TAMBAH =================
map.on('click', function(e) {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
const form = `
<form id="formInput">
Nama SPBU:<br>
<input type="text" name="nama_spbu" required><br>
No WA:<br>
<input type="text" name="no_wa" required><br>
Status:<br>
<select name="status">
<option value="yes">Yes</option>
<option value="no">No</option>
</select><br><br>
<input type="hidden" name="latitude" value="${lat}">
<input type="hidden" name="longitude" value="${lng}">
<button type="submit">Simpan</button>
</form>
`;
L.popup().setLatLng(e.latlng).setContent(form).openOn(map);
setTimeout(()=>{
document.getElementById('formInput').addEventListener('submit', function(ev){
ev.preventDefault();
const data = new FormData(this);
fetch('simpan.php',{
method:'POST',
body:data
}).then(()=>{
alert("Tersimpan!");
loadData();
});
});
},300);
});
loadData();
</script>
</body>
</html>
01/koneksi.php
+12
View File
@@ -0,0 +1,12 @@
<?php
$host = getenv('DB_HOST');
$user = getenv('DB_USER');
$pass = getenv('DB_PASSWORD');
$db = getenv('DB_NAME');
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
die("Koneksi database gagal: " . mysqli_connect_error());
}
?>
01/simpan.php
+18
View File
@@ -0,0 +1,18 @@
<?php
include 'koneksi.php';
$nama = $_POST['nama_spbu'];
$wa = $_POST['no_wa'];
$status = $_POST['status'];
$lat = $_POST['latitude'];
$lng = $_POST['longitude'];
$sql = "INSERT INTO spbu (nama_spbu, no_wa, status, latitude, longitude)
VALUES ('$nama', '$wa', '$status', '$lat', '$lng')";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error";
}
?>
01/update_lokasi.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 latitude='$lat', longitude='$lng' WHERE id='$id'";
if ($conn->query($sql)) {
echo "success";
} else {
echo "error: " . $conn->error;
}
?>