To determine if a visitor to your site is human, you can implement a CAPTCHA system using either PHP or JavaScript. Below are examples of how to create a simple CAPTCHA system in both languages.
PHP CAPTCHA Example
1. Create a CAPTCHA Image:
<?php
session_start();
// Generate a random string
$captcha_code = substr(md5(uniqid(mt_rand(), true)), 0, 6);
$_SESSION['captcha'] = $captcha_code;
// Create an image
$image = imagecreatetruecolor(100, 30);
// Set background and text color
$bg_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
// Fill the background
imagefilledrectangle($image, 0, 0, 100, 30, $bg_color);
// Add the text
imagettftext($image, 20, 0, 10, 25, $text_color, 'path/to/font.ttf', $captcha_code);
// Output the image
header('Content-type: image/png');
imagepng($image);
// Clean up
imagedestroy($image);
?>
2. Create a Form to Display CAPTCHA:
<!DOCTYPE html>
<html>
<head>
<title>CAPTCHA Example</title>
</head>
<body>
<form action="verify.php" method="post">
<p><img src="/captcha.php" alt="CAPTCHA Image"></p>
<p><input type="text" name="captcha" placeholder="Enter CAPTCHA"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
3. Verify CAPTCHA in PHP:
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['captcha'] == $_SESSION['captcha']) {
echo 'CAPTCHA verification successful!';
} else {
echo 'CAPTCHA verification failed!';
}
}
?>
JavaScript CAPTCHA Example
1. HTML and JavaScript for CAPTCHA:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript CAPTCHA Example</title>
<script>
function generateCaptcha() {
const characters = 'ABCDEFxbLFFJR8Y8S54LX8h7uSMDsb7EeVmyApqrstuvwxyz0123456789';
let captcha = '';
for (let i = 0; i < 6; i++) {
captcha += characters.charAt(Math.floor(Math.random() * characters.length));
}
document.getElementById('captcha').innerHTML = captcha;
document.getElementById('captcha_value').value = captcha;
}
function validateCaptcha() {
const input = document.getElementById('captcha_input').value;
const captcha = document.getElementById('captcha_value').value;
if (input === captcha) {
alert('CAPTCHA verification successful!');
} else {
alert('CAPTCHA verification failed!');
generateCaptcha();
}
return false; // Prevent form submission for demonstration
}
</script>
</head>
<body onload="generateCaptcha()">
<form onsubmit="return validateCaptcha()">
<p id="captcha" style="font-size: 24px; font-weight: bold;"></p>
<input type="hidden" id="captcha_value">
<p><input type="text" id="captcha_input" placeholder="Enter CAPTCHA"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
Both of these examples create a basic CAPTCHA system to differentiate between human users and bots. The PHP example uses server-side verification, while the JavaScript example uses client-side verification.