Nette Documentation Preview

syntax 
Píšeme první aplikaci!
**********************

.[perex]
Poznejme spolu Nette Framework při vytváření jednoduchého blogu s komentáři. Jdeme na to!

Již po prvních dvou kapitolách budeme mít svůj vlastní funkční blog a budeme moci publikovat své skvělé příspěvky, i když funkce budou zatím do značné míry omezeny. Měli byste si přečíst také následující kapitoly, kde si naprogramujeme přidávání komentářů, editování článků a na závěr blog zabezpečíme.

.[tip]
Tento návod předpokládá, že jste přečetli stránku [Instalace |nette:installation] a úspěšně si připravili potřebné nástroje. Také předpokládá, že rozumíte [objektově orientovanému programování v PHP |nette:introduction-to-object-oriented-programming].

Používejte prosím PHP 8.1 nebo novější. Kompletní aplikaci najdete [na GitHubu |https://github.com/nette-examples/quickstart/tree/v4.0].


Uvítací stránka
===============

Začněme vytvořením nového projektu do adresáře `nette-blog`:

```shell
composer create-project nette/web-project nette-blog
```

V tuto chvíli by už měla úvodní stránka Web Projectu fungovat. Vyzkoušíme to otevřením prohlížeče na následující URL adrese:

```
http://localhost/nette-blog/www/
```

a uvidíme úvodní stránku Nette Frameworku:

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

Aplikace funguje a můžete začít dělat úpravy.

.[note]
Pokud nastal problém, [zkuste těchto pár tipů |nette:troubleshooting#Nejde mi Nette zobrazuje se bílá stránka].


Obsah Web Projectu
==================

Web Project má následující strukturu:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← adresář s aplikací
│   ├── <b>Core/</b>         ← základní třídy nutné pro chod
│   ├── <b>Presentation/</b> ← presentery, šablony & spol.
│   │   └── <b>Home/</b>     ← adresář presenteru Home
│   └── <b>Bootstrap.php</b> ← zaváděcí třída Bootstrap
├── <b>assets/</b>           ← zdroje (SCSS, TypeScript, zdrojové obrázky)
├── <b>bin/</b>              ← skripty spouštěné z příkazové řádky
├── <b>config/</b>           ← konfigurační soubory
├── <b>log/</b>              ← logování chyb
├── <b>temp/</b>             ← dočasné soubory, cache, …
├── <b>vendor/</b>           ← knihovny instalované Composerem
│   └── <b>autoload.php</b>  ← autoloading všech nainstalovaných balíčků
└── <b>www/</b>              ← veřejný adresář - jediný přístupný z prohlížeče
    ├── <b>assets/</b>       ← zkompilované statické soubory (CSS, JS, obrázky, …)
    └── <b>index.php</b>     ← prvotní soubor, kterým se aplikace spouští
\--

Adresář `www/` je určen pro ukládání obrázků, JavaScript souborů, CSS stylů a dalších veřejně přístupných souborů. Pouze tento adresář je přístupný z internetu, takže nastavte kořenový adresář vaší aplikace tak, aby směřoval právě sem (to můžete nastavit v konfiguraci Apache nebo nginx, ale pojďme to udělat později, teď to není důležité).

Nejdůležitější složka je pro nás `app/`. Zde nalezneme soubor `Bootstrap.php`, ve kterém je třída, která slouží k načtení celého frameworku a nastavení aplikace. Aktivuje se zde [autoloading |robot-loader:], nastaví se zde [debugger |tracy:] a [routy |application:routing].


Úklid
=====

Web Project obsahuje úvodní stránku, kterou smažeme předtím, než začneme něco programovat. Bez obav tedy nahradíme obsah souboru `app/Presentation/Home/default.latte` za "Hello world!".


[* qs-hello.webp .{url:-} *]


Tracy (debugger)
================

Extrémně důležitý nástroj pro vývoj je [ladicí nástroj Tracy |tracy:]. Vyzkoušejte si vyvolání nějaké chyby v souboru `app/Presentation/Home/HomePresenter.php` (např. odstraněním složené závorky v definici třídy HomePresenter) a podívejte se, co se stane. Vyskočí oznamovací stránka, která chybu srozumitelně popisuje.

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracy nám ohromně pomůže, až budeme hledat chyby v aplikaci. Také si všimněte plovoucího Tracy Baru v pravém dolním rohu obrazovky, který obsahuje informace z běhu aplikace.

[* qs-tracybar.webp .{url:-} *]

V produkčním režimu je Tracy samozřejmě vypnutá a nezobrazuje žádné citlivé informace. Všechny chyby jsou v tomto případě uloženy ve složce `log/`. Pojďme si to vyzkoušet. V souboru `app/Bootstrap.php` odkomentujeme následující řádek a změníme parametr volání na `false`, aby kód vypadal takto:

```php .{file:app/Bootstrap.php}
// ...
$this->configurator->setDebugMode(false);
```

Po obnovení stránky již Tracy neuvidíme. Místo ní se zobrazí uživatelsky přívětivá zpráva:

[* qs-fatal.webp .{url:-}(error screen) *]

Nyní se podívejme do adresáře `log/`. Zde (v souboru `exception.log`) nalezneme zalogovanou chybu a také již známou stránku s chybovou hláškou (uloženou jako HTML soubor s názvem začínajícím na `exception-`).

Zakomentujeme opět řádek `// $this->configurator->setDebugMode(false);`. Tracy automaticky povolí vývojářský režim na localhostu a zakáže ho všude jinde.

Chybu, kterou jsme vytvořili, můžeme opravit a pokračovat v psaní aplikace.


Pošlete dík
===========

Ukážeme vám trik, kterým potěšíte autory open source. Jednoduchým způsobem dáte na GitHubu hvězdičku knihovnám, které váš projekt používá. Stačí spustit:

```shell
composer thanks
```

Zkuste si to!

{{priority: -1}}
{{maintitle: Nette Framework tutoriál: první aplikace v PHP}}
{{description: Poznejte Nette Framework při tvorbě jednoduchého blogu s komentáři, krok za krokem. Nainstalujete Web Project, spustíte aplikaci a seznámíte se s Tracy.}}

Píšeme první aplikaci!

Poznejme spolu Nette Framework při vytváření jednoduchého blogu s komentáři. Jdeme na to!

Již po prvních dvou kapitolách budeme mít svůj vlastní funkční blog a budeme moci publikovat své skvělé příspěvky, i když funkce budou zatím do značné míry omezeny. Měli byste si přečíst také následující kapitoly, kde si naprogramujeme přidávání komentářů, editování článků a na závěr blog zabezpečíme.

Tento návod předpokládá, že jste přečetli stránku Instalace a úspěšně si připravili potřebné nástroje. Také předpokládá, že rozumíte objektově orientovanému programování v PHP.

Používejte prosím PHP 8.1 nebo novější. Kompletní aplikaci najdete na GitHubu.

Uvítací stránka

Začněme vytvořením nového projektu do adresáře nette-blog:

composer create-project nette/web-project nette-blog

V tuto chvíli by už měla úvodní stránka Web Projectu fungovat. Vyzkoušíme to otevřením prohlížeče na následující URL adrese:

http://localhost/nette-blog/www/

a uvidíme úvodní stránku Nette Frameworku:

Aplikace funguje a můžete začít dělat úpravy.

Pokud nastal problém, zkuste těchto pár tipů.

Obsah Web Projectu

Web Project má následující strukturu:

nette-blog/
├── app/              ← adresář s aplikací
│   ├── Core/         ← základní třídy nutné pro chod
│   ├── Presentation/ ← presentery, šablony & spol.
│   │   └── Home/     ← adresář presenteru Home
│   └── Bootstrap.php ← zaváděcí třída Bootstrap
├── assets/           ← zdroje (SCSS, TypeScript, zdrojové obrázky)
├── bin/              ← skripty spouštěné z příkazové řádky
├── config/           ← konfigurační soubory
├── log/              ← logování chyb
├── temp/             ← dočasné soubory, cache, …
├── vendor/           ← knihovny instalované Composerem
│   └── autoload.php  ← autoloading všech nainstalovaných balíčků
└── www/              ← veřejný adresář - jediný přístupný z prohlížeče
    ├── assets/       ← zkompilované statické soubory (CSS, JS, obrázky, …)
    └── index.php     ← prvotní soubor, kterým se aplikace spouští

Adresář www/ je určen pro ukládání obrázků, JavaScript souborů, CSS stylů a dalších veřejně přístupných souborů. Pouze tento adresář je přístupný z internetu, takže nastavte kořenový adresář vaší aplikace tak, aby směřoval právě sem (to můžete nastavit v konfiguraci Apache nebo nginx, ale pojďme to udělat později, teď to není důležité).

Nejdůležitější složka je pro nás app/. Zde nalezneme soubor Bootstrap.php, ve kterém je třída, která slouží k načtení celého frameworku a nastavení aplikace. Aktivuje se zde autoloading, nastaví se zde debugger a routy.

Úklid

Web Project obsahuje úvodní stránku, kterou smažeme předtím, než začneme něco programovat. Bez obav tedy nahradíme obsah souboru app/Presentation/Home/default.latte za „Hello world!“.

Tracy (debugger)

Extrémně důležitý nástroj pro vývoj je ladicí nástroj Tracy. Vyzkoušejte si vyvolání nějaké chyby v souboru app/Presentation/Home/HomePresenter.php (např. odstraněním složené závorky v definici třídy HomePresenter) a podívejte se, co se stane. Vyskočí oznamovací stránka, která chybu srozumitelně popisuje.

debugger screen

Tracy nám ohromně pomůže, až budeme hledat chyby v aplikaci. Také si všimněte plovoucího Tracy Baru v pravém dolním rohu obrazovky, který obsahuje informace z běhu aplikace.

V produkčním režimu je Tracy samozřejmě vypnutá a nezobrazuje žádné citlivé informace. Všechny chyby jsou v tomto případě uloženy ve složce log/. Pojďme si to vyzkoušet. V souboru app/Bootstrap.php odkomentujeme následující řádek a změníme parametr volání na false, aby kód vypadal takto:

// ...
$this->configurator->setDebugMode(false);

Po obnovení stránky již Tracy neuvidíme. Místo ní se zobrazí uživatelsky přívětivá zpráva:

error screen

Nyní se podívejme do adresáře log/. Zde (v souboru exception.log) nalezneme zalogovanou chybu a také již známou stránku s chybovou hláškou (uloženou jako HTML soubor s názvem začínajícím na exception-).

Zakomentujeme opět řádek // $this->configurator->setDebugMode(false);. Tracy automaticky povolí vývojářský režim na localhostu a zakáže ho všude jinde.

Chybu, kterou jsme vytvořili, můžeme opravit a pokračovat v psaní aplikace.

Pošlete dík

Ukážeme vám trik, kterým potěšíte autory open source. Jednoduchým způsobem dáte na GitHubu hvězdičku knihovnám, které váš projekt používá. Stačí spustit:

composer thanks

Zkuste si to!