Bejegyzések létrehozása és szerkesztése

Ez nagyszerű! Van egy szuper új blogunk, az emberek hevesen vitatkoznak a kommentekben, és végre van egy kis időnk további programozásra. Bár az Adminer nagyszerű eszköz, nem teljesen ideális új blogbejegyzések írására. Valószínűleg itt az ideje létrehozni egy egyszerű űrlapot új bejegyzések hozzáadására közvetlenül az alkalmazásból. Lássunk hozzá.

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. Ez a link megjelenít egy űrlapot címsorral és egy textarea-val a bejegyzés tartalmához.
3. Amikor a Mentés gombra kattintunk, a bejegyzés elmentődik az adatbázisba.

Később hozzáadunk bejelentkezést is, és a bejegyzések hozzáadását csak a bejelentkezett felhasználók számára engedélyezzük. De ez csak később. Milyen kódot kell most írnunk, hogy minden működjön?

1. Létrehozunk egy új presentert egy űrlappal a bejegyzések hozzáadásához.
2. Definiálunk egy callback-et, amely az űrlap sikeres elküldése után fut le, és amely az új bejegyzést elmenti az adatbázisba.
3. Létrehozunk egy új sablont, amelyen ez az űrlap lesz.
4. Hozzáadunk egy linket az űrlaphoz a főoldal sablonjában.

Új presenter

Az új presentert EditPresenter-nek nevezzük el, és az app/Presentation/Edit/ könyvtárba mentjük. Szüksége van adatbázis-kapcsolatra is, ezért itt is írunk egy konstruktort, amely adatbázis-kapcsolatot igényel:

<?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,
	) {
	}
}

Bejegyzések mentési űrlapja

Az űrlapokat és komponenseket már elmagyaráztuk a kommentek létrehozásakor. Ha még mindig nem világos, menjen át az űrlapok és komponensek létrehozása részen, mi addig itt várunk ;)

Most adjuk hozzá ezt a metódust az EditPresenter-hez:

protected function createComponentPostForm(): Form
{
	$form = new Form;
	$form->addText('title', 'Címsor:')
		->setRequired();
	$form->addTextArea('content', 'Tartalom:')
		->setRequired();

	$form->addSubmit('send', 'Mentés és közzététel');
	$form->onSuccess[] = $this->postFormSucceeded(...);

	return $form;
}

Új bejegyzés mentése az űrlapról

Folytassuk egy metódus hozzáadásával, amely feldolgozza az űrlap adatait:

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

	$this->flashMessage("A bejegyzés sikeresen közzétéve.", 'success');
	$this->redirect('Post:show', $post->id);
}

Csak egy gyors összefoglaló: ez a metódus megszerzi az adatokat az űrlapról, beilleszti őket az adatbázisba, létrehoz egy üzenetet a felhasználónak a bejegyzés sikeres mentéséről, és átirányít az új bejegyzés oldalára, hogy azonnal lássuk, hogyan néz ki.

Oldal új bejegyzés létrehozásához

Most hozzuk létre az Edit/create.latte sablont:

{block content}
<h1>Új bejegyzés</h1>

{control postForm}

Mindennek már világosnak kell lennie. Az utolsó sor megjeleníti az űrlapot, amelyet még csak most fogunk létrehozni.

Létrehozhatnánk egy megfelelő renderCreate() metódust is, de erre nincs szükség. Nem kell adatokat lekérnünk az adatbázisból és átadnunk a sablonnak, így ez a metódus üres lenne. Ilyen esetekben a metódusnak egyáltalán nem kell léteznie.

Link a bejegyzések létrehozásához

Valószínűleg már tudja, hogyan adjon hozzá egy linket az EditPresenter-hez és annak create akciójához. Próbálja ki.

Csak adja hozzá az app/Presentation/Home/default.latte fájlhoz:

<a n:href="Edit:create">Új bejegyzés írása</a>

Bejegyzések szerkesztése

Most adjuk hozzá a bejegyzés szerkesztésének lehetőségét is. Nagyon egyszerű lesz. Már van egy kész postForm űrlapunk, és ezt használhatjuk a szerkesztéshez is.

Adjunk hozzá egy új edit oldalt az EditPresenter-hez:

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

	if (!$post) {
		$this->error('A bejegyzés nem található');
	}

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

És hozzunk létre egy másik Edit/edit.latte sablont:

{block content}
<h1>Bejegyzés szerkesztése</h1>

{control postForm}

És módosítsuk a postFormSucceeded metódust, amely képes lesz új cikket hozzáadni (ahogy most is teszi), és egy már létező cikket szerkeszteni is:

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('A bejegyzés sikeresen közzétéve.', 'success');
	$this->redirect('Post:show', $post->id);
}

Ha az id paraméter rendelkezésre áll, az azt jelenti, hogy egy bejegyzést fogunk szerkeszteni. Ebben az esetben ellenőrizzük, hogy a kért bejegyzés valóban létezik-e, és ha igen, frissítjük az adatbázisban. Ha az id paraméter nem áll rendelkezésre, akkor az azt jelenti, hogy új bejegyzést kell hozzáadni.

De honnan származik ez az id paraméter? Ez az a paraméter, amelyet a renderEdit metódus kap meg az URL-ből.

Most hozzáadhatunk egy linket a szerkesztéshez az app/Presentation/Post/show.latte sablonhoz:

<a n:href="Edit:edit $post->id">Bejegyzés szerkesztése</a>

Összegzés

A blog most már működőképes, a látogatók aktívan kommentelnek, és már nincs szükségünk az Adminerre a publikáláshoz. Az alkalmazás teljesen független, és bárki hozzáadhat új bejegyzést. Várjunk csak, ez valószínűleg nem teljesen helyes, hogy bárki – és itt tényleg bárkit értek, akinek van internet-hozzáférése – hozzáadhat új bejegyzéseket. Szükség van valamilyen biztonságra, hogy csak a bejelentkezett felhasználó adhasson hozzá új bejegyzést. Ezt a következő fejezetben fogjuk megvizsgálni.