Hướng dẫn tạo CAPTCHA đơn giản với PHP

Xin chào, hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn tạo CAPTCHA đơn giản và tạo form kiểm tra CAPTCHA.
Chức năng:

Yêu cầu người dùng nhập vào mã CAPTCHA
Kiểm tra CAPTCHA, nếu đúng hoặc sai thì xuất ra câu thông báo

TẠO CAPTCHA

Để tạo captcha, chúng ta tạo file captcha.php và xem file này như file hình ảnh xuất hiện một chuỗi ngẫu nhiên 6 kí tự, đồng thời lưu 6 kí tự này vào Session để chúng ta có thể kiểm tra captcha người dùng đã nhập có chính xác không.

<?php
session_start();
$string = md5(time());
$string = substr($string, 0, 6);

$_SESSION['captcha'] = $string;

$img = imagecreate(150,50);
$background = imagecolorallocate($img, 0,0,0);
$text_color = imagecolorallocate($img, 255,255,255);
imagestring($img, 4,40,15, $string, $text_color);

header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
?>

<?php

session_start();

$string = md5(time());

$string = substr($string, 0, 6);

$_SESSION['captcha'] = $string;

$img = imagecreate(150,50);

$background = imagecolorallocate($img, 0,0,0);

$text_color = imagecolorallocate($img, 255,255,255);

imagestring($img, 4,40,15, $string, $text_color);

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

imagepng($img);

imagedestroy($img);

Lưu ý là chúng ta phải đặt header(“Content-type: image/png”); để định nghĩa file này là một hình ảnh. Bây giờ thì chúng ta có thể dùng HTML để chèn file hình captcha.php vào trong trang HTML như sau

<img src="captcha.php" title="" alt="" />

TẠO FORM NHẬP VÀ KIỂM TRA CAPTCHA

Tiếp theo chúng ta tạo file index.php gồm form nhập captcha như sau

<!DOCTYPE html>
<html>
<head>
	<title>CAPTCHA</title>
	<style>
	</style>
</head>
<body>
	<form action="" method="POST">
		<h2>
CAPTCHA - HOCWEB.COM.VN</h2>
<p>
Please enter the captcha:</p>
<input type="text" name="input"><img src="captcha.php" title="" alt="" /><br />
		<input type="submit" name="submit" value="Send">
		<p id="message">
</p>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>CAPTCHA</title>
    <style>
    </style>
</head>
<body>
    <form action="" method="POST">
        <h2>CAPTCHA - HOCWEB.COM.VN</h2>
        <p>Please enter the captcha:</p>
        <input type="text" name="input"><img src="captcha.php" title="" alt="" /><br />
        <input type="submit" name="submit" value="Send">
        <p id="message"></p>
    </form>
</body>
</html>

Định dạng form bằng CSS

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background: #ecf0f1;
}
a:link, a:visited{
	color: #2980b9;
	text-decoration: none;
}
a:hover, a:active{
	text-decoration: underline;
	color: #e74c3c;
}
form{
	width: 450px;
	margin: 20px auto;
	border: 1px solid #95a5a6;
	border-radius: 5px;
	background: #fff;
	padding: 20px;
}
form input[type="text"]{
	width: 200px;
	height: 48px;
	padding: 0;
	margin: 0;
	float: left;
	border: 1px solid #2c3e50;
	margin-right: 10px;
	border-radius: 5px;
}
form input[type="submit"]{
   	padding: 5px 20px;
}
#message{
	color: #c0392b;
}

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #ecf0f1;
}
a:link, a:visited{
    color: #2980b9;
    text-decoration: none;
}
a:hover, a:active{
    text-decoration: underline;
    color: #e74c3c;
}
form{
    width: 450px;
    margin: 20px auto;
    border: 1px solid #95a5a6;
    border-radius: 5px;
    background: #fff;
    padding: 20px;
}
form input[type="text"]{
    width: 200px;
    height: 48px;
    padding: 0;
    margin: 0;
    float: left;
    border: 1px solid #2c3e50;
    margin-right: 10px;
    border-radius: 5px;
}
form input[type="submit"]{
       padding: 5px 20px;
}
#message{
    color: #c0392b;
}

XỬ LÝ ACTION CHO FORM

Về cơ bản chúng ta đã xây dựng xong form, bây giờ chúng ta phải xử lý khi người dùng nhập captcha và submit form. Để kiểm tra captcha người dùng nhập có chính xác không chúng ta chỉ cần so sánh chuỗi người dùng nhập vào và Session captcha mà chúng ta đã tạo trong file captcha.php

<?php
session_start();
if(isset($_POST['submit'])){
	$input = $_POST['input'];
	if($input == $_SESSION['captcha'])
		$_SESSION['message'] = "* Right captcha !!!";
	else{
		$_SESSION['message'] = "* Wrong captcha !!!";
	}
}
?>

<?php
session_start();
if(isset($_POST['submit'])){
    $input = $_POST['input'];
    if($input == $_SESSION['captcha'])
        $_SESSION['message'] = "* Right captcha !!!";
    else{
        $_SESSION['message'] = "* Wrong captcha !!!";
    }
}
?>

Ở đây yêu cầu người dùng phải nhập chính xác chữ Hoa và thường.

HIỂN THỊ THÔNG BÁO NHẬP ĐÚNG / SAI

Quay lại phần HTML, chúng ta có thành phần HTML p#message, đây sẽ là nơi chúng ta in ra câu thông báo nhập đúng/sai.

<p id="message">
<?php 
		if(isset($_SESSION['message'])){
			echo $_SESSION['message'];
			unset($_SESSION['message']);
		} 
	?>
</p>

TRANG INDEX SAU KHI HOÀN CHỈNH

<?php

session_start();

if(isset($_POST['submit'])){

    $input = $_POST['input'];

    if($input == $_SESSION['captcha'])

        $_SESSION['message'] = "* Right captcha !!!";

    else{

        $_SESSION['message'] = "* Wrong captcha !!!";

    }

}

?>

<!DOCTYPE html>

<html>

<head>

    <title>CAPTCHA</title>

    <style>

    body{

        margin: 0;

        padding: 0;

        font-family: sans-serif;

        background: #ecf0f1;

    }

    a:link, a:visited{

        color: #2980b9;

        text-decoration: none;

    }

    a:hover, a:active{

        text-decoration: underline;

        color: #e74c3c;

    }

    form{

        width: 450px;

        margin: 20px auto;

        border: 1px solid #95a5a6;

        border-radius: 5px;

        background: #fff;

        padding: 20px;

    }

    form input[type="text"]{

        width: 200px;

        height: 48px;

        padding: 0;

        margin: 0;

        float: left;

        border: 1px solid #2c3e50;

        margin-right: 10px;

        border-radius: 5px;

    }

    form input[type="submit"]{

           padding: 5px 20px;

    }

    #message{

        color: #c0392b;

    }

    </style>

</head>

<body>

    <form action="" method="POST">

        <h2>CAPTCHA - HOCWEB.COM.VN</h2>

        <p>Please enter the captcha:</p>

        <input type="text" name="input"><img src="captcha.php" title="" alt="" /><br />

        <input type="submit" name="submit" value="Send">

        <p id="message"><?php if(isset($_SESSION['message'])){

            echo $_SESSION['message'];

            unset($_SESSION['message']);

        } ?></p>

    </form>

</body>

</html>

HOÀN THÀNH

Screenshot 2013 11 25 06.27.02 Hướng dẫn tạo CAPTCHA đơn giản với PHP

Form nhập Captcha sau khi hoàn thành

Screenshot 2013 11 25 06.27.23 Hướng dẫn tạo CAPTCHA đơn giản với PHP

Nhập Captcha chính xác

Screenshot 2013 11 25 06.27.30 Hướng dẫn tạo CAPTCHA đơn giản với PHP

Nhập sai Captcha

Chúc các bạn thành công !

Xem thêm tại http://hocweb.com.vn/category/hocweb/php-mysql/php-co-ban/

----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

quảng cáo

Hướng dẫn tạo CAPTCHA đơn giản với PHP

TẠO CAPTCHA

TẠO FORM NHẬP VÀ KIỂM TRA CAPTCHA

XỬ LÝ ACTION CHO FORM

HIỂN THỊ THÔNG BÁO NHẬP ĐÚNG / SAI

TRANG INDEX SAU KHI HOÀN CHỈNH

HOÀN THÀNH

About Author

Advertisement

Đăng nhận xét

Biểu mẫu liên hệ

Hướng dẫn tạo CAPTCHA đơn giản với PHP

TẠO CAPTCHA

TẠO FORM NHẬP VÀ KIỂM TRA CAPTCHA

XỬ LÝ ACTION CHO FORM

HIỂN THỊ THÔNG BÁO NHẬP ĐÚNG / SAI

TRANG INDEX SAU KHI HOÀN CHỈNH

HOÀN THÀNH

Share to:

About Author

Advertisement

Next

Bài đăng Mới hơn

Previous

Bài đăng Cũ hơn

Đăng nhận xét

Biểu mẫu liên hệ