Membuat Paginasi dan Data Palsu

Pada tutorial ini Anda akan membuat paginasi dan data palsu, tentu adanya paginasi membuat halaman menjadi lebih ringan karena dari 100 data di pecah dari 15 perhalaman misalnya. Sedangkan data palsu agar Anda tidak menambahkan data secara manual dan itu satu-satu dan itu sangat melelahkan. Adanya hal tersebut Anda bisa mengetes data dengan data palsu yang bisa berapa banyak data yang mau di buat misalnya 100 data. Tetapi kalau Anda ingin 1000 data saya sarankan cukup 100 saja, karena semakin banyak data akan lama prosesnya.

Daftar isi:

Langkah 1 - Membuat Paginasi

Skrip di bawah ini adalah komponen dari paginasi yang akan Anda buat. Sekarang buatlah berkas baru bernama pagination.blade.php pada direktori ../views/layouts, kemudian salin dan tempelkan skrip di bawah ini.

@if ($paginator->hasPages())
    <nav class="pagination is-rounded">

        @if ($paginator->onFirstPage())
            <a class="pagination-previous" disabled>
                {!! __('pagination.previous') !!}
            </a>
        @else
            <a href="{{ $paginator->previousPageUrl() }}" class="pagination-previous">
                {!! __('pagination.previous') !!}
            </a>
        @endif

        @if ($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" class="pagination-next">
                {!! __('pagination.next') !!}
            </a>
        @else
            <a class="pagination-next" disabled>
                {!! __('pagination.next') !!}
            </a>
        @endif

        <ul class="pagination-list">
            @foreach ($elements as $element)
            
                @if (is_string($element))
                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                @endif

                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li>
                                <a class="pagination-link is-current">
                                    {{ $page }}
                                </a>
                            </li>
                        @else
                            <li>
                                <a href="{{ $url }}" class="pagination-link">
                                    {{ $page }}
                                </a>
                            </li>
                        @endif
                    @endforeach
                @endif

            @endforeach
        </ul>

    </nav>
@endif

Saya akan menjelaskan skrip di bawah ini yang mana hampir sama dengan bagian $paginator->hasMorePages(). Tetapi skrip di bawah ini untuk tombol sebelumnya.

@if ($paginator->onFirstPage())
    <a class="pagination-previous" disabled>
        {!! __('pagination.previous') !!}
    </a>
@else
    <a href="{{ $paginator->previousPageUrl() }}" class="pagination-previous">
        {!! __('pagination.previous') !!}
    </a>
@endif

Jika halaman berada pada halaman 1 yang terdapat kolom paginasi sebanyak 4 angka yang di mulai dari 1 sampai 4. Maka tombol sebelumnya akan disabled dan begitu sebaliknya, tentu jika tidak disabled maka akan bisa di tekan tombolnya untuk pindah ke halaman sebelumnya. Hal tersebut berlaku sama dengan tombol selanjutnya jika halaman berada pada halaman 4 maka tombol selanjutnya akan disabled.

Setiap pindah ke halaman dari ke halaman lain maka setiap tombol halaman harus menunjukan tanda. Agar Anda tahu sekarang ini berada di halaman berapa, maka $paginator->currentPage() adalah penentu di mana halaman saat ini. Jadi akan menambahkan tanda yang berupa kelas CSS is-current. Jika di halaman saat ini tombol juga tidak bisa di klik, karena tidak memiliki tautan (href).

@if ($page == $paginator->currentPage())
    <li>
        <a class="pagination-link is-current">
            {{ $page }}
        </a>
    </li>
@else
    <li>
        <a href="{{ $url }}" class="pagination-link">
            {{ $page }}
        </a>
    </li>
@endif
Tahap 1 - Konfigurasi Paginasi

Agar paginasi dapat digunakan maka dari itu Anda harus melakukan konfigurasi paginasi tersebut menganti paginasi bawaan Laravel. Caranya bisa buka berkas AppServiceProvider.php pada direktori app/providers. Sesuaikanlah dengan skrip di bawah ini.

// ...

use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    // ...

    public function boot()
    {
        Paginator::defaultView('layouts.pagination');
    }
}

Langkah 2 - Membuat Data Palsu

Pasti Anda akan bertanya ni apa sih data palsu yang dimaukan, jadi seperti ini. Kalau Anda tahu kalau di Laravel memiliki fitur factory atau pabrik 😅, yaahh! sebenarnya itu adalah pabrik model. Jadi menggunakan fitur tersebut untuk tujuan testing atau pengujian aplikasi melalui data-data yang palsu. Adanya hal tersebut Anda tidak perlu lagi menyimpan data secara manual dan satu-satu dan tentu akan merepotkan Anda sebagai pengembang.

Karena model Product yang belum memiliki berkas factory, maka Anda harus membuatnya dengan cara di bawah ini.

$ php artisan make:factory Product
Tahap 1 - Membuat Skrip

Setelah berhasil membuat berkas factory model Product sekarang bukalah berkas tersebut di direktori database/factories yang bernama ProductFactory.php. Kemudian salin dan sesuaikan dengan skrip di bawah ini.

return [
    'title' => $this->faker->sentence(),
    'description' => $this->faker->paragraph(),
    'stock' => $this->faker->randomNumber(3, true)
];

Anda bisa mempelajari hal tersebut dengan mudah dan sudah memiliki dokumentasi yang lengkap pada tautan berikut Faker PHP.

Tahap 2 - Menambah Data Palsu

Sekarang cukup ikuti langkah-langkah di bawah ini pada terminal Anda untuk memulai membuat data palsu.

# 1
php artisan tinker
# 2
Product::factory()->count(50)->create();
# 3
exit

Catatan: Jadi Anda bisa menyetel jumlah data palsu yang akan di buat dengan mengubah count(100) misalnya. Semakin banyak jumlahnya akan semakin lama proses tunggunya.