Взаємодія РНР з HTML

Денис Гущин 19 листопада 2021 о 12:12

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

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

Параметри GET передаються в рядку запиту після символу запитання (?).

http://localhost/get.php?id=1

У наведеному URL послідовність id=1 задає GET-параметр з ім’ям id та значенням 1. GЕТ-параметри автоматично поміщаються у суперглобальний масив $_GET. Імена параметрів виступають як ключі масиву:

<?php
echo $_GET['id'];

Якщо необхідно передати скрипту одночасно декілька GЕТ-параметрів, вони розділяються символом амперсанда &:

http://localhost/get.php?id=1&page=main

У наведеному URL передаються два GET-параметри: id зі значенням 1 та page зі значенням main. Вивести всі значення суперглобального масиву $_GET можна скориставшись функцією Print_r:

<?php
echo '<pre>';
print_r($_GET);
echo '</pre>';

В результаті виконання прикладу буде виведено наступний дамп масиву:

Array
(
    [id] => 1
    [page] => main
)

У GET-параметрах можуть виступати елементи масиву, у цьому випадку суперглобальний масив $_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
        )

)

Параметри GET та їх значення можуть містити неприпустимі з точки зору URL символи (пробіли, українські символи), які при формуванні URL обов’язково повинні перетворюватися на безпечний формат. Для такого перетворення на РНР передбачені спеціальні функції. Наприклад, функція Urlencode, яка приймає аргументом рядок і кодує його для безпечної передачі через URL.

Наприклад, сформуємо посилання на файл test.php разом з GET-параметр link, якому передається фраза "Привіт, світ!":

<?php
echo "<a href='test.php?link=".urlencode("Привіт, світ!")."'>посилання</a>";

Вихідний код результуючої НТМL-сторінки міститиме наступний рядок:

<a href='test.php?link=%D0%9F%D1%80%D0%B8%D0%B2%D1%96%D1%82%2C+%D1%81%D0%B2%D1%96%D1%82%21'>посилання</a>

Крім GET-параметрів у скрипті може знадобитися інформація про поточну сторінку, номер порту, хост тощо. Для аналізу рядка запиту призначена спеціальна функція 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>
<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-форми обробнику. За замовчанням, якщо не вказується атрибут метод, застосовується метод GET.

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

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

Продемонструємо приклад НТМL-форми, в якому дані надсилаються обробнику, розташованому у файлі form_data.php, який здійснює виведення у вікно браузера введеного в поле first рядка:

<!DOCTYPE html>
<html>
<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>
<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-тега, атрибут 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'] - містить MIME-тип файлу;

- $_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://mysite.com');

#самовчитель_php