WilhelmusIkchanDwiPutra_00/Tugas_1_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
WilhelmusIkchanDwiPutra_00
2026-06-12 17:20:41 +00:00
commit cd1633a0b7
4 changed files with 320 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
get_data.php
+27
View File
@@ -0,0 +1,27 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "nama_database_kamu");
$response = ['jalan' => [], 'parsil' => []];
// Ambil Jalan
$res_jalan = $conn->query("SELECT * FROM data_jalan");
while($row = $res_jalan->fetch_assoc()) {
$response['jalan'][] = [
'id' => $row['id'], 'nama' => $row['nama_jalan'], 'status' => $row['status_jalan'],
'panjang' => $row['panjang_meter'], 'geojson' => json_decode($row['geojson'])
];
}
// Ambil Parsil
$res_parsil = $conn->query("SELECT * FROM data_parsil");
while($row = $res_parsil->fetch_assoc()) {
$response['parsil'][] = [
'id' => $row['id'], 'kode' => $row['kode_kavling'], 'status' => $row['status_kepemilikan'],
'luas' => $row['luas_meter'], 'geojson' => json_decode($row['geojson'])
];
}
echo json_encode($response);
$conn->close();
?>
index.php
+201
View File
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>WebGIS Manajemen Jalan & Parsil Tanah</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f6f9; }
#map { height: 500px; width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.container { display: flex; gap: 20px; margin-top: 20px; }
.form-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 35%; display: none; }
.table-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table, th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #333; color: white; }
.btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; color: white; font-weight: bold; text-decoration: none; }
.btn-save { background-color: #28a745; width: 100%; }
.btn-delete { background-color: #dc3545; font-size: 12px; }
</style>
</head>
<body>
<h2>Manajemen Data Spasial Jalan & Parsil Tanah - Kota Pontianak</h2>
<div id="map"></div>
<div class="container">
<div class="form-container" id="form-box">
<h3 id="form-title">Input Data Spasial</h3>
<form action="proses.php" method="POST">
<input type="hidden" id="action" name="action" value="create">
<input type="hidden" id="id_data" name="id_data">
<input type="hidden" id="type" name="type">
<input type="hidden" id="geojson-str" name="geojson">
<div class="form-group">
<label id="label-nama">Nama Objek:</label>
<input type="text" id="nama_atribut" name="nama_atribut" required>
</div>
<div class="form-group">
<label>Status / Hak Kepemilikan:</label>
<select id="status-select" name="status" required></select>
</div>
<div class="form-group">
<label id="label-hitung">Hasil Hitung Otomatis:</label>
<input type="text" id="hasil-hitung" name="hasil_hitung" readonly style="background-color: #e9ecef; font-weight: bold;">
</div>
<button type="submit" class="btn btn-save">Simpan Data</button>
</form>
</div>
<div class="table-container">
<h3>Daftar Data Tersimpan</h3>
<div style="display: flex; gap: 20px;">
<div style="flex: 1;">
<h4>Data Jalan (Line)</h4>
<table id="tabel-jalan">
<tr><th>Nama Jalan</th><th>Status</th><th>Panjang (m)</th><th>Aksi</th></tr>
</table>
</div>
<div style="flex: 1;">
<h4>Data Parsil (Polygon)</h4>
<table id="tabel-parsil">
<tr><th>Kode Kavling</th><th>Status</th><th>Luas (m²)</th><th>Aksi</th></tr>
</table>
</div>
</div>
</div>
</div>
<script>
// 1. Inisialisasi Peta Satelit
const map = L.map('map').setView([-0.0245, 109.3400], 14);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}').addTo(map);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png').addTo(map);
// 2. Toolbar Digitasi Leaflet-Geoman
map.pm.addControls({
position: 'topleft',
drawMarker: false, drawCircleMarker: false, drawRectangle: false, drawCircle: false,
drawPolyline: true, drawPolygon: true, editMode: true, removalMode: false
});
// 3. Aksi Setelah Menggambar (CREATE)
map.on('pm:create', function(e) {
const layer = e.layer;
const shape = e.shape;
const geojson = layer.toGeoJSON();
document.getElementById('form-box').style.display = 'block';
document.getElementById('action').value = 'create';
document.getElementById('geojson-str').value = JSON.stringify(geojson);
if (shape === 'Line') {
document.getElementById('form-title').innerText = "Tambah Data Jalan Baru";
document.getElementById('label-nama').innerText = "Nama Jalan:";
document.getElementById('type').value = "jalan";
// Hitung Panjang Otomatis dengan fungsi bawaan LeafletJS (.distanceTo)
const latlngs = layer.getLatLngs();
let totalLength = 0;
for (let i = 0; i < latlngs.length - 1; i++) {
totalLength += latlngs[i].distanceTo(latlngs[i+1]);
}
document.getElementById('hasil-hitung').value = totalLength.toFixed(2) + " Meter";
setDropdown(['Nasional', 'Provinsi', 'Kabupaten']);
} else if (shape === 'Polygon') {
document.getElementById('form-title').innerText = "Tambah Data Parsil Tanah";
document.getElementById('label-nama').innerText = "Kode Kavling:";
document.getElementById('type').value = "parsil";
// Hitung Luas Otomatis rumus bola sferis bawahan Leaflet
const luas = hitungLuasBumi(layer.getLatLngs()[0]);
document.getElementById('hasil-hitung').value = luas.toFixed(2) + " m²";
setDropdown(['SHM', 'HGB', 'HGU', 'HP']);
}
});
function setDropdown(options) {
const select = document.getElementById('status-select');
select.innerHTML = '';
options.forEach(opt => {
let el = document.createElement('option');
el.value = opt; el.innerText = opt; select.appendChild(el);
});
}
function hitungLuasBumi(latlngs) {
let area = 0; const radius = 6378137;
if (latlngs.length > 2) {
for (let i = 0; i < latlngs.length; i++) {
let p1 = latlngs[i]; let p2 = latlngs[(i + 1) % latlngs.length];
area += (p2.lng - p1.lng) * Math.PI / 180 * (2 + Math.sin(p1.lat * Math.PI / 180) + Math.sin(p2.lat * Math.PI / 180));
}
area = area * radius * radius / 2;
}
return Math.abs(area);
}
// 4. LOAD DATA DARI DATABASE & PEWARNAAN OTOMATIS (READ)
fetch('get_data.php')
.then(res => {
if (!res.ok) throw new Error("Gagal mengambil data dari get_data.php");
return res.json();
})
.then(data => {
console.log("Data dari database:", data); // Untuk cek di F12 Console
// A. Render Jalan (Line)
if (data.jalan && data.jalan.length > 0) {
data.jalan.forEach(j => {
// Antisipasi variasi penulisan huruf besar/kecil di database
let statusJalan = j.status ? j.status.toLowerCase().trim() : '';
let warna = 'red'; // Default jika tidak cocok
if (statusJalan === 'nasional') warna = 'red';
else if (statusJalan === 'provinsi') warna = 'blue';
else if (statusJalan === 'kabupaten') warna = 'green';
L.geoJSON(j.geojson, {
style: { color: warna, weight: 5, opacity: 0.9 }
}).addTo(map)
.bindPopup(`<b>Jalan: ${j.nama}</b><br>Status: Jalan ${j.status}<br>Panjang: ${j.panjang} m`);
appendKeTabel('tabel-jalan', j.id, j.nama, j.status, j.panjang, 'jalan');
});
}
// B. Render Parsil (Polygon)
if (data.parsil && data.parsil.length > 0) {
data.parsil.forEach(p => {
let statusParsil = p.status ? p.status.toUpperCase().trim() : '';
let warna = '#FFD700'; // Default SHM (Kuning/Emas)
if (statusParsil === 'SHM') warna = '#FFD700';
else if (statusParsil === 'HGB') warna = '#FF8C00'; // Oranye
else if (statusParsil === 'HGU') warna = '#9370DB'; // Ungu
else if (statusParsil === 'HP') warna = '#00CED1'; // Biru Muda
L.geoJSON(p.geojson, {
style: { color: warna, fillColor: warna, fillOpacity: 0.5, weight: 2 }
}).addTo(map)
.bindPopup(`<b>Kavling: ${p.kode}</b><br>Status: ${p.status}<br>Luas: ${p.luas} m²`);
appendKeTabel('tabel-parsil', p.id, p.kode, p.status, p.luas, 'parsil');
});
}
})
.catch(err => console.error("Error WebGIS:", err));
</script>
</body>
</html>
proses.php
+57
View File
@@ -0,0 +1,57 @@
<?php
// proses.php
$conn = new mysqli("localhost", "root", "", "db_tugas_1_sig"); // Sesuaikan nama DB kamu
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
$action = isset($_GET['action']) ? $_GET['action'] : (isset($_POST['action']) ? $_POST['action'] : '');
// --- PROSES SIMPAN DATA (CREATE) ---
if ($action == 'create' && $_SERVER['REQUEST_METHOD'] == 'POST') {
$type = $_POST['type'];
$nama_atribut = $_POST['nama_atribut'];
$status = $_POST['status'];
$geojson = $_POST['geojson'];
// Ambil string input (Contoh: "1500.50 Meter" atau "300.45 m²")
$mentah = $_POST['hasil_hitung'];
// Gunakan regex untuk mengambil angka dan desimalnya saja agar aman masuk ke kolom FLOAT
preg_match('/[0-9.]+/', $mentah, $matches);
$angka_murni = isset($matches[0]) ? floatval($matches[0]) : 0;
if ($type == 'jalan') {
$sql = "INSERT INTO data_jalan (nama_jalan, status_jalan, panjang_meter, geojson)
VALUES ('$nama_atribut', '$status', '$angka_murni', '$geojson')";
} else if ($type == 'parsil') {
$sql = "INSERT INTO data_parsil (kode_kavling, status_kepemilikan, luas_meter, geojson)
VALUES ('$nama_atribut', '$status', '$angka_murni', '$geojson')";
}
if ($conn->query($sql) === TRUE) {
echo "<script>alert('Data Berhasil Disimpan!'); window.location='index.php';</script>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// --- PROSES HAPUS DATA (DELETE) ---
if ($action == 'delete' && isset($_GET['id']) && isset($_GET['type'])) {
$id = intval($_GET['id']);
$type = $_GET['type'];
if ($type == 'jalan') {
$sql = "DELETE FROM data_jalan WHERE id = $id";
} else if ($type == 'parsil') {
$sql = "DELETE FROM data_parsil WHERE id = $id";
}
if ($conn->query($sql) === TRUE) {
echo "<script>alert('Data Berhasil Dihapus!'); window.location='index.php';</script>";
}
}
$conn->close();
?>
simpan.php
+35
View File
@@ -0,0 +1,35 @@
<?php
// Koneksi ke Database
$host = "localhost";
$user = "root";
$pass = "";
$db = "nama_database_kamu"; // Sesuaikan dengan nama databasemu
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Koneksi Gagal: " . $conn->connect_error);
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$type = $_POST['type'];
$nama_atribut = $_POST['nama_atribut'];
$status = $_POST['status'];
$hasil_hitung = $_POST['hasil_hitung'];
$geojson = $_POST['geojson']; // String GeoJSON dari Leaflet
if ($type == 'jalan') {
$sql = "INSERT INTO data_jalan (nama_jalan, status_jalan, panjang_meter, geojson)
VALUES ('$nama_atribut', '$status', '$hasil_hitung', '$geojson')";
} else if ($type == 'parsil') {
$sql = "INSERT INTO data_parsil (kode_kavling, status_kepemilikan, luas_meter, geojson)
VALUES ('$nama_atribut', '$status', '$hasil_hitung', '$geojson')";
}
if ($conn->query($sql) === TRUE) {
echo "<script>alert('Data berhasil disimpan!'); window.location='index.php';</script>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>