Як зробити капчу на php

Вітаю Вас, дорогі друзі!

Сьогодні ми розглянемо і створимо з нуля оригінальну і юзабільний ( «дружню» для користувача) капчу на PHP. Тобто, все напевно зустрічали капчи. де прямо, так скажімо, треба все розшифровувати по буквах. Ось я особисто не люблю такі капчи і з цього вирішив створити таку юзабільний і просту капчу. Ну що ж, почнемо ...

Для початку розберемося з організацією файлів. Для даної роботи нам знадобитися локальний сервер (наприклад, Denwer). Створюємо директорію з нашим проектом (наприклад, captcha.loc) в якій будуть наступні директорії і файли:

директорія css -> style.css - файл стилів;

директорія images -> apple.png. apricot.png. kiwi.png. lemon.png. orange.png - наші картинки для капчи;

файл .htaccess -> в даному випадком він нам знадобитися для додаткового вказівки кодування UTF-8;

файл index.php -> в ньому ми і будемо писати весь наш код.

І так - приступимо.

КРОК 1 - Створюємо HTML-розмітку:

Тут йде проста HTML-розмітка. Єдиний момент який може Вас насторожити, це: чому в прихованому полі (рядок 33) атрибут value не заповнений? В атрибут value буде підставлятися і порівнюватися значення з тим, що вибрав користувач, і тим згенерував значенням, що було запам'ятати в сесії.

Файл .htaccess - це файл додаткової конфігурації веб-сервера Apache. У ньому всього один рядок коду, в якій вказується кодування нашого документа. Хоча в самому HTML-документі ми вказали кодування, але буває така ситуація, коли в самому браузері стоїть кодування Windows-1251 (кирилиця), а в документа - UTF-8 - зрозуміло, що документ буде відображатися в кодуванні Windows-1251 (пріоритет браузера вище), і для того, щоб документ відображався в тій кодуванні що нам і потрібно - служить файл .htaccess. У цьому файлі додамо рядок: AddDefaultCharset utf-8

КРОК 2 - Додаємо стилі:

Правило! Important (рядок 14) - дозволяє підвищити пріоритет стилю, тобто це правило для нас буде важливіше. Як результат, коли ми клацнемо по картинці, то рамка залишиться.

Основна робота даного скрипта полягає в тому, щоб відстежувати клік по картинці і виконувати певні дії.

І так, коли користувач клацає по картинці, ми беремо все картинки і методом each проходимо по всіх картинок, і при кліці по картинці скрипт буде додавати клас active (тобто, просто буде встановлюватися зелена рамка) і отримувати значення атрибута alt.

Якщо користувач клацне на іншу картинку, то їй просто буде додаватися клас active. а для інших картинок клас active - видаляється!

Далі, ми звертаємося до того елемента, за яким був клік і звертаємося до його атрибуту alt. потім поміщаємо його значення в змінну fruit. звертаємося до нашого прихованого полю з id = "fruit» і в його ж значення записуємо те, що є у змінній fruit - це потрібно для порівняння значень!

А в рядку 4 ми просто будемо очищати значення прихованого поля, щоб воно постійно не запам'ятовувалося.

КРОК 4 - Пишемо серверний (РНР) код:

Цей РНР код потрібно вставляти в самому початку документа, тобто писати РНР код з першого ж рядка.

І так, ми створили масив fruits. Далі, генеруємо випадковий елемент масиву fruits і його значення записується в сесію. Потім перевіряємо не приходили нам дані з форми, тобто, їли дані з форми методом POST взагалі НЕ приходили, то ми будемо записувати в сесію випадковий елемент (фрукт), а інакше ми приймаємо дані з форми засобами РНР і будемо порівнювати з тими, що у нас є прихованому полі.

Потім отримуємо дані з полів форми і перевіряємо, якщо користувач щось ввів в поле, якщо нічого не ввів, ми просто його уявляємо як «Гість«.

Далі ми повинні порівнювати з тим, що у нас є в сесії і що попало в приховане поле. І якщо в глобальному масиві СЕСІЯ, елемент fruit буде дорівнює тому що у нас є в змінної fruit. то виводимо повідомлення типу: "Ви пройшли перевірку і т.д.», а інакше, тобто, елемент fruit НЕ буде дорівнює тому що у нас є в змінної fruit, ми виводимо повідомлення типу: "Ви не пройшли перевірку і т.д . ». Потім робимо редирект, щоб скинути POST -Дані.

КРОК 5 - Виводимо інформаційне вікно:

Цей маленький РНР код потрібно вставити після форми.

Дякую всім за увагу!