Nette Documentation Preview

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.