Login and Signup using jQuery AJAX in PHP and MySQL

Tech Area
December 21, 2023

In this tutorial, We will learn how to login and signup using JQuery AJAX in PHP.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (registration form)

3- register-data.php (insert data)

4- login.php (login form)

5- fetch-data.php (fetch data)

6- dashboard.php

7- logout.php

Below are the step by step process of how to create login and signup form using Jquery AJAX.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$conn = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($conn, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create index.php

In this step, create a new file index.php. This is the main file used to implement AJAX to register new user using AJAX in PHP and MySQL.

This screenshot shows the registration form.

index.php

<html>  
<head>  
    <title>Registration Form</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
 .msg
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
    <div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Registration Form</h3><br/>
    <div class="box">
      <div class="form-group">
       <label for="name">Enter Your Name</label>
       <input type="text" name="name" id="name" placeholder="Enter Name" required class="form-control"/>
      </div>  
      <div class="form-group">
       <label for="email">Enter Your Email</label>
       <input type="email" name="email" id="email" placeholder="Enter Email" required class="form-control"/>
      </div>
      <div class="form-group">
       <label for="password">Enter Your Password</label>
       <input type="password" name="pwd" id="pwd" placeholder="Enter Password" required class="form-control"/>
      </div>
      <div class="form-group">
       <label for="gender">Gender</label><br>
       <input type="radio" name="gender" id="gender" value="Male" required> Male
       <input type="radio" name="gender" id="gender" value="Female" required> Female
      </div>
      <div class="form-group">
       <input type="submit" id="register" name="register" value="Submit" class="btn btn-success"/>
       <a href="login.php">Login</a>
       </div>
       <p class="msg"></p>
     </div>
   </div>  
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#register").on("click",function(){
      var name = $("#name").val();
      var email = $("#email").val();
      var password = $("#pwd").val();
      var gender = $('input[type="radio"]:checked').val();
      if(name=='' || email=='' || password=='')
      {
        $(".msg").html("All fields are required!");
      }
      else if($("#gender:checked").length==0)
      {
        $(".msg").html("Gender is required!");
      }
      else
      {
        $.ajax({
          url: 'register-data.php',
          method: 'post',
          data: {name: name, emailid: email, pwd: password, gender: gender},
          success: function(data)
          {
            $(".msg").html(data);
          }
        });
      }
    });
  });
</script>

Step 3: Create new file for register user data

In this step, create a new file register-data.php. This file used to register new user.

<?php
require_once('connection.php');
  $name = mysqli_real_escape_string($conn, $_POST['name']);
  $email = mysqli_real_escape_string($conn, $_POST['emailid']);
  $pwd = md5(mysqli_real_escape_string($conn, $_POST['pwd']));
  $gender = mysqli_real_escape_string($conn, $_POST['gender']);

  $insert_query = mysqli_query($conn,"insert into tbl_registration set name='$name', emailid='$email', password='$pwd', gender='$gender'");
  if($insert_query>0)
  {
    echo "Registration successfull!";
  }
  else
  {
    echo "Error!";
  }
?>

Step 4: Create new file for user login

In this step, create a new file login.php. This file used for user login.

This screenshot shows the login form.

<html>  
<head>  
    <title>Login Form</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
 .msg
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
    <div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Login Form</h3>
     <div class="box">
      <div class="form-group">
       <label for="email">Emailid</label>
       <input type="text" name="email" id="email" placeholder="Enter Email" class="form-control" required />
      </div>
      <div class="form-group">
       <label for="password">Password</label>
       <input type="password" name="pwd" id="pwd" placeholder="Enter Password" class="form-control"/>
      </div>
      <div class="form-group">
       <input type="submit" id="login" name="login" value="Login" class="btn btn-success"/>
       <a href="index.php">Register</a>
      </div>
       <p class="msg"></p>
     </div>
   </div>  
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#login").on("click", function(){
      var email = $("#email").val();
      var password = $("#pwd").val();
      if(email=='' || password=='')
      {
        $(".msg").html("Both fields are required!");
      }
      else
      {
        $.ajax({
          url: 'fetch-data.php',
          method: 'post',
          data: {emailid: email, pwd: password},
          dataType: "JSON",
          success: function(data){
            if(data['status']==1)
            {
              $(".msg").html(data['msg']);
              setTimeout(function(){
              window.location.href="dashboard.php";
            },2000);
            }
            else
            {
              $(".msg").html(data['msg']);
            }
            
          }
        });
      }
    });
  });
</script>

Step 5: Create new file for check login data

In this step, create a new file fetch-data.php. This file used to check login data.

fetch-data.php

<?php
session_start();
require_once('connection.php');
$email = mysqli_real_escape_string($conn, $_POST['emailid']);
$pwd = md5(mysqli_real_escape_string($conn, $_POST['pwd']));

$select_query = mysqli_query($conn, "select * from tbl_registration where emailid='$email' and password='$pwd'");
$row = mysqli_num_rows($select_query);
if($row>0)
{
	$fetch_data = mysqli_fetch_assoc($select_query);
	$name = $fetch_data['name'];
	$_SESSION['name'] = $name;
	echo json_encode(array("status"=>1, "msg"=>"Login Successful!"));
}
else
{
	echo json_encode(array("status"=>0, "msg"=>"Wrong Credentials!"));
}
?>

Step 6: Create new file dashboard.php

dashboard.php

<?php
session_start();
$name = $_SESSION['name'];
?>
<center><h2>Welcome, <?php echo $name; ?> to the dashboard</h2></center>
<center><a href="logout.php">Logout</a></center>

Step 7: Create new file logout.php

logout.php

<?php
session_start();
session_destroy();
header("Location:login.php");
?>

Download Source Code

Signup with Bootstrap Modal using jQuery AJAX in PHP

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024

Online Pizza Delivery project in PHP Last Updated: February 4, 2024

Parking Management System project in PHP Last Updated: November 5, 2023

Employee Attendance Management System project in PHP MySQL Last Updated: October 3, 2023

Visitors Management System project in PHP Last Updated: August 28, 2023

Library Management System project in PHP and MySQL Last Updated: May 29, 2023

Expense Management System project in PHP and MySQL Last Updated: May 22, 2023

Hospital Management System project in PHP and MySQL Last Updated: May 5, 2023

Online quiz with e-certificate in PHP CodeIgniter with MySQL Last Updated: April 29, 2023

SNIPE – IT Asset management system v6.1.0 Last Updated: April 21, 2023

Online Quiz System project in PHP CodeIgniter with MySQL Last Updated: February 8, 2023

Employee Management System project in PHP Last Updated: January 21, 2023