ocabacaa
345 lines
7.7 KiB
PHP
345 lines
7.7 KiB
PHP
<?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>
|