Hozzászólások létrehozása és szerkesztése

Micsoda remek időtöltés. Van egy szuper klassz új blogunk, az emberek vitatkoznak a kommentekben, és végre van egy kis időnk több programozásra. Bár szeretjük az Adminert, de nem olyan kényelmes benne blogbejegyzéseket írni. Talán itt az ideje, hogy egy egyszerű űrlapot adjunk hozzá, amivel közvetlenül az alkalmazásunkból lehet új bejegyzéseket hozzáadni. Csináljuk meg.

Kezdjük a felhasználói felület megtervezésével:

1. A kezdőlapon adjunk hozzá egy “Új bejegyzés írása” linket.
2. Megjelenít egy űrlapot címmel és szövegterülettel a tartalomhoz.
3. A Mentés gombra kattintva elmenti a blogbejegyzést.

Később hitelesítést is hozzáadunk, és csak a bejelentkezett felhasználók számára engedélyezzük az új bejegyzések hozzáadását. De ezt majd később tesszük meg. Milyen kódot kell írnunk ahhoz, hogy ez működjön?

1. Hozzunk létre egy új bemutatót egy űrlappal a hozzászólások hozzáadásához.
2. Definiáljunk egy visszahívást, amely az űrlap sikeres elküldése után lép működésbe, és amely elmenti az új bejegyzést az adatbázisba.
3. Hozzon létre egy új sablont az űrlaphoz.
4. Adjon hozzá egy linket az űrlaphoz a főoldal sablonjához.

Új bemutató

Nevezzük el az új prezentert EditPresenter és mentsük el a app/UI/Edit/ címre. Az új prezenternek is csatlakoznia kell az adatbázishoz, ezért itt is írunk egy konstruktort, amelyhez adatbázis-kapcsolat szükséges:

<?php
namespace App\UI\Edit;

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

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

Form for Saving Posts

Az űrlapokkal és komponensekkel már foglalkoztunk, amikor a hozzászólások támogatását adtuk hozzá. Ha zavarban vagy a témával kapcsolatban, nézd meg újra, hogyan működnek az űrlapok és a komponensek, mi itt várunk ;)

Most adjuk hozzá ezt a metódust a EditPresenter:

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

	$form->addSubmit('send', 'Save and publish');
	$form->onSuccess[] = $this->postFormSucceeded(...);

	return $form;
}

Új hozzászólás mentése űrlapról

Folytassa egy kezelő metódus hozzáadásával.

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

	$this->flashMessage('Post was published', 'success');
	$this->redirect('Post:show', $post->id);
}

Csak egy gyors magyarázat: lekérdezi az értékeket az űrlapról, beilleszti őket az adatbázisba, létrehoz egy üzenetet a felhasználónak, hogy a bejegyzés sikeresen el lett mentve, és átirányít arra az oldalra, ahol az adott bejegyzés megjelent, hogy megnézhesse, hogyan néz ki.

Új bejegyzés létrehozására szolgáló oldal

Hozzuk csak létre a Edit/create.latte sablont:

{block content}
<h1>New post</h1>

{control postForm}

Mostanra már mindennek világosnak kell lennie. Az utolsó sorban látható az űrlap, amit most fogunk létrehozni.

Létrehozhatnánk egy megfelelő renderCreate metódust is, de erre nincs szükség. Nincs szükségünk arra, hogy adatokat kérjünk az adatbázisból és átadjuk a sablonhoz, így ez a metódus üres lenne. Ilyen esetben a metódus egyáltalán nem is létezhet.

Link a hozzászólások létrehozásához

Valószínűleg már tudod, hogyan adhatsz linket a EditPresenter és a create művelethez. Próbálja ki.

Csak adja hozzá a app/UI/Home/default.latte fájlhoz:

<a n:href="Edit:create">Write new post</a>

Hozzászólások szerkesztése

Adjuk hozzá a meglévő hozzászólások szerkesztésének lehetőségét is. Ez elég egyszerű lesz – már van postForm és ezt használhatjuk szerkesztésre is.

Hozzáadunk egy új edit oldalt a EditPresenter:

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

	if (!$post) {
		$this->error('Post not found');
	}

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

És létrehozzuk a Edit/edit.latte sablont:

{block content}
<h1>Edit post</h1>

{control postForm}

És frissítsük a postFormSucceeded módszert, amely képes lesz új hozzászólást hozzáadni (ahogy most is), vagy a meglévőket szerkeszteni:

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('Post was published', 'success');
	$this->redirect('Post:show', $post->id);
}

Ha a id paramétert adjuk meg, az azt jelenti, hogy egy hozzászólást szerkesztünk. Ilyen esetben ellenőrizzük, hogy a bejegyzés valóban létezik-e, és ha igen, akkor frissítjük az adatbázisban. Ha a id nincs megadva, akkor ez azt jelenti, hogy egy új bejegyzést kell hozzáadni.

De honnan származik a id? Ez a renderEdit metódusnak átadott paraméter.

Most már hozzáadhat egy linket a app/UI/Post/show.latte sablonhoz:

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

Összefoglaló:

A blog működik, az emberek gyorsan kommentelnek, és már nem az Adminerre hagyatkozunk az új bejegyzések hozzáadásában. Teljesen független, és akár normális emberek is írhatnak oda. De várjunk csak, ez valószínűleg nem oké, hogy bárki, mármint tényleg bárki az interneten, posztolhat a blogunkba. Valamiféle hitelesítésre van szükség, hogy csak a bejelentkezett felhasználók tudjanak posztolni. Ezt a következő fejezetben adjuk hozzá.