e41220949
/
TIF_NGANJUK_E41220949
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

31 jan 26

This commit is contained in:
rahmagustin 2026-01-31 13:58:11 +07:00
parent b0f777db46
commit a1abb3fd2d
7 changed files with 276 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Controllers/SigController.php
View File

@ -17,6 +17,7 @@ public function index()
'id_tps',
'nama_tps',
'alamat_tps',
'kecamatan',
'status_tps',
'latitude',
'longitude',
@ -24,6 +25,13 @@ public function index()
'kategori_tps_id'
)->get();
$kecamatanList = LokasiTps::select('kecamatan')
->distinct()
->orderBy('kecamatan')
->pluck('kecamatan');
return view('user.sig-tps', compact('tps', 'kecamatanList'));
return view('user.sig-tps', compact('tps'));
}

1
app/Models/LokasiTps.php
View File

@ -19,6 +19,7 @@ class LokasiTps extends Model
'kategori_tps_id',
'nama_tps',
'alamat_tps',
'kecamatan',
'status_tps',
'tahun_pembuatan',
'kapasitas_tps',

21
database/migrations/2026_01_30_151646_add_kecamatan_to_lokasi_tps_table.php Normal file
View File

@ -0,0 +1,21 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration {
public function up(): void
{
Schema::table('lokasi_tps', function (Blueprint $table) {
$table->string('kecamatan')->after('alamat_tps');
});
}
public function down(): void
{
Schema::table('lokasi_tps', function (Blueprint $table) {
$table->dropColumn('kecamatan');
});
}
};

8
resources/views/admin/tps/create.blade.php
View File

@ -35,6 +35,12 @@
required>
</div>
<div class="form-group">
<label>Kecamatan</label>
<input type="text" name="kecamatan" class="form-control" placeholder="Kecamatan TPS"
required>
</div>
<!-- KATEGORI TPS -->
<div class="form-group">
<label>Kategori TPS</label>
@ -101,7 +107,7 @@
</div>
</div>
<button type="submit" class="btn btn-primary mr-2">Simpan</button>
<button type="submit" class="mr-2 btn btn-primary">Simpan</button>
<a href="{{ route('admin.tps.index') }}" class="btn btn-light">Batal</a>
</form>

8
resources/views/admin/tps/edit.blade.php
View File

@ -52,6 +52,12 @@ class="forms-sample">
value="{{ old('alamat_tps', $tps->alamat_tps) }}" required>
</div>
<div class="form-group">
<label>Kecamatan</label>
<input type="text" name="kecamatan" class="form-control"
value="{{ old('kecamatan', $tps->kecamatan) }}" required>
</div>
{{-- Kategori TPS --}}
<div class="form-group">
<label>Kategori TPS</label>
@ -138,7 +144,7 @@ class="img-thumbnail">
</div>
{{-- Button --}}
<button type="submit" class="btn btn-primary mr-2">
<button type="submit" class="mr-2 btn btn-primary">
Simpan
</button>
<a href="{{ route('admin.tps.index') }}" class="btn btn-light">

47
resources/views/user/index.blade.php
View File

@ -4,7 +4,7 @@
<!-- Hero Section -->
<section id="hero" class="hero section">
<div class="container d-flex flex-column justify-content-center align-items-center text-center position-relative">
<div class="container text-center d-flex flex-column justify-content-center align-items-center position-relative">
<h1>Selamat Datang di <span>SIG TPS</span></h1>
<p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
<div class="d-flex">
@ -20,7 +20,7 @@
<div class="container">
<!-- Section Title -->
<div class="section-title text-center" data-aos="fade-up">
<div class="text-center section-title" data-aos="fade-up">
<h2>Timbulan Sampah</h2>
<p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per
hari</strong>.</p>
@ -30,7 +30,7 @@
<!-- Total Timbulan Sampah -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
<div class="service-item position-relative text-center">
<div class="text-center service-item position-relative">
<div class="icon">
<i class="bi bi-trash2 icon"></i>
</div>
@ -43,7 +43,7 @@
<!-- Total Sampah Dikelola -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
<div class="service-item position-relative text-center">
<div class="text-center service-item position-relative">
<div class="icon">
<i class="bi bi-gear icon"></i>
</div>
@ -56,7 +56,7 @@
<!-- Total Sampah Didaur Ulang -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
<div class="service-item position-relative text-center">
<div class="text-center service-item position-relative">
<div class="icon">
<i class="bi bi-recycle icon"></i>
</div>
@ -69,7 +69,7 @@
<!-- Total Sisa Sampah -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
<div class="service-item position-relative text-center">
<div class="text-center service-item position-relative">
<div class="icon">
<i class="bi bi-exclamation-triangle icon"></i>
</div>
@ -118,21 +118,21 @@
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
<div class="d-flex align-items-center mt-4">
<div class="mt-4 d-flex align-items-center">
<i class="bi bi-check2"></i>
<h4>Peta Interaktif Lokasi TPS</h4>
</div>
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
<div class="d-flex align-items-center mt-4">
<div class="mt-4 d-flex align-items-center">
<i class="bi bi-check2"></i>
<h4>Informasi TPS Lengkap</h4>
</div>
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
<div class="d-flex align-items-center mt-4">
<div class="mt-4 d-flex align-items-center">
<i class="bi bi-check2"></i>
<h4>Layanan Aduan TPS</h4>
</div>
@ -189,8 +189,9 @@
</a>
<p>
{{ $item->deskripsi }}
{{ explode('.', $item->deskripsi)[0] }}.
</p>
</div>
</div>
@ -208,8 +209,8 @@
<style>
/* =============================
MAP SECTION
============================= */
MAP SECTION
============================= */
#call-to-action.call-to-action {
padding: 0 !important;
margin: 0 !important;
@ -242,8 +243,8 @@
}
/* =============================
FIX LEAFLET VS NAVBAR
============================= */
FIX LEAFLET VS NAVBAR
============================= */
header,
.navbar,
#header {
@ -265,8 +266,8 @@
}
/* =============================
Legend
============================= */
Legend
============================= */
.legend {
background: white;
padding: 10px 12px;
@ -413,7 +414,7 @@ function markerIcon(color) {
</p>
<div class="info-item d-flex">
<i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
<i class="flex-shrink-0 bi bi-exclamation-triangle-fill"></i>
<div>
<h4>Cepat & Mudah</h4>
<p>Aduan dapat dikirim hanya dalam beberapa langkah.</p>
@ -421,7 +422,7 @@ function markerIcon(color) {
</div>
<div class="info-item d-flex">
<i class="bi bi-geo-alt-fill flex-shrink-0"></i>
<i class="flex-shrink-0 bi bi-geo-alt-fill"></i>
<div>
<h4>Berbasis Lokasi TPS</h4>
<p>Pilih TPS langsung dari peta.</p>
@ -429,7 +430,7 @@ function markerIcon(color) {
</div>
<div class="info-item d-flex">
<i class="bi bi-chat-dots-fill flex-shrink-0"></i>
<i class="flex-shrink-0 bi bi-chat-dots-fill"></i>
<div>
<h4>Ditanggapi Admin</h4>
<p>Aduan akan diproses oleh admin terkait.</p>
@ -439,18 +440,18 @@ function markerIcon(color) {
</div>
<!-- KANAN: CTA BUTTON -->
<div class="col-lg-6 text-center">
<div class="card shadow-sm p-4">
<div class="text-center col-lg-6">
<div class="p-4 shadow-sm card">
<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">
{{-- <a href="#map" class="mb-2 btn btn-outline-success 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> --}}
<p class="my-2 small text-muted">atau</p> --}}
<a href="{{ route('user.aduan', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
<i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan

381
resources/views/user/sig-tps.blade.php
View File

@ -1,189 +1,224 @@
@extends('user.template')
@section('content')
<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/leaflet@1.9.4/dist/leaflet.css" />
<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;
}
<style>
header, .navbar, #header {
position: sticky;
top: 0;
z-index: 2000 !important;
background: #fff;
}
#call-to-action .container {
display: flex;
justify-content: center;
padding: 20px 0;
}
.leaflet-top,
.leaflet-bottom,
.leaflet-control {
z-index: 400 !important;
}
.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: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
#mapTPS {
width: 100%;
height: 450px;
position: relative;
z-index: 1;
}
.map-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
align-items: center;
}
.leaflet-popup-content-wrapper {
border-radius: 14px !important;
}
.map-info {
font-size: 14px;
color: #555;
}
header,
.navbar,
#header {
position: sticky;
top: 0;
z-index: 1000;
background: #fff;
}
.legend {
background: #fff;
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.15);
line-height: 18px;
}
.leaflet-top {
top: 0px !important;
z-index: 400 !important;
}
.legend i {
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
}
</style>
.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 -->
<div class="page-title">
<div class="container d-lg-flex justify-content-between align-items-center">
<h1 class="mb-2 mb-lg-0">Sebaran TPS di Kabupaten Nganjuk</h1>
<nav class="breadcrumbs">
<ol>
<li><a href="index.html">Beranda</a></li>
<li class="current">Sebaran TPS</li>
</ol>
</nav>
</div>
</div><!-- End Page Title -->
<section class="section">
<div class="container">
<div id="mapTPS"></div>
</div>
</section>
<script>
// =============================
// 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 contributors",
maxZoom: 19
}).addTo(map);
// =============================
// 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]
});
}
var iconTPS = markerIcon('green'); // TPS
var iconTPS3R = markerIcon('blue'); // TPS 3R
var iconTPA = markerIcon('red'); // TPA
var iconDefault = markerIcon('black');
// =============================
// 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="{{ url('tps') }}/${tps.id_tps}"
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="{{ url('aduan') }}/${tps.id_tps}"
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 class="page-title">
<div class="container d-lg-flex justify-content-between align-items-center">
<h1>Sebaran TPS di Kabupaten Nganjuk</h1>
<nav class="breadcrumbs">
<ol>
<li><a href="/">Beranda</a></li>
<li class="current">Sebaran TPS</li>
</ol>
</nav>
</div>
`);
</div>
<section class="section">
<div class="container">
<!-- INFO & BUTTON -->
<div class="map-filter">
<div class="map-info">
Klik tombol di samping untuk menemukan <b>TPS terdekat</b> dari lokasi Anda saat ini.
</div>
<button id="btnLokasi" class="btn btn-primary btn-sm">
Cari TPS Terdekat
</button>
</div>
<div id="mapTPS"></div>
</div>
</section>
<script>
/* =============================
INIT MAP
============================= */
var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
/* =============================
ICON TPS
============================= */
function icon(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]
});
}
var iconTPS = icon('green');
var iconTPS3R = icon('blue');
var iconTPA = icon('red');
var iconNear = icon('yellow');
/* =============================
DATA TPS
============================= */
var tpsData = @json($tps);
var markers = [];
/* =============================
MARKER TPS
============================= */
tpsData.forEach(tps => {
if (!tps.latitude || !tps.longitude) return;
let iconUse = iconTPS;
if (tps.kategori_tps_id == 5) iconUse = iconTPS3R;
if (tps.kategori_tps_id == 6) iconUse = iconTPA;
let marker = L.marker([tps.latitude, tps.longitude], { icon: iconUse })
.bindPopup(`
<strong>${tps.nama_tps}</strong><br>
<small>${tps.alamat_tps ?? '-'}</small><br>
<span class="mt-1 badge bg-success">${tps.status_tps ?? '-'}</span>
<hr style="margin:6px 0">
<a href="/tps/${tps.id_tps}" style="font-size:13px">Detail TPS</a>
`)
.addTo(map);
marker.tpsData = tps;
markers.push(marker);
});
/* =============================
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);
/* =============================
HITUNG JARAK
============================= */
function getDistance(lat1, lon1, lat2, lon2) {
const R = 6371;
const dLat = (lat2-lat1) * Math.PI/180;
const dLon = (lon2-lon1) * Math.PI/180;
const a =
Math.sin(dLat/2)**2 +
Math.cos(lat1*Math.PI/180) *
Math.cos(lat2*Math.PI/180) *
Math.sin(dLon/2)**2;
return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)));
}
/* =============================
TPS TERDEKAT
============================= */
document.getElementById('btnLokasi').addEventListener('click', function () {
if (!navigator.geolocation) {
alert('Browser tidak mendukung GPS');
return;
}
navigator.geolocation.getCurrentPosition(pos => {
let userLat = pos.coords.latitude;
let userLng = pos.coords.longitude;
// LINGKARAN BIRU (USER)
L.circleMarker([userLat, userLng], {
radius: 8,
color: '#0d6efd',
fillColor: '#0d6efd',
fillOpacity: 0.8
}).addTo(map)
.bindPopup('Lokasi Anda')
.openPopup();
let nearest = null;
let minDist = Infinity;
markers.forEach(m => {
let tps = m.tpsData;
let dist = getDistance(userLat, userLng, tps.latitude, tps.longitude);
if (dist < minDist) {
minDist = dist;
nearest = m;
nearest.distance = dist;
}
});
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>
if (nearest) {
nearest.setIcon(iconNear);
nearest.openPopup();
map.setView(nearest.getLatLng(), 15);
}
});
});
</script>
@endsection