Statický web v Nette

Tento tutorial vám předvede, jak v Nette udělat jednoduchý web o 3 stránkách s jednoduchým menu pro jeho ovládání.

Dovolil jsem si tutoriál aktualizovat pro Nette 2.0, přiložené zdrojové kódy v archivu ale zůstaly neaktuální (HosipLan)

Doplněny úpravy reflektující Nette 2 beta pro PHP 5.3 (d2c39f5 released on 2011–07–02) Pro PHP 5.2 by mělo stačit zakomentovat use (22)

Co budete potřebovat?

• sandbox z aktuální distribuce Nette Frameworku

Co se naučíte?

• pracovat se sandboxem(adresářovou strukturou aplikace)
• seznámíte se s obsahem životně důležitých souborů index.php a bootstrap.php
• vytvořit Presentery a šablony aplikace
• vytvořit jednoduché menu a přiřadit k němu odkazy
• připojit CSS styly k aplikaci
• vytvořit jednoduchou statickou prezentaci

Adresářová struktura

Je dobré si předem připravit adresářovou strukturu, kde bude Vaše aplikace sídlit. Tu je vhodné logicky rozčlenit podle modelu Model-View-Presenter (MVP). S tím si nemusíte lámat hlavu, protože v distribučním balíčku najdete adresář sandbox, kde je již připravená adresářová struktura pro naši budoucí aplikaci.

Více o doporučené adresářové struktuře najdete v 2. kapitole QuickStartu. Doporučuji si ji prostudovat, protože my tento sandbox použijeme jako výchozí bod našeho tutorialu

Překopírujte tedy obsah adresáře sandbox do připravené složky, nebo zkopírujte celou složku sandbox do vašeho webového prostoru a přejmenujte ji, jak uznáte za vhodné. My si adresář pojmenujeme třeba netteweb.

Pojďme se podívat blíže do struktury sandboxu, nyní adresáře netteweb (ke stažení na konci stránky), na adresáře, které nás budou zajímat:

+-- app/ (výkonné soubory aplikace, např.: bootstrap.php, config.ini)
    +-- presenters/ (definice aplikačního layeru)
    +-- templates/ (aplikační šablony)
+-- libs/ (knihovny aplikace, např.: loader.php, dibi.min.php)
    +-- Nette/
        +-- loader.php (minimalizovaný Nette Framework)
+-- log/ (errorlogy)
+-- temp/ (bude sloužit k ukládání dočasných souborů)
+-- www/ (kořen aplikace, např.: index.php)

Adresář temp a log musí mít správně nastavena práva pro zápis (0777)

index.php

Nyní se podíváme na index.php, kde definujeme pouze cesty k aplikačním adresářům a to formou konstant. Po jejich definici si vyžádáme „starter“ aplikace – bootstrap.php

cesta k souboru: www/index.php

<?php
// absolute filesystem path to this web root
$params['wwwDir'] = __DIR__;

// absolute filesystem path to the application root
$params['appDir'] = realpath(__DIR__ . '/../app');

// load bootstrap file
require $params['appDir'] . '/bootstrap.php';

Při používání Nette Frameworku se doporučuje používat pouze úvodní tag pro php script. Uzavírací tag „?>“ může působit problémy

bootstrap.php

Aktuální bootstrap.php se může v poslední ditribuci lišit, neberte ho jako dogma. Vždy použijte ten z aktuální distribuce, předinstalovaný v sandboxu. Není do něj potřeba zasahovat.

Starter aplikace zavolá Nette Framework a spustí důležitého pomocníka – Laděnku. Ta nám bude neustále nablízku a bude nám pomáhat řešit případné chyby při psaní kódu.

cesta k souboru: app/bootstrap.php

<?php
use Nette\Diagnostics\Debugger,
    Nette\Application\Routers\Route;


// Load Nette Framework
$params['libsDir'] = realpath(__DIR__ . '/../libs');
require $params['libsDir'] . '/Nette/loader.php';


// Enable Nette Debugger for error visualisation & logging
Debugger::$logDirectory = realpath(__DIR__ . '/../log');
Debugger::$strictMode = TRUE;
Debugger::enable();

// Load configuration from config.neon file
$configurator = new Nette\Configurator;
$configurator->container->params += $params;
$configurator->container->params['tempDir'] = realpath(__DIR__ . '/../temp');
$container = $configurator->loadConfig(__DIR__ . '/config.neon');

// Setup router
$router = $container->router;
$router[] = new Route('index.php', 'Homepage:default', Route::ONE_WAY);
$router[] = new Route('<presenter>/<action>[/<id>]', 'Homepage:default');


// Configure and run the application!
$application = $container->application;
//$application->catchExceptions = TRUE;
$application->errorPresenter = 'Error';
$application->run();

Pro zajímavost si také prohlédněte soubor config.neon umístěný v adresáři app a mrkněte, k čemu je dobrý. Pro budoucnost bude rovněž dobré seznámit se s routováním, které jsou rovněž ve starteru aplikace – v souboru bootstrap.php. Soubor najdeme v adresáři app. Nyní si můžete zkusit spustit aplikaci index.php.

V opačném případě zkuste FAQ nebo forum

Vytvoření základního Presenteru (Controlleru)

V první řade je potřeba seznámit se s procesem návrhu Presenter/View(Action) a životním cyklem Presenteru v Nette aplikaci. My se budeme držet modelu, kdy si pro každou stránku vytvoříme vlastní Presenter, protože tušíme, že naše webová prezentace se bude v budoucnu rozšiřovat. Tomu však předchází vytvoření abstraktního Presenteru. Pokud je vše jasné, vytvoříme ho – BasePresenter.php. Je to základní stavební kámen pro ostatní Presentery. Normálně se v něm nachází metody startup(), beforeRender() atd. My pro náš jednoduchý web nebudeme nic z toho potřebovat, takže bude vypadat takto:

cesta k souboru: app/presenters/BasePresenter.php

<?php
use Nette\Application\UI\Presenter;

abstract class BasePresenter extends Presenter
{

}

Náš web bude mít 3 stránky s menu: Domů | Nabídka | Kontakt. Budeme tedy potřebovat 3 Presentery a to: HomepagePresenter.php, ProductPresenter.php, ContactPresenter.php. My si ukážeme, jak udělat HomepagePresenter.php. Další 2 už zvládnete sami.

HomepagePresenter bude vypadat takto:

cesta k souboru: app/presenters/HomepagePresenter.php

<?php
class HomepagePresenter extends BasePresenter
{

}

Co je zde důležité? Třida HomepagePresenter, tím, že je definována, automaticky hledá šablony @layout.latte a /Homepage/default.latte

Při tvorbě názvu je třeba dodržovat tzv. velbloudí notaci, tzn. název třídy musí začínat velkým písmenem

Vytvoření základní šablony (@layout.latte)

Nette Framework hledá vždy základní šablonu v umístění app/templates/ pod názvem @layout.latte. Je to výchozí šablona, do které se pak nahrávají další podšablony/bloky. Takže pokud máme vytvořenou nějakou obecnou/grafickou šablonu, stačí ji přejmenovat, správně umístit a Nette se postará o její zobrazení.

Aby tato šablona měla praktický význam a mohla spolupracovat s ostatními, musíme jí vyznačit místa, kde se bude vykreslovat a kam se vloží obsah jiné šablony, případně šablon. V šablonách lze používat i různé filtry a teď právě nastala vhodná chvíle pro využití filtru Latte, díky němuž se nám zjednoduší a zpřehlední zápis PHP kódu. Následující script Vám ukáže, jak označit místa, kam se bude vkládat obsah jiných šablon a jak vypadá zápis s využitím filtru Latte:

cesta k souboru: app/templates/@layout.latte

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="description" content="Nette Framework Static Web">
    <meta name="robots" content="{$robots}" n:ifset="$robots">

    <title>{include #title}</title>

    <link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css" type="text/css">
    <link rel="stylesheet" media="print" href="{$basePath}/css/print.css" type="text/css">
    <link rel="shortcut icon" href="{$basePath}/favicon.ico" type="image/x-icon">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="{$basePath}/js/netteForms.js"></script>
    {block head}{/block}
</head>

<body>
<div id="header">
    <h1>Nette Fabrika, s.r.o.</h1>

    <h2>Otevřeli jsme továrnu na sny...</h2>
</div>
    <!--vložení bloku content-->
    {include #content}

</body>
</html>

Nyní musíme ještě vytvořit šablonu pro HomepagePresenter a další 2 presentery, které jste vytvořili již samostatně. Pro tento Presenter Nette očekává šablonu v adresáři app/templates/Homepage pod názvem default.latte. Tady je její podoba:

cesta k souboru: app/templates/Homepage/default.latte

{block title}
    <title>Nette Fabrika, s.r.o. - Úvod</title>
{/block}

{block content}
    <div>
        <p>Vítejte v Nette Fabrice!</p>
    </div>
{/block}

To je důležité, protože název adresáře Homepage nám vlastně páruje tuto šablonu s HomepagePresenterem, který jsme si před malou chvílí vytvořili. V případě jiného pojmenování a nedodržení párování by došlo k chybě. Stejný problém vznikne, pokud pojmenujeme šablonu jinak, než default.latte.

V Nette se pro názvy šablon používá přípona *.latte

Vytvoření menu

K vytvoření menu upravíme šablonu @layout.latte v místě, kde menu chceme mít zobrazené:

cesta k souboru: app/templates/@layout.latte

<ul n:inner-foreach="$menuItems as $item => $link">
    <li>{$item}</li>
</ul>

Tím je úprava základní šablony hotová. Teď stačí v BasePresenteru nachystat data pro proměnnou $menuItems.

cesta k souboru: app/presenters/BasePresenter.php

<?php
abstract class BasePresenter extends Presenter
{

    public function beforeRender()
    {
        $this->template->menuItems = array(
            'Domů' => 'Homepage:',
            'Produkty' => 'Products:',
            'Kontakty' => 'Contacts:',
        );
    }

}

Definici proměnné je třeba umístit do metody beforeRender(), aby byla dostupná pro všechny view.

Doplnění odkazů z menu

Nette Framework vnímá linky/odkazy jako pokyny k nějaké akci, přesněji řečeno kliknutím na odkaz spustíte nějakou funkci/metodu. V praxi to znamená, že se vůbec nestaráte o URL odkazu, link totiž volá metodu a je tak na URL nezávislý

My jednoduše upravíme šablonu @layout.latte s použitím filtru Latte:

cesta k souboru: app/templates/@layout.latte

<ul n:inner-foreach="$menuItems as $item => $link">
    <li><a n:href="$link">{$item}</a></li>
</ul>

Připojení CSS stylu k šabloně

Na chvilku si oddechneme a budeme se trochu věnovat grafice. Tzn. nastylujeme si již vytvořené položky v šabloně pomocí CSS. Můžete použít připravený styl v zazipované aplikaci (dole na stránce) a umístit je do www/css/screen.css Nyní připojíme tento styl k naší šabloně. Využijeme k tomu zabudované Nette proměnné $basePath. Provedeme následující zápis v základní šabloně, který netřeba komentovat.

cesta k souboru: app/templates/@layout.latte

<head>
...
<link href="{$basePath}/css/screen.css" rel="stylesheet" type="text/css" />
...
</head>

Dokončení webu

Tímto je web téměř hotový… Na závěr ještě zvýrazníme položku menu pro stránku, na které se právě nacházíme:

cesta k souboru: app/templates/@layout.latte

<li {ifCurrent $link}class="current"{/ifCurrent}><a n:href="$link">{$item}</a></li>

Pro vytvoření stránek Produkty a Kontakty je třeba vytvořit ve složce app příslušné presentery ProductsPresenter, ContactsPresenter, obdobně jako tomu bylo u HomepagePresenter a ve složce templates vytvořit odpovídající adresáře Products a Contacts. Obsahem těchto složek bude šablona presenteru s názvem default.latte. Její obsah musí obsahovat bloky title a content, stejně jako u šablony pro HomepagePresenter.

---

Login to submit a comment