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', 'id_tps',
'nama_tps', 'nama_tps',
'alamat_tps', 'alamat_tps',
'kecamatan',
'status_tps', 'status_tps',
'latitude', 'latitude',
'longitude', 'longitude',
@ -24,6 +25,13 @@ public function index()
'kategori_tps_id' 'kategori_tps_id'
)->get(); )->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')); 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', 'kategori_tps_id',
'nama_tps', 'nama_tps',
'alamat_tps', 'alamat_tps',
'kecamatan',
'status_tps', 'status_tps',
'tahun_pembuatan', 'tahun_pembuatan',
'kapasitas_tps', '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> required>
</div> </div>
<div class="form-group">
<label>Kecamatan</label>
<input type="text" name="kecamatan" class="form-control" placeholder="Kecamatan TPS"
required>
</div>
<!-- KATEGORI TPS --> <!-- KATEGORI TPS -->
<div class="form-group"> <div class="form-group">
<label>Kategori TPS</label> <label>Kategori TPS</label>
@ -101,7 +107,7 @@
</div> </div>
</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> <a href="{{ route('admin.tps.index') }}" class="btn btn-light">Batal</a>
</form> </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> value="{{ old('alamat_tps', $tps->alamat_tps) }}" required>
</div> </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 --}} {{-- Kategori TPS --}}
<div class="form-group"> <div class="form-group">
<label>Kategori TPS</label> <label>Kategori TPS</label>
@ -138,7 +144,7 @@ class="img-thumbnail">
</div> </div>
{{-- Button --}} {{-- Button --}}
<button type="submit" class="btn btn-primary mr-2"> <button type="submit" class="mr-2 btn btn-primary">
Simpan Simpan
</button> </button>
<a href="{{ route('admin.tps.index') }}" class="btn btn-light"> <a href="{{ route('admin.tps.index') }}" class="btn btn-light">

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

@ -4,7 +4,7 @@
<!-- Hero Section --> <!-- Hero Section -->
<section id="hero" class="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> <h1>Selamat Datang di <span>SIG TPS</span></h1>
<p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p> <p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
<div class="d-flex"> <div class="d-flex">
@ -20,7 +20,7 @@
<div class="container"> <div class="container">
<!-- Section Title --> <!-- 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> <h2>Timbulan Sampah</h2>
<p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per <p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per
hari</strong>.</p> hari</strong>.</p>
@ -30,7 +30,7 @@
<!-- Total Timbulan Sampah --> <!-- Total Timbulan Sampah -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100"> <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"> <div class="icon">
<i class="bi bi-trash2 icon"></i> <i class="bi bi-trash2 icon"></i>
</div> </div>
@ -43,7 +43,7 @@
<!-- Total Sampah Dikelola --> <!-- Total Sampah Dikelola -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200"> <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"> <div class="icon">
<i class="bi bi-gear icon"></i> <i class="bi bi-gear icon"></i>
</div> </div>
@ -56,7 +56,7 @@
<!-- Total Sampah Didaur Ulang --> <!-- Total Sampah Didaur Ulang -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300"> <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"> <div class="icon">
<i class="bi bi-recycle icon"></i> <i class="bi bi-recycle icon"></i>
</div> </div>
@ -69,7 +69,7 @@
<!-- Total Sisa Sampah --> <!-- Total Sisa Sampah -->
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400"> <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"> <div class="icon">
<i class="bi bi-exclamation-triangle icon"></i> <i class="bi bi-exclamation-triangle icon"></i>
</div> </div>
@ -118,21 +118,21 @@
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat <p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p> 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> <i class="bi bi-check2"></i>
<h4>Peta Interaktif Lokasi TPS</h4> <h4>Peta Interaktif Lokasi TPS</h4>
</div> </div>
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan <p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p> 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> <i class="bi bi-check2"></i>
<h4>Informasi TPS Lengkap</h4> <h4>Informasi TPS Lengkap</h4>
</div> </div>
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis <p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p> 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> <i class="bi bi-check2"></i>
<h4>Layanan Aduan TPS</h4> <h4>Layanan Aduan TPS</h4>
</div> </div>
@ -189,8 +189,9 @@
</a> </a>
<p> <p>
{{ $item->deskripsi }} {{ explode('.', $item->deskripsi)[0] }}.
</p> </p>
</div> </div>
</div> </div>
@ -413,7 +414,7 @@ function markerIcon(color) {
</p> </p>
<div class="info-item d-flex"> <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> <div>
<h4>Cepat & Mudah</h4> <h4>Cepat & Mudah</h4>
<p>Aduan dapat dikirim hanya dalam beberapa langkah.</p> <p>Aduan dapat dikirim hanya dalam beberapa langkah.</p>
@ -421,7 +422,7 @@ function markerIcon(color) {
</div> </div>
<div class="info-item d-flex"> <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> <div>
<h4>Berbasis Lokasi TPS</h4> <h4>Berbasis Lokasi TPS</h4>
<p>Pilih TPS langsung dari peta.</p> <p>Pilih TPS langsung dari peta.</p>
@ -429,7 +430,7 @@ function markerIcon(color) {
</div> </div>
<div class="info-item d-flex"> <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> <div>
<h4>Ditanggapi Admin</h4> <h4>Ditanggapi Admin</h4>
<p>Aduan akan diproses oleh admin terkait.</p> <p>Aduan akan diproses oleh admin terkait.</p>
@ -439,18 +440,18 @@ function markerIcon(color) {
</div> </div>
<!-- KANAN: CTA BUTTON --> <!-- KANAN: CTA BUTTON -->
<div class="col-lg-6 text-center"> <div class="text-center col-lg-6">
<div class="card shadow-sm p-4"> <div class="p-4 shadow-sm card">
<h4 class="mb-3">Ingin Mengajukan Aduan?</h4> <h4 class="mb-3">Ingin Mengajukan Aduan?</h4>
<p class="mb-4"> <p class="mb-4">
Klik tombol di bawah ini untuk memilih TPS dan mengisi form aduan. Klik tombol di bawah ini untuk memilih TPS dan mengisi form aduan.
</p> </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 <i class="bi bi-map-fill me-1"></i> Pilih TPS di Peta
</a> </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"> <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 <i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan

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

@ -1,67 +1,50 @@
@extends('user.template') @extends('user.template')
@section('content') @section('content')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <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> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style> <style>
#call-to-action.call-to-action { header, .navbar, #header {
padding: 0 !important; position: sticky;
margin: 0 !important; top: 0;
z-index: 2000 !important;
background: #fff;
} }
#call-to-action .container { .leaflet-top,
display: flex; .leaflet-bottom,
justify-content: center; .leaflet-control {
padding: 20px 0; 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 { #mapTPS {
width: 100%; width: 100%;
height: 450px; height: 450px;
position: relative; border-radius: 12px;
z-index: 1; box-shadow: 0 6px 20px rgba(0,0,0,.12);
} }
.leaflet-popup-content-wrapper { .map-filter {
border-radius: 14px !important; display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
align-items: center;
} }
header, .map-info {
.navbar, font-size: 14px;
#header { color: #555;
position: sticky;
top: 0;
z-index: 1000;
background: #fff;
}
.leaflet-top {
top: 0px !important;
z-index: 400 !important;
}
.leaflet-bottom {
bottom: 0px !important;
} }
.legend { .legend {
background: white; background: #fff;
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 10px;
line-height: 18px;
color: #333;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
font-size: 14px; font-size: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.15);
line-height: 18px;
} }
.legend i { .legend i {
@ -69,112 +52,104 @@
height: 16px; height: 16px;
float: left; float: left;
margin-right: 8px; margin-right: 8px;
opacity: 1;
} }
</style> </style>
<!-- Page Title -->
<div class="page-title"> <div class="page-title">
<div class="container d-lg-flex justify-content-between align-items-center"> <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> <h1>Sebaran TPS di Kabupaten Nganjuk</h1>
<nav class="breadcrumbs"> <nav class="breadcrumbs">
<ol> <ol>
<li><a href="index.html">Beranda</a></li> <li><a href="/">Beranda</a></li>
<li class="current">Sebaran TPS</li> <li class="current">Sebaran TPS</li>
</ol> </ol>
</nav> </nav>
</div> </div>
</div><!-- End Page Title --> </div>
<section class="section"> <section class="section">
<div class="container"> <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 id="mapTPS"></div>
</div> </div>
</section> </section>
<script> <script>
// ============================= /* =============================
// INIT MAP INIT MAP
// ============================= ============================= */
var map = L.map('mapTPS', { var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
zoomControl: true
}).setView([-7.6078, 111.903], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: "© OpenStreetMap contributors", maxZoom: 19,
maxZoom: 19 attribution: '© OpenStreetMap'
}).addTo(map); }).addTo(map);
// ============================= /* =============================
// ICON MARKER PER KATEGORI ICON TPS
// ============================= ============================= */
function markerIcon(color) { function icon(color) {
return new L.Icon({ return new L.Icon({
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`, 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', shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
iconSize: [25, 41], iconSize: [25, 41],
iconAnchor: [12, 41], iconAnchor: [12, 41],
popupAnchor: [1, -34], popupAnchor: [1, -34]
shadowSize: [41, 41]
}); });
} }
var iconTPS = markerIcon('green'); // TPS var iconTPS = icon('green');
var iconTPS3R = markerIcon('blue'); // TPS 3R var iconTPS3R = icon('blue');
var iconTPA = markerIcon('red'); // TPA var iconTPA = icon('red');
var iconDefault = markerIcon('black'); var iconNear = icon('yellow');
// ============================= /* =============================
// DATA TPS DARI DATABASE DATA TPS
// ============================= ============================= */
var tpsData = @json($tps); var tpsData = @json($tps);
var markers = [];
/* =============================
MARKER TPS
============================= */
tpsData.forEach(tps => {
if (!tps.latitude || !tps.longitude) return;
tpsData.forEach(function(tps) { let iconUse = iconTPS;
if (tps.latitude && tps.longitude) { if (tps.kategori_tps_id == 5) iconUse = iconTPS3R;
if (tps.kategori_tps_id == 6) iconUse = iconTPA;
let iconKategori = iconDefault; let marker = L.marker([tps.latitude, tps.longitude], { icon: iconUse })
// 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(` .bindPopup(`
<div style="min-width:220px"> <strong>${tps.nama_tps}</strong><br>
<strong style="font-size:15px">${tps.nama_tps}</strong><br>
<small>${tps.alamat_tps ?? '-'}</small><br> <small>${tps.alamat_tps ?? '-'}</small><br>
<span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span> <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);
<div style="margin-top:10px; display:flex; gap:6px;"> marker.tpsData = tps;
<a href="{{ url('tps') }}/${tps.id_tps}" markers.push(marker);
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;"> LEGEND
Aduan ============================= */
</a> var legend = L.control({ position: 'bottomleft' });
</div> legend.onAdd = function () {
</div> var div = L.DomUtil.create('div', 'legend');
`);
}
});
var legend = L.control({
position: "bottomleft"
});
legend.onAdd = function() {
var div = L.DomUtil.create("div", "legend");
div.innerHTML = ` div.innerHTML = `
<strong>Kategori TPS</strong><br> <strong>Kategori TPS</strong><br>
<i style="background:#198754"></i> TPS<br> <i style="background:#198754"></i> TPS<br>
@ -182,8 +157,68 @@ function markerIcon(color) {
<i style="background:#dc3545"></i> TPA <i style="background:#dc3545"></i> TPA
`; `;
return div; return div;
}; };
legend.addTo(map);
legend.addTo(map); /* =============================
</script> 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;
}
});
if (nearest) {
nearest.setIcon(iconNear);
nearest.openPopup();
map.setView(nearest.getLatLng(), 15);
}
});
});
</script>
@endsection @endsection