Xem bài viết Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery

Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery

Sep 10, 2012Php & MySQL
Bài viết hôm nay cũng đơn giản thôi gồm có 2 phần, phần đầu thì mình sẽ tạo 1 captcha, sau đó sang phần thứ 2 mình sẽ tạo 1 form áp dụng captcha vào, có kèm theo bắt lỗi đơn giản bằng Javascript và jQuery.

1. TẠO CAPTCHA

Phần này mình tạo 1 file captcha_code.php, trong file này mình sẽ viết code để tạo ra 1 captcha, file này có nội dung như sau:
	session_start(); // Khởi tạo session
	$ranStr = md5(microtime());	// Lấy chuỗi rồi mã hóa md5
	$ranStr = substr($ranStr, 0, 6);	// Cắt chuỗi lấy 6 ký tự
	$_SESSION['cap_code'] = $ranStr; // Lưu giá trị vào session
	$newImage = imagecreatefromjpeg("bg_captcha.jpg"); // Tạo hình ảnh từ bg_captcha.jpg
	$txtColor = imagecolorallocate($newImage, 0, 0, 0); // Thêm màu sắc cho hình ảnh 
	imagestring($newImage, 5, 5, 5, $ranStr, $txtColor); // Vẽ ra chuỗi string
	header("Content-type: image/jpeg");	// Xuất định dạng là hình ảnh
	imagejpeg($newImage); // Xuất hình ảnh ra trình như 1 file
	

2. ÁP DỤNG CAPTCHA VÀO FORM

2.1 Phần HTML

Mình sẽ tạo file chạy chính index.php
	session_start();
	$mes = 'notOk';
	if ($_SERVER['REQUEST_METHOD'] == 'POST') {
		if ($_POST['captcha'] == $_SESSION['cap_code']) {
			// Nhập Captcha chính xác, bạn có thể làm điều gì đó ở đây
			// ex: lưu xuống DB, send email,..
			$mes = 'Ok';
		} else {
			// Nhập Captcha sai
			$mes = '';
		}
	}

Tiếp theo thì mình sẽ tạo form đơn giản với 3 thuộc tính là họ tên, nội dung và captcha. Thêm vào đó là 1 thẻ div có class = "captcha_status" để hiện thị thông báo lỗi, phần html của form như sau:

Bảo mật form với captcha trong Php và jQuery - 2Cwebvn



<img src="captcha_code.php">

2.2 Phần CSS

Trước tiên thì mình phải reset style mặc định của trình duyệt và định dạng cho trang.
	/*========= RESET STYLE TRÌNH DUYỆT ========*/
	*{
		margin:0px;           
		padding:0px;  
	}
	/*========= NỘI DUNG ========*/
	body{
		background:url(bg_2cwebvn.png) repeat;
	}
	#wrapper{ margin:0 auto;}
	h1{margin:50px 0px; width: 450px; color:#DB2E66;}
	
và đây là phần css định dạng cho form.
	/*========= ĐỊNH DẠNG FORM ========*/
	#form{
		margin:100px;
		width: 350px;
		outline: 5px solid #ccc;
		border: 1px solid #ccc;
		padding: 10px;
		margin:0 auto;
	}
	#form label{
		font:bold 11px arial;
		color: #565656;
		padding-left: 1px;
	}
	#form label.require{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;
	}
	
Phần cuối cùng là phần css thông báo lỗi.
	/*========= THÔNG BÁO ========*/
	.error{
		border: 2px solid #DB2E66;
	}
	.captcha_status{
		width: 370px;
		padding: 10px; margin:10px auto;
		font: 14px arial;
		color: #87022e;
		text-align:center;
		display: none;
		border:2px solid #DB2E66;
	}
	.captcha_status_error{
		color: #87022e;                
	}

2.3 Phần Javascript & jQuery

Phần này thì mình kiểm tra từng field, nếu 3 field đều hợp lệ thì submit form rồi hiện thông báo cho người dùng, còn nếu không thì cũng hiện thông báo cho người dùng biết là sai.
Phần này thì mình chỉ đơn giản là dùng javascript để kiểm tra, và dùng jQuery để hiện thông báo. Nếu các bạn không muốn dùng javascript để kiểm tra thì bạn có thể xem lại bài viết "jQuery Validate" của mình để xem lại, bài viết rất chi tiết và dễ hiểu.
	
	$(document).ready(function(){
		$('#submit').click(function(){
			// Tạo các biến lấy các giá trị nhập của người dùng
			var hoten = $('#hoten').val();
			var noidung = $('#noidung').val();
			var captcha = $('#captcha').val();
			
			// Kiểm tra field hoten
			if( hoten.length == 0){ 
				$('#hoten').addClass('error');
			}else{
				$('#hoten').removeClass('error');
			}

			// Kiểm tra field noidung
			if( noidung.length == 0){
				$('#noidung').addClass('error');
			}else{
				$('#noidung').removeClass('error');
			}

			// Kiểm tra field captcha
			if( captcha.length == 0){
				$('#captcha').addClass('error');
			}else{
				$('#captcha').removeClass('error');
			}
			
			// Kiểm tra 3 field, nếu thỏa điều kiện thì nó sẽ submit
			if(hoten.length != 0 && noidung.length != 0 && captcha.length != 0){
				return true;
			}
			
			// Nếu ko thỏa thì ko submit form
			return false;
		});
		
		// Lấy kết quả kiểm tra captcha
		var capch = '';
		
		// Kiểm tra captcha có đúng hay không rồi hiện thông báo phù hợp
		if(capch != 'notOk'){
			if(capch == 'Ok'){
				$('.captcha_status').html("Thành công: Thông tin của bạn đã được gởi đi!!!").fadeIn('slow').delay(4000).fadeOut('slow');
			}else{
				$('.captcha_status').html("Lỗi: Bạn là 1 con Robot SPAM!").addClass('captcha_status_error').fadeIn('slow');
			}
		}
	});
	
Và điều cuối cùng các bạn nhớ phải thêm thư viện jquery vào nhé :)
	<script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/images/jquery.min.js"></script>
Và đây là một số hình ảnh thành quả mà mình đã làm đây.
Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery - 2Cwebvn - 01
Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery - 2Cwebvn - 02
Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery - 2Cwebvn - 03
Hướng dẫn tạo form bảo mật hơn với captcha trong PHP và jQuery - 2Cwebvn - 04
NOTE : Mỗi bài viết này mình đều có chú thích rõ ràng hết cho các bạn, viết rất chi tiết, hy vọng sẽ giúp ích cho các bạn trên con đường lập trình mình đã chọn.!

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments