Pencarian, Filter, dan Pagination To-Do List Laravel (Part 3)

Di Part 2, aplikasi To-Do List kita sudah bisa CRUD penuh. Ketika jumlah tugas membengkak, pengguna butuh cara cepat menemukan tugas dan halaman tidak boleh berat. Di Part 3 ini kita tambahkan pencarian, filter, dan pagination — dan Laravel membuatnya sangat elegan.

Yang Akan Kita Bangun

• Pencarian tugas berdasarkan judul.
• Filter berdasarkan status (belum/proses/selesai) dan prioritas.
• Pagination yang memecah data, misalnya 5 tugas per halaman.

Menambahkan Form Pencarian dan Filter

Tambahkan form di atas tabel pada index.blade.php. Kita pakai metode GET agar kondisi tersimpan di URL:

<form method="get" action="{{ route('tugas.index') }}" class="form-cari">
    <input type="text" name="cari" value="{{ request('cari') }}" placeholder="Cari judul tugas...">

    <select name="status">
        <option value="">Semua Status</option>
        @foreach (['belum','proses','selesai'] as $s)
            <option value="{{ $s }}" @selected(request('status') == $s)>{{ ucfirst($s) }}</option>
        @endforeach
    </select>

    <button type="submit">Cari</button>
</form>

Logika Pencarian dengan when()

Inilah bagian paling elegan. Perbarui metode index() memakai when() — helper Eloquent yang hanya menerapkan kondisi jika nilainya ada, sehingga kode tetap bersih tanpa banyak if:

public function index(Request $request)
{
    $tugas = Tugas::query()
        ->when($request->cari, function ($query, $cari) {
            $query->where('judul', 'like', "%{$cari}%");
        })
        ->when($request->status, function ($query, $status) {
            $query->where('status', $status);
        })
        ->when($request->prioritas, function ($query, $prioritas) {
            $query->where('prioritas', $prioritas);
        })
        ->latest()
        ->paginate(5)
        ->withQueryString();

    return view('tugas.index', compact('tugas'));
}

Perhatikan dua hal penting:

• when($request->cari, ...) — blok filter hanya dijalankan bila cari terisi. Ini menggantikan rangkaian if yang bertele-tele.
• ->withQueryString() — membuat link pagination membawa serta parameter pencarian dan filter, sehingga tidak hilang saat pindah halaman.

Menampilkan Link Pagination

Karena index() kini mengembalikan objek paginator, tambahkan navigasi halaman di bawah tabel:

    <div class="paginasi">
        {{ $tugas->links() }}
    </div>

Cukup {{ $tugas->links() }} — Laravel otomatis membuat seluruh tautan halaman. Perhatikan bahwa saat memakai paginator di view, perulangan tetap @foreach ($tugas as $t) seperti biasa.

Menyesuaikan Tampilan Pagination

Secara bawaan Laravel memakai style Tailwind. Bila aplikasi Anda tidak memakai Tailwind, ubah ke Bootstrap atau tampilan sederhana. Jalankan perintah berikut untuk mem-publish view pagination:

php artisan vendor:publish --tag=laravel-pagination

Lalu di App\Providers\AppServiceProvider, atur agar memakai Bootstrap:

use Illuminate\Pagination\Paginator;

public function boot(): void
{
    Paginator::useBootstrapFive();
}

Atau buat tampilan pagination kustom sendiri sesuai desain aplikasi Anda.

Menampilkan Info Jumlah Data

Objek paginator menyediakan banyak informasi berguna:

<p>Menampilkan {{ $tugas->count() }} dari {{ $tugas->total() }} tugas.</p>

Menangani Hasil Kosong

@forelse ($tugas as $t)
    <tr>
        <td>{{ $t->judul }}</td>
        {{-- kolom lainnya --}}
    </tr>
@empty
    <tr><td colspan="5">Tidak ada tugas yang cocok.</td></tr>
@endforelse

Directive @forelse ... @empty ... @endforelse adalah cara ringkas Blade menangani daftar yang mungkin kosong — jauh lebih rapi daripada mengecek manual.

Contoh Kasus Nyata

Bayangkan tim dengan ratusan tugas berjalan. Dengan kombinasi pencarian judul, filter status “proses”, dan pagination, anggota tim bisa langsung fokus pada tugas yang sedang dikerjakan tanpa dibanjiri seluruh daftar. Pendekatan when() membuat controller tetap ringkas meski filternya bertambah banyak.

Penutup

Aplikasi To-Do List Anda kini dilengkapi pencarian, filter, dan pagination yang saling bekerja sama dengan kode yang sangat bersih berkat when() dan withQueryString() — salah satu keindahan Laravel.

Masih ada satu celah: siapa saja bisa mengelola tugas. Di Part 4 pamungkas, kita bangun sistem autentikasi login agar hanya pengguna terdaftar yang bisa mengakses aplikasi. Sampai jumpa!

Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi Laravel.

Baca Juga

• Cara Membuat Login dan Autentikasi To-Do List Laravel (Part 4)
• Cara Membuat Aplikasi To-Do List dengan Laravel (Part 1)