Add WebGIS source code
This commit is contained in:
ocabacaa
@@ -0,0 +1,345 @@
|
||||
<?php
|
||||
|
||||
session_start();
|
||||
|
||||
if(!isset($_SESSION['role'])){
|
||||
header("Location: ../index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
if($_SESSION['role'] != 'admin'){
|
||||
header("Location: ../index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php
|
||||
|
||||
session_start();
|
||||
|
||||
if(!isset($_SESSION['role'])){
|
||||
header("Location: ../index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
if($_SESSION['role'] != 'admin'){
|
||||
header("Location: ../index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
|
||||
<title>Tambah Rumah Ibadah</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
|
||||
<?php include 'layout/style.php'; ?>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<?php include 'layout/navbar.php'; ?>
|
||||
<?php include 'layout/sidebar.php'; ?>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="mb-6">
|
||||
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
Tambah Rumah Ibadah
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-500 mt-2">
|
||||
Tambahkan data rumah ibadah yang akan menjadi mitra penyaluran bantuan sosial.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-5xl">
|
||||
|
||||
<div class="p-5 border-b bg-gray-50">
|
||||
|
||||
<h2 class="font-semibold text-lg flex items-center gap-2">
|
||||
|
||||
<i class="fas fa-place-of-worship text-blue-600"></i>
|
||||
|
||||
Form Rumah Ibadah
|
||||
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<form action="simpan_rumah_ibadah.php" method="POST" class="p-6 space-y-5">
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Nama Rumah Ibadah
|
||||
</label>
|
||||
|
||||
<div class="relative">
|
||||
|
||||
<i class="fas fa-building absolute left-4 top-4 text-gray-400"></i>
|
||||
|
||||
<input type="text" name="nama" required placeholder="Masukkan nama rumah ibadah"
|
||||
class="w-full border rounded-xl pl-11 pr-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Alamat
|
||||
</label>
|
||||
|
||||
<textarea id="alamat" name="alamat" required rows="4"
|
||||
placeholder="Alamat akan terisi otomatis saat memilih lokasi"
|
||||
class="w-full border rounded-xl p-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Cari Lokasi
|
||||
</label>
|
||||
|
||||
<input type="text" id="searchLocation" placeholder="Contoh: Masjid Raya Mujahidin Pontianak"
|
||||
class="w-full border rounded-xl p-3">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Pilih Lokasi di Peta
|
||||
</label>
|
||||
|
||||
<div id="map" class="rounded-xl border" style="height:450px;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-5">
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Latitude
|
||||
</label>
|
||||
|
||||
<input type="text" id="latitude" name="latitude" readonly required
|
||||
class="w-full border rounded-xl p-3 bg-gray-100">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Longitude
|
||||
</label>
|
||||
|
||||
<input type="text" id="longitude" name="longitude" readonly required
|
||||
class="w-full border rounded-xl p-3 bg-gray-100">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 pt-4">
|
||||
|
||||
<button type="submit"
|
||||
class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow transition">
|
||||
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
|
||||
Simpan Data
|
||||
|
||||
</button>
|
||||
|
||||
<a href="rumah_ibadah.php"
|
||||
class="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-xl shadow transition">
|
||||
|
||||
<i class="fas fa-arrow-left mr-2"></i>
|
||||
|
||||
Kembali
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</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', {
|
||||
attribution: '© OpenStreetMap'
|
||||
}
|
||||
).addTo(map);
|
||||
|
||||
var marker = L.marker(
|
||||
[-0.0263, 109.3425], {
|
||||
draggable: true
|
||||
}
|
||||
).addTo(map);
|
||||
|
||||
function updateLatLng(lat, lng) {
|
||||
|
||||
document.getElementById('latitude').value =
|
||||
lat.toFixed(6);
|
||||
|
||||
document.getElementById('longitude').value =
|
||||
lng.toFixed(6);
|
||||
}
|
||||
|
||||
updateLatLng(
|
||||
marker.getLatLng().lat,
|
||||
marker.getLatLng().lng
|
||||
);
|
||||
|
||||
function updateAddress(lat, lng) {
|
||||
|
||||
fetch(
|
||||
'https://nominatim.openstreetmap.org/reverse?format=json&lat=' +
|
||||
lat +
|
||||
'&lon=' +
|
||||
lng
|
||||
)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
|
||||
if (data.display_name) {
|
||||
|
||||
document.getElementById('alamat').value =
|
||||
data.display_name;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
map.on('click', function(e) {
|
||||
|
||||
marker.setLatLng(e.latlng);
|
||||
|
||||
updateLatLng(
|
||||
e.latlng.lat,
|
||||
e.latlng.lng
|
||||
);
|
||||
|
||||
updateAddress(
|
||||
e.latlng.lat,
|
||||
e.latlng.lng
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
marker.on('dragend', function() {
|
||||
|
||||
var pos = marker.getLatLng();
|
||||
|
||||
updateLatLng(
|
||||
pos.lat,
|
||||
pos.lng
|
||||
);
|
||||
|
||||
updateAddress(
|
||||
pos.lat,
|
||||
pos.lng
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById('searchLocation')
|
||||
.addEventListener('keypress', async function(e) {
|
||||
|
||||
if (e.key !== 'Enter') {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
let keyword = this.value;
|
||||
|
||||
let response = await fetch(
|
||||
'https://nominatim.openstreetmap.org/search?format=json&q=' +
|
||||
encodeURIComponent(keyword)
|
||||
);
|
||||
|
||||
let data = await response.json();
|
||||
|
||||
if (data.length > 0) {
|
||||
|
||||
let lat = parseFloat(data[0].lat);
|
||||
let lng = parseFloat(data[0].lon);
|
||||
|
||||
map.setView(
|
||||
[lat, lng],
|
||||
15
|
||||
);
|
||||
|
||||
marker.setLatLng(
|
||||
[lat, lng]
|
||||
);
|
||||
|
||||
updateLatLng(
|
||||
lat,
|
||||
lng
|
||||
);
|
||||
|
||||
updateAddress(
|
||||
lat,
|
||||
lng
|
||||
);
|
||||
|
||||
} else {
|
||||
|
||||
alert('Lokasi tidak ditemukan');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
map.invalidateSize();
|
||||
|
||||
}, 500);
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user