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

324

Від автора: у черговому уроці нашого циклу створення привабливої форми на сайті ми додамо до форми капчу. Це буде математична капча, яку ми візьмемо з уроку 2 варіанти капчі для сайту.

Оскільки алгоритм роботи капчі детально описаний у зазначеному вище уроці, я не буду объснять його повторно. Отже, приступимо.

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

Тема: PHP

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

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

Час: 00:18:46

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

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

Реалізацію завдання почнемо, звичайно ж, з створення поля для капчі. Додамо це поле, наприклад, після поля для відкликання:

* 2 + 5 = ?:

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

Тепер давайте перевіримо в клієнтському скрипті, щоб поле капчі було заповнено перед відправкою на сервер. Для цього всього-на-всього достатньо додати ім’я поля в масив fields скрипта form.js:

var fields = [“lastname”, “firstname”, “email”, “comment”, “captcha”];

Наступним кроком давайте реалізуємо динамічну генерацію чисел. Для цього скористаємося функцією mt_rand() і збережемо в 2 змінні 2 згенерованих числа. Також в сесійний змінну збережемо результат математичної дії. Все це вміститься в 3 рядки коду, які ми напишемо після тіла умови if($_POST):

$a = mt_rand(1, 10);
$b = mt_rand(1, 10);
$_SESSION[‘res_captcha’] = $a + $b;

Тепер виведемо в формі значення змінних $a і $b:

* = ?:

Тепер з кожним оновленням сторінки ми будемо бачити різні цифри в математичному вираженні. Ну а в сесійному змінної у нас зберігається результат обчислення математичного виразу. Залишилося в тілі умови if($_POST) порівняти те, що ввів користувач у полі капчі, з тим, що збережено в сесійному змінної. Якщо значення зійдуться, значить користувач пройшов перевірку.

До перевірки значення змінної $error перевіримо сформований умова:

if($_POST[‘captcha’] != $_SESSION[‘res_captcha’]){
$_SESSION[‘res’][‘error’] .= “Дано неправильну відповідь на питання
“;
$error = true;
}

Ось, власне, і все. Як бачите, все досить просто і вмістилося буквально кілька рядків коду Створення привабливої форми. Частина 5

На цьому наш урок закінчено. Якщо у Вас виникли які-небудь питання з уроку, то надсилайте їх, будь ласка, на нашому форумі.

Удачі і до нових зустрічей!