MuhammadIqbalMaulana/TUGAS-SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pembaruan pertama: Implementasi WebGIS CRUD dan Layer SPBU

Browse Source
This commit is contained in:
unknown
2026-06-08 20:51:21 +07:00
commit 28a7b04893
9 changed files with 572 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/edit_feature.php
+25
View File
@@ -0,0 +1,25 @@
<?php
header('Content-Type: application/json');
require 'koneksi.php';
$data = json_decode(file_get_contents("php://input"), true);
try {
if ($data['type'] === 'jalan') {
$stmt = $koneksi_pdo->prepare("UPDATE jalan SET nama_jalan = ?, status_jalan = ? WHERE id = ?");
$stmt->execute([$data['nama'], $data['status'], $data['id']]);
}
else if ($data['type'] === 'persil') {
$stmt = $koneksi_pdo->prepare("UPDATE persil_tanah SET nomor_persil = ?, status_milik = ? WHERE id = ?");
$stmt->execute([$data['nama'], $data['status'], $data['id']]);
}
else if ($data['type'] === 'spbu') {
// Menggunakan kolom is_24jam sebagai penanda status operasional
$stmt = $koneksi_pdo->prepare("UPDATE spbu_locations SET nama_spbu = ?, is_24jam = ? WHERE id = ?");
$stmt->execute([$data['nama'], $data['status'], $data['id']]);
}
echo json_encode(["status" => "success"]);
} catch (PDOException $e) {
echo json_encode(["status" => "error", "message" => $e->getMessage()]);
}
?>
01/hapus_feature.php
+29
View File
@@ -0,0 +1,29 @@
<?php
/**
* Kegunaan: Menghapus data secara permanen dari tabel yang relevan.
*/
header('Content-Type: application/json');
require 'koneksi.php';
$data = json_decode(file_get_contents("php://input"), true);
try {
if ($data['type'] === 'jalan') {
$stmt = $koneksi_pdo->prepare("DELETE FROM jalan WHERE id = ?");
}
else if ($data['type'] === 'persil') {
$stmt = $koneksi_pdo->prepare("DELETE FROM persil_tanah WHERE id = ?");
}
else if ($data['type'] === 'spbu') {
$stmt = $koneksi_pdo->prepare("DELETE FROM spbu WHERE id = ?");
}
if (isset($stmt)) {
$stmt->execute([$data['id']]);
}
echo json_encode(["status" => "success"]);
} catch (PDOException $e) {
echo json_encode(["status" => "error", "message" => $e->getMessage()]);
}
?>
01/index.html
+277
View File
@@ -0,0 +1,277 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebGIS Pro - Layer Control SPBU</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<style>
html, body, #map { height: 100%; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
.form-container { width: 220px; padding: 10px; }
.btn-simpan { background: #28a745; color: white; border: none; padding: 8px; width: 100%; cursor: pointer; border-radius: 4px; font-weight: bold; margin-top: 10px; }
.btn-update { background: #ffc107; color: black; border: none; padding: 8px; width: 100%; cursor: pointer; border-radius: 4px; font-weight: bold; margin-top: 10px; }
select, input { width: 100%; margin-bottom: 8px; padding: 5px; box-sizing: border-box; }
.ikon-edit-atribut { display: flex; align-items: center; justify-content: center; }
.ikon-edit-atribut::after { content: '📝'; font-size: 16px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([-0.0541467, 109.3491684], 14);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
const layer_spbu_24 = L.layerGroup();
const layer_spbu_non_24 = L.layerGroup();
L.control.layers(null, {
"SPBU Buka 24 Jam": layer_spbu_24,
"SPBU Tidak Buka 24 Jam": layer_spbu_non_24
}).addTo(map);
map.pm.addControls({
position: 'topleft', drawMarker: true, drawPolyline: true, drawPolygon: true, removalMode: true, editMode: true, dragMode: true
});
map.pm.setGlobalOptions({ allowSelfIntersection: false });
let is_edit_atribut_mode = false;
map.pm.Toolbar.createCustomControl({
name: 'EditAtributData',
block: 'custom',
title: 'Edit Nama & Status',
className: 'ikon-edit-atribut',
toggle: true,
onClick: () => {
is_edit_atribut_mode = !is_edit_atribut_mode;
}
});
function gaya_jalan(status) {
if (status === 'Nasional') return { color: 'red', weight: 6 };
if (status === 'Provinsi') return { color: 'blue', weight: 4 };
return { color: 'green', weight: 2 };
}
let sedang_memproses = false;
// Menangani penggambaran objek
map.on('pm:create', function(e) {
if (sedang_memproses) { map.removeLayer(e.layer); return; }
sedang_memproses = true;
setTimeout(() => { sedang_memproses = false; }, 500);
const layer = e.layer;
const shape = e.shape;
let popup_content = "";
if (shape === 'Line') {
const geojson_mentah = layer.toGeoJSON();
const geo_data = JSON.stringify(geojson_mentah.geometry).replace(/"/g, '&quot;');
const panjang_meter = turf.length(geojson_mentah, {units: 'kilometers'}) * 1000;
popup_content = `<div class="form-container"><h4>Tambah Jalan Baru</h4>
<input type="text" id="nama_jln" placeholder="Nama Jalan">
<select id="stat_jln"><option value="Nasional">Nasional</option><option value="Provinsi">Provinsi</option><option value="Kabupaten">Kabupaten</option></select>
<p>Panjang: <b>${panjang_meter.toFixed(2)} m</b></p>
<button class="btn-simpan" onclick="simpan_baru('jalan', ${panjang_meter}, '${geo_data}')">Simpan Baru</button></div>`;
}
else if (shape === 'Polygon') {
const geojson_mentah = layer.toGeoJSON();
const geo_data = JSON.stringify(geojson_mentah.geometry).replace(/"/g, '&quot;');
const luas_meter_p = turf.area(geojson_mentah);
popup_content = `<div class="form-container"><h4>Tambah Persil Baru</h4>
<input type="text" id="no_psl" placeholder="Nomor Persil">
<select id="stat_psl"><option value="SHM">SHM</option><option value="HGB">HGB</option><option value="HGU">HGU</option><option value="HP">HP</option></select>
<p>Luas: <b>${luas_meter_p.toFixed(2)} m²</b></p>
<button class="btn-simpan" onclick="simpan_baru('persil', ${luas_meter_p}, '${geo_data}')">Simpan Baru</button></div>`;
layer.setStyle({fillColor: 'yellow', fillOpacity: 0.5, color: 'black'});
}
else if (shape === 'Marker') {
/* * Menarik titik presisi lintang dan bujur langsung dari objek Leaflet.
* Ini diperlukan karena tabel spbu_locations meminta kolom lat dan lng terpisah, bukan geojson.
*/
const titik_kordinat = layer.getLatLng();
popup_content = `<div class="form-container"><h4>Tambah SPBU Baru</h4>
<input type="text" id="nama_spbu" placeholder="Nama SPBU">
<input type="text" id="hp_spbu" placeholder="No. HP">
<select id="stat_spbu">
<option value="24 Jam">Buka 24 Jam</option>
<option value="Tidak 24 Jam">Tidak Buka 24 Jam</option>
</select>
<button class="btn-simpan" onclick="simpan_baru('spbu', 0, null, ${titik_kordinat.lat}, ${titik_kordinat.lng})">Simpan Baru</button></div>`;
}
layer.bindPopup(popup_content);
setTimeout(() => { layer.openPopup(); }, 100);
});
// Menghapus data terpilih
map.on('pm:remove', function(e) {
const layer = e.layer;
if (layer.db_id && layer.db_type) {
if(confirm('Yakin ingin menghapus data ini dari Database permanen?')) {
fetch('hapus_feature.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: layer.db_id, type: layer.db_type })
}).then(r => r.json()).then(res => {
if(res.status !== 'success') { alert('Gagal Hapus: ' + res.message); location.reload(); }
});
} else {
location.reload();
}
}
});
// Mengirim payload ke server PHP
window.simpan_baru = function(type, hitungan, geo, lat = null, lng = null) {
let payload = { type: type };
if (type === 'jalan') {
payload.nama = document.getElementById('nama_jln').value;
payload.status = document.getElementById('stat_jln').value;
payload.besaran = hitungan;
payload.geojson = geo;
} else if (type === 'persil') {
payload.nama = document.getElementById('no_psl').value;
payload.status = document.getElementById('stat_psl').value;
payload.besaran = hitungan;
payload.geojson = geo;
} else if (type === 'spbu') {
payload.nama = document.getElementById('nama_spbu').value;
payload.jam24 = document.getElementById('stat_spbu').value;
payload.hp = document.getElementById('hp_spbu').value;
payload.lat = lat;
payload.lng = lng;
}
fetch('simpan_feature.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
.then(r => r.json()).then(res => {
if(res.status === 'success') {
alert('Berhasil Disimpan!');
location.reload();
} else {
alert('Gagal: ' + res.message);
console.error(res);
}
});
};
// Memperbarui atribut yang ada
window.update_data = function(type, id) {
let payload = {
type: type,
id: id,
nama: document.getElementById('edit_nama').value,
status: document.getElementById('edit_status').value
};
fetch('edit_feature.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
.then(r => r.json()).then(res => {
if(res.status === 'success') { alert('Berhasil Diupdate!'); location.reload(); } else alert('Gagal Update: ' + res.message);
});
};
// Merender data dari database
function muat_data_feature() {
fetch('tampil_feature.php').then(response => response.json()).then(res => {
if (res.status === "success") {
// Jalan
res.jalan.forEach(j => {
const geojson_obj = JSON.parse(j.geojson);
L.geoJSON(geojson_obj, {
style: gaya_jalan(j.status_jalan),
onEachFeature: function(feature, layer) {
layer.db_id = j.id; layer.db_type = 'jalan';
layer.on('click', function(e) {
let html_konten = is_edit_atribut_mode ?
`<div class="form-container"><h4>Edit Atribut Jalan</h4>
<input type="text" id="edit_nama" value="${j.nama_jalan}">
<select id="edit_status">
<option value="Nasional" ${j.status_jalan=='Nasional'?'selected':''}>Nasional</option>
<option value="Provinsi" ${j.status_jalan=='Provinsi'?'selected':''}>Provinsi</option>
<option value="Kabupaten" ${j.status_jalan=='Kabupaten'?'selected':''}>Kabupaten</option>
</select>
<button class="btn-update" onclick="update_data('jalan', ${j.id})">Simpan Perubahan</button></div>` :
`<b>Jalan: ${j.nama_jalan}</b><br>Status: ${j.status_jalan}<br>Panjang: ${j.panjang_m} m`;
L.popup().setLatLng(e.latlng).setContent(html_konten).openOn(map);
});
}
}).addTo(map);
});
// Persil
res.persil.forEach(p => {
const geojson_obj = JSON.parse(p.geojson);
L.geoJSON(geojson_obj, {
style: { color: 'orange', weight: 2, fillOpacity: 0.4 },
onEachFeature: function(feature, layer) {
layer.db_id = p.id; layer.db_type = 'persil';
layer.on('click', function(e) {
let html_konten = is_edit_atribut_mode ?
`<div class="form-container"><h4>Edit Atribut Persil</h4>
<input type="text" id="edit_nama" value="${p.nomor_persil}">
<select id="edit_status">
<option value="SHM" ${p.status_milik=='SHM'?'selected':''}>SHM</option>
<option value="HGB" ${p.status_milik=='HGB'?'selected':''}>HGB</option>
<option value="HGU" ${p.status_milik=='HGU'?'selected':''}>HGU</option>
<option value="HP" ${p.status_milik=='HP'?'selected':''}>HP</option>
</select>
<button class="btn-update" onclick="update_data('persil', ${p.id})">Simpan Perubahan</button></div>` :
`<b>Nomor Persil: ${p.nomor_persil}</b><br>Status: ${p.status_milik}<br>Luas: ${p.luas_m2} m²`;
L.popup().setLatLng(e.latlng).setContent(html_konten).openOn(map);
});
}
}).addTo(map);
});
// SPBU
res.spbu.forEach(s => {
const spbu_marker = L.marker([parseFloat(s.lat), parseFloat(s.lng)]);
spbu_marker.db_id = s.id;
spbu_marker.db_type = 'spbu';
spbu_marker.on('click', function(e) {
let html_konten = is_edit_atribut_mode ?
`<div class="form-container"><h4>Edit Atribut SPBU</h4>
<input type="text" id="edit_nama" value="${s.nama_spbu}">
<select id="edit_status">
<option value="24 Jam" ${s.is_24jam=='24 Jam'?'selected':''}>Buka 24 Jam</option>
<option value="Tidak 24 Jam" ${s.is_24jam=='Tidak 24 Jam'?'selected':''}>Tidak Buka 24 Jam</option>
</select>
<button class="btn-update" onclick="update_data('spbu', ${s.id})">Simpan Perubahan</button></div>` :
`<b>SPBU: ${s.nama_spbu}</b><br>Status: ${s.is_24jam}<br>No. HP: ${s.no_hp}`;
L.popup().setLatLng(e.latlng).setContent(html_konten).openOn(map);
});
if (s.is_24jam === '24 Jam') {
spbu_marker.addTo(layer_spbu_24);
} else {
spbu_marker.addTo(layer_spbu_non_24);
}
});
layer_spbu_24.addTo(map);
layer_spbu_non_24.addTo(map);
}
else {
// TAMBAHKAN DUA BARIS INI: Menampilkan peringatan jika database gagal ditarik
alert("Gagal memuat data peta: " + res.message);
console.error("Kesalahan Sistem:", res.message);
}
});
}
muat_data_feature();
</script>
</body>
</html>
01/koneksi.php
+33
View File
@@ -0,0 +1,33 @@
<?php
/**
* Nama Berkas: koneksi.php
* Kegunaan: Menangani jembatan komunikasi antara skrip PHP dengan server basis data MySQL menggunakan PDO.
*/
header("Content-Type: application/json");
$indeks_host = "127.0.0.1";
$nama_pengguna = "root";
$kata_sandi = "root";
$nama_database = "webgis_db";
try {
/* * Membuka koneksi baru dengan penggerak PDO MySQL.
* Mengatur set karakter ke UTF-8 untuk mencegah kerusakan simbol geometri data spasial.
*/
$koneksi_pdo = new PDO("mysql:host=$indeks_host;dbname=$nama_database;charset=utf8", $nama_pengguna, $kata_sandi);
/* * Mengaktifkan sistem penanganan kesalahan otomatis tingkat industri.
* Parameter ATTR_ERRMODE set ke ERRMODE_EXCEPTION memaksa setiap kegagalan query menjadi sebuah Exception yang aman.
*/
$koneksi_pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $kesalahan_sistem) {
// Menghentikan proses secara aman dan mengembalikan pesan kegagalan terformat JSON
echo json_encode([
"status" => "error",
"message" => "Koneksi ke basis data gagal dilakukan: " . $kesalahan_sistem->getMessage()
]);
exit;
}
?>
01/simpan.php
+48
View File
@@ -0,0 +1,48 @@
<?php
// Beritahu browser bahwa file ini akan membalas dengan format JSON
header("Content-Type: application/json");
// 1. Konfigurasi Koneksi Database
$host = "127.0.0.1";
$user = "root";
$pass = "root"; // Menggunakan password yang kamu set di HeidiSQL
$db = "webgis_db"; // Pastikan ini sesuai dengan nama database kamu
// 2. Membuka Koneksi
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
echo json_encode(["status" => "error", "message" => "Koneksi Gagal: " . mysqli_connect_error()]);
exit;
}
// 3. Menerima Data dari JavaScript (index.html)
$input = file_get_contents('php://input');
$data = json_decode($input, true);
if ($data) {
// Membersihkan data agar aman dari serangan SQL Injection
$nama = mysqli_real_escape_string($conn, $data['nama']);
$jam24 = mysqli_real_escape_string($conn, $data['jam24']);
$hp = mysqli_real_escape_string($conn, $data['hp']);
$lat = $data['lat'];
$lng = $data['lng'];
// 4. Query Memasukkan Data ke Tabel
$query = "INSERT INTO spbu_locations (nama_spbu, is_24jam, no_hp, lat, lng)
VALUES ('$nama', '$jam24', '$hp', '$lat', '$lng')";
if (mysqli_query($conn, $query)) {
// Jika berhasil, kirim sinyal sukses
echo json_encode(["status" => "success"]);
} else {
// Jika query gagal, tampilkan errornya
echo json_encode(["status" => "error", "message" => mysqli_error($conn)]);
}
} else {
echo json_encode(["status" => "error", "message" => "Data kosong atau format salah"]);
}
// Tutup koneksi untuk menghemat memori
mysqli_close($conn);
?>
01/simpan_feature.php
+30
View File
@@ -0,0 +1,30 @@
<?php
header('Content-Type: application/json');
require 'koneksi.php';
$data = json_decode(file_get_contents("php://input"), true);
if (!$data) {
echo json_encode(["status" => "error", "message" => "Data tidak valid"]);
exit;
}
try {
if ($data['type'] === 'jalan') {
$stmt = $koneksi_pdo->prepare("INSERT INTO jalan (nama_jalan, status_jalan, panjang_m, geojson) VALUES (?, ?, ?, ?)");
$stmt->execute([$data['nama'], $data['status'], $data['besaran'], $data['geojson']]);
}
else if ($data['type'] === 'persil') {
$stmt = $koneksi_pdo->prepare("INSERT INTO persil_tanah (nomor_persil, status_milik, luas_m2, geojson) VALUES (?, ?, ?, ?)");
$stmt->execute([$data['nama'], $data['status'], $data['besaran'], $data['geojson']]);
}
else if ($data['type'] === 'spbu') {
// Skema disesuaikan sepenuhnya dengan tabel spbu_locations peninggalan proyek sebelumnya
$stmt = $koneksi_pdo->prepare("INSERT INTO spbu_locations (nama_spbu, is_24jam, no_hp, lat, lng) VALUES (?, ?, ?, ?, ?)");
$stmt->execute([$data['nama'], $data['jam24'], $data['hp'], $data['lat'], $data['lng']]);
}
echo json_encode(["status" => "success"]);
} catch (PDOException $e) {
echo json_encode(["status" => "error", "message" => $e->getMessage()]);
}
?>
01/tampil_data.php
+29
View File
@@ -0,0 +1,29 @@
<?php
header("Content-Type: application/json");
$host = "127.0.0.1";
$user = "root";
$pass = "root"; // Pastikan sesuai dengan yang terakhir kita set
$db = "webgis_db";
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
echo json_encode(["status" => "error", "message" => "Koneksi Gagal"]);
exit;
}
// Ambil semua data dari tabel
$query = "SELECT * FROM spbu_locations";
$result = mysqli_query($conn, $query);
$data_spbu = [];
while ($row = mysqli_fetch_assoc($result)) {
$data_spbu[] = $row;
}
// Kirim data ke file HTML dalam bentuk JSON
echo json_encode(["status" => "success", "data" => $data_spbu]);
mysqli_close($conn);
?>
01/tampil_feature.php
+31
View File
@@ -0,0 +1,31 @@
<?php
/**
* Kegunaan: Mengambil data dari tabel data_jalan, data_persil, dan spbu_locations.
*/
header('Content-Type: application/json');
require 'koneksi.php';
try {
// Memanggil tabel jalan sesuai skema Anda
$query_jalan = $koneksi_pdo->query("SELECT * FROM data_jalan");
$data_jalan = $query_jalan->fetchAll(PDO::FETCH_ASSOC);
// Memanggil tabel persil sesuai skema Anda
$query_persil = $koneksi_pdo->query("SELECT * FROM data_persil");
$data_persil = $query_persil->fetchAll(PDO::FETCH_ASSOC);
// Memanggil tabel SPBU
$query_spbu = $koneksi_pdo->query("SELECT * FROM spbu_locations");
$data_spbu = $query_spbu->fetchAll(PDO::FETCH_ASSOC);
echo json_encode([
"status" => "success",
"jalan" => $data_jalan,
"persil" => $data_persil,
"spbu" => $data_spbu
]);
} catch (PDOException $e) {
echo json_encode(["status" => "error", "message" => $e->getMessage()]);
}
?>
01/tes1.html
+70
View File
@@ -0,0 +1,70 @@
<!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 lat = -0.05414658883691842;
const lng = 109.34916843901959;
const map = L.map('map').setView([lat, lng], 15);
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([lat, lng]).addTo(map)
.bindPopup('<b>Tugu Digulis</b><br />Halo Pontianak!').openPopup();
const circle = L.circle([lat, lng], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map).bindPopup('I am a circle.');
const polygon = L.polygon([
[-0.053, 109.348],
[-0.053, 109.350],
[-0.055, 109.350]
]).addTo(map).bindPopup('I am a polygon.');
const popup = L.popup()
.setLatLng([lat, lng])
.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>