Формы, которые изменяют данные, устроены сложнее как с клиентской стороны, так и с серверной. Для уверенной работы с ними необходимо разбираться в следующих вопросах:
- Знание соответствующих HTML-тегов
- Понимание того, как отправляются формы по HTTP
- Обработка на стороне сервера
- Валидация и вывод ошибок
Начнем с того, что за вывод формы и ее обработку должны отвечать два разных обработчика, значит, это разные маршруты. Ниже пример маршрутов для создания нового пользователя:
- GET /users/new — страница с формой, которую заполняет пользователь. Эта форма отправляет POST-запрос на адрес /users, указанный в атрибуте
action
- POST /users — маршрут, обрабатывающий данные формы
Подобная схема именования рекомендуется и автоматически создается многими фреймворками, такими как Rails. Она хорошо ложится на REST-архитектуру, о которой мы еще поговорим.
Форма
<!-- templates/users/new.phtml -->
<form action="/users" method="post">
<div>
<label>
Имя
<input type="text" name="user[name]">
</label>
</div>
<div>
<label>
Email
<input type="email" required name="user[email]">
</label>
</div>
<div>
<label>
Пароль
<input type="password" required name="user[password]">
</label>
</div>
<div>
<label>
Подтверждение пароля
<input type="password" required name="user[passwordConfirmation]">
</label>
</div>
<div>
<label>
Город
<select name="user[city]">
<option value="3">Москва</option>
<option value="13">Пенза</option>
<option value="399">Томск</option>
</select>
</label>
</div>
<input type="submit" value="Sign Up">
</form>
Каждое имя определяется как ключ в массиве user
. Такой способ определения имен — необязательный, но он удобен для массовой обработки значений формы. Их изоляция в одном массиве позволяет избежать потенциальных пересечений с другими данными. В поисковых формах эта схема тоже удобна, если количество элементов больше одного.
С точки зрения HTTP не существует способа передавать массивы. Если не указано иного, то данные формы кодируются в теле запроса как application/x-www-form-urlencoded. Чисто технически это выглядит как строка запроса с парами ключ-значение, объединенные символом &:
POST /users HTTP/1.1
Host: example.com
Content-type: application/x-www-form-urlencoded
Content-length: 42
key=value&key2=value2&user%5Bname%5D%3Djohn
В конце тела закодирован ключ user[name]
. Превращение таких ключей в массив идет на уровне интерпретатора в случае PHP. Либо на уровне самого фреймворка в случае остальных языков.
Обработка данных
<?php
$repo = new App\UserRepository();
$app->post('/users', function ($request, $response) use ($repo) {
$validator = new Validator();
$user = $request->getParsedBodyParam('user');
$errors = $validator->validate($user);
if (count($errors) === 0) {
$repo->save($user);
return $response->withRedirect('/users', 302);
}
$params = [
'user' => $user,
'errors' => $errors
];
return $this->get('renderer')->render($response, "users/new.phtml", $params);
});
Обработка данных формы начинается с извлечения данных из тела запроса. Это можно сделать двумя способами, похожими на то, как мы извлекаем параметры запроса:
getParsedBody()
— извлекает все данныеgetParsedBodyParam($name, $defaultValue)
— извлекает значение конкретного параметра. Вторым параметром принимает значение по умолчанию
<?php
$user = $request->getParsedBodyParam('user');
Далее нужно убедиться в том, что данные введены верно. Этот процесс называется валидацией.
Slim не предоставляет механизмов для валидации. Ее можно получить из сторонних библиотек. В нашем случае валидация реализуется классом с одним методом validate()
, который проверяет данные формы. Также он возвращает специальный массив $errors
. В нем ключ — это название поля, а значение — текст ошибки, который нужно вывести в форме:
<?php
$validator = new Validator();
// function validate($user)
// {
// $errors = [];
// if (empty($user['name'])) {
// $errors['name'] = "Can't be blank"
// }
//
// // ...
//
// return $errors;
// }
$errors = $validator->validate($user);
Если ошибок нет, то данные формы сохраняются, например, в базу данных. Об этом подробнее в следующем уроке. После сохранения выполняется перенаправление (HTTP redirect). За перенаправление отвечает заголовок Location и статусы с кодом 3XX:
<?php
if (count($errors) === 0) {
$repo->save($user);
return $response->withRedirect('/users');
}
Если в процессе обработки возникли ошибки, выполняется рендеринг формы из шаблона, который мы использовали для /users/new. В этот шаблон передаются как данные формы, так и список ошибок.
Редиректа не происходит, в адресной строке остается адрес /users. Если попробовать в этот момент нажать f5, то браузер выдаст предупреждение о том, что мы пытаемся повторно отправить данные. Это сообщение предупреждает о том, что метод POST не идемпотентен, и повторная отправка формы может привести к повторному созданию пользователя:
<?php
$params = [
'user' => $user,
'errors' => $errors
];
return $this->get('renderer')->render($response, "users/new.phtml", $params);
Вернемся к нашей форме и изменим ее так, чтобы в нее подставлялись возникающие ошибки и значения полей, введенные пользователем:
<!-- templates/users/new.phtml -->
<form action="/users" method="post">
<div>
<label>
Имя
<input type="text" name="user[name]" value="<?= htmlspecialchars($user['name']) ?>">
</label>
<?php if (isset($errors['name'])): ?>
<div><?= $errors['name'] ?></div>
<?php endif ?>
</div>
<div>
<label>
Email
<input type="email" required name="user[email]" value="<?= htmlspecialchars($user['email']) ?>">
</label>
<?php if (isset($errors['email'])): ?>
<div><?= $errors['email'] ?></div>
<?php endif ?>
</div>
<div>
<label>
Пароль
<input type="password" required name="user[password]" value="<?= htmlspecialchars($user['password']) ?>">
</label>
<?php if (isset($errors['password'])): ?>
<div><?= $errors['password'] ?></div>
<?php endif ?>
</div>
<div>
<label>
Подтверждение пароля
<input type="password" required name="user[passwordConfirmation]" value="<?= htmlspecialchars($user['passwordConfirmation']) ?>">
</label>
</div>
<div>
<label>
Город
<select name="user[city]">
<option value="">Select</option>
<option <?= $user['city'] === '3' ? 'selected' : '' ?> value="3">Москва</option>
<option <?= $user['city'] === '13' ? 'selected' : '' ?> value="13">Пенза</option>
<option <?= $user['city'] === '399' ? 'selected' : '' ?> value="399">Томск</option>
</select>
</label>
<?php if (isset($errors['city'])): ?>
<div><?= $errors['city'] ?></div>
<?php endif ?>
</div>
<input type="submit" value="Sign Up">
</form>
Такое изменение формы требует изменения обработчика /users/new. Чтобы избежать ошибок, нужно передать в шаблон пустой массив $errors
и массив $user
. В последнем необходимо задать значения по умолчанию для соответствующих полей формы. Так в шаблоне не придется выполнять проверку данных формы на существование:
<?php
$app->get('/users/new', function ($request, $response) {
$params = [
'user' => ['name' => '', 'email' => '', 'password' => '', 'passwordConfirmation' => '', 'city' => ''],
'errors' => []
];
return $this->get('renderer')->render($response, "users/new.phtml", $params);
});
Форма увеличилась. На практике она будет еще больше из-за дополнительного оформления, например, отступов и подсветки ошибок. С опытом станет понятно, что так невозможно работать. Ради простейшей обработки придется писать много идентичного кода в HTML. Эту работу нужно автоматизировать.
Для генерации форм используются специальные билдеры. Микрофреймворки не имеют встроенных билдеров, поэтому придется искать их самостоятельно.
Довольно популярны формы из фреймворка Symfony. В этом компоненте каждая форма представлена своим классом. Компонент поддерживает валидацию, имеет встроенные механизмы защиты от некоторых атак и многое другое.
Самостоятельная работа
-
Создайте шаблон и добавьте обработчик, который выводит форму создания пользователя с полями: nickname и email. А вот id должен генерироваться внутри приложения
-
Добавьте обработчик, который сохраняет введенные данные. Для хранения пользователя используйте файл. Сами данные можно кодировать в json с помощью
json_encode()
и декодировать с помощьюjson_decode()
. Для работы с файлом используйте функции file_put_contents() и file_get_contents() -
После добавления данных в файл должен происходить редирект на адрес /users
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.