Hướng dẫn­ form login hoàn chỉnh bằng kỹ thuật Ajax

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.

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:

source code

<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

source code

<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.

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 '<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.

$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');

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!

Nguồn: 2Cwebvn