Kris/Tugas01_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
Kris
2026-06-06 14:14:49 +00:00
commit 62041a76ae
5 changed files with 312 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+21
View File
@@ -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.
api.php
+65
View File
@@ -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();
?>
connect.php
+16
View File
@@ -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
]));
}
?>
database.sql
+18
View File
@@ -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]}');
index.html
+192
View File
@@ -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>