Создайте свою собственную Captcha и контактную форму

() translation by (you can also view the original English article)

Вы когда-нибудь попадаете в спам через контактную форму на своем личном сайте? Ну, вот краткий учебник о том, как создать пользовательский код для запоминания плохих парней.

Шаг 1: captcha.php и сессии

Сначала нам нужно создать новую страницу PHP и сохранить ее как captcha.php. Затем в новом скрипте откройте сессию сервера, используя команду session_start(). Кроме того, создайте пустую переменную с именем «string». Мы будем использовать эту переменную позже для хранения нашего случайно генерируемого текста.


<?php

session_start();

$string = '';

?>

Шаг 2: Случайная строка

Далее нам нужно написать цикл for, который будет генерировать случайную строку. Затем мы возьмем эту случайную строку и установим ее в переменной сессии, называемой «random_code».


<?php

session_start();

$string = '';

for ($i = 0; $i < 5; $i++) {
  $string .= chr(rand(97, 122));
}

$_SESSION['random_code'] = $string;

Этот цикл for, как вы заметите, добавляет строчный символ ascii, используя функцию chr(), в нашу переменную $string на каждом проходе. Мой пример генерирует 5 символов, но вы можете отрегулировать это число, изменив $i.

Шаг 3: Папка хранения и Цвета

Здесь учебник становится немного сложнее. Дальше нам нужно определить папку для хранения шрифта, который мы собираемся использовать, построить базовое изображение captcha и определить цвета, которые мы будем использовать для заполнения нашего изображения. Все это простой код, но эти функции разработчики не часто используют.


$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);

Первоначально я просто определяю в переменной $dir папку, где мои шрифты хранятся. Переменная $image, где мы используем функцию imagecreatetruecolor(), является изображением. Здесь базовое изображение captcha создается с использованием PHP. Функция imagecreatetruecolor() возвращает идентификатор изображения, представляющий черное изображение указанного размера. Как вы можете видеть, мое изображение имеет ширину 170px и высоту 60px.

Наконец, на этом этапе я определяю некоторые цвета, которые мы можем использовать в нашем окончательном изображении. Номера, переданные функции imagecolorallocate(), являются значениями RGB.

Шаг 4: Создание изображения

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

1
2	imagefilledrectangle($image,0,0,200,100,$white);
3	imagettftext($image, 30, 0, 10, 40, $alt, $dir."arial.ttf", $_SESSION['rand_code']);

Функция imagefilledrectangle() рисует прямоугольник на указанном изображении. Четыре числа, переданные в функцию, представляют собой координаты для углов прямоугольника. Убедитесь, что прямоугольник, который вы рисуете здесь, больше, чем базовое изображение. Вы заметите, что мой прямоугольник имеет ширину 200 пикселей и высоту 100 пикселей.

Функция imagettftext() позволяет добавлять текст к изображению с использованием шрифтов True Type. И вы увидите, что эта функция может обрабатывать довольно много параметров. Я хотел бы выделить все различные параметры этой функции, но вам нужно запомнить несколько.

1
2	imagettftext($image, $font_size, $angle, $x, $y, $color ,$font_file ,$text);

Как только вы сравните мой пример с кодом, приведенным выше, вы увидите, что значения, переданные функции imagettftext(), легко понять. Первое - это изображение, затем размер шрифта, угол текста, координаты текста x и y (начиная с верхнего левого угла), цвет текста, расположение файла шрифта и, наконец, текст (наша случайная строка).

Шаг 5: Окончательное изображение

Далее, в нашем скрипте, нам нужно функцией header() сообщить браузеру, какой тип изображения мы используем, и построить окончательное изображение. Эти функции настолько прямолинейны, что про них мало что можно объяснить. Кроме того, не забудьте закрыть свой PHP-скрипт.


header("Content-type: image/png");
imagepng($image);

?>

После просмотра в браузере сценарий должен сгенерировать png-изображение, содержащее некоторый текст. Если вы получаете ошибки, убедитесь, что ваш скрипт может ссылаться на ваш файл шрифта .ttf и что вы создали пустую переменную $string, см. ранее в учебнике.

Вот как должен выглядеть окончательный код для вашей страницы captcha.php:


<?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

Создайте новую страницу контактов на PHP и сохраните ее как contact.php. Эта страница будет содержать нашу контактную форму, которая будет проверяться с использованием нашего кода.

Шаг 7: HTML & CSS

Давайте добавим HTML-форму на нашу страницу contact.php. Обратите особое внимание на источник изображения, который мы используем для случайного текста.


<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>

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


<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

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

Ниже приведена окончательная валидация PHP. Два важных шага, необходимых для этого процесса проверки: session_start(); и if($_POST['code'] == $_SESSION['rand_code']). Эти элементы позволяют нам получить доступ к переменной сессии и проверить ее на текст, который кто-то пишет в поле кода нашей формы. Без них наша captcha была бы бесполезна.


<?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.";
	
	}

}
?>

Если вы много знаете о PHP, остальная часть этой проверки должна быть легко понята. Мы должны удостовериться, что ни одно из полей формы не было пустым. Если они пустые, показываем ошибки, чтобы убедиться, что наш пользователь вводит информацию. Вы также заметите, что я не проверяю, корректная ли введена электронная почта, но вам следует это сделать. Проверка подлинности электронной почты выполняется с использованием регулярных выражений.

Вот как должен выглядеть ваш окончательный файл contact.php. Я включаю CSS, который вы можете захотеть удалить в своем собственном файле 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>

Вы все сделали

Когда валидация будет реализована, ваша контактная форма с captcha должна работать отлично. Вы согласны? Спасибо за прочтение.

Следуйте за нами в Твиттере или подпишитесь на RSS-канал NETTUTS для получения ежедневных веб-разработок и статей.