Paginace (stránkovanie) v PHP

V dnešnom tutoriále sa naučíme v PHP riešiť veľmi častou úlohu, ktorou je tzv. Paginace (stránkovania). Jedná sa o stránkovanie výpisu nejakých položiek, ktoré by malo byť prítomných asi takmer všade. Keď aplikáciu vytvoríme, je v nej len niekoľko užívateľov, článkov, automobilov ... Po rokoch používania tam však môžu byť tisíce položiek a sťahovanie toľkých dát z databázy a ich výpis na jedinú stránku zbytočne zaťažuje server a spomaľuje prehliadač klienta. Alternatívou k paginaci je donačítávání nových položiek Ajaxu vo chvíli, keď doscrollujeme na koniec dokumentu. To si ukážeme v ďalších dieloch.

Tutoriál budem písať pre zjednodušenie neobjektové. Tí, ktorí objekty ešte nevie, ho aspoň budú vedieť použiť a tí, ktorí ich vedia, si ho do objektov prevedú behom pár minút.

Pre namotivovaní si ukážme screenshot výslednej aplikácie:

Databázy

Aby mala aplikácie zmysel, nevyhneme sa databázu. Vytvorme si nejakú jednoduchú MySQL databázu (napr. Automobilka, porovnávanie utf8_czech_ci).

V databáze vytvoríme tabuľku automobily. Tabuľka bude mať nasledujúce stĺpce:

• automobil_id (int, autoincrement, primárny kľúč)
• znacka (varchar 20)
• spz (varchar 10)
• farba (varchar 20)
• vyrobené (date)

Dáta

Než sa pustíme do samotnej paginace, mali by sme mať pripravené dáta, ktorá budeme zobrazovať. Samozrejme nebudeme ručne naklikávat 1000 testovacích automobilov, ale necháme si ich vygenerovať. V našom prípade to bude celkom jednoduché, pre zložitejšie generovanie dát môžete využiť Generátor testovacích dát.

Pre prácu s databázou budeme používať miestne databázový wrapper, ktorý je k stiahnutiu v podobe súboru Db.php v prílohe článku Prvý databázová tabuľka a MySQL ovládače v PHP. Pre náš projekt si vytvorte nejakú zložku a súbor Db.php do nej nakopírujte. Ďalej vytvorte súbor instalace.php, ktorý bude mať za úlohu vložiť do databázy testovacej automobily.

Najprv sa pripojíme k databáze a vytvoríme si pole so zásobou značiek áut a farieb, aby sme mali z čoho generovať:

require_once('Db.php');
Db::connect('localhost', 'automobilka', 'root', '');
mb_internal_encoding("UTF-8");

$znacky = array('Škoda', 'BMW', 'Audi', 'Volvo', 'Opel', 'Renault', 'Hyundai', 'Seat', 'Jaguar', 'Alfa Romeo');
$barvy = array('červená', 'černá', 'bílá', 'zelená', 'modrá', 'stříbrná metalíza', 'oranžová', 'fialová', 'žlutá');

Na generovanie náhodné ŠPZ v tvare AAA-0000, kde A je znak od 0 do Z a 0 je znak od 0 do 9, vytvoríme jednoduchú funkciu:

function generujSpz()
{
    $znaky = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $spz = '';
    // První 3 znaky
    for ($i = 0; $i < 3; $i++)
    {
        $spz .= $znaky[rand(0, mb_strlen($znaky) - 1)];
    }
    // Pomlčka
    $spz .= '-';
    // Poslední 4 čísla
    for ($i = 0; $i < 4; $i++)
    {
        $spz .= rand(0, 9);
    }
    return $spz;
}

Generovanie náhodného dáta je jednoduché. Čísla dní budeme generovať len do 28, aby sme nemuseli riešiť koľko má mesiac dní.

function generujDatum()
{
    return rand(1990, 2014) . '-' . rand(1, 12) . '-' . rand(1, 28);
}

Nakoniec si necháme vygenerovať 1000 náhodných áut a tá uložíme do databázy:

for ($i = 0; $i < 1000; $i++)
{
    $automobil = array(
        'znacka' => $znacky[array_rand($znacky)],
        'spz' => generujSpz(),
        'barva' => $barvy[array_rand($barvy)],
        'vyrobeno' => generujDatum(),
    );
    Db::insert('automobil', $automobil);
}

echo('Hotovo.');

Je dobré podotknúť, že nie je kvôli výkonu úplne dobrý nápad volať databázový dotaz v cykle. Mali by sme zostaviť 1 INSERT s viacerými položkami a ten potom na databázu spustiť. U nás to pri faktu, že skript spúšťame iba raz, nijako nevadí. Skript spustíme v prehliadači.

výsledok:

Helper

Zobrazenie lištičky pre prepínanie stránok nie je tak triviálna záležitosť, ako by sa mohlo zdať. Sémanticky by mala byť líštička v HTML reprezentovaná elementom

• U prvého obrázku vidíme, že sa nachádzame na prvej stránke. Vľavo je už teda len neaktívne šípka, vpravo sú odkazy na 5 ďalších stránok, potom bodky a posledná strana. Lišta končí šípkou s odkazom na ďalšiu stranu.
• Druhý obrázok znázorňuje situáciu, kedy má výpis len jednu stanu.
• Tretí obrázok ukazuje orezanie polomere vypisovaných stránok okolo aktuálnej stránky. Zľava sa vypíšu len 2, sprava zas 5 a posledná strana.
• Štvrtý obrázok je variant 1.
• Piaty obrázok zobrazuje kompletnú polomer okolo aktuálnej strany.