Laravel - Anpassungen bei der Paginierung

Hallo, ambitionierte Entwickler! Heute tauchen wir ein in die zauberhafte Welt der Laravel-Paginierungsanpassungen. Als dein freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, dich auf dieser Reise zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen mit den Grundlagen und arbeiten uns hoch. Also, hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

Laravel - Pagination Customizations

Was ist Paginierung?

Bevor wir uns den Anpassungen zuwenden, lassen wir uns erst mal anschauen, was Paginierung ist. Stell dir vor, du hast ein Buch mit hunderten von Seiten. Alle auf einmal zu lesen wäre überwältigend, oder? Genau da kommt die Paginierung ins Spiel. In der Webentwicklung teilt man das Buch in handhabbare Abschnitte auf, zeigt eine begrenzte Anzahl von Elementen pro Seite an.

Laravel, unser Superhelden-Framework, bringt eingebauten Paginierungsfunktionen mit, die unser Leben einfacher machen. Aber manchmal möchten wir diesen paginierten Ergebnissen unseren eigenen Stil hinzufügen. Genau hier kommen die Anpassungen ins Spiel!

Grundlegende Paginierung in Laravel

Lassen wir mit einem einfachen Beispiel beginnen, wie die Paginierung in Laravel funktioniert:

$users = User::paginate(15);

Diese Codezeile holt Benutzer aus der Datenbank und paginiert sie, zeigt 15 Benutzer pro Seite an. Magisch, oder? Aber was, wenn wir diese Paginierung schöner aussehen lassen möchten? Das ist, wo unsere Anpassungsreise beginnt!

Anpassung der Paginierungsansicht

Schritt 1: Veröffentlichen der Paginierungsansichten

Zuerst müssen wir die Laravel-Paginierungsansichten veröffentlichen. Keine Sorge, das ist einfacher als es klingt! Führe diesen Befehl in deinem Terminal aus:

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

Dieser Befehl sagt Laravel im Grunde "Hey, ich möchte diese Paginierungsdateien sehen, damit ich sie anpassen kann!"

Schritt 2: Anpassung der Ansicht

Navigiere jetzt zu resources/views/vendor/pagination. Hier findest du mehrere Dateien. Konzentrieren wir uns auf default.blade.php. Diese Datei kontrolliert, wie deine Paginierungslinks aussehen.

Hier ist eine einfache Anpassung:

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

{{-- Paginierungselemente --}}
@foreach ($elements as $element)
{{-- "Drei Punkte" Trennzeichen --}}
@if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
@endif

{{-- Array von Links --}}
@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

{{-- Nächster Seitenlink --}}
@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

Dieser Code mag auf den ersten Blick einschüchternd wirken, aber lassen wir uns das genauer ansehen:

Wir prüfen, ob es mehrere Seiten gibt ($paginator->hasPages()).
Wir erstellen eine Navigation mit einer unsortierten Liste.
Wir fügen einen "Vorherigen" Link hinzu, wenn wir nicht auf der ersten Seite sind.
Wir durchlaufen die Paginierungselemente und fügen Links für jede Seite hinzu.
Wir fügen einen "Nächsten" Link hinzu, wenn es mehr Seiten gibt.

Gestaltung deiner Paginierung

Nun, da wir die Struktur unserer Paginierung angepasst haben, lassen wir sie hübsch aussehen! Füge einige CSS-Regeln zu deiner Stylesheet hinzu:

.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;
}

Diese CSS-Regeln verleihen deiner Paginierung ein sauberes, modernes Aussehen. Es ist, als hättest du deinem Code einen schönen Anzug angezogen!

Erweiterte Anpassungen

Anpassung der Paginierung mit Presenter

Für erweiterte Anpassungen ermöglicht Laravel die Erstellung eines benutzerdefinierten Presenters. Lassen wir uns einen erstellen:

Erstelle eine neue Datei 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>';
}
}

Verwende diesen benutzerdefinierten Presenter in deinem Controller:

use App\Http\Presenters\CustomPaginationPresenter;

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

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

In deiner Ansicht verwende den benutzerdefinierten Presenter:

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

Fazit

Glückwunsch! Du hast gerade gelernt, wie man die Paginierung in Laravel anpasst. Vom Grundlagen bis hin zu erweiterten Presentern hast du jetzt die Macht, deine paginierten Ergebnisse so zu gestalten, wie du möchtest.

Denke daran, der Schlüssel zum Beherrschen dieser Konzepte ist die Übung. Versuche verschiedene Stile zu erstellen, experimentiere mit dem Presenter und vor allem, habe Spaß dabei! Paginierung mag ein kleines Detail sein, aber sie kann das Benutzererlebnis deiner Anwendung erheblich verbessern.

Zum Abschluss hier eine Tabelle, die die von uns besprochenen Methoden zusammenfasst:

Methode	Beschreibung
`paginate()`	Grundlegende Paginierungsmethode
`vendor:publish`	Veröffentlicht Paginierungsansichten
`hasPages()`	Prüft, ob es mehrere Seiten gibt
`onFirstPage()`	Prüft, ob auf der ersten Seite
`previousPageUrl()`	Bekommt URL für die vorherige Seite
`nextPageUrl()`	Bekommt URL für die nächste Seite
`currentPage()`	Bekommt die aktuelle Seitennummer
`hasMorePages()`	Prüft, ob es mehr Seiten gibt

Weiterschreiben, weiterlernen und daran denken – jeder großartige Entwickler hat als Anfänger begonnen. Du bist auf dem Weg, ein Laravel-Paginierungsprofi zu werden!

Credits: Image by storyset

Vorheriges Tutorial:

Laravel - Artisan-Befehle

Nächstes Tutorial:

Laravel - Dump-Server