Day 3 #100DaysOfCode. Mấy ngày vừa qua mình làm với Series #100DaysOfCode và nay tiếp tục với thử thách đó tiếp. Mình làm mỗi cái Demo và lưu trữ trên trang này, để chia sẻ với mọi người luôn, đồng thời đôi khi mình quên code, lên kiếm lại cũng nhanh kaka, code mà nhiều quá khó nhớ lắm.
Bài viết trước được sử dụng trong Demo ngày thứ 3 của mình:
Okay, đầu tiền mình tạo một file ajax_login.php trong project của mình để xử lý thông tin dữ liệu ajax gửi qua, để sử dụng được ajax chúng ta cần thêm thư viện jquery dưới đây, add vào trong head của file index.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Ok, giờ ta cần viết code xử lý ajax như sau:
$(document).ready(function(){
/* LOGIN FORM */
$("#login").submit(function(){
var _email = $("input[type='email']").val();
var _password = $("input[type='password']").val();
if(_email=="" || _email.length==0){
alert("Bạn chưa nhập email!");
}
else if(_password=="" || _password.length==0){
alert("Bạn chưa nhập password!");
}else{
$.ajax({
type:"POST",
url:"ajax_login.php",
data:{
email:_email,
password:_password
},
cache:false,
success:function(result){
/* check array */
var n = result.search("Unknown database");
if(n>0){
alert("Database không đúng!");
}else{
/* Convert json to array */
var data = JSON.parse(result);
if(data['message']==1){
alert("Bạn đăng nhập thành công!")
/* data['success'] = success.php */
/* redirect đến file success.php */
window.location.href=data['success'];
}else if(data['message']==0){
alert("Email & Password không đúng");
}else{
alert("Không tồn tại email và password");
}
}
},
error: function (request, status, error) {
alert(status);
}
});
}
return false;
});
});
+ File ajax_login.php : file này nó cũng giống như file login.php trong bài viết trước, bạn có thể xem lại tại đây: Create a Login Form Using PHP
<?php
session_start();
require_once "define.php";
$array_message = array();
/*
message : 1 //Đăng nhập thành công
message : 0 //Email & Password không đúng
message : -1 // không tồn tại email & password
*/
$conn = new mysqli(LOCALHOST,USERNAME,PASSWORD,DATABASE);
if (mysqli_connect_errno()) {
echo json_encode(array($conn->connect_error));
}else{
if(isset($_POST['email']) && isset($_POST['password'])){
$_email = mysqli_real_escape_string($conn,$_POST['email']);
$_pass = mysqli_real_escape_string($conn,$_POST['password']);
$sql = "SELECT * FROM `users` WHERE `Email`='".$_email."' and `Password`='".md5($_pass)."'";
$query = mysqli_query($conn,$sql);
if(mysqli_num_rows($query)>0){
$row = mysqli_fetch_assoc($query);
$_SESSION['CHECK_EMAIL'] = $row['Email'];
$array_message['message'] = 1;
$array_message['success'] = 'success.php';
}
else{
$array_message['message'] = 0;
}
}
else{
$array_message['message'] = -1;
}
echo json_encode($array_message);
}
?>
Chỉnh sửa file index.php lại như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Login</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* LOGIN FORM */
$("#login").submit(function(){
var _email = $("input[type='email']").val();
var _password = $("input[type='password']").val();
if(_email=="" || _email.length==0){
alert("Bạn chưa nhập email!");
}
else if(_password=="" || _password.length==0){
alert("Bạn chưa nhập password!");
}else{
$.ajax({
type:"POST",
url:"ajax_login.php",
data:{
email:_email,
password:_password
},
cache:false,
success:function(result){
/* check array */
var n = result.search("Unknown database");
if(n>0){
alert("Database không đúng!");
}else{
/* Convert json to array */
var data = JSON.parse(result);
if(data['message']==1){
alert("Bạn đăng nhập thành công!")
/* data['success'] = success.php */
/* redirect đến file success.php */
window.location.href=data['success'];
}else if(data['message']==0){
alert("Email & Password không đúng");
}else{
alert("Không tồn tại email và password");
}
}
},
error: function (request, status, error) {
alert(status);
}
});
}
return false;
});
});
</script>
<style>
*{margin:0;padding:0}
body{
width:100%;
margin: 0 auto;
max-width: 1350px;
font-family: 'Oswald', sans-serif;
background: #F0E4E4;
}
.form_hoa{
width: 40%;
margin: auto;
}
.form_hoa>.box_login{
width: 100%;
margin-top: 30%;
background-color: #d5d5d5;
box-shadow: 0 0 2px #000;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
.box_login form h2{
text-align: center;
color:#000;
font-size: 30px;
}
.box_login form>div{
padding: 5px 0px;
}
.box_login form label{
padding: 3px 0;
display: block;
font-weight: bold;
}
.box_login form input{
width: 100%;
border:none;
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
}
.box_login form button{
width: 100%;
border:none;
background: #333;
color:#fff;
padding: 11px;
border-radius: 5px;
box-sizing: border-box;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="form_hoa">
<div class="box_login">
<form action="" method="POST" id="login">
<h2>Login Cpanel</h2>
<div class="row-item">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter Email" value="<?php echo (isset($_GET['email'])?$_GET['email']:'')?>" />
</div>
<div class="row-item">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Enter Password" />
</div>
<div class="row-item">
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
Trong bài này chỉ khác phần code Ajajx và file ajax_login.php, còn lại mình sử dụng giao diện và code của các bài viết trước, các bạn có thể xem lại các bài viết chia sẻ trước nghe!