Редактирование и удаление элементов #

Принципиальный подход #

Задачи редактирования и удаления должны выполняться путём отправки POST-запросов. Данные запросы в отличие от GET-запросов не кешируются на промежуточных прокси-серверах, также пользователь не может «легко» повторить данный запрос. При отправке POST-запроса из браузера путём перезагрузки страницы пользователю придётся явно подтвердить попытку.

Вспомним принципиальную схему по выполнению редактирования данных с использованием POST-запроса:

sequenceDiagram autonumber actor Пользователь participant Браузер participant Сервер Пользователь ->> Браузер: Нажимает на ссылку
к странице формы Браузер ->> Сервер: Отправляет GET-запрос
по адресу документа Сервер ->> Браузер: HTML-документ,
содержащий форму Браузер ->> Пользователь: Показывает документ
с формой Пользователь ->> Браузер: Заполняет интерактивные
элементы на форме Пользователь ->> Браузер: Нажимает на кнопку
отправки запроса Браузер ->> Сервер: Отправляет POST-запрос
с содержимым формы alt Форма не содержит ошибок Сервер ->> Браузер: Ответ со статусом 302, FOUND else Сервер ->> Браузер: HTML-документ, содержащий форму
с данными пользователя
и сообщениями об ошибках, пункт 3 end

Задачи редактирования и удаления элементов должны выполняться через отображение формы с дальнейшей её обработкой на стороне сервера. Удаление элемента в результате обработки GET-запроса запрещено использовать в рамках курса.

Редактирование элементов #

Для реализации данной функциональности удобно воспользоваться подсистемой создания новых объектов. Ключевые отличия от процесса создания нового объекта:

• Пользователь открывает форму по ссылке /triangles/{id}/edit. Т.е. ссылается на конкретный объект.
• Обработчик GET-запроса отображает не пустую форму, а форму с заполненными данными. Данные для показа берутся из информации об указанном пользователем объекте.
• На форме отображается информация, что происходит редактирование объекта. Название кнопки для отправки данных формы также может быть изменено.
• Во время обработки данных от формы происходит не добавление нового элемента, а его замена на новый с новыми данными.

При правильной организации процедуры добавления элементов, её многие элементы можно повторно использовать или адаптировать с небольшими изменениями для процедуры редактирования. В частности стоит повторно использовать:

• Подсистему проверки данных, приходящих от пользователя.
• Форму для ввода новых значений параметров элементов.

Задача № 1. Редактирование треугольников #

1. Добавьте ссылки на редактирование информации о треугольнике. Для конкретного треугольника данная ссылка будет выглядеть как /triangles/{id}/edit.
   1. На странице списка треугольников добавьте ссылку на редактирование к каждому элементу, отображающую краткую информацию о треугольнике.
   2. На странице отображения детальной информации добавьте ссылку на страницу по редактированию информации.
2. Реализуйте обработчик GET-запроса на редактирование страницы.
   1. Данный обработчик должен извлекать идентификатор объекта из переменной пути.
   2. В случае ошибки в пути (некорректные данные, объекта с указанным идентификатором не существует) пользователю необходимо показать страницу с сообщением об ошибке.
   3. Данные объекта необходимо преобразовать в формат, который понимает страница для отображения формы редактирования информации об объекте. При использовании линз данные можно легко преобразовать в данные для объекта WebForm, т.к. данные описываются ассоциативным массивом, содержащим пары название поля (строка) - список значений (строк).
   4. Отобразите HTML-документ с формой, заполненной данными существующего объекта.
3. Свяжите обработчик GET-запроса с маршрутом редактирования объекта.
   1. Убедитесь, что форма с данными о треугольнике отображаются при переходе со списка объектов и со страницы информации об объекте.
   2. Модифицируйте шаблон для отображения формы, чтобы он указывал пользователю о том, что происходит редактирование существующего объекта. Если Вы не указывали путь (атрибут action формы) для обработки запроса, то форма должна корректно ссылаться на путь для редактирования объекта.
4. Реализуйте обработчик POST-запроса на редактирование элемента. Данный обработчик также будет вызываться по параметризованному пути /triangles/{id}/edit.
   1. Повторите получение и проверку параметра идентификатора объекта из переменной пути, реализованную в рамках GET-запроса.
   2. Проверьте содержимое формы, используя процедуру проверки данных, реализованную для задачи добавления треугольника.
   3. В случае проблемы при проверки данных с формы, отобразите форму с данными пользователя и сообщениями об ошибках.
   4. Если данные были переданы успешно, то необходимо создать новый объект с ними и заменить им существующий объект в хранилище данных. Пользователя необходимо перенаправить на страницу, на которой он сможет увидеть результаты редактирования данных. При замене данных уникальный идентификатор объекта не должен измениться.
5. Свяжите обработчик POST-запроса с маршрутом редактирования объектов.
   1. Удостоверьтесь, что проверка данных от пользователя реализована корректно.
   2. Удостоверьтесь, что данные успешно редактируются, если пользователь ввёл корректные данные.

Удаление элементов #

Данная процедура логически совпадает с процедурами добавления и редактирования элемента. Ключевым отличием её становится содержимое формы: форма должна представлять из себя лишь логическое поле, выбором которого пользователь сможет подтвердить своё согласие на выполнение операции по потере данных, на заполнение которых было потрачено его время.

Если данные достаточно важны, то это поле по умолчанию не должно быть активным. Т.е. пользователю для удаления важных данных потребуется:

1. Нажать на ссылку «удалить» элемент.
2. На странице формы для подтверждения удаления подтвердить действие путём выбора интерактивного элемента формы.
3. На странице формы нажать на кнопку отправки формы.

Эта последовательность действий должна снижать риск случайного удаления элементов из приложения.

Задача № 2. Реализуйте удаление элементов в списке треугольников #

1. На странице с детальной информацией об элементе добавьте ссылку на страницу удаления элемента. Не надо добавлять данную ссылку на страницу со списком треугольников.
2. Реализуйте шаблон страницы для отображения формы с подтверждением удаления треугольника. На данной странице необходимо отобразить:
   1. Вопрос пользователю об удалении компонента.
   2. Информацию об объекте, который будет удалён.
   3. Элементы формы, позволяющие подтвердить действие и отправить POST-запрос.
   4. Данными для отображения данной формы может стать объект, описывающий сущность треугольника.
3. Реализуйте обработчик GET-запроса на отображение формы по удалению элемента.
   1. Данный обработчик должен получать из пути запроса идентификатор объекта и выполнять проверку, как и в предыдущих обработчиках на редактирование элемента.
   2. По указанному идентификатору треугольника необходимо получить объект треугольника. Данный объект необходимо передать модели страницы формы.
   3. Сформировать HTML-документ формы и передать его клиенту.
4. Свяжите обработчик GET-запроса с маршрутом /triangles/{id}/delete в маршрутизаторе. Убедитесь, что пользователь может увидеть форму по удалению треугольника со всеми данными.
5. Реализуйте обработчик POST-запроса для обработки результатов отправки формы.
   1. Реализуйте проверку данных и получение объекта треугольника по переданному идентификатору.
   2. Удостоверьтесь, что пользователь подтвердил удаление треугольника на форме.
   3. Если пользователь не подтвердил удаление, то необходимо возвратить пользователю форму с указанием, что пользователю необходимо подтвердить данное действие.
   4. Если пользователь подтвердил удаление, то необходимо выполнить данную операцию и перенаправить пользователя на список треугольников.
6. Свяжите POST-обработчик с маршрутом по удалению данных, /triangles/{id}/delete.
   1. Удостоверьтесь, что приложение требует подтверждения удаления элемента.
   2. Удостоверьтесь, что приложение позволяет удалить треугольник.