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 tento okamžik by měla již ú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
│   ├── UI/           ← presentery, šablony & spol.
│   │   └── Home/     ← adresář presenteru Home
│   └── Bootstrap.php ← zaváděcí třída Bootstrap
├── 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
    └── 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/UI/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/UI/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.

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 módu je Tracy samozřejmě vypnuta 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:

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í na exception-).

Zakomentujeme opět řádek // $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!