Dokončenie paginace (stránkovanie) v PHP

V minulom tutoriále o tvorbe paginace (stránkovanie) v PHP sme si založili databázu s 1000 testovacími automobilmi a popísali sme si, ako by mal fungovať helper, ktorý bude zobrazovať našu paginaci. V dnešnom dieli aplikácii dokončíme.

Paginace.php

Vytvorte si súbor paginace.php, do ktorého vložíme funkcie pre výpis navigačnej lišty s číslami stránok:

<?php

function urlStrany($url, $strana)
{
    return str_replace('{strana}', $strana, $url);
}

function paginace($strana, $stran, $url)
{
    $polomer = 5; // Poloměr oblasti kolem aktuální stránky
    $html = '<nav class="centrovany"><ul class="paginace">';
    // Šipka vlevo
    if ($strana > 1)
        $html .= '<li><a href="' . urlStrany($url, $strana - 1) . '">&laquo;</a></li>';
    else
        $html .= '<li class="neaktivni">&laquo;</li>';
    $left = $strana - $polomer >= 1 ? $strana - $polomer : 1;
    $right = $strana + $polomer <= $stran ? $strana + $polomer : $stran;
    // Umístění jedničky
    if ($left > 1)
        $html .= '<li><a href="' . urlStrany($url, 1) . '">1</a></li>';
    // Tečky vlevo
    if ($left > 2)
        $html .= '<li class="neaktivni">&hellip;</li>';
    // Stránky v radiusu
    for ($i = $left; $i <= $right; $i++)
    {
        if ($i == $strana) // Aktivní stránka
            $html .= '<li class="aktivni">' . $i . '</li>';
        else
            $html .= '<li><a href="' . urlStrany($url, $i) . '">' . $i . '</a></li>';
    }
    // Tečky vpravo
    if ($right < $stran - 1)
        $html .= '<li class="neaktivni">' . '&hellip;' . '</li>';
    // Umístění poslední stránky
    if ($right < $stran)
        $html .= '<li><a href="' . urlStrany($url, $stran) . '">' . $stran . '</a></li>';
    // Šipka vpravo
    if ($strana < $stran)
        $html .= '<li><a href="' . urlStrany($url, $strana + 1) . '">&raquo;</a></li>';
    else
        $html .= '<li class="neaktivni">&laquo;</li>';
    $html .= '</ul></nav>';
    return $html;
}

Súbor obsahuje 2 funkcie. Prvá funkcia vráti URL adresu pre prechod na danú stránku a to tak, že prevezme URL adresu so značkou {strana} a na miesto tejto značky vloží číslo danej stránky. Keď funkciu pošleme parametre:

['index.php?strana={strana}', 2]

Vráti nám:

index.php?strana=2

Týmto spôsobom budeme generovať odkazy na stránky, aby bol súbor paginace.php univerzálne a mohli sme ho použiť pre akýkoľvek tvar URL, napr. Zamestnanci.php? Stranka = {strana}.

Druhá funkcia vygeneruje HTML kód navigačnej lišty a to podľa aktuálnej stránky a počtu stránok. V premennej $ polomer sa nachádza informácia koľko stránok chceme okolo aktuálnej stránky zobrazovať. Postupne vložíme šípku vľavo, 1. stránku, bodky, rozsah strán okolo tej aktuálnej, bodky a šípku vpravo. Všimnite si, že je navigácia kvôli sémantike vložená v elemente

Styl.css

Založte si súbor styl.css, do ktorého vložíme niečo k nastylování lišty.

/*
 Paginace
*/

ul.paginace li {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #DDDDDD;
    margin-left: -1px;
    text-align: center;
}

ul.paginace li:hover {
    background: #fAfAfA;
}

ul.paginace li.neaktivni {
    color: #DDDDDD;
}

ul.paginace li.aktivni {
    color: white;
    background: #3b94e0;
}

ul.paginace a {
    text-decoration: none;
}

/*
 Ostatní
*/

.centrovany {
    text-align: center;
}

Zaujímavá je zmena display na inline-block, čo zapríčiní, že sa položky v zozname radí za seba a tiež trik s margin-left: -1px, čo spôsobí spojenie rámčekov susediacich položiek do jedného.

Rovno do štýlu dodajme aj jednoduché štýlovanie tabuľky, do ktorej budeme automobily vypisovať:

/*
 * Tabulka
 */

.tabulka {
    width: 100%;
    color: #444444;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #C9CBCD;
}

.tabulka th, .tabulka td {
    padding:5px;
    border-collapse: collapse;
    border: 1px solid #C9CBCD;
}

.tabulka th {
    color: black;
    background: #f5f5f5;
}

.tabulka tr:nth-child(2n) {
    background-color: #F6F6F6;
}

Zaujímavé ide tu asi len prúžkovanie pomocou selektora .tabulka tr: nth-child (2n), ktorý vyberie každý druhý riadok.

Index.php

Konečne sa dostávame k hlavnému skriptu. Sprvu si načítame databázovú knižnicu a helper pre zobrazenie paginační lišty. Pripojíme sa k databáze:

<?php
require('Db.php');
require('paginace.php');
Db::connect('localhost', 'automobilka', 'root', '');

Ďalej si pripravíme 2 funkcie (objektovo zdatní si vytvorí nejaký SpravceAutomobilu, v ktorom budú tieto 2 metódy umiestnené).

function vratAutomobily($strana, $naStranu)
{
    return Db::queryAll('SELECT * FROM automobil ORDER BY vyrobeno DESC LIMIT ?, ?', ($strana - 1) * $naStranu, $naStranu);
}

Funkcia vratAutomobily () vráti automobilmi na základe aktuálnej stránky a počtu automobilov na stranu. V SQL dotazu sa nám objavila klauzuly nastavujúce LIMIT a OFFSET. Offset nastavíme na ($ strana - 1) * $ NASTRAN, pretože stránky číslujeme od jednotky a chceme preskočiť toľko položiek, koľko máme pred sebou stránok * počet položiek na jednej stránke. Limit je $ NASTRAN, to je koľko chceme po preskočení položiek vybrať. U dotazu nesmieme zabudnúť na radenie ORDER BY, inak by nám prišli výsledky zakaždým inak rozhádzané a stránkovanie by nedávalo zmysel.

function vratPocetAutomobilu()
{
    return Db::querySingle('SELECT COUNT(*) FROM automobil');
}

Funkcia vratPocetAutomobilu () vráti celkový počet všetkých automobilov v databáze. Ten potrebujeme preto, aby sme mohli paginační lište odovzdať celkový počet stránok. Na akcii teda potrebujeme 2 databázové otázky, nemožno ju efektívne vykonať jedným, pretože chceme 2 odlišné veci.

Číslo stránky budeme odovzdávať pomocou $ _GET. Pokiaľ nie je zadaná, budeme predpokladať prvú stranu. Následne si vytvoríme premennej $ NASTRAN s počtom položiek na stránku, ďalej $ automobily s automobilmi na zobrazované stránke a $ strán a celkovým počtom strán. Ten zistíme tým, že celkový počet automobilov vydelíme $ NASTRAN a zaokrúhlime nahor funkcií ceil (pretože 1,5 strany sú 2 strany ).

if (isset($_GET['strana']))
    $strana = $_GET['strana'];
else
    $strana = 1;
$naStranu = 15;
$automobily = vratAutomobily($strana, $naStranu);
$stran = ceil(vratPocetAutomobilu() / $naStranu);
?>

Za kód umiestnime časť šablóny pre výpis tabuľky a paginační lišty:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Automobily</title>
        <link rel="stylesheet" href="styl.css" type="text/css"/>
    </head>

    <body>
        <h1>Automobily</h1>
        <table class="tabulka">
            <tr>
                <th>Značka</th>
                <th>SPZ</th>
                <th>Barva</th>
                <th>Vyrobeno</th>
            </tr>
            <?php
                foreach ($automobily as $automobil)
                {
                    echo('<tr>
                        <td>' . htmlspecialchars($automobil['znacka']) . '</td>
                        <td>' . htmlspecialchars($automobil['spz']) . '</td>
                        <td>' . htmlspecialchars($automobil['barva']) . '</td>
                        <td>' . date('j.n. Y', strtotime($automobil['vyrobeno'])) . '</td>
                    </tr>');
                }
            ?>
        </table>
        <?= paginace($strana, $stran, '?strana={strana}') ?>
    </body>
</html>