feat: katalog page with submenu option
This commit is contained in:
zhadaarsita
parent
66098aff7e
commit
4a3bdd24df
|
|
@ -0,0 +1,36 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Services\DummyDataService;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class KatalogController extends Controller
|
||||
{
|
||||
public function index(Request $request, $tipe = null)
|
||||
{
|
||||
// Ambil semua input filter dari form
|
||||
$filters = [
|
||||
'search' => $request->query('search'),
|
||||
'kategori' => $request->query('kategori'),
|
||||
'tahun' => $request->query('tahun'),
|
||||
'penulis' => $request->query('penulis'),
|
||||
];
|
||||
|
||||
if ($tipe) {
|
||||
$filters['tipe'] = $tipe;
|
||||
}
|
||||
|
||||
$semuaBuku = DummyDataService::getKatalogBuku($filters);
|
||||
|
||||
$filterOptions = DummyDataService::getFilterOptions();
|
||||
|
||||
return view('katalog', [
|
||||
'semuaBuku' => $semuaBuku,
|
||||
'filterOptions' => $filterOptions,
|
||||
'input' => $filters,
|
||||
'tipe' => $tipe,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,44 +124,152 @@ public static function getStatistikBulanan(): array
|
|||
}
|
||||
|
||||
/**
|
||||
* Data untuk buku pinjam offline
|
||||
* Master list untuk semua buku
|
||||
* @return \Illuminate\Support\Collection
|
||||
*/
|
||||
public static function getBukuPinjamOffline(): array
|
||||
private static function getAllBooks()
|
||||
{
|
||||
return [
|
||||
return collect([
|
||||
[
|
||||
'judul' => 'Modul Belajar Sosiologi',
|
||||
'penulis' => 'Tim Cendekia',
|
||||
'id' => 1,
|
||||
'judul' => 'Modul Ajar IPAS',
|
||||
'penulis' => 'Tim Kemdikbud Ristek',
|
||||
'cover' => 'images/covers/ipas.jpg',
|
||||
'kategori' => 'Sains',
|
||||
'tahun' => 2022,
|
||||
'status' => 'Tersedia',
|
||||
'is_new' => true,
|
||||
'tipe_akses' => 'online',
|
||||
'progress' => 75,
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'judul' => 'Modul Ajar Pendidikan Pancasila',
|
||||
'penulis' => 'Tim Guru Pancasila',
|
||||
'cover' => 'images/covers/pancasila.jpg',
|
||||
'kategori' => 'Pendidikan',
|
||||
'tahun' => 2023,
|
||||
'status' => 'Tersedia',
|
||||
'is_new' => false,
|
||||
'tipe_akses' => 'online',
|
||||
'progress' => 100,
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'judul' => 'Modul Belajar Sosiologi',
|
||||
'penulis' => 'Tim Cendekia',
|
||||
'cover' => 'images/covers/sosiologi.jpg',
|
||||
'kategori' => 'Sosial',
|
||||
'tahun' => 2021,
|
||||
'status' => 'Dipinjam',
|
||||
'is_new' => false,
|
||||
'tipe_akses' => 'offline',
|
||||
'sisa_hari' => 8,
|
||||
'cover' => 'images/covers/sosiologi.jpg'
|
||||
],
|
||||
[
|
||||
'judul' => 'Modul Pembelajaran Seni Budaya',
|
||||
'penulis' => 'Cahya Wulan, S.Pd.',
|
||||
'id' => 4,
|
||||
'judul' => 'Modul Pembelajaran Seni Budaya',
|
||||
'penulis' => 'Cahya Wulan, S.Pd.',
|
||||
'cover' => 'images/covers/senbud.jpg',
|
||||
'kategori' => 'Seni',
|
||||
'tahun' => 2022,
|
||||
'status' => 'Dipinjam',
|
||||
'is_new' => false,
|
||||
'tipe_akses' => 'offline',
|
||||
'sisa_hari' => 14,
|
||||
'cover' => 'images/covers/senbud.jpg'
|
||||
],
|
||||
];
|
||||
[
|
||||
'id' => 5,
|
||||
'judul' => 'Yuk, Mari SEKOLAH',
|
||||
'penulis' => 'Dr. Budi Santoso',
|
||||
'cover' => 'images/covers/ipas.jpg',
|
||||
'kategori' => 'Fiksi',
|
||||
'tahun' => 2022,
|
||||
'status' => 'Tersedia',
|
||||
'is_new' => false,
|
||||
'tipe_akses' => null,
|
||||
],
|
||||
[
|
||||
'id' => 6,
|
||||
'judul' => 'Yuk, Mari SEKOLAH',
|
||||
'penulis' => 'Dr. Budi Santoso',
|
||||
'cover' => 'images/covers/ipas.jpg',
|
||||
'kategori' => 'Fiksi',
|
||||
'tahun' => 2022,
|
||||
'status' => 'Tersedia',
|
||||
'is_new' => false,
|
||||
'tipe_akses' => 'offline',
|
||||
'sisa_hari' => 13
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Data untuk baca buku online
|
||||
* Data untuk buku pinjam offline (Diringkas)
|
||||
*/
|
||||
public static function getBukuPinjamOffline(): array
|
||||
{
|
||||
return self::getAllBooks()
|
||||
->where('tipe_akses', 'offline')
|
||||
->map(fn($buku) => [
|
||||
'judul' => $buku['judul'],
|
||||
'penulis' => $buku['penulis'],
|
||||
'sisa_hari' => $buku['sisa_hari'],
|
||||
'cover' => $buku['cover'],
|
||||
])
|
||||
->values()
|
||||
->all();
|
||||
}
|
||||
|
||||
/**
|
||||
* Data untuk baca buku online (Diringkas)
|
||||
*/
|
||||
public static function getBacaBukuOnline(): array
|
||||
{
|
||||
return self::getAllBooks()
|
||||
->where('tipe_akses', 'online')
|
||||
->map(fn($buku) => [
|
||||
'judul' => $buku['judul'],
|
||||
'penulis' => $buku['penulis'],
|
||||
'progress' => $buku['progress'],
|
||||
'cover' => $buku['cover'],
|
||||
])
|
||||
->values()
|
||||
->all();
|
||||
}
|
||||
|
||||
/**
|
||||
* Mengambil daftar buku untuk katalog dengan filter.
|
||||
*/
|
||||
public static function getKatalogBuku(array $filters = []): \Illuminate\Support\Collection
|
||||
{
|
||||
$buku = self::getAllBooks();
|
||||
|
||||
$buku = $buku->when($filters['search'] ?? null, function ($query, $search) {
|
||||
return $query->filter(fn($item) => str_contains(strtolower($item['judul']), strtolower($search)));
|
||||
})->when($filters['kategori'] ?? null, function ($query, $kategori) {
|
||||
return $query->where('kategori', $kategori);
|
||||
})->when($filters['tahun'] ?? null, function ($query, $tahun) {
|
||||
return $query->where('tahun', $tahun);
|
||||
})->when($filters['penulis'] ?? null, function ($query, $penulis) {
|
||||
return $query->where('penulis', $penulis);
|
||||
})->when($filters['tipe'] ?? null, function ($query, $tipe) {
|
||||
return $query->where('tipe_akses', $tipe);
|
||||
});
|
||||
|
||||
return $buku;
|
||||
}
|
||||
|
||||
/**
|
||||
* Method baru untuk mengambil daftar unik untuk dropdown filter
|
||||
*/
|
||||
public static function getFilterOptions(): array
|
||||
{
|
||||
$buku = self::getAllBooks();
|
||||
return [
|
||||
[
|
||||
'judul' => 'Modul Ajar IPAS',
|
||||
'penulis' => 'Tim Kemdikbud Ristek',
|
||||
'progress' => 75,
|
||||
'cover' => 'images/covers/ipas.jpg'
|
||||
],
|
||||
[
|
||||
'judul' => 'Modul Ajar Pendidikan Pancasila',
|
||||
'penulis' => 'Tim Guru Pancasila',
|
||||
'progress' => 100,
|
||||
'cover' => 'images/covers/pancasila.jpg'
|
||||
],
|
||||
'kategori' => $buku->pluck('kategori')->unique()->sort()->values(),
|
||||
'tahun' => $buku->pluck('tahun')->unique()->sortDesc()->values(),
|
||||
'penulis' => $buku->pluck('penulis')->unique()->sort()->values(),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -165,6 +165,8 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
|
|||
|
||||
<!-- Book Activities Section -->
|
||||
<div class="card border-0 shadow-sm py-2">
|
||||
|
||||
{{-- INI YANG DIKOMENTAR TITLE "AKTIVITAS BUKU" bukan fungsi --}}
|
||||
{{-- <div class="card-header bg-white border-0 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="activity-icon me-3">
|
||||
|
|
@ -173,6 +175,7 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
|
|||
<h6 class="m-0 fw-bold text-dark">Aktivitas Buku</h6>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<div class="card-body px-3">
|
||||
<!-- Offline Books Section -->
|
||||
<div class="mb-5">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
<x-app-layout>
|
||||
<!-- Header Halaman -->
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Katalog Buku</h1>
|
||||
</div>
|
||||
|
||||
<!-- Filter & Pencarian -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('katalog.index') }}" method="GET">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<input type="text" name="search" class="form-control" placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="kategori" class="form-select">
|
||||
<option value="">Semua Kategori</option>
|
||||
@foreach($filterOptions['kategori'] as $kategori)
|
||||
<option value="{{ $kategori }}" {{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="tahun" class="form-select">
|
||||
<option value="">Semua Tahun</option>
|
||||
@foreach($filterOptions['tahun'] as $tahun)
|
||||
<option value="{{ $tahun }}" {{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="penulis" class="form-select">
|
||||
<option value="">Semua Penulis</option>
|
||||
@foreach($filterOptions['penulis'] as $penulis)
|
||||
<option value="{{ $penulis }}" {{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 d-grid">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daftar Buku -->
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
@forelse ($semuaBuku as $buku)
|
||||
<div class="col">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<img src="{{ asset($buku['cover']) }}" class="card-img-top" alt="Cover {{ $buku['judul'] }}" style="height: 250px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<span class="badge bg-light text-dark border">{{ $buku['kategori'] }}</span>
|
||||
<span class="badge {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
|
||||
</div>
|
||||
<h5 class="card-title mt-2">{{ $buku['judul'] }}</h5>
|
||||
<p class="card-text small text-muted">{{ $buku['penulis'] }}</p>
|
||||
</div>
|
||||
<div class="card-footer bg-white border-0">
|
||||
<div class="d-grid">
|
||||
@if ($buku['status'] == 'Dipinjam')
|
||||
<!-- Jika buku sedang dipinjam, tombol nonaktif -->
|
||||
<button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i> Tidak Tersedia</button>
|
||||
@else
|
||||
<!-- Jika buku tersedia, cek tipe aksesnya -->
|
||||
@if ($buku['tipe_akses'] == 'online')
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca Buku Online</button>
|
||||
@else
|
||||
<!-- Anggap default (offline atau null) adalah pinjam offline -->
|
||||
<button class="btn btn-outline-primary btn-sm"><i class="bi bi-arrow-down-up me-1"></i> Pinjam Offline</button>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12">
|
||||
<div class="alert alert-warning text-center">
|
||||
<h4 class="alert-heading">Tidak Ada Hasil</h4>
|
||||
<p>Tidak ada buku yang cocok dengan kriteria filter Anda. Coba reset atau ubah filter.</p>
|
||||
<hr>
|
||||
<a href="{{ route('katalog.index') }}" class="btn btn-primary">Reset Filter</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
@ -13,10 +13,25 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="bi bi-book"></i>
|
||||
<span class="nav-text ms-2">Katalog Buku</span>
|
||||
<a class="nav-link collapsed" data-bs-toggle="collapse" href="#katalog-collapse" role="button" aria-expanded="false" aria-controls="katalog-collapse">
|
||||
<i class="bi bi-book me-2"></i>
|
||||
<span class="nav-text">Katalog Buku</span>
|
||||
<i class="bi bi-chevron-down ms-auto"></i>
|
||||
</a>
|
||||
<div class="collapse {{ request()->routeIs('katalog.index') ? 'show' : '' }}" id="katalog-collapse">
|
||||
<ul class="nav flex-column ms-3">
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('katalog.index', ['tipe' => 'online']) }}" class="nav-link {{ request('tipe') == 'online' ? 'active' : '' }}">
|
||||
<span class="nav-text">Baca Buku Online</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('katalog.index', ['tipe' => 'offline']) }}" class="nav-link {{ request('tipe') == 'offline' ? 'active' : '' }}">
|
||||
<span class="nav-text">Pinjam Buku Offline</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?php
|
||||
|
||||
use App\Http\Controllers\DashboardController;
|
||||
use App\Http\Controllers\KatalogController;
|
||||
use App\Http\Controllers\ProfileController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
|
|
@ -11,11 +12,14 @@
|
|||
|
||||
Route::get('/dashboard', [DashboardController::class, 'index'])
|
||||
->middleware(['auth'])->name('dashboard');
|
||||
Route::get('/katalog-buku/{tipe?}', [KatalogController::class, 'index'])->middleware('auth')->name('katalog.index');
|
||||
|
||||
|
||||
// Route untuk user profile dari laravel breeze
|
||||
Route::middleware('auth')->group(function () {
|
||||
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
|
||||
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
|
||||
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
|
||||
});
|
||||
|
||||
require __DIR__.'/auth.php';
|
||||
require __DIR__ . '/auth.php';
|
||||
|
|
|
|||
Loading…
Reference in New Issue