ZahwaRaesaAdinda/WebGIS_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add auto-import DB script and update connection fallback

Browse Source
This commit is contained in:
Nama Kamu
2026-06-11 14:30:22 +07:00
commit 2aa30691f1
44 changed files with 8042 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02/database.sql
+29
View File
@@ -0,0 +1,29 @@
CREATE DATABASE IF NOT EXISTS 02_kerusakan;
USE 02_kerusakan;
CREATE TABLE jalan(
id INT AUTO_INCREMENT PRIMARY KEY,
nama_jalan VARCHAR(150),
status VARCHAR(50),
panjang DOUBLE,
geom LINESTRING NOT NULL,
SPATIAL INDEX idx_jalan(geom)
);
CREATE TABLE parsil(
id INT AUTO_INCREMENT PRIMARY KEY,
pemilik VARCHAR(100),
status VARCHAR(50),
luas DOUBLE,
geom POLYGON NOT NULL,
SPATIAL INDEX idx_parsil(geom)
);
CREATE TABLE jalan_rusak(
id INT AUTO_INCREMENT PRIMARY KEY,
nama_titik VARCHAR(100),
keterangan TEXT,
geom POINT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
SPATIAL INDEX idx_rusak(geom)
);
02/db.php
+14
View File
@@ -0,0 +1,14 @@
<?php
$host = getenv('DB_HOST') ?: 'localhost';
$user = getenv('DB_USER') ?: 'root';
$pass = getenv('DB_PASSWORD') ?: '';
$db = getenv('DB_NAME') ?: '02_kerusakan';
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
die("Koneksi database gagal: " . mysqli_connect_error());
}
?>
02/delete.php
+62
View File
@@ -0,0 +1,62 @@
<?php
include "db.php";
$data=json_decode(
file_get_contents("php://input"),
true
);
$id=$data['id'];
$type=$data['type'];
if($type=="jalan"){
$sql="
DELETE FROM jalan
WHERE id=$id
";
}
elseif($type=="parsil"){
$sql="
DELETE FROM parsil
WHERE id=$id
";
}
elseif($type=="rusak"){
$sql="
DELETE FROM jalan_rusak
WHERE id=$id
";
}
if(mysqli_query($conn,$sql)){
echo "Data berhasil dihapus";
}else{
echo mysqli_error($conn);
}
?>
02/index.php
+830
View File
@@ -0,0 +1,830 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS Jalan Parsil Kerusakan</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
<style>
*{
box-sizing:border-box;
font-family:Segoe UI,Arial;
}
body{
margin:0;
background:#020617;
}
#container{
display:flex;
height:100vh;
}
#sidebar{
width:360px;
background:#0f172a;
color:white;
padding:20px;
overflow:auto;
}
.logo{
font-size:22px;
font-weight:bold;
margin-bottom:20px;
}
.menu button{
width:100%;
padding:12px;
margin-bottom:8px;
border:none;
border-radius:10px;
background:#1e293b;
color:white;
cursor:pointer;
}
.menu button:hover{
background:#2563eb;
}
.card{
background:#1e293b;
padding:15px;
border-radius:15px;
margin-top:12px;
box-shadow:0 5px 15px #0005;
}
.card b{
color:#38bdf8;
}
#map{
flex:1;
}
#info{
background:#020617;
padding:10px;
color:#94a3b8;
border-radius:10px;
margin-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
<div class="logo">
🗺 WebGIS
</div>
<div class="menu">
<button onclick="filterData('all')">
Semua Data
</button>
<button onclick="filterData('jalan')">
🛣 Jalan
</button>
<button onclick="filterData('parsil')">
🏠 Parsil
</button>
<button onclick="filterData('rusak')">
⚠ Kerusakan
</button>
</div>
<div id="info">
Memuat data...
</div>
<div id="list"></div>
</div>
<div id="map"></div>
</div>
<script>
const map=L.map('map')
.setView([-0.0263,109.3425],14);
L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
).addTo(map);
let group=L.featureGroup().addTo(map);
let dataGlobal=[];
let tempLayer=null;
let tempType=null;
// LOAD DATA
fetch("load.php")
.then(r=>r.json())
.then(data=>{
dataGlobal=data;
document.getElementById("info").innerHTML=
"Total data : "+data.length;
tampil(data);
})
.catch(e=>{
document.getElementById("info").innerHTML=
"Load error "+e;
});
// TAMPIL PETA
function tampil(data){
group.clearLayers();
let html="";
data.forEach((d,i)=>{
if(!d.geom)return;
let geo=JSON.parse(d.geom);
let layer=L.geoJSON(geo);
let popup="";
// JALAN
if(d.type=="jalan"){
layer.setStyle({
color:"#22c55e",
weight:6
});
popup=`
<h3>🛣 Jalan</h3>
<b>Nama Jalan:</b> ${d.nama_jalan}<br>
<b>Status:</b> ${d.status || '-'}<br>
<b>Panjang:</b> ${d.panjang || '-'} meter
<br><br>
<button onclick="editData(${d.id},'jalan')">
Edit
</button>
<button onclick="hapusData(${d.id},'jalan')">
Hapus
</button>
`;
}
// PARSIL
if(d.type=="parsil"){
layer.setStyle({
color:"#6366f1",
fillOpacity:.4
});
popup=`
<h3>🏠 Parsil</h3>
<b>Area:</b> ${d.nama_area}<br>
<b>Pemilik:</b> ${d.pemilik || '-'}<br>
<b>Status:</b> ${d.status || '-'}<br>
<b>Luas:</b> ${d.luas || 0} m²<br>
<b>Keterangan:</b> ${d.keterangan || '-'}
`;
}
// RUSAK
if(d.type=="rusak"){
popup=`
<h3>⚠ Kerusakan</h3>
<b>Lokasi:</b> ${d.nama_titik}<br>
<b>Keterangan:</b> ${d.keterangan}
`;
}
layer.bindPopup(popup);
layer.addTo(group);
html+=`
<div class="card"
onclick="zoomData(${i})">
<b>${d.type}</b>
<br>
${d.nama_jalan ||
d.nama_area ||
d.nama_titik}
</div>
`;
});
document.getElementById("list")
.innerHTML=html;
if(group.getLayers().length)
map.fitBounds(group.getBounds());
}
function zoomData(i){
let geo=JSON.parse(dataGlobal[i].geom);
map.fitBounds(
L.geoJSON(geo).getBounds()
);
}
function filterData(type){
if(type=="all"){
tampil(dataGlobal);
return;
}
tampil(
dataGlobal.filter(x=>x.type==type)
);
}
// ================= DRAW EDIT =================
const draw=new L.Control.Draw({
edit:{
featureGroup:group,
edit:true,
remove:false
},
draw:{
marker:true,
polyline:true,
polygon:true,
circle:false,
rectangle:false
}
});
map.addControl(draw);
// saat geometry digeser / diedit
map.on(
'draw:edited',
function(e){
e.layers.eachLayer(function(layer){
let geo=layer.toGeoJSON();
fetch("update.php",{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
id:layer._id,
type:layer._type,
geom:geo
})
});
});
alert("Lokasi berhasil diperbarui");
});
// FORM INPUT
function openForm(){
let html="";
if(tempType=="rusak"){
html=`
<h3>Kerusakan Jalan</h3>
<input id="nama"
placeholder="Nama lokasi">
<br>
<textarea id="ket"
placeholder="Keterangan"></textarea>
`;
}
if(tempType=="jalan"){
html=`
<h3>Data Jalan</h3>
<input id="nama"
placeholder="Nama jalan">
<select id="status">
<option>Nasional</option>
<option>Provinsi</option>
<option>Kabupaten</option>
</select>
`;
}
if(tempType=="parsil"){
html=`
<h3>Data Parsil</h3>
<input id="nama"
placeholder="Nama area">
<input id="pemilik"
placeholder="Nama pemilik">
<select id="status">
<option>SHM</option>
<option>HGB</option>
<option>HGU</option>
</select>
<input id="luas"
placeholder="Luas tanah">
<textarea id="ket"
placeholder="Keterangan">
</textarea>
`;
}
let modal=document.createElement("div");
modal.id="inputBox";
modal.style.position="fixed";
modal.style.top="50%";
modal.style.left="50%";
modal.style.transform="translate(-50%,-50%)";
modal.style.background="white";
modal.style.padding="20px";
modal.style.zIndex="9999";
modal.innerHTML=
html+
`
<br>
<button onclick="simpanData()">
Simpan
</button>
<button onclick="batal()">
Batal
</button>
`;
document.body.appendChild(modal);
}
function batal(){
document.getElementById("inputBox").remove();
tempLayer.remove();
}
function simpanData(){
let geo=tempLayer.toGeoJSON();
let data={
type:tempType,
geom:geo
};
if(tempType=="rusak"){
data.nama_titik=
document.getElementById("nama").value;
data.keterangan=
document.getElementById("ket").value;
}
if(tempType=="jalan"){
data.nama=
document.getElementById("nama").value;
data.status=
document.getElementById("status").value;
}
if(tempType=="parsil"){
data.nama_area=
document.getElementById("nama").value;
data.pemilik=
document.getElementById("pemilik").value;
data.status=
document.getElementById("status").value;
data.luas=
document.getElementById("luas").value;
data.keterangan=
document.getElementById("ket").value;
}
fetch("save.php",{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify(data)
})
.then(r=>r.text())
.then(r=>{
alert(r);
location.reload();
});
}
function hapusData(id,type){
if(!confirm("Yakin hapus data ini?"))
return;
fetch("delete.php",{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
id:id,
type:type
})
})
.then(r=>r.text())
.then(r=>{
alert(r);
location.reload();
});
}
</script>
</body>
</html>
02/load.php
+141
View File
@@ -0,0 +1,141 @@
<?php
include "db.php";
header("Content-Type: application/json; charset=UTF-8");
$data = [];
// cek koneksi
if(!$conn){
echo json_encode([
"error"=>"Database gagal konek"
]);
exit;
}
// ================= JALAN =================
$q = mysqli_query($conn,"
SELECT
id,
nama_jalan,
status,
ST_AsGeoJSON(geom) AS geom
FROM jalan
");
if($q){
while($row=mysqli_fetch_assoc($q)){
$data[]=[
"id"=>(int)$row['id'],
"type"=>"jalan",
"nama_jalan"=>$row['nama_jalan'],
"status"=>"Kabupaten",
"panjang"=>0,
"geom"=>$row['geom']
];
}
}
// ================= PARSIL =================
$q = mysqli_query($conn,"
SELECT
id,
nama_area,
ST_AsGeoJSON(geom) AS geom
FROM parsil
");
if($q){
while($row=mysqli_fetch_assoc($q)){
$data[]=[
"id"=>(int)$row['id'],
"type"=>"parsil",
"pemilik"=>$row['nama_area'],
"status"=>"SHM",
"luas"=>0,
"geom"=>$row['geom']
];
}
}
// ================= KERUSAKAN =================
$q = mysqli_query($conn,"
SELECT
id,
nama_titik,
keterangan,
ST_AsGeoJSON(geom) AS geom
FROM jalan_rusak
");
if($q){
while($row=mysqli_fetch_assoc($q)){
$data[]=[
"id"=>(int)$row['id'],
"type"=>"rusak",
"nama_titik"=>$row['nama_titik'],
"keterangan"=>$row['keterangan'],
"geom"=>$row['geom']
];
}
}
echo json_encode($data);
?>
02/save.php
+194
View File
@@ -0,0 +1,194 @@
<?php
include "db.php";
header("Content-Type: text/plain");
$data=json_decode(file_get_contents("php://input"),true);
$type=$data['type'];
$geom=json_encode($data['geom']);
$coords=$data['geom']['geometry']['coordinates'];
// ================= JALAN =================
if($type=="jalan"){
$nama=mysqli_real_escape_string(
$conn,
$data['nama']
);
$status=mysqli_real_escape_string(
$conn,
$data['status']
);
$line="LINESTRING(";
foreach($coords as $c){
$line .= $c[0]." ".$c[1].",";
}
$line=rtrim($line,",").")";
$sql="
INSERT INTO jalan
(
nama_jalan,
geom
)
VALUES
(
'$nama',
ST_GeomFromText('$line')
)
";
}
// ================= PARSIL =================
elseif($type=="parsil"){
$nama=mysqli_real_escape_string(
$conn,
$data['nama_area']
);
$pemilik=mysqli_real_escape_string(
$conn,
$data['pemilik']
);
$status=mysqli_real_escape_string(
$conn,
$data['status']
);
$poly="POLYGON((";
foreach($coords[0] as $c){
$poly .= $c[0]." ".$c[1].",";
}
$poly=rtrim($poly,",")."))";
$sql="
INSERT INTO parsil
(
nama_area,
pemilik,
status,
geom
)
VALUES
(
'$nama',
'$pemilik',
'$status',
ST_GeomFromText('$poly')
)
";
}
// ================= RUSAK =================
elseif($type=="rusak"){
$nama=mysqli_real_escape_string(
$conn,
$data['nama_titik']
);
$ket=mysqli_real_escape_string(
$conn,
$data['keterangan']
);
$p=$coords;
$point =
"POINT(".$p[0]." ".$p[1].")";
$sql="
INSERT INTO jalan_rusak
(
nama_titik,
keterangan,
geom
)
VALUES
(
'$nama',
'$ket',
ST_GeomFromText('$point')
)
";
}
if(mysqli_query($conn,$sql)){
echo "Data berhasil disimpan";
}else{
echo "ERROR : ".mysqli_error($conn);
}
?>
02/update.php
+98
View File
@@ -0,0 +1,98 @@
<?php
include "db.php";
$data=json_decode(file_get_contents("php://input"),true);
$id=$data['id'];
$geom=$data['geom']['geometry'];
$type=$data['type'];
if($type=="rusak"){
$x=$geom['coordinates'][0];
$y=$geom['coordinates'][1];
$sql="
UPDATE jalan_rusak
SET geom =
ST_GeomFromText('POINT($x $y)')
WHERE id=$id
";
}
if($type=="jalan"){
$list=[];
foreach($geom['coordinates'] as $c){
$list[]=$c[0]." ".$c[1];
}
$line="LINESTRING(".implode(",",$list).")";
$sql="
UPDATE jalan
SET geom =
ST_GeomFromText('$line')
WHERE id=$id
";
}
if($type=="parsil"){
$list=[];
foreach($geom['coordinates'][0] as $c){
$list[]=$c[0]." ".$c[1];
}
$poly="POLYGON((".implode(",",$list)."))";
$sql="
UPDATE parsil
SET geom =
ST_GeomFromText('$poly')
WHERE id=$id
";
}
if(mysqli_query($conn,$sql)){
echo "OK";
}else{
echo mysqli_error($conn);
}
?>