Erstellen und Bearbeiten von Beiträgen

Was für eine tolle Zeit. Wir haben einen super coolen neuen Blog, die Leute streiten sich in den Kommentaren und wir haben endlich etwas Zeit für mehr Programmierung. Obwohl wir Adminer mögen, ist es nicht so bequem, Blogbeiträge darin zu schreiben. Vielleicht ist es an der Zeit, ein einfaches Formular einzuführen, mit dem man direkt aus unserer App neue Beiträge hinzufügen kann. Los geht's.

Beginnen wir mit der Gestaltung der Benutzeroberfläche:

Fügen wir auf der Startseite einen Link “Neuen Beitrag schreiben” ein.
Es wird ein Formular mit Titel und Textarea für den Inhalt angezeigt.
Wenn Sie auf die Schaltfläche “Speichern” klicken, wird der Blogbeitrag gespeichert.

Später werden wir auch die Authentifizierung hinzufügen und nur angemeldeten Benutzern erlauben, neue Beiträge hinzuzufügen. Aber das machen wir später. Welchen Code müssen wir schreiben, damit es funktioniert?

Erstellen Sie einen neuen Präsentator mit einem Formular zum Hinzufügen von Beiträgen.
Definieren Sie einen Callback, der nach erfolgreicher Übermittlung des Formulars ausgelöst wird und der den neuen Beitrag in der Datenbank speichert.
Erstellen Sie eine neue Vorlage für das Formular.
Fügen Sie einen Link zum Formular in die Hauptseitenvorlage ein.

Neuer Präsentator

Nennen Sie den neuen Presenter EditPresenter und speichern Sie ihn unter app/UI/Edit/. Er muss sich auch mit der Datenbank verbinden, also schreiben wir auch hier einen Konstruktor, der eine Datenbankverbindung benötigt:

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

Formular zum Speichern von Beiträgen

Formulare und Komponenten wurden bereits behandelt, als wir die Unterstützung für Kommentare hinzugefügt haben. Wenn Sie verwirrt sind, schauen Sie sich noch einmal an , wie Formulare und Komponenten funktionieren, wir warten hier ;)

Fügen Sie nun diese Methode in die EditPresenter ein:

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;
}

Speichern eines neuen Beitrags aus einem Formular

Fahren Sie fort, indem Sie eine Handler-Methode hinzufügen.

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);
}

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

Seite zum Erstellen eines neuen Beitrags

Lassen Sie uns einfach die Vorlage Edit/create.latte erstellen:

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

{control postForm}

Jetzt sollte alles klar sein. Die letzte Zeile zeigt das Formular, das wir erstellen werden.

Wir könnten auch eine entsprechende Methode renderCreate erstellen, aber das ist nicht notwendig. Wir brauchen keine Daten aus der Datenbank zu holen und an die Vorlage zu übergeben, also wäre diese Methode leer. In solchen Fällen darf die Methode überhaupt nicht existieren.

Link zum Erstellen von Beiträgen

Sie wissen wahrscheinlich schon, wie Sie einen Link zu EditPresenter und der Aktion create hinzufügen können. Probieren Sie es aus.

Fügen Sie einfach die Datei app/UI/Home/default.latte hinzu:

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

Bearbeiten von Beiträgen

Lassen Sie uns auch die Möglichkeit hinzufügen, bestehende Beiträge zu bearbeiten. Es wird ziemlich einfach sein – wir haben bereits postForm und wir können es auch zum Bearbeiten verwenden.

Wir fügen eine neue Seite edit zu EditPresenter hinzu:

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

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

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

Und erstellen die Vorlage Edit/edit.latte:

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

{control postForm}

Und aktualisieren Sie die Methode postFormSucceeded, mit der Sie entweder einen neuen Beitrag hinzufügen können (wie jetzt) oder bestehende Beiträge bearbeiten können:

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

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

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

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

Wenn der Parameter postId angegeben wird, bedeutet dies, dass ein Beitrag bearbeitet wird. In diesem Fall wird überprüft, ob der Beitrag wirklich existiert, und wenn ja, wird er in der Datenbank aktualisiert. Wenn der Parameter postId nicht angegeben wird, bedeutet dies, dass ein neuer Beitrag hinzugefügt wird.

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

Sie können nun einen Link zur Vorlage app/UI/Post/show.latte hinzufügen:

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

Zusammenfassung

Der Blog funktioniert, die Leute kommentieren schnell und wir sind nicht mehr auf den Administrator angewiesen, um neue Beiträge hinzuzufügen. Er ist völlig unabhängig und auch normale Leute können dort posten. Aber halt, das ist wahrscheinlich nicht in Ordnung, dass jeder, ich meine wirklich jeder im Internet, in unserem Blog posten kann. Es ist eine Form der Authentifizierung erforderlich, damit nur angemeldete Benutzer Beiträge schreiben können. Das werden wir im nächsten Kapitel hinzufügen.