Body zdarma Java týden
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

Lekce 4 - Propojení kontroleru a pohledu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Směrovač (router), jsme si vytvořili směrovač, tedy router. Skončili jsme tím, že z URL adresy poznáme jméno třídy kontroleru a jeho další parametry. Dnes systém částečně zprovozníme a zobrazíme si jednoduchý článek.

Pohledy

Začněme s něčím jednoduchým a připravme si 2 pohledy. Ty následně propojíme s kontrolery a konečně si něco zobrazíme.

Rozložení stránky

Jak víme, kontroler má v sobě uložený název pohledu, který uživateli zobrazí. SmerovacKontroler bude zobrazovat pohled s rozložením stránky, to bude obsahovat hlavičku, navigační menu, patičku a vše kolem stránky. Co obsahovat nebude bude ten hlavní obsah, který se sem vloží jako pohled z vnořeného kontroleru.

Jelikož v tomto seriálu nemá smysl popisovat HTML a CSS, připravil jsem pro vás jednoduchou šablonu pro rozložení stránky. Ve složce pohledy si vytvoříme soubor rozlozeni.phtml. Do něj vložíme následující 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 zdrojovém kódu si všimneme několika věcí. Zaprvné je to z 99% HTML, je hezky přehledný a dobře strukturovaný. Také používám HTML 5 tagy, ale to by dnes již mělo být samozřejmostí.

V hlavičce nalezneme tag <base>, ten určuje kořenovou složku webu. Ta je důležitá např. pro obrázky, soubory css, ikony atd. Jelikož používáme hezká URL s lomítky, prohlížeč by si myslel, že jsme zanořeni v nějakých složkách. Takto mu explicitně sdělíme, že chceme pracovat z kořene. Na produkci si localhost musíte přepsat na absolutní URL adresu webu, tedy např.: "http://www.do­mena.cz/". Teoreticky by měla fungovat i hodnota "/", ale jeden nejmenovaný prohlížeč s modrým "e" to neumí.

Všimneme si PHP direktiv v hlavičce stránky:

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

Těmi vkládáme proměnné z kontroleru (přesněji z jeho pole $data). V žádném případě nebudeme v šabloně vkládat HTML do PHP, naopak vkládáme minimum PHP do HTML a to ještě tak, aby zůstala zachována HTML struktura. Jistě víte, že:

<?= $promenna ?>

je zkrácený zápis tohoto:

<?php echo $promenna; ?>

PHP má mnoho takovýchto syntaktických zlepšováků pro šablony a proto si s ním krásně vystačíme bez dalšiho šablonovacího jazyka. Často zaměňuji termíny šablona a pohled, myslím tím totéž, jelikož v našem MVC je pohled realizován phtml šablonou.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Poslední zajímavou věcí je tělo článku, tedy mezi tagy <article>. Všimněte si, že je zatím prázdné, časem právě sem vypíšeme pohled vnořeného kontroleru.

Chyba

Jako další šablonu vytvoříme stránku chybovou s názvem chyba.phtml. Zobrazí se v případě, že uživatel zadal nesmyslnou URL adresu. Její HTML kód bude následující:

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

Styl

Co by to bylo za web bez stylu? Připravil jsem samozřejmě i ten. V kořenové složce s webem vytvoříme soubor style.css, jeho obsah bude následující:

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 něm není nic zajímavého.

Výpis pohledů

Pohledy máme založené, kontrolery máme založené, pojďme aplikaci konečně zprovoznit.

Přesuneme se do SmerovacKontroler, kde v metodě zpracuj() vymažeme kontrolní výpisy z minula a budeme v ní pokračovat. Pokud není zadán žádný kontroler (první parametr URL adresy je prázdný nebo úplně chybí), přesměrujeme na úvodní článek. Ten sice ještě neexistuje, nicméně s ním již můžeme počítat.

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

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

Pokud skript pokračuje dál, máme název třídy kontroleru a podíváme se, zda opravdu existuje. Pokud ano, vytvoříme její instanci. Pokud ne, přesměrujeme na chybovou stránku.

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

Máme instanci vnořeného kontroleru tam, kde jsme ji chtěli mít. Nyní na vnořeném kontroleru zavoláme také metodu zpracuj() a necháme ho provést nějakou jeho logiku, později to např. u článku bude jeho vyhledání v databázi. Přesněji kontroler zavolá logiku v modelu, ale nepředbíhejme.

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

Zbývá nastavení pohledu směrovače, tedy šablony s rozložením webu.

Vytvoříme si několik proměnných pro šablonu. Již víme, že jsme v šabloně použili $titulek, $klicova_slova a $popis. Také víme, že proměnné šabloně předáme jako klíče v poli $this->data[]. Jako hodnoty do šablony vložíme vždy titulek, popis a klíčová slova, která má vložený kontroler. Kód bude vypadat takto:

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

Nakonec zbývá nastavit pohled, to uděláme jednoduše dosazením názvu souboru s pohledem do atributu $pohled:

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

SmerovacKontroler je hotový.

ChybaKontroler

Vytvořme si konečně náš první kontroler pro nějakou součást webu. Bude se samozřejmě jednat o chybovou stránku. Ve složce kontrolery založíme ChybaKontroler.php s následujícím obsahem:

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';
    }
}

Kontroler odešle prohlížeči hlavičku, aby věděl, že je na chybové stránce. Jinak nedělá nic jiného, než že podstránce nastaví titulek a šablonu.

Máme hotovo. To bylo rychlé, že? Podobným způsobem budeme nyní do systému přidávat další součásti.

Zadrátování

A jsme ve finále. Do index.php připojme za volání metody zpracuj() na směrovači také metodu vypisSablonu(). Zde je opět krásně vidět, jak jsou logika a výpis odděleny na 2 samostané úlohy.

$smerovac->vypisPohled();

Když nyní zadáme libovolnou URL adresu, budeme přesměrování na adresu "chyba", kde směrovač zavolá ChybaKontroler. Uvidíme, že zafungoval směrovač a vypsal nám šablonu.

Chyba 404
http://localhos­t/chyba

Šablona vnořeného kontroleru (ChybaKontroleru) vypsaná není, pojďme to napravit. Na prázdné místo v tagu <article> v šabloně rozlozeni.phtml vložme šablonu vnořeného kontroleru. Jelikož šablona se zpracovává v SmerovacKontroler, můžeme jednoduše přistoupit k vnořenému kontroleru jako k instanční proměnné. Toto do pohledů úplně nepatří, ale v rozložení je to nutné:

<?php $this->kontroler->vypisPohled(); ?>

Výsledek:

Chyba 404
http://localhos­t/chyba

Konečně něco funkčního, i když je to zatím jen chybová stránka :) Příště si v lekci Kontaktní formulář do systému přidáme jednoduchý kontaktní formulář.


 

Stáhnout

Staženo 3421x (7 kB)
Aplikace je včetně zdrojových kódů v jazyce PHP

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
25 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Směrovač (router)
Všechny články v sekci
Jednoduchý redakční systém v PHP objektově (MVC)
Miniatura
Následující článek
Kontaktní formulář
Aktivity (9)

 

 

Komentáře
Zobrazit starší komentáře (121)

Avatar
MicBlack
Člen
Avatar
MicBlack:30.10.2017 15:39

Ahoj, chtěl bych se jen zeptat ohledně pohledů. Jak to, že se v proměnné pohledy nepřepíšou a vyrenderují se vždy všechny, které chceme načíst, když na pohled máme jen jednu proměnnou (protected $pohled)? Je to tím, že pro každý pohled máme vždy jinou instanci? Např: pro pohled 'rozlozeni.phtml' startujeme 1 instanci, pro pohled 'chyba.phtml' druhou? Díky moc za reakce.

 
Odpovědět 30.10.2017 15:39
Avatar
FiftypiSoftware:7.8.2018 22:54

Bohužel mi nefunguje vkládání do šablony...
Mám šablonu error a home (obojí jako *.phtml). To je obsah stránek, ale ten obsah se do rozložení nepřidá :/

 
Odpovědět 7.8.2018 22:54
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na FiftypiSoftware
David Čápka:7.8.2018 23:31

Pod lekcemi máš archiv s projektem ke stažení, můžeš si tak najít chybu.

Odpovědět 7.8.2018 23:31
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Marty
Člen
Avatar
Marty:21.10.2018 2:39

MVC je opravdu geniální! :) Jen pro ujasnění.

Jako poslední do .htaccess přidáme zpracování přípony .phtml, aby nám nikdo nekoukal do zdrojáků šablon. Soubor .phtml se bude chovat úplně stejně, jako soubor .php.

AddType application/x-httpd-php .phtml

K čemu konkrétně slouží v .htaccess tento řádek, když, když do prohlížeče zadám cestu k šabloně "localhost/poh­ledy/sablona.phtml", šablona se mi vesele s chybou, že není objekt $this, zobrazí?

 
Odpovědět 21.10.2018 2:39
Avatar
Mirek
Člen
Avatar
Mirek:13.11.2018 10:01

Myslím, že je poněkud matoucí když v parsujURL() vznikne $naparsovanaURL, z ní pak $rozdelenaCesta a ta se vrátí do zpracuj() do $naparsovanaURL ...

 
Odpovědět 13.11.2018 10:01
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Štěpán
Člen
Avatar
Štěpán:1. dubna 20:29

Čau.. mám asi nějaký jednoduchý problém, ale nevím jak ho vyřešit. Stáhnul jsem si celý projekt a nahrál, stále nic.
Problém mám s tím že po zadání url adresy localhost/projekt mě to automaticky přesune na stránku localhost/chyba
ale soubor .phtml se mi ani nezobrazí.

Editováno 1. dubna 20:29
 
Odpovědět 1. dubna 20:29
Avatar
Štěpán
Člen
Avatar
Štěpán:2. dubna 21:33

aha, zjistil jsem i že když stáhnu celej kód a přepíšu db connection atd. tak mi to furt automaticky hází nevyrenderovanou chyba page.

 
Odpovědět 2. dubna 21:33
Avatar
Zdeněk Kaulfus:8. dubna 10:40

Ahoj, děkuji za seriál je super. Narazil jsem na problém s formátováním po přesunu na jiný (nový) server. Naformátuje se mi pouze <body>, které se zarovná na střed, ale další formátování již není. Pokud se podívám na zdrojový kód, je vše v pořádku.
<body>
<header>
<h1>.....</h1>
</header>
......
Když dám průzkumníka modelu DOM v IE dostanu
<body>
<header></header>
<h1>......</h1>
</header><//header>
.......
takže formátování logicky neproběhne.
Ve Firefoxu a na starém serveru se vše formátuje a funguje v pohodě. Díky za radu, google mi nepomohl.

 
Odpovědět 8. dubna 10:40
Avatar
Zdeněk Kaulfus:8. dubna 11:24

Omlouvám se za dotaz výše, mohl za to IE, doplnil jsem meta http-equiv tag a začalo to fungovat. Omlouvám se a děkuji za seriál

 
Odpovědět 8. dubna 11:24
Avatar
sloviakm
Člen
Avatar
sloviakm:25. dubna 16:49

Dobry den ,
momentalne skumam moznosti popisovaneho serialu a je to celkom v pohode, som rad ze nieco take je :) ale asi som nepochopil jednotlive prepojenie sablon:

Povedzme ze mame sablonu pre clanok a druhu pre clanky a nad to chcem dat navigaciu (Breadcrumb). Ako to urobit efektivne a nenarobit si bordel v MVC a 'nepekne' importy :) a hlavne bez presmerovania , bo to by bolo zbytocne....

 
Odpovědět 25. dubna 16:49
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 131. Zobrazit vše