Như đã hứa ở bài viết lần trước hôm nay 2Cwebvn sẽ sử dụng công nghệ Ajax kết hợp với plugin Validate của jQuery để làm form login hoàn chỉnh. Bài viết này mình kết hợp của 2 bài viết mà mình đã viết đó là bài "Cơ bản về form trong PHP" và bài jQuery Validate - plugin kiểm tra dữ liệu nhập trên Form . Nếu các bạn ai chưa xem xin hãy xem lại để mình có thể hiểu hơn về bào hôm nay, đó cũng là lý do mà mình đã viết 2 bài trước.
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:
1
2
3
4
| <link type="text/css" href="style.css" rel="stylesheet"><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="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.
1
2
3
4
5
6
7
8
9
10
11
| <h2>Tạo form login hoàn chỉnh bằng kỹ thuật Ajax và Validate jquery - 2CwebVN</h2><form id="tutorial" action="test.php" method="post"><fieldset><legend> Member login </legend><p><label for="name">Name:</label><input type="text" name="name" id="name" class="required" minlength="6"></p><p><label for="email">Email:</label><input type="text" name="email" id="email" class="required email"></p><p class="submit"><input id="submit" type="submit" value="Send"></p></fieldset></form><div class="success" style="display:none;">Nơi hiển thị kết quả</div> |
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| $(document).ready(function(){// Validate form$("#tutorial").validate({errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗisubmitHandler: function(form) {// Validate thành công sẽ lấy dữ liệu từ form và gởi đến test.phpvar name = $('#name').attr('value');var email = $('#email').attr('value');$.ajax({type: "POST", // phương thức gởi điurl: "test.php", // nơi mà dữ liệu sẽ chuyển đến khi submitdata: "name="+ name +"&email="+ email, // giá trị postsuccess: 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| ob_start();require_once("dbcon.php");// Các giá trị dược lưu trong biến $_POST// Kiểm tra nếu được postif($_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 sessionecho '<p class="success">Chúc mừng bạn <span style="color:blue">'.$_SESSION['myname'].'</span> đã đăng nhập thành công <br> <a href="logout.php">Đăng xuất</a> !</p>'; }else //Thất bại echo '<p class="success">Username hoặc password không đúng !</p>'; }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.
1
2
3
4
5
6
7
| $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.
1
2
3
4
5
6
| 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.
Mình quên mất và đây là nội dung Database của bảng members
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 hướng dẫn 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 thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Comments[ 0 ]
Đăng nhận xét