Stránkovanie
Posledné dve kapitoly boli takmer čisto teoretické, tak aby sme vás neunudili k smrti, dáme si zase kus programovania. V tejto kapitole sa vrátime k našej galérii obrázkov a naučíme sa na nej ďaľšiu veľmi praktickú a používanú vec. Určili sme si, že naša galéria bude obsahovať 7 obrázkov a všetky tieto obrázky sme zobrazili na stránke (ich miniatúry). Čo ale v prípade, že by naša galéria obsahovala 20, 50 alebo 200 obrázkov? Zobrazovali by sme ich všetky naraz na jednej stránke? Asi nie, jednak by to bolo neprehľadné a na druhej strane by to dosť spomalilo načítanie stránky, kým by sa všetky miniatúry načítali.
Pri zobrazovaní podobných prvkov na stránke (obrázky, články, správy...), ktorých počet je rôzny a očakáva sa, že bude vyšší, sa používa tzv. stránkovanie (pagination). Je to v podstate rozdelenie prvkov na viac stránok, kde na každej stránke je zobrazený len predom určený maximálny počet prvkov. Takže povedzme, že maximum zobrazených fotiek/obrázkov na jednej stránke v našej galérii bude 12. Na prvej stránke sa zobrazia fotky s poradovým číslom 1-12, na druhej stránke 13-24, na tretej 25-36 atď. Určite sa s tým stretávate denne, ak si prezeráte nejaký z informačných portálov/denníkov/bulvárov, na ktorých je možné nájsť množstvo článkov. Pri výpise článkov sú väčšinou zoradené chronologicky, kde navrchu je najnovší článok. Ak sa dostanete na koniec zoznamu, nachádza sa tam väčšinou tlačidlo ďalšie články, ďalšia strana alebo šípka doprava, niekedy sa tam vyskytujú rovno čísla na konkrétne stránky (1, 2, 3, 4...). To isté môžete nájsť pri prezeraní galérií obrázkov na webe. Presne toto je stránkovanie.
Čo to stránkovanie predstavuje pre nás ako programátorov po technickej stránke? Pri vyriešení tohto problému nie je nutné vedieť žiadny nový príkaz ani funkciu ani nič iné, teoreticky by ste to mohli už zvládnuť. Je na to nutné však troška porozmýšlať a použiť aj nejaké logické výpočty. Poďme si rozobrať našu úlohu ako zadanie. Máme povedzme 30 obrázkov a chceme ich zobraziť pomocou stránkovania, kde na jednej stránke bude maximálne 12 obrázkov. Po navštívení našej stránky s fotogalériou by sa malo zobraziť prvých 12. Toto by sme ešte zvládli ako nič. Následne musí mať používateľ možnosť na niečo kliknúť (zrejme odkaz), čo mu zabezpečí zobrazenie obrázkov 13-24 alebo 25-30. Keďže chceme byť stále na tej istej stránke, odpoveď na zadanie zobraziť tú istú stránku, ale v rôznych stavoch – s rôznym obsahom, musí pre nás okamžite indikovať použitie parametra v URL. Takže naše odkazy musia mať nejakú hodnotu parametra, ktorý bude určovať, ktoré obrázky sa zobrazia.
Keďže sa to volá stránkovanie, hodnota parametra by nemalo byť nič iné, ako poradové číslo stránky. Takže, hodnota tohto parametra pri zobrazení stránky by mala byť braná ako prvá (hodnota 1). Odkazy na ďalšie stránky by mali niesť hodnotu parametra 2,3,4 atď. podľa potreby. Pri slovnom spojení podľa potreby by som sa pozastavil, je to prvý problém, ktorý treba tak troška logicky vyriešiť. Povedzme, že nevieme, či bude obrázkov 70 alebo 550. Otázka je, koľko čísiel/odkazov na jednotlivé stránky potrebujeme, aby mal používateľ možnosť zobraziť všetky orbázky? Áno, keďže je to opakujúca sa činnosť, použijeme na vypísanie odkazov cyklus. Kedy ale skončí? Budeme musieť pre ukončenie použiť nejakú logickú podmienku/logický postup, aby sa skončilo vtedy, keď sa na poslednej stránke zobrazí posledný obrázok, čiže nejako použiť číslo 12, ktoré určuje počet prvkov na jednej stránke, číslo 30, ktoré v tomto prípade definuje celkový počet obrázkov a poradové číslo stránky. Násobok dvanástky a poradového čísla stránky nám indikuje, koľko obrázkov už akokeby máme zahrnutých jendotlivými odkazmi.
Druhý problém, na ktorého riešenie sme už troška napovedali v predošlom odstavci je, určiť začiatok a koniec cyklu, ktorý vypisuje obrázky na konkrétnej stránke. To znamená, že ak nám príde hodnota parametra napríklad 2 (poradové číslo stránky), ako určíme začiatočné a koncové číslo obrázka (začiatok a koniec cyklu for), ktorý sa má zobraziť. Toto číslo je v podstate indexom poľa s obrázkami. Logicky, pre začiatok to bude číslo 12 násobené poradovým číslom stránky mínus 1 (12*(poradove-1)). Dúfam, že chápete to mínus 1, ak sme na prvej stránke, nemôže byť začiatočná fotka - index 12 ale 0. Koncová preto bude 12 násobené poradovým číslom stránky (12*1), pri indexe to bude ešte celé mínus 1, lebo rátame indexy poľa od nuly. Celú vedu stránkovania sme už v podstate vyriešili, stačilo si rozobrať problém slovne dopodrobna, čo to vlastne chceme a tým sme aj prišli na to, čo musíme zabezpečiť. Keďže už vieme, čo potrebujeme, skúsme si to zapísať do kódu, ktorý by mohol vyzerať nejako takto:
fotogaleria.php:
<?php
$pictures = array();
for($i = 0; $i < 30; $i++){
$pictures[] = 'images/placeholder.jpg';
}
//zadefinovanie maximalneho poctu pre jednu stranku a nacitanie parametra (urcenie aktualnej stranky)
$countPerPage = 12;
if($_GET['page']){
$page = $_GET['page'];
}else{
$page = 1;
}
//vypocet od ktorej po ktoru fotku zobrazujeme galeriu
$start = ($page-1)*$countPerPage;
$end = $page*$countPerPage;
echo '<ul id="gallery">';
for($i = $start; $i < $end; $i++){
if($pictures[$i]){
echo '<li>';
echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';
echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
}
echo '</ul>';
//cyklus, ktory nam vypise dostatocny pocet odkazov pre jednotlive stranky
$pageLink = 1;
$photosCount = count($pictures);
echo '<ul class="pagination">';
while($photosCount > 0){
echo '<li><a href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a></li>';
$photosCount = $photosCount - $countPerPage;
$pageLink++;
}
echo '</ul>';
?>
Poďme si naše riešenie rozobrať. Na začiatku napĺňame tak ako predtým simulované pole obrázkov, tentoraz do čísla 30. Potom sme si zadefinovali premennú, ktorá bude určovať maximálny počet na jednej stránke (countPerPage). Následne sme si určili premennú, ktorá predstavuje aktuálne zobrazenú stránku. Všimnite si, že sa pýtame, či nám prišiel parameter. Ak áno (stav, kedy sa kliklo na odkaz so stránkou), vložíme si parameter ako hodnotu tejto premennej, ak nie (načítanie stránky z menu), nastavíme si to na hodnotu 1.
Potom nasleduje spomínaný výpočet začiatku a konca cyklu, ktorý nám zobrazujú premenné start a end. Potom nasleduje cyklus pre výpis obrázkov tak ako predtým, len sme začiatok a koniec cyklu aplikovali do jeho definície. Všimnite si, že celý výpis obrázka sme obalili do podmienky if($pictures[$i]). Spravili sme to preto, pretože v prípade tretej stránky ide cyklus od 24 do 36. My však máme obrázkov iba 30, takže by cyklus od 31 do 36 zobrazoval prázdne obrázky, pretože hodnotu prvku v poli neexistuje. Vložením tejto podmienky sa teda vykreslenie obrázka nevykoná a nič prázdne tam nebude.
Na konci sme si zadefinovali premennú, ktorá určuje poradové číslo stránky pre lištu stránkovania (odkazy na stránky) a premennú, ktorá nám predstavuje celkový počet obrázkov. Pre výpis stránok sme použili cyklus while (s podmienkou na začiatku), kde sa v podmienke pýtame, či máme je počet obrázkov, ktoré ešte treba vypísať, väčši ako nula. Toto číslo je na začiatku 30, takže prvý krok sa spustí, vypíše sa odkaz s parametrom 1. Celkový počet obrázkov, ktoré ešte treba vypísať sme si zmenšili o 12, takže je 18. Nasleduje druhý krok cyklu, číslo sa zmení na 6 a pribudne druhý odkaz s parametrom 2. V treťom kroku sa vypíše odkaz s parametrom 3 a hodnota premnnej photosCount je -6, takže štvrtý krok cyklu sa nespustí a my máme všetky potrebné odkazy. Ako je vidieť, odkazy sme vypísali do zoznamu.
Skúste si klikať na jednotlivé stránky a uvidíte, že to naozaj funguje. Šikovné však? Možno sa vám zdá tento príklad/problém príliš zložitý a poviete si, že no na to by som nikdy neprišiel. Ak je to tak, tak nezúfajte, tento príklad je naozaj asi najťažší zo všetkých, ktoré sme v tomto bakalárskom stupni riešili a vyžaduje si naozaj hlbšie zamyslenie a bádanie po riešení. Ako sme ale dávnejšie povedali, čím viac budeme rozmýšlať a riešiť takéto úlohy, tým sa to viac na nás bude lepiť.
Aby to nejako vyzeralo, aplikujme na to ešte nejaký dizajn. Na to si ale potrebujeme prebrať niektoré nové veci z jazyka CSS, takže si to preberieme v novej kapitole.