Criação e Edição de Posts
Que grande momento. Temos um novo blog super legal, as pessoas estão discutindo nos comentários e finalmente temos algum tempo para mais programação. Embora gostemos de Adminer, não é tão confortável escrever nele posts de blogs. Talvez seja o momento certo para adicionar um formulário simples para adicionar novos posts diretamente de nosso aplicativo. Vamos fazer isso.
Vamos começar projetando a IU:
- Na página inicial, vamos adicionar um link „Escrever novo post“.
- Ele mostrará um formulário com título e área de texto para o conteúdo.
- Quando você clicar no botão Salvar, ele salvará o post do blog.
Mais tarde também adicionaremos autenticação e permitiremos apenas usuários logados para adicionar novos posts. Mas vamos fazer isso mais tarde. Que código precisaremos escrever para que funcione?
- Criar um novo apresentador com um formulário para adicionar postos.
- Definir uma chamada de retorno que será acionada após o envio bem sucedido do formulário e que salvará o novo post no banco de dados.
- Criar um novo modelo para o formulário.
- Adicionar um link para o formulário ao modelo da página principal.
Novo apresentador
Nomeie o novo apresentador EditPresenter
e salve-o em app/UI/Edit/
. Ele também precisa se conectar
ao banco de dados, então aqui novamente escrevemos um construtor que exigirá uma conexão com o banco de dados:
<?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,
) {
}
}
Formulário para salvar postes
Formulários e componentes já foram cobertos quando estávamos adicionando apoio para comentários. Se você estiver confuso sobre o tópico, vá verificar como os formulários e componentes funcionam novamente, nós esperaremos aqui ;)
Agora adicione este método ao 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;
}
Salvando novos postos do formulário
Continue adicionando um método de manipulador.
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);
}
Apenas uma explicação rápida: ele pega os valores do formulário, insere-os no banco de dados, cria uma mensagem para o usuário de que o post foi salvo com sucesso e redireciona para a página onde esse post é publicado para que você possa ver como ele se parece.
Página para criar um novo posto
Vamos apenas criar o modelo Edit/create.latte
:
{block content}
<h1>New post</h1>
{control postForm}
Tudo já deve estar claro a esta altura. A última linha mostra a forma que estamos prestes a criar.
Poderíamos também criar um método renderCreate
correspondente, mas não é necessário. Não precisamos obter
nenhum dado do banco de dados e passá-lo para o modelo, para que esse método fique vazio. Nesses casos, o método pode não
existir em absoluto.
Link para a criação de postos
Você provavelmente já sabe como adicionar um link para EditPresenter
e sua ação create
.
Experimente-o.
Basta adicionar ao arquivo app/UI/Home/default.latte
:
<a n:href="Edit:create">Write new post</a>
Postos de edição
Vamos também acrescentar a capacidade de editar os postos existentes. Será muito simples – já temos postForm
e podemos utilizá-lo também para edição.
Vamos adicionar uma nova página edit
ao 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());
}
E crie o modelo Edit/edit.latte
:
{block content}
<h1>Edit post</h1>
{control postForm}
E atualizar o método postFormSucceeded
, que poderá ou adicionar um novo post (como faz agora), ou editar os já
existentes:
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);
}
Quando o parâmetro id
é fornecido, isso significa que um post está sendo editado. Nesse caso, verificaremos se
o post realmente existe e, se for o caso, atualizá-lo-emos no banco de dados. Se o parâmetro id
não for
fornecido, significa que um novo post será adicionado.
Mas de onde vem o id
? É o parâmetro passado para o método renderEdit
.
Agora você pode adicionar um link para o modelo app/UI/Post/show.latte
:
<a n:href="Edit:edit $post->id">Edit this post</a>
Sumário
O blog está funcionando, as pessoas estão comentando rapidamente e nós não confiamos mais no Adminer para adicionar novos posts. É totalmente independente e até mesmo pessoas normais podem postar lá. Mas espere, isso provavelmente não está bem, que qualquer pessoa, quero dizer, qualquer pessoa na Internet, possa postar em nosso blog. É necessária alguma forma de autenticação para que somente usuários logados possam postar. Vamos acrescentar isso no próximo capítulo.