pilter data
This commit is contained in:
parent
fb8c926033
commit
49f900cfa9
|
@ -30,27 +30,45 @@ public function userfeature(){
|
|||
|
||||
public function userdata(Request $request)
|
||||
{
|
||||
// Ambil data dropdown
|
||||
$jenisMakananList = JenisMakanan::all();
|
||||
$kategoriList = Kategori::all();
|
||||
|
||||
$makanans = Makanan::query();
|
||||
// Query awal
|
||||
$makananQuery = Makanan::query();
|
||||
|
||||
// Filter berdasarkan jenis makanan
|
||||
if ($request->has('jenis_id') && $request->jenis_id != '') {
|
||||
$makanans->where('jenis_id', $request->jenis_id);
|
||||
$makananQuery->where('jenis_id', $request->jenis_id);
|
||||
}
|
||||
|
||||
// Filter berdasarkan kategori
|
||||
if ($request->has('kategori_id') && $request->kategori_id != '') {
|
||||
$makanans->where('kategori_id', $request->kategori_id);
|
||||
$makananQuery->where('kategori_id', $request->kategori_id);
|
||||
}
|
||||
|
||||
$makanans = $makanans->get();
|
||||
// Filter berdasarkan pencarian nama makanan
|
||||
if ($request->has('search') && $request->search != '') {
|
||||
$makananQuery->where('nama', 'like', '%' . $request->search . '%');
|
||||
}
|
||||
|
||||
// Menentukan jumlah data per halaman
|
||||
$perPage = $request->per_page === 'all'
|
||||
? $makananQuery->count() // tampilkan semua jika 'all'
|
||||
: ($request->per_page ?? 25); // default 25
|
||||
|
||||
// Ambil data dengan paginasi dan simpan parameter pencarian/filter
|
||||
$makanans = $makananQuery->paginate($perPage)->appends($request->except('page'));
|
||||
|
||||
// Kirim ke view
|
||||
return view('user.userdata', compact('makanans', 'jenisMakananList', 'kategoriList'));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public function userresult()
|
||||
{
|
||||
$rekomendasi = Rekomendasi::with('makanan')
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
<!-- Data Makanan Start -->
|
||||
<div class="container-xxl py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<!-- Judul dan Deskripsi -->
|
||||
<div class="text-center mb-5">
|
||||
<p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Data Aplikasi</p>
|
||||
|
@ -12,77 +13,169 @@
|
|||
Informasi kandungan gizi makanan yang tersedia dalam sistem untuk membantu Anda memilih menu yang tepat bagi penderita penyakit jantung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Catatan Penting -->
|
||||
<div class="alert alert-info mt-4 rounded-4 shadow-sm" role="alert">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<strong>Catatan:</strong> Komposisi gizi pangan dihitung per 100 gram, dengan Berat Dapat Dimakan (BDD) 100%.
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<form method="GET" action="{{ route('userdata') }}">
|
||||
<div class="input-group">
|
||||
<label class="input-group-text bg-primary text-white" for="jenis_id">Jenis Makanan</label>
|
||||
<select class="form-select text-dark bg-white" id="jenis_id" name="jenis_id">
|
||||
<option value="">Semua</option>
|
||||
@foreach ($jenisMakananList as $jenis)
|
||||
<option value="{{ $jenis->id }}" {{ request('jenis_id') == $jenis->id ? 'selected' : '' }}>
|
||||
{{ ucfirst($jenis->name) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<label class="input-group-text bg-primary text-white" for="kategori_id">Kategori</label>
|
||||
<select class="form-select text-dark bg-white" id="kategori_id" name="kategori_id">
|
||||
<option value="">Semua</option>
|
||||
@foreach ($kategoriList as $kategori)
|
||||
<option value="{{ $kategori->id }}" {{ request('kategori_id') == $kategori->id ? 'selected' : '' }}>
|
||||
{{ ucfirst($kategori->kategori) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<button class="btn btn-outline-primary" type="submit">Terapkan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Filter Jenis & Kategori -->
|
||||
<form method="GET" action="{{ route('userdata') }}" class="row g-3 align-items-end mb-4">
|
||||
<div class="col-md-5">
|
||||
<label for="jenis_id" class="form-label fw-semibold">Jenis Makanan</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-primary text-white"><i class="fas fa-utensils"></i></span>
|
||||
<select class="form-select" id="jenis_id" name="jenis_id">
|
||||
<option value="">Semua</option>
|
||||
@foreach ($jenisMakananList as $jenis)
|
||||
<option value="{{ $jenis->id }}" {{ request('jenis_id') == $jenis->id ? 'selected' : '' }}>
|
||||
{{ ucfirst($jenis->name) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="kategori_id" class="form-label fw-semibold">Kategori</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-primary text-white"><i class="fas fa-tags"></i></span>
|
||||
<select class="form-select" id="kategori_id" name="kategori_id">
|
||||
<option value="">Semua</option>
|
||||
@foreach ($kategoriList as $kategori)
|
||||
<option value="{{ $kategori->id }}" {{ request('kategori_id') == $kategori->id ? 'selected' : '' }}>
|
||||
{{ ucfirst($kategori->kategori) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 d-grid">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="fas fa-filter me-1"></i> Terapkan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Filter Per Page + Search -->
|
||||
<form method="GET" action="{{ route('userdata') }}" class="row g-3 align-items-end mb-4">
|
||||
<!-- Kirim parameter filter yang aktif -->
|
||||
<input type="hidden" name="jenis_id" value="{{ request('jenis_id') }}">
|
||||
<input type="hidden" name="kategori_id" value="{{ request('kategori_id') }}">
|
||||
|
||||
<!-- Pencarian (Kiri) -->
|
||||
<div class="col-md-4">
|
||||
<label for="search" class="form-label fw-semibold">Pencarian</label>
|
||||
<div class="input-group">
|
||||
<input type="text" name="search" id="search" class="form-control" placeholder="Cari nama makanan..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-search me-1"></i> Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spacer kosong -->
|
||||
<div class="col-md-4"></div>
|
||||
|
||||
<!-- Jumlah Data per Halaman (Kanan) -->
|
||||
<div class="col-md-3 ms-auto text-end">
|
||||
<label for="per_page" class="form-label fw-semibold">Jumlah Data per Halaman</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-primary text-white"><i class="fas fa-list-ol"></i></span>
|
||||
<select class="form-select" name="per_page" id="per_page" onchange="this.form.submit()">
|
||||
@php
|
||||
$perPageOptions = [25, 50, 100, 'all'];
|
||||
$currentPerPage = request('per_page', 25);
|
||||
@endphp
|
||||
@foreach($perPageOptions as $option)
|
||||
<option value="{{ $option }}" {{ $currentPerPage == $option ? 'selected' : '' }}>
|
||||
{{ $option == 'all' ? 'Semua' : $option }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Tabel Data -->
|
||||
<div class="table-responsive shadow-sm rounded-4 overflow-hidden">
|
||||
<table class="table table-hover table-bordered align-middle text-center bg-white">
|
||||
<thead class="table-primary text-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">🍽️ Nama Makanan</th>
|
||||
<th scope="col">🥑 Lemak (g)</th>
|
||||
<th scope="col">🧂 Natrium (mg)</th>
|
||||
<th scope="col">🔥 Energi (kkal)</th>
|
||||
<th scope="col">🍞 Karbohidrat (g)</th>
|
||||
<table class="table table-hover table-bordered align-middle text-center bg-white">
|
||||
<thead class="table-primary text-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">🍽️ Nama Makanan</th>
|
||||
<th scope="col">🥑 Lemak (g)</th>
|
||||
<th scope="col">🧂 Natrium (mg)</th>
|
||||
<th scope="col">🔥 Energi (kkal)</th>
|
||||
<th scope="col">🍞 Karbohidrat (g)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($makanans as $index => $makanan)
|
||||
<tr>
|
||||
<td class="fw-bold text-primary">{{ ($makanans->firstItem() ?? 0) + $index }}</td>
|
||||
<td class="text-start fw-semibold">{{ $makanan->nama }}</td>
|
||||
<td>{{ number_format($makanan->lemak, 1) }}</td>
|
||||
<td>{{ number_format($makanan->natrium) }}</td>
|
||||
<td>{{ number_format($makanan->energi) }}</td>
|
||||
<td>{{ number_format($makanan->karbohidrat, 1) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($makanans as $index => $makanan)
|
||||
<tr>
|
||||
<td class="fw-bold text-primary">{{ $index + 1 }}</td>
|
||||
<td class="text-start fw-semibold">{{ $makanan->nama }}</td>
|
||||
<td>{{ number_format($makanan->lemak, 1) }}</td>
|
||||
<td>{{ number_format($makanan->natrium) }}</td>
|
||||
<td>{{ number_format($makanan->energi) }}</td>
|
||||
<td>{{ number_format($makanan->karbohidrat, 1) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Pagination -->
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<div>
|
||||
<p>Menampilkan {{ $makanans->count() }} dari {{ $makanans->total() }} makanan</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Pagination links with Bootstrap classes -->
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center">
|
||||
{{ $makanans->links('pagination::bootstrap-4') }} <!-- Custom pagination style -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Pastikan pagination menyesuaikan ukuran layar */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
font-size: 1rem; /* Ukuran font untuk pagination */
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination .page-item {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* Menyesuaikan pagination untuk tampilan mobile */
|
||||
@media (max-width: 576px) {
|
||||
.pagination .page-link {
|
||||
font-size: 0.9rem; /* Ukuran font lebih kecil di layar kecil */
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Makanan End -->
|
||||
|
||||
@endsection
|
||||
|
|
Loading…
Reference in New Issue