Crearea și editarea posturilor
Ce timp minunat! Avem un nou blog super tare, oamenii se ceartă în comentarii și în sfârșit avem timp pentru mai multă programare. Deși ne place Adminer, nu este atât de confortabil să scriem articole de blog în el. Poate că este momentul potrivit pentru a adăuga un formular simplu pentru adăugarea de noi postări direct din aplicația noastră. Haideți să o facem.
Să începem prin a proiecta interfața de utilizare:
- Pe pagina principală, să adăugăm un link „Scrieți o nouă postare“.
- Se va afișa un formular cu titlu și textarea pentru conținut.
- Când faceți clic pe un buton „Save“, va salva postarea de pe blog.
Mai târziu vom adăuga și autentificarea și vom permite doar utilizatorilor autentificați să adauge postări noi. Dar să facem asta mai târziu. Ce cod va trebui să scriem pentru a face să funcționeze acest lucru?
- Creați un nou prezentator cu un formular pentru adăugarea de postări.
- Definiți un callback care va fi declanșat după trimiterea cu succes a formularului și care va salva noua postare în baza de date.
- Creați un nou șablon pentru formular.
- Adăugați un link către formular în șablonul paginii principale.
Noul prezentator
Numiți noul prezentator EditPresenter
și salvați-l în app/UI/Edit/
. De asemenea, acesta trebuie
să se conecteze la baza de date, așa că și aici vom scrie un constructor care va necesita o conexiune la baza de date:
<?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 pentru salvarea postărilor
Formularele și componentele au fost deja abordate atunci când am adăugat suport pentru comentarii. Dacă sunteți confuz în legătură cu subiectul, mergeți să verificați din nou cum funcționează formularele și componentele, noi vom aștepta aici ;)
Acum adăugați această metodă la 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;
}
Salvarea unei noi postări din formular
Continuați prin adăugarea unei metode de gestionare.
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);
}
Doar o scurtă explicație: aceasta preia valorile din formular, le inserează în baza de date, creează un mesaj pentru utilizator că postarea a fost salvată cu succes și redirecționează către pagina în care este publicată acea postare, astfel încât să puteți vedea cum arată.
Pagina pentru crearea unei postări noi
Să creăm doar șablonul Edit/create.latte
:
{block content}
<h1>New post</h1>
{control postForm}
Totul ar trebui să fie clar până acum. Ultima linie arată formularul pe care urmează să îl creăm.
Am putea, de asemenea, să creăm o metodă renderCreate
corespunzătoare, dar nu este necesar. Nu avem nevoie
să obținem date din baza de date și să le transmitem șablonului, așa că acea metodă ar fi goală. În astfel de cazuri,
este posibil ca metoda să nu existe deloc.
Legătură pentru crearea de mesaje
Probabil că știți deja cum să adăugați un link la EditPresenter
și la acțiunea sa create
.
Încercați-o.
Trebuie doar să adăugați la fișierul app/UI/Home/default.latte
:
<a n:href="Edit:create">Write new post</a>
Editarea posturilor
Să adăugăm, de asemenea, posibilitatea de a edita posturile existente. Va fi destul de simplu – avem deja
postForm
și îl putem folosi și pentru editare.
Vom adăuga o nouă pagină edit
la 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());
}
Și vom crea șablonul Edit/edit.latte
:
{block content}
<h1>Edit post</h1>
{control postForm}
Și actualizați metoda postFormSucceeded
, care va putea fie să adauge o nouă postare (așa cum se întâmplă
acum), fie să le editeze pe cele 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('Post was published', 'success');
$this->redirect('Post:show', $post->id);
}
Atunci când este furnizat parametrul id
, înseamnă că se editează o postare. În acest caz, vom verifica
dacă postul există cu adevărat și, dacă da, îl vom actualiza în baza de date. În cazul în care parametrul id
nu este furnizat, înseamnă că se va adăuga o nouă postare.
Dar de unde provine id
? Este parametrul transmis metodei renderEdit
.
Acum puteți adăuga un link la șablonul app/UI/Post/show.latte
:
<a n:href="Edit:edit $post->id">Edit this post</a>
Rezumat
Blogul funcționează, oamenii comentează rapid și nu ne mai bazăm pe Adminer pentru adăugarea de noi articole. Este complet independent și chiar și oamenii normali pot posta acolo. Dar stați puțin, probabil că nu este în regulă, că oricine, adică chiar oricine de pe internet, poate posta pe blogul nostru. Este necesară o formă de autentificare, astfel încât doar utilizatorii conectați să poată posta. Vom adăuga acest lucru în capitolul următor.