Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
discount week 30

Lekce 4 - Propojení kontroleru a pohledu

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 si propojíme pohled s kontrolerem 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ář.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Směrovač (router)
Všechny články v sekci
MVC - Jednoduchý redakční systém v PHP objektově
Přeskočit článek
(nedoporučujeme)
Kontaktní formulář
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
59 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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

Avatar
Jaromír Křivánek:3.6.2021 12:54

Pravděpodobně nemáš projekt přímo ve složce htdocs pak je třeba kouknout na odkaz v lekci č. 2 cca 5. odstavec začínající : "Pokud máte na localhostu více projektů..." Pak lze spouštět projekt zadáním do prohlížeče např. "mujprojekt.lo­calhost". Pro spouštění přímo z NetBeans je třeba upravit konfigurační soubor projektu "nbproject/pri­vate/private.pro­perties" konkrétně položku url.

 
Odpovědět
3.6.2021 12:54
Avatar
David Vlček
Člen
Avatar
David Vlček:26.10.2021 8:24

Zdravíčko. Prosím pomoc, zasekl jsem se na jendom problému. Pokud web spustím na windows s xampp, vše funguje jak má, jak na localhostu, tak i na jinem zařízení na síti. Ale když web překopíruju na apache2 server, co mi běží na Pi, tak nefunguje ani na localhostu. Přesměruje se na /clanek/uvod, ale tam skončí na systémové chybě 404, na to vlastní mě ani nepřesměruje. Tuším zradu v konfiguraci apache, ale tam jsem ztracený. Dík

Odpovědět
26.10.2021 8:24
Nevěřím, že každý dokáže všechno co chce. Věřím ale, že by to měl zkusit.
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na David Vlček
Samuel Hél:26.10.2021 15:07

Ahoj, máš na Pi nainstalovaný i databázový server? Třeba vše funguje, jen nemá co zobrazit, když buďto neexistuje databáze nebo je prázdná.

 
Odpovědět
26.10.2021 15:07
Avatar
David Vlček
Člen
Avatar
Odpovídá na Samuel Hél
David Vlček:26.10.2021 16:47

Ano, mám tam MariaDB, ale web je přesně ve stavu kdy končí tahle kapitola. S databází tam v kódu vůbec nepracuju. Když si na Windows v xamppu vypnu db server, web funguje pořád. Na Pi nikoliv. :-(

Odpovědět
26.10.2021 16:47
Nevěřím, že každý dokáže všechno co chce. Věřím ale, že by to měl zkusit.
Avatar
David Vlček
Člen
Avatar
Odpovídá na Samuel Hél
David Vlček:26.10.2021 17:02

Už jsem na to přišel, chyba byla v konfiguraci apache2, jak jsem si myslel. Na složce /var/WWW/ bylo nastaveno AllowOverride None. Změnil jsem to na All. :-)

Odpovědět
26.10.2021 17:02
Nevěřím, že každý dokáže všechno co chce. Věřím ale, že by to měl zkusit.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jana Cibulková:8.12.2021 16:21

Trochu se začínám ztrácet. Asi si to budu muset zakreslit, co kde je a šipky :-)

 
Odpovědět
8.12.2021 16:21
Avatar
Jan Zahradník:22.12.2021 20:14

Ahoj, vůbec netuším, jak v NetBeans vytvořit file s příponou phtml. Zkoušel jsem najít a proklikal všechny možnosti vytvoření souborů, ale tato přípona se tam neobjevila. Nebo to může být normální html s tím, že bude obsahovat php?
Díky za pomoc
Honza

 
Odpovědět
22.12.2021 20:14
Avatar
Odpovídá na Jan Zahradník
Petra Petty Kunzová:23. února 22:05

Taky mi .phtml nešlo v NetBeans(dále jen nb) vytvořit. Nicméně vytvořila jsem normálně .php soubor v nb a pak přes průzkumníka a Poznámkový blok dala uložit jako .phtml a přes Průzkumníka vyměnila do složky. Teda nevím jestli ti to skoro po dvou měsících je platné, ale aspoň pro ostatní kdyby náhodou ..

Odpovědět
23. února 22:05
Kam míří naše pozornost, tam energie a tam se i objeví naše výsledky .
Avatar
Odpovídá na Petra Petty Kunzová
Jan Zahradník:1. května 21:34

Díky. Už mi to také někdo poradil, abych to přejmenoval. Ten koment byl hlavně pro tvůrce stránek, aby se zamysleli nad tím, jak je "jednoduché" se podle postupů učit. Bohužel se asi ani po čtyřech měsících nic nezměnilo, pokud tam návod není doplněn. Tedy podle Tvé odpovědi nebyl před koncem února. To není příliš povzbudivé a s komentáři se tedy stále moc nepracuje :-(((

 
Odpovědět
1. května 21:34
Avatar
Zdeněk Beránek:10. května 10:42

Také je možné vytvořit prázdný soubor. New file, categories Other a téměř na konci před Folder je Empty File. Tomuto typu souboru můžete napsat jakoukoliv koncovku.

 
Odpovědět
10. května 10:42
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 146. Zobrazit vše