Tutorial Laravel Cara Membuat Pencarian (Search Data)

Tutorial Laravel Cara Membuat Pencarian (Search Data)

Assalamualaikum, wr. wb. Kali ini kita akan membahas tentang cara membuat pencarian dalam Laravel. Untuk yang projek digunakan jika kalian mengikuti tutorial CRUD Laravel 8, maka dapat langsung menggunakannya. Langsung saja kalian buka projek kalian tersebut. Jika kalian menggunakan laravel dengan versi dibawahnya, silahkan dicoba dulu, sepertinya masih relevan. Jika tidak, silahkan cek di dokumentasi resminya.

Buka file index.blade.php kemudian tambahkan kode berikut, yang merupakan tampilan form pencarian.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@extends('users.layout')

@section('content')
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left mt-2">
            <h2>Laravel 8 CRUD - Manajemen User</h2>
        </div>
        <div class="float-right my-2">
            <a class="btn btn-success" href="{{ route('users.create') }}"> Create New User</a>
        </div>
    </div>
</div>
<!-- Start kode untuk form pencarian -->
<form class="form" method="get" action="{{ route('search') }}">
    <div class="form-group w-100 mb-3">
        <label for="search" class="d-block mr-2">Pencarian</label>
        <input type="text" name="search" class="form-control w-75 d-inline" id="search" placeholder="Masukkan keyword">
        <button type="submit" class="btn btn-primary mb-1">Cari</button>
    </div>
</form>
<!-- Start kode untuk form pencarian -->
@if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif

Di dalam kode di atas sudah saya kasih komentar start dan end kode untuk form pencarian. Selanjutnya perhatikan method-nya kita menggunakan get, karena akan mengambil sebuah data. Dan route-nya search yang mana akan kita buat nantinya.

Hal penting terakhir jangan lupa name untuk form inputnya yaitu "search" yang mana akan kita gunakan untuk menangkap data yang kita masukkan untuk dikelola di controller nanti.

Langkah selanjutnya silahkan buka file UserControler.php dan tambahkan kode atau fungsi berikut berikut.

1
2
3
4
5
6
7
<?php
    public function search(Request $request)
    {
        $keyword = $request->search;
        $users = User::where('name', 'like', "%" . $keyword . "%")->paginate(5);
        return view('users.index', compact('users'))->with('i', (request()->input('page', 1) - 1) * 5);
    }

Pertama kita tangkap kata kunci yang kita masukkan tadi pada variabel $keyword, lalu buat variabel $users untuk menyimpan data yang kita ambil dengan ORM Laravel dimana jika data pada kolom name menyerupai dengan kata kunci yang kita masukkan, maka data itu yang kita ambil.

Kemudian, seperti biasa kita lempar datanya ke view. Ada tambahan fungsi with, jika kalian mengikuti tutorial CRUD Laravel 8, maka fungsi itu untuk mengatur penomoran dan pagination.

Langkah terakhir, di file web.php tambahkan route search seperti berikut.

1
2
3
4
5
6
7
8
9
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::resource('/users', UserController::class);

//Route search
Route::get('/search', [UserController::class, 'search'])->name('search');

Selesai sudah, mudahkan? Oh ya jika kalian ingin melakukan pencarian berdasarkan banyak kolom, kalian dapat menggunakan fungsi ORM multiple where. Cara menulisnya seperti berikut:

->where(['nama_kolom','operator','nilai'],['nama_kolom','operator','nilai'], ...)

Oke sekian tutorial kali ini, semoga bermanfaat, jika ada salah kata atau kekurangan dalam penjelasan, mohon maaf, Wassalamualaikum, wr. wb.

5 Komentar

  1. Maaf mau nanya, blade viewnya mana yaaa hasil searchnya? kan diatas cuman naro form input nah naro data yang dicarinya dimana tuh ya

    BalasHapus
    Balasan
    1. Jadi ini tuh terusan dari tutorial CRUD Laravel 8 dengan ORM coba cari di web ini, nah kalian hanya perlu menambahkan kode pencarian di html yang merupakan halaman index CRUD Laravel 8 tsb.

      Hapus
  2. kurang jelas penjelasannya, ngga ada contoh hasilnya juga

    BalasHapus
Lebih baru Lebih lama