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
DEMO DOWNLOAD 
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:
  • code
  • source
    

  1.     <link type="text/css" href="style.css" rel="stylesheet">

    2. 

  2.     <script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/js/jquery-1.7.2.min.js"></script>

    3. 

  3.     <script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/js/jquery.validate.min.js"></script>

    4. 

  4.     <script type="text/javascript" src="localization/messages_vi.js"></script>

    5. 

  5.     

    6.
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.
  • code
  • source
    

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

    2.
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.
  • code
  • source
    

  1.     $(document).ready(function(){

    2. 

  2.             // Validate form

    3. 

  3.             $("#tutorial").validate({

    4. 

  4.                 errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗi

    5. 

  5.                 submitHandler: function(form) {

    6. 

  6.                 

    7. 

  7.                     // Validate thành công sẽ lấy dữ liệu từ form và gởi đến test.php

    8. 

  8.                     var name        = $('#name').attr('value');

    9. 

  9.                     var email       = $('#email').attr('value');

    10. 

  10.                  

    11. 

  11.                     $.ajax({

    12. 

  12.                         type: "POST", // phương thức gởi đi

    13. 

  13.                         url: "test.php", // nơi mà dữ liệu sẽ chuyển đến khi submit

    14. 

  14.                         data: "name="+ name +"&email="+ email, // giá trị post

    15. 

  15.                         success: function(answer){ // if everything goes well

    16. 

  16.                             $('form#tutorial').hide(); // ẩn form đi

    17. 

  17.                             $('div.success').fadeIn(); // hiển thị thẻ div success

    18. 

  18.                             $('div.success').html(answer); // đặt kết quả trả về từ test.php vào thẻ div success

    19. 

  19.                         }

    20. 

  20.                     });

    21. 

  21.             });

    22. 

  22.         });

    23. 

  23.     

    24.
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.
  • code
  • source
    

  1. ob_start();

    2. 

  2. require_once("dbcon.php");

    3. 

  3.   // Các giá trị dược lưu trong biến $_POST

    4. 

  4.   // Kiểm tra nếu được post

    5. 

  5.   if($_POST) {

    6. 

  6.       // Đưa dữ liệu vào các biến

    7. 

  7.         $name         = $_POST['name']; 

    8. 

  8.         $email         = $_POST['email']; 

    9. 

  9.         

    10. 

  10.         $name=strip_tags(mysql_real_escape_string($name)); 

    11. 

  11.         $email=strip_tags(mysql_real_escape_string($email)); 

    12. 

  12.         

    13. 

  13.         

    14. 

  14.       // Phần xử lý của các bạn..

    15. 

  15.         $sql = "SELECT * FROM members WHERE username='$name' AND email ='$email'"; 

    16. 

  16.         $member = mysql_query($sql);     

    17. 

  17.         if (mysql_num_rows($member)==1)//Thành công     

    18. 

  18.         {    

    19. 

  19.             $_SESSION['myname'] = $name; // Lưu name vào session

    20. 

  20.             echo '
    
"success"
    
    >Chúc mừng bạn "color:blue">'
    21.