Створення привабливої форми. Частина 3

335

Від автора: у попередньому уроці ми писали клієнтський скрипт, який перевіряє заповнення обов’язкових полів і відмітку чекбокса підтвердження. При цьому зазначалося, що перевірка на стороні клієнта жодним чином не позбавляє нас від перевірок на стороні сервера.

У поточному уроці ми напишемо серверний скрипт, який постараємося зробити настільки ж універсальним, як і клієнтський. Тобто можна буде у будь-який момент змінити у формі кількість обов’язкових до заповнення полів та внести при цьому правку всього в одну сходинку скрипта.

Отже, приступимо…

План уроку:

1. Написання серверного скрипта.

Деталі підручника

Тема: PHP

Складність: Середня

Урок: Відео версія (.mp4)

Час: 00:45:54

Розмір архіву: 90 Mb

Створення привабливої форми. Частина 3Створення привабливої форми. Частина 3

Алгоритм роботи серверного скрипта буде багато в чому схожий на алгоритм клієнтського скрипта. Ми також створимо масив обов’язкових полів, також буде прапор заповнення обов’язковий полів і т. д.

Скрипт буде знаходитися на сторінці з формою, тому під масивом країн створимо масив обов’язкових полів:

$fields = array(“lastname” => “Прізвище”, “firstname” => “Ім’я”, “email” => “Email”, “comment” => “Відгук”);

Для зручності подальшого тестування роботи скрипта тимчасово закомментіруем підключення клієнтського скрипта, щоб безперешкодно відправлялися дані на сервер.

Тут ми маємо асоціативний масив, ключами якого є імена полів, а значеннями — опису полів. Навіщо потрібен саме асоціативний масив? Справа в тому, що передані дані форми ми отримуємо з глобального масиву POST. При цьому ключами елементів масиву будуть якраз імена полів, тому при перевірці отриманих даних досить подивитися є що перевіряється ключ елемента глобального масиву POST у масиві fields. Якщо такий ключ є, значить ми перевіряємо обов’язкове поле. Ну а значення масиву fields нам знадобляться при виведенні інформації про те, які саме з полів не були заповнені. Ось така ось у нас задумка. Почнемо її реалізовувати.

Для початку створимо умова, яке буде виконуватися при надходженні даних форми:

$error = false;
}

Тут ми відразу ж встановили прапор заповнення обов’язкових полів, присвоївши йому логічне значення FALSE. Як Ви вже могли здогадатися, в кінці скрипта ми перевіримо значення змінної $error, якщо воно залишиться FALSE — значить з даними все в порядку, інакше — якісь поля або чекбокс не були заповнені.

Тепер пройдемося в циклі по масиву POST. При цьому ми будемо перевіряти виконання двох умов для кожного з елементів масиву POST:

Присутній ключ перевіряється елемента в масиві fields?

Порожньо значення перевіряється елемента?

Якщо обидві умови виконуються, тобто якщо перевіряється елемент поле форми) є в списку обов’язкових і при цьому у нього пусте значення (поле не заповнено), значить, ми будемо змінювати значення прапора на логічне значення TRUE і запам’ятовувати повідомлення про незаповненості даного конкретного поля. Для запам’ятовування повідомлення ми скористаємося механізмом сесій, а тому відкриємо сесію на початку файлу, перед масивом країн:

session_start();

Ну і, власне, описаний вище цикл:

foreach ($_POST as $key => $value) {
$value = trim($value);
if(array_key_exists($key, $fields) && empty($value)){
$_SESSION[‘res’][‘error’] .= “Ви не заповнили поле {$fields[$key]}
“;
$error = true;
}
}

Таким чином, якщо користувач не заповнить будь-який з обов’язкових полів, то в сесійній масиві $_SESSION[‘res’] створюється елемент error з повідомленням, що не заповнено конкретне поле. Ось для цього нам потрібен був саме асоціативний масив fields, щоб за його ключу отримати значення. Ну а завдяки оператора конкатенації (знак точки перед знаком одно) ми дозаписываем значення $_SESSION[‘res’][‘error’], не стираючи колишнє. Також варто звернути увагу на використання функції trim(), яка обрізає кінцеві пробіли значення. Зроблено це для того, щоб приймати тільки значиму для нас інформацію, а не пробіли замість неї.

Тепер перевіримо, відзначений чи чекбокс:

if($_POST[‘confirm’] != ‘on’){
$_SESSION[‘res’][‘error’] .= “Ви не підтвердили згоду на публікацію!”;
$error = true;
}

Якщо чекбокс був відзначений, то в масиві POST значення відповідного елемента буде дорівнювати рядку «on». Якщо такого значення немає, значить чекбокс не відмічений, і ми в змінну $_SESSION[‘res’][‘error’] додамо відповідне повідомлення і змінимо значення прапора.

Залишилося тільки перевірити значення прапора. Якщо воно буде TRUE — то ми повинні припинити роботу з даними форми (тобто, наприклад, не відправляти їх на пошту, не класти в БД тощо). При цьому необхідно повідомити користувачеві про незаповненості полів і, до того ж, бажано зберегти інформацію всіх заповнених полів, щоб користувач не заповнював їх двічі.

Оскільки ми працюємо з сесіями, то зробити це не складе особливих труднощів. Ми знову пройдемося в циклі по масиву POST і в сесійній масиві $_SESSION[‘res’] створимо елементи з ключами, відповідними назвами полів форми.

Якщо ж значення прапора не змінилося, значить з даними все гаразд і можна продовжувати роботу (відправляти лист, класти в БД тощо). У нашому випадку ми обмежимося виведенням повідомлення користувачу про успішне надсилання відзиву — для цього створимо змінну $_SESSION[‘res’][‘ok’]:

if($error){
foreach ($_POST as $key => $value) {
$_SESSION[‘res’][$key] = trim($value);
}
}else{
$_SESSION[‘res’][‘ok’] = “Дякуємо, Ваш відгук прийнятий.”;
}

Ну і для вирішення проблеми F5 наприкінці скрипта організуємо редирект, зменшуючи, таким чином, POST-дані:

header(“Location: {$_SERVER[‘PHP_SELF’]}”);
exit;

Залишилося вивести всі сесійні змінні. Перш за все, давайте виведемо їх в якості можливих значень полів:

* Прізвище:

* Ім’я:

По батькові:

* Email:

Альтернативні Email:

Країна:

* Відгук:

* Не заперечую проти публікації мого відкликання на сайті в рекламних цілях

Тепер, якщо користувач не заповнить всі необхідні поля, йому не доведеться заповнювати двічі одне і те ж поле — все раніше заповнені поля залишаться заповненими.

Перед формою виведемо можливі повідомлення про успіх або помилка надсилання форми:

{$_SESSION[‘res’][‘error’]}

“;
}
if($_SESSION[‘res’][‘ok’]){
echo “

{$_SESSION[‘res’][‘ok’]}

“;
}
?>

Ну а після форми видалимо сесійної масив $_SESSION[‘res’] з усіма його змінними. Це робиться для того, щоб не виводити всю цю інформацію після успішної відправки форми:

Ну і кілька стильових правил для класів answerError і answerOk:

.answerError{
width: 550px;
padding: 5px;
border: gray 1px dashed;
background: #FFEDED;
color: #7F5354;
}
.answerOk{
width: 550px;
padding: 5px;
border: 1px solid #ADC092;
background: #F0FAF1;
color: #58715E;
}

Ось, власне, і все — наш скрипт готовий. Протягом трьох уроків ми з Вами створили дійсно привабливу і функціональну форму. Далі вже Вам вирішувати долю прийнятих даних — кілька рядків скрипта і дані можуть бути відправлені на електронну адресу або зберігаються в БД. Якщо цей момент також викликає у Вас інтерес — це може бути показано у наступному уроці.

На цьому у мене все. Удачі!