Vytváření a editování příspěvků | První aplikace
To je paráda! Máme super cool nový blog, lidé urputně diskutují v komentářích a my máme konečně trochu času na další programování. Přestože je Adminer skvělý nástroj, není úplně ideální pro psaní nových příspěvků na blog. Zřejmě je ten správný čas pro vytvoření jednoduchého formuláře pro přidání nových příspěvků přímo z aplikace. Pojďme na to.
Začněme s navržením uživatelského rozhraní:
- Na úvodní stránce přidáme odkaz „Napsat nový příspěvek“.
- Tento odkaz zobrazí formulář s titulkem a textareou pro obsah příspěvku.
- Když klikneme na tlačítko Uložit, příspěvek se uloží do databáze.
Později také přidáme přihlašování a přidávání příspěvků umožníme pouze přihlášeným uživatelům. Ale to až později. Jaký kód potřebujeme napsat teď, aby vše fungovalo?
- Přidáme odkaz do šablony hlavní stránky (
app/Presenters/templates/Homepage/default.latte
). - Vytvoříme novou stránku (šablonu) na které bude onen formulář.
- Definujeme formulář pro přidávání nových příspěvků.
- Definujeme callback, který se spustí po úspěšném odeslání formuláře a který nový příspěvek uloží do databáze.
Odkaz na nový příspěvek
Pravděpodobně již víte jak přidat odkaz na úvodní stránku. Vyzkoušejte si to.
Pokud si nejste jisti jak na to, umístíme tento kód do souboru
app/Presenters/templates/Homepage/default.latte
:
<a n:href="Post:create">Napsat nový příspěvek</a>
Stránka pro vytvoření nového příspěvku
Právě vytvořený odkaz odkazuje na PostPresenter
a jeho akci create
. Můžeme přidat novou metodu
renderCreate
, ale ono to asi nebude nutné. Nepotřebujeme získávat žádná data z databáze a předávat je do
šablony, takže by tato metoda byla prázdná. V takovýchto případech nemusí metoda vůbec existovat.
Pokud chcete, můžete zde tuto prázdnou metodu vytvořit. Možná se bude hodit později. Je to na vás.
Vytvořme nyní šablonu (app/Presenters/templates/Post/create.latte
):
{block content}
<h1>Nový příspěvek</h1>
{control postForm}
Vše by již mělo být jasné. Poslední řádka vykresluje formulář, který teprve vytvoříme.
Formulář pro ukládání příspěvků
Formuláře a komponenty jsme si již vysvětlili při vytváření komentářů. Pokud to stále není jasné, jděte si projít tvorbu formulářů a komponent, my zde zatím počkáme ;)
Nyní přidejme tuto metodu do presenteru PostPresenter
:
protected function createComponentPostForm(): Form
{
$form = new Form;
$form->addText('title', 'Titulek:')
->setRequired();
$form->addTextArea('content', 'Obsah:')
->setRequired();
$form->addSubmit('send', 'Uložit a publikovat');
$form->onSuccess[] = [$this, 'postFormSucceeded'];
return $form;
}
Ukládání nového příspěvku z formuláře
Pokračujeme přidáním metody, která zpracuje data z formuláře:
public function postFormSucceeded(array $values): void
{
$post = $this->database->table('posts')->insert($values);
$this->flashMessage("Příspěvek byl úspěšně publikován.", 'success');
$this->redirect('show', $post->id);
}
Pouze rychlá rekapitulace: tato metoda získá data z formuláře, vloží je do databáze, vytvoří zprávu pro uživatele o úspěšném uložení příspěvku a přesměruje na stránku s novým příspěvkem, takže hned uvidíme, jak vypadá.
Úprava příspěvků
Nyní přidáme také možnost editace příspěvku. Bude to velmi jednoduché. Již máme hotový formulář
postForm
a můžeme jej použít i pro editaci. Přidáme novou stránku edit
a upravíme callback,
který bude schopen jednak přidat nový článek (tak jako to dělá teď) a druhak již existující článek editovat.
Přidáme metodu do presenteru PostPresenter
:
public function actionEdit(int $postId): void
{
$post = $this->database->table('posts')->get($postId);
if (!$post) {
$this->error('Příspěvek nebyl nalezen');
}
$this['postForm']->setDefaults($post->toArray());
}
Povšimněme si, že se metoda jmenuje actionEdit
(a ne renderEdit
, jak možná někteří čekali).
Render metody se používají pro vložení dat do šablon. Oproti tomu action metody toho mohou dělat mnohem více. Měly by
kontrolovat, jestli požadovaná stránka může být zobrazena současným návštěvníkem, nebo uživatelem a mohou také
vykonávat spoustu práce, která nenáleží callbackům. Předávání dat do šablon bude samozřejmě fungovat i v action
metodách, ale není doporučeno to dělat, kvůli oddělení zodpovědností. Navíc je kód daleko lépe čitelný, pokud jej
rozdělíte na renderovací metody a metody vykonávající nějakou akci.
Nyní vytvoříme další šablonu (app/Presenters/templates/Post/edit.latte
):
{block content}
<h1>Upravit příspěvek</h1>
{control postForm}
Rozšíříme také callback metodu:
public function postFormSucceeded(Form $form, array $values): void
{
$postId = $this->getParameter('postId');
if ($postId) {
$post = $this->database->table('posts')->get($postId);
$post->update($values);
} else {
$post = $this->database->table('posts')->insert($values);
}
$this->flashMessage('Příspěvek byl úspěšně publikován.', 'success');
$this->redirect('show', $post->id);
}
Pokud je k dispozici parametr postId
, znamená to, že budeme upravovat příspěvek. V tom případě
ověříme, že požadovaný příspěvek opravdu existuje a pokud ano, aktualizujeme jej v databázi. Pokud parametr
postId
není k dispozici, pak to znamená, že by měl být nový příspěvek přidán.
Kde se však onen parametr postId
vezme? Jedná se o parametr, který byl vložen do metody
actionEdit
. Nyní můžeme přidat odkaz do šablony app/Presenters/templates/Post/show.latte
:
<a n:href="edit $post->id">Upravit příspěvek</a>
Shrnutí
Blog je nyní funkční, návštěvníci jej aktivně komentují a my již nepotřebujeme na publikaci Adminer. Aplikace je plně nezávislá a kdokoliv může přidat nový příspěvek. Tak moment, to asi není úplně v pořádku, že kdokoliv – a tím myslím opravdu kdokoliv s přístupem na internet – může přidávat nové příspěvky. Je zapotřebí nějaké zabezpečení, aby mohl nový příspěvek přidat pouze přihlášený uživatel. Na to se podíváme v příští kapitole.