Lekce 2 - CMS v Nette - Vytvoření projektu a napojení databáze

V minulé lekci, CMS v Nette - Co je CMS a k čemu slouží, jsme se dozvěděli, co je to CMS, k čemu slouží a jaké výhody jeho využívaní má. Nainstalovali jsme si také potřebné nástroje.

V dnešní lekci si vytvoříme nový Nette projekt pomocí nástroje Composer. K tomu využijeme Nette ve verzi 3 a PHP minimálně ve verzi 7.1. Nette Framework si můžeme stáhnou manuálně, ale my začneme 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 na instalaci balíčků a jejich závislosti. Více se můžeme dozvědět v dokumentaci Composeru.

S nástrojem Composer si velmi jednoduše stáhneme a nainstalujeme základní kostru aplikace. Jako první si najdeme kořenový adresář webového serveru (například /var/www nebo C:\XAMPP\htdocs\) a použijeme následující konzolový příkaz:

composer create-project nette/web-project nette-cms

Pokud nechcete použít Composer, stáhněte si archiv Nette, rozbalte jej, zkopírujte ho do kořenového adresáře webového serveru a přejmenujte na nette-cms. Pokud by zdroj již nebyl dostupný, můžete si jej stáhnout v příloze na konci článku.

Uvítací stránka

Po vytvoření Nette projektu ověříme jeho správnou instalaci navštívením adresy http://localhost/nette-cms/www. Pokud je adresa správná, měli bychom vidět tuto úvodní stránku Nette Frameworku:

Struktura projektu

Aplikace má následující strukturu:

nette-blog/
├── app/              ← adresář s aplikací
│   ├── config/       ← konfigurační soubory
│   ├── 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
├── 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ář, který je jako jediný přístupný z prohlížeče
    └── index.php     ← prvotní soubor, kterým se aplikace spouští

Adresář www/ slouží k ukládaní veřejně přístupných souborů jako jsou obrázky, CSS styly či JavaScript soubory. Pouze tento adresář je přístupný z internetu. Pro nás je nejdůležitější adresář app/. Zde nalezneme soubor Bootstrap.php, který slouží k načtení aplikačního frameworku a nastavení aplikace. Pro přístup k projektu bez www v URL upravíme soubor .htaccess v root (kořenové) složce:

Order Allow,Deny
Allow from all

RewriteEngine On
RewriteRule ^(.*)$ www/$1 [L]

Teď budeme pro přístup k aplikaci využívat adresu http://localhost/nette-cms/.

Prvotní úpravy

Než začneme, upravíme si úvodní stránku. Nahradíme tedy obsah souboru app/Presenters/templates/Homepage/default.latte za tento kód:

<div>
    <h2>Hello World!</h2>
</div>

Na naší adrese se objeví tato stránka:

Debugger

Jeden z nejdůležitějších nástrojů při vývoji v Nette frameworku je ladící nástroj Tracy. Je možné jej vyzkoušet vytvořením chyby v některém .php souboru. Otevřeme si soubor app/Presenters/HomepagePresenter.php a schválně vytvoříme chybu v souboru (například přidáním x do HomepagePresenter třídy). Po otevření webové stránky se nám objeví následující hláška:

Tímto způsobem nám Tracy pomáhá odhalovat chyby v aplikaci. Můžeme si také všimnout plovoucího baru v pravé dolní části obrazovky, který se objevuje vždy při zapnutém debug módu. Zobrazuje informace o běhu a načítaní aplikace:

V produkčním módu aplikace je nástroj Tracy vypnutý a nezobrazuje žádné informace. Všechny chyby aplikace ukládá do složky log/. Pokud bychom si chtěli vyzkoušet vypnout Tracy, otevřeme soubor app/Bootstrap.php a přidáme následující řádek nad metodu enableTracy():

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

Po uložení souboru a otevření se nám zobrazí hláška, která hlásí Server Error:

Nyní když se podíváme do složky log/ uvidíme soubor exception.log a jeho HTML verzi začínající exception-, která v názvu obsahuje datum, čas a ID chyby. Zakomentujeme nově přidaný řádek v Bootstrap.php:

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

Vytvoření databáze aplikace

Pro ukládání dat použijeme MySQL databázi, protože je nejvíce rozšířená mezi programátory webových aplikací. Klidně můžete použít jinou, dle vašeho uvážení, ale bude potřeba si upravovat kód pro vaši databázi.

Začneme otevřením aplikace PhpMyAdmin, která je součástí instalace XAMPP. Najdeme ji na adrese localhost/phpmy­admin:

Vytvoříme si naší databázi kliknutím na Nová, vyplníme jméno databáze nette-cms s použitím kódování utf8mb4_czech_ci a klikneme na Vytvořit. Vytvoříme si novou tabulku article buď pomocí SQL skriptu nebo pomocí PhpMyAdmin. Naše tabulka bude mít velikost 7 polí. Využijeme možnosti tréninku psaní SQL dotazů:

DROP TABLE IF EXISTS `article`;
CREATE TABLE IF NOT EXISTS `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `date_add` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `has_picture` int(11) DEFAULT NULL,
  `title` varchar(255) DEFAULT NULL,
  `url` varchar(255) DEFAULT NULL,
  `short_description` varchar(255) DEFAULT NULL,
  `description` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

Následně daný dotaz vložíme do SQL konzole v PhpMyAdmin:

Ještě předtím, než aplikaci propojíme s databází, vytvoříme první články, které vložíme pomocí SQL dotazu do naší databáze:

INSERT INTO `article` (`id`, `date_add`, `has_picture`, `title`, `url`, `short_description`, `description`) VALUES
(1, '2020-03-15 11:54:20', 1, 'Základ PHP', '1-zaklad-php', 'Zde se naučíme základy PHP.', 'Co je to PHP? Jak je rozjet na localu? A na konec základní program Ahoj světe.'),
(2, '2020-03-16 11:05:31', 1, 'CSS Prakticky', '2-css-prakticky', 'Koukneme se na zoubek CSS.', '<p>Co je to CSS? Uděláme první kroky a ovládneme jej. A na konec si ukážeme best-off neboli <strong>BootStrap</strong> <strong>framework</strong>.</p>');

Připojení k databázi

Nyní, když už máme vytvořenou tabulku pro články, můžeme propojit aplikaci s databází a zobrazit články na naší stránce.

Prvně musíme aplikaci říct, jakou databázi má použít. Připojení k databázi nastavíme v souboru app/config/local.neon pomocí DSN a přihlašovacích údajů. Mělo by to vypadat nějak takto:

database:
    dsn: 'mysql:host=127.0.0.1;dbname=nette-cms'
    user: root
    password: *heslo k databázi*

Při úpravě neon souborů je potřeba dbát na vhodné odsazování. Je možné využívat mezery nebo tabulátor, ale ne obojí zároveň. Výchozí soubor využívá tabulátor.

Veškerá konfigurace, včetně konfigurace databáze, je uložena v adresáři /app/config/ v souborech common.neon a local.neon. Soubor common.neon obsahuje globální nastavení aplikace a local.neon pouze ty parametry, které jsou specifické pro aktuální prostředí (rozdíl mezi vývojovým a produkčním serverem apod.).

Teď když aplikace ví, jak se připojit do databáze, musíme zařídit, aby náš Presenter věděl o spojení s databází. Pro získaní spojení využijeme konstruktor Presenteru a náš kód bude vypadat následovně:

<?php

declare(strict_types=1);

namespace App\Presenters;

use Nette;


class HomepagePresenter extends Nette\Application\UI\Presenter
{
    /** @var Nette\Database\Context */
    private $database;

    public function __construct(Nette\Database\Context $database)
    {
        $this->database = $database;
    }

    // ...
}

Načítání příspěvků

Teď, když máme připojení s databází kompletní, můžeme jej využít a načíst články, které jsou v databázi uloženy. Využijeme funkce renderDefault, kde načítáme články z databáze a pošleme je do šablony:

public function renderDefault(): void
{
    $this->template->articles = $this->database->table('article')
        ->order('date_add DESC')
        ->limit(5);
}

Presenter nyní obsahuje jednu renderovací metodu renderDefault(), která předává data z databáze do šablony. Šablony jsou umístěny v app/Presenters/templates/{PresenterName}/{viewName}.latte, takže v tomto případě je šablona umístěna v app/Presenters/templates/Homepage/default.latte. V šabloně nyní bude k dispozici proměnná $articles, ve které jsou příspěvky získané z databáze.

Nyní si upravíme naši šablonu a vložíme do ní tento kód:

{block content}
    <h2>Hello World</h2>
{/block}

Tímto jsme nadefinovali blok content, který bude vložen do hlavního layoutu. Pokud opět obnovíme prohlížeč, uvidíme stránku s textem „Hello World“ (ve zdrojovém kódu i s HTML hlavičkou a patičkou definovanou v @layout.latte).

Nyní můžeme vykreslit příspěvky, které jsme si v Presenteru načetli a nahradíme tag <h2>:

{block content}
    <div n:foreach="$articles as $article" class="post">
        <div class="date">{$article->date_add|date:'F j, Y'}</div>

        <h2>{$article->title}</h2>

        <div>{$article->description}</div>
    </div>
{/block}

Po uložení a otevření naší aplikace v prohlížeči uvidíme následující:

Pro dnešek to je vše. Příště si vytvoříme další části naší aplikace

V další lekci, CMS v Nette - Autentifikace uživatelů, si vytvoříme jednoduchý autentifikátor a tabulku uživatelů. Také si upravíme strukturu projektu.