четверг, 24 ноября 2011 г.

Создание капчи на PHP

В этом уроке я покажу вам как создать свою собственную капчу на PHP. Это очень простой пример: просто создание изображения с обычным шрифтом. И.. думаю все знают заем нужна это самая капча.

Captcha.php
<?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION['cap_code'] = $ranStr;
$newImage = imagecreatefromjpeg("cap_bg.jpg");
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header("Content-type: image/jpeg");
imagejpeg($newImage);
?>
Проверка правильности введенной капчи
Код капчи храниться в сессиях, для проверки подлинности ввода  кода сравниваем их.

$_SESSION['cap_code'] - настоящий код
$_POST['captcha'] - код введенный пользователем


index.php
Содержит HTML и PHP код. Изображение капчи -> 'captcha.php'
<?php
session_start();
$cap = 'notEq'; // This php variable is passed to jquery variable to show alert
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if ($_POST['captcha'] == $_SESSION['cap_code'])
{
// Код введен верно! *любые дейчтвия*
$cap = 'Eq';
}
else
{
// Код введен не верно
$cap = '';
}
}
?>
<html>
<body>
<form action="" method="post">
<label>Name:</label><br/>
<input type="text" name="name" id="name"/>
<label>Message:</label><br/>
<textarea name="msg" id="msg"></textarea>
<label>Enter the contents of image</label>
<input type="text" name="captcha" id="captcha" />
<img src='captcha.php' />
<input type="submit" value="Submit" id="submit"/>
</form>
<div class="cap_status"></div>
</body>
</html>

Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var name = $('#name').val();
var msg = $('#msg').val();
var captcha = $('#captcha').val();
if( name.length == 0){
$('#name').addClass('error');
}
else{
$('#name').removeClass('error');
}
if( msg.length == 0)
{
$('#msg').addClass('error');
}
else{
$('#msg').removeClass('error');
}
if( captcha.length == 0){
$('#captcha').addClass('error');
}
else{
$('#captcha').removeClass('error');
}
if(name.length != 0 && msg.length != 0 && captcha.length != 0){
return true;
}
return false;
});
var capch = '<?php echo $cap; ?>';
if(capch != 'notEq'){
if(capch == 'Eq'){
$('.cap_status').html("Все отлично!").fadeIn('slow').delay(3000).fadeOut('slow');
}
else{
$('.cap_status').html("Вы ошиблись").addClass('cap_status_error').fadeIn('slow');
}
}
});
</script>

CSS
body{
width: 600px;
margin: 0 auto;
padding: 0;
}
#form{
margin-top: 100px;
width: 350px;
outline: 5px solid #d0ebfe;
border: 1px solid #bae0fb;
padding: 10px;
}
#form label{
font:bold 11px arial;
color: #565656;
padding-left: 1px;
}
#form label.mandat{
color: #f00;
}
#form input[type="text"]{
height: 30px;
margin-bottom: 8px;
padding: 5px;
font: 12px arial;
color: #0060a3;
}
#form textarea{
width: 340px;
height: 80px;
resize: none;
margin: 0 0 8px 1px;
padding: 5px;
font: 12px arial;
color: #0060a3;
}
#form img{
margin-bottom: 8px;
}
#form input[type="submit"]{
background-color: #0064aa;
border: none;
color: #fff;
padding: 5px 8px;
cursor: pointer;
font:bold 12px arial;
}
.error{
border: 1px solid red;
}
.cap_status{
width: 350px;
padding: 10px;
font: 14px arial;
color: #fff;
background-color: #10853f;
display: none;
}
.cap_status_error{
background-color: #bd0808;
}
Вот и все, удачки!) 

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

Отправить комментарий