Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Капча с картинкой

Поддержи проект!!! smile

Капча с картинкой через php! Будем делать капчу с картинкой! Код капчи с картинкой. Нам нужна капча с картинкой, чтобы использовать в форме!

Начнем с самого начала и разберем весь процесс создания капчи с картинками через php!

Всё о капче с картинкой

  1. Алгоритм работы капчи с картинкой.
  2. картинки для капчи с картинкой
  3. Форма для капчи с картинкой.
  4. Вывод картинки для капчи с картинкой
  5. Получение слова и названия картинки
  6. Код капчи с картинкой в сборе
  7. Живой пример капчи с картинкой
  8. Капча из картинок для сайта
  9. Скачать можно здесь
  1. Алгоритм работы капчи с картинкой

    Первым шагом в создании капчи с картинкой нам нужен алгоритм!

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

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

    Название картинки выбирается случайно.

    У нас должна вывестись на экран картинка, т.е. у нас уже есть название картинки в переменной.

    Если оно(название картинки) на английском языке(множество хостингов не поддерживает на русском языке), то нужен механизм, который, позволит выводить название аналога на русском языке.(это ассоциативный массив)

    Это название будет вписываться в input с типом hidden - скрытое поле.

    Пользователь видит картинку и записывает название увиденного с картинки.

    После отправки скрытое поле и поле введенное пользователем сравниваются.

    Если присланы два одинаковых названия - капча со словами пройдена.

  2. Картинки для капчи с картинкой

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

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

    У нас всего будет 6 картинок, размер картинки 100х100px:

    Капча с картинкой
    Капча с картинкой
    Капча с картинкой
    Капча с картинкой
    Капча с картинкой
    Капча с картинкой

  3. Форма для капчи с картинкой.

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

    Использовали для капчи с картинкой

    Тег form

    Данные будем отправлять методом - post

    action - пустой - будем отправлять данные на эту же страницу.

    Тег input с типом text

    Используем required - для того, чтобы сделать поля формы обязательными.

    Тег input с типом hidden

    Тег button с типом submit

    Собираем форму для капчи с картинкой

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

    <form action="" method="post">

      <input type="text" name="text_kapcha" placeholder="Название животного" required><br>

      <input type="hidden" name="hidden_kapcha" value="'.$slovo.'" ><br>

      <button name="otpravit" value="Привет!">Отправить</button>

    </form>

  4. Вывод картинки для капчи с картинкой

    Нам потребуется для вывода картинок массив, в каждой ячейке которого будет находится название картинки, вывод которых приведен выше:

    $array = array('slon','kot','krokodile','mish','petuh','kon');
    Далее нам понадобится функция array_rand, которая будет выбирать одно слово случайным образом из нашего массива:
    $array_rand = array_rand($array, 1);
    Когда мы получили одно значение из этого массива, слово на латинице нужно проверить, чему оно равно, если например это слово slon , то переменная $slovo будет равно слову слон

    if($array[$array_rand] == 'slon'){$slovo = 'слон';}

    if($array[$array_rand] == 'kot'){$slovo = 'кот';}

    if($array[$array_rand] == 'krokodile'){$slovo = 'крокодил';}

    if($array[$array_rand] == 'mish'){$slovo = 'мышь';}

    if($array[$array_rand] == 'petuh'){$slovo = 'петух';}

    if($array[$array_rand] == 'kon'){$slovo = 'конь';}

    Для иллюстрации этого процесса, выведем сперва echo $array[$array_rand], попробуйте несколько раз перезагрузить страницу!

    slon

    А вторым слово echo $slovo

    слон

    И выведем эту картинку таким образом:

    <img border="1px solid" width="100px" height="100" src="//dwweb.ru/__img/php/kapcha/'.$array[$array_rand].'.jpg" title="'.$slovo.'">

    И результат:

  5. Получение слова и название картинки

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

    $text_kapcha = strip_tags(trim($_POST['text_kapcha']));

    $hidden = strip_tags(trim($_POST['hidden']));

    Далее идет проверка того, что было отослано в форме!

    Если кнопка отправить была нажата:

    if($_POST['otpravit'])

    После того, как определили, что кнопка нажата - создаем условие, равна ли переменная - отправленная пользователем название картинки $text_kapcha и это же название картинки из переменной $hidden

    if($text_kapcha == $hidden)

    Если данные равны, то выводим:

    $show = '<b style="color: red">Все верно</b><br>';

    Иначе else

    $show = '<b style="color: red">Ответ не правильный!</b><br>';

    Соберём весь код проверки капчи с картинкой

    if($_POST['otpravit'])

    {

      if($text_kapcha == $hidden)

      {

      $show = '<b style="color: red">Все верно</b><br>';

      }

      else

      {

      $show = '<b style="color: red">Ответ не правильный!</b><br>';

      }

    }

  6. Капча с картинкой в сборе

    Соберем все то, что было выше озвучено в один готовый код для капчи с картинкой!

    Что можно сделать с данным кодом!?

    Я бы посоветовал скачать готовый код картинки в архиве.

    И там же есть все описанные картинки для капчи.

    В скачанном архиве есть страница, открываем её в любом редакторе кода и заменяем путь до картинки на ваш путь на вашем сайте.
    //dwweb.ru/__img/php/kapcha/

    Данный адрес отмечен красным ниже в коде, чтобы вы знали где его искать.

    Готовый код капчи с картинкой

    $array = array('slon','kot','krokodile','mish','petuh','kon');

    $array_rand = array_rand($array, 1);

    if($array[$array_rand] == 'slon'){$slovo = 'слон';}

    if($array[$array_rand] == 'kot'){$slovo = 'кот';}

    if($array[$array_rand] == 'krokodile'){$slovo = 'крокодил';}

    if($array[$array_rand] == 'mish'){$slovo = 'мышь';}

    if($array[$array_rand] == 'petuh'){$slovo = 'петух';}

    if($array[$array_rand] == 'kon'){$slovo = 'конь';}

    $text_kapcha= strip_tags(trim($_POST['text_kapcha']));

    $hidden = strip_tags(trim($_POST['hidden']));

    if($_POST['otpravit'])

    {

      if($text_kapcha == $hidden)

      {

      $show .='<b style="color: red">Все верно</b><br>';

      }

      else

      {

      $show .='<b style="color: red">Ответ не правильный!</b><br>';

      }

    }

    $show .= 'Пожалуйста напишите <br>

    если сомневаетесь наведите мышку на картинку<br>

    <img border="1px solid" width="100px" height="100" src="//dwweb.ru/__img/php/kapcha/'.$array[$array_rand].'.jpg" title="'.$slovo.'">

    <form action="" method="post">

      <input type="text" name="text_kapcha" placeholder="Название животного" required><br>

      <input type="hidden" name="hidden_kapcha" value="'.$slovo.'" ><br>

      <button name="otpravit" value="Привет!">Отправить</button>

    </form> ';

  7. Живой пример капчи с картинкой

    И последнее, что нам осталось - это протестировать готовую капчу с картинками прямо здесь или на отдельной странице
    Пожалуйста напишите
    если сомневаетесь наведите мышку на картинку



  8. Как сделать капчу из нескольких картинок

    Если вам очень хочется сделать капчу из нескольких картинок, ну чтож, это тоже можно сделать!

    Это делается из того материала, что приведен выше!

    И капча с несколькими картинками - это наверняка настолько круто, что только круче яйца вкрутую!

    Только это настолько муторная и большая работа, в который, я никакого для себя профита не вижу...

    Алгоритм создания капчи с множеством картинок

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

    Вам понадобится как минимум
    1). 9 полей вывода картинки
    2). + 9 полей input, куда будут передаваться данные по нажатию на картинку, и нужно продумать скрипт, который будет отслеживать нажатие - отжатие картинки
    3). и плюс еще 9 полей ввода hidden, далее просто 9 + 9

    Далее вам нужно... как-то зафиксировать передаваемый данные в поля hidden... это должен быть массив из 9 ячеек с заранее записанными данными... в них... например если тема кошки... то определяете сколько кошек.. и сколько не кошек, и отслеживаете соответствии отправленных данных 9 + 9

    Вывести какой-то алгоритм рандомно выводить в поле hidden выше приведенные значения массива.

    Далее нужно создать, ну как минимум массивов 10 с разными категориями, что аналогично теме "кошек", например -массив "собаки", массив "машины" и т.д...

    Далее нужен алгоритм, который будет рандомно выбирать массив...

    Это если очень кратко...

    Капча с картинкой

    Итого... ну нах...

    Мне очень не нравится такая капча, если она выскакивает где угодно! Есть намного проще и экономичные варианты, чем городить такой огород! Ну, а вы - можете потренироваться!

И да...мы ранее уже делали капчу цифровую + капчу со словами


Вас может еще заинтересовать список тем : #PHP | #PHP_POST | #PHP_METHOD | #CAPTCHA | #PHP_BOOK |
Последняя дата редактирования : 14.01.2021 17:10
Название скрипта :Капча с картинкой
Скрипт № 12.1Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Капча с картинкой как сделать капчу с картинкой Капча с картинкой php captcha с картинками пример капчи картинки капча в виде выбора картинки Captcha with php image

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.