Trong bài viết lần này mình sẽ hướng dẫn các bạn cách tạo trang login theo phong cách của Gmail và xác thực bằng AJAX, PHP và jQuery. Mỗi khi các bạn đăng nhập vào Gmail thì phải đi theo các bước từ xác định địa chỉ email có tồn tại không, sau đó mới đến nhập password. Việc xây dựng một trang login như thế khá là thú vị phải không nào.
Để tạo giao diện thì mình sẽ sử dụng HTML + CSS + Bootstrap. Dưới đây là trang login theo kiểu Gmail được tạo ra:
Phần xác thực và đăng nhập được làm bằng Javascript, AJAX và PHP. Bước đầu tiên là kiểm tra email được nhập vào có tồn tại trong database không. Nếu như không tồn tại thì trả về lỗi “Sorry, we doesn’t recognize that email”. Nếu email tồn tại, chúng ta sẽ lấy tên người dùng, email và ảnh đại diện từ mysql database để hiển thị ở bước tiếp theo. Sau đó là phần xác thực password thông qua lời gọi AJAX đến checkAuthentication.php. Nếu mật khẩu nhập đúng, trang web sẽ được chuyển hướng đến trang chào mừng.
AJAX call – check email:
function checkEmail(email, callback) {
$.ajax({
url: "checkEmail.php",
type: "POST",
dataType: "JSON",
data: 'email=' + email,
success: function(data) {
if (data.action == "SHOW_ERROR") {
$(".login").animate({
height: "320px"
});
$('#email').css({
'border-color': '#dd4b39'
});
$('#email').focus();
$('#error_msg').text(data.error_msg);
var dataFlg = 0;
} else if (data.action == "SHOW_SUCCESS") {
$('#img').html(data.image);
$('#userName').text(data.userName);
$('#userEmail').text(data.email);
var dataFlg = 1;
}
callback(dataFlg);
},
error: function() {}
});
}
Check email – PHP:
if(isset($_POST['email'])){
if($_POST['email']!=""){
$query = mysqli_query($con,"select * from gmail_users where email='".$_POST['email']."'");
$num = mysqli_num_rows($query);
if($num==1){
$result = mysqli_fetch_array($query,MYSQLI_ASSOC);
$action = "SHOW_SUCCESS";
$userName = $result['userName'];
$email = $result['email'];
$imagePath = "images/".$result['image'];
$image = '<img src="'.$imagePath.'" alt="" class="img-circle" height="100">';
echo json_encode(array('action'=>$action,'userName'=>$userName,'email'=>$email,'image'=>$image));
}else{
$action = "SHOW_ERROR";
$error_msg = "Sorry, we doesn't recognize that email. ";
echo json_encode(array('action'=>$action,'error_msg'=>$error_msg));
}
}else{
$action = "SHOW_ERROR";
$error_msg = "Please enter your email.";
echo json_encode(array('action'=>$action,'error_msg'=>$error_msg));
}
}
AJAX call – xác thực password:
function checkAuthentication() {
$("#msform").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "checkAuthentication.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
dataType: "JSON",
processData: false,
success: function(data) {
if (data.action == "SHOW_ERROR") {
$(".login").animate({
height: "370px"
});
$('#password').css({
'border-color': '#dd4b39'
});
$('#password').focus();
$('#msg').css({
'color': '#dd4b39',
'text-align': 'left'
});
$('#msg').text(data.msg);
} else if (data.action == "SHOW_SUCCESS") {
window.location.href = "welcome.php";
}
},
error: function() {}
});
}));
}
Xác thực password – PHP (checkAuthentication.php):
include('config.php');
if(isset($_POST['email'])&&(isset($_POST['password']))){
if($_POST['password']!=""){
$query = mysqli_query($con,"select * from gmail_users where email='".$_POST['email']."' and password='".$_POST['password']."'");
$num = mysqli_num_rows($query);
if($num==1){
$result = mysqli_fetch_array($query,MYSQLI_ASSOC);
$action = "SHOW_SUCCESS";
$_SESSION['userName'] = $result['userName'];
$_SESSION['email'] = $result['email'];
$msg = "Succesfully Logged in. Thank You..";
echo json_encode(array('action'=>$action,'msg'=>$msg));
}else{
$action = "SHOW_ERROR";
$msg = "The email and password you entered don't match. ";
echo json_encode(array('action'=>$action,'msg'=>$msg));
}
}else{
$action = "SHOW_ERROR";
$msg = "Please enter your Password.";
echo json_encode(array('action'=>$action,'msg'=>$msg));
}
}
Trên đây là hướng dẫn tạo trang login theo kiểu Gmail. Các bạn có thể xem bài viết gốc cũng như demo tại đây.