2. diel - Cms v Nette - Vytvorenie projektu a napojenie databázy

V minulej lekcii, Cms v Nette - Čo je CMS a na čo slúži , sme sa dozvedeli, čo je to CMS, na čo slúži a aké výhody jeho využívanie má. Nainštalovali sme si tiež potrebné nástroje.

V dnešnej lekcii si vytvoríme nový Nette projekt pomocou nástroja Composer. K tomu využijeme Nette vo verzii 3 a PHP minimálne vo verzii 7.1. Nette Framework si môžeme stiahnu manuálne, ale my začneme nový projekt s využitím Composer. Ak Composer nepoznáte, určite by ste mali začať s ním. Je to veľmi jednoduchý a užitočný nástroj na inštaláciu balíčkov a ich závislosti. Viac sa môžeme dozvedieť v dokumentácii Composer.

S nástrojom Composer si veľmi jednoducho stiahneme a nainštalujeme základnú kostru aplikácie. Ako prvý si nájdeme koreňový adresár webového servera (napríklad /var/www alebo C:\XAMPP\htdocs\) a použijeme nasledujúci konzolový príkaz:

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

Ak nechcete použiť Composer, stiahnite si archív Nette, rozbaľte ho, skopírujte ho do koreňového adresára webového servera a premenujte na nette-cms. Ak by zdroj už nebol dostupný, môžete si ho stiahnuť v prílohe na konci článku.

Uvítací stránka

Po vytvorení Nette projektu overíme jeho správnu inštaláciu navštívením adresy http: // localhost / nette-cms / www. Ak je adresa správna, mali by sme vidieť túto úvodnú stránku Nette Frameworku:

Štruktúra projektu

Aplikácia má nasledujúcu štruktúru:

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ár www/ slúži na ukladanie verejne prístupných súborov ako sú obrázky, CSS štýly či JavaScript súbory. Iba tento adresár je prístupný z internetu. Pre nás je najdôležitejšie adresár app/. Tu nájdeme súbor Bootstrap.php, ktorý slúži na načítanie aplikačného frameworku a nastavenia aplikácie. Pre prístup k projektu bez www v URL upravíme súbor .htaccess v root (koreňovej) priečinku:

Order Allow,Deny
Allow from all

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

Teraz budeme pre prístup k aplikácii využívať adresu http: // localhost / nette-cms /.

Prvotné úpravy

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

<div>

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

Na našej adrese sa objaví táto stránka:

Debugger

Jeden z najdôležitejších nástrojov pri vývoji v Nette frameworku je ladiace nástroj Tracy. Je možné ho vyskúšať vytvorením chyby v niektorom .php súbore. Otvoríme si súbor app/Presenters/HomepagePresenter.php a schválne vytvoríme chybu v súbore (napríklad pridaním x do HomepagePresenter triedy). Po otvorení webovej stránky sa nám objaví nasledujúce hláška:

Týmto spôsobom nám Tracy pomáha odhaľovať chyby v aplikácii. Môžeme si tiež všimnúť plávajúceho baru v pravej dolnej časti obrazovky, ktorý sa objavuje vždy pri zapnutom debug módu. Zobrazuje informácie o behu a načítaní aplikácie:

V produkčnom móde aplikácie je nástroj Tracy vypnutý a nezobrazuje žiadne informácie. Všetky chyby aplikácie ukladá do zložky log/. Ak by sme si chceli vyskúšať vypnúť Tracy, otvoríme súbor app/Bootstrap.php a pridáme nasledujúci riadok nad metódu enableTracy():

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

Po uložení súboru a otvorenie sa nám zobrazí hláška, ktorá hlási Server Error:

Teraz keď sa pozrieme do zložky log/ uvidíme súbor exception.log a jeho HTML verziu začínajúcich exception-, ktorá v názve obsahuje dátum, čas a ID chyby. Zakomentujeme novo pridaný riadok v Bootstrap.php:

$configurator->setDebugMode(false);

Tracy automaticky povolí vývojársky režim na localhost a zakáže ho všade inde. Chybu, ktorú sme vytvorili, môžeme opraviť a pokračovať v písaní aplikácie.

Vytvorenie databázy aplikácie

Pre ukladanie dát použijeme MySQL databázu, pretože je najviac rozšírená medzi programátormi webových aplikácií. Pokojne môžete použiť inú, podľa vášho uváženia, ale bude potrebné si upravovať kód pre vašu databázu.

Začneme otvorením aplikácie PhpMyAdmin, ktorá je súčasťou inštalácie XAMPP. Nájdeme ju na adrese localhost / phpmyadmin:

Vytvoríme si našej databáze kliknutím na Nová, vyplníme meno databázy nette-cms s použitím kódovania utf8mb4_czech_ci a klikneme na Vytvoriť. Vytvoríme si novú tabuľku article buď pomocou SQL skriptu alebo pomocou PhpMyAdmin. Naša tabuľka bude mať veľkosť 7 polí. Využijeme možnosti tréningu písania SQL dotazov:

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ásledne daný dotaz vložíme do SQL konzoly v PhpMyAdmin:

Ešte predtým, ako aplikáciu prepojíme s databázou, vytvoríme prvé články, ktoré vložíme pomocou SQL dotazu do našej databázy:

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>');

Pripojenie databázy

Teraz, keď už máme vytvorenú tabuľku pre články, môžeme prepojiť aplikáciu s databázou a zobraziť články na našej stránke.

Najprv musíme aplikáciu povedať, akú databázu má použiť. Pripojenie k databáze nastavíme v súbore app/config/local.neon pomocou DSN a prihlasovacích údajov. Malo by to vyzerať nejako takto:

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

Pri úprave neon súborov je potrebné dbať na vhodné odsadzovanie. Je možné využívať medzery alebo tabulátor, ale nie oboje zároveň. Predvolený súbor využíva tabulátor.

Všetka konfigurácia, vrátane konfigurácie databázy, je uložená v adresári /app/config/ v súboroch common.neon a local.neon. Súbor common.neon obsahuje globálne nastavenia aplikácie a local.neon iba tie parametre, ktoré sú špecifické pre aktuálne prostredie (rozdiel medzi vývojovým a produkčným serverom a pod.).

Teraz keď aplikácia vie, ako sa pripojiť do databázy, musíme zariadiť, aby náš Presenter vedel o spojenie s databázou. Pre získanie spojenie využijeme konštruktor Presenter a náš kód bude vyzerať nasledovne:

<?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čítanie príspevkov

Teraz, keď máme pripojenie s databázou kompletný, môžeme ho využiť a načítať články, ktoré sú v databáze uložené. Využijeme funkcie renderDefault, kde načítame články z databázy a pošleme ich do šablóny:

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

v metodě order bylo date_at DESC namísto date_add

Presenter teraz obsahuje jednu renderovací metódu renderDefault(), ktorá odovzdáva dáta z databázy do šablóny. Šablóny sú umiestnené v app/Presenters/templates/{PresenterName}/{viewName}.latte, takže v tomto prípade je šablóna umiestnená v app/Presenters/templates/Homepage/default.latte. V šablóne teraz bude k dispozícii premenná $articles, v ktorej sú príspevky získané z databázy.

Teraz si upravíme našu šablónu a vložíme do nej tento kód:

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

Týmto sme nadefinovali blok content, ktorý bude vložený do hlavného layoutu. Ak opäť obnovíme prehliadač, uvidíme stránku s textom "Hello World" (v zdrojovom kóde is HTML hlavičkou a pätičkou definovanú v @layout.latte).

Teraz môžeme vykresliť príspevky, ktoré sme si v Presenter načítali 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 otvorení našej aplikácie v prehliadači uvidíme nasledujúce:

Pre dnešok to je všetko. Nabudúce si vytvoríme ďalšie časti našej aplikácie:)

V ďalšej lekcii, Cms v Nette - Autentifikácia užívateľov , si vytvoríme jednoduchý autentifikátor a tabuľku užívateľov. Tiež si upravíme štruktúru projektu.