Joscelind/WebGis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Joscelind
2026-06-09 13:50:00 +07:00
commit bb501dcd8b
12 changed files with 2557 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/ambil.php
+112
View File
@@ -0,0 +1,112 @@
<?php
include 'koneksi.php';
// --- LOGIKA MODIFIKASI DATA (METODE POST) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 1. UPDATE POSISI (Fungsi asli lokasi.php)
if (isset($_POST['action']) && $_POST['action'] === 'update_posisi') {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$lat = mysqli_real_escape_string($conn, $_POST['lat']);
$lng = mysqli_real_escape_string($conn, $_POST['lng']);
$sql = "UPDATE spbu SET latitude = '$lat', longitude = '$lng' WHERE id = '$id'";
echo mysqli_query($conn, $sql) ? "Lokasi diperbarui" : "Gagal update: " . mysqli_error($conn);
}
// 2. HAPUS DATA (Fungsi asli hapus.php)
// 2. HAPUS DATA
else if (isset($_POST['hapus_id'])) {
$id = mysqli_real_escape_string($conn, $_POST['hapus_id']);
$tabel = mysqli_real_escape_string($conn, $_POST['tabel']);
$sql = "DELETE FROM $tabel WHERE id = '$id'";
if (mysqli_query($conn, $sql)) {
echo "Berhasil"; // Kirim teks sederhana saja
} else {
echo "Gagal hapus: " . mysqli_error($conn);
}
exit; // WAJIB ada exit agar tidak bentrok dengan kode GET di bawahnya
}
// 3. SIMPAN/UPDATE SPBU (Fungsi asli update.php & simpan)
else if (isset($_POST['nama_spbu'])) {
$nama = mysqli_real_escape_string($conn, $_POST['nama_spbu']);
$telp = mysqli_real_escape_string($conn, $_POST['no_telp']);
$status = mysqli_real_escape_string($conn, $_POST['status_24jam']);
$lat = $_POST['latitude'];
$lng = $_POST['longitude'];
if (isset($_POST['id']) && !empty($_POST['id'])) {
// Update jika ID ada (Logika update.php)
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE spbu SET nama_spbu='$nama', no_telp='$telp', status_24jam='$status', latitude='$lat', longitude='$lng' WHERE id='$id'";
} else {
// Simpan Baru (Logika simpan)
$sql = "INSERT INTO spbu (nama_spbu, no_telp, status_24jam, latitude, longitude) VALUES ('$nama', '$telp', '$status', '$lat', '$lng')";
}
echo mysqli_query($conn, $sql) ? "Data SPBU berhasil diproses" : "Gagal: " . mysqli_error($conn);
exit;
}
// 4. SIMPAN/UPDATE JALAN (LINE)
else if (isset($_POST['type']) && $_POST['type'] === 'jalan') {
$nama = mysqli_real_escape_string($conn, $_POST['nama_jalan']);
$status = mysqli_real_escape_string($conn, $_POST['status_jalan']);
if (isset($_POST['id']) && !empty($_POST['id'])) {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE data_jalan SET nama_jalan='$nama', status_jalan='$status' WHERE id='$id'";
echo mysqli_query($conn, $sql) ? "Berhasil diupdate" : "Error DB: " . mysqli_error($conn);
} else {
$panjang = mysqli_real_escape_string($conn, $_POST['panjang_m']);
$geojson = mysqli_real_escape_string($conn, $_POST['geojson']);
$sql = "INSERT INTO data_jalan (nama_jalan, status_jalan, panjang_m, geojson) VALUES ('$nama', '$status', '$panjang', '$geojson')";
echo mysqli_query($conn, $sql) ? "Jalan Berhasil Disimpan" : "Error DB: " . mysqli_error($conn);
}
exit;
}
// 5. SIMPAN/UPDATE PARSIL
else if (isset($_POST['type']) && $_POST['type'] === 'parsil') {
$pemilik = mysqli_real_escape_string($conn, $_POST['pemilik']);
$status = mysqli_real_escape_string($conn, $_POST['status_milik']);
if (isset($_POST['id']) && !empty($_POST['id'])) {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE data_parsil SET pemilik='$pemilik', status_milik='$status' WHERE id='$id'";
echo mysqli_query($conn, $sql) ? "Berhasil diupdate" : "Error DB: " . mysqli_error($conn);
} else {
$luas = mysqli_real_escape_string($conn, $_POST['luas_m2']);
$geojson = mysqli_real_escape_string($conn, $_POST['geojson']);
$sql = "INSERT INTO data_parsil (pemilik, status_milik, luas_m2, geojson) VALUES ('$pemilik', '$status', '$luas', '$geojson')";
echo mysqli_query($conn, $sql) ? "Parsil Berhasil Disimpan" : "Error DB: " . mysqli_error($conn);
}
exit;
}
}
// --- LOGIKA AMBIL DATA (METODE GET) ---
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$data = ['spbu' => [], 'jalan' => [], 'parsil' => []];
// Ambil SPBU
$q_spbu = mysqli_query($conn, "SELECT * FROM spbu");
while($r = mysqli_fetch_assoc($q_spbu)) {
$r['latitude'] = (float)$r['latitude'];
$r['longitude'] = (float)$r['longitude'];
$data['spbu'][] = $r;
}
// Ambil Jalan
$q_jalan = mysqli_query($conn, "SELECT * FROM data_jalan");
while($r = mysqli_fetch_assoc($q_jalan)) $data['jalan'][] = $r;
// Ambil Parsil
$q_parsil = mysqli_query($conn, "SELECT * FROM data_parsil");
while($r = mysqli_fetch_assoc($q_parsil)) $data['parsil'][] = $r;
header('Content-Type: application/json');
echo json_encode($data);
}
?>
01/index.html
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web GIS Pontianak - SPBU, Jalan & Parsil</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>
html, body { height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
.form-popup { min-width: 200px; padding: 5px; }
.form-popup input, .form-popup select { width: 100%; margin-bottom: 10px; display: block; box-sizing: border-box; }
.form-popup button { width: 100%; cursor: pointer; background: #28a745; color: white; border: none; padding: 8px; border-radius: 4px; }
</style>
</head>
<body>
<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 src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script>
const map = L.map('map').setView([-0.055319, 109.349502], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 1. Setup Ikon
const iconHijau = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.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 iconMerah = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.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] });
// 2. Setup Leaflet Draw
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
draw: { polyline: true, polygon: true, marker: true, circle: false, rectangle: false, circlemarker: false },
edit: { featureGroup: drawnItems }
});
map.addControl(drawControl);
// 3. Event Saat Selesai Menggambar
map.on(L.Draw.Event.CREATED, function (e) {
const layer = e.layer;
const type = e.layerType;
const geojson = JSON.stringify(layer.toGeoJSON());
drawnItems.addLayer(layer);
if (type === 'marker') {
const lat = layer.getLatLng().lat;
const lng = layer.getLatLng().lng;
layer.bindPopup(`
<h4>Tambah SPBU</h4>
Nama: <input type="text" id="in_nama"><br>
WA: <input type="text" id="in_wa"><br>
24 Jam: <select id="in_status"><option value="Ya">Ya</option><option value="Tidak">Tidak</option></select><br>
<button onclick="simpanSPBU(${lat}, ${lng})">Simpan</button>
`).openPopup();
}
else if (type === 'polyline') {
const pj = turf.length(layer.toGeoJSON(), {units: 'meters'}).toFixed(2);
layer.bindPopup(`
<h4>Tambah Jalan</h4>
<p>Panjang: ${pj} m</p>
Nama Jalan: <input type="text" id="in_jalan"><br>
Status: <select id="in_s_jalan"><option value="Nasional">Nasional</option><option value="Provinsi">Provinsi</option><option value="Kabupaten">Kabupaten</option></select><br>
<button onclick="simpanJalan('${geojson}', ${pj})">Simpan Jalan</button>
`).openPopup();
}
});
// 4. Fungsi Simpan (HARUS SAMA DENGAN $_POST di ambil.php)
function simpanSPBU(lat, lng) {
const fd = new FormData();
fd.append('nama_spbu', document.getElementById('in_nama').value); // Sesuai PHP
fd.append('no_telp', document.getElementById('in_wa').value); // Sesuai PHP
fd.append('status_24jam', document.getElementById('in_status').value); // Sesuai PHP
fd.append('latitude', lat);
fd.append('longitude', lng);
kirimKeServer(fd);
}
function simpanJalan(gj, pj) {
const fd = new FormData();
fd.append('type', 'jalan');
fd.append('nama_jalan', document.getElementById('in_jalan').value);
fd.append('status_jalan', document.getElementById('in_s_jalan').value);
// PENTING: Di database kamu nama kolomnya 'panjang_m'
// Jadi di PHP nanti kita tangkap sebagai $_POST['panjang_m']
fd.append('panjang_m', pj);
fd.append('geojson', gj);
prosesKirim(fd);
}
function simpanParsil(gj, ls) {
const fd = new FormData();
fd.append('type', 'parsil');
fd.append('pemilik', document.getElementById('n_parsil').value);
fd.append('status_milik', document.getElementById('s_parsil').value);
// PENTING: Di database kamu nama kolomnya 'luas_m2'
fd.append('luas_m2', ls);
fd.append('geojson', gj);
prosesKirim(fd);
}
function kirimKeServer(fd) {
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(res => {
alert("Respon: " + res);
location.reload();
});
}
function prosesKirim(fd) {
kirimKeServer(fd);
}
// 5. Muat Data (Bagian B di ambil.php)
function muatData() {
fetch('ambil.php')
.then(res => res.json())
.then(data => {
// Tampilkan SPBU
data.spbu.forEach(s => {
L.marker([s.latitude, s.longitude], {icon: s.status_24jam === 'Ya' ? iconHijau : iconMerah})
.addTo(map).bindPopup(s.nama_spbu);
});
// Tampilkan Jalan
data.jalan.forEach(j => {
L.geoJSON(JSON.parse(j.geojson), {style: {color: 'blue'}}).addTo(map).bindPopup(j.nama_jalan);
});
})
.catch(err => console.error("Error muat data:", err));
}
muatData();
</script>
</body>
</html>
01/index.php
+414
View File
@@ -0,0 +1,414 @@
<!DOCTYPE html>
<html>
<head>
<title>WebGIS SPBU, Jalan & Parsil Pontianak</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>
#map { height: 100vh; width: 100%; }
body { margin: 0; font-family: 'Segoe UI', sans-serif; }
/* Popup Modern Design */
.leaflet-popup-content-wrapper { border-radius: 15px; padding: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.leaflet-popup-content { width: 280px !important; margin: 0 !important; }
.popup-header { background: #f8f9fa; padding: 12px 15px; border-bottom: 1px solid #eee; }
.popup-header b { font-size: 16px; color: #2c3e50; display: block; }
.popup-body { padding: 12px 15px; font-size: 13px; color: #555; }
.info-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
/* Badges */
.badge { padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.badge-ya { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.badge-tidak { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.popup-footer { display: flex; gap: 8px; padding: 0 15px 15px 15px; }
.btn-action { flex: 1; border: none; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-edit { background: #e3f2fd; color: #1976d2; }
.btn-hapus { background: #ffebee; color: #c62828; }
.form-input { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
</style>
</head>
<body>
<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 src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script>
var tempGeoJSON = "";
var tempValue = 0;
var map = L.map('map').setView([-0.0263, 109.3425], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// Icons
var greenIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.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] });
var redIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.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] });
// Fitur Draw (Menggambar)
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: { polyline: true, polygon: true, circle: false, marker: true, rectangle: false, circlemarker: false },
edit: { featureGroup: drawnItems }
});
map.addControl(drawControl);
// 1. LOAD SEMUA DATA (Point, Line, Polygon)
// 1. LOAD SEMUA DATA (Point, Line, Polygon)
function loadMarkers() {
fetch('ambil.php')
.then(res => res.json())
.then(data => {
// Tampilkan SPBU (Point)
data.spbu.forEach(spbu => {
let is24 = (spbu.status_24jam === 'Ya');
let marker = L.marker([spbu.latitude, spbu.longitude], {
icon: is24 ? greenIcon : redIcon,
draggable: true
}).addTo(map);
marker.on('dragend', function(e) {
updatePosisi(spbu.id, marker.getLatLng().lat, marker.getLatLng().lng);
});
marker.bindPopup(`
<div class="popup-header"><b>⛽ ${spbu.nama_spbu}</b></div>
<div class="popup-body">
<div class="info-row"><span>📞 WhatsApp</span> <strong>${spbu.no_telp || '-'}</strong></div>
<div class="info-row"><span>🕒 Status</span> <span class="badge ${is24 ? 'badge-ya' : 'badge-tidak'}">${is24 ? 'Buka 24 Jam' : 'Tutup Malam'}</span></div>
<button class="btn-action btn-edit" onclick='tampilFormEditSPBU(${JSON.stringify(spbu)})'>Edit</button>
<button class="btn-action btn-hapus" onclick="hapusData(${spbu.id}, 'spbu')">Hapus</button>
</div>
`);
});
// Tampilkan Jalan (Line)
data.jalan.forEach(j => {
let warna = j.status_jalan == 'Nasional' ? 'red' : (j.status_jalan == 'Provinsi' ? 'blue' : 'green');
L.geoJSON(JSON.parse(j.geojson), { style: {color: warna, weight: 5} })
// Pastikan j.panjang_m sesuai dengan kolom di database
.bindPopup(`
<div class="popup-header"><b>🛣️ Jalan: ${j.nama_jalan}</b></div>
<div class="popup-body">
<div class="info-row"><span>📌 Status</span> <strong>${j.status_jalan}</strong></div>
<div class="info-row"><span>📏 Panjang</span> <strong>${j.panjang_m} m</strong></div>
<div class="popup-footer" style="padding: 10px 0 0 0;">
<button class="btn-action btn-edit" onclick='tampilFormEditJalan(${JSON.stringify(j).replace(/'/g, "\\'")})'>✏️ Edit</button>
<button class="btn-action btn-hapus" onclick="hapusData(${j.id}, 'data_jalan')">🗑️ Hapus</button>
</div>
</div>
`)
.addTo(map);
});
// Tampilkan Parsil (Polygon)
data.parsil.forEach(p => {
L.geoJSON(JSON.parse(p.geojson), { style: {fillColor: 'orange', color: 'black', weight: 1} })
// Pastikan p.luas_m2 sesuai dengan kolom di database
.bindPopup(`
<div class="popup-header"><b>🌿 Pemilik: ${p.pemilik}</b></div>
<div class="popup-body">
<div class="info-row"><span>📜 Status</span> <strong>${p.status_milik}</strong></div>
<div class="info-row"><span>📐 Luas</span> <strong>${p.luas_m2} m²</strong></div>
<div class="popup-footer" style="padding: 10px 0 0 0;">
<button class="btn-action btn-edit" onclick='tampilFormEditParsil(${JSON.stringify(p).replace(/'/g, "\\'")})'>✏️ Edit</button>
<button class="btn-action btn-hapus" onclick="hapusData(${p.id}, 'data_parsil')">🗑️ Hapus</button>
</div>
</div>
`)
.addTo(map);
});
});
}
function tampilFormEditSPBU(data) {
// Membuat konten HTML formulir edit dengan data lama yang sudah terisi
let formEdit = `
<div class="popup-body">
<b>✏️ Edit Data SPBU</b><br>
<input type="hidden" id="edit_id" value="${data.id}">
<label style="font-size:11px; color:#777;">Nama SPBU:</label>
<input type="text" id="edit_nama" class="form-input" value="${data.nama_spbu}" placeholder="Nama SPBU">
<label style="font-size:11px; color:#777;">No. WhatsApp:</label>
<input type="text" id="edit_telp" class="form-input" value="${data.no_telp}" placeholder="No Telp">
<label style="font-size:11px; color:#777;">Status 24 Jam:</label>
<select id="edit_status" class="form-input">
<option value="Ya" ${data.status_24jam == 'Ya' ? 'selected' : ''}>Buka 24 Jam</option>
<option value="Tidak" ${data.status_24jam == 'Tidak' ? 'selected' : ''}>Tutup Malam</option>
</select>
<div style="display:flex; gap:5px;">
<button class="btn-action btn-edit" onclick="prosesUpdateSPBU(${data.latitude}, ${data.longitude})">💾 Simpan Perubahan</button>
<button class="btn-action" style="background:#eee; color:#333;" onclick="map.closePopup()">Batal</button>
</div>
</div>`;
// Membuka popup baru di lokasi SPBU tersebut dengan konten formulir edit
L.popup()
.setLatLng([data.latitude, data.longitude])
.setContent(formEdit)
.openOn(map);
}
/**
* 2. Fungsi Edit Data
*/
function tampilFormEditJalan(data) {
let formEdit = `
<div class="popup-header"><b>✏️ Edit Jalan</b></div>
<div class="popup-body">
<input type="hidden" id="edit_j_id" value="${data.id}">
<label style="font-size:11px; color:#777;">Nama Jalan:</label>
<input type="text" id="edit_j_nama" class="form-input" value="${data.nama_jalan}">
<label style="font-size:11px; color:#777;">Status Jalan:</label>
<select id="edit_j_status" class="form-input">
<option value="Nasional" ${data.status_jalan == 'Nasional' ? 'selected' : ''}>Nasional</option>
<option value="Provinsi" ${data.status_jalan == 'Provinsi' ? 'selected' : ''}>Provinsi</option>
<option value="Kabupaten" ${data.status_jalan == 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
</select>
<div style="display:flex; gap:5px;">
<button class="btn-action btn-edit" onclick="prosesUpdateJalan()">💾 Simpan Perubahan</button>
<button class="btn-action" style="background:#eee; color:#333;" onclick="map.closePopup()">Batal</button>
</div>
</div>`;
// Untuk jalan, popup kita taruh di koordinat pertama feature geojson
let geometry = JSON.parse(data.geojson).geometry;
let latlng = [geometry.coordinates[0][1], geometry.coordinates[0][0]];
if(geometry.type === "MultiLineString") latlng = [geometry.coordinates[0][0][1], geometry.coordinates[0][0][0]];
L.popup().setLatLng(latlng).setContent(formEdit).openOn(map);
}
function prosesUpdateJalan() {
let fd = new FormData();
fd.append('type', 'jalan');
fd.append('id', document.getElementById('edit_j_id').value);
fd.append('nama_jalan', document.getElementById('edit_j_nama').value);
fd.append('status_jalan', document.getElementById('edit_j_status').value);
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(txt => { alert(txt); location.reload(); });
}
function tampilFormEditParsil(data) {
let formEdit = `
<div class="popup-header"><b>✏️ Edit Parsil</b></div>
<div class="popup-body">
<input type="hidden" id="edit_p_id" value="${data.id}">
<label style="font-size:11px; color:#777;">Nama Pemilik:</label>
<input type="text" id="edit_p_pemilik" class="form-input" value="${data.pemilik}">
<label style="font-size:11px; color:#777;">Status Kepemilikan:</label>
<select id="edit_p_status" class="form-input">
<option value="SHM" ${data.status_milik == 'SHM' ? 'selected' : ''}>SHM</option>
<option value="HGB" ${data.status_milik == 'HGB' ? 'selected' : ''}>HGB</option>
</select>
<div style="display:flex; gap:5px;">
<button class="btn-action btn-edit" onclick="prosesUpdateParsil()">💾 Simpan Perubahan</button>
<button class="btn-action" style="background:#eee; color:#333;" onclick="map.closePopup()">Batal</button>
</div>
</div>`;
// Untuk parsil, popup ditaruh di koordinat pertama polygon
let geometry = JSON.parse(data.geojson).geometry;
let coords = geometry.coordinates[0][0];
if(geometry.type === "MultiPolygon") coords = geometry.coordinates[0][0][0];
let latlng = [coords[1], coords[0]];
L.popup().setLatLng(latlng).setContent(formEdit).openOn(map);
}
function prosesUpdateParsil() {
let fd = new FormData();
fd.append('type', 'parsil');
fd.append('id', document.getElementById('edit_p_id').value);
fd.append('pemilik', document.getElementById('edit_p_pemilik').value);
fd.append('status_milik', document.getElementById('edit_p_status').value);
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(txt => { alert(txt); location.reload(); });
}
function prosesUpdateSPBU(lat, lng) {
const id = document.getElementById('edit_id').value;
const nama = document.getElementById('edit_nama').value;
const telp = document.getElementById('edit_telp').value;
const status = document.getElementById('edit_status').value;
let fd = new FormData();
fd.append('id', id);
fd.append('nama_spbu', nama);
fd.append('no_telp', telp);
fd.append('status_24jam', status);
fd.append('latitude', lat);
fd.append('longitude', lng);
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(txt => {
if (txt.toLowerCase().includes("berhasil")) {
alert("✅ Perubahan disimpan!");
location.reload();
} else {
alert("Respon: " + txt);
location.reload();
}
});
}
// Fungsi Hapus Tambahan (Agar fitur di ambil.php terpakai)
function hapusData(id, tabel) {
if(confirm("Apakah Anda yakin ingin menghapus data ini?")) {
let fd = new FormData();
fd.append('hapus_id', id);
fd.append('tabel', tabel);
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(txt => {
if (txt.includes("Berhasil")) {
alert("🗑️ Data telah terhapus!");
location.reload(); // Hanya reload jika benar-benar berhasil
} else {
alert("Gagal: " + txt);
}
})
.catch(err => console.error("Error:", err));
}
}
loadMarkers();
// 2. EVENT SAAT SELESAI MENGGAMBAR
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
var type = event.layerType;
drawnItems.addLayer(layer);
// Simpan GeoJSON ke variabel global agar tidak perlu dikirim lewat parameter onclick
tempGeoJSON = JSON.stringify(layer.toGeoJSON());
if (type === 'marker') {
tampilFormSPBU(layer.getLatLng().lat, layer.getLatLng().lng, layer);
} else if (type === 'polyline') {
tempValue = turf.length(layer.toGeoJSON(), {units: 'meters'}).toFixed(2);
tampilFormJalan(layer);
} else if (type === 'polygon') {
tempValue = turf.area(layer.toGeoJSON()).toFixed(2);
tampilFormParsil(layer);
}
});
// --- FORM POPUP ---
function tampilFormSPBU(lat, lng, layer) {
let form = `<div class="popup-header"><b>⛽ Tambah SPBU</b></div>
<div class="popup-body">
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">Nama SPBU</label>
<input type="text" id="nama" class="form-input" placeholder="Contoh: SPBU Pertamina">
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">No. WhatsApp</label>
<input type="text" id="telp" class="form-input" placeholder="Contoh: 08123456789">
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">Status 24 Jam</label>
<select id="status" class="form-input"><option value="Ya">Buka 24 Jam</option><option value="Tidak">Tutup Malam</option></select>
<div class="popup-footer" style="padding: 10px 0 0 0;">
<button class="btn-action btn-edit" onclick="simpanData(${lat}, ${lng})">💾 Simpan Lokasi</button>
</div>
</div>`;
layer.bindPopup(form).openPopup();
}
function tampilFormJalan(layer) {
let form = `<div class="popup-header"><b>🛣️ Tambah Jalan</b></div>
<div class="popup-body">
<div class="info-row"><span>Panjang</span><strong>${tempValue} m</strong></div>
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">Nama Jalan</label>
<input type="text" id="nama_j" class="form-input" placeholder="Contoh: Jl. Gajah Mada">
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">Status Jalan</label>
<select id="status_j" class="form-input">
<option value="Nasional">Nasional</option>
<option value="Provinsi">Provinsi</option>
<option value="Kabupaten">Kabupaten</option>
</select>
<div class="popup-footer" style="padding: 10px 0 0 0;">
<button class="btn-action btn-edit" onclick="simpanJalan()">💾 Simpan Jalan</button>
</div>
</div>`;
layer.bindPopup(form).openPopup();
}
function tampilFormParsil(layer) {
let form = `<div class="popup-header"><b>🌿 Tambah Parsil</b></div>
<div class="popup-body">
<div class="info-row"><span>Luas</span><strong>${tempValue} m²</strong></div>
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">Nama Pemilik</label>
<input type="text" id="pemilik" class="form-input" placeholder="Contoh: Budi Santoso">
<label style="font-size:12px; color:#555; margin-bottom:4px; display:block;">Status Kepemilikan</label>
<select id="status_p" class="form-input">
<option value="SHM">SHM</option>
<option value="HGB">HGB</option>
</select>
<div class="popup-footer" style="padding: 10px 0 0 0;">
<button class="btn-action btn-edit" onclick="simpanParsil()">💾 Simpan Parsil</button>
</div>
</div>`;
layer.bindPopup(form).openPopup();
}
// --- FUNGSI SIMPAN (AJAX) ---
function simpanData(lat, lng) {
let fd = new FormData();
fd.append('nama_spbu', document.getElementById('nama').value);
fd.append('no_telp', document.getElementById('telp').value);
fd.append('status_24jam', document.getElementById('status').value);
fd.append('latitude', lat); fd.append('longitude', lng);
fetch('ambil.php', { method: 'POST', body: fd }).then(() => location.reload());
}
function simpanJalan() {
const fd = new FormData();
fd.append('type', 'jalan');
fd.append('nama_jalan', document.getElementById('nama_j').value);
fd.append('status_jalan', document.getElementById('status_j').value);
fd.append('panjang_m', tempValue);
fd.append('geojson', tempGeoJSON); // Ambil dari variabel global
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(txt => {
alert(txt);
location.reload();
});
}
function simpanParsil() {
let fd = new FormData();
fd.append('type', 'parsil');
fd.append('pemilik', document.getElementById('pemilik').value);
fd.append('status_milik', document.getElementById('status_p').value);
fd.append('luas_m2', tempValue);
fd.append('geojson', tempGeoJSON); // Ambil dari variabel global
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(txt => {
alert(txt);
location.reload();
});
}
function updatePosisi(id, lat, lng) {
let fd = new FormData();
fd.append('action', 'update_posisi'); // Tambahkan flag action
fd.append('id', id);
fd.append('lat', lat);
fd.append('lng', lng);
fetch('ambil.php', { method: 'POST', body: fd });
}
</script>
</body>
</html>
01/koneksi.php
+12
View File
@@ -0,0 +1,12 @@
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "spbu_pontianak";
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
die("Koneksi gagal: " . mysqli_connect_error());
}
?>
02/ambil.php
+215
View File
@@ -0,0 +1,215 @@
<?php
include 'koneksi.php';
// --- LOGIKA MODIFIKASI DATA (METODE POST) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 1. UPDATE POSISI (Fungsi asli lokasi.php)
if (isset($_POST['action']) && $_POST['action'] === 'update_posisi') {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$tabel = isset($_POST['tabel']) ? mysqli_real_escape_string($conn, $_POST['tabel']) : 'spbu';
$lat = mysqli_real_escape_string($conn, $_POST['lat']);
$lng = mysqli_real_escape_string($conn, $_POST['lng']);
$sql = "UPDATE $tabel SET latitude = '$lat', longitude = '$lng' WHERE id = '$id'";
echo mysqli_query($conn, $sql) ? "Lokasi diperbarui" : "Gagal update: " . mysqli_error($conn);
exit;
}
// 2. HAPUS DATA
else if (isset($_POST['hapus_id'])) {
$id = mysqli_real_escape_string($conn, $_POST['hapus_id']);
$tabel = mysqli_real_escape_string($conn, $_POST['tabel']);
$sql = "DELETE FROM $tabel WHERE id = '$id'";
if (mysqli_query($conn, $sql)) {
echo "Berhasil"; // Kirim teks sederhana saja
} else {
echo "Gagal hapus: " . mysqli_error($conn);
}
exit; // WAJIB ada exit agar tidak bentrok dengan kode GET di bawahnya
}
// 3. SIMPAN/UPDATE SPBU (Fungsi asli update.php & simpan)
else if (isset($_POST['nama_spbu'])) {
$nama = mysqli_real_escape_string($conn, $_POST['nama_spbu']);
$telp = mysqli_real_escape_string($conn, $_POST['no_telp']);
$status = mysqli_real_escape_string($conn, $_POST['status_24jam']);
$lat = $_POST['latitude'];
$lng = $_POST['longitude'];
if (isset($_POST['id']) && !empty($_POST['id'])) {
// Update jika ID ada (Logika update.php)
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE spbu SET nama_spbu='$nama', no_telp='$telp', status_24jam='$status', latitude='$lat', longitude='$lng' WHERE id='$id'";
} else {
// Simpan Baru (Logika simpan)
$sql = "INSERT INTO spbu (nama_spbu, no_telp, status_24jam, latitude, longitude) VALUES ('$nama', '$telp', '$status', '$lat', '$lng')";
}
echo mysqli_query($conn, $sql) ? "Data SPBU berhasil diproses" : "Gagal: " . mysqli_error($conn);
exit;
}
// 4. SIMPAN/UPDATE JALAN (LINE)
else if (isset($_POST['type']) && $_POST['type'] === 'jalan') {
$nama = mysqli_real_escape_string($conn, $_POST['nama_jalan']);
$status = mysqli_real_escape_string($conn, $_POST['status_jalan']);
if (isset($_POST['id']) && !empty($_POST['id'])) {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE data_jalan SET nama_jalan='$nama', status_jalan='$status' WHERE id='$id'";
echo mysqli_query($conn, $sql) ? "Berhasil diupdate" : "Error DB: " . mysqli_error($conn);
} else {
$panjang = mysqli_real_escape_string($conn, $_POST['panjang_m']);
$geojson = mysqli_real_escape_string($conn, $_POST['geojson']);
$sql = "INSERT INTO data_jalan (nama_jalan, status_jalan, panjang_m, geojson) VALUES ('$nama', '$status', '$panjang', '$geojson')";
echo mysqli_query($conn, $sql) ? "Jalan Berhasil Disimpan" : "Error DB: " . mysqli_error($conn);
}
exit;
}
// 5. SIMPAN/UPDATE PARSIL
else if (isset($_POST['type']) && $_POST['type'] === 'parsil') {
$pemilik = mysqli_real_escape_string($conn, $_POST['pemilik']);
$status = mysqli_real_escape_string($conn, $_POST['status_milik']);
if (isset($_POST['id']) && !empty($_POST['id'])) {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE data_parsil SET pemilik='$pemilik', status_milik='$status' WHERE id='$id'";
echo mysqli_query($conn, $sql) ? "Berhasil diupdate" : "Error DB: " . mysqli_error($conn);
} else {
$luas = mysqli_real_escape_string($conn, $_POST['luas_m2']);
$geojson = mysqli_real_escape_string($conn, $_POST['geojson']);
$sql = "INSERT INTO data_parsil (pemilik, status_milik, luas_m2, geojson) VALUES ('$pemilik', '$status', '$luas', '$geojson')";
echo mysqli_query($conn, $sql) ? "Parsil Berhasil Disimpan" : "Error DB: " . mysqli_error($conn);
}
exit;
}
// 6. SIMPAN/UPDATE RUMAH IBADAH
else if (isset($_POST['type']) && $_POST['type'] === 'rumah_ibadah') {
$nama = mysqli_real_escape_string($conn, $_POST['nama']);
$jenis = mysqli_real_escape_string($conn, $_POST['jenis']);
$alamat = mysqli_real_escape_string($conn, $_POST['alamat']);
$radius = (int)$_POST['radius_meter'];
$lat = $_POST['latitude'];
$lng = $_POST['longitude'];
if (isset($_POST['id']) && !empty($_POST['id'])) {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE rumah_ibadah SET nama='$nama', jenis='$jenis', alamat='$alamat', radius_meter='$radius', latitude='$lat', longitude='$lng' WHERE id='$id'";
echo mysqli_query($conn, $sql) ? "Berhasil diupdate" : "Error DB: " . mysqli_error($conn);
} else {
$sql = "INSERT INTO rumah_ibadah (nama, jenis, alamat, radius_meter, latitude, longitude) VALUES ('$nama', '$jenis', '$alamat', '$radius', '$lat', '$lng')";
echo mysqli_query($conn, $sql) ? "Rumah Ibadah Berhasil Disimpan" : "Error DB: " . mysqli_error($conn);
}
exit;
}
// 7. SIMPAN/UPDATE PENDUDUK MISKIN (RUMAH)
else if (isset($_POST['type']) && $_POST['type'] === 'penduduk_miskin') {
$nama = mysqli_real_escape_string($conn, $_POST['nama_kepala']);
$jumlah_jiwa = (int)$_POST['jumlah_jiwa'];
$lat = $_POST['latitude'];
$lng = $_POST['longitude'];
$ibadah_id = !empty($_POST['ibadah_id']) && $_POST['ibadah_id'] !== 'null' ? "'" . mysqli_real_escape_string($conn, $_POST['ibadah_id']) . "'" : "NULL";
$tanggal_lahir = !empty($_POST['tanggal_lahir']) ? "'" . mysqli_real_escape_string($conn, $_POST['tanggal_lahir']) . "'" : "NULL";
$pendidikan = mysqli_real_escape_string($conn, $_POST['pendidikan'] ?? '');
$riwayat_penyakit = mysqli_real_escape_string($conn, $_POST['riwayat_penyakit'] ?? '');
$penghasilan_perbulan = mysqli_real_escape_string($conn, $_POST['penghasilan_perbulan'] ?? '');
$status_laporan = mysqli_real_escape_string($conn, $_POST['status_laporan'] ?? 'Terverifikasi');
if (isset($_POST['id']) && !empty($_POST['id'])) {
$id = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "UPDATE penduduk_miskin SET nama_kepala='$nama', jumlah_jiwa='$jumlah_jiwa', latitude='$lat', longitude='$lng', ibadah_id=$ibadah_id, tanggal_lahir=$tanggal_lahir, pendidikan='$pendidikan', riwayat_penyakit='$riwayat_penyakit', penghasilan_perbulan='$penghasilan_perbulan', status_laporan='$status_laporan' WHERE id='$id'";
echo mysqli_query($conn, $sql) ? "Berhasil diupdate" : "Error DB: " . mysqli_error($conn);
} else {
$sql = "INSERT INTO penduduk_miskin (nama_kepala, jumlah_jiwa, latitude, longitude, ibadah_id, tanggal_lahir, pendidikan, riwayat_penyakit, penghasilan_perbulan, status_laporan) VALUES ('$nama', '$jumlah_jiwa', '$lat', '$lng', $ibadah_id, $tanggal_lahir, '$pendidikan', '$riwayat_penyakit', '$penghasilan_perbulan', '$status_laporan')";
echo mysqli_query($conn, $sql) ? "Penduduk Miskin Berhasil Disimpan" : "Error DB: " . mysqli_error($conn);
}
exit;
}
// 8. CATAT BANTUAN
else if (isset($_POST['type']) && $_POST['type'] === 'catat_bantuan') {
$penduduk_id = (int)($_POST['penduduk_id'] ?? 0);
$deskripsi_bantuan = mysqli_real_escape_string($conn, $_POST['deskripsi_bantuan'] ?? '');
$tanggal = date('Y-m-d');
$sql = "INSERT INTO histori_bantuan (penduduk_id, tanggal, deskripsi_bantuan) VALUES ('$penduduk_id', '$tanggal', '$deskripsi_bantuan')";
echo mysqli_query($conn, $sql) ? "Bantuan tersimpan" : "Error DB: " . mysqli_error($conn);
exit;
}
// 9. VERIFIKASI WARGA
else if (isset($_POST['type']) && $_POST['type'] === 'verifikasi_warga') {
$id = (int)($_POST['id'] ?? 0);
$sql = "UPDATE penduduk_miskin SET status_laporan = 'Terverifikasi' WHERE id = '$id'";
if (mysqli_query($conn, $sql)) {
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => mysqli_error($conn)]);
}
exit;
}
}
// --- LOGIKA AMBIL DATA (METODE GET) ---
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$data = ['spbu' => [], 'jalan' => [], 'parsil' => []];
// Ambil SPBU
$q_spbu = mysqli_query($conn, "SELECT * FROM spbu");
while($r = mysqli_fetch_assoc($q_spbu)) {
$r['latitude'] = (float)$r['latitude'];
$r['longitude'] = (float)$r['longitude'];
$data['spbu'][] = $r;
}
// Ambil Jalan
$q_jalan = mysqli_query($conn, "SELECT * FROM data_jalan");
while($r = mysqli_fetch_assoc($q_jalan)) $data['jalan'][] = $r;
// Ambil Parsil
$q_parsil = mysqli_query($conn, "SELECT * FROM data_parsil");
while($r = mysqli_fetch_assoc($q_parsil)) $data['parsil'][] = $r;
// Ambil Rumah Ibadah
$q_ibadah = mysqli_query($conn, "SELECT * FROM rumah_ibadah");
if($q_ibadah) {
$data['rumah_ibadah'] = [];
while($r = mysqli_fetch_assoc($q_ibadah)) {
$r['latitude'] = (float)$r['latitude'];
$r['longitude'] = (float)$r['longitude'];
$r['radius_meter'] = (int)$r['radius_meter'];
$data['rumah_ibadah'][] = $r;
}
}
// Ambil Penduduk Miskin
$q_penduduk = mysqli_query($conn, "SELECT * FROM penduduk_miskin");
if($q_penduduk) {
$data['penduduk_miskin'] = [];
while($r = mysqli_fetch_assoc($q_penduduk)) {
$r['latitude'] = (float)$r['latitude'];
$r['longitude'] = (float)$r['longitude'];
// Ambil histori bantuan untuk penduduk ini
$p_id = $r['id'];
$r['histori_bantuan'] = [];
$q_histori = mysqli_query($conn, "SELECT tanggal, deskripsi_bantuan FROM histori_bantuan WHERE penduduk_id = '$p_id' ORDER BY tanggal DESC");
if ($q_histori) {
while($h = mysqli_fetch_assoc($q_histori)) {
$r['histori_bantuan'][] = $h;
}
}
$data['penduduk_miskin'][] = $r;
}
}
header('Content-Type: application/json');
echo json_encode($data);
}
?>
02/buat_akun.php
+68
View File
@@ -0,0 +1,68 @@
<?php
include 'koneksi.php';
// 1. Siapkan data akun (Ganti password sesuai selera jika mau)
$akun = [
[
'username' => 'admin',
'password' => password_hash('admin123', PASSWORD_DEFAULT),
'role' => 'Admin',
'ibadah_id' => 'NULL'
],
[
'username' => 'walikota',
'password' => password_hash('walikota123', PASSWORD_DEFAULT),
'role' => 'Walikota',
'ibadah_id' => 'NULL'
],
[
'username' => 'HKBP',
'password' => password_hash('HKBP123', PASSWORD_DEFAULT),
'role' => 'Rumah_Ibadah',
'ibadah_id' => '1' // Pastikan ID 1 benar-benar ada di tabel rumah_ibadah Anda!
],
[
'username' => 'klenteng',
'password' => password_hash('klenteng123', PASSWORD_DEFAULT),
'role' => 'Rumah_Ibadah',
'ibadah_id' => '4' // Pastikan ID 1 benar-benar ada di tabel rumah_ibadah Anda!
],
[
'username' => 'pura',
'password' => password_hash('pura123', PASSWORD_DEFAULT),
'role' => 'Rumah_Ibadah',
'ibadah_id' => '5' // Pastikan ID 1 benar-benar ada di tabel rumah_ibadah Anda!
],
[
'username' => 'vihara',
'password' => password_hash('vihara123', PASSWORD_DEFAULT),
'role' => 'Rumah_Ibadah',
'ibadah_id' => '6' // Pastikan ID 1 benar-benar ada di tabel rumah_ibadah Anda!
],
[
'username' => 'gereja',
'password' => password_hash('gereja123', PASSWORD_DEFAULT),
'role' => 'Rumah_Ibadah',
'ibadah_id' => '7' // Pastikan ID 1 benar-benar ada di tabel rumah_ibadah Anda!
],
[
'username' => 'masjid',
'password' => password_hash('masjid123', PASSWORD_DEFAULT),
'role' => 'Rumah_Ibadah',
'ibadah_id' => '8' // Pastikan ID 1 benar-benar ada di tabel rumah_ibadah Anda!
]
];
// 2. Masukkan ke database
foreach ($akun as $a) {
$ibadah = $a['ibadah_id'];
$sql = "INSERT INTO users (username, password, role, ibadah_id)
VALUES ('{$a['username']}', '{$a['password']}', '{$a['role']}', $ibadah)";
if (mysqli_query($conn, $sql)) {
echo "Akun {$a['username']} berhasil dibuat!<br>";
} else {
echo "Gagal membuat {$a['username']}: " . mysqli_error($conn) . "<br>";
}
}
?>
02/index.html
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web GIS Pontianak - SPBU, Jalan & Parsil</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>
html, body { height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
.form-popup { min-width: 200px; padding: 5px; }
.form-popup input, .form-popup select { width: 100%; margin-bottom: 10px; display: block; box-sizing: border-box; }
.form-popup button { width: 100%; cursor: pointer; background: #28a745; color: white; border: none; padding: 8px; border-radius: 4px; }
</style>
</head>
<body>
<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 src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script>
const map = L.map('map').setView([-0.055319, 109.349502], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 1. Setup Ikon
const iconHijau = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.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 iconMerah = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.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] });
// 2. Setup Leaflet Draw
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
draw: { polyline: true, polygon: true, marker: true, circle: false, rectangle: false, circlemarker: false },
edit: { featureGroup: drawnItems }
});
map.addControl(drawControl);
// 3. Event Saat Selesai Menggambar
map.on(L.Draw.Event.CREATED, function (e) {
const layer = e.layer;
const type = e.layerType;
const geojson = JSON.stringify(layer.toGeoJSON());
drawnItems.addLayer(layer);
if (type === 'marker') {
const lat = layer.getLatLng().lat;
const lng = layer.getLatLng().lng;
layer.bindPopup(`
<h4>Tambah SPBU</h4>
Nama: <input type="text" id="in_nama"><br>
WA: <input type="text" id="in_wa"><br>
24 Jam: <select id="in_status"><option value="Ya">Ya</option><option value="Tidak">Tidak</option></select><br>
<button onclick="simpanSPBU(${lat}, ${lng})">Simpan</button>
`).openPopup();
}
else if (type === 'polyline') {
const pj = turf.length(layer.toGeoJSON(), {units: 'meters'}).toFixed(2);
layer.bindPopup(`
<h4>Tambah Jalan</h4>
<p>Panjang: ${pj} m</p>
Nama Jalan: <input type="text" id="in_jalan"><br>
Status: <select id="in_s_jalan"><option value="Nasional">Nasional</option><option value="Provinsi">Provinsi</option><option value="Kabupaten">Kabupaten</option></select><br>
<button onclick="simpanJalan('${geojson}', ${pj})">Simpan Jalan</button>
`).openPopup();
}
});
// 4. Fungsi Simpan (HARUS SAMA DENGAN $_POST di ambil.php)
function simpanSPBU(lat, lng) {
const fd = new FormData();
fd.append('nama_spbu', document.getElementById('in_nama').value); // Sesuai PHP
fd.append('no_telp', document.getElementById('in_wa').value); // Sesuai PHP
fd.append('status_24jam', document.getElementById('in_status').value); // Sesuai PHP
fd.append('latitude', lat);
fd.append('longitude', lng);
kirimKeServer(fd);
}
function simpanJalan(gj, pj) {
const fd = new FormData();
fd.append('type', 'jalan');
fd.append('nama_jalan', document.getElementById('in_jalan').value);
fd.append('status_jalan', document.getElementById('in_s_jalan').value);
// PENTING: Di database kamu nama kolomnya 'panjang_m'
// Jadi di PHP nanti kita tangkap sebagai $_POST['panjang_m']
fd.append('panjang_m', pj);
fd.append('geojson', gj);
prosesKirim(fd);
}
function simpanParsil(gj, ls) {
const fd = new FormData();
fd.append('type', 'parsil');
fd.append('pemilik', document.getElementById('n_parsil').value);
fd.append('status_milik', document.getElementById('s_parsil').value);
// PENTING: Di database kamu nama kolomnya 'luas_m2'
fd.append('luas_m2', ls);
fd.append('geojson', gj);
prosesKirim(fd);
}
function kirimKeServer(fd) {
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(res => {
alert("Respon: " + res);
location.reload();
});
}
function prosesKirim(fd) {
kirimKeServer(fd);
}
// 5. Muat Data (Bagian B di ambil.php)
function muatData() {
fetch('ambil.php')
.then(res => res.json())
.then(data => {
// Tampilkan SPBU
data.spbu.forEach(s => {
L.marker([s.latitude, s.longitude], {icon: s.status_24jam === 'Ya' ? iconHijau : iconMerah})
.addTo(map).bindPopup(s.nama_spbu);
});
// Tampilkan Jalan
data.jalan.forEach(j => {
L.geoJSON(JSON.parse(j.geojson), {style: {color: 'blue'}}).addTo(map).bindPopup(j.nama_jalan);
});
})
.catch(err => console.error("Error muat data:", err));
}
muatData();
</script>
</body>
</html>
02/index.php
+1231
View File
File diff suppressed because it is too large Load Diff
02/koneksi.php
+12
View File
@@ -0,0 +1,12 @@
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "spbu_pontianak";
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
die("Koneksi gagal: " . mysqli_connect_error());
}
?>
02/login.php
+153
View File
@@ -0,0 +1,153 @@
<?php
session_start();
include 'koneksi.php';
// Jika sudah login, redirect ke index.php
if (isset($_SESSION['role'])) {
header("Location: index.php");
exit;
}
$error = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = $_POST['password'];
$sql = "SELECT * FROM users WHERE username = '$username'";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
$user = mysqli_fetch_assoc($result);
// Verifikasi password hash
if (password_verify($password, $user['password'])) {
// Set session
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];
$_SESSION['role'] = $user['role'];
$_SESSION['ibadah_id'] = $user['ibadah_id']; // Bisa null untuk Admin/Walikota
header("Location: index.php");
exit;
} else {
$error = "Password salah!";
}
} else {
$error = "Username tidak ditemukan!";
}
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login WebGIS</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #333;
}
.login-container {
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 320px;
}
.login-container h2 {
text-align: center;
margin-bottom: 25px;
color: #2c3e50;
font-size: 24px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #666;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 14px;
transition: border-color 0.2s;
}
.form-control:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.btn-login {
width: 100%;
padding: 12px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
}
.btn-login:hover {
background-color: #2980b9;
}
.btn-login:active {
transform: scale(0.98);
}
.error-message {
background-color: #ffebee;
color: #c62828;
padding: 10px;
border-radius: 6px;
margin-bottom: 20px;
font-size: 13px;
text-align: center;
border: 1px solid #ef9a9a;
}
</style>
</head>
<body>
<div class="login-container">
<h2>🔐 WebGIS Login</h2>
<?php if(!empty($error)): ?>
<div class="error-message">
<?php echo $error; ?>
</div>
<?php endif; ?>
<form method="POST" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" required placeholder="Masukkan username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control" required placeholder="Masukkan password">
</div>
<button type="submit" class="btn-login">Login</button>
</form>
</div>
</body>
</html>
02/logout.php
+7
View File
@@ -0,0 +1,7 @@
<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php");
exit;
?>
02/proses_login.php
+41
View File
@@ -0,0 +1,41 @@
<?php
session_start();
include 'koneksi.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = $_POST['password'];
$sql = "SELECT * FROM users WHERE username = '$username'";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
$user = mysqli_fetch_assoc($result);
// Verifikasi password hash
if (password_verify($password, $user['password'])) {
// Set session
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];
$_SESSION['role'] = $user['role'];
$_SESSION['ibadah_id'] = $user['ibadah_id'];
// Redirect kembali ke halaman utama jika berhasil
header("Location: index.php");
exit;
} else {
// Password salah
header("Location: index.php?error=1");
exit;
}
} else {
// Username tidak ditemukan
header("Location: index.php?error=1");
exit;
}
} else {
// Jika diakses langsung tanpa POST form
header("Location: index.php");
exit;
}
?>