Login, Registration form using Ajax in PHP

0
1278
Ajax

This tutorial explains how to create Login and Signup form using Ajax in PHP without loading the complete webpage.

Login functionality without reloading the page

  1. login_api.php
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("Couldn't make connection.");
$db = mysql_select_db(DB_NAME, $link) or die("Couldn't select database");

$username=$_POST['username'];
$password=$_POST['password'];

$display_json = array();
$json_arr = array();

$recSql = mysql_query("select id, name from users where username='$username' and password='$password'");
if(mysql_num_rows($recSql)>0){
while($recResult = mysql_fetch_assoc($recSql)) {
   $json_arr["name"] = $recResult['name'];
   $json_arr["id"] = $recResult['id'];
   $json_arr["message"] = "Success";
  array_push($display_json, $json_arr);
}
} else {
 
  $json_arr["message"] = "Invalid Username and Password.";
  array_push($display_json, $json_arr);
}


$jsonWrite = json_encode($display_json); //encode that search data
print $jsonWrite;

2. login.php

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('#btn_login').click(function(){
     username=$("#username").val();
     password=$("#password").val();
     
      var dataString = {
        username: username,
        password: password
    }
     
  $.ajax
			({
				type: "POST",
				timeout: 18000,
				url: "login_api.php",
				data:'dataString',
				dataType:'json',
				cache: false,
				success: function(data){
                                    $("#login_msg").html(data['message']);
					
				},
				beforeSend:function(data){
                                     $("#login_msg").html("Loading...");
				},
				error: function(data, textStatus, errorThrown) { 
                                     $("#login_msg").html("No data Available");
				alert(data.status +': '+ errorThrown+' !');	
			}
		});
 
}); 
});

</script>
</head>
<body>
    <input type="text" id="username" />
    <input type="text" id="password" />
    <button id="btn_login">Login</button>
 <div id="login_msg"></div>
</body>
</html>

Singup functionality without reloading the page

3. registration_api.php

$conn = new mysqli($dbhost, $dbuser, $dbpass, $db) or die("Connect failed: %s\n". $conn -> error);

$name=$_POST['name'];
$email=$_POST['email'];
$password=$_POST['password'];

$display_json = array();


 $sql = "INSERT INTO users (name, email, password) VALUES ('" .$name. "', '" .$email. "', '" .$password. "')";
    
    mysqli_query($conn,$sql);

$display_json['message'] ="success";
$jsonWrite = json_encode($display_json); //encode that search data
print $jsonWrite;

4. registration.php

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('#btn_reg').click(function(){
     name=$("#name").val();
     email=$("#email").val();
     password=$("#password").val();
     
      var dataString = {
        name: name,
        password: password,
        email:email
    }
     
  $.ajax
			({
				type: "POST",
				timeout: 18000,
				url: "registration_api.php",
				data:'dataString',
				dataType:'json',
				cache: false,
				success: function(data){
                                    $("#reg_msg").html(data['message']);
					
				},
				beforeSend:function(data){
                                     $("#reg_msg").html("Loading...");
				},
				error: function(data, textStatus, errorThrown) { 
                                     $("#reg_msg").html("No data Available");
				alert(data.status +': '+ errorThrown+' !');	
			}
		});
 
}); 
});

</script>
</head>
<body>
    <input type="text" id="name" />
    <input type="text" id="email" />
    <input type="text" id="password" />
    <button id="btn_reg">Singup</button>
 <div id="reg_msg"></div>
</body>
</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here