Создавайте красивые формы с помощью PHP Form Builder

От автора: если вы являетесь разработчиком PHP, создание форм, валидация данных форм и управление сессиями PHP, вероятно, являются неотъемлемой частью вашей работы. Все эти задачи, хотя и довольно повторяющиеся, требуют много времени и внимания, особенно если вы заботитесь о лучших практиках, касающихся дизайна и безопасности.

Используя протестированную библиотеку форм, вы можете значительно улучшить не только свою эффективность, но и надежность своих PHP-приложений. CodeCanyon предлагает широкий выбор библиотек для создания форм премиум-класса. PHP Form Builder, разработанная автором Envato migli, является одной из них.

PHP Form Builder поддерживает современные CSS-фреймворки, такие как Materialize, Foundation и Bootstrap 4, а также валидацию как на стороне клиента, так и на стороне сервера. Она также включает в себя несколько готовых шаблонов форм, плагинов jQuery и утилит базы данных.

В этом руководстве я покажу вам, как выполнять обычные операции с формами с помощью PHP Form Builder.

Ресурсы

Чтобы максимально использовать это руководство, вам понадобятся:

1. Установка библиотеки

PHP Form Builder — это премиум PHP-библиотека, доступная на CodeCanyon. Поэтому войдите в свою учетную запись Envato и приобретите для нее лицензию.

Теперь вы сможете скачать файл с именем codecanyon-8790160-php-form-builder.zip. Убедитесь, что этот файл доступен на вашем сервере разработки.

Я предлагаю вам создать новый каталог проекта для хранения всех файлов, которые вы будете создавать и использовать в этом руководстве.

mkdir my_forms

Затем распакуйте загруженный вами ZIP-файл. В корневом каталоге с именем phpformbuilder, помимо исходного кода, вы найдете различные шаблоны, ресурсы и файлы справки. Обычно вам нужен только подкаталог phpformbuilder. Так что переместите его в каталог проекта.

unzip ~/Downloads/codecanyon-8790160-php-form-builder.zip
mv phpformbuilder/phpformbuilder ~/my_forms
cd my_forms

2. Регистрация библиотеки

Если вы приобрели обычную лицензию, вы сможете использовать библиотеку локально на сервере разработки и на одном домене в рабочей среде. А пока давайте зарегистрируем библиотеку только на сервере разработки. Начните с запуска сервера разработки PHP. Вот как вы можете начать прослушивать порт 8000:

php -S localhost:8000

Кроме того, вы можете использовать веб-сервер Apache. Теперь вам нужно открыть браузер и посетить локальный URL-адрес регистрации, который выглядит следующим образом: http://localhost:8000/phpformbuilder/register.php.

В появившейся форме введите код покупки, который вы найдете в электронном письме с подтверждением покупки, отправленном CodeCanyon, и нажмите кнопку Register.

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

3. Создание простой формы

Создайте новый файл с именем index.php и откройте его с помощью текстового редактора. Мы будем писать весь код внутри этого файла.

Класс PHP Form Builder Form содержит большинство методов, которые вам понадобятся для создания форм. Вот как вы импортируете его:

<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/phpformbuilder/Form.php';
use phpformbuilder\Form;

Обычно хорошей идеей является использование PHP-сессии при обработке данных формы. Итак, сейчас самое время начать новую сессию:

session_start();

Чтобы создать новую форму, вам нужно создать экземпляр класса Form, конструктор которого ожидает имя формы в качестве аргумента. А пока давайте создадим простую форму регистрации пользователей:

$registrationForm = new Form('reg-form');

Чтобы добавить в форму поля ввода, вы можете использовать метод addInput(), который ожидает тип поля, его имя, его значение по умолчанию и метку. За исключением имени и типа, все остальные аргументы являются необязательными. Следующий код показывает, как создавать поля нескольких разных типов:

$registrationForm->addInput('text', 'fname', '', 'Full Name');
$registrationForm->addInput('text', 'uname', '', 'Username');
$registrationForm->addInput('password', 'upasswd', '', 'Password');
$registrationForm->addInput('email', 'email', '', 'Email');

Чтобы добавить кнопку отправки, используйте метод addBtn() , который очень похож на метод addInput().

$registrationForm->addBtn('submit', 'reg-submit', 'submit', 'Register');
?>

4. Отображение формы

Наша форма заполнена. Но нам понадобится HTML шаблон, прежде чем мы сможем ее отобразить. Итак, после закрытия тега PHP добавьте следующий код, который создает пустой документ HTML:

<!DOCTYPE html>
<html> <head> </head> <body> </body>
</html>

На этом этапе, вызывая метод render() объекта Form внутри body документа, вы можете визуализировать форму. Она, однако, будет выглядеть очень просто.

Поэтому перед вызовом метода render() необходимо не забыть добавить в документ несколько таблиц стилей и файлов JavaScript.

PHP Form Builder поддерживает множество популярных CSS-фреймворков. Вы можете добавлять CSS- и JS-файлы фреймворка, который хотите использовать. В этом уроке мы будем использовать фреймворк Twitter Bootstrap 4.3.

Итак, внутри head документа добавьте тег link, который указывает на таблицу стилей Bootstrap. Если у вас нет ее локально, вы всегда можете использовать CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

PHP Form Builder также имеет свои собственные стили, которые вам нужно добавить в документ. Вы можете сделать это, вызвав служебный метод printIncludes().

<?php $registrationForm->printIncludes('css');
?>

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

<div style='padding:16px;margin:8px;'> <?php $registrationForm->render(); ?>
</div>

В конце body вам также нужно включить файлы JavaScript jQuery и Bootstrap 4. И, наконец, вам нужно включить собственные JavaScript-файлы и код PHP Form Builder, вызвав методы printIncludes() и printJsCode().

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js">
</script> <?php $registrationForm->printIncludes('js'); $registrationForm->printJsCode();
?>

Если вы сейчас откроете index.php в браузере, вы увидите, что форма выглядит так:

Если вам интересно, вот как выглядит форма с Materialise в качестве CSS-фреймворка:

5. Валидация входных данных

В PHP Form Builder есть класс Validator, который вы можете использовать для упрощения валидации форм на стороне сервера. Вот как вы импортируете его:

use phpformbuilder\Validator\Validator;

В качестве еще одного примера, давайте теперь создадим простую форму, входные данные которой мы можем проверить. Поскольку мы будем проверять входные данные на стороне сервера, мы должны передать novalidate в качестве аргумента в конструктор класса Form. Это отключает стандартную клиентскую логику валидации браузера, что позволяет пользователям отправлять данные формы независимо от ошибок валидации.

$myForm = new Form('my-form', 'horizontal', 'novalidate');

Наша новая форма будет принимать имя, возраст и адрес электронной почты со следующими условиями:

Вот как использовать методы addInput() и addBtn(), которые вам уже знакомы, чтобы создать три поля и кнопку отправки:

$myForm->startFieldSet('My Little Form') ->addInput('text', 'name', '', 'Name') ->addInput('text', 'age', '', 'Age') ->addInput('text', 'email', '', 'Email') ->endFieldSet() ->addBtn('submit', 'submit', 1, 'Submit');

Как вы можете видеть из приведенного выше кода, PHP Form Builder поддерживает цепочку методов. Эти методы startFieldSet() и endFieldSet(), как вы уже догадались, позволяют сгруппировать входные данные и добавить к ним заголовок.

Процесс валидации формы должен запускаться только после того, как пользователь отправил данные. Чтобы обнаружить это событие, все, что вам нужно сделать, это проверить, был ли получен доступ к странице с помощью метода HTTP POST.

if ($_SERVER["REQUEST_METHOD"] == "POST") { // More code here }

Внутри этого оператора if вы можете создать экземпляр класса Validator, вызвав метод validate(), который ожидает имя формы, которую вы хотите проверить.

$validator = Form::validate('my-form');

Объект Validator содержит несколько интуитивно названных методов валидации поля ввода. Например, вы можете использовать метод minLength(), чтобы проверить, имеет ли значение поля name не менее восьми символов. Кроме того, вы можете использовать методы integer() и max(), чтобы проверить, является ли age целым числом меньше 45.

Все методы валидации при необходимости автоматически генерируют значимые сообщения об ошибках. Если вы не удовлетворены ими, вы можете предоставить свои собственные сообщения.

$validator->minLength(8)->validate('name');
$validator->integer()->validate('age');
$validator->max(45)->validate('age');
$validator->email('Please provide a valid address') ->validate('email');

После того, как вы добавили все валидации, не забудьте вызвать метод hasErrors(), чтобы проверить, имела ли место какая-либо ошибка.

В случае неудачных проверок метод getAllErrors() возвращает все сообщения об ошибках. Чтобы отобразить их, вам нужно обновить переменную $_SESSION. Следующий код показывает, как:

if ($validator->hasErrors()) { $_SESSION['errors']['my-form'] = $validator->getAllErrors();
}

Если вы сейчас попытаетесь отправить форму с недопустимыми значениями, то сможете увидеть валидатор в действии.

6. Добавление стилей

PHP Form Builder позволяет вручную назначать CSS-классы для полей формы. Оба метода и addInput(), и addBtn() принимают пятый параметр, который можно использовать для стилизации связанного поля. Следующий код показывает, как добавить для кнопки отправки классы CSS btn и btn-primary:

$myForm->addBtn('submit', 'submit', 1, 'Submit', 'class=btn btn-primary');

После данного изменения кнопка будет выглядеть так:

Одна из лучших особенностей использования PHP Form Builder — это то, что она поддерживает большинство тем Bootstrap прямо из коробки. Это означает, что переключение с одной темы Bootstrap на другую чрезвычайно просто.

Все это время мы использовали тему Bootstrap по умолчанию. Чтобы переключиться на одну из бесплатных тем, доступных в Bootswatch, все, что вам нужно сделать, это изменить тег link, который мы добавили ранее. Вот как вы можете использовать тему Slate:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/slate/bootstrap.min.css" />

С этой новой темой, как вы можете видеть на скриншоте ниже, внешний вид формы очень отличается.

Заключение

Теперь вы знаете, как создавать привлекательные формы и обрабатывать их, используя PHP Form Builder. В этом руководстве мы также рассмотрели, как легко использовать пользовательские стили и темы CSS для оформления форм. Чтобы узнать больше, обратитесь к обширной документации, предоставленной в загруженном вами ZIP-файле.

Автор: Ashraff Hathibelagal

Источник: https://code.tutsplus.com

Редакция: Команда webformyself.