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
04/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
04/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);
?>
04/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");
?>
04/hapus.php
+7
View File
@@ -0,0 +1,7 @@
<?php
include 'koneksi.php';
$id = $_GET['id'];
$conn->query("DELETE FROM spbu WHERE id=$id");
?>
04/index.php
+344
View File
@@ -0,0 +1,344 @@
<!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;
}
body{
margin:0;
font-family:'Segoe UI',sans-serif;
}
/* tombol popup marker */
.btn{
padding:8px 14px;
border:none;
border-radius:10px;
cursor:pointer;
font-size:14px;
font-weight:700;
margin-top:8px;
margin-right:6px;
transition:.2s;
}
.btn:hover{
transform:translateY(-1px);
}
.edit{
background:#f59e0b;
color:white;
}
.delete{
background:#ef4444;
color:white;
}
/* popup utama */
.leaflet-popup-content-wrapper{
border-radius:24px;
box-shadow:0 14px 35px rgba(0,0,0,.18);
padding:0;
overflow:hidden;
}
/* ukuran NORMAL semua popup */
.leaflet-popup-content{
margin:0 !important;
min-width:300px;
max-width:360px;
padding:22px;
box-sizing:border-box;
}
.leaflet-popup-tip{
width:18px;
height:18px;
box-shadow:none;
}
/* close */
.leaflet-popup-close-button{
top:12px !important;
right:14px !important;
font-size:28px !important;
color:#888 !important;
}
/* form popup */
.leaflet-popup-content form{
display:flex;
flex-direction:column;
gap:12px;
}
.leaflet-popup-content label{
font-size:15px;
font-weight:700;
color:#333;
margin-bottom:-4px;
}
.leaflet-popup-content input,
.leaflet-popup-content select{
width:100%;
box-sizing:border-box;
padding:12px 14px;
border:1px solid #ddd;
border-radius:14px;
font-size:15px;
outline:none;
background:#fff;
}
.leaflet-popup-content input:focus,
.leaflet-popup-content select:focus{
border-color:#ff8a00;
box-shadow:0 0 0 4px rgba(255,138,0,.12);
}
.leaflet-popup-content button[type="submit"]{
margin-top:8px;
padding:13px;
border:none;
border-radius:16px;
background:linear-gradient(90deg,#ff9800,#ff6d00);
color:white;
font-size:17px;
font-weight:800;
cursor:pointer;
transition:.2s;
}
.leaflet-popup-content button[type="submit"]:hover{
transform:translateY(-1px);
}
/* popup marker info biar rapi */
.leaflet-popup-content b{
font-size:18px;
color:#111;
}
.leaflet-popup-content span{
font-weight:700;
}
/* layer control checkbox TIDAK DIUBAH */
.leaflet-control-layers{
border-radius:18px !important;
box-shadow:0 8px 22px rgba(0,0,0,.15);
overflow:hidden;
}
.leaflet-control-layers-expanded{
padding:12px;
font-size:15px;
}
</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);
// ================= LAYER GROUPS =================
const layer24Jam = L.layerGroup().addTo(map);
const layerNon24Jam = L.layerGroup().addTo(map);
// Overlay layers untuk Layers Control
const overlayLayers = {
"🟢 SPBU Buka 24 Jam" : layer24Jam,
"🔴 SPBU Tidak Buka 24 Jam" : layerNon24Jam
};
// Tambahkan Layers Control ke peta
L.control.layers(null, overlayLayers, { collapsed: false }).addTo(map);
// ================= 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]
});
let markerList = [];
// ================= LOAD DATA =================
function loadData() {
layer24Jam.clearLayers();
layerNon24Jam.clearLayers();
markerList = [];
fetch('ambil.php')
.then(res => res.json())
.then(data => {
data.forEach(d => {
const is24Jam = d.status === 'yes';
const icon = is24Jam ? greenIcon : redIcon;
const marker = L.marker([d.latitude, d.longitude], {
icon: icon,
draggable: true
});
// Tambahkan ke layer group yang sesuai
if (is24Jam) {
layer24Jam.addLayer(marker);
} else {
layerNon24Jam.addLayer(marker);
}
// DRAG SIMPAN LOKASI
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:${is24Jam ? 'green' : 'red'}">${is24Jam ? 'Ya' : 'Tidak'}</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>
`);
markerList.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 (Buka 24 Jam)</option>
<option ${status=='no'?'selected':''} value="no">No (Tidak 24 Jam)</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 (Buka 24 Jam)</option>
<option value="no">No (Tidak 24 Jam)</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>
04/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());
}
?>
04/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";
}
?>
04/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;
}
?>