Indonesia

Tutorial Laravel

Laravel - Personalisasi Penggunaan Halaman

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

Laravel - Pagination Customizations

Apa Itu Penggunaan Halaman?

Sebelum kita melompat ke personalisasi, mari kita pahami apa itu penggunaan halaman. Bayangkan Anda punya buku dengan ratusan halaman. Membacanya semua sekaligus pasti akan membuat Anda merasa lelah, kan? Itu di mana penggunaan halaman memainkan perannya. Dalam pengembangan web, penggunaan halaman adalah seperti membagi bukunya menjadi bagian yang mudah dimanage, menampilkan jumlah item terbatas per halaman.

Laravel, kerangka kerja superhero kita, datang dengan fitur penggunaan halaman bawaan yang membuat hidup kita mudah. Tetapi kadang-kadang, kita ingin menambahkan keunikan sendiri ke hasil penggunaan halaman ini. Itu di mana personalisasi sangat berguna!

Penggunaan Halaman Dasar di Laravel

Mari kita mulai dengan contoh sederhana tentang cara penggunaan halaman bekerja di Laravel:

$users = User::paginate(15);

Baris kode ini mengambil pengguna dari basis data dan menggunaannya, menampilkan 15 pengguna per halaman. Itu seperti magik, bukan? Tetapi apa jika kita ingin membuat penggunaan halaman ini terlihat lebih indah? Itu di mana perjalanan personalisasi kita dimulai!

Personalisasi Tampilan Penggunaan Halaman

Langkah 1: Publikasi Tampilan Penggunaan Halaman

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

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

Perintah ini adalah seperti memberitahu Laravel, "Hei, saya ingin melihat file penggunaan halaman ini sehingga 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 penggunaan halaman Anda terlihat.

Ini adalah personalisasi 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

{{-- Element Penggunaan 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 pertama kalinya, tapi mari kita pecahkannya:

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

Penyusunan gaya Penggunaan Halaman

Sekarang kita telah mempersonalisasi struktur penggunaan 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 penggunaan halaman Anda penampilan yang bersih dan modern. Itu seperti memberikan pakaian kemasan bagi kode Anda!

Personalisasi Tingkat Lanjut

Personalisasi Penggunaan Halaman Menggunakan Penampil

Untuk personalisasi tingkat lanjut, Laravel memungkinkan kita untuk membuat penampil 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>';
}
}
  1. Gunakan penampil ini di kontroler Anda:
use App\Http\Presenters\CustomPaginationPresenter;

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

return view('users.index', compact('users', 'presenter'));
}
  1. Dalam tampilan Anda, gunakan penampil ini:
{!! $presenter->render() !!}

Kesimpulan

Selamat! Anda baru saja belajar bagaimana mempersonalisasi penggunaan halaman di Laravel. Dari modifikasi dasar hingga penampil tingkat lanjut, Anda sekarang memiliki kekuatan untuk membuat hasil penggunaan halaman Anda terlihat seperti yang Anda inginkan.

Ingat, kunci untuk menguasai konsep ini adalah praktik. Cobalah membuat gaya berbeda, eksperimen dengan penampil, dan yang paling penting, bersenang-senang dengan itu! Penggunaan halaman mungkin tampak kecil, tetapi itu dapat meningkatkan pengalaman pengguna aplikasi Anda secara besar.

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

Metode Deskripsi
paginate() Metode penggunaan halaman dasar
vendor:publish Publikasi tampilan penggunaan halaman
hasPages() Periksa jika ada halaman yang banyak
onFirstPage() Periksa jika di halaman pertama
previousPageUrl() Dapatkan URL untuk halaman sebelumnya
nextPageUrl() Dapatkan URL untuk halaman selanjutnya
currentPage() Dapatkan nomor halaman saat ini
hasMorePages() Periksa jika ada halaman lainnya

Terus kode, terus belajar, dan ingat – setiap pengembang hebat dimulai dari level pemula. Anda sedang dalam perjalanan untuk menjadi ahli penggunaan halaman Laravel!

Credits: Image by storyset

Tutorial Sebelumnya:
Laravel - Perintah Artisan
Tutorial Selanjutnya:
Laravel - Server Dump