5. diel - Prvý objektová komponenta v PHP - Galéria obrázkov

V minulej lekcii, Zapuzdrenie v PHP , sme si vysvetlili zapuzdrenie. Na dnešnej PHP tutoriál som sľúbil, že si vytvoríme niečo reálne použiteľného. Pôjde o galériu obrázkov.

Motivácia

Často chceme na našich stránkach zobraziť nejakú galériu obrázkov, či už ide o fotky z dovolenky alebo o screenshoty nášho programu. Písať ručne HTML tabuľku s obrázkami je trochu prácne, hlavne keď ich je v danej zložke veľa. Budeme teda chcieť zautomatizovať výpis obrázkov z nejakej zložky do prehľadnej tabuľky a najlepšie pomocou objektovej komponenty, ktorú budeme môcť používať viackrát a trebárs aj na viacerých weboch.

Založenie štruktúry projektu

Vytvoríme si novú zložku pre projekt, ja som ju pomenoval "galérie". V nej vytvoríme súbor index.php a zložku "tridy", v ktorej vytvoríme súbor Galerie.php. Nakoniec vytvoríme priečinok s obrázkami, tú som pomenoval jednoducho "obrazky". Do nej si pripravíme niekoľko obrázkov, ja som použil tie východiskové "Ukážky obrázkov" z operačného systému Windows. Ku každému obrázku je nutné vytvoriť ešte jeho miniatúru (napríklad v GIMP). Mohlo by to za nás robiť PHP pri nahrávaní obrázkov, ale nahrávanie už nie je predmetom tohto tutoriálu a môžeme ho dorobiť niekedy inokedy. Zvolil som si, že miniatúra bude široká 160px a jej názov bude vždy končiť na _nahled. Vaša zložka by mohla vyzerať napríklad nejako takto:

Galéria

Máme pripravené dáta a štruktúru, pusťme sa do programovania. Začneme samozrejme triedou Galéria, ktorej inštancia bude reprezentovať galériu obrázkov. Poďme si premyslieť, aké atribúty bude trieda mať.

Atribúty

Budeme chcieť určiť koľko náhľadov sa má zobraziť v jednom riadku, teda koľko stĺpcov bude mať tabuľka s obrázkami. Ďalej budeme chcieť samozrejme uchovávať cestu k priečinku s obrázkami. Ani jeden atribút nie je dôvod sprístupňovať zvonku, stačí, keď si ich necháme zadať v konstruktoru.

Kód triedy s týmito atribútmi a konštruktor bude vyzerať nasledovne:

class Galerie
{

    private $slozka;
    private $sloupcu;

    public function __construct($slozka, $sloupcu)
    {
        $this->slozka = $slozka;
        $this->sloupcu = $sloupcu;
    }

}

Metódy

Prejdime k metódam. Jednu v triede už samozrejme máme (konštruktor), pridáme tam 2 ďalšie.

Nacitaj

Metóda nacitaj () prehľadá priečinok a uloží si do pamäte náhľady obrázkov. Na prehľadanie zložky nám PHP ponúka triedu Directory. Spomínate si, ako sme si hovorili, že sa v PHP začínajú objavovať objekty? Directory je jedným z nich. Bohužiaľ možno inštanciu vytvoriť len pomocou funkcie dir (), no, nič nie je dokonalé. Na inštanciu nás zaujímajú 2 metódy:

• read () - Načíta obsah ďalšieho súboru alebo priečinka v priečinku a vráti ho ako textový reťazec
• close () - Ukončí čítanie zložky

Naša metóda nacitaj () by mohla vyzerať nateraz takto:

public function nacti()
{
    $slozka = dir($this->slozka);

    while ($polozka = $slozka->read())
    {

    }
    $slozka->close();
}

Vytvoríme si inštanciu Directory a pomocou metódy read () čítame postupne zložky a súbory v tejto zložke. Metóda vráti false v prípade, že sme sa prehrýzli až na "koniec" zložky (za posledný súbor alebo priečinok). Vďaka tomu môžeme dať načítanie názvu súboru do while cyklu, ktorý skončí vo chvíli, keď načítame posledný. Názov budeme mať vnútri cyklu dostupný v premennej $ polozka. Možno je trochu nezvyklé, že v podmienke while cykle vykonávame rovno aj priradenie do premennej, ale robí sa to tak veľmi často.

Každý súbor teraz načítame 2x (miniatúra + originál) ak tomu nám funkcie ešte vráti vždy 2 zložky navyše. Sú to zložky s názvom "." a "..", ktoré označujú súčasnú a nadradenú zložku. My budeme chcieť zobrazovať len miniatúry, preto do cyklu umiestnime podmienku, že nás zaujímajú iba súbory, ktoré obsahujú v názve "_nahled.". Tieto súbory si uložíme do poľa. Keďže chceme, aby bolo toto pole prístupné pre metódu vypis (), musíme ho pridať triede ako privátne atribút:

private $soubory = array();

Teraz sa presuňme do tela cyklu while a pridajme názov súboru do nášho poľa zakaždým, keď sa jedná o náhľad. Použijeme na to funkciu strpos (), ktorá vracia pozíciu podreťazca v reťazci. Ak sa v názve položky vyskytuje od druhého znaku niekde text "_nahled.", Bude položka pridaná do nášho poľa. Ak nie, funkcia vráti false.

if (strpos($polozka, '_nahled.'))
{
    $this->soubory[] = $polozka;
}

• Funkcia strpos () vráti 0 v prípade, že reťazec podreťazcom začína (pretože 0 označuje prvú pozíciu). V našom prípade by sa hodnota 0 vyhodnotila ako nepravda a podmienka by neplatila. To je správne, súbor _nahled.jpg by sa viazal k obrázku bez názvu a nie je teda platný. Ak by sme však chceli opodmínkovat kompletne výskyt podreťazca, napríklad v inej aplikácii, používa sa na odlíšenie 0 a hodnoty false operátor! == takto: *

if (strpos($polozka, '_nahled.') !== false)
{
    $this->soubory[] = $polozka;
}

Teraz podmienka neprejde len s hodnotou false a prejde s hodnotou 0. V našom prípade sa nám však skôr hodí prvý variant.

Vypis

Tú zložitejšie časť máme za sebou, presuňme sa teraz k výpisu HTML tabuľky, teda k metóde vypis (). Aj keď by načítanie aj výpis mohli byť v jednej metóde, jedná sa o 2 logické úlohy a preto je lepšie ich rozdeliť do 2 metód. Metóda by mala robiť vždy jednu vec a mali by sme ju byť schopní popísať bez spojky a. Teda "Metóda zobraz () zobrazí HTML tabuľku s náhľadmi", nie "Metóda zobraz () načíta a zobrazí galériu".

Metóda vypis () vyechuje začiatok tabuľky. Ďalej proiterujeme cyklom foreach miniatúry a tie vyechujeme do bunky tabuľky ako tag img. Okolo tagu img samozrejme urobíme odkaz na originálny obrázok. Ten získame veľmi jednoducho, stačí v názve miniatúry nahradiť "_nahled." za ".". Nahradenie prevedieme funkcií str_replace (). Aby nebola celá tabuľka v jednom riadku, budeme si počítať koľký stĺpec vypisujeme. Akonáhle dosiahneme hodnoty nastavené v atribútu $ stlpcov, uzavrieme riadok, začneme nový a vynulujeme počítadlo stĺpcov.

Kód metódy vypis () by mohol vyzerať nejako takto:

public function vypis()
{
    echo('<table id="galerie"><tr>');
    $sloupec = 0;
    foreach ($this->soubory as $soubor)
    {
        $nahled = $this->slozka . '/' . $soubor;
        $obrazek = $this->slozka . '/' . str_replace('_nahled.', '.', $soubor);
        echo('<td><a href="' . htmlspecialchars($obrazek) . '"><img src="' . htmlspecialchars($nahled) . '" alt=""></a></td>');
        $sloupec++;
        if ($sloupec >= $this->sloupcu)
        {
            echo('</tr><tr>');
            $sloupec = 0;
        }
    }
    echo('</tr></table>');
}

Použitie

Presunieme sa do index.php, vložíme sem základné HTML štruktúru a vytvoríme inštanciu galérie. Do konstruktoru odovzdáme zložku a počet stĺpcov. Následne zavoláme nacitaj () a vypis ().

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
            <meta charset="utf-8" />
            <title>Galerie obrázků</title>
    </head>

    <body>
        <h1>Galerie obrázků</h1>
        <?php
        require_once('tridy/Galerie.php');

        $galerie = new Galerie('obrazky', 5);
        $galerie->nacti();
        $galerie->vypis();

        ?>
    </body>
</html>

Máme hotovo.

Keď pridáme minimum CSS, môže vaše aplikácie vyzerať napríklad takto (zdrojový kód ako vždy nižšie k stiahnutiu, na zobrazovanie originálne obrázkov som ešte pridal javascriptový plugin Lightbox):

Možná vylepšenia

Metóda vypis () nie je úplne ideálne, pretože sa HTML kód strechu a preto je práca s ním trochu neprehľadná. Ďalším, už spomínaným vylepšením, by mohol byť nahrávač obrázkov, ktorý nám na FTP nahrá obrázky do galérie a sám vytvorí miniatúry. Pre naše účely je však aplikácia dostačujúce a myslím, že má aj tak praktické využitie.

Naprogramovali sme objektovú komponent, ktorú môžeme používať na rôznych weboch, pre rôzne zložky a na rôzne široké tabuľky.

V budúcej lekcii, Referenčnej a primitívne dátové typy v PHP , budeme pokračovať s našimi ľuďmi, ktorých sa ešte len tak nepustíme. Vysvetlíme si ako PHP pracuje s referenčnými dátovými typmi.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.