Створення та редагування дописів

********************************

Це чудово! У нас є супер крутий новий блог, люди активно обговорюють у коментарях, і у нас нарешті є трохи часу на подальше програмування. Хоча Adminer — чудовий інструмент, він не зовсім ідеальний для написання нових дописів у блозі. Мабуть, настав час створити просту форму для додавання нових дописів безпосередньо з застосунку. Давайте зробимо це.

Почнемо з проектування користувацького інтерфейсу:

1. На головній сторінці додамо посилання "Написати новий допис".

2. Це посилання відобразить форму із заголовком та текстовим полем для вмісту допису.

3. Коли ми натиснемо кнопку Зберегти, допис збережеться в базу даних.

Пізніше ми також додамо вхід і дозволимо додавати дописи лише залогіненим користувачам. Але це пізніше. Який код нам потрібно написати зараз, щоб усе працювало?

1. Створимо новий presenter з формою для додавання дописів.

2. Визначимо callback, який запуститься після успішного надсилання форми та збереже новий допис у базу даних.

3. Створимо новий шаблон, на якому буде ця форма.

4. Додамо посилання на форму в шаблон головної сторінки.

Новий presenter

===============

Новий presenter назвемо `EditPresenter` і збережемо в `app/Presentation/Edit/`. Йому також потрібно підключитися до бази даних, тому ми знову напишемо конструктор, який вимагатиме підключення до бази даних:

```php .{file:app/Presentation/Edit/EditPresenter.php}

<?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,

) {

}

}

```

Форма для збереження дописів

============================

Форми та компоненти ми вже пояснювали при створенні коментарів. Якщо це все ще незрозуміло, перегляньте [створення форм та компонентів |comments#Форма для коментування], ми поки що зачекаємо тут ;)

Тепер додамо цей метод до presenter'а `EditPresenter`:

```php .{file:app/Presentation/Edit/EditPresenter.php}

protected function createComponentPostForm(): Form

{

$form = new Form;

$form->addText('title', 'Заголовок:')

->setRequired();

$form->addTextArea('content', 'Вміст:')

->setRequired();

$form->addSubmit('send', 'Зберегти та опублікувати');

$form->onSuccess[] = $this->postFormSucceeded(...);

return $form;

}

```

Збереження нового допису з форми

================================

Продовжуємо, додаючи метод, який обробить дані з форми:

```php .{file:app/Presentation/Edit/EditPresenter.php}

private function postFormSucceeded(array $data): void

{

$post = $this->database

->table('posts')

->insert($data);

$this->flashMessage("Допис було успішно опубліковано.", 'success');

$this->redirect('Post:show', $post->id);

}

```

Лише короткий підсумок: цей метод отримує дані з форми, вставляє їх у базу даних, створює повідомлення для користувача про успішне збереження допису та перенаправляє на сторінку з новим дописом, щоб ми одразу побачили, як він виглядає.

Сторінка для створення нового допису

====================================

Тепер створимо шаблон `Edit/create.latte`:

```latte .{file:app/Presentation/Edit/create.latte}

{block content}

<h1>Новий допис</h1>

{control postForm}

```

Все вже має бути зрозуміло. Останній рядок відображає форму, яку ми створили.

Ми могли б створити також відповідний метод `renderCreate`, але це не обов'язково. Нам не потрібно отримувати жодних даних з бази даних і передавати їх у шаблон, тому цей метод був би порожнім. У таких випадках метод може взагалі не існувати.

Посилання на створення дописів

==============================

Ви, мабуть, уже знаєте, як додати посилання на `EditPresenter` та його дію `create`. Спробуйте зробити це.

Достатньо додати до файлу `app/Presentation/Home/default.latte`:

```latte

<a n:href="Edit:create">Написати новий допис</a>

```

Редагування дописів

===================

Тепер додамо також можливість редагування допису. Це буде дуже просто. У нас вже є готова форма `postForm`, і ми можемо використовувати її також для редагування.

Додамо нову сторінку `edit` до presenter'а `EditPresenter`:

```php .{file:app/Presentation/Edit/EditPresenter.php}

public function renderEdit(int $id): void

{

$post = $this->database

->table('posts')

->get($id);

if (!$post) {

$this->error('Допис не знайдено'); // Translate string

}

$this->getComponent('postForm')

->setDefaults($post->toArray());

}

```

І створимо ще один шаблон `Edit/edit.latte`:

```latte .{file:app/Presentation/Edit/edit.latte}

{block content}

<h1>Редагувати допис</h1>

{control postForm}

```

І змінимо метод `postFormSucceeded`, який зможе як додавати нову статтю (як він робить це зараз), так і редагувати вже існуючу статтю:

```php .{file:app/Presentation/Edit/EditPresenter.php}

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('Допис було успішно опубліковано.', 'success');

$this->redirect('Post:show', $post->id);

}

```

Якщо є параметр `id`, це означає, що ми будемо редагувати допис. У цьому випадку ми перевіримо, чи дійсно існує потрібний допис, і якщо так, оновимо його в базі даних. Якщо параметр `id` відсутній, це означає, що слід додати новий допис.

Але звідки береться цей параметр `id`? Це параметр, який був переданий у метод `renderEdit`.

Тепер ми можемо додати посилання в шаблон `app/Presentation/Post/show.latte`:

```latte

<a n:href="Edit:edit $post->id">Редагувати допис</a>

```

Підсумок

========

Блог тепер функціонує, відвідувачі активно коментують його, і нам більше не потрібен Adminer для публікації. Застосунок повністю незалежний, і будь-хто може додати новий допис. Зачекайте, це, мабуть, не зовсім правильно, що будь-хто — і я маю на увазі справді будь-кого з доступом до Інтернету — може додавати нові дописи. Потрібна якась безпека, щоб новий допис міг додати лише залогінений користувач. Про це ми поговоримо в наступному розділі.

{{priority: -1}}