ProfiPHPProfiPHP
  1. Главная
  2. Самоучитель PHP 7
  3. Взаимодействие РНР с HTML

Взаимодействие РНР с HTML

Язык гипертекстовой разметки HTML интерпретируется браузером на стороне клиента. Для выполнения РНР-скриптов необходимо действие пользователя, например, заполнить НТМL-форму и отправить результат на сервер. Опишем, как РНР взаимодействует с HTML и рассмотрим два метода протокола НТТР: GET - передача параметров в строке запроса и POST - передача параметров в теле НТТР-документа.

Передача параметров методом GET


GЕТ-параметры передаются в строке запроса после символа вопроса (?).
http://localhost/get.php?id=1
В данном URL последовательность id=1 задает GЕТ-параметр с именем id и значением 1. GЕТ-параметры автоматически помещаются в суперглобальный массив $_GET. Имена параметров выступают в качестве ключей массива:
<?php
echo $_GET['id'];
Если имеется необходимость передать скрипту одновременно несколько GЕТ-параметров, они разделяются символом амперсанда &:
http://localhost/get.php?id=1&page=main
В приведенном URL передаются два GЕТ-параметра: id со значением 1 и page со значением main. Вывести все значения суперглобального массива $_GET можно воспользовавшись функцией Print_r:
<?php
echo '<pre>';
print_r($_GET);
echo '</pre>';
В результате выполнения примера будет выведен следующий дамп массива:
Array
(
[id] => 1
[page] => main
)
В качестве GЕТ-параметров могут выступать элементы массива, в этом случае суперглобальный массив $_GET становится двумерным. Например:
http://localhost/get.php?id[]=1&id[]=2
Данный пример будет содержать массив:
Array
(
[id] => Array
(
[0] => 1
[1] => 2
)

)
Здесь элементам были автоматически назначены числовые индексы, начиная с 0, однако индексы и ключи могут назначаться элементам непосредственно в строке запроса. Например:
http://localhost/get.php?id['user']=2
В результате будет выведет следующий дамп:
Array
(
[id] => Array
(
['user'] => 2
)

)
GЕТ-параметры и их значения могут содержать недопустимые с точки зрения URL символы (пробелы, русские символы), которые при формировании URL обязательно должны преобразовываться в безопасный формат. Для такого преобразования в РНР предусмотрены специальные функции. Например, функция Urlencode, которая принимает в качестве аргумента строку и кодирует ее для безопасной передачи через URL.

Например, сформируем ссылку на файл test.php, через GЕТ-параметр link, которому передается фраза "Привет, мир!":
<?php
echo "<a href='test.php?link=".urlencode("Привет, мир!")."'>ссылка</a>";
Исходный код результирующей НТМL-страницы будет содержать следующую строку:
<a href='test.php?link=%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82%2C+%D0%BC%D0%B8%D1%80%21'>ссылка</a>
Помимо GЕТ-параметров в скрипте может понадобиться информация о текущей странице, номере порта, хосте и т.п. Для разбора строки запроса предназначена специальная функция Parse_url, которая принимает в качестве первого параметра строку запроса и возвращает отдельные его компоненты в виде ассоциативного массива. Приведем пример разбора URL при помощи данной функции:
<?php
$url = 'https://user:pass@www.site.com/path/index.php?par=value#anch';
$arr = parse_url($url);
echo '<pre>';
print_r($arr);
echo '<pre>';
Результатом выполнения примера будет следующий дамп массива $arr:
Array
(
[scheme] => http
[host] => www.site.ru
[user] => user
[pass] => pass
[path] => /path/index.php
[query] => par=value
[fragment] => anch
)
Если функция Parse_url принимает второй параметр Component, вместо массива возвращается строка с одним из компонентов строки запроса, которые указываются предопределенными константами:
echo parse_url($url, PHP_URL_HOST); // www.site.com

НТМL-форма и ее обработчик


НТМL-формы создаются при помощи парных тегов <form> и </form>, между которыми располагаются теги элементов управления. Приведем пример НТМL-код формы, содержащей два элемента управления с однострочной текстовой областью text и кнопку подтверждения submit:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>HTML-форма</title>
<meta charset='utf-8'>
</head>
<body>
<form method='post'>
<input type='text' name='first'><br />
<input type='text' name='second'><br />
<input type='submit' value='Отправить'>
</form>
</body>
</html>
Результатом интерпретации НТМL-кода из примера будет простейшая НТМL-форма. Тег <form> может содержать атрибут Method, который устанавливает в качестве метода передачи метод POST. Помимо метода POST для передачи данных из НТМL-формы в обработчик применяется также метод GET. В случае, если атрибут не указан, данные отправляются методом GET. Представим основные атрибуты, позволяющие управлять поведением НТМL-формы:

- Action - Указывает адрес обработчика, которому передаются данные из НТМL-формы. Если тег <form> не содержит атрибута action, то данные отправляются в файл, в котором описывается НТМL-форма.

- Enctype - Определяет формат отправляемых данных при использовании метода передачи данных РОSТ. По умолчанию используется формат application/x-www-form-urlencoded. Если НТМL-форма содержит элемент управления file, предназначенный для передачи файлов на сервер, то следует указать формат multipart/form-data.

- Method - Определяет метод передачи данных (POST или GET) из НТМL-формы обработчику. По умолчанию, если не указывается атрибут method, применяется метод GET.

- Name - Определяет имя НТМL-формы, которое может использоваться для доступа к элементам управления в скриптах, выполняющихся на стороне клиента (например, скриптах JavaScript)

- Target - Указывает окно для вывода результата, полученного от обработчика HTML-формы. Атрибут может принимать следующие значения: _blank - результат открывается в новом окне; _self - результат открывается в текущем окне; данный режим используется по умолчанию, если атрибут target не указан явно; _parent - результат открывается в родительском фрейме; при отсутствии фреймов режим аналогичен _self; _top - отменяет все фреймы, если они имеются, и загружает страницу в полном окне браузера; при отсутствии фреймов работает как _self.

Продемонстрируем пример НТМL-формы, в котором данные отправляются обработчику, расположенному в файле form_data.php, который осуществляет вывод в окно браузера введенной в поле first строки:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>HTML-форма</title>
<meta charset='utf-8'>
</head>
<body>
<form action='form_data.php' method='post'>
<input type='text' name='data'>
<input type='submit' value='Отправить'>
</form>
</body>
</html>
Файл form_data.php имеет следующее содержание:
<?php
// Если поле first не заполнено, выводим сообщение об ошибке
if (empty($_POST['data'])) {
exit('Текстовое поле не заполнено');
} else {
echo htmlspecialchars($_POST['data']);
}
Обработчик form_data.php проверяет при помощи функции Empty, не является ли значение поля data пустым. Если поле пустое, работа скрипта останавливается с выдачей сообщения об ошибке. Если поле заполнено корректно, его содержимое выводится в окно браузера.

Размещение НТМL-формы и обработчика в разных файлах не всегда удобно. Например, если пользователь забыл ввести данные, то узнает он об этом только на странице обработчика. В результате пользователь вынужден возвращаться обратно и заполнять НТМL-форму заново, что может оказаться очень утомительным, если НТМL-форма содержит множество обязательных полей. Выходом из данной ситуации является расположение обработчика непосредственно в файле НТМL-формы:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>HTML-форма</title>
<meta charset='utf-8'>
</head>
<body>
<?php
$errors = [];

// Обработчик HTML-формы
if (!empty($_POST)) {
// Если поле first не заполнено, выводим сообщение об ошибке
if (empty($_POST['first'])) {
$errors[] = 'Текстовое поле не заполнено';
}

// Если нет ошибок, начинаем обработку данных
if (empty($errors)) {
// Выводим содержимое текстового поля first и останавливаем работу скрипта,
exit(htmlspecialchars($_POST['first']));
}
}

// Выводим сообщения об ошибках, если они имеются
if (!empty($errors)) {
foreach($errors as $err) {
echo "<span style=\"color:red\">$err</span><br>";
}
}
// HTML-форма
?>
<form method='post'>
<input type='text' name='first'
value='<?= @htmlspecialchars($_POST['first'], ENT_QUOTES); ?>' />
<input type='submit' value='Отправить' />
</form>
</body>
</html>
Такой подход позволяет не только вывести сообщения об ошибках непосредственно перед НТМL-формой, но и сохранить все введенные ранее данные. При проверке данных сообщения об ошибках сохраняются в массив $errors. Если он оказывается пустым, начинается обработка; если массив содержит сообщения об ошибках, то происходит повторная загрузка НТМL-формы с выводом списка обнаруженных ошибок в цикле Foreach. Для того, чтобы не было ошибки уровня Notice: Undefined index: first, необходимо поставить перед выводом символ @, который подавит вывод сообщений об ошибках.

Текстовое поле


Предназначение текстового поля заключается в возможности вводить строки текста. Для его создания необходимо поместить в НТМL-форме между тегами <form> и </form> тег такого вида:
<input type='text' /> 
Атрибута Type, который обозначает значения типа элемента управления, по умолчанию является text, поэтому если он отсутствует, а также если ему присвоено неизвестное или ошибочное значение, браузер интерпретирует элемент управления как текстовое поле.

Помимо атрибута Type тег <input> может содержать дополнительные атрибуты:

- Maxlength - определяет максимально допустимую длину текстовой строки (по умолчанию без ограничения).

- Name – уникальное в пределах формы имя элемента управления, предназначенное для идентификации в обработчике и используется в качестве ключа для доступа к значению поля.

- Size - ширина элемента управления, определяющая физический размер элемента управления на странице сайта.

- Value - начальный текст, содержащийся в поле сразу после формирования отображения текстового поля.

Поле для приема пароля


Для ввода пароля предназначено специальное поле типа Password, которое скрывает вводимый текст символами звездочек или точек:
<input type='password' name='pass' />

Текстовая область


Текстовая область предназначена для ввода нескольких строк текста с возможностью создания переводов строк (абзацев) и создается при помощи парного тега <textarea>:
<textarea> ... </textarea> 
Допустимые атрибуты тега <textarea>:

- Cols - ширина текстовой области.

- Rows - высота текстовой области, равная количеству отображаемых строк без прокрутки содержимого.

- Disabled - блокирует возможность редактирования и выделения текста в текстовой области, при этом сам элемент управления окрашивается в серый цвет.

- Name - имя элемента управления, предназначенное для идентификации в обработчике. Требование к данному типу аналогичны текстовым полям.

- Readonly - блокирует возможность редактирования текстовой области, однако, в отличие от атрибута Disabled, цвет элемента управления остается неизменным.

- Wrap – определяет перенос текста в поле. Если содержит значение Soft (по умолчанию), тогда длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы. При указании значения Hard слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер места автоматического переноса сохраняются. При этом значении обязательно должен присутствовать атрибут Cols. Нестандартное значение Off (отсутствует в документации) отключает переносы строк. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Скрытое поле


Скрытое поле служит для передачи незаметно от пользователя служебной информации и не отображаются на странице. Создается при помощи Input-тeгa, атрибут Type которого принимает значение Hidden:
<input type='hidden' /> 
Как и другие елементы формы, скрытое поле поддерживает атрибута Name для уникального имени элемента управления и атрибут Value для его значения.

Флажок


Флажок представляет логическое значение в НТМL-форме, находясь в установленном или снятом состоянии. Синтаксис элемента управления таков:
<input type='checkbox' /> 
Помимо атрибутов Tyре, Name и Value, флажок поддерживает атрибут Checked, наличие которого означает, что флажок установлен. Следует отметить, что в суперглобальный массив $_POST попадают только те флажки, которые были отмечены.

По умолчанию в качестве значения для флажка выступает строка "on", однако это значение можно изменить, если указать флажок атрибутом Value:
<input type="checkbox" name="data" value="1" checked="checked" />

Список

Список позволяет выбрать одно или несколько значений из определенного набора и имеет следующий синтаксис:
<select>
<орtiоn>Первый пункт</option>
<орtiоn>Второй пункт</option>
</select>
Между тегами <select> и </select> располагаются пункты списка, которые оформляются в виде орtiоn-тегов. В приведенном выше примере список имеет два пункта.

Помимо традиционного атрибута Name, тег <select> может иметь атрибуты Multiple и Size. Параметр Multiple позволяет выбрать несколько пунктов списка, когда пользователь отмечает их правой кнопкой мыши при одновременном удержании клавиши <Ctrl>. Атрибут Size определяет высоту списка в пунктах. Тег <select> не имеет атрибута Value - этот атрибут располагается в теге <option>. Помимо этого, тег <option> может иметь атрибут Selected для обозначения выделения текущего пункта. Если используется множественный список, для корректной передачи всех выбранных значений в качестве названия элемента <select> должен выступать массив.

Переключатель


Переключатель (радиокнопка) являет собой элемент управления, позволяющий выбрать из набора утверждений только одно. Он имеет следующий синтаксис:
<input type="radio" /> 
Для формирования набора утверждений используется несколько переключателей, которым присваивается одно и то же имя через атрибут Name. Помимо традиционных атрибутов Type и Name, переключатели могут быть снабжены атрибутом Value для передачи значения и атрибутом Checked для выделения одного из переключателей по умолчанию.

Загрузка файла на сервер


Для загрузки пользовательских файлов на сервер применяется специальный элемент управления, позволяющий указать путь к загружаемому файлу (при помощи кнопки Обзор). Элемент управления имеет следующий синтаксис:
<input type='file' /> 
Помимо атрибута Type, элемент управления допускает указания атрибутов Name и Size.

Атрибут Entype формы определяет вид кодировки, которую браузер применяет к параметрам формы. Для того чтобы отправка файлов на сервер действовала, атрибуту Entype необходимо присвоить значение multipart/form-data. По умолчанию этот атрибут имеет значение application/x-www-form-urlencoded.

После того как получен НТТР-запрос, содержимое загруженного файла записывается во временный файл, который создается в каталоге сервера, заданном по умолчанию для временных файлов, если другой каталог не задан в файле php.ini (директива upload_tmp_dir). Характеристики загруженного файла доступны через двумерный суперглобальный массив $_FILES. При этом переменная со значениями этого массива может иметь следующий вид:

- $_FILES['filename']['name'] - содержит исходное имя файла на клиентской машине;

- $_FILES['filename']['size'] - содержит размер загруженного файла в байтах;

- $_FILES['filename']['type'] - содержит МIМЕ-тип файла;

- $_FILES['filename']['tmp_name'] - содержит имя временного файла, в который сохраняется загруженный файл.

Проверить успешность загрузки файла на сервер можно при помощи специальной функции Is_uploaded_file, которая принимает в качестве единственного параметра имя файла ($_FILES['filename']['name']) и возвращает True в случае успешной загрузки или False в случае неудачи. Переместить файл можно при помощи функции Move_uploaded_file, которая в качестве первого параметра принимает путь к загруженному файлу, в качестве второго параметра - путь, куда файл должен быть перемещен.

Переадресация


Очень часто после обработки формы пользователя необходимо перенаправить на другую страницу сайта. Поскольку страницы открывает браузер, Web-приложение расположено на сервере, надо сообщить браузеру о необходимости открыть другую страницу. Такой сигнал посылается средствами протокола НТТР, по которому общаются браузер и Wеb-сервер.

Вся суть работы протокола НТТР сводится к обмену НТТР-документов между браузером и сервером. НТТР-документ состоит из НТТР-заголовков, расположенных в начале документа, и необязательного тела документа, в котором может быть, например, НТМL-страница. НТТР-заголовки, формируются сервером автоматически и нет необходимости отправлять их вручную.

НТТР-заголовки служат своеобразной метаинформацией, которой сервер и клиент обмениваются скрыто. Но, иногда необходимо вмешиваться в эту скрытую часть работы клиента и сервера, поскольку она управляет многими важными процессами, такими как переадресация, кэширование, аутентификация и другие. Для вмешательства в процесс формирования НТТР-заголовков предназначена функция Header, позволяющая вставить в отправляемый клиенту НТТР-документ произвольный заголовок.

Для того чтобы осуществить переадресацию клиента с одной страницы на другую, браузеру необходимо отправить НТТР-заголовок Location.
<?php header('location: http://profiphp.ru');

Добавить комментарий

Имя:
Текст комментария: