add file
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
include 'koneksi.php';
|
||||
|
||||
$data = [];
|
||||
|
||||
// jalan
|
||||
$q1 = $conn->query("SELECT * FROM jalan");
|
||||
while($r = $q1->fetch_assoc()){
|
||||
$r['tipe'] = "jalan";
|
||||
$data[] = $r;
|
||||
}
|
||||
|
||||
// tanah
|
||||
$q2 = $conn->query("SELECT * FROM tanah");
|
||||
while($r = $q2->fetch_assoc()){
|
||||
$r['tipe'] = "tanah";
|
||||
$data[] = $r;
|
||||
}
|
||||
// ================= RUSAK =================
|
||||
$q3 = $conn->query("SELECT * FROM rusak");
|
||||
|
||||
while($r = $q3->fetch_assoc()){
|
||||
$r['tipe'] = "rusak";
|
||||
$data[] = $r;
|
||||
}
|
||||
|
||||
echo json_encode($data);
|
||||
?>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<?php
|
||||
include 'koneksi.php';
|
||||
|
||||
$id = $_POST['id'];
|
||||
$tipe = $_POST['tipe'];
|
||||
$nama = $_POST['nama'];
|
||||
|
||||
if($tipe=="jalan"){
|
||||
$sql = "UPDATE jalan SET nama_jalan='$nama' WHERE id='$id'";
|
||||
}else{
|
||||
$sql = "UPDATE tanah SET nama_pemilik='$nama' WHERE id='$id'";
|
||||
}
|
||||
|
||||
$conn->query($sql);
|
||||
echo "success";
|
||||
?>
|
||||
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
include 'koneksi.php';
|
||||
|
||||
$id = $_POST['id'];
|
||||
$tipe = $_POST['tipe'];
|
||||
|
||||
if($tipe=="jalan"){
|
||||
$sql = "DELETE FROM jalan WHERE id='$id'";
|
||||
}else{
|
||||
$sql = "DELETE FROM tanah WHERE id='$id'";
|
||||
}
|
||||
if($tipe=="rusak"){
|
||||
$sql = "DELETE FROM rusak WHERE id='$id'";
|
||||
}
|
||||
|
||||
$conn->query($sql);
|
||||
echo "success";
|
||||
?>
|
||||
+321
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WebGIS Jalan & Tanah</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>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
|
||||
<style>
|
||||
#map { height: 100vh; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" id="search" placeholder="Cari data..."
|
||||
style="position:absolute; top:10px; left:50px; z-index:1000; padding:8px;">
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// ================= MAP =================
|
||||
var map = L.map('map').setView([-0.0553538229, 109.3495577035], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
||||
|
||||
// ================= DRAW =================
|
||||
var drawnItems = new L.FeatureGroup();
|
||||
map.addLayer(drawnItems);
|
||||
|
||||
var drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
polyline: true,
|
||||
polygon: true,
|
||||
marker: true,
|
||||
circle: false,
|
||||
rectangle: false
|
||||
},
|
||||
edit: {
|
||||
featureGroup: drawnItems
|
||||
}
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
|
||||
// ================= EVENT DRAW =================
|
||||
map.on(L.Draw.Event.CREATED, function (e) {
|
||||
|
||||
var layer = e.layer;
|
||||
drawnItems.addLayer(layer);
|
||||
|
||||
var geojson = layer.toGeoJSON();
|
||||
|
||||
// ===== JALAN =====
|
||||
if (e.layerType === 'polyline') {
|
||||
|
||||
var latlngs = layer.getLatLngs();
|
||||
var panjang = 0;
|
||||
|
||||
for (var i=0; i<latlngs.length-1; i++) {
|
||||
panjang += latlngs[i].distanceTo(latlngs[i+1]);
|
||||
}
|
||||
|
||||
var form = `
|
||||
<form id="formJalan">
|
||||
Nama Jalan:<br>
|
||||
<input type="text" name="nama_jalan" required><br><br>
|
||||
|
||||
Status:<br>
|
||||
<select name="status">
|
||||
<option value="nasional">Nasional</option>
|
||||
<option value="provinsi">Provinsi</option>
|
||||
<option value="kabupaten">Kabupaten</option>
|
||||
</select><br><br>
|
||||
|
||||
<b>Panjang: ${panjang.toFixed(2)} meter</b><br><br>
|
||||
|
||||
<input type="hidden" name="panjang" value="${panjang}">
|
||||
<input type="hidden" name="geom" value='${JSON.stringify(geojson)}'>
|
||||
|
||||
<button type="submit">Simpan Jalan</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
layer.bindPopup(form).openPopup();
|
||||
}
|
||||
|
||||
// ===== TANAH =====
|
||||
if (e.layerType === 'polygon') {
|
||||
|
||||
var luas = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
|
||||
|
||||
var form = `
|
||||
<form id="formTanah">
|
||||
Nama Pemilik:<br>
|
||||
<input type="text" name="nama_pemilik" required><br><br>
|
||||
|
||||
Status:<br>
|
||||
<select name="status">
|
||||
<option value="SHM">SHM</option>
|
||||
<option value="HGB">HGB</option>
|
||||
<option value="HGU">HGU</option>
|
||||
<option value="HP">HP</option>
|
||||
</select><br><br>
|
||||
|
||||
<b>Luas: ${luas.toFixed(2)} m²</b><br><br>
|
||||
|
||||
<input type="hidden" name="luas" value="${luas}">
|
||||
<input type="hidden" name="geom" value='${JSON.stringify(geojson)}'>
|
||||
|
||||
<button type="submit">Simpan Tanah</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
layer.bindPopup(form).openPopup();
|
||||
}
|
||||
|
||||
// ===== TITIK RUSAK =====
|
||||
if (e.layerType === 'marker') {
|
||||
|
||||
var latlng = layer.getLatLng();
|
||||
|
||||
var form = `
|
||||
<form id="formRusak">
|
||||
Nama Jalan:<br>
|
||||
<input type="text" name="nama" required><br><br>
|
||||
|
||||
Keterangan:<br>
|
||||
<textarea name="keterangan"></textarea><br><br>
|
||||
|
||||
<input type="hidden" name="lat" value="${latlng.lat}">
|
||||
<input type="hidden" name="lng" value="${latlng.lng}">
|
||||
|
||||
<button type="submit">Simpan Titik Rusak</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
layer.bindPopup(form).openPopup();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// ================= SIMPAN =================
|
||||
|
||||
// jalan
|
||||
$(document).on('submit','#formJalan', function(e){
|
||||
e.preventDefault();
|
||||
var formData = new FormData(this);
|
||||
formData.append("tipe","jalan");
|
||||
|
||||
$.ajax({
|
||||
url: "simpan.php",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(res){
|
||||
if(res.trim()=="success"){
|
||||
alert("Jalan disimpan");
|
||||
location.reload();
|
||||
}else{
|
||||
alert(res);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// tanah
|
||||
$(document).on('submit','#formTanah', function(e){
|
||||
e.preventDefault();
|
||||
var formData = new FormData(this);
|
||||
formData.append("tipe","tanah");
|
||||
|
||||
$.ajax({
|
||||
url: "simpan.php",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(res){
|
||||
if(res.trim()=="success"){
|
||||
alert("Tanah disimpan");
|
||||
location.reload();
|
||||
}else{
|
||||
alert(res);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// rusak
|
||||
$(document).on('submit','#formRusak', function(e){
|
||||
e.preventDefault();
|
||||
var formData = new FormData(this);
|
||||
formData.append("tipe","rusak");
|
||||
|
||||
$.ajax({
|
||||
url: "simpan.php",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(res){
|
||||
if(res.trim()=="success"){
|
||||
alert("Titik disimpan");
|
||||
location.reload();
|
||||
}else{
|
||||
alert(res);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ================= LOAD DATA =================
|
||||
$.getJSON("ambil.php", function(data){
|
||||
|
||||
data.forEach(function(d){
|
||||
|
||||
// ===== RUSAK =====
|
||||
if(d.tipe=="rusak"){
|
||||
var marker = L.marker([d.lat, d.lng]).addTo(map);
|
||||
marker.bindPopup(d.nama);
|
||||
}
|
||||
|
||||
// ===== LINE & POLYGON =====
|
||||
if(d.geom){
|
||||
var geo = JSON.parse(d.geom);
|
||||
|
||||
var color = "black";
|
||||
|
||||
if(d.tipe=="jalan"){
|
||||
color = d.status=="nasional"?"red":
|
||||
d.status=="provinsi"?"blue":"green";
|
||||
}
|
||||
|
||||
if(d.tipe=="tanah"){
|
||||
color = d.status=="SHM"?"green":
|
||||
d.status=="HGB"?"blue":
|
||||
d.status=="HGU"?"orange":"purple";
|
||||
}
|
||||
|
||||
L.geoJSON(geo,{style:{color:color}}).addTo(map);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
var semuaData = [];
|
||||
|
||||
// ambil data sekali
|
||||
$.getJSON("ambil.php", function(data){
|
||||
semuaData = data;
|
||||
tampilkanData(data);
|
||||
});
|
||||
|
||||
// function tampilkan data
|
||||
function tampilkanData(data){
|
||||
|
||||
var group = L.featureGroup();
|
||||
|
||||
map.eachLayer(function(layer){
|
||||
if(layer instanceof L.GeoJSON || layer instanceof L.Marker){
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
|
||||
data.forEach(function(d){
|
||||
|
||||
// ===== POINT =====
|
||||
if(d.tipe=="rusak"){
|
||||
var marker = L.marker([d.lat, d.lng]).addTo(map);
|
||||
marker.bindPopup(d.nama);
|
||||
group.addLayer(marker);
|
||||
}
|
||||
|
||||
// ===== LINE & POLYGON =====
|
||||
if(d.geom){
|
||||
var geo = JSON.parse(d.geom);
|
||||
|
||||
var layer = L.geoJSON(geo).addTo(map);
|
||||
group.addLayer(layer);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// 🔥 AUTO ZOOM KE HASIL
|
||||
if(group.getLayers().length > 0){
|
||||
map.fitBounds(group.getBounds());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// SEARCH REALTIME
|
||||
$('#search').on('keyup', function(){
|
||||
|
||||
var key = $(this).val().toLowerCase();
|
||||
|
||||
var hasil = semuaData.filter(function(d){
|
||||
|
||||
if(d.tipe=="jalan"){
|
||||
return d.nama_jalan.toLowerCase().includes(key);
|
||||
}
|
||||
|
||||
if(d.tipe=="tanah"){
|
||||
return d.nama_pemilik.toLowerCase().includes(key);
|
||||
}
|
||||
|
||||
if(d.tipe=="rusak"){
|
||||
return d.nama.toLowerCase().includes(key);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
tampilkanData(hasil);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<?php
|
||||
$host = getenv('DB_HOST') ?: 'localhost';
|
||||
$user = getenv('DB_USER') ?: 'root';
|
||||
$pass = getenv('DB_PASSWORD');
|
||||
$pass = ($pass === false) ? '' : $pass;
|
||||
$db = getenv('DB_NAME') ?: 'webgis2';
|
||||
|
||||
$conn = new mysqli($host, $user, $pass, $db);
|
||||
|
||||
if ($conn->connect_error) {
|
||||
die("Koneksi database gagal: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
$conn->set_charset("utf8mb4");
|
||||
?>
|
||||
@@ -0,0 +1,74 @@
|
||||
<?php
|
||||
ini_set('display_errors',1);
|
||||
error_reporting(E_ALL);
|
||||
|
||||
include 'koneksi.php';
|
||||
|
||||
if(!isset($_POST['tipe'])){
|
||||
die("Error: tipe tidak ada");
|
||||
}
|
||||
|
||||
$tipe = $_POST['tipe'];
|
||||
|
||||
// ================= JALAN =================
|
||||
if($tipe=="jalan"){
|
||||
|
||||
$nama = $_POST['nama_jalan'];
|
||||
$status = $_POST['status'];
|
||||
$panjang = $_POST['panjang'];
|
||||
$geom = $_POST['geom'];
|
||||
|
||||
$sql = "INSERT INTO jalan (nama_jalan,status,panjang,geom)
|
||||
VALUES (?,?,?,?)";
|
||||
|
||||
$stmt = $conn->prepare($sql);
|
||||
$stmt->bind_param("ssds",$nama,$status,$panjang,$geom);
|
||||
|
||||
if($stmt->execute()){
|
||||
echo "success";
|
||||
}else{
|
||||
echo "Error: ".$stmt->error;
|
||||
}
|
||||
}
|
||||
|
||||
// ================= TANAH =================
|
||||
if($tipe=="tanah"){
|
||||
|
||||
$nama = $_POST['nama_pemilik'];
|
||||
$status = $_POST['status'];
|
||||
$luas = $_POST['luas'];
|
||||
$geom = $_POST['geom'];
|
||||
|
||||
$sql = "INSERT INTO tanah (nama_pemilik,status,luas,geom)
|
||||
VALUES (?,?,?,?)";
|
||||
|
||||
$stmt = $conn->prepare($sql);
|
||||
$stmt->bind_param("ssds",$nama,$status,$luas,$geom);
|
||||
|
||||
if($stmt->execute()){
|
||||
echo "success";
|
||||
}else{
|
||||
echo "Error: ".$stmt->error;
|
||||
}
|
||||
}
|
||||
// ================= POINT RUSAK =================
|
||||
if($tipe=="rusak"){
|
||||
|
||||
$nama = $_POST['nama'];
|
||||
$ket = $_POST['keterangan'];
|
||||
$lat = $_POST['lat'];
|
||||
$lng = $_POST['lng'];
|
||||
|
||||
$sql = "INSERT INTO rusak (nama,keterangan,lat,lng)
|
||||
VALUES (?,?,?,?)";
|
||||
|
||||
$stmt = $conn->prepare($sql);
|
||||
$stmt->bind_param("ssdd",$nama,$ket,$lat,$lng);
|
||||
|
||||
if($stmt->execute()){
|
||||
echo "success";
|
||||
}else{
|
||||
echo "Error: ".$stmt->error;
|
||||
}
|
||||
}
|
||||
?>
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
-- phpMyAdmin SQL Dump
|
||||
-- version 5.2.1
|
||||
-- https://www.phpmyadmin.net/
|
||||
--
|
||||
-- Host: 127.0.0.1
|
||||
-- Generation Time: Jun 07, 2026 at 08:40 AM
|
||||
-- Server version: 10.4.32-MariaDB
|
||||
-- PHP Version: 8.2.12
|
||||
|
||||
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
|
||||
START TRANSACTION;
|
||||
SET time_zone = "+00:00";
|
||||
|
||||
CREATE DATABASE IF NOT EXISTS `webgis2` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
|
||||
USE `webgis2`;
|
||||
|
||||
|
||||
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
|
||||
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
|
||||
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
|
||||
/*!40101 SET NAMES utf8mb4 */;
|
||||
|
||||
--
|
||||
-- Database: `webgis2`
|
||||
--
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `jalan`
|
||||
--
|
||||
|
||||
CREATE TABLE `jalan` (
|
||||
`id` int(11) NOT NULL,
|
||||
`nama_jalan` varchar(100) DEFAULT NULL,
|
||||
`status` enum('nasional','provinsi','kabupaten') DEFAULT NULL,
|
||||
`panjang` double DEFAULT NULL,
|
||||
`geom` longtext DEFAULT NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `rusak`
|
||||
--
|
||||
|
||||
CREATE TABLE `rusak` (
|
||||
`id` int(11) NOT NULL,
|
||||
`nama` varchar(100) DEFAULT NULL,
|
||||
`keterangan` text DEFAULT NULL,
|
||||
`lat` double DEFAULT NULL,
|
||||
`lng` double DEFAULT NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
--
|
||||
-- Dumping data for table `rusak`
|
||||
--
|
||||
|
||||
INSERT INTO `rusak` (`id`, `nama`, `keterangan`, `lat`, `lng`) VALUES
|
||||
(1, 'Jalan Muhammad Sohor', 'Jalan rusak', -0.04526554995370654, 109.33220118916333);
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `tanah`
|
||||
--
|
||||
|
||||
CREATE TABLE `tanah` (
|
||||
`id` int(11) NOT NULL,
|
||||
`nama_pemilik` varchar(100) DEFAULT NULL,
|
||||
`status` enum('SHM','HGB','HGU','HP') DEFAULT NULL,
|
||||
`luas` double DEFAULT NULL,
|
||||
`geom` longtext DEFAULT NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
--
|
||||
-- Dumping data for table `tanah`
|
||||
--
|
||||
|
||||
INSERT INTO `tanah` (`id`, `nama_pemilik`, `status`, `luas`, `geom`) VALUES
|
||||
(1, 'lutpi', 'SHM', 301239.82019077707, '{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[109.333446,-0.047334],[109.337673,-0.043859],[109.338831,-0.042936],[109.340998,-0.045597],[109.340355,-0.046626],[109.339389,-0.04727],[109.338509,-0.048343],[109.337501,-0.048901],[109.335913,-0.049287],[109.333446,-0.047334]]]}}');
|
||||
|
||||
--
|
||||
-- Indexes for dumped tables
|
||||
--
|
||||
|
||||
--
|
||||
-- Indexes for table `jalan`
|
||||
--
|
||||
ALTER TABLE `jalan`
|
||||
ADD PRIMARY KEY (`id`);
|
||||
|
||||
--
|
||||
-- Indexes for table `rusak`
|
||||
--
|
||||
ALTER TABLE `rusak`
|
||||
ADD PRIMARY KEY (`id`);
|
||||
|
||||
--
|
||||
-- Indexes for table `tanah`
|
||||
--
|
||||
ALTER TABLE `tanah`
|
||||
ADD PRIMARY KEY (`id`);
|
||||
|
||||
--
|
||||
-- AUTO_INCREMENT for dumped tables
|
||||
--
|
||||
|
||||
--
|
||||
-- AUTO_INCREMENT for table `jalan`
|
||||
--
|
||||
ALTER TABLE `jalan`
|
||||
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
|
||||
|
||||
--
|
||||
-- AUTO_INCREMENT for table `rusak`
|
||||
--
|
||||
ALTER TABLE `rusak`
|
||||
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
|
||||
|
||||
--
|
||||
-- AUTO_INCREMENT for table `tanah`
|
||||
--
|
||||
ALTER TABLE `tanah`
|
||||
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
|
||||
COMMIT;
|
||||
|
||||
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
||||
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
|
||||
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
|
||||
Reference in New Issue
Block a user