Работа с формами
Для передачи данных от пользователя Web-страницы на сервер используются HTML-формы. Для работы с формами в PHP предусмотрен ряд специальных средств.
Предварительно определенные переменные
В PHP существует ряд предварительно определенных переменных, которые не меняются при выполнении всех приложений в конкретной среде. Их также называют переменными окружения или переменными среды. Они отражают установки среды Web-сервера Apache, а также информацию о запросе данного браузера. Есть возможность получить значения URL, строки запроса и других элементов HTTP-запроса.
Пример 1
В результате на экране появится список всех глобальных переменных, включая переменные окружения. Наиболее часто используемые из них:
Переменная | Описание | Cодержание |
---|---|---|
$_SERVER[‘HTTP_USER_AGENT’] | Название и версия клиента | Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1061.1 Safari/536.3 |
$_SERVER[‘REMOTE_ADDR’] | IP-адрес | 37.9.13.203 |
getenv(‘HTTP_X_FORWARDED_FOR’) | Внутренний IP-адрес клиента | |
$_SERVER[‘REQUEST_METHOD’] | Метод запроса ( GET или POST ) | GET |
$_SERVER[‘QUERY_STRING’] | При запросе GET закодированные данные, передаваемые вместе с URL | |
$_SERVER[‘REQUEST_URL’] | Полный адрес клиента, включая строку запроса | |
$_SERVER[‘HTTP_REFERER’] | Адрес страницы, с которой был сделан запрос | http://htmlweb.ru/ |
$_SERVER[‘PHP_SELF’] | Путь к выполняемой программе | /index.php |
$_SERVER[‘SERVER_NAME’] | Домен | htmlweb.ru |
$_SERVER[‘REQUEST_URI’] | Путь | /php/php_form.php |
Обработка ввода пользователя
PHP-программу обработки ввода можно отделить от HTML-текста, содержащего формы ввода, а можно расположить на одной странице.
Пример 2
При обработки элемента с многозначным выбором для доступа ко всем выбранным значениям нужно к имени элемента добавить пару квадратных скобок. Для выбора нескольких эллементов следует удерживать клавишу Ctrl.
Создание контактной формы в PHP
Независимо от типа веб-сайта, которым кто-то владеет или управляет, он, вероятно, нуждается в контактной форме. Контактная форма может помочь вашим посетителям запросить расценки, запросить информацию или поделиться любыми советами или проблемами, с которыми они сталкиваются при использовании веб-сайта.
В этом уроке мы сосредоточимся на создании полнофункциональной контактной формы в PHP от начала до конца. Мы начнем с разметки всех полей, которые нам нужно добавить, и базового стиля контактной формы. После этого мы перейдем к коду PHP для реализации его функциональности.
Но если вы хотите узнать, как создается контактная форма, тогда читайте дальше! Это может быть проще, чем вы думаете.
Разметка нашей HTML контактной формы
Если веб-сайт, которым вы управляете, очень популярен, через контактную форму вы получите много писем. Чтобы убедиться, что нужные люди смогут прочитать эти письма и быстро ответить, вам нужно еще пару полей. Например, вы можете добавить поле, которое может определить, с каким отделом посетитель хочет связаться, например, отдел маркетинга, тех.поддержки или бухгалтерия. Эта информация впоследствии может быть использована для маршрутизации электронной почты соответствующим образом. В конечном итоге это может помочь вам быстрее ответить и более эффективно сортировать электронные письма.
Сколько полей вы добавляете в контактную форму, зависит от типа веб-сайта, который вы запускаете, но убедитесь, что вы не переусердствовали. Принуждение посетителей к заполнению слишком большого количества данных может отговорить их вообще связываться с вами.
Давайте напишем HTML-код, чтобы добавить все поля, которые я только что упомянул, в нашу контактную форму.
Следующая демонстрация CodePen показывает нам, как выглядит наша контактная форма с разметкой выше а также CSS.
Создание вашей контактной формы HTML с использованием PHP
Прямо сейчас наша форма не делает ничего полезного. Посетители могут заполнить его и нажать кнопку «Отправить сообщение», но мы ничего не получим, потому что нет кода службы для обработки информации, представленной в форме. В этом разделе мы сделаем нашу контактную форму функциональной, используя PHP.
Начните с создания файла contact.php и вставьте в него следующий код.
Наконец, мы используем функцию mail() для отправки электронного письма, которое включает информацию, которую посетитель хотел, чтобы мы знали. После успешной доставки электронной почты мы сообщаем посетителям, что мы получили их электронную почту и с ними скоро свяжутся.
Тем не менее, вы должны быть очень осторожны при избавлении от нежелательных символов при вводе пользователем. Например, вы можете решить использовать filter_var($user_input, FILTER_SANITIZE_STRING); чтобы на некотором поле убрать все теги и кодировать специальные символы. Однако этот флаг также удаляет безвредные символы введенные пользователями. Вот пример:
Если на вашем веб-сайте много тем, связанных с математикой, пользователи будут относительно часто писать в контактных формах или сообщениях на форуме. Использование флага FILTER_SANITIZE_STRING с функцией filter_var() в этом случае удалит необходимую информацию из сообщения.
Я хочу подчеркнуть, что, хотя вы всегда должны проверять или очищать пользовательские данные, убедитесь, что в ходе этого вы не удаляете важную информацию.
Заключительные мысли
Создать базовую контактную форму в PHP относительно просто, если вы знакомы с основами. Вы начинаете с написания HTML-кода, необходимого для создания элементов ввода для такой информации, как имя пользователя, адрес электронной почты, номер телефона и т.д. Следующим шагом является написание CSS, чтобы убедиться, что контактная форма идеально вписывается в остальную часть веб-сайта. Последний шаг включает в себя написание PHP-кода, который возьмет информацию из контактной формы и отправит ее вам по почте.
Цель состоит в том, чтобы убедиться, что различные элементы формы расположены таким образом, чтобы не вводить людей в заблуждение, а пользовательский ввод очищается и проверяется перед отправкой заинтересованным сторонам. Если все это ново для вас или если вы не хотите тратить много времени на создание профессионально выглядящей контактной формы, вы обязательно должны проверить эти самые популярные PHP-скрипты контактной формы.
Если у вас есть какие-либо вопросы, дайте мне знать в комментариях. В следующем уроке вы узнаете, как реализовать собственную CAPTCHA, чтобы контролировать спам в контактной форме.
Если вас интересуют скрипты PHP-форм профессионального качества, которые вы можете начать использовать на своем сайте сегодня, ознакомьтесь с некоторыми другими нашими публикациями.
Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
Логика работы PHP-программы будет такая:
Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
Создание форм регистрации и авторизации на PHP
Система регистрации и авторизации необходима для любого сайта, который хранит информацию о своих пользователях. Такие системы используются на сайтах самой разнообразной тематики – от образовательных платформ, которые хранят сведения о прохождении обучающих курсов и оценках, до онлайн-магазинов, которые сохраняют историю покупок и адреса пользователей. В этом руководстве мы научим вас создавать формы регистрации и авторизации с нуля.
Разработка форм регистрации и авторизации
Мы рассмотрим процесс создания простых форм для регистрации и авторизации пользователей. Регистрационная форма будет содержать поля для ввода имени, пароля и адреса электронной почты. Имя пользователя и адрес электронной почты при этом должны быть уникальными для каждого конкретного пользователя. В случае попытки регистрации второй учетной записи с таким же именем пользователя (или электронной почтой) будет выводиться сообщение об ошибке с пояснением о том, что такие данные уже используются в системе.
Код регистрационной формы
Ниже приведен HTML-код необходимый для создания формы регистрации. Сохраните его вфайле register.php.
Несмотря на простоту данной формы, для проведения простейшей валидации данных в ней используется HTML5. К примеру, использование type=»email» обеспечит уведомление пользователя о том, что он неправильно ввел адрес электронной почты. Кроме того, применение pattern позволит провести проверку имени пользователя – логин может состоять только из латинских букв и цифр.
Наиболее продвинутый способ валидации данных подразумевает использование jQuery – в этом случае разработчик получает полный контроль над показом, расположением и внешним видом сообщений об ошибках ввода. Подробнее о валидации на стороне клиента с использованием jQuery рассказывается в этой статье.
Исходный код страницы авторизации
CSS-стили для оформления форм
Для улучшения внешнего вида форм примените к ним следующие CSS-стили:
В коде, приведенном выше, предусмотрено оформление заголовков и сообщений об ошибках валидации. Фрагменты HTML и CSS кода, рассмотренные выше, могут использоваться в качестве основы, поскольку ваш собственный проект может нуждаться в другом стиле оформления, а также в дополнительных полях ввода.
Создание таблицы с учетными данными и подключение к базе данных
Следующий шаг – создание таблицы базы данных, содержащей учетные данные пользователей. В нашем случае таблица состоит всего из четырех столбцов:
Для быстрого создания таблицы базы данных можно использовать следующий SQL-запрос:
Теперь создайте файл config.php и сохраните в нем приведенный далее код для подключения к базе данных:
В приведенном выше коде замените название базы данных на то, которое вы используете для своего собственного сайта.
Исходный код для регистрации пользователей
Теперь пришла очередь написать код для регистрации пользователей. Главная функция этого кода – проверить, не зарегистрирован ли уже аналогичный адрес электронной почты в базе данных. Если нет, новое имя пользователя вместе с адресом его электронной почты и паролем передаются для сохранения в базе данных.
Сохраните приведенный далее код в начале файла registration.php :
На первом этапе выполнения кода включается config.php, начинается сессия. Так мы получаем возможность сохранить любую информацию для дальнейшего использования на всех страницах сайта.
После этого мы проверяем, существует ли предоставленный пользователем адрес электронной почты в базе данных. Если это так, пользователь получит соответствующее сообщение. Если же такого email-адреса в базе данных, используемой сайтом, нет, вся введенная информация сохраняется в базе данных и пользователь видит сообщение об успешной регистрации.
Функция авторизации
На предыдущем этапе мы уже сохранили код для формы авторизации пользователей в системе. На этом этапе мы будем проверять, соответствуют ли введенные пользователем данные учетной записи, сохраненной в базе.
Приведенный далее код должен располагаться в начале файла login.php:
Важно отметить, что мы не проверяем правильность имени и пароля одновременно. Поскольку пароль сохранен в хэшированном виде, сначала необходимо запросить хэш с помощью предоставленного имени пользователя. Когда мы получим хэш, можно будет проверить предоставленный пользователем пароль на соответствие хэшированному – с помощью функции password_verify().
Ограничение доступа к страницам
На большинстве сайтов, запрашивающих учетные данные посетителей, есть страницы, на которых зарегистрированные пользователи хранят свою личную информацию. Для защиты подобных страниц от несанкционированного доступа можно использовать переменные сессии. Если переменная сессии не создана, пользователь перенаправляется на страницу авторизации. Если переменная сессии создана, пользователь видит содержимое страницы:
Все, что нужно сделать для ограничения или предоставления доступа – это использовать в начале приведенного выше скрипта строку session_start().
Типичные ошибки и способы их решения
При использовании скрипта для ограничения доступа неавторизованных пользователей обычно возникают три типа ошибок.
Некорректное имя переменной
«Заголовки уже отправлены»
Переменные сессии не сохраняются при переходах между страницами
Блог Vaden Pro
Создаем форму обратной связи на PHP
Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.
Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.
Итак, начинаем создание формы обратной связи:
В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:
И визуально она выглядит сейчас следующим образом:
Согласен, пока все некрасиво и ничего не понятно, но мы только начали.
Рассмотрим приведенный выше код подробно:
Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:
Мы использовали данный код:
Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:
Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.
Ну вот и пришло время сделать нашу форму работоспособной.
Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.
В конечном итоге его код будет выглядеть следующим образом:
Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:
Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.
Дале вставляем во внутреннюю часть обработчика формы:
Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.
Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.
Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.
После чистки тегов добавляем отправку сообщения:
Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:
Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.
Проверка формы на адекватность вводимых данных
Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.
Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.
Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:
Ну а теперь обычный разбор:
Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:
Теперь по пунктам забираем состав проверки:
Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.
Полный код страниц формы
Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:
Подводя итоги
Формы могут обладать и гораздо более сложной структурой, включать в себя списки и много чего еще, но основные принципы их обработки и проверки, рассмотренные в этой статье, остаются везде одинаковыми.
Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.
Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.
О защите от спама я напишу в следующих статьях.