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í.
Pro verzi Nette 2 beta pro PHP 5.3 (2011–07–02).
Co budete potřebovat?
sandbox
z aktuální distribuce Nette
Co se naučíte?
- pracovat se sandboxem (adresářovou strukturou aplikace)
- 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 architektury 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 aplikaci.
Pokud se s Nette setkáváte poprvé, projděte si Quickstart, který přehledně popisuje základní mechanismy Nette na konkrétní aplikaci.
Nyní si můžete zkusit spustit aplikaci.

Pokud váš prohlížeč zobrazil uvítací obrazovku frameworku, je vše v pořádku a můžeme se pustit do našeho webu. V opačném případě zkuste FAQ nebo forum
Vytvoření základního Presenteru
V první řade je potřeba seznámit se s procesem návrhu Presenter/View(Action) a životním cyklem presenteru.
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 a bude
vypadat takto:
app/Presenters/BasePresenter.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
a další 2 už zvládnete sami.
app/Presenters/HomepagePresenter.php
class HomepagePresenter extends BasePresenter
{
}
Co je zde důležité? Třída HomepagePresenter
, tím, že je definována, automaticky hledá šablony
app/templates/@layout.latte
a app/templates/Homepage/default.latte
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:
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="https://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 samostatně. Pro
tento presenter Nette očekává šablonu v adresáři app/templates/Homepage
pod názvem
default.latte
. Tady je její podoba:
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
.
Vytvoření menu
K vytvoření menu upravíme šablonu @layout.latte
v místě, kde menu chceme mít zobrazené:
<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
.
app/Presenters/BasePresenter.php
abstract class BasePresenter extends Presenter
{
public function beforeRender()
{
parent::beforeRender(); // nezapomeňte volat metodu předka, stejně jako u startup()
$this->template->menuItems = [
'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:
<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.
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:
<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
.