HOME

5h-3LL 1.0
DIR: /srv/http/adent.cz/tisic.cz.test4-osmicka/pages/help
/srv/http/adent.cz/tisic.cz.test4-osmicka/pages/help/
Current File : /srv/http/adent.cz/tisic.cz.test4-osmicka/pages/help/master-fotogalerie.php
<?php /*
 title=Automatická fotogalerie
 &description=Karlův cvičební MVC, aby pochopil, jak se dneska programuje :)
 &keywords= 
 &role=master
 &groups=
*/ ?>

<h1>Adresářová fotogalerie</h1>

<div class="adc-tabs">
    <ul>
        <li class="active" data-tab="ukazka"><a href="#ukazka">Ukázka</a></li>
        <li data-tab="uvod"><a href="#uvod">Úvod</a></li>
        <li data-tab="ve-strance"><a href="#ve-strance">Fotogalerie ve stránce</a></li>
        <li data-tab="odkaz"><a href="#odkaz">Fotogalerie jako odkaz</a></li>
        <li data-tab="seznam"><a href="#seznam">Seznam fotogalerií</a></li>
        <li data-tab="autofoto"><a href="#autofoto">Automatická fotogalerie</a></li>
    </ul>
    
    <!-- UKAZKA -->
    <div class="active" data-tab="ukazka" id="ukazka">
        <?php
            echo TextShortcutsUti::showScreenExampleStart('http://karel.mvc/galerie/test2');

            $photoGallerySample = new PhotoGalleryUti('test2'); 
            $photoGallerySample->show();

            echo TextShortcutsUti::showScreenExampleEnd();
        ?>        
    </div>
    
    <!-- UVOD -->
    <div data-tab="uvod" id="uvod">
      <p><strong>Adresářová fotogalerie</strong> znamená, že se nahrají do nějakého adresáře fotky a Karlův MVC je pak nějak zobrazuje.</p>
        <p>V našem Karlově MVC to je zatím tak, že:</p>
        <ol>
            <li>Fotky se ručně nahrají do adresáře <code>img/fotogalerie/<em>jméno_galerie</em></code>.</li>
            <li>V tomhle adresáři se (zatím také bohužel ručně) vyrobí podadresář <code>thumbs</code> s náhledy.</li>
            <li>Dále se fotogalerie "zaregistruje v databázi" - zapíše se do souboru (zatím) <code>elements/data/photogalleries.php</code> (bližší návod též přímo v souboru).

                <?php
                    echo TextShortcutsUti::showCode(
                        'Ukázka souboru <code>elements/data/photogalleries.php</code>:', 
                        file_get_contents('elements/data/photogalleries-sample.php'), 
                        'php'
                    ) ;
                ?>
                <p>Význam parametrů je následující:</p>
                <ul>
                    <li><kbd>directoryName</kbd> - jméno adresáře s obrázky, které chceme zobrazit</li>
                    <li><kbd>galleryHeader</kbd> - nadpis fotogalerie ve stránce</li>
                    <li><kbd>galleryDescription</kbd> - podrobnější popisek fotogalerie</li>
                    <li><kbd>htmlElementSet</kbd> - nastavuje sadu PHTML šablon, jejichž prostřednictvím se galerie zobrazí</li>
                    <li><kbd>titleImage</kbd> - nastavuje titulní obrázek fotoglaerie (např. P0124578.jpg)</li>
                    <li><kbd>link</kbd> - nastavuje odkaz, na který bude odkazovat fotogaleri při zobrazení "upoutávky" v podobě nadpisu nebo titulního obrázku (viz též příklady dále)</li>
                    <li><kbd>role</kbd> - nastavuje role (nic, user, admin, master), pro které bude fotogalerie viditelná (nic = vidí všichni)</li>
                    <li><kbd>group</kbd> - nastavuje skupiny, pro které bude fotogalerie viditelná nad rámec rolí (nic = nevidí navíc nikdo)</li>
                </ul>
            </li>
            <li>Tím je fotogalerie založena a zobrazuje se podle ukázek viz dále.</li>
        </ol>
        <p>V zásadě jsou možné <strong>tyto druhy zobrazení</strong> fotogalerií:</p>
        <ol>
            <li><strong>ručně</strong> vložit do stránky <strong>celou fotogalerii</strong>,</li>
            <li><strong>ručně</strong> vložit do stránky <strong>odkaz na fotogalerii</strong> (s titulkem fotogalerie a/nebo titulním obrázkem),</li>
            <li><strong>ručně</strong> vložit do stránky <strong>seznam fotogalerií</strong> (s titulkem fotogalerie a/nebo titulním obrázkem),</li>
            <li><strong>automaticky</strong> si nechat <strong>zobrazit fotogalerii</strong> na adrese <code>/galerie/<em>název galerie</em></code>.</li>
        </ol>
        <p>Vlastní zobrazování zařizuje LightBox, který je do Karlova MVC zabudován ve <code>/vendor/lightbox/</code>.</p>
    </div>
    
    <!-- VE STRANCE -->
    <div data-tab="ve-strance" id="ve-strance">
        <p>Do stránky lze celkem jednoduše (na dva řádky v PHP) <strong>vložit fotogalerii</strong>.</p>
        
        <?php
            $str = <<<'EOD'
<?php
    // v prvním řádku kódu níže: 'test' = název adresáře s fotkami
    $photoGallery = new PhotoGalleryUti('test'); 
    $photoGallery->show();
?>
EOD;
            echo TextShortcutsUti::showCode('PHP kód:', $str, 'php') ;
        ?>      
        
        <p>
            V uvedeném případu si fotogalerie vytáhne data (nadpis, popisek, ...) z databáze.<br />
            Pokud je chceme přepsat, přidáme jako druhý parametr pole s hodnotami, které chceme přepsat (podmnožina z definičního pole v předchozí části), např. <strong>změna nadpisu a popisu</strong> se provede takto: 
        </p>
        
        <?php
            $str = <<<'EOD'
<?php
    // v prvním řádku kódu níže: 'test' = název adresáře s fotkami
    $photoGallery = new PhotoGalleryUti('test', ['galleryHeader'=>'Keškování za Meridiány', 'galleryDexcription'=>'Jestli neznáte Meridiány, tak to byste se měli seznámit!!! ... ']); 
    $photoGallery->show();
?>
EOD;
            echo TextShortcutsUti::showCode('PHP kód:', $str, 'php') ;
        ?>      
        
        <p>Ve stránce to pak vypadá takhle:</p>
        
        <?php
            echo TextShortcutsUti::showScreenExampleStart('http://karel.mvc/stranka');

            $photoGallery = new PhotoGalleryUti('test', ['galleryHeader'=>'Keškování za Meridiány', 'galleryDescription'=>'Jestli neznáte Meridiány, tak to byste se měli seznámit!!! ... ']); 
            $photoGallery->show();

            echo TextShortcutsUti::showScreenExampleEnd();
        ?>

        <p>
            Pokud si chceme <strong>nastavit vlastní zobrazení</strong>, upravíme si dvě PHP šablony:<br />
            <em>"XXX" představuje název sady PHTML šablon, jejichž prostřednictvím se galerie zobrazuje (výchozí nastavení je "XXX" = "" (nic))</em>
        </p>
        
        <?php
            echo TextShortcutsUti::showCode(
                'Ukázka souboru <code>elements/photogalleryXXX.php</code> pro zobrazení "obalovacího boxu" fotogalerie:', 
                file_get_contents('elements/samples/photogallery.php'), 
                'php'
            ) ;
            echo TextShortcutsUti::showCode(
                'Ukázka souboru <code>elements/photogalleryXXX-oneImage.php</code> pro nastavení zobrazení jednoho obrázku:', 
                file_get_contents('elements/samples/photogallery-oneImage.php'), 
                'php'
            ) ;
        ?>

        <h3>Předstylovaná galerie se čtvercovými obrázky</h3>
        <p>SPZ má vestavěnou fotogalerii se čtvercovými náhledy obrázků.</p>
        <p>Fotogalerie využívá upravený element ("HTML Set") <code>Square</code> pro zobrazení fotogalerie ve stránce.
            <br />Jde o soubory <code>/elements/photogallerySquare.php</code> a <code>/elements/photogallerySquare-oneImage.php</code>.
            <br />Zobrazení se provede úplně stejně jako v předchozích příkladech, jen se zobrazovací metoda volá s parametrem 'Square': <code>$photoGallery->show('Square')</code>.
        </p>
        
        <?php
            echo TextShortcutsUti::showScreenExampleStart('http://karel.mvc/stranka');

            $photoGallery = new PhotoGalleryUti('test', ['galleryHeader'=>'Keškování za Meridiány', 'galleryDescription'=>'Jestli neznáte Meridiány, tak to byste se měli seznámit!!! ... ']); 
            $photoGallery->show('Square');

            echo TextShortcutsUti::showScreenExampleEnd();
        ?>

        <?php
            $str = <<<'EOD'
<?php
    $photoGallery = new PhotoGalleryUti('test', ['galleryHeader'=>'Keškování za Meridiány', 'galleryDescription'=>'Jestli neznáte Meridiány, tak to byste se měli seznámit!!! ... ']); 
    $photoGallery->show('Square');
?>
EOD;
            echo TextShortcutsUti::showCode('PHP kód:', $str, 'php') ;
        ?>           
        
    </div>        
    
    <!-- ODKAZ -->
    <div data-tab="odkaz" id="odkaz">
        <p>Případně se dá do stránky <strong>vložit odkaz</strong> ("upoutávka") <strong>na fotogalerii</strong> s nadpisem, titulním obrázkem a odkazem na další stránku:</p>

        <?php
            $str = <<<'EOD'
<?php
    // pozor, první řádek kódu níže nesmí být ve stránce vícekrát 
    // - pokud tedy budeme mít odkaz ve stránce na 2 místech (jednou třeba jako text a jednou jako obrázek), použije se při druhém a dalším zobrazení jen druhý řádek
    $photoGallery = new PhotoGalleryUti('test2'); 
    $photoGallery->showLink('/galerie/test2');
?>
EOD;
            echo TextShortcutsUti::showCode('PHP kód:', $str, 'php') ;
        ?>      
        
        <p>A stránka vypadá takhle (odkaz je nastaven na automaticky generovanou galerii, <em>data z databáze lze přepsat stejně jako v předchozí části</em>):</p>
        
        <?php
            echo TextShortcutsUti::showScreenExampleStart('http://karel.mvc/stranka');

            $photoGallery2 = new PhotoGalleryUti('test2');
            $photoGallery2->showLink('/galerie/test2');

            echo TextShortcutsUti::showScreenExampleEnd();
        ?>

        <p>
            Pokud si chceme <strong>nastavit vlastní zobrazení</strong>, upravíme si PHP šablonu:<br />
            <em>"XXX" opět představuje název sady PHTML šablon, jejichž prostřednictvím se galerie zobrazuje (výchozí nastavení je "XXX" = "" (nic))</em>
        </p>
        
        <?php
            echo TextShortcutsUti::showCode(
                'Soubor <code>elements/photogalleryXXXLink.php</code> pro zobrazení seznamu fotogalerií:', 
                file_get_contents('elements/samples/photogalleryLink.php'), 
                'php'
            ) ;
        ?>
    </div>
    
    <!-- SEZNAM -->
    <div data-tab="seznam" id="seznam">
        <p>Do stránky lze celkem jednoduše vložit také <strong>seznam fotogalerií</strong>.</p>
        
                <?php
            $str = <<<'EOD'
<?php
    $gallerySetData = ['test2','test'];                     // seznam adresářů fotogalerií
    $gallerySet = new PhotoGallerySetUti($gallerySetData);  // nová instance seznamu fotogalerií
    $gallerySet->showList();                                // zobrazení seznamu
?>
EOD;
            echo TextShortcutsUti::showCode('PHP kód:', $str, 'php') ;
        ?>      
        
        <p>Funguje to tak, že každá z galerií zobrazí svůj odkaz (bere se z databáze, viz předcházející části povídání).<br />
            Jako druhý (nepovinný) parametr pro <code>new PhotoGallerySetUti($gallerySetData)</code> lze nastavit <code>htmlElementSet</code>.<br />
            Ve stránce to pak vypadá takhle:</p>
        
        <?php
            echo TextShortcutsUti::showScreenExampleStart('http://karel.mvc/stranka');

            $gallerySetData = ['test2','test'];                     // seznam adresářů fotogalerií
            $gallerySet = new PhotoGallerySetUti($gallerySetData);  // nová instance seznamu fotogalerií
            $gallerySet->showList();                                // zobrazení seznamu
            
            echo TextShortcutsUti::showScreenExampleEnd();
        ?>
        <p>Podle očekávání se formátování výstupů provede úplně stejnými šablonami jako v předcházející části:<br />
            <em>"XXX" opět představuje název sady PHTML šablon, jejichž prostřednictvím se galerie zobrazuje (výchozí nastavení je "XXX" = "" (nic))</em>
        </p>
        
        <?php
            echo TextShortcutsUti::showCode(
                'Ukázka souboru <code>elements/photogalleryXXXLink.php</code> pro zobrazení jednoho odkazu v seznamu fotogalerií:', 
                file_get_contents('elements/samples/photogalleryLink.php'), 
                'php'
            ) ;
        ?>

    </div>
    
    <!-- AUTOFOTO -->
    <div data-tab="autofoto" id="autofoto">
        <p>Hned po založení je fotogalerie sama od sebe dostupná na adrese <code>/galerie/<em>název galerie</em></code>, např. <a href="/galerie/test">/galerie/test</a> nebo <a href="/galerie/test2">/galerie/test2</a>.</p>
        <p>MVC si po založení fotogalerie (nahrání obrázků a zaregistrování do databáze) umí sám načíst potřebná data a fotogalerii zobrazit.</p>
        <p>
            Pokud si chceme <strong>nastavit vlastní zobrazení</strong>, upravíme si PHP šablony:<br />
            <em>"XXX" opět představuje název sady PHTML šablon, jejichž prostřednictvím se galerie zobrazuje (výchozí nastavení je "XXX" = "" (nic))</em>
        </p>
        <?php
            echo TextShortcutsUti::showCode(
                'Ukázka souboru <code>views/photogalleryXXX.php</code> pro zobrazení "obalovacího boxu" fotogalerie:', 
                file_get_contents('views/samples/photogallery.php'), 
                'php'
            ) ;
            echo TextShortcutsUti::showCode(
                'Ukázka souboru <code>views/photogalleryXXX-oneImage.php</code> pro nastavení zobrazení jednoho obrázku:', 
                file_get_contents('views/samples/photogallery-oneImage.php'), 
                'php'
            ) ;
        ?>
        
    </div>

</div>