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

Compare commits

merge into: Joscelind/WebGis:master
Branches Tags
Joscelind/WebGis:main Joscelind/WebGis:master
..
pull from: Joscelind/WebGis:main
Branches Tags
Joscelind/WebGis:master Joscelind/WebGis:main

1 Commits
master .. main

Author SHA1 Message Date
Joscelind baa9a12a3f Initial commit 2026-06-09 06:12:24 +00:00
16 changed files with 21 additions and 2574 deletions
Expand all files Collapse all files
01/ambil.php
-112
View File
@@ -1,112 +0,0 @@
<?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
@@ -1,146 +0,0 @@
<!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
@@ -1,414 +0,0 @@
<!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
@@ -1,12 +0,0 @@
<?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
@@ -1,215 +0,0 @@
<?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
@@ -1,68 +0,0 @@
<?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
@@ -1,146 +0,0 @@
<!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
@@ -1,12 +0,0 @@
<?php
$host = "x48gwg0sswkg04o8gswswc0s";
$user = "mysql";
$pass = "TGUv5PQd9awrENCDX0l03oX5wnFQywMFjZWMI6VinMA1IUHQGGd2l86k3k06rYkG";
$db = "default";
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
die("Koneksi gagal: " . mysqli_connect_error());
}
?>
02/login.php
-153
View File
@@ -1,153 +0,0 @@
<?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
@@ -1,7 +0,0 @@
<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php");
exit;
?>
02/proses_login.php
-41
View File
@@ -1,41 +0,0 @@
<?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;
}
?>
Dockerfile
-13
View File
@@ -1,13 +0,0 @@
FROM php:8.3-apache
# Install mysqli and PDO MySQL extensions
RUN docker-php-ext-install mysqli pdo pdo_mysql
# Copy the 02/ folder contents as the web root
COPY 02/ /var/www/html/
# Set proper permissions
RUN chown -R www-data:www-data /var/www/html \
&& chmod -R 755 /var/www/html
EXPOSE 80
LICENSE
+18
View File
@@ -0,0 +1,18 @@
MIT License
Copyright (c) 2026 Joscelind
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial
portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
USE OR OTHER DEALINGS IN THE SOFTWARE.
README.md
+3
View File
@@ -0,0 +1,3 @@
# WebGis
D1041231067 Joscelind Tugas Besar WebGIS Pemetaan Kemiskinan
index.php
-4
View File
@@ -1,4 +0,0 @@
<?php
header("Location: /02/index.php");
exit;
?>