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.

Kompletní aplikaci naleznete na GitHubu.

Nainstalujte si prosím kvalitní IDE a všechny potřebné pluginy, nesmírně vás to zefektivní.

Tento QuickStart byl napsán pro Nette Framework 3.1 a PHP 7.4, nebo novější. Úplně první věc, kterou bychom měli udělat, je zkontrolovat, zda náš server splňuje požadavky pro běh Nette Frameworku. To by s největší pravděpodobností mělo být v pořádku, ale jen pro jistotu, nechceme začínat na nefunkčním prostředí.

Nette Framework můžeme stáhnout manuálně, ale doporučená cesta je začít nový projekt s využitím Composeru. Pokud Composer neznáte, určitě byste měli začít s ním. Je to velice jednoduchý a užitečný nástroj. Vše se dozvíte v dokumentaci Composeru.

S Composerem si můžeme velmi jednoduše stáhnout a nainstalovat základní skeleton aplikace, známý jako Web Project, který již obsahuje Nette Framework. Abychom mohli založit projekt, najdeme si kořenový adresář webového serveru (např. /var/www nebo C:\InetPub) a pomocí příkazové řádky spustíme následující příkaz:

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

Web Project se následně stáhne do složky nette-blog.

Pokud nechcete použít Composer, stáhněte si archív, rozbalte jej a zkopírujte do kořenového adresáře webového serveru a přejmenujte na nette-blog. Framework se nachází ve složce vendor.

Pokud vyvíjíte na macOS nebo na Linuxu (nebo na jakémkoliv jiném systému založeném na Unixu), budete muset ještě nastavit práva zápisu webovému serveru.

Uvítací stránka

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.

Obsah Web Projectu

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

nette-blog/
├── app/              ← adresář s aplikací
│   ├── Presenters/   ← třídy presenterů
│   │   └── templates/← šablony
│   ├── Router/       ← konfigurace URL adres
│   └── 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/Presenters/templates/Homepage/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/Presenters/HomepagePresenter.php (např. odstraněním složené závorky v definici třídy HomepagePresenter) 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:

$configurator->setDebugMode(false);
$configurator->enableTracy($appDir . '/log');

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!