Creating and Editing Posts
What a great time. We have a super cool new blog, people are arguing in comments and we have finally some time for more programming. Though we like Adminer, it is not that comfortable to write blog posts in it. Perhaps it's the right time to add a simple form for adding new posts directly from our app. Let’s do it.
Let’s start by designing the UI:
- On the homepage, let’s add a „Write new post“ link.
- It will show a form with title and textarea for content.
- When you click a Save button, it’ll save the blog post.
Later we’ll also add authentication and allow only logged-in users to add new posts. But let’s do that later. What code will we need to write to make it work?
- Create a new presenter with a form for adding posts.
- Define a callback that will be triggered after successful submission of the form and that will save the new post to the database.
- Create a new template for the form.
- Add a link to the form to the main page template.
New Presenter
Name the new presenter EditPresenter
and save it in app/UI/Edit/
. It also needs to connect to the
database, so here again we write a constructor that will require a database connection:
<?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
Forms and components have been already covered when we were adding support for comments. If you're confused about the topic, go checkout how forms and components work again, we'll wait here ;)
Now add this method to the 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;
}
Saving New Post from Form
Continue by adding a handler method.
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);
}
Just a quick explanation: it fetches the values from the form, inserts them into the database, creates a message for the user that the post was saved successfully, and redirects to the page where that post is published so that you can see how it looks like.
Page for Creating a New Post
Let’s just create the template Edit/create.latte
:
{block content}
<h1>New post</h1>
{control postForm}
Everything should be clear by now. The last line shows the form we are about to create.
We could also create a corresponding renderCreate
method, but it is not necessary. We don't need to get any data
from the database and pass it to the template, so that method would be empty. In such cases, the method may not exist at all.
Link for Creating Posts
You probably already know how to add a link to EditPresenter
and its create
action. Try it out.
Just add to the app/UI/Home/default.latte
file:
<a n:href="Edit:create">Write new post</a>
Editing Posts
Let’s also add the capability to edit existing posts. It shall be pretty simple – we already have postForm
and we can use it for editing as well.
We’ll add a new edit
page to the 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());
}
And create the template Edit/edit.latte
:
{block content}
<h1>Edit post</h1>
{control postForm}
And update the method postFormSucceeded
, which will be able either to add a new post (as it does now), or to edit
existing ones:
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);
}
When id
parameter is provided, it means that a post is being edited. In such case, we’ll check that the post
really exists and if so, we’ll update it in the database. If the id
is not provided, it means that a new post shall
be added.
But where does the id
come from? It is the parameter passed to renderEdit
method.
You can now add a link to the app/UI/Post/show.latte
template:
<a n:href="Edit:edit $post->id">Edit this post</a>
Summary
The blog is working, people are commenting rapidly and we no longer rely on Adminer for adding new posts. It is fully independent and even normal people can post there. But wait, that’s probably not ok, that anyone, I mean really anyone on the Internet, can post on our blog. Some form of authentication is required so that only logged-in users would be able to post. We'll add that in the next chapter.