Membuat Fitur Search dan Pagination di Laravel 8

 


Halo teman semua, kali ini saya akan membahas tentang membuat fitur search dan pagination di laravel 8, kita juga akan membuat controller, data seeder, route, dan view untuk menampilkan datanya, langsung saja kita mulai membuat fitur search dan paginationnya.


Membuat Controller

Dalam alur kerja suatu framework yang menganut sistem MVC controller menjadi penghubung antara model dan view, untuk membuat sebuah controller pada laravel kita dapat menggunakan sebuah magic tool yang bernama Artisan.


Pada command prompt, ketik command berikut dan enter.


  • make:controller = artinya kita akan membuat sebuah controller.

  • userController = nama dari controller yang kita buat.

  • -r = ini adalah resource atau controller yang kita buat akan secara otomatis diberi method default yang berguna untuk melakukan CRUD.


Controller telah dibuat dan kita dapat temukan pada folder app\Http\Controllers dengan nama userController.


Dapat kita lihat bagian dalam controller sudah terdapat beberapa method untuk kita melakukan CRUD, laravel juga sudah memberikan namespace sehingga kita tidak perlu lagi mengaturnya.


Selanjutnya pada method index tambahkan kode berikut.

 

Note: Disini kita mengambil data pada tabel user dan mengirimkan data tersebut ke view index yang berada pada folder user.


Lakukan include model user pada bagian atas sebagai berikut.


Selanjutnya kita buat view index, buka folder resources/views/ lalu buat folder baru didalamnya dengan nama user dan di dalam folder user tersebut buat file dengan nama index.blade.php sehingga strukturnya sebagai berikut.


Lalu buka file index.blade.php dan masukkan kode berikut.


Selanjutnya buat route untuk menangani view tersebut, buka file web.php pada folder routes/ dan tambahkan kode berikut.


Jangan lupa juga tambahkan namespace dari userController pada bagian atas.


Selanjutnya jalankan aplikasi laravel dengan artisan serve dan buka pada browser, sehingga akan tampil sebagai berikut.


Sampai sini kita telah berhasil membuat controller, route dan juga view dari index user.


Membuat User Seeder

Seeder adalah fungsi pada laravel yang digunakan untuk membuat data dummy, dengan seeder kita tidak perlu melakukan penginputan data secara berulang-ulang, sehingga ini sangat menghemat waktu dalam proses pengembangan sebuah aplikasi.


Pada command prompt ketikkan command berikut dan tekan enter.


  • make:seeder = artinya kita membuat sebuah seeder.

  • UserTableSeeder = nama dari seeder yang kita buat, sebaiknya nama dari seeder mewakili data dummy yang akan kita buat.


Secara default seeder hanya mempunyai sebuah method yaitu run, method ini akan dieksekusi menggunakan artisan command php artisan db:seed. Selanjutnya buka file seeder yang telah dibuat pada folder database/seeders/ dengan nama UserTableSeeder. 



Untuk membuat data dummy kita dapat memanfaatkan factory dan secara default UserFactory telah disediakan oleh laravel, ini dapat kita lihat pada folder database/factories/.



Note : Disini nantinya akan mengisi data pada tabel user dengan data yang random.


Karena Factory telah tersedia kita langsung saja kembali pada file seedernya, tambahkan kode berikut di method run pada file UserTableSeeder.

Note: Pada kode di atas, kita akan menginput data pada tabel user sebanyak 50 data, jika ingin lebih dari 50 kita cukup mengganti angka 50 sesuai kebutuhan.


Lalu jalankan seedernya dengan command berikut.


Setelah sukses menjalankan seeder kita dapat melihat perubahan data pada tabel user yang sebelumnya hanya memiliki sebuah data sekarang telah memiliki 51 data.


Sampai sini kita telah berhasil membuat data dummy dengan seeder.


Membuat Fitur Pagination

Pagination adalah sebuah fitur untuk membatasi penampilan data agar tidak terlalu panjang dan data dapat dimuat lebih cepat, untuk data yang sedikit hal ini mungkin tidak terlalu berpengaruh dalam proses pemuatan data, namun jika data sudah ribuan bahkan jutaan hal ini akan sangat berpengaruh terhadap performa aplikasi yang kita buat, untuk membuat pagination pada Laravel 8 lakukan langkah-langkah berikut.


Buka file userController pada folder app\Http\Controllers.


Pada code $users = $users->get(). Ubah get() menjadi paginate() sehingga menjadi seperti berikut.

Note: Terdapat angka 10 pada paginate yang berarti kita akan menampilkan 10 data pada setiap halaman, kita dapat merubah angka tersebut jika ingin menampilkan data lebih banyak atau sedikit.


Selanjutnya kita buka view index yang berada pada folder resources/views/user dan ubah pada $loop->iteration menjadi ($users->currentPage() - 1) * $users->perPage() + $loop->iteration.

 


Sehingga menjadi seperti berikut.


Selanjutnya cari bagian card-footer dan tambahkan code $users->links() sehingga menjadi sebagai berikut.


Sampai sini pagination telah berhasil. Namun jika kita lihat tampilan akan sedikit aneh. Pagination kita akan jadi sebagai berikut.


Ini terjadi karena kita menggunakan bootstrap, sementara laravel 8 secara default menggunakan tailwind css, sehingga kita perlu melakukan sedikit perubahan pada file AppServiceProvider, kita dapat menemukan file ini pada folder app\Providers.


Buka file tersebut dan tambahkan code use Illuminate\Pagination\Paginator pada bagian atas sehingga menjadi seperti berikut.


Selanjutnya scroll kebawah dan cari method boot dan tambahkan kode Paginator::useBootstrap() sehingga menjadi sebagai berikut.


Selanjutnya lakukan reload halaman user pada browser dan pagination telah sesuai dengan yang kita inginkan.


Membuat Fitur Search

Pada bagian ini kita akan membuat fitur search pada halaman user, fitur ini sangat berguna untuk kita lebih mudah mencari data tertentu saat kita memiliki banyak data.


Pertama buka view index pada folder resources/views/user.


Lalu tambahkan kode berikut pada bagian card-header agar user dapat melakukan search data, sehingga akan menjadi seperti berikut.


Note: Pada form kita memberikan method GET bertujuan agar parameter yang dikirim akan ditampilkan di url dan memberikan action yang mengarah pada url index dari view modul user itu sendiri.


Selanjutnya buka file userController yang berada di folder app\Http\Controllers dan pada method index tambahkan kode sehingga menjadi seperti berikut.


Note : Disitu kita memanggil class Request, dimana class request ini telah otomatis di include oleh laravel karena pada saat melakukan instalasi controller, kita menambahkan flag resource yang telah saya jelaskan pada bagian instalasi controller di atas.


  • Pada $search, kita akan memberikan nilai pada $search ini dengan nilai yang diambil dari request yang didapat dari form search.

  • when berfungsi untuk melakukan pengecekan pada query string search memiliki nilai atau tidak, jika tidak memiliki nilai atau null maka akan melakukan pengecekan menggunakan where.


Selanjutnya kita coba melakukan search data, buka browser dan pastikan sudah menjalankan artisan serve, buka url halaman user maka akan tampil seperti berikut.


Selanjutnya coba ketikkan sesuatu pada form dan klik tombol search, disini saya menuliskan ba dan telah muncul data yang mengandung kata tersebut.


Namun disini kata yang saya ketikan pada form hilang, dan ini akan membuat user yang menggunakan sistem kita kebingungan apakah dia sedang melihat seluruh data atau sedang melakukan pencarian, untuk mengatasi ini buka file userController dan pada method index tambahkan kode berikut.

Note: Disini kita menambahkan kode $request = $request->all() dan mengirimkannya ke view menggunakan compact.


Selanjutnya buka file index pada folder resources/views/user dan tambahkan code value=”{{ $request[‘search’] }}” pada input form sehingga menjadi seperti berikut.


Lalu kembali ke browser dan lakukan pencarian kembali, maka inputan yang kita masukkan pada form tidak lagi hilang ketika kita klik tombol search.



Sampai sini proses pembuatan fitur search dan pagination telah selesa, jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form dibawah, semoga artikel ini bermanfaat bagi teman-teman.


 Terima Kasih...


By : Muhammad Agus Hermawan
Jombang Dev Software Developer

Belum ada Komentar untuk "Membuat Fitur Search dan Pagination di Laravel 8"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel