В сегодняшнем уроке мы рассмотрим создание контактной формы с защитой от спама (каптча).
Шаг №1 - captcha.php и сессия
Для начала нам необходимо создать новую php страницу с именем captcha.php. Далее, в нашем новом документе, необходимо открыть серверную сессию с помощью команды session_start(). Также, нам понадобится пустая переменная "string". Мы будем использовать эту переменную позже для сгенерированого текста каптчи.
<?php
session_start();
$string = '';
?>
Шаг №2 - случайная строка
Далее, мы создадим цикл для генерации случайной строки. Мы возьмем эту строку и вставим в переменную сессии "random_code".
<?php
session_start();
$string = '';
for ($i = 0; $i < 5; $i++) {
$string .= chr(rand(97, 122));
}
$_SESSION['random_code'] = $string;
Используя функцию chr() мы добавляем маленькие символы к переменной $string при каждой итерации цикла. Пример выше генерирует 5 символов, но Вы можете изменить это. Достаточно заменить цифру "$i < 5" на любую другую (например, 7). После завершения цикла обязательно определите переменную сессии.
Шаг №3 - Папка сохранения и цвета
Тут начинается наиболее сложная часть урока. Нам необходимо определить папку для сохранения шрифта, полученных изображений каптчи. Также следует подумать о цветах нашей каптчи. Для этого нам потребуется очень простой код.
$dir = 'fonts/';
$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 200, 100, 90); // red
$white = imagecolorallocate($image, 255, 255, 255);
Как Вы видите, "fonts" это название нашей папки и оно (название) хранится в переменной $dir. Переменная $image это то место, где происходит построение нашей каптчи с помощью функции imagecreatetruecolor(). Эта функция позволяет получить черную картинку указаного размера. В нашем случае мы указали 170 пикселей на 60 пикселей.
В конце, мы определяем цвет с помощью RGB.
Шаг №4 - Создание изображения
Далее мы заполним наше изображение белым прямоугольником, который будет выполнять роль фона. После этого добавим наш текст к изображению
imagefilledrectangle($image,0,0,200,100,$white);
imagettftext($image, 30, 0, 10, 40, $alt, $dir."arial.ttf", $_SESSION['rand_code']);
Функция imagefilledrectangle() рисует прямоугольник в указанном рисунке. Четыре цифры в скобках представляют координаты углов прямоугольника. Убедитесь, что прямоугольник больше чем оригинальное изображение. Прямоугольник в примере 200 на 100 пикселей.
imagettftext() позволяет нам добавить текст к изображению используя разные шрифты. Как Вы видете в данной функции много параметров. Давайте их рассмотрим:
imagettftext($image, $font_size, $angle, $x, $y, $color ,$font_file ,$text);
Если сравнить строчку выше с кодом, то можно легко понять суть параметров. Вначале идет изображение, далее размер шрифта, угол наклона текста, координаты x и y текста (начиная от левого верхнего угла), цвет текста, расположение файла со шрифтом, и сам текст (наша случайная строка).
Шаг №5 - Готовое изображение
Далее нам необходимо сообщить браузеру тип используемого изображения с помощью функции header(). И в самом конце необходимо создать это изображение.
header("Content-type: image/png");
imagepng($image);
?>
Теперь если загрузить этот файл на сервер и просмотреть его через браузер у Вас должна получится картинка с текстом. Если появляются разные ошибки, убедитесь, что правильно задан путь к файлу шрифта.
Полностью код для создании каптчи выглядит так:
<?php
session_start();
$string = '';
for ($i = 0; $i < 5; $i++) {
// this numbers refer to numbers of the ascii table (lower case)
$string .= chr(rand(97, 122));
}
$_SESSION['rand_code'] = $string;
$dir = 'fonts/';
$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 200, 100, 90); // red
$white = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir."arial.ttf", $_SESSION['random_code']);
header("Content-type: image/png");
imagepng($image);
?>
Шаг №6 - contact.php
Создаем новую страницу contact.php. Эта страница будет содержать контактную форму в которой будет использоваться наша защита от спама.
Шаг №7 - HTML & CSS
Давайте добавим HTML форму в файл contact.php. Обратите внимание на тег img, так как с помощью него вставляем каптчу.
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<p><input type="text" name="name" /></p>
<p><input type="text" name="email" /></p>
<p><textarea name="message"></textarea></p>
<img src="captcha.php"/>
<p><input type="text" name="code" /></p>
<p><input type="reset" name="submit" value="Send" /></p>
</form>
Немного добавим стилей форме
<style type="text/css">
form {
margin:0;
padding:0;
}
input {
padding:2px;
width:200px;
}
textarea {
padding:2px;
width:200px;
height:100px;
}
.button {
width:60px;
}
p {
margin:0 0 5px 0;
padding:0;
}
.error {
color:#FF0000;
margin:0 0 10px 0;
}
.accept {
color:#339966;
margin:0 0 10px 0;
}
</style>
Шаг №8: проверка с помощью PHP
После того как наша форма готова, нам необходимо проверить его на правильность введения данных.
Ниже представлен окончательный код. Самыми важными элементами являются session_start(); и if($_POST['code'] == $_SESSION['rand_code']). Они позволяют нам получить доступ к переменной сессии и сравнить с текстом, который вводит юзер.
<?php
session_start();
if(isset($_POST['submit'])) {
if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['code'])) {
if($_POST['code'] == $_SESSION['rand_code']) {
// send email
$accept = "Thank you for contacting me.";
} else {
$error = "Please verify that you typed in the correct code.";
}
} else {
$error = "Please fill out the entire form.";
}
}
?>
В данной форме проверка очень простая. Проверяется только наличие текста в полях, а также правильность введения каптчи. Можете доработать эту форму под свои потребности и ввести более сложную проверку данных.
Вот так должен выглядить файл contact.php. CSS стили можно вынести в отдельный файл.
<?php
session_start();
if(isset($_POST['submit'])) {
if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['code'])) {
if($_POST['code'] == $_SESSION['rand_code']) {
// send email
$accept = "Thank you for contacting me.";
} else {
$error = "Please verify that you typed in the correct code.";
}
} else {
$error = "Please fill out the entire form.";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>
<style type="text/css">
form {
margin:0;
padding:0;
}
input {
padding:2px;
width:200px;
}
textarea {
padding:2px;
width:200px;
height:100px;
}
.button {
width:60px;
}
p {
margin:0 0 5px 0;
padding:0;
}
.error {
color:#FF0000;
margin:0 0 10px 0;
}
.accept {
color:#339966;
margin:0 0 10px 0;
}
</style>
</head>
<body>
<?php if(!empty($error)) echo '<div class="error">'.$error.'</div>'; ?>
<?php if(!empty($accept)) echo '<div class="accept">'.$accept.'</div>'; ?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<p><input type="text" name="name" /> Name</p>
<p><input type="text" name="email" /> Email</p>
<p><textarea name="message"></textarea></p>
<img src="captcha.php"/>
<p><input type="text" name="code" /> Are you human?</p>
<p><input type="submit" name="submit" value="Send" class="button" /></p>
</form>
</body>
</html>
Все готово!
Ура! У нас все получилось! Надеюсь, Вы найдете этому применение.