Di artikel kali ini, saya akan memberikan tutorial cara membuat fitur search data pada laravel. Fitur search berguna untuk memudahkan mencari data yang telah diinput ke dalam database.
Buka file ProjekController.php yang telah dibuat di artikel sebelumnya. Jika kalian penasaran, kalian bisa kunjungi artikel saya mengenai cara membuat CRUD. Kemudian tambahkan skrip di dalam public function index(request $request): View, tepatnya dibawah skrip pagination.
public function index(Request $request): View
{
$search = $request->input('search');
$query = Projek::query();
if ($search) {
$query->where('nama', 'LIKE', "%{$search}%")
->orWhere('kelas', 'LIKE', "%{$search}%")
->orWhere('jurusan', 'LIKE', "%{$search}%");
}
$projek = $query->orderBy('nama', 'asc')->paginate(10);
if ($projek->isEmpty() && $search) {
session()->flash('error', 'Data tidak ditemukan.');
}
if ($request->fullUrl() != session('previous_url')) {
session(['previous_url' => url()->previous()]);
}
return view('projek.index', compact('projek'));
}
Jika sudah, masuk ke file index.blade.php dan tambahkan skrip baru dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Daftar Data Siswa</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-light">
<div class="container mt-5">
<h1 class="mb-4">Daftar Data Siswa</h1>
<!-- ini adalah baris skrip untuk fitur search -->
<form action="{{ route('projek.index') }}" method="GET" class="form-inline d-flex mb-3">
<input class="form-control mr-sm-2" type="search" name="search" placeholder="Cari Berdasarkan Nama..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<a href="{{ route('projek.create') }}" class="btn btn-primary mb-3">Tambah Data Siswa</a>
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($projek as $index => $p)
<tr>
<td>{{ $index + 1 + ($projek->currentPage() - 1) * $projek->perPage() }}</td>
<td>{{ $p->nama }}</td>
<td>{{ $p->kelas }}</td>
<td>{{ $p->jurusan }}</td>
<td>
<form onsubmit="return confirm('Apakah Anda yakin ingin menghapus data ini?');"
action="{{ route('projek.destroy', $p->id) }}" method="POST">
<a href="{{ route('projek.edit', $p->id) }}" class="btn btn-warning btn-sm">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item {{ $projek->onFirstPage() ? 'disabled' : '' }}">
<a class="page-link" href="{{ $projek->previousPageUrl() }}">Sebelumnya</a>
</li>
<li class="page-item {{ $projek->hasMorePages() ? '' : 'disabled' }}">
<a class="page-link" href="{{ $projek->nextPageUrl() }}">Berikutnya</a>
</li>
</ul>
</nav>
<div class="text-center">
<span>Halaman {{ $projek->currentPage() }} dari {{ $projek->lastPage() }}</span>
</div>
</div>
</body>
</html>
Bisa dilihat bahwa terdapat elemen bootstrap didalamnya. Elemen bootstrap itu berhubungan dengan artikel saya sebelumnya.
Setelah itu jangan lupa di save, dan masuk ke browser dengan mengetik localhost:8000/laravel. Jangan lupa untuk menyalahkan server laravel dan xamppnya. bisa dilihat gambar dibawah sudah ada fitur search. Dengan fitur seperti itu, kalian sudah bisa mencari data berdasarkan nama, kelas, dan jurusan yang sudah tertera didata.
Terima kasih...
Posting Komentar