Upload semua tugas SIG
This commit is contained in:
Wilhelmus Ikchan Dwi Putra
@@ -0,0 +1,27 @@
|
||||
<?php
|
||||
// get_spbu.php
|
||||
header('Content-Type: application/json');
|
||||
$conn = new mysqli("localhost", "root", "", "db_tugas_1_sig"); // sesuaikan dengan database kamu
|
||||
|
||||
$response = [];
|
||||
$result = $conn->query("SELECT * FROM data_spbu");
|
||||
|
||||
while($row = $result->fetch_assoc()) {
|
||||
$geo = json_decode($row['geojson'], true);
|
||||
// Ekstrak koordinat Longitude dan Latitude dari objek GeoJSON Point
|
||||
$lng = $geo['geometry']['coordinates'][0];
|
||||
$lat = $geo['geometry']['coordinates'][1];
|
||||
|
||||
$response[] = [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama_spbu'],
|
||||
'status_24jam' => $row['status_24jam'],
|
||||
'alamat' => $row['alamat'],
|
||||
'lat' => $lat,
|
||||
'lng' => $lng
|
||||
];
|
||||
}
|
||||
|
||||
echo json_encode($response);
|
||||
$conn->close();
|
||||
?>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tugas 2 - Layer Control SPBU Pontianak</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: 550px; width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 2px solid #333; }
|
||||
.form-container { margin-top: 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: none; }
|
||||
.form-group { margin-bottom: 15px; }
|
||||
.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; }
|
||||
button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Tugas 2: Implementasi Layer Groups & Layers Control (Data SPBU Pontianak)</h2>
|
||||
<div id="map"></div>
|
||||
|
||||
<div class="form-container" id="form-spbu">
|
||||
<h3>Tambah Titik SPBU Baru</h3>
|
||||
<form action="proses_spbu.php" method="POST">
|
||||
<input type="hidden" id="geojson-str" name="geojson">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU / Nomor SPBU:</label>
|
||||
<input type="text" name="nama_spbu" required placeholder="Contoh: SPBU 61.781.01">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Operasional 24 Jam?</label>
|
||||
<select name="status_24jam" required>
|
||||
<option value="Ya">Ya (Buka 24 Jam)</option>
|
||||
<option value="Tidak">Tidak (Buka Terbatas)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Alamat / Lokasi:</label>
|
||||
<input type="text" name="alamat" placeholder="Nama Jalan...">
|
||||
</div>
|
||||
|
||||
<button type="submit">Simpan Lokasi SPBU</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- 1. INISIALISASI PETA & BASEMAP ---
|
||||
const map = L.map('map').setView([-0.0245, 109.3400], 13);
|
||||
|
||||
// Basemap Satelit (Esri)
|
||||
const satelitLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
attribution: '© Esri'
|
||||
}).addTo(map);
|
||||
|
||||
// Label Jalan
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png').addTo(map);
|
||||
|
||||
// --- 2. DEFINISI LAYER GROUPS (INSTRUKSI TUGAS) ---
|
||||
const groupSPBU24Jam = L.layerGroup().addTo(map); // Default dicentang/muncul
|
||||
const groupSPBUNon24Jam = L.layerGroup().addTo(map); // Default dicentang/muncul
|
||||
|
||||
// --- 3. AMBIL DATA DARI DATABASE & MASUKKAN KE LAYER GROUP YANG SESUAI ---
|
||||
fetch('get_spbu.php')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.forEach(spbu => {
|
||||
// Penentuan Icon atau Warna Marker berdasarkan status operasional
|
||||
// SPBU 24 Jam = Hijau, Non-24 Jam = Merah
|
||||
let warnaMarker = spbu.status_24jam === 'Ya' ? 'green' : 'red';
|
||||
|
||||
// Kita buat marker berbentuk lingkaran (CircleMarker) agar rapi di peta satelit
|
||||
let marker = L.circleMarker([spbu.lat, spbu.lng], {
|
||||
radius: 10,
|
||||
fillColor: warnaMarker,
|
||||
color: "#fff",
|
||||
weight: 2,
|
||||
fillOpacity: 0.9
|
||||
}).bindPopup(`
|
||||
<b>${spbu.nama}</b><br>
|
||||
<b>Buka 24 Jam:</b> ${spbu.status_24jam}<br>
|
||||
<b>Alamat:</b> ${spbu.alamat}
|
||||
`);
|
||||
|
||||
// Masukkan ke grup yang sesuai instruksi
|
||||
if (spbu.status_24jam === 'Ya') {
|
||||
marker.addTo(groupSPBU24Jam);
|
||||
} else {
|
||||
marker.addTo(groupSPBUNon24Jam);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- 4. IMPLEMENTASI LAYERS CONTROL (INSTRUKSI UTAMA) ---
|
||||
// Menyiapkan daftar layer group untuk ditaruh di kontrol panel kanan atas
|
||||
const overlayMaps = {
|
||||
"<span style='color: green; font-weight:bold;'>⛽ SPBU Buka 24 Jam</span>": groupSPBU24Jam,
|
||||
"<span style='color: red; font-weight:bold;'>⛽ SPBU Tidak Buka 24 Jam</span>": groupSPBUNon24Jam
|
||||
};
|
||||
|
||||
// Memunculkan kotak control di peta
|
||||
L.control.layers(null, overlayMaps, { collapsed: false }).addTo(map);
|
||||
|
||||
|
||||
// --- 5. CONFIG GEOMAN UNTUK INPUT POINT BARU (OPSIONAL CRUD) ---
|
||||
map.pm.addControls({
|
||||
position: 'topleft',
|
||||
drawMarker: true, // Kita hanya butuh menggambar Point/Marker untuk SPBU
|
||||
drawPolyline: false, drawPolygon: false, drawRectangle: false, drawCircle: false, editMode: false, removalMode: false
|
||||
});
|
||||
|
||||
map.on('pm:create', function(e) {
|
||||
const layer = e.layer;
|
||||
const geojson = layer.toGeoJSON();
|
||||
|
||||
document.getElementById('form-spbu').style.display = 'block';
|
||||
document.getElementById('geojson-str').value = JSON.stringify(geojson);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<?php
|
||||
// proses_spbu.php
|
||||
$conn = new mysqli("localhost", "root", "", "db_tugas_1_sig");
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$nama_spbu = $_POST['nama_spbu'];
|
||||
$status_24jam = $_POST['status_24jam'];
|
||||
$alamat = $_POST['alamat'];
|
||||
$geojson = $_POST['geojson'];
|
||||
|
||||
$sql = "INSERT INTO data_spbu (nama_spbu, status_24jam, alamat, geojson)
|
||||
VALUES ('$nama_spbu', '$status_24jam', '$alamat', '$geojson')";
|
||||
|
||||
if ($conn->query($sql) === TRUE) {
|
||||
echo "<script>alert('Titik SPBU Berhasil Ditambahkan!'); window.location='index.php';</script>";
|
||||
} else {
|
||||
echo "Error: " . $conn->error;
|
||||
}
|
||||
}
|
||||
$conn->close();
|
||||
?>
|
||||
Reference in New Issue
Block a user