Ustvarjanje in urejanje prispevkov

To je super! Imamo super kul nov blog, ljudje zavzeto razpravljajo v komentarjih in končno imamo malo časa za nadaljnje programiranje. Čeprav je Adminer odlično orodje, ni povsem idealen za pisanje novih prispevkov na blog. Očitno je pravi čas za ustvarjanje preprostega obrazca za dodajanje novih prispevkov neposredno iz aplikacije. Pojdimo na to.

Začnimo z načrtovanjem uporabniškega vmesnika:

1. Na uvodni strani dodamo povezavo “Napiši nov prispevek”.
2. Ta povezava prikaže obrazec z naslovom in textareo za vsebino prispevka.
3. Ko kliknemo na gumb Shrani, se prispevek shrani v podatkovno bazo.

Kasneje bomo dodali tudi prijavo in dodajanje prispevkov omogočili samo prijavljenim uporabnikom. Ampak to kasneje. Kakšno kodo moramo napisati zdaj, da bo vse delovalo?

1. Ustvarimo nov presenter z obrazcem za dodajanje prispevkov.
2. Definiramo callback, ki se sproži po uspešnem pošiljanju obrazca in ki nov prispevek shrani v podatkovno bazo.
3. Ustvarimo novo predlogo, na kateri bo ta obrazec.
4. Dodamo povezavo na obrazec v predlogo glavne strani.

Nov presenter

Nov presenter bomo poimenovali EditPresenter in ga shranili v app/Presentation/Edit/. Prav tako se mora povezati s podatkovno bazo, zato bomo tukaj spet napisali konstruktor, ki bo zahteval povezavo s podatkovno bazo:

<?php
namespace App\Presentation\Edit;

use Nette;
use Nette\Application\UI\Form;

final class EditPresenter extends Nette\Application\UI\Presenter
{
	public function __construct(
		private Nette\Database\Explorer $database,
	) {
	}
}

Obrazec za shranjevanje prispevkov

Obrazce in komponente smo si že pojasnili pri ustvarjanju komentarjev. Če še vedno ni jasno, pojdite skozi ustvarjanje obrazcev in komponent, mi bomo medtem počakali tukaj ;)

Zdaj dodajmo to metodo v presenter EditPresenter:

protected function createComponentPostForm(): Form
{
	$form = new Form;
	$form->addText('title', 'Naslov:')
		->setRequired();
	$form->addTextArea('content', 'Vsebina:')
		->setRequired();

	$form->addSubmit('send', 'Shrani in objavi');
	$form->onSuccess[] = $this->postFormSucceeded(...);

	return $form;
}

Shranjevanje novega prispevka iz obrazca

Nadaljujemo z dodajanjem metode, ki bo obdelala podatke iz obrazca:

private function postFormSucceeded(array $data): void
{
	$post = $this->database
		->table('posts')
		->insert($data);

	$this->flashMessage("Prispevek je bil uspešno objavljen.", 'success');
	$this->redirect('Post:show', $post->id);
}

Samo hiter povzetek: ta metoda pridobi podatke iz obrazca, jih vstavi v podatkovno bazo, ustvari sporočilo za uporabnika o uspešnem shranjevanju prispevka in preusmeri na stran z novim prispevkom, tako da takoj vidimo, kako izgleda.

Stran za ustvarjanje novega prispevka

Ustvarimo zdaj predlogo Edit/create.latte:

{block content}
<h1>Nov prispevek</h1>

{control postForm}

Vse bi moralo biti že jasno. Zadnja vrstica izrisuje obrazec, ki ga bomo šele ustvarili.

Lahko bi ustvarili tudi ustrezno metodo renderCreate, vendar to ni potrebno. Ni nam treba pridobivati nobenih podatkov iz podatkovne baze in jih predajati predlogi, zato bi bila ta metoda prazna. V takih primerih metoda sploh ne rabi obstajati.

Povezava za ustvarjanje prispevkov

Verjetno že veste, kako dodati povezavo na EditPresenter in njegovo akcijo create. Poskusite sami.

Samo v datoteko app/Presentation/Home/default.latte dodajte:

<a n:href="Edit:create">Napiši nov prispevek</a>

Urejanje prispevkov

Zdaj bomo dodali tudi možnost urejanja prispevka. To bo zelo preprosto. Že imamo pripravljen obrazec postForm in ga lahko uporabimo tudi za urejanje.

Dodamo novo stran edit v presenter EditPresenter:

public function renderEdit(int $id): void
{
	$post = $this->database
		->table('posts')
		->get($id);

	if (!$post) {
		$this->error('Prispevek ni najden');
	}

	$this->getComponent('postForm')
		->setDefaults($post->toArray());
}

In ustvarimo še eno predlogo Edit/edit.latte:

{block content}
<h1>Uredi prispevek</h1>

{control postForm}

In uredimo metodo postFormSucceeded, ki bo sposobna tako dodati nov članek (kot to počne zdaj) kot tudi urejati že obstoječi članek:

private function postFormSucceeded(array $data): void
{
	$id = $this->getParameter('id');

	if ($id) {
		$post = $this->database
			->table('posts')
			->get($id);
		$post->update($data);

	} else {
		$post = $this->database
			->table('posts')
			->insert($data);
	}

	$this->flashMessage('Prispevek je bil uspešno objavljen.', 'success');
	$this->redirect('Post:show', $post->id);
}

Če je na voljo parameter id, to pomeni, da bomo urejali prispevek. V tem primeru preverimo, ali zahtevani prispevek res obstaja in če da, ga posodobimo v podatkovni bazi. Če parameter id ni na voljo, potem to pomeni, da bi moral biti dodan nov prispevek.

Kje pa se vzame ta parameter id? Gre za parameter, ki je bil vstavljen v metodo renderEdit.

Zdaj lahko dodamo povezavo v predlogo app/Presentation/Post/show.latte:

<a n:href="Edit:edit $post->id">Uredi prispevek</a>

Povzetek

Blog je zdaj funkcionalen, obiskovalci ga aktivno komentirajo in za objavo ne potrebujemo več Adminerja. Aplikacija je popolnoma neodvisna in kdorkoli lahko doda nov prispevek. Počakajte malo, to verjetno ni povsem v redu, da kdorkoli – in s tem mislim res kdorkoli z dostopom do interneta – lahko dodaja nove prispevke. Potrebna je neka varnost, da lahko nov prispevek doda samo prijavljen uporabnik. To si bomo ogledali v naslednjem poglavju.