Erstellen und Bearbeiten von Beiträgen

Das ist großartig! Wir haben einen super coolen neuen Blog, die Leute diskutieren eifrig in den Kommentaren und wir haben endlich etwas Zeit für weitere Programmierung. Obwohl Adminer ein großartiges Werkzeug ist, ist es nicht ganz ideal zum Schreiben neuer Blogbeiträge. Es ist wahrscheinlich der richtige Zeitpunkt, ein einfaches Formular zum Hinzufügen neuer Beiträge direkt aus der Anwendung heraus zu erstellen. Legen wir los.

Beginnen wir mit dem Entwurf der Benutzeroberfläche:

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

Später werden wir auch eine Anmeldung hinzufügen und das Hinzufügen von Beiträgen nur angemeldeten Benutzern erlauben. Aber das kommt später. Welchen Code müssen wir jetzt schreiben, damit alles funktioniert?

  1. Wir erstellen einen neuen Presenter mit einem Formular zum Hinzufügen von Beiträgen.
  2. Wir definieren einen Callback, der nach erfolgreichem Absenden des Formulars ausgeführt wird und den neuen Beitrag in der Datenbank speichert.
  3. Wir erstellen ein neues Template, auf dem dieses Formular angezeigt wird.
  4. Wir fügen einen Link zum Formular in das Template der Hauptseite ein.

Neuer Presenter

Wir nennen den neuen Presenter EditPresenter und speichern ihn in app/Presentation/Edit/. Er muss sich auch mit der Datenbank verbinden, also schreiben wir hier wieder einen Konstruktor, der eine Datenbankverbindung erfordert:

<?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 bereits bei der Erstellung von Kommentaren erklärt. Wenn es immer noch nicht klar ist, gehen Sie zurück zum Abschnitt Erstellung von Formularen und Komponenten, wir warten hier in der Zwischenzeit ;)

Fügen wir nun diese Methode zum Presenter 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;
}

Speichern eines neuen Beitrags aus dem Formular

Fahren wir fort, indem wir die Methode hinzufügen, die die Formulardaten verarbeitet:

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 Zusammenfassung: Diese Methode erhält die Daten aus dem Formular, fügt sie in die Datenbank ein, erstellt eine Nachricht für den Benutzer über die erfolgreiche Speicherung des Beitrags und leitet zur Seite mit dem neuen Beitrag weiter, sodass wir sofort sehen, 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}

Alles sollte bereits klar sein. Die letzte Zeile rendert das Formular, das wir gerade erstellen.

Wir könnten auch eine entsprechende renderCreate-Methode erstellen, aber das ist nicht notwendig. Wir müssen keine Daten aus der Datenbank abrufen und an das Template übergeben, sodass die Methode leer wäre. In solchen Fällen muss die Methode überhaupt nicht existieren.

Sie wissen wahrscheinlich bereits, wie Sie einen Link zum EditPresenter und seiner create-Aktion hinzufügen können. Probieren Sie es aus.

Fügen Sie einfach Folgendes zur Datei app/Presentation/Home/default.latte hinzu:

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

Bearbeiten von Beiträgen

Fügen wir nun auch die Möglichkeit hinzu, einen Beitrag zu bearbeiten. Es wird sehr einfach sein. Wir haben bereits das Formular postForm fertig und können es auch zum Bearbeiten verwenden.

Fügen wir eine neue Seite edit zum Presenter EditPresenter hinzu:

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 wir ein weiteres Template Edit/edit.latte:

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

{control postForm}

Und passen wir die Methode postFormSucceeded an, sodass sie sowohl einen neuen Artikel hinzufügen (wie sie es jetzt tut) als auch einen bereits vorhandenen Artikel 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);
}

Wenn der Parameter id verfügbar ist, bedeutet dies, dass wir einen Beitrag bearbeiten werden. In diesem Fall überprüfen wir, ob der angeforderte Beitrag wirklich existiert, und wenn ja, aktualisieren wir ihn in der Datenbank. Wenn der Parameter id nicht verfügbar ist, bedeutet dies, dass ein neuer Beitrag hinzugefügt werden soll.

Woher kommt aber dieser Parameter id? Es handelt sich um den Parameter, der an die Methode renderEdit übergeben wurde.

Nun können wir einen Link zum Template app/Presentation/Post/show.latte hinzufügen:

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

Zusammenfassung

Der Blog ist nun funktionsfähig, Besucher kommentieren aktiv und wir benötigen Adminer nicht mehr zur Veröffentlichung. Die Anwendung ist vollständig unabhängig und jeder kann einen neuen Beitrag hinzufügen. Moment mal, das ist wahrscheinlich nicht ganz in Ordnung, dass jeder – und damit meine ich wirklich jeder mit Internetzugang – neue Beiträge hinzufügen kann. Es ist eine Art von Sicherheit erforderlich, damit nur angemeldete Benutzer einen neuen Beitrag hinzufügen können. Das werden wir uns im nächsten Kapitel ansehen.