Criando e editando postagens
Isso é ótimo! Temos um novo blog super legal, as pessoas estão discutindo intensamente nos comentários e finalmente temos um pouco de tempo para programar mais. Embora o Adminer seja uma ótima ferramenta, não é totalmente ideal para escrever novas postagens no blog. Provavelmente é a hora certa de criar um formulário simples para adicionar novas postagens diretamente do aplicativo. Vamos lá.
Comecemos projetando a interface do usuário:
- Na página inicial, adicionaremos um link “Escrever nova postagem”.
- Este link exibirá um formulário com um título e uma área de texto para o conteúdo da postagem.
- Quando clicarmos no botão Salvar, a postagem será salva no banco de dados.
Mais tarde, também adicionaremos login e permitiremos a adição de postagens apenas para usuários logados. Mas isso depois. Que código precisamos escrever agora para que tudo funcione?
- Criaremos um novo presenter com um formulário para adicionar postagens.
- Definiremos um callback que será executado após o envio bem-sucedido do formulário e que salvará a nova postagem no banco de dados.
- Criaremos um novo template no qual o formulário estará.
- Adicionaremos um link para o formulário no template da página principal.
Novo presenter
Chamaremos o novo presenter de EditPresenter e o salvaremos em app/Presentation/Edit/EditPresenter.php. Ele também precisa se conectar ao banco de dados, então escreveremos novamente um construtor que exigirá a conexão com o banco de dados:
<?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, ) { } } Formulário para salvar postagens
Já explicamos formulários e componentes ao criar comentários. Se ainda não estiver claro, vá revisar a criação de formulários e componentes, nós esperaremos aqui ;)
Agora adicione este método ao presenter EditPresenter:
protected function createComponentPostForm(): Form { $form = new Form; $form->addText('title', 'Título:') ->setRequired(); $form->addTextArea('content', 'Conteúdo:') ->setRequired(); $form->addSubmit('send', 'Salvar e publicar'); $form->onSuccess[] = $this->postFormSucceeded(...); return $form; } Salvando nova postagem do formulário
Continuamos adicionando um método que processará os dados do formulário:
private function postFormSucceeded(array $data): void { $post = $this->database ->table('posts') ->insert($data); $this->flashMessage("A postagem foi publicada com sucesso.", 'success'); $this->redirect('Post:show', $post->id); } Apenas uma rápida recapitulação: este método obtém os dados do formulário, insere-os no banco de dados, cria uma mensagem para o usuário sobre o salvamento bem-sucedido da postagem e redireciona para a página com a nova postagem, para que possamos ver imediatamente como ela ficou.
Página para criar nova postagem
Vamos criar agora o template Edit/create.latte:
{block content} <h1>Nova postagem</h1> {control postForm} Tudo já deve estar claro. A última linha renderiza o formulário que acabamos de criar.
Poderíamos criar também o método renderCreate correspondente, mas não é necessário. Não precisamos obter nenhum dado do banco de dados e passá-lo para o template, então esse método estaria vazio. Nesses casos, o método não precisa existir.
Link para criar postagens
Você provavelmente já sabe como adicionar um link para o EditPresenter e sua ação create. Experimente.
Basta adicionar ao arquivo app/Presentation/Home/default.latte:
<a n:href="Edit:create">Escrever nova postagem</a> Edição de postagens
Agora também adicionaremos a opção de editar uma postagem. Será muito simples. Já temos o formulário postForm pronto e podemos usá-lo também para edição.
Adicionaremos uma nova página edit ao presenter 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 criaremos outro template Edit/edit.latte:
{block content} <h1>Editar postagem</h1> {control postForm} E modificaremos o método postFormSucceeded, que será capaz tanto de adicionar um novo artigo (como faz agora) quanto de editar um artigo já existente:
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('A postagem foi publicada com sucesso.', 'success'); $this->redirect('Post:show', $post->id); } Se o parâmetro id estiver disponível, significa que vamos editar a postagem. Nesse caso, verificaremos se a postagem solicitada realmente existe e, se sim, a atualizaremos no banco de dados. Se o parâmetro id não estiver disponível, significa que uma nova postagem deve ser adicionada.
Mas de onde vem o parâmetro id? É o parâmetro que foi passado para o método renderEdit.
Agora podemos adicionar um link ao template app/Presentation/Post/show.latte:
<a n:href="Edit:edit $post->id">Editar postagem</a> Resumo
O blog agora está funcional, os visitantes estão comentando ativamente e não precisamos mais do Adminer para publicar. O aplicativo é totalmente independente e qualquer pessoa pode adicionar uma nova postagem. Espere um momento, isso provavelmente não está totalmente certo, que qualquer pessoa – e quero dizer realmente qualquer pessoa com acesso à internet – possa adicionar novas postagens. É necessária alguma segurança para que apenas um usuário logado possa adicionar uma nova postagem. Veremos isso no próximo capítulo.
