Berbeda dengan pagination, button load more merupakan suatu fitur yang akan memuat data lain tanpa meninggalkan halaman tersebut. Dengan membuat button ini, maka pengguna dapat dengan mudah menemukan data yang sedang mereka cari tanpa harus bolak balik halaman.
Hampir mirip dengan infinite scroll, membuat button load more agak lebih baik daripada infinite scroll. Ketika menggunakan infinite scroll maka akan menggunakan bandwidth yang lebih besar. Selain itu juga ketika menggunakan infinite scroll, itu artinya kita akan memuat data ketika di scroll dengan jumlah yang terus menerus. Contoh nya adalah pada sosial media seperti Facebook, instagram maupun tiktok.
Terlepas dari infinite scroll, pada kali ini saya akan mencoba memberikan tutorial tentang cara membuat button load more untuk menampilkan daftar negara di framework laravel versi 9 dengan bantuan framework livewire versi 2 (ketika saya membuat tutorial ini, dan saya baru tau kalau livewire merupakan framework php) dan framework bootstrap versi 3 untuk design tampilan.
Pada saat ini saya tidak akan menjelaskan dari menginstall project laravel. Karena menurut saya diluar topik. Maka dari itu pastikan sudah membuat project laravel, database beserta isi nya atau data faker, telah mendefinisikan Route(), mengatur model dan controller. Berikut langkah-langkahnya:
Install Livewire dan Buat Component
Pada kali ini sayang akan menginstall Livewire dengan menggunakan composer di terminal. Dengan begitu pastikan telah menginstall composer sebelumnya.
composer require livewire/livewire
Lalu buatlah component livewire nya pada terminal dengan perintah seperti dibawah ini. Dan jangan lupa mengganti “Nama Komponen” sesuai selera
php artisan make:livewire Nama-Komponen
Setelah menambahkan kode tersebut, maka otomatis dalam app/Http/ akan tersedia komponen livewire. Fungsinya yaitu membuat logika atau semacamnya. Tidak hanya itu saja, pada resources/views akan terdapat sebuah template blade yang berguna untuk menampilkan komponen pada halaman web.
Buatlah Directive @livewire
Pada awalnya saya menggunakan welcome.blade.php untuk menampung komponen livewire. Lalu di dalam tag <body> nya saya akan meletakan directive @livewire(‘load-data’, [‘data’ => $data]), @livewireStyles sebelum penutup tag </head> dan @livewireScripts sebelum penutup </body>.
- ‘load-data’ adalah nama file blade komponen livewire saya, yaitu load-data.blade.php .
- [‘data’ => $data ] untuk mengirim $data yang saya ambil pada controller. Lalu $data saya kirim ke komponen sebagai ‘data’ juga.
- @livewireStyles directive untuk menambahkan komponen style dari livewire ke dalam header web
- @livewireScripts directive untuk menambahkan komponen script dari livewire ke bagian bawah web
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button Load More</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
@livewireStyles
</head>
<body class="container">
<h1 class="text-center mt-2 mb-4">Button Load More</h1>
@livewire('load-data', ['data' => $data])
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
@livewireScripts
</body>
</html>Membuat Tampilan Komponen di Blade
Kemudian silahkan buat tampilannya pada file load-data.blade.php yang ada dalam resources/livewire/. Pada tampilan kali ini saya menggunakan laravel dan gambar dummy. Berikut penjelasannya:
- @foreach () membuat perulangan data pada yang dikirim melalui komponen logika
- $loop->first dan $loop-last sebagai pengecekan, jika perulangan pertama dan terakhir makan menampilkan {{ $loop->count }} of {{ $total }}
- {{ $loop->count }} of {{ $total }} menampilkan Jumlah data yang telah ter-loop dan total data ($total dikirim dari komponen logika
- $loop->iteration menampilkan urutan loop
- $item->country menampilkan data yang sudah terloop dan berdasarkan column “country”.
- @if ($total > $loop->count) sebagai pengecekan ketika total data lebih besar(banyak) dari jumlah item yang sudah terloop maka memunculkan tombol load more dan semua yang ada di dalam if nya.
- wire:click=”” adalah yang terpenting. Akan memberikan event seperti addEventListener(‘click’ , ()=>{}). Dengan arti lain ketika button tersebut terklik maka akan menjalankan method load More() pada komponen logika.
- wire:loading untuk menampilkan elemen tersebut ketika livewire sedang loading.
<main class="my-5">
<div class="row g-2">
@foreach ($dataRes as $item)
@if ($loop->first)
<p class="p-0 m-0 fw-semibold">Showing {{ $loop->count }} of {{ $total }}</p>
@endif
<div class="col-sm-2 col-lg-3 col-xl-4">
<div class="card">
<img src="https://dummyimage.com/1600x900/000/fff" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $loop->iteration .'. '. $item->country }}</h5>
<p class="card-text">Country name......</p>
<a href="#" class="btn btn-outline-primary">Go somewhere</a>
</div>
</div>
</div>
@if ($loop->last)
<p class="p-0 m-0 fw-semibold">Showing {{ $loop->count }} of {{ $total }}</p>
<div class="d-flex justify-content-center align-items-center mt-5">
@if ($total > $loop->count)
<button class="btn btn-primary me-5" wire:click="loadMore">Load More</button>
<div wire:loading class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span wire:loading class="ms-3">Load {{ $itemPerLoop }} ...</span>
@endif
</div>
@endif
@endforeach
</div>
</main>Membuat Logika Livewire
Bagian yang terpenting terakhir dalam membuat logika. Ketika sudah menulis perintah untuk membuat komponen, maka defaultnya file komponen sudah berisi method render(). Berikut penjelasan perbarinya:
- public $loopItem sebagai penampung jumlah looping. Akan bertambah setiap anda melakukan klik.
- public $itemPerLoop sebagai penampung nilai tetap per looping setiap terklik
- public $data menampung nilai dari method mount($data) di bawahnya. Parameter $data pada method mount($data) dikirim dari komponen blade sebelumnya. Lebih tepatnya pada @livewire(‘load-data’, [‘data’ => $data]) file load-data.blade.php
- $this->data = $data mengambil nilai dalam parameter mount($data) dan menampungnya ke public $data sebelumnya. Di sini kebetulan saya menggunakan nama yang sama.
- render() merupakan method penting dalam livewire untuk menampilkan data ke dalam tampilan web. Yang di dalamnya akan return ‘livewire/load-data’ (merujuk pada resources/views/livewire/load-data.blade/php ) dan array yang akan dikirim ke dalam blade tersebut
- $dataRes menampung nilai dari public $data dengan catatan terbatas sebanyak loop yang di atas
- $total sesuai dengan namanya yaitu menampilkan total semua baris data yang ada pada public $data
- function load More disini merupakan method yang ditargetkan oleh wire:click=”” pada blade sebelumnya. Ini akan tereksekusi ketika tombol load more nya terklik.
- $this->loopItem += $this->itemPerLoop nilai dari public $loopItem akan bertambah setiap terklik, sebanyak nilai dari public $itemPerLoop(3)
- sleep(2) memberi jeda eksekusi ketika tombol diklik selama 2 detik. Dengan tujuan agar efek loading nya sedikit lama.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class LoadData extends Component
{
public $loopItem = 3;
public $itemPerLoop = 3;
public $data;
public function mount($data)
{
$this->data = $data;
}
public function render()
{
$dataRes = $this->data->take($this->loopItem);
return view('livewire.load-data' , [
'dataRes' => $dataRes,
'total' => $this->data->count(),
]);
}
public function loadMore(){
$this->loopItem += $this->itemPerLoop;
sleep(2);
}
}
Ketika ingin menampilkan data yang banyak pada website, saya tidak menganjurkan untuk menampilkan menyeluruh secara langsung. Bisa dengan menggunakan infinite scroll, pagination hingga membuat button load more dengan kelebihan dan kekurangan pada masing-masing fitur. Untuk itu salah lebih menyarankan button, karena alasan sebagai berikut:
- Tidak perlu bolak balik halaman
- Menggunakan bandwidth internet yang lebih sedikit
- Data yang muncul lebih konsisten jumlahnya
Akhir kata, demikian tutorial membuat button load more yang telah saya berikan. Semoga bermanfaat kepada teman-teman. Apabila sedang mencari tutorial lainnya, mungkin kamu menyukai ini Cara ubah Judul Web ketika Pindah Tab di Js.