Lekce 8 - Jednoduchý redakční systém v Nette - Dokončení administrace

V minulé lekci, Jednoduchý redakční systém v Nette - Administrace, jsme rozpracovali administraci článků.

Dnes si přidáme presenter pro kontaktní formulář a poté všechny šablony.

Presentery

app/CoreModule/Presenters/ContactPresenter.php

Přidáme jeden presenter pro kontaktní formulář:

<?php

declare(strict_types=1);

namespace App\CoreModule\Presenters;

use App\Presenters\BasePresenter;
use Nette\Application\UI\Form;
use Nette\Mail\Mailer;
use Nette\Mail\Message;
use Nette\Mail\SendException;
use Nette\Utils\ArrayHash;

/**
 * Presenter pro kontaktní formulář.
 * @package App\CoreModule\Presenters
 */
class ContactPresenter extends BasePresenter
{
    /** @var string Kontaktní email, na který se budou posílat emaily z kontaktního formuláře. */
    private string $contactEmail;

    /** @var Mailer Služba Nette pro odesílání emailů. */
    private Mailer $mailer;

    /**
     * Konstruktor s nastavením kontaktního emailu a injektovanou Nette službou pro odesílání emailů.
     * @param string  $contactEmail kontaktní email
     * @param Mailer $mailer       automaticky injektovaná Nette služba pro odesílání emailů
     */
    public function __construct(string $contactEmail, Mailer $mailer)
    {
        parent::__construct();
        $this->contactEmail = $contactEmail;
        $this->mailer = $mailer;
    }

    /**
     * Vytváří a vrací kontaktní formulář.
     * @return Form kontaktní formulář
     */
    protected function createComponentContactForm()
    {
        $form = new Form;
        $form->getElementPrototype()->setAttribute('novalidate', true);
        $form->addEmail('email', 'Vaše emailová adresa')->setRequired();
        $form->addText('y', 'Zadejte aktuální rok')->setOmitted()->setRequired()
            ->addRule(Form::EQUAL, 'Chybně vyplněný antispam.', date("Y"));
        $form->addTextArea('message', 'Zpráva')->setRequired()
            ->addRule(Form::MIN_LENGTH, 'Zpráva musí být minimálně %d znaků dlouhá.', 10);
        $form->addSubmit('send', 'Odeslat');

        // Funkce se vykonaná při úspěšném odeslání kontaktního formuláře a odešle email.
        $form->onSuccess[] = function (Form $form, ArrayHash $values) {
            try {
                $mail = new Message;
                $mail->setFrom($values->email)
                    ->addTo($this->contactEmail)
                    ->setSubject('Email z webu')
                    ->setBody($values->message);
                $this->mailer->send($mail);
                $this->flashMessage('Email byl úspěšně odeslán.');
                $this->redirect('this');
            } catch (SendException $e) {
                $this->flashMessage('Email se nepodařilo odeslat.');
            }
        };

        return $form;
    }
}

Zde si všimněte především použití Nette knihovny pro odesílání emailů z formuláře.

app/CoreModule/config/common.neon

Dále nesmíme zapomenout předat konfiguraci kontaktního emailu do našeho konfiguráku:

#
# Konfigurační soubor pro CoreModule.
#
parameters:
    defaultArticleUrl: 'uvod'          # URL výhozího článku
    contactEmail: '[email protected]' # Kontaktní email

# Nastavení služeb pro CoreModule.
services:
    # Vlastní služba dále přístupná pomocí DI.
    - App\CoreModule\Model\ArticleManager

    # Předání nastavení při vytváření služby presenteru.
    - App\CoreModule\Presenters\ArticlePresenter(%defaultArticleUrl%)
    - App\CoreModule\Presenters\ContactPresenter(%contactEmail%)

app/config/common.neon

Pokud jste pozorně četli kód, všimli jste si, že u tvorby formulářů v metodě setRequired() není vyplněna chybová hláška. To je z toho důvodu, že nám bude stačit všude stejná a tu si globálně nastavíme v hlavním konfiguračním souboru připsáním následujících řádků:

...
# Nastavení výchozích chybových hlášek pro formuláře.
forms:
    messages:
        REQUIRED: 'Povinné pole.'
        EMAIL: 'Neplatná emailová adresa.'
...

app/router/RouterFactory.php

Nakonec musíme opět upravit routování, aby naše aplikace brala v potaz nové presentery a jejich akce. Ukážeme si zde také rovnou příklad překladu českých URL adres na anglické názvy akcí:

<?php

declare(strict_types=1);

namespace App\Router;

use Nette;
use Nette\Application\Routers\Route;
use Nette\Application\Routers\RouteList;

/**
 * Továrna na routovací pravidla.
 * Řídí směrování a generovaní URL adres v celé aplikaci.
 * @package App
 */
final class RouterFactory
{
    use Nette\StaticClass;

    /**
    * Vytváří a vrací seznam routovacích pravidel pro aplikaci.
    * @return RouteList výsledný router pro aplikaci
    */
    public static function createRouter(): RouteList
    {
        $router = new RouteList;
        $router->addRoute('kontakt', 'Core:Contact:default');
        $router->addRoute('administrace', 'Core:Administration:default');

            $router->addRoute('<action>[/<url>]', [
                    'presenter' => 'Core:Article',
                    'action' => [
                         Route::FILTER_STRICT => true,
                         Route::FILTER_TABLE => [
                              // řetězec v URL => akce presenteru
                              'seznam-clanku' => 'list',
                              'editor' => 'editor',
                              'odstranit' => 'remove'
                              ]
                    ]
            ]);

            $router->addRoute('[<url>]', 'Core:Article:default');
            return $router;
    }
}

Pokud se divíte, proč mají některé presentery svojí vlastní routu, tak je to z toho důvodu, že potřebujeme rozlišit mezi URL článku a názvem presenteru, protože obě mají stejný tvar - /presenter vs. /url. V tomto případě tedy vždy dostane přednost název presenteru před vykreslením URL článku.

Šablony

Nyní se můžeme podívat zase na šablony (templates).

app/templates/@layout.latte

Zde pouze doplníme odkazy na jednotlivé presentery a jejich akce pomocí Latte maker a přidáme odkaz na administrační rozhraní do patičky. Nebudu sem vypisovat již znovu celou šablonu, pouze provedené změny:

...
<ul>
    <li><a n:href=:Core:Article:>Úvod</a></li>
    <li><a n:href=:Core:Article:list>Seznam článků</a></li>
    <li><a n:href=:Core:Contact:>Kontakt</a></li>
</ul>
...
<footer>
    <p>
        Ukázkový tutoriál pro jednoduchý redakční systém v Nette z programátorské sociální sítě
        <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>.
        <a n:href=:Core:Administration:>Administrace</a>
    </p>
</footer>
...

app/CoreModule/templates/Article/list.latte

Přidáme si šablonu pro výpis seznamu článků:

{block title}Výpis článků{/block}
{block description}Výpis všech článků.{/block}
{block content}
<table>
    <tr n:foreach="$articles as $article">
        <td>
            <h2><a n:href="Article: $article->url">{$article->title}</a></h2>
            {$article->description}
            <br>
            <a n:href="editor $article->url">Editovat</a>
            <a n:href="remove $article->url">Odstranit</a>
        </td>
    </tr>
</table>

app/CoreModule/templates/Article/editor.latte

Dále přidáme šablonu pro editor článků. Zde si povšimněte jak jednoduše jsme zařídili vykreslení formuláře a také způsobu přidávání dalších JavaScript knihoven:

{block title}Editor{/block}
{block description}Editor článků.{/block}
{block content}
    {* Formulář pro editaci. *}
    {control editorForm}
{/block}

{block scripts}
    {include parent}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.5.1/tinymce.min.js" integrity="sha512-rCSG4Ab3y6N79xYzoaCqt9gMHR0T9US5O5iBuB25LtIQ1Hsv3jKjREwEMeud8q7KRgPtxhmJesa1c9pl6upZvg==" crossorigin="anonymous"></script> <script type="text/javascript">
        tinymce.init({
            selector: 'textarea[name=content]',
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table contextmenu paste'
            ],
            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            entities: '160,nbsp',
            entity_encoding: 'raw'
        });
    </script>
{/block}

app/CoreModule/templates/Administration/default.latte

Následuje šablona pro administrační rozhraní:

{block title}Administrace webu{/block}
{block description}Administrace webu.{/block}
{block content}
<p>Vítejte v administraci!</p>
<h2><a n:href=Article:editor>Přidat článek</a></h2>
<h2><a n:href=Article:list>Seznam článků</a></h2>

app/CoreModule/templates/Contact/default.latte

A na závěr šablona pro stránku s kontaktním formulářem:

{block title}Kontaktní formulář{/block}
{block description}Kontaktní formulář.{/block}
{block content}
<p>Kontaktujte nás odesláním formuláře níže.</p>
{* Formulář pro kontakt. *}
{control contactForm}

Gratuluji, právě vám běží jednoduché administrační rozhraní pro články v Nette s kontaktním formulářem jako bonus:

Zkuste si zeditovat, přidat a smazat články a ověřte si, že vše funguje

Nyní v rámci kurzu budeme pokračovat v rozšiřování administrace a začneme se věnovat zabezpečení našeho webu, což by mělo vyústit v plně funkční přihlašování a registraci uživatelů s definicí jejich práv, takže se určitě máte na co těšit

V další lekci, Jednoduchý redakční systém v Nette - Model uživatelů, začneme rozšířením databáze a přidáním modelu uživatelů.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.