sig connect database
This commit is contained in:
parent
1246e673ba
commit
d5a6dc8cf7
|
|
@ -3,69 +3,37 @@
|
|||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use App\Models\LokasiTps;
|
||||
|
||||
class SIGController extends Controller
|
||||
{
|
||||
/**
|
||||
* Menampilkan peta TPS (Landing Page SIG)
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
$tps = [
|
||||
[
|
||||
'id' => 1,
|
||||
'nama' => 'TPS Berbek',
|
||||
'jenis' => 'TPS',
|
||||
'alamat' => 'Kecamatan Berbek',
|
||||
'lat' => -7.5978,
|
||||
'lng' => 111.917
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'nama' => 'TPS 3R Loceret',
|
||||
'jenis' => 'TPS 3R',
|
||||
'alamat' => 'Kecamatan Loceret',
|
||||
'lat' => -7.6280,
|
||||
'lng' => 111.910
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'nama' => 'TPA Nganjuk',
|
||||
'jenis' => 'TPA',
|
||||
'alamat' => 'Kabupaten Nganjuk',
|
||||
'lat' => -7.6140,
|
||||
'lng' => 111.900
|
||||
]
|
||||
];
|
||||
// Ambil semua data TPS dari database
|
||||
$tps = LokasiTps::select(
|
||||
'id_tps',
|
||||
'nama_tps',
|
||||
'alamat_tps',
|
||||
'status_tps',
|
||||
'latitude',
|
||||
'longitude',
|
||||
'foto_tps',
|
||||
'kategori_tps_id'
|
||||
)->get();
|
||||
|
||||
return view('user.sig-tps', compact('tps'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Menampilkan detail TPS
|
||||
*/
|
||||
public function show($id)
|
||||
{
|
||||
$data = [
|
||||
1 => [
|
||||
'nama' => 'TPS Berbek',
|
||||
'jenis' => 'TPS',
|
||||
'alamat' => 'Kecamatan Berbek',
|
||||
'foto' => '/img/tps/berbek.jpg',
|
||||
'keterangan' => 'TPS aktif melayani wilayah Berbek'
|
||||
],
|
||||
2 => [
|
||||
'nama' => 'TPS 3R Loceret',
|
||||
'jenis' => 'TPS 3R',
|
||||
'alamat' => 'Kecamatan Loceret',
|
||||
'foto' => '/img/tps/loceret.jpg',
|
||||
'keterangan' => 'TPS dengan sistem 3R'
|
||||
],
|
||||
3 => [
|
||||
'nama' => 'TPA Nganjuk',
|
||||
'jenis' => 'TPA',
|
||||
'alamat' => 'Kabupaten Nganjuk',
|
||||
'foto' => '/img/tps/tpa-nganjuk.jpg',
|
||||
'keterangan' => 'Tempat Pemrosesan Akhir Kabupaten Nganjuk'
|
||||
]
|
||||
];
|
||||
$tps = LokasiTps::with('kategori')->findOrFail($id);
|
||||
|
||||
return view('user.detail-tps', [
|
||||
'tps' => $data[$id]
|
||||
]);
|
||||
return view('user.detail-tps', compact('tps'));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -208,8 +208,8 @@
|
|||
|
||||
<style>
|
||||
/* =============================
|
||||
MAP SECTION
|
||||
============================= */
|
||||
MAP SECTION
|
||||
============================= */
|
||||
#call-to-action.call-to-action {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
|
@ -242,8 +242,8 @@
|
|||
}
|
||||
|
||||
/* =============================
|
||||
FIX LEAFLET VS NAVBAR
|
||||
============================= */
|
||||
FIX LEAFLET VS NAVBAR
|
||||
============================= */
|
||||
header,
|
||||
.navbar,
|
||||
#header {
|
||||
|
|
@ -265,8 +265,8 @@
|
|||
}
|
||||
|
||||
/* =============================
|
||||
Legend
|
||||
============================= */
|
||||
Legend
|
||||
============================= */
|
||||
.legend {
|
||||
background: white;
|
||||
padding: 10px 12px;
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
<!-- SECTION TITLE -->
|
||||
<div class="section-title" data-aos="fade-up">
|
||||
<h2>Peta Sebaran TPS</h2>
|
||||
<p>Sistem Informasi Geografis Tempat Pembuangan Sampah</p>
|
||||
<p>Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
||||
</div>
|
||||
|
||||
<!-- MAP -->
|
||||
|
|
@ -390,84 +390,75 @@ function markerIcon(color) {
|
|||
</script>
|
||||
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="contact section">
|
||||
<!-- Aduan Section -->
|
||||
<section id="aduan" class="contact section">
|
||||
|
||||
<!-- Section Title -->
|
||||
<div class="container section-title" data-aos="fade-up">
|
||||
<h2>Contact</h2>
|
||||
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
||||
</div><!-- End Section Title -->
|
||||
<h2>Aduan TPS</h2>
|
||||
<p>Laporkan permasalahan Tempat Pembuangan Sampah (TPS) di sekitar Anda</p>
|
||||
</div>
|
||||
<!-- End Section Title -->
|
||||
|
||||
<div class="container" data-aos="fade">
|
||||
<div class="row gy-4 gx-lg-5 align-items-center">
|
||||
|
||||
<div class="row gy-5 gx-lg-5">
|
||||
|
||||
<div class="col-lg-4">
|
||||
|
||||
<!-- KIRI: INFO ADUAN -->
|
||||
<div class="col-lg-6">
|
||||
<div class="info">
|
||||
<h3>Get in touch</h3>
|
||||
<p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi
|
||||
minus.</p>
|
||||
<h3>Temukan Masalah di TPS?</h3>
|
||||
<p>
|
||||
Jika Anda menemukan TPS yang penuh, kotor, atau bermasalah,
|
||||
silakan laporkan agar dapat segera ditindaklanjuti oleh petugas.
|
||||
</p>
|
||||
|
||||
<div class="info-item d-flex">
|
||||
<i class="bi bi-geo-alt flex-shrink-0"></i>
|
||||
<i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4>Location:</h4>
|
||||
<p>A108 Adam Street, New York, NY 535022</p>
|
||||
<h4>Cepat & Mudah</h4>
|
||||
<p>Aduan dapat dikirim hanya dalam beberapa langkah.</p>
|
||||
</div>
|
||||
</div><!-- End Info Item -->
|
||||
</div>
|
||||
|
||||
<div class="info-item d-flex">
|
||||
<i class="bi bi-envelope flex-shrink-0"></i>
|
||||
<i class="bi bi-geo-alt-fill flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4>Email:</h4>
|
||||
<p>info@example.com</p>
|
||||
<h4>Berbasis Lokasi TPS</h4>
|
||||
<p>Pilih TPS langsung dari peta.</p>
|
||||
</div>
|
||||
</div><!-- End Info Item -->
|
||||
</div>
|
||||
|
||||
<div class="info-item d-flex">
|
||||
<i class="bi bi-phone flex-shrink-0"></i>
|
||||
<i class="bi bi-chat-dots-fill flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4>Call:</h4>
|
||||
<p>+1 5589 55488 55</p>
|
||||
<h4>Ditanggapi Admin</h4>
|
||||
<p>Aduan akan diproses oleh admin terkait.</p>
|
||||
</div>
|
||||
</div><!-- End Info Item -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
||||
<div class="row">
|
||||
<div class="col-md-6 form-group">
|
||||
<input type="text" name="name" class="form-control" id="name"
|
||||
placeholder="Your Name" required="">
|
||||
</div>
|
||||
<div class="col-md-6 form-group mt-3 mt-md-0">
|
||||
<input type="email" class="form-control" name="email" id="email"
|
||||
placeholder="Your Email" required="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mt-3">
|
||||
<input type="text" class="form-control" name="subject" id="subject"
|
||||
placeholder="Subject" required="">
|
||||
</div>
|
||||
<div class="form-group mt-3">
|
||||
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<div class="loading">Loading</div>
|
||||
<div class="error-message"></div>
|
||||
<div class="sent-message">Your message has been sent. Thank you!</div>
|
||||
</div>
|
||||
<div class="text-center"><button type="submit">Send Message</button></div>
|
||||
</form>
|
||||
</div><!-- End Contact Form -->
|
||||
<!-- KANAN: CTA BUTTON -->
|
||||
<div class="col-lg-6 text-center">
|
||||
<div class="card shadow-sm p-4">
|
||||
<h4 class="mb-3">Ingin Mengajukan Aduan?</h4>
|
||||
<p class="mb-4">
|
||||
Klik tombol di bawah ini untuk memilih TPS dan mengisi form aduan.
|
||||
</p>
|
||||
|
||||
{{-- <a href="#map" class="btn btn-outline-success mb-2 w-100">
|
||||
<i class="bi bi-map-fill me-1"></i> Pilih TPS di Peta
|
||||
</a>
|
||||
|
||||
<p class="small text-muted my-2">atau</p> --}}
|
||||
|
||||
<a href="{{ route('user.aduan-tps', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
|
||||
<i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -5,31 +5,71 @@
|
|||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
|
||||
<style>
|
||||
#call-to-action.call-to-action {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#call-to-action .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mapTPS {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 12px;
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #198754;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
header,
|
||||
.navbar,
|
||||
#header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.popup-btn:hover {
|
||||
background: #157347;
|
||||
color: #fff;
|
||||
.leaflet-top {
|
||||
top: 0px !important;
|
||||
z-index: 400 !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom {
|
||||
bottom: 0px !important;
|
||||
}
|
||||
|
||||
.legend {
|
||||
background: white;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
line-height: 18px;
|
||||
color: #333;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.legend i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<!-- Page Title -->
|
||||
|
|
@ -52,74 +92,100 @@
|
|||
</section>
|
||||
|
||||
<script>
|
||||
const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
||||
// =============================
|
||||
// INIT MAP
|
||||
// =============================
|
||||
var map = L.map('mapTPS', {
|
||||
zoomControl: true
|
||||
}).setView([-7.6078, 111.903], 12);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap',
|
||||
attribution: "© OpenStreetMap contributors",
|
||||
maxZoom: 19
|
||||
}).addTo(map);
|
||||
|
||||
function pinIcon(color) {
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: `
|
||||
<svg width="32" height="32" viewBox="0 0 24 24">
|
||||
<path fill="${color}"
|
||||
d="M12 2C8.13 2 5 5.13 5 9
|
||||
c0 5.25 7 13 7 13
|
||||
s7-7.75 7-13
|
||||
c0-3.87-3.13-7-7-7z"/>
|
||||
<circle cx="12" cy="9" r="2.5" fill="white"/>
|
||||
</svg>
|
||||
`,
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 32],
|
||||
popupAnchor: [0, -28]
|
||||
// =============================
|
||||
// ICON MARKER PER KATEGORI
|
||||
// =============================
|
||||
function markerIcon(color) {
|
||||
return new L.Icon({
|
||||
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
|
||||
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41]
|
||||
});
|
||||
}
|
||||
|
||||
const dataTPS = [{
|
||||
id: 1,
|
||||
nama: "TPS Berbek",
|
||||
jenis: "TPS",
|
||||
alamat: "Kecamatan Berbek",
|
||||
lat: -7.5978,
|
||||
lng: 111.917,
|
||||
icon: pinIcon('#198754')
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama: "TPS 3R Loceret",
|
||||
jenis: "TPS 3R",
|
||||
alamat: "Kecamatan Loceret",
|
||||
lat: -7.6280,
|
||||
lng: 111.910,
|
||||
icon: pinIcon('#0d6efd')
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama: "TPA Nganjuk",
|
||||
jenis: "TPA",
|
||||
alamat: "Kabupaten Nganjuk",
|
||||
lat: -7.6140,
|
||||
lng: 111.900,
|
||||
icon: pinIcon('#dc3545')
|
||||
}
|
||||
];
|
||||
var iconTPS = markerIcon('green'); // TPS
|
||||
var iconTPS3R = markerIcon('blue'); // TPS 3R
|
||||
var iconTPA = markerIcon('red'); // TPA
|
||||
var iconDefault = markerIcon('black');
|
||||
|
||||
dataTPS.forEach(item => {
|
||||
L.marker([item.lat, item.lng], {
|
||||
icon: item.icon
|
||||
})
|
||||
.addTo(map)
|
||||
.bindPopup(`
|
||||
<strong>${item.nama}</strong><br>
|
||||
<small>${item.jenis}</small><br>
|
||||
<small>${item.alamat}</small><br>
|
||||
<a href="/tps/${item.id}" class="popup-btn">
|
||||
Lihat Detail
|
||||
</a>
|
||||
`);
|
||||
// =============================
|
||||
// DATA TPS DARI DATABASE
|
||||
// =============================
|
||||
var tpsData = @json($tps);
|
||||
|
||||
tpsData.forEach(function(tps) {
|
||||
if (tps.latitude && tps.longitude) {
|
||||
|
||||
let iconKategori = iconDefault;
|
||||
|
||||
// SESUAIKAN ID KATEGORI
|
||||
if (tps.kategori_tps_id == 3) {
|
||||
iconKategori = iconTPS;
|
||||
} else if (tps.kategori_tps_id == 5) {
|
||||
iconKategori = iconTPS3R;
|
||||
} else if (tps.kategori_tps_id == 6) {
|
||||
iconKategori = iconTPA;
|
||||
}
|
||||
|
||||
L.marker([tps.latitude, tps.longitude], {
|
||||
icon: iconKategori
|
||||
})
|
||||
.addTo(map)
|
||||
.bindPopup(`
|
||||
<div style="min-width:220px">
|
||||
<strong style="font-size:15px">${tps.nama_tps}</strong><br>
|
||||
<small>${tps.alamat_tps ?? '-'}</small><br>
|
||||
<span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span>
|
||||
|
||||
<div style="margin-top:10px; display:flex; gap:6px;">
|
||||
<a href="/tps/${tps.id}"
|
||||
style="flex:1; text-align:center; padding:6px 8px; background:#0d6efd; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
|
||||
Detail TPS
|
||||
</a>
|
||||
|
||||
<a href="/aduan/create/${tps.id}"
|
||||
style="flex:1; text-align:center; padding:6px 8px; background:#dc3545; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
|
||||
Aduan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
// =============================
|
||||
// LEGEND
|
||||
// =============================
|
||||
var legend = L.control({
|
||||
position: "bottomleft"
|
||||
});
|
||||
|
||||
legend.onAdd = function() {
|
||||
var div = L.DomUtil.create("div", "legend");
|
||||
div.innerHTML = `
|
||||
<strong>Kategori TPS</strong><br>
|
||||
<i style="background:#198754"></i> TPS<br>
|
||||
<i style="background:#0d6efd"></i> TPS 3R<br>
|
||||
<i style="background:#dc3545"></i> TPA
|
||||
`;
|
||||
return div;
|
||||
};
|
||||
|
||||
legend.addTo(map);
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue