Selamat datang di website CopyPasteKode, pada tutorial kali ini kita akan belajar bagaimana cara membuat fitur filter dan search dengan pagination pada Laravel. Dimana pada tutorial sebelumnya kita telah membuat fitur CRUD, kurang lengkap rasanya jika belum menambahkan fitur filter, search dan pagination. Karena tutorial ini merupakan tutorial bersambung, maka dari itu saya sarankan teman-teman untuk mengikuti tutorial-tutorial Laravel sebelumnya di website ini dari awal.
Berikut adalah seri tutorial Laravel sebelumnya :
Disini saya asumsikan bahwa teman-teman sudah mengikuti tutorial Laravel ini dari awal, sehingga teman-teman tidak akan mengalami kesulitan nantinya.
Baiklah, tanpa perlu berlama-lama lagi langsung saja kita mulai tutorial kita.
Eitttsss!! sabar teman-teman, sebelum kita mulai kita harus mengetahui terlebih dahulu apa-apa saja yang harus kita lakukan, berikut adalah langkah-langkahnya :
- Menambahkan select option dan input pada views Mahasiswa
- Modifikasi method index pada Controllers Mahasiswa
- Menambahkan method ScopFilter pada Models Mahasiswa
- Testing fitur Filter, Search dan pagination
Setelah mengetahui langkah-langkah yang harus dikerjakan, langsung saja kita mulai dengan langkah yang pertama
Menambahkan select option dan input pada views Mahasiswa
Buka kembali folder resources/views lalu temukan file bernama mahasiswa.blade.pphp, kemudian tambahkan script berikut :
<form action="{{ route('mahasiswa.index') }}" class="d-inline float-right mx-2">
<div class="form-group row">
<label for="jenis_kelamin" class="col-form-label">Jenis Kelamin</label>
<div class="col">
<select name="jenis_kelamin" id="jenis_kelamin" class="custom-select">
<option @if (request('jenis_kelamin') == '') selected @endif value="">-- ALl --</option>
<option @if (request('jenis_kelamin') == 'Laki-laki') selected @endif value="Laki-laki">Laki-laki</option>
<option @if (request('jenis_kelamin') == 'Perempuan') selected @endif value="Perempuan">Perempuan</option>
</select>
</div>
<label for="prodi" class="col-form-label">Prodi</label>
<div class="col">
<select name="prodi" id="prodi" class="custom-select">
<option @if (request('prodi') == '') selected @endif value="">-- ALl --</option>
<option @if (request('prodi') == 'Matematika') selected @endif value="Matematika">Matematika</option>
<option @if (request('prodi') == 'Statistika') selected @endif value="Statistika">Statistika</option>
<option @if (request('prodi') == 'Sistem Informasi') selected @endif value="Sistem Informasi">Sistem
Informasi</option>
</select>
</div>
<div class="col-4">
<input type="search" name="search" value="{{ request('search') }}" class="form-control"
placeholder="Seacrh...">
</div>
<div class="col">
<button type="submit" class="btn btn-md btn-primary"> Cari</button>
</div>
</div>
</form>
Letak kan script diatas setelah tag <div class="card-header">, seperti contoh gambar dibawah :
Penjelasan : script diatas adalah untuk membuat select option dan input, select option atau menu pilihan akan kita gunakan sebagai filter, dan input akan kita gunakan sebagai menu pencarian.
Pada tutorial ini, saya menggunakan 2 menu select option atau menu pilihan berdasarkan data jenis_kelamin dan prodi, dan pencarian berdasarkan data nim dan nama mahasiswa seperti contoh gambar dibawah :
Setelah itu tambahkan juga script berikut:
{{ $mahasiswa->links() }}
Penjelasan : script diatas adalah untuk membuat pagination
Letak kan script diatas setelah tag </table>
Modifikasi method index pada Controller Mahasiswa
Buka folder app/Http/Controllers , lalu temukan file dengan nama MahasiswaController.php, kemudian modifikasi seperti petunjuk berikut :
MahasiswaController.php, sebelum di modifikasi :
public function index()
{
$data = [
'title' => 'Data Mahasiswa',
'mahasiswa' => Mahasiswa::latest()->paginate(5),
];
return view('mahasiswa.mahasiswa', $data, compact('data'))
->with('i', (request()->input('page', 1) - 1) * );
}MahasiswaController.php, setelah di modifikasi :
public function index()
{
$data = [
'title' => 'Data Mahasiswa',
'mahasiswa' => Mahasiswa::latest()->filter(request(['search', 'jenis_kelamin', 'prodi']))->paginate(10)->withQueryString()
];
return view('mahasiswa.mahasiswa', $data);
}Penjelasan :
- Mahasiswa:: adalah nama class dari Model yang kita gunakan
- latest() adalah untuk mengambil data berdasarkan data yang terakhir di input kan
- filter adalah untuk menyaring data yang akan di tampilkan berdasarkan request yang diterima controller.
- paginate(10) adalah untuk mengolah data yang akan ditampilkan ke dalam pagination per 10 data tiap halaman, melalui script {{$mahasiswa->links()}} diatas.
Menambahkan method ScopFilter pada Models Mahasiswa
Buka folder app/Models , lalu temukan file dengan nama Mahasiswa.php, kemudian tambahkan method scropFilter sebagai berikut :
public function scopeFilter($query, array $filters)
{
$query->when($filters['search'] ?? false, function ($query, $search) {
return $query->where('nim', 'like', '%' . $search . '%')->orWhere('nama', 'like', '%' . $search . '%');
});
$query->when($filters['jenis_kelamin'] ?? false, function ($query, $jenis_kelamin) {
return $query->where('jenis_kelamin', 'like', '%' . $jenis_kelamin . '%');
});
$query->when($filters['prodi'] ?? false, function ($query, $prodi) {
return $query->where('prodi', 'like', '%' . $prodi . '%');
});
}Sehingga Model Mahasiswa akan menjadi seperti berikut :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Mahasiswa extends Model
{
use HasFactory;
protected $table = 'mahasiswa';
protected $primaryKey = 'id';
protected $fillable = ['nim', 'nama', 'jenis_kelamin', 'prodi'];
public function scopeFilter($query, array $filters)
{
$query->when($filters['search'] ?? false, function ($query, $search) {
return $query->where('nim', 'like', '%' . $search . '%')->orWhere('nama', 'like', '%' . $search . '%');
});
$query->when($filters['jenis_kelamin'] ?? false, function ($query, $jenis_kelamin) {
return $query->where('jenis_kelamin', 'like', '%' . $jenis_kelamin . '%');
});
$query->when($filters['prodi'] ?? false, function ($query, $prodi) {
return $query->where('prodi', 'like', '%' . $prodi . '%');
});
}
}Penjelasan :
- $filters['search'] adalah untuk mengecek isi dari 'search' dan jika ada maka tampilkan data berdasarkan nim dan nama
- $filters['jenis_kelamin'] adalah untuk mengecek isi dari 'jenis_kelamin' dan jika ada maka tampilkan data berdasarkan jenis_kelamin
- $filters['prodi'] adalah untuk mengecek isi dari 'prodi' dan jika ada maka tampilkan data berdasarkan prodi.
Testing fitur Filter, Search dan pagination
Jalankan Local Development Serve pada project Laravel teman-teman, kemudian akses URL berikut : http://127.0.0.1:8000/mahasiswa
Maka akan tampil seperti berikut :
Pada gambar diatas terlihat kita sudah berhasil menambahkan filter dengan select option dan kolom pencarian. hanya saja pagination nya masih berantakan karena secara default Laravel menggunakan style tailwind css sedangkan kita akan menggunakan bootstrap css, lalu bagaimana cara agar tampilan pagination nya menjadi tampilan bootstrap? teman-teman hanya perlu membuka file dengan nama AppServiceProvider.php yang berada di dalam folder app/Providers, kemudian tambahkan script berikut pada method boot :
use Illuminate\Pagination\Paginator;
Paginator::useBootstrapFive();Berikut adalah petunjuk dengan gambar :
Terlihat pada gambar diatas, paginationnya sudah dalam tampilan atau style bootstrap.
Lakukan uji coba pada tiap-tiap fitur baru kita buat untuk memastikan bahwa semua fiturnya sudah berjalan dengan baik.
Testing Filter berdasarkan jenis kelamin
 |
| Filter data berdasarkan jenis kelamin Laki-laki |
 |
| Filter data berdasarkan jenis kelamin Perempuan |
 |
| Filter data berdasarkan prodi Matematika |
 |
| Filter data berdasarkan prodi Statistika |
 |
| Filter data berdasarkan prodi Sistem Informasi |
Pada saat pencarian berdasarkan prodi sistem informasi seperti gambar diatas, pagination nya tidak tampil karena hanya ada 10 data saja, jika lebih dari 10 baru akan muncul.
Testing fitur seacrh
Untuk proses testing fitur lebih lanjut bisa teman-teman lakukan sendiri contohnya dengan mengkombinasikan fitur filter berdasarkan jenis kelamin + berdasarkan prodi + search.
Sampai disini sebenarnya tutorial kita telah selesai, tetapi ada sedikit hal yang harus kita perbaiki, jika teman-teman perhatikan nomor urut pada data di halaman 1, 2, 3 dan seterusnya sama yaitu nomor urut 1 sampai dengan 10, yang serahusnya halaman 1 nomor urut 1 sampai dengan 10, halaman 2 nomor urut 11 sampai 20 dan seterusnya. Jika teman-teman bingung bisa lihat ilustrasi gambar berikut :
 |
| Halaman 1 |
 |
| Halaman 2 |
Dari gambar halaman 1 dan gambar halaman 2 bisa kita perhatikan bahwa nomor urut pada data tidak mengikuti pagination, lalu bagaimana cara mengatasinya? caranya cukup simple yaitu mengganti script {{ $val + 1 }} menjadi {{ $val + $mahasiswa->firstItem() }} pada file mahasiswa.blade.php yang berada didalam folder resources/views, seperti petunjuk gambar berikut :
Jika sudah mengganti {{ $val + 1 }} menjadi {{ $val + $mahasiswa->firstItem() }} , refresh lagi halaman Mahasiswa kemudian lihat penomoran data halaman 1, 2, 3 dan seterusnya. Jika teman-teman sudah mengkuti langkah diatas seharusnya menjadi seperti contoh berikut :
Halaman 1
 |
| Halaman 1 |
Halaman 2
 |
| Halaman 2 |
Saya rasa cukup sampai disini tutorial cara membuat fitur filter, pencarian dengan pagination pada Framework Laravel 9, jika ada yang ingin teman-teman tanyakan jangan ragu untuk bertanya pada kolom komentar, semoga bermanfaat dan sampai jumpa pada tutorial-tutorial berikutnya bye..byee ^^
Tags
Laravel