IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

4. diel - Prepojenie kontroleru a pohľadu

V minulej lekcii, Smerovač (router) , sme si vytvorili smerovač, teda router. Skončili sme tým, že z URL adresy spoznáme meno triedy kontroléra a jeho ďalšie parametre. Dnes systém čiastočne sprevádzkujeme a zobrazíme si jednoduchý článok.

Pohľady

Začnime s niečím jednoduchým a pripravme si 2 pohľady. Tie následne prepojíme s kontrolery a konečne si niečo zobrazíme.

Rozloženie stránky

Ako vieme, kontrolér má v sebe uložený názov pohľadu, ktorý užívateľovi zobrazí. SmerovacKontroler bude zobrazovať pohľad s rozložením stránky, to bude obsahovať hlavičku, navigačné menu, pätičku a všetko okolo stránky. Čo obsahovať nebude bude ten hlavný obsah, ktorý sa sem vloží ako pohľad z vnoreného kontroleru.

Keďže v tomto seriáli nemá zmysel popisovať HTML a CSS, pripravil som pre vás jednoduchú šablónu pre rozloženie stránky. V priečinku pohľady si vytvoríme súbor rozlozeni.phtml. Do neho vložíme nasledujúci kód:

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <base href="/localhost" />
        <meta charset="UTF-8" />
        <title><?= $titulek ?></title>
        <meta name="description" content="<?= $popis ?>" />
        <meta name="keywords" content="<?= $klicova_slova ?>" />
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>

    <body>
        <header>
            <h1>ITnetworkMVC - ukázkový web</h1>
        </header>

        <nav>
            <ul>
                <li><a href="clanek/uvod">Úvod</a></li>
                <li><a href="clanek">Články</a></li>
                <li><a href="kontakt">Kontakt</a></li>
            </ul>
        </nav>
        <br clear="both" />

        <article>

        </article>

        <footer>
            <p>Ukázkový tutoriál pro jednoduché MVC z programátorské sociální sítě
            <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>.</p>
        </footer>
    </body>
</html>

Na zdrojovom kóde si všimneme niekoľkých vecí. Za prvé je to z 99% HTML, je pekne prehľadný a dobre štruktúrovaný. Tiež používam HTML 5 tagy, ale to by dnes už malo byť samozrejmosťou.

V hlavičke nájdeme tag , ten určuje koreňovú zložku webu. Tá je dôležitá napr. Pre obrázky, súbory css, ikony atď. Keďže používame pekná URL s lomkami, prehliadač by si myslel, že sme zapustené v nejakých zložkách. Takto mu explicitne oznámime, že chceme pracovať z koreňa. Na produkcii si localhost musíte prepísať na absolútnu URL adresu webu, teda napr .: "http://www.do­mena.cz/". Teoreticky by mala fungovať aj hodnota "/", ale jeden nemenovaný prehliadač s modrým "e" to nevie.

Všimneme si PHP direktív v hlavičke stránky:

<title><?= $titulek ?></title>
<meta name="description" content="<?= $popis ?>" />
<meta name="keywords" content="<?= $klicova_slova ?>" />

Tými vkladáme premenné z kontroleru (presnejšie z jeho pole $ dáta). V žiadnom prípade nebudeme v šablóne vkladať HTML do PHP, naopak vkladáme minimum PHP do HTML a to ešte tak, aby zostala zachovaná HTML štruktúra. Iste viete, že:

<?= $promenna ?>

je skrátený zápis tohto:

<?php echo $promenna; ?>

PHP má veľa takýchto syntaktických zlepšovákov pre šablóny a preto si s ním krásne vystačíme bez ďalšieho šablonovacího jazyka. Často zamieňajú termíny šablóna a pohľad, myslím tým to isté, pretože v našom MVC je pohľad realizovaný phtml šablónou.

Posledný zaujímavou vecou je telo článku, teda medzi tagy
. Všimnite si, že je zatiaľ prázdne, časom práve sem vypíšeme pohľad vnoreného kontroleru.

Chyba

Ako ďalšie šablónu vytvoríme stránku chybovú s názvom chyba.phtml. Zobrazí sa v prípade, že používateľ zadal nezmyselnú URL adresu. Jej HTML kód bude nasledujúce:

<h1>Chyba 404</h1>
<p>Požadovaná stránka nebyla nalezena, zkontrolujte prosím URL adresu</p>

Štýl

Čo by to bolo za web bez štýlu? Pripravil som samozrejme aj ten. V koreňovom priečinku s webom vytvoríme súbor style.css, jeho obsah bude nasledujúci:

body {
    font-family: verdana;
    font-size: 14px;
    width: 900px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #444444;
    text-shadow: 3px 3px 3px #aaaaaa;
}

footer {
    font-size: 11px;
    text-align: center;
    padding-top: 20px;
}

article {
    text-shadow: 3px 3px 3px #aaaaaa;
}

nav ul {
    list-style-type: none;
}

nav li {
    float: left;
    margin-right: 15px;
}

nav a {
    background: #6FA4F8;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

nav a:hover {
    background: #2976f8;
    color: #EEEEEE;
    text-decoration: none;
}

Až na pár CSS3 vlastností na ňom nie je nič zaujímavé.

Výpis pohľadov

Pohľady máme založené, kontrolery máme založené, poďme aplikáciu konečne sprevádzkovať.

Presunieme sa do SmerovacKontroler, kde v metóde spracuj () vymastíme kontrolné zoznamy minula a budeme v nej pokračovať. Ak neexistuje žiadny kontrolér (prvý parameter URL adresy je prázdny alebo úplne chýba), presmerujeme na úvodný článok. Ten síce ešte neexistuje, avšak s ním už môžeme počítať.

public function zpracuj($parametry)
{
    $naparsovanaURL = $this->parsujURL($parametry[0]);

    if (empty($naparsovanaURL[0]))
        $this->presmeruj('clanek/uvod');
    $tridaKontroleru = $this->pomlckyDoVelbloudiNotace(array_shift($naparsovanaURL)) . 'Kontroler';

Ak skript pokračuje ďalej, máme názov triedy kontroleru a pozrieme sa, či naozaj existuje. Ak áno, vytvoríme jej inštanciu. Ak nie, presmerujeme na chybovú stránku.

if (file_exists('kontrolery/' . $tridaKontroleru . '.php'))
    $this->kontroler = new $tridaKontroleru;
else
    $this->presmeruj('chyba');

Máme inštanciu vnoreného kontroleru tam, kde sme ju chceli mať. Teraz na vnorenom kontroléra zavoláme tiež metódu spracuj () a necháme ho vykonať nejakú jeho logiku, neskôr to napr. U článku bude jeho vyhľadanie v databáze. Presnejšie kontrolér zavolá logiku v modeli, ale nepredbiehajme.

$this->kontroler->zpracuj($naparsovanaURL);

Zostáva nastavenie pohľadu smerovača, teda šablóny s rozložením webu.

Vytvoríme si niekoľko premenných pre šablónu. Už vieme, že sme v šablóne použili $ titulok, $ klicova_slova a $ popis. Tiež vieme, že premenné šablóne odovzdáme ako kľúče v poli $ this-> data []. Ako hodnoty do šablóny vložíme vždy titulok, popis a kľúčové slová, ktorá má vložený kontrolér. Kód bude vyzerať takto:

$this->data['titulek'] = $this->kontroler->hlavicka['titulek'];
$this->data['popis'] = $this->kontroler->hlavicka['popis'];
$this->data['klicova_slova'] = $this->kontroler->hlavicka['klicova_slova'];

Nakoniec zostáva nastaviť pohľad, to urobíme jednoducho dosadením názvu súboru s pohľadom do atribútu $ pohľad:

// Nastavení hlavní šablony
$this->pohled = 'rozlozeni';

SmerovacKontroler je hotový.

ChybaKontroler

Vytvorme si konečne náš prvý kontrolér pre nejakú súčasť webu. Bude sa samozrejme jednať o chybovú stránku. V priečinku kontrolery založíme ChybaKontroler.php s nasledujúcim obsahom:

class ChybaKontroler extends Kontroler
{
    public function zpracuj($parametry)
    {
    // Hlavička požadavku
    header("HTTP/1.0 404 Not Found");
    // Hlavička stránky
    $this->hlavicka['titulek'] = 'Chyba 404';
    // Nastavení šablony
    $this->pohled = 'chyba';
    }
}

Kontrolér odošle prehliadači hlavičku, aby vedel, že je na chybovej stránke. Inak nerobí nič iné, než že podstránke nastaví titulok a šablónu.

Máme hotovo. To bolo rýchle, že? Podobným spôsobom budeme teraz do systému pridávať ďalšie súčasti.

Zadrôtovanou

A sme vo finále. Do index.php pripojme za volanie metódy spracuj () na smerovači tiež metódu vypisSablonu (). Tu je opäť krásne vidieť, ako sú logika a výpis oddelené na 2 samostané úlohy.

$smerovac->vypisPohled();

Keď teraz zadáme ľubovoľnú URL adresu, budeme presmerovanie na adresu "chyba", kde smerovač zavolá ChybaKontroler. Uvidíme, že zafungoval smerovač a vypísal nám šablónu.

Chyba 404
http://localhos­t/chyba
Šablóna vnoreného kontroleru (ChybaKontroleru) vypísaná nie je, poďme to napraviť. Na prázdne miesto v tagu
v šablóne rozlozeni.phtml vložme šablónu vnoreného kontroleru. Keďže šablóna sa spracováva v SmerovacKontroler, môžeme jednoducho pristúpiť k vnořenému kontroleru ako k inštančný premenné. Toto do pohľadov úplne nepatrí, ale v rozložení je to potrebné:
<?php $this->kontroler->vypisPohled(); ?>

výsledok:

Chyba 404
http://localhos­t/chyba

Konečne niečo funkčného, aj keď je to zatiaľ len chybové stránka :) Nabudúce si v lekcii Kontaktný formulár do systému pridáme jednoduchý kontaktný formulár.


 

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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 4439x (7.18 kB)
Aplikácia je vrátane zdrojových kódov v jazyku PHP

 

Predchádzajúci článok
Smerovač (router)
Všetky články v sekcii
Jednoduchý redakčný systém v PHP objektovo (MVC)
Preskočiť článok
(neodporúčame)
Kontaktný formulár
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity