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.domena.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 tagyChyba
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.
<?php $this->kontroler->vypisPohled(); ?>
výsledok:
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