jQuery Ajax Login Script using PHP MySQLi

Today, We want to share with you jQuery Ajax Login Script using PHP MySQLi.In this post we will show you Simple PHP Login System Using MySQL And JQuery AJAX, hear for PHP Login Script Using MySQLi jQuery and Ajax we will give you demo and example for implement.In this post, we will learn about Ajax Login Script with jQuery, PHP MySQL and Bootstrap with an example.

jQuery Ajax Login Script using PHP MySQLi

There are the Following The simple About PHP Login Script (PHP, MySQL, Bootstrap, jQuery, Ajax and JSON) Full Information With Example and source code.

As I will cover this Post with live Working example to develop Ajax login form using jQuery, PHP and MySQLi, so the design login application using php and add essence of ajax in it is used for this example is following below.

PHP MySQL CONNECT DATABASE

define(“DB_HOST”, “localhost”);
define(“DB_USER”, “jigarshah48”);
define(“DB_PASS”, “DSFpala#378434”);
define(“DB_NAME”, “pakainfo”);

Database.php

Class Database{
    public $host = DB_HOST;
    public $user = DB_USER;
    public $pass = DB_PASS;
    public $dbname = DB_NAME;
        
    public $link;
    public $error;
        
    public function __construct(){
       $this->connectDB();
    }

    private function connectDB(){

    $this->link = new mysqli($this->host, $this->user, $this->pass, $this->dbname);
    
      if(!$this->link){
      $this->error =”Connection fail”.$this->link->connect_error;
     return false;
      }
    }

    public function select($query){

       $result = $this->link->query($query) or die($this->link->error.__LINE__);
        if($result->num_rows > 0){
         return $result;
         } else {
         return false;
        }
       }
    }

Creating the Database Table

CREATE TABLE members(
   id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
   email VARCHAR(50) NOT NULL UNIQUE,
   db_pass_secure VARCHAR(255) NOT NULL,
   created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);    

Session.php

  class Session
    {
    public static function init(){
      session_start();
    }

    public static function set($key,$value){
        $_SESSION[$key] = $value;
    }

    public static function get($key){
       if (isset($_SESSION[$key])){
        $result = $_SESSION[$key];
    }

    if (isset($result)) {
        return $result;
    }else{
      return false;
     }
    }

    public static function checkSession(){
       self::init();
       if(self::get(“sign_in”) == false){
        self::destroy();
       header(“Location:sign_in.php”);
      }
    }

    public static function checkLogin(){
       self::init();
       if(self::get(“sign_in”) == true){
       header(“Location:index.php”);
      }
    }

    public static function destroy(){
       session_destroy();
       header(“Location:sign_in.php”);
     }
    }

sign_in.php

<?php
	include ‘Session . php’;
	Session::checkLogin();
?>
<h2>User Login — laramust.com</h2>
<p id=”text”></p>
<p id=”message”></p>
<form action=”redirect.php” method=”post”>
    <table>
        <tr>
            <input type=”email” id=”email” placeholder=”Enter Your email Address” name=”email”>
            <span>
                <p class=”email_error_text”></p>
            </span>
        </tr>
        <tr>
            <input type=”password” id=”db_pass_secure” placeholder=”Enter db_pass_secure” name=”db_pass_secure”>
            <span>
                <p class=”db_pass_secure_error_text”></p>
            </span>
        </tr>
        <tr>
            <input type=”submit” id=”submit” value=”Submit” style=”margin-top: 5px;”>
        </tr>
    </table>
</form>
Make sure you have to add those below code in sign_in.php page .
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src=”function.js”></script>
<style type=”text/css”> .error{ color:red; font-size: 20px; } </style>

Creating Function.js File

function.js

$(document).ready(function () {
	    $(“#submit”).click(function () {
	        var email = $(“#email”).val();
	        var db_pass_secure = $(“#db_pass_secure”).val();
	        if (email.length == “” || db_pass_secure.length == “”){
	        $(“#message”).html(“please fill out this field first”).fadeIn();
	        $(“#message”).addClass(“error”);
	        return false;
	    }else {
	        $.ajax({
	            type: ‘POST’,
	            url: ‘redirect.php’,
	            data: { email: email, db_pass_secure: db_pass_secure },
	            success: function (feedback) {
	                $(“#text”).html(feedback);
	            }
	        });
	    }
	});
	$(“.email_error_text”).hide();
	$(“.db_pass_secure_error_text”).hide();
	var error_email = false;
	var error_db_pass_secure = false;
	$(“#email”).focusout(function () {
	    check_email();
	});
	$(“#db_pass_secure”).focusout(function () {
	    check_db_pass_secure();
	});
	function check_email() {
	    $(“#message”).hide();
	    var pattern = new RegExp(/^([a-zA-Z0–9_\.\-])+\@(([a-zA-Z0–9\-])+\.)+([a-zA-Z0–9]{2,4})+$/);
	    if (pattern.test($(“#email”).val())) {
	        $(“.email_error_text”).hide();
	    } else {
	        $(“.email_error_text”).html(“Invalid Your email address”);
	        $(“.email_error_text”).show().addClass(“error”);
	        error_email = true;
	    }
	}
	function check_db_pass_secure() {
	    $(“#message”).hide();
	    var db_pass_secure_length = $(“#db_pass_secure”).val().length;
	    if (db_pass_secure_length < 8) {
	        $(“.db_pass_secure_error_text”).html(“Should be at least 8 characters”);
	        $(“.db_pass_secure_error_text”).show().addClass(“error”);
	        error_db_pass_secure = true;
	    } else {
	        $(“.db_pass_secure_error_text”).hide();
	    }
	}
});

redirect.php

include ‘config.php’;
    include ‘Database.php’;
    include ‘Session.php’;
    $db = new Database();

    if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’) {

    $email = $_POST[‘email’];
    $db_pass_secure = $_POST[‘db_pass_secure ‘]
    $email = strip_tags(mysqli_real_escape_string($db->link,trim($email)));
    $db_pass_secure = strip_tags(mysqli_real_escape_string($db->link,trim($db_pass_secure)));

    $query = “SELECT * FROM members WHERE email = ‘$email ‘“;
    $result = $db->select($query);

    if(mysqli_num_rows($result) > 0) {

    //Now email is matched we also need to verify db_pass_secure

    $data = mysqli_fetch_array($result);
    $db_pass_secure_hash = $data[‘db_pass_secure’];
    if ( db_pass_secure_verify($db_pass_secure ,$db_pass_secure_hash)) { 

    Session::set(“userId”, $data[‘id’]); 

        echo “window.location = ‘index.php’;”;
      }
    else{
        echo “‘Sorry Your Password is not matched”;
      }
    }
    else{
        echo “alert(‘Sorry Email is not matched’);”; 
     }
    }

Logout Page

<a href=”?action=logout” class=”btn btn-default btn-flat”>Sign out</a> 

header.php

include ‘Session.php’;
  Session::checkSession(); //Checking Session whether user logged in or not
  if (isset($_GET[‘action’]) && $_GET[‘action’] == “logout”) {
    Session::destroy();
  exit();
}

index.php

Checking Session whether user logged in or not

include ‘Session.php’;
Session::checkSession();   

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about login form validation using jquery in php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.