Tutorial membuat fitur search data laravel #4

Cara membuat fitur search data laravel 11

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 jangan lupa di save. Di artikel sebelumnya terdapat baris skrip yaitu projek:all() namun di artikel kali ini saya menghapus baris tersebut. Ini dilakukan agar menjaga efisiensi dan menghindari query database yang tidak perlu dikarenakan adanya Projek::orderBy()->paginate(). Untuk mengambil semua data, sudah dilakukan oleh baris skrip Projek::orderBy()->paginate(). Untuk lebih jelasnya akan saya taruh skrip barunya di github saya.

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.


Seperti biasa, saya akan menaruh semua skrip saya didalam github saya untuk bahan pembelajaran.

Terima kasih...

Posting Komentar