search

contributte / planette-site

💀 [DISCONTINUED] All the roads go through the Planette
https://planette.vercel.app
MIT License
9 stars 3 forks source link

2015-04-24: staticky-web-v-nette #37

Open paveljanda opened 7 years ago

paveljanda commented 7 years ago

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?

Co se naučíte?

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.

scr2.png### 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řida 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="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 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 = 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:

<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.

paveljanda commented 7 years ago

author: 2651 ()