Add WebGIS source code
This commit is contained in:
ocabacaa
@@ -0,0 +1,201 @@
|
||||
<?php
|
||||
|
||||
session_start();
|
||||
|
||||
if(!isset($_SESSION['role'])){
|
||||
|
||||
header("Location: ../index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
if($_SESSION['role'] != 'warga'){
|
||||
|
||||
header("Location: ../index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>Buat Laporan</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-slate-100 min-h-screen">
|
||||
|
||||
|
||||
<div class="max-w-5xl mx-auto p-6">
|
||||
|
||||
<a href="dashboard.php"
|
||||
class="inline-flex items-center gap-2 bg-slate-800 hover:bg-slate-900 text-white px-4 py-3 rounded-xl shadow">
|
||||
|
||||
← Kembali ke Dashboard
|
||||
|
||||
</a>
|
||||
|
||||
<div class="bg-white rounded-3xl shadow-lg p-8 mt-6">
|
||||
|
||||
<div class="mb-8">
|
||||
|
||||
<h1 class="text-3xl font-bold text-slate-800">
|
||||
Buat Laporan Warga
|
||||
</h1>
|
||||
|
||||
<p class="text-slate-500 mt-2">
|
||||
Isi data warga yang membutuhkan bantuan sosial dan pilih lokasi pada peta.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<form action="simpan_laporan.php" method="POST" enctype="multipart/form-data" class="space-y-5">
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-2 font-medium text-slate-700">
|
||||
Nama Warga
|
||||
</label>
|
||||
|
||||
<input type="text" name="nama_warga" required
|
||||
class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-2 font-medium text-slate-700">
|
||||
Alamat
|
||||
</label>
|
||||
|
||||
<textarea name="alamat" rows="3" required
|
||||
class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-2 font-medium text-slate-700">
|
||||
Kondisi Warga
|
||||
</label>
|
||||
|
||||
<textarea name="kondisi" rows="4" required
|
||||
class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-2 font-medium text-slate-700">
|
||||
Foto Kondisi Warga
|
||||
</label>
|
||||
|
||||
<input type="file" name="foto" accept="image/*" required class="w-full border rounded-xl px-4 py-3">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-2 font-medium text-slate-700">
|
||||
Latitude
|
||||
</label>
|
||||
|
||||
<input type="text" name="latitude" id="latitude" readonly required
|
||||
class="w-full border rounded-xl px-4 py-3 bg-slate-100">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-2 font-medium text-slate-700">
|
||||
Longitude
|
||||
</label>
|
||||
|
||||
<input type="text" name="longitude" id="longitude" readonly required
|
||||
class="w-full border rounded-xl px-4 py-3 bg-slate-100">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block mb-3 font-medium text-slate-700">
|
||||
Pilih Lokasi Pada Peta
|
||||
</label>
|
||||
|
||||
<p class="text-sm text-slate-500 mb-3">
|
||||
Klik pada peta untuk menentukan lokasi warga.
|
||||
</p>
|
||||
|
||||
<div id="map" style="height:450px;" class="rounded-2xl border">
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
|
||||
<script>
|
||||
var map = L.map('map').setView(
|
||||
[-0.0263, 109.3425],
|
||||
11
|
||||
);
|
||||
|
||||
L.tileLayer(
|
||||
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19
|
||||
}
|
||||
).addTo(map);
|
||||
|
||||
var marker;
|
||||
|
||||
map.on('click', function(e) {
|
||||
|
||||
var lat = e.latlng.lat.toFixed(6);
|
||||
var lng = e.latlng.lng.toFixed(6);
|
||||
|
||||
document.getElementById('latitude').value = lat;
|
||||
document.getElementById('longitude').value = lng;
|
||||
|
||||
if (marker) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
|
||||
marker = L.marker([lat, lng])
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
"Lat: " + lat +
|
||||
"<br>Lng: " + lng
|
||||
)
|
||||
.openPopup();
|
||||
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
map.invalidateSize();
|
||||
}, 200);
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-semibold shadow">
|
||||
|
||||
Kirim Laporan
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user