Laravel ve Livewire ile “Load More” Tarzı Sayfalama

Bir Laravel projesinde, Livewire kullanarak, hiç javascript yazmadan “load more” tarzında sayfalama yapmak mümkün. Bu yazımda, bir buton yardımıyla, belirtilen sayıda yeni kaydın sayfaya nasıl yükleneceğini anlatacağım. Aşağıdaki işlemler, hali hazırda kurulu olan bir Laravel 8 projesi üzerinde gerçekleştirilmektedir.

Öncelikle Livewire hakkında detaylı bilgi almak isteyenler buradan dökümantasyonu inceleyebilirler.

Konuyu anlatırken kullanacağım örnekte, bir blog sitesinde yazıların listelendiği posts sayfası olacak. Listenin en altında, son yazıdan hemen sonra bir buton yer alacak. Bu butona tıklandığında, sonraki 10 yazı sayfaya yüklenecek. En alta inerek tekrar tıklandığında da sonraki yazılar yüklenmeye devam edecekler.

“load more” tarzı sayfalama örneği

Öncelikle Livewire paketini projemize dahil etmemiz gerekiyor.

Bunun için terminalde aşağıdaki komutu çalıştırıyoruz;

$ composer require livewire/livewire

Paket kurulduktan sonra makalelerin listeleneceği sayfamız için gerekli Livewire component’ini oluşturuyoruz;

$ php artisan make:livewire blog-posts

Yukarıdaki komut, aşağıda belirtilen dosyaları oluşturacaktır;

- app/Http/Livewire/BlogPosts.php
- resources/views/livewire/blog-posts.blade.php

BlogPosts.php dosyasında, component sınıfımız yer alacak, blog-posts.blade.php sayfasında ise component’in html çıktısı yer alacak.

Şimdi, BlogPosts.php dosyasını açarak aşağıdaki kodları ekliyoruz;

<?php
namespace App\Http\Livewire;
use App\Models\Post;
use Livewire\Component;
use Illuminate\Support\Collection;
class BlogPosts extends Component
{
    public int $perPage = 10;
    public int $page = 1;
    public bool $loadMore = true;
    public Collection $posts;
    public function mount()
    {
        $posts = $this->getPosts();
        $this->posts = collect($posts->items());
    }
    public function loadMore()
    {
        $this->page++;
        $posts = $this->getPosts();
        foreach ($posts->items() as $post) {
            $this->posts->push($post->toArray());
        }
    }
    public function render()
    {
        return view('livewire.blog-posts');
    }
    private function getPosts()
    {
        $posts = Post::query()
            ->latest()
            ->paginate($this->perPage, ['*'], null, $this->page);
        if (!$posts->hasMorePages()) {
            $this->loadMore = false;
        }
        return $posts;
    }
}

Yukarıdaki kodu açıklayacak olursak; component sınıfı içerisinde 4 adet property bulunuyor;

• $perPage : Her bir defada kaç kayıt yükleneceği bilgisi,
• $page : Kaçıncı sayfaya ait kayıtların yükleneceği bilgisi,
• $loadMore : Son kayda gelip gelmediğimiz, dolayısıyla “load more” butonunun aktif olup olmama durumu,
• $posts : Sayfada göstereceğimiz kayıtlar.

Livewire’da mount() methodu, component yüklendiğinde gerçekleşecek işlemlerin tanımlandığı bölümdür. Burada, “blog yazıları” sayfası açıldığında, $page property’si 1 olduğundan, ekrana basılması için ilk 10 yazıyı çeker. Buradaki 10 sayısı, $perPage property’sinde tanımladığımız değerdir.

Yazılar veritabanından çekildikten sonra daha fazla kayıt olup olmadığını kontrol ediyoruz. Eğer yoksa $loadMore property’sinin değerini false olarak değiştiriyoruz. Bunu daha sonra “load more” butonunun enabled/disabled durumunu kontrol etmek için kullanacağız.

loadMore() methodunda ise, $page property’sini 1 artırıyoruz ve yeni sayfa numarasına ait kayıtları tekrar çekiyoruz. Dönen kayıtları $posts property’sine ekliyoruz. Kayıtlar getPosts() methodu ile çekildiği için, başka kayıt olup olmadığı tekrar kontrol edilmiş oluyor.

Şimdi gelelim ön yüz kısmına. /resources/views/livewire/blog-posts.blade.php dosyasını açarak aşağıdaki kodları ekliyoruz;

<div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Başlık</th>
            </tr>
        </thead>
        <tbody>
            @foreach($posts as $post)
                <tr>
                    <td>{{ $post['id'] }}</td>
                    <td>{{ $post['title'] }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <button wire:click="loadMore" @if(!$loadMore) disabled @endif>Load More</button>
</div>

Burada, BlogPosts component’inden gelen $posts property’sine ait tüm kayıtları döngü ile ekrana yazıyoruz. Load More butonuna her basıldığında, sayfa numarası 1 artacak ve sonraki sayfaya ait kayıtlar en alta eklenecektir.

Birçok blog sayfasında gördüğüm kadarıyla, bu konu, butona her tıklandığında $perPage property’sinin değerinin artırılması yöntemiyle anlatılmış. Örneğin her seferinde, sayfada gösterilecek kayıt sayısını 10 artırarak $perPage’i sürekli şişirmişler. Alternatif olarak bu yöntem de uygulanabilir ancak bu durumda her bir load işleminde, veritabanından çekilen kayıt sayısı artacaktır ve bir noktadan sonra sunucuyu yoracak seviyeye gelebilir. Dolayısıyla, her defasında bulunduğumuz sayfa numarasını verip aynı miktarda kayıt çekmek daha verimli olacaktır.