Un pequeño, corto y conciso tutorial de como agregar codigo Captcha a nuestros sitios, en 9lessons nos dan un buen ejemplo.
Debo decir que me encanto la foto del Guasón :P
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);
?>
Verifying captcha code is equal or not
Here we are storing a captcha code in SESSION variable and while verifying we have to compare the session variable with user entered data.
$_SESSION['cap_code'] - is having actual captcha code
$_POST['captcha'] - user entered captcha code
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if ($_POST['captcha'] == $_SESSION['cap_code'])
{
// Captcha verification is Correct. Do something here!
}
else
{
// Captcha verification is wrong. Take other action
}
}
?>
Read This
index.php
Contains HTML and PHP code. Image scr='captcha.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'])
{
// Captcha verification is Correct. Do something here!
$cap = 'Eq';
}
else
{
// Captcha verification is wrong. Take other action
$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
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("Your form is successfully Submitted").fadeIn('slow').delay(3000).fadeOut('slow');
}
else
{
$('.cap_status').html("Human verification Wrong!").addClass('cap_status_error').fadeIn('slow');
}
}
});
</script>
CSS
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;
}
FUENTE: 9lessons.info
es lol
ResponderBorrar