Laravel - Penyesuaian Halaman

Hai, para pengembang berbakat! Hari ini, kita akan melihat dunia yang menakjubkan penyesuaian halaman (pagination) di Laravel. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda baru dalam pemrograman – kita akan mulai dari dasar dan naik tingkat per tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu Halaman?

Sebelum kita melompat ke penyesuaian, mari kitaahui apa itu halaman. Bayangkan Anda punya buku dengan ratusan halaman. Membacanya semua sekaligus akan membuat Anda merasa lemas, kan? Itu adalah tempat halaman berada. Dalam pengembangan web, halaman adalah hal yang membagi buku Anda menjadi bagian yang mudah diatasi, menampilkan jumlah item terbatas per halaman.

Laravel, framework superhero kita, datang dengan fitur halaman bawaan yang membuat hidup kita lebih mudah. Tetapi kadang-kadang, kita ingin menambahkan keunikan sendiri ke hasil halaman. Itu adalah tempat penyesuaian berguna!

Halaman Dasar di Laravel

Mari kita mulai dengan contoh sederhana bagaimana halaman bekerja di Laravel:

$users = User::paginate(15);

Baris kode ini mengambil pengguna dari database dan memhalamannya, menampilkan 15 pengguna per halaman. Itu seperti magis, kan? Tetapi apa jika kita ingin membuat halaman ini terlihat lebih indah? Itu tempat perjalanan penyesuaian kita dimulai!

Menyesuaikan Tampilan Halaman

Langkah 1: Mengeluarkan Tampilan Halaman

Pertama, kita perlu menerbitkan tampilan halaman Laravel. Jangan khawatir; itu lebih mudah daripada yang Anda pikirkan! Jalankan perintah ini di terminal Anda:

php artisan vendor:publish --tag=laravel-pagination

Perintah ini adalah seperti mengatakan ke Laravel, "Hey, saya ingin melihat file halaman itu agar saya dapat mengubahnya!"

Langkah 2: Mengubah Tampilan

Sekarang, buka resources/views/vendor/pagination. Anda akan menemukan beberapa file di sini. Fokuskan pada default.blade.php. File ini mengontrol bagaimana tautan halaman Anda terlihat.

Ini adalah penyesuaian sederhana:

@if ($paginator->hasPages())
<nav>
<ul class="pagination">
{{-- Tautan Halaman Sebelumnya --}}
@if ($paginator->onFirstPage())
<li class="disabled"><span>&laquo;</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
@endif

{{-- Elemen Halaman --}}
@foreach ($elements as $element)
{{-- "Tiga Titik" Pemisah --}}
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif

{{-- Array Dari Tautan --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active"><span>{{ $page }}</span></li>
@else
<li><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach

{{-- Tautan Halaman Selanjutnya --}}
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a></li>
@else
<li class="disabled"><span>&raquo;</span></li>
@endif
</ul>
</nav>
@endif

Kode ini mungkin terlihat menakutkan pada awalnya, tapi mari kitauraikan:

1. Kita periksa jika ada halaman yang banyak ($paginator->hasPages()).
2. Kita buat navigasi dengan daftar tak terurut.
3. Kita tambahkan tautan "Sebelumnya" jika kita tidak di halaman pertama.
4. Kita loop melalui elemen halaman, menambahkan tautan untuk setiap halaman.
5. Kita tambahkan tautan "Selanjutnya" jika ada halaman lainnya.

Menyusun Halaman

Sekarang kita sudah menyesuaikan struktur halaman, mari kita buatnya terlihat cantik! Tambahkan beberapa CSS ke stylesheet Anda:

.pagination {
display: flex;
list-style: none;
padding: 0;
}

.pagination li {
margin: 0 5px;
}

.pagination li a {
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ddd;
color: #333;
}

.pagination li.active span {
background-color: #007bff;
color: white;
padding: 5px 10px;
border: 1px solid #007bff;
}

.pagination li.disabled span {
color: #ccc;
padding: 5px 10px;
border: 1px solid #ddd;
}

CSS ini akan memberikan halaman Anda penampilan yang bersih dan modern. Itu seperti memberikan kode Anda pakaian khusus!

Penyesuaian Tingkat Lanjut

Penyesuaian Halaman Menggunakan Presenter

Untuk penyesuaian yang lebih tingkat lanjut, Laravel mengijinkan kita membuat presenter khusus. Mari kita buat satu:

1. Buat file baru app/Http/Presenters/CustomPaginationPresenter.php:

<?php

namespace App\Http\Presenters;

use Illuminate\Pagination\BootstrapPresenter;

class CustomPaginationPresenter extends BootstrapPresenter
{
public function render()
{
if (!$this->hasPages()) {
return '';
}

return sprintf(
'<div class="custom-pagination">%s %s %s</div>',
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);
}

protected function getAvailablePageWrapper($url, $page, $rel = null)
{
$rel = is_null($rel) ? '' : ' rel="' . $rel . '"';

return '<span class="page-item"><a class="page-link" href="' . $url . '"' . $rel . '>' . $page . '</a></span>';
}

protected function getDisabledTextWrapper($text)
{
return '<span class="page-item disabled"><span class="page-link">' . $text . '</span></span>';
}

protected function getActivePageWrapper($text)
{
return '<span class="page-item active"><span class="page-link">' . $text . '</span></span>';
}
}

2. Gunakan presenter ini di controller Anda:

use App\Http\Presenters\CustomPaginationPresenter;

public function index()
{
$users = User::paginate(15);
$presenter = new CustomPaginationPresenter($users);

return view('users.index', compact('users', 'presenter'));
}

3. Dalam tampilan Anda, gunakan presenter ini:

{!! $presenter->render() !!}

Kesimpulan

Selamat! Anda baru saja belajar bagaimana menyesuaikan halaman di Laravel. Dari modifikasi dasar hingga presenter tingkat lanjut, Anda sekarang memiliki kekuatan untuk membuat hasil halaman Anda tampak seperti yang Anda inginkan.

Ingat, kunci untuk menguasai konsep ini adalah latihan. Cobalah membuat gaya berbeda, eksperimen dengan presenter, dan terutama, bersenang-senang dengan itu! Halaman mungkin tampak kecil, tetapi itu dapat meningkatkan pengalaman pengguna aplikasi Anda secara besar.

Sebagai penutup, ini adalah tabel yang menggabungkan metode yang kita pelajari:

Metode	Deskripsi
paginate()	Metode halaman dasar
vendor:publish	Mengeluarkan tampilan halaman
hasPages()	Memeriksa jika ada halaman yang banyak
onFirstPage()	Memeriksa jika di halaman pertama
previousPageUrl()	Mendapatkan URL halaman sebelumnya
nextPageUrl()	Mendapatkan URL halaman selanjutnya
currentPage()	Mendapatkan nomor halaman saat ini
hasMorePages()	Memeriksa jika ada halaman lainnya

Terus coding, terus belajar, dan ingat – setiap pengembang yang hebat mulai dari level pemula. Anda sedang dalam perjalanan menjadi ahli halaman di Laravel!

Credits: Image by storyset