Xem bài viết Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery

Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery

Jul 28, 2012Php & MySQL
Trong phần này mình sẽ có 5 file chính:
index.php : dùng để hiện form login và xử lý Ajax
test.php : dùng để kết nối Datatbase, kiểm tra login của user
logout.php : dùng để đăng xuất khỏi hệ thống.
dbcon.php : dùng để khai báo các giá trị kết nối database.
style.css : dùng để định dạng cho trang

1. NỘI DUNG TRONG FILE index.php

1.1 Khai báo các file cần thiết

Phần này các bạn include các file css, thư viện jquery, plugin validate và file thông báo lỗi của validate:
	<link type="text/css" href="style.css" rel="stylesheet">
	<script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="localization/messages_vi.js"></script>
	

1.2 Phần HTML

Phần này các bạn khai bào form login, phần này giống như form login ở bài lần trước nhưng mình có thêm thuộc tính validate cho các field nhập.

Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery - 2CwebVN

Member login

1.3 Phần Javascript

Phần Javascript này mình kết hợp 2 bài lần trước đã học, nếu các bạn quên các bạn có thể quay lại để xem.
	$(document).ready(function(){
			// Validate form
			$("#tutorial").validate({
				errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗi
				submitHandler: function(form) {
				
					// Validate thành công sẽ lấy dữ liệu từ form và gởi đến test.php
					var name        = $('#name').attr('value');
					var email       = $('#email').attr('value');
				 
					$.ajax({
						type: "POST", // phương thức gởi đi
						url: "test.php", // nơi mà dữ liệu sẽ chuyển đến khi submit
						data: "name="+ name +"&email="+ email, // giá trị post
						success: function(answer){ // if everything goes well
							$('form#tutorial').hide(); // ẩn form đi
							$('div.success').fadeIn(); // hiển thị thẻ div success
							$('div.success').html(answer); // đặt kết quả trả về từ test.php vào thẻ div success
						}
					});
			});
		});
	

2. NỘI DUNG TRONG FILE test.php

Phần này mình sẽ kết nối database, kiểm tra người dùng đăng nhập.
ob_start();
require_once("dbcon.php");
  // Các giá trị dược lưu trong biến $_POST
  // Kiểm tra nếu được post
  if($_POST) {
      // Đưa dữ liệu vào các biến
		$name 		= $_POST['name']; 
		$email 		= $_POST['email']; 
		
		$name=strip_tags(mysql_real_escape_string($name)); 
		$email=strip_tags(mysql_real_escape_string($email)); 
		
		
      // Phần xử lý của các bạn..
        $sql = "SELECT * FROM members WHERE username='$name' AND email ='$email'"; 
		$member = mysql_query($sql);     
		if (mysql_num_rows($member)==1)//Thành công     
		{	
			$_SESSION['myname'] = $name; // Lưu name vào session
			echo '

Chúc mừng bạn '.$_SESSION['myname'].' đã đăng nhập thành công
Đăng xuất !

'; } else //Thất bại echo '

Username hoặc password không đúng !

'; } ob_end_flush();

3. NỘI DUNG TRONG FILE dbcon.php

Phần này mình sẽ khai báo các giá trị kết nối đến database.
$host="localhost"; 
$username="root"; 
$password=""; 
$database="2cwebvn_demo"; 
mysql_pconnect($host,$username,$password); 
mysql_query("set names 'utf8'"); 
mysql_select_db($database);     

4. NỘI DUNG TRONG FILE logout.php

Phần này mình sẽ hủy session của người dùng và trở về form chính.
session_start();
if (isset($_SESSION['myname'])) {
	unset($_SESSION['myname']); // Hủy sessionk
}

// trở về trang chủ
header('Location: index.php');

Vậy là xong và đây là kết quả sau khi làm xong.
Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery - 02 - 2Cwebvn
Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery - 03 - 2Cwebvn
Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery - 04 - 2Cwebvn
Mình quên mất và đây là nội dung Database của bảng members
Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery - 01 - 2Cwebvn
NOTE: Các file trên mình có để chú thích hết cho các bạn, phần nào không hiểu bạn có thể để lại comment cho mình, mình sẽ cố gắng giải quyết.

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