Создание привлекательной формы. Часть 5

Создание привлекательной формы

От автора: в очередном уроке нашего цикла по созданию привлекательной формы на сайт мы добавим к форме капчу. Это будет математическая капча, которую мы возьмем из урока 2 варианта капчи для сайта.

Поскольку алгоритм работы капчи детально описан в указанном выше уроке, я не буду объснять его повторно. Итак, приступим.

Детали учебника

Тема: PHP

Сложность: Средняя

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

Время: 00:18:46

Размер архива: 53 Mb

скачать исходникискачать урок

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

<p>
	<label for="captcha"><span class="formTextRed">*</span> 2 + 5 = ?:</label>
	<input type="text" name="captcha" id="captcha" />
</p>

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

Теперь давайте проверим в клиентском скрипте, чтобы поле капчи было заполнено перед отправкой на сервер. Для этого всего-навсего достаточно добавить имя данного поля в массив 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:

<p>
	<label for="captcha"><span class="formTextRed">*</span> <?php echo "$a + $b" ?> = ?:</label>
	<input type="text" name="captcha" id="captcha" />
</p>

Теперь с каждым обновлением страницы мы будем видеть разные цифры в математическом выражении. Ну а в сессионной переменной у нас хранится результат вычисления математического выражения. Осталось в теле условия if($_POST) сравнить то, что ввел пользователь в поле капчи, с тем, что сохранено в сессионной переменной. Если значения совпадут, значит пользователь прошел проверку.

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

if($_POST['captcha'] != $_SESSION['res_captcha']){
	$_SESSION['res']['error'] .= "Дан неверный ответ на вопрос <br />";
	$error = true;
}

Вот, собственно, и все. Как видите, все довольно просто и уместилось буквально в несколько строк кода :)

На этом наш урок завершен. Если у Вас возникли какие-либо вопросы по уроку, то задавайте их, пожалуйста, на нашем форуме.

Удачи и до новых встреч!

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (26)

  1. Кирилл

    Уважаемый Андрей, спасибо Вам от души !!!

  2. Пётр

    Андрей, большое спасибо! Ваши уроки великолепны и универсальны! Но у меня есть вопрос — некоторые почтовые службы — rambler.ru, gmail.com и др. отправленные письма восприниают как спам и выбрасывают.
    Исключение — mail.ru. Можно ли как то решить эту проблеиу, чтобы письма доходили на любую почту?

    • Андрей Кудлай

      Пожалуйста, Пётр.
      По поводу проблемы спамовых писем… я, наоборот, встречал больше жалоб именно на mail.ru… к сожалению, решить эту проблему довольно непросто, используя функцию mail()… насколько я знаю, почтовые сервисы заносят в антиспамовый фильтр конкретные IP… если Вы отправляете письма с хостинга, IP которого занесен в black-list, то, конечно же, все письма будут определяться спамовыми. Также некоторые фильтры считают спамовыми все письма, отправленные функцией mail().
      Выход здесь заключается в отправке писем через smtp. Наверное, мы сделаем урок на данную тему. Пока же можно почитать статью на эту тему или попробовать воспользоваться готовым классом.

  3. Герман

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

    • Андрей Кудлай

      Ок, это не сложно. Урок поставили в план и вскоре он будет опубликован.

    • Андрей Кудлай

      Герман, урок уже появился на нашем канале и в январе будет опубликован на нашем сайте. Если по уроку возникнут какие-либо вопросы, их всегда можно задать на нашем форуме.

      • Герман

        Огромное вам спасибо Андрей! Не ожидал что так быстро запишите видео) Уже все сделал (не смог удержаться) Скрипт отлично работает. Вы как всегда на высоте, все понятно и доступно)) Создал в базе таблицу, но возникла маленькая проблемка с Maximum execution time (при загрузке .svc файла на денвер) Поэтому буду ждать урок и доп. материалы (особенно файл geoip.sql). Для общего развития задал вопрос на форуме.
        P.s. сделайте возможность donate на сайте, буду подкладывать монетку.

        • Андрей Кудлай

          Пожалуйста, Герман :)
          На форуме ответил и ссылку на архив с базой дал. По поводу donate спасибо, наверное прислушаемся… тем более, что вы не первый уже предлагаете ;)

  4. Сергей

    Здравствуйте уважаемые профи, помогите решить проблему с сайтом. Сразу хочу выразить Вам благодарность за Ваши уроки, всё очень доступно даже таким несведующим в сайтостроении, как я. При создании формы возник вопрос: файл index самой формой у Вас в формате php, а что делать если страница сайта на которую необходимо вставить форму в формате html, можно ли файл обработчик создать отдельно, и как это сделать? Может есть другой вариант без создания отдельного файла php? Благодарю за понимание и надеюсь получить ответ.
    P.S. Если данная проблема уже возникала и решена дайте пожалуйста ссылку, на форуме не нашел…

    • Андрей Кудлай

      Здравствуйте, Сергей.
      Если переименовать файл из index.html в index.php невозможно (хотя на самом деле не совсем понимаю, почему бы и нет?), тогда остается вариант заставить сервер отдавать документы HTML интерпретатору. Для этого необходимо в файле .htaccess прописать следующую строку:
      AddType application/x-httpd-php .html .htm
      Подробнее можно посмотреть урок Файл htaccess. Страницы ошибок.

  5. Сергей

    Благодарю Вас Андрей за быстрый и локаничный ответ! Но мене теперь не понятно какой вариант подойдёт лучше, если я правильно понял, то замену формата необходимо произвести на всём сайте, тоесть поменять формат в пути к данной странице на всех страницах html на сайте. Или добавить файл .htaccess в корень сайта так, как его уменя там нет. Не повлияет ли этот файл на работу всего сайта, потому-что все html страницы идут в кодировке windows-1251. Может необходимо при этом изменить кодировку? Благодарю за понимание:)

    • Андрей Кудлай

      Нет, кодировка здесь не при чем. Кроме указанной строки в файл htaccess ничего больше добавлять не нужно, т.е. там должна быть только эта строка.
      Ну или второй вариант: это изменить расширение файла на .php, а затем внести изменения во все ссылки, которые ссылаются на index.html, изменив ссылку на index.php. Второй вариант можно быстро провернуть, если воспользоваться функцией Поиск в файлах в редакторе Notepad++ в меню Поиск — Найти в файлах. В открывшемся окне в поле Найти вводите index.html, в поле Заменить — index.php, соответственно. В поле Папка выбираете путь к папке с сайтом. Останется нажать кнопку Заменить в файлах и редактор сам найдет все совпадения и произведет замену.
      Какой из вариантов больше подойдет — это уже выбирать Вам :)

  6. Сергей

    Андрей от всей души благодарю Вас за равёрнутый и подробный ответ, а так же за оказанное Вами внимание моим вопросам. Я пользуюсь Вашими уроками не так давно, нашел их в YouTube и так познакомился с Вашим замечательным сайтом, надеюсь и дальше у Вас учиться!!!
    P.S. Ребята спасибо Вам за ваш труд и внимание даже не смотря на то что происходит в нашей стране. Удачи!!!.

    • Андрей Кудлай

      Пожалуйста, Сергей :)
      Обязательно оставайтесь с нами и подписывайтесь на канал YouTube и уроки ;)

  7. Сергей

    Уважаемый Андрей при добавлении серверного скрипта, как показано в уроке №3, и перезагрузке страницы, в верху сайта вылезло вот это:
    Warning: session_start() [function.session-start]: Cannot send session cookie — headers already sent by (output started at S:\home\floroksanaTest.loc\www\ru\data\154\index.php:1) in S:\home\floroksanaTest.loc\www\ru\data\154\index.php on line 2
    Спасите!!!!:)

    • Андрей Кудлай

      Эта ошибка говорит, что перед вызовом функции session_start() есть какой-то вывод в браузер, которого не должно быть перед использованием этой функции. Таким выводом может быть даже банальный пробел перед открывающим тегом php. Посмотрите внимательнее и, если не найдете, тогда создайте тему на нашем форуме и приложите проблемный файл в архиве, я посмотрю.

  8. Сергей

    Спасибо попробую!

  9. Сергей

    Может проблема в этом:
    Not Found
    The requested URL /ru/data/154/function.session-start was not found on this server.

    Подсказка Денвера

    Вы ошиблись при наборе URL в браузере. Вероятнее всего, сервер пытается найти файл S:/home/floroksanaTest.loc/www/ru/data/154/function.session-start, которого не существует.

    В случае использования CGI-скриптов, корректные пути к CGI-директориям следующие:

    • Андрей Кудлай

      Нет такой функции session-start() в PHP. А вот функция session_start() есть. Это первое. И непонятно, что session-start делает в URL-адресе, по которому, судя всему, пытается почему-то обратиться сервер. Это второе. Ну и вместо того, чтобы строить догадки, давайте все же перенесем общение на форум, где гораздо проще решать вопросы, касающиеся кода. Там и выложите проблемный код, а также прикрепите страницу с кодом.

  10. Сергей

    Тему на форуме создал.

  11. Сергей

    Подскажите пожалуйста!
    Как вставить загрузку изображений и фалов в вашу форму.

    В вашей форме вставлено, но не объяснено!)) http://webformyself.com/review/

    • Андрей Кудлай

      Отправка письма с вложением — это уже гораздо более сложная задача, нежели отправка простого письма. Пример отправки файла с вложением можно найти здесь.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree