landing page from database

This commit is contained in:
rahmagustin 2026-01-18 16:15:01 +07:00
parent b57c92f3c7
commit 2be275b1fb
7 changed files with 362 additions and 305 deletions

View File

@ -27,6 +27,7 @@ public function store(Request $request)
{ {
$data = $request->validate([ $data = $request->validate([
'nama_kategori' => 'required|string|max:100', 'nama_kategori' => 'required|string|max:100',
'kepanjangan_kategori' => 'nullable|string|max:255',
'deskripsi' => 'nullable|string', 'deskripsi' => 'nullable|string',
'foto_kategori' => 'nullable|image|mimes:jpg,jpeg,png|max:2048' 'foto_kategori' => 'nullable|image|mimes:jpg,jpeg,png|max:2048'
]); ]);
@ -57,6 +58,7 @@ public function update(Request $request, $id)
$data = $request->validate([ $data = $request->validate([
'nama_kategori' => 'required|string|max:100', 'nama_kategori' => 'required|string|max:100',
'kepanjangan_kategori' => 'nullable|string|max:255',
'deskripsi' => 'nullable|string', 'deskripsi' => 'nullable|string',
'foto_kategori' => 'nullable|image|mimes:jpg,jpeg,png|max:2048' 'foto_kategori' => 'nullable|image|mimes:jpg,jpeg,png|max:2048'
]); ]);

View File

@ -2,13 +2,17 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\Sampah;
use App\Models\KategoriTps;
use Illuminate\Http\Request; use Illuminate\Http\Request;
class IndexController extends Controller class IndexController extends Controller
{ {
public function index() public function index()
{ {
$title = 'User Home'; $sampah = Sampah::orderBy('tahun', 'desc')->first();
return view('user.index', compact('title')); $kategoriTps = KategoriTps::orderBy('id_kategori_tps')->get();
return view('user.index', compact('sampah', 'kategoriTps'));
} }
} }

View File

@ -11,6 +11,7 @@ class KategoriTps extends Model
protected $fillable = [ protected $fillable = [
'nama_kategori', 'nama_kategori',
'kepanjangan_kategori',
'deskripsi', 'deskripsi',
'foto_kategori' 'foto_kategori'
]; ];

View File

@ -0,0 +1,24 @@
<?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('kategori_tps', function (Blueprint $table) {
$table->string('kepanjangan_kategori', 255)
->after('nama_kategori')
->nullable();
});
}
public function down(): void
{
Schema::table('kategori_tps', function (Blueprint $table) {
$table->dropColumn('kepanjangan_kategori');
});
}
};

View File

@ -17,6 +17,11 @@
<input type="text" name="nama_kategori" class="form-control" required> <input type="text" name="nama_kategori" class="form-control" required>
</div> </div>
<div class="form-group">
<label>Kepanjangan Kategori</label>
<input type="text" name="kepanjangan_kategori" class="form-control">
</div>
<div class="form-group"> <div class="form-group">
<label for="exampleTextarea1">Deskripsi</label> <label for="exampleTextarea1">Deskripsi</label>
<textarea name="deskripsi" class="form-control" id="exampleTextarea1" rows="4"></textarea> <textarea name="deskripsi" class="form-control" id="exampleTextarea1" rows="4"></textarea>

View File

@ -20,6 +20,12 @@
class="form-control" required> class="form-control" required>
</div> </div>
<div class="form-group">
<label>Kepanjangan Kategori</label>
<input type="text" name="kepanjangan_kategori" value="{{ $kategori->kepanjangan_kategori }}"
class="form-control">
</div>
<div class="form-group"> <div class="form-group">
<label>Deskripsi</label> <label>Deskripsi</label>
<textarea name="deskripsi" class="form-control">{{ $kategori->deskripsi }}</textarea> <textarea name="deskripsi" class="form-control">{{ $kategori->deskripsi }}</textarea>

View File

@ -1,7 +1,6 @@
@extends('user.template') @extends('user.template')
@section('content') @section('content')
<!-- Hero Section --> <!-- Hero Section -->
<section id="hero" class="hero section"> <section id="hero" class="hero section">
@ -23,49 +22,67 @@
<!-- Section Title --> <!-- Section Title -->
<div class="section-title text-center" data-aos="fade-up"> <div class="section-title text-center" 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 hari</strong>.</p> <p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per
hari</strong>.</p>
</div> </div>
<div class="row gy-4"> <div class="row gy-4">
<!-- 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"> <div class="service-item position-relative text-center">
<div class="icon"><i class="bi bi-trash2 icon"></i></div> <div class="icon">
<h1><a href="#" class="stretched-link"></a>23,893.07</h1> <i class="bi bi-trash2 icon"></i>
</div>
<h1>
{{ number_format($sampah->total_sampah ?? 0, 2, ',', '.') }}
</h1>
<p><strong>Total Timbulan Sampah</strong></p> <p><strong>Total Timbulan Sampah</strong></p>
</div> </div>
</div><!-- End Service Item --> </div>
<!-- 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"> <div class="service-item position-relative text-center">
<div class="icon"><i class="bi bi-gear icon"></i></div> <div class="icon">
<h1><a href="#" class="stretched-link"></a>7,479.65</h1> <i class="bi bi-gear icon"></i>
</div>
<h1>
{{ number_format($sampah->total_kelola ?? 0, 2, ',', '.') }}
</h1>
<p><strong>Total Sampah Dikelola</strong></p> <p><strong>Total Sampah Dikelola</strong></p>
</div> </div>
</div><!-- End Service Item --> </div>
<!-- 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"> <div class="service-item position-relative text-center">
<div class="icon"><i class="bi bi-recycle icon"></i></div> <div class="icon">
<h1><a href="#" class="stretched-link"></a>2,780.05</h1> <i class="bi bi-recycle icon"></i>
</div>
<h1>
{{ number_format($sampah->total_daur_ulang ?? 0, 2, ',', '.') }}
</h1>
<p><strong>Total Sampah Didaur Ulang</strong></p> <p><strong>Total Sampah Didaur Ulang</strong></p>
</div> </div>
</div><!-- End Service Item --> </div>
<!-- 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"> <div class="service-item position-relative text-center">
<div class="icon"><i class="bi bi-exclamation-triangle icon"></i></div> <div class="icon">
<h1><a href="#" class="stretched-link"></a>13,633.35</h1> <i class="bi bi-exclamation-triangle icon"></i>
</div>
<h1>
{{ number_format($sampah->sisa_sampah ?? 0, 2, ',', '.') }}
</h1>
<p><strong>Total Sisa Sampah</strong></p> <p><strong>Total Sisa Sampah</strong></p>
</div> </div>
</div><!-- End Service Item --> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- /Featured Services Section --> <!-- /Featured Services Section -->
@ -98,25 +115,29 @@
<div class="tab-pane fade show active" id="about-tab1"> <div class="tab-pane fade show active" id="about-tab1">
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p> <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="d-flex align-items-center mt-4">
<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 yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p> <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="d-flex align-items-center mt-4">
<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 pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p> <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="d-flex align-items-center mt-4">
<i class="bi bi-check2"></i> <i class="bi bi-check2"></i>
<h4>Layanan Aduan TPS</h4> <h4>Layanan Aduan TPS</h4>
</div> </div>
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p> <p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
</div><!-- End Tab 1 Content --> </div><!-- End Tab 1 Content -->
</div> </div>
@ -136,59 +157,50 @@
<div class="row gy-5"> <div class="row gy-5">
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="200"> @foreach ($kategoriTps as $index => $item)
<div class="service-item"> <div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="{{ 200 + $index * 100 }}">
<div class="img">
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid" alt="">
</div>
<div class="details position-relative">
<div class="icon">
<i class="bi bi-activity"></i>
</div>
<a href="service-details.html" class="stretched-link">
<h3>Tempat Pembuangan Sampah</h3>
</a>
<p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis.</p>
</div>
</div>
</div><!-- End Service Item -->
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
<div class="service-item"> <div class="service-item">
<div class="img"> <div class="img">
<img src="{{ asset('assets/user/img/services-2.jpg') }}" class="img-fluid" alt=""> @if ($item->foto_kategori)
<img src="{{ asset('storage/' . $item->foto_kategori) }}" class="img-fluid"
alt="{{ $item->nama_kategori }}">
@else
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid"
alt="Default">
@endif
</div> </div>
<div class="details position-relative">
<div class="icon">
<i class="bi bi-broadcast"></i>
</div>
<a href="service-details.html" class="stretched-link">
<h3>Tempat Pengolahan Sampah Reduce, Reuse, Recycle</h3>
</a>
<p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
</div>
</div>
</div><!-- End Service Item -->
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="400">
<div class="service-item">
<div class="img">
<img src="{{ asset('assets/user/img/services-3.jpg') }}" class="img-fluid" alt="">
</div>
<div class="details position-relative"> <div class="details position-relative">
<div class="icon"> <div class="icon">
<i class="bi bi-easel"></i> @if ($item->nama_kategori == 'TPS')
<i class="bi bi-trash"></i>
@elseif ($item->nama_kategori == 'TPS 3R')
<i class="bi bi-recycle"></i>
@elseif ($item->nama_kategori == 'TPA')
<i class="bi bi-geo-alt"></i>
@else
<i class="bi bi-archive"></i>
@endif
</div> </div>
<a href="service-details.html" class="stretched-link">
<h3>Tempat Pembuangan Akhir</h3> <a href="#" class="stretched-link">
<h3>{{ $item->kepanjangan_kategori }}</h3>
</a> </a>
<p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
<p>
{{ $item->deskripsi }}
</p>
</div> </div>
</div> </div>
</div><!-- End Service Item -->
</div>
@endforeach
</div> </div>
</div> </div>
</section><!-- /Services Section --> </section>
<!-- /Services Section -->
<!-- Call To Action Section --> <!-- Call To Action Section -->
<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" />
@ -297,7 +309,8 @@
<div class="info"> <div class="info">
<h3>Get in touch</h3> <h3>Get in touch</h3>
<p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi minus.</p> <p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi
minus.</p>
<div class="info-item d-flex"> <div class="info-item d-flex">
<i class="bi bi-geo-alt flex-shrink-0"></i> <i class="bi bi-geo-alt flex-shrink-0"></i>
@ -331,14 +344,17 @@
<form action="forms/contact.php" method="post" role="form" class="php-email-form"> <form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row"> <div class="row">
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required=""> <input type="text" name="name" class="form-control" id="name"
placeholder="Your Name" required="">
</div> </div>
<div class="col-md-6 form-group mt-3 mt-md-0"> <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=""> <input type="email" class="form-control" name="email" id="email"
placeholder="Your Email" required="">
</div> </div>
</div> </div>
<div class="form-group mt-3"> <div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required=""> <input type="text" class="form-control" name="subject" id="subject"
placeholder="Subject" required="">
</div> </div>
<div class="form-group mt-3"> <div class="form-group mt-3">
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea> <textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
@ -357,5 +373,4 @@
</div> </div>
</section> </section>
@endsection @endsection