Beiträge erstellen und bearbeiten

Großartig! Wir haben einen supercoolen neuen Blog, die Leute diskutieren fleißig in den Kommentaren, und wir haben endlich etwas Zeit zum Programmieren. Adminer ist zwar ein großartiges Werkzeug, aber zum Schreiben neuer Blogbeiträge ist es nicht besonders bequem. Vielleicht ist es der richtige Zeitpunkt, ein einfaches Formular zum Hinzufügen neuer Beiträge direkt aus der Anwendung zu erstellen. Machen wir das.

Beginnen wir mit dem Entwurf der Benutzeroberfläche:

Auf der Startseite ergänzen wir einen Link “Neuen Beitrag schreiben”.
Dieser Link zeigt ein Formular mit einem Feld für den Titel und einem Textbereich für den Inhalt des Beitrags.
Wenn wir auf die Schaltfläche Speichern klicken, wird der Beitrag in der Datenbank gespeichert.

Später ergänzen wir außerdem die Authentifizierung und erlauben nur angemeldeten Benutzern, neue Beiträge hinzuzufügen. Aber das machen wir später. Welchen Code müssen wir jetzt schreiben, damit alles funktioniert?

Einen neuen Presenter mit einem Formular zum Hinzufügen von Beiträgen erstellen.
Einen Callback definieren, der nach dem erfolgreichen Absenden des Formulars ausgelöst wird und den neuen Beitrag in der Datenbank speichert.
Ein neues Template für das Formular erstellen.
Im Template der Hauptseite einen Link zum Formular ergänzen.

Neuer Presenter

Nennen wir den neuen Presenter EditPresenter und speichern wir ihn in app/Presentation/Edit/EditPresenter.php. Auch er muss sich mit der Datenbank verbinden, also schreiben wir wieder einen Konstruktor, der eine Datenbankverbindung verlangt:

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

Formular zum Speichern von Beiträgen

Formulare und Komponenten haben wir schon behandelt, als wir die Unterstützung für Kommentare ergänzt haben. Wenn es noch unklar ist, sehen Sie sich noch einmal an, wie Formulare und Komponenten funktionieren, wir warten hier ;)

Fügen Sie nun diese Methode zum EditPresenter hinzu:

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

	$form->addSubmit('send', 'Speichern und veröffentlichen');
	$form->onSuccess[] = $this->postFormSucceeded(...);

	return $form;
}

Neuen Beitrag aus dem Formular speichern

Machen Sie weiter, indem Sie die Handler-Methode ergänzen:

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

	$this->flashMessage('Der Beitrag wurde erfolgreich veröffentlicht.', 'success');
	$this->redirect('Post:show', $post->id);
}

Nur eine kurze Erklärung: Sie holt die Werte aus dem Formular, fügt sie in die Datenbank ein, erzeugt eine Meldung für den Benutzer, dass der Beitrag erfolgreich gespeichert wurde, und leitet auf die Seite weiter, auf der dieser Beitrag veröffentlicht ist, damit Sie sehen können, wie er aussieht.

Seite zum Erstellen eines neuen Beitrags

Erstellen wir nun das Template Edit/create.latte:

{block content}
<h1>Neuer Beitrag</h1>

{control postForm}

Inzwischen sollte alles klar sein. Die letzte Zeile rendert das Formular, das wir gerade erstellt haben.

Wir könnten auch eine passende Methode renderCreate() erstellen, aber das ist nicht nötig. Wir müssen keine Daten aus der Datenbank holen oder an das Template übergeben, die Methode wäre also leer. In solchen Fällen muss die Methode gar nicht existieren.

Link zum Erstellen von Beiträgen

Wie man einen Link zum EditPresenter und seiner Aktion create ergänzt, wissen Sie vermutlich schon. Probieren Sie es aus.

Ergänzen Sie einfach Folgendes in der Datei app/Presentation/Home/default.latte:

<a n:href="Edit:create">Neuen Beitrag schreiben</a>

Beiträge bearbeiten

Ergänzen wir nun die Möglichkeit, bestehende Beiträge zu bearbeiten. Das wird sehr einfach. Wir haben bereits das Formular postForm und können es auch zum Bearbeiten verwenden.

Wir ergänzen im EditPresenter eine neue Seite edit:

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

	if (!$post) {
		$this->error('Beitrag nicht gefunden');
	}

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

Und erstellen das passende Template Edit/edit.latte:

{block content}
<h1>Beitrag bearbeiten</h1>

{control postForm}

Und passen die Methode postFormSucceeded an, die dann entweder einen neuen Beitrag hinzufügen (wie bisher) oder bestehende bearbeiten kann:

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('Der Beitrag wurde erfolgreich veröffentlicht.', 'success');
	$this->redirect('Post:show', $post->id);
}

Ist der Parameter id angegeben, bedeutet das, dass ein Beitrag bearbeitet wird. In diesem Fall prüfen wir, ob der Beitrag wirklich existiert, und aktualisieren ihn dann in der Datenbank. Ist id nicht angegeben, bedeutet das, dass ein neuer Beitrag hinzugefügt werden soll.

Aber woher kommt die id? Es ist der Parameter, der an die Methode renderEdit übergeben wird.

Nun können Sie im Template app/Presentation/Post/show.latte einen Link ergänzen:

<a n:href="Edit:edit $post->id">Diesen Beitrag bearbeiten</a>

Zusammenfassung

Der Blog funktioniert, die Leute kommentieren fleißig, und wir sind zum Hinzufügen neuer Beiträge nicht mehr auf Adminer angewiesen. Er ist vollständig eigenständig, und sogar normale Menschen können dort schreiben. Aber Moment, es ist wahrscheinlich nicht in Ordnung, dass jeder, und ich meine wirklich jeder im Internet, in unserem Blog schreiben kann. Es braucht eine Form der Authentifizierung, sodass nur angemeldete Benutzer schreiben können. Die ergänzen wir im nächsten Kapitel.