Xem bài viết Kiểm tra tên người dùng tồn tại với PHP và AJAX

Kiểm tra tên người dùng tồn tại với PHP và AJAX

Sep 30, 2012Php & MySQL
Bài này chắc các bạn nghĩ sẽ khó lắm nhỉ, nhưng không, nó rất là dễ nếu các bạn biết biết một chút php và một chút ajax. Ajax thì mình cũng đã có nhiều bài về phần này rồi, không đến nổi khó hay kinh khủng như các bạn nghĩ.
Mỗi bài viết mình đều có chú thích rất kỹ cho các bạn, chỉ hy vọng là có thể giúp cho các bạn hiểu được nó thêm và có thể áp dụng được vào các dự án của mình. Nói nảy giờ dài dòng quá, mình cùng bắt tay vào thực hiện nào.
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo ở trên để biết mình sẽ làm gì nhé.
Kiểm tra tên người dùng tồn tại với PHP và AJAX - 2Cwebvn 01

1. PHẦN HTML

Phần này các bạn chỉ cần chú ý đến input text với id và name là "user_name" và 1 form bao bọc bên ngoài, các phần còn lại chỉ là râu ria trang trí cho đẹp thôi. Bên cạnh đó là 1 thẻ div với class="thongbao" để thông báo kết quả kiểm tra username đó có tồn tại hay không.
<img src="logo_2cwebvn.png" width="213" height="115" style="float:left;border:1px solid #EAEAEA;padding:10px;">
Username tồn tại: 2cweb, 2cwebvn, chickchick

2. PHẦN CSS

Để chi tiết cho phần CSS này mình chia ra các phần nhỏ để cho các bạn dễ đọc. Phần đầu tiên là mình phải reset style của trình duyệt và định dạng một chút cho trang.
	/*========= RESET STYLE TRÌNH DUYỆT & ĐỊNH DẠNG TRANG ========*/
	@charset "utf-8";
	*{margin:0px; padding:0px;}
	body { 
		font-family: Arial, Helvetica, sans-serif; 
		background: url(bg_2cwebvn.png) repeat;
		color:#DB2E66; 
	}				
	
Tiếp theo sẽ là định dạng cho cho các phần tử trong form:
	
	/*========= ĐỊNH DẠNG CÁC PHẦN TỬ TRONG FORM ========*/
	#fcheck{ 
		width:510px; margin:auto; 
		border:1px solid #ccc; 
		background:#FFFCF7; padding:10px;
	}

	.error { color: red; font-size: 14px; }

	.success { color: #006600; font-size: 14px; }

	label,#user_name { display:block; padding:5px 0px;}

	#user_name{width:200px;} 

	h2{width:430px; margin:50px 0px 20px;}

	.thongbao{margin-top:5px;}

	#btn{
		width:90px; padding:6px; 
		color:#006600; font-weight:bold; 
		margin:10px 0px; 
		border:1px solid #999999;
		}

3. PHẦN AJAX

Trước tiên thì mình cần include thư viện của jQuery vào nhé.
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	
Tiếp theo là code AJAX cho ứng dụng, ở đây mình dùng sự kiện blur() cho input user_name, sự kiện này xảy ra khi con chuột của mình không còn focus trong input user_name nữa. Và không cần nói gì nhiều mình đã có chú thích hết cho các bạn rồi đó, rất dễ hiểu phải không nào. :)
	
	<script type="text/javascript">
	$(document).ready(function() {

		// Sự kiện khi focus vào user_name
		$("#user_name").blur(function() { 
			
			if($(this).val() != ''){
				// Gán text cho class thongbao trước khi AJAX response
				$(".thongbao").html('checking username...'); 
			}
			// Dữ liệu sẽ gởi đi
			var form_data = {action: 'check_user',	user_name: $(this).val()};
			
			$.ajax({
				type: "POST",				// Phương thức gởi đi
				url: "check.php",			// File xử lý dữ liệu được gởi
				data: form_data,			// Dữ liệu gởi đến cho url 
				success: function(result) { // Hàm chạy khi dữ liệu gởi thành công
					$(".thongbao").html(result);	
				}
			});
			
		});

	});
	</script>
		
Phần code ajax trên sẽ link đến file check.php để xử lý kiểm tra username. Nội dung file check.php như sau:
	$action = $_POST['action']; // Lấy giá trị action
	if(!empty($_POST['user_name']) && $action == 'check_user')
	{
		// Lấy giá trị user_name
		$user = $_POST['user_name']; 
		
		// Chuyển giá trị user_name thành chữ thường & gọi hàm kiểm tra
		username_exist(strtolower($user)); 
	}
	
	function username_exist($user)
	{
		// Mảng giá trị user_name đã tồn tại
		$user_arr = array("2cweb", "2cwebvn", "chickchick");
		
		// Kiểm tra user_name mình nhập vào có nằm trong mảng đó hay không?
		// User_name thuộc 1 giá trị trong mảng => user_name tồn tại
		if(in_array($user, $user_arr))
		{
			echo "Username: {$user} đã tồn tại, sorry.!!";
		}
		else // Ngược lại user_name Ko tồn tại
		{
			echo "Username: {$user} Ko tồn tại, oh yeh..";	
		}
	}

Thế là xong, các bạn chạy thử đi nào, và đây là kết quả sau khi làm xong.
Kiểm tra tên người dùng tồn tại với PHP và AJAX - 2Cwebvn 02
Kiểm tra tên người dùng tồn tại với PHP và AJAX - 2Cwebvn 03
Kiểm tra tên người dùng tồn tại với PHP và AJAX - 2Cwebvn 04

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