Skip to content
  • Home
  • Blog
    • yttags
    • Youtube
  • Categories
  • Tools
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
  • JS
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us
Pakainfo

Pakainfo

Web Development & Good Online education

jQuery Ajax Login Script using PHP MySQLi

March 4, 2020 Pakainfo Technology, Ajax, jQuery, Mysql, Mysqli, php, Programming Leave a comment
Rate this post

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

Read Also:  Autocomplete Address Search Module Using Google API and 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

Free Live Chat for Any Issue

$(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

Read Also:  PHP CodeIgniter Login with Facebook Step By step

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

Read Also:  How to add Bootstrap Tooltip Plugin Example

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.

Download

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.

Related posts:

  1. Ajax Login System with jQuery PHP and MySQLi
  2. jQuery AJAX login and registration Form using PHP MySQLi
  3. jQuery Ajax Secure Login Registration System in PHP and MySQL
  4. jQuery AJAX Submit form serialize PHP MySQLi
  5. Vue.js Simple Login Script using PHP MySQLi Bootstrap
  6. Ajax Autocomplete Search using jQuery with PHP MySQLi
  7. Create Live Editable Table with jQuery AJAX using PHP MySQLi
  8. PHP login logout script with session Example
  9. jQuery Ajax GET & POST REQUEST Methods PHP MySQLi
  10. Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP
Ajax and JSON)Ajax Login Form Using jQueryAjax Login Script with jQueryBootstrapdesign login application using php and add essence of ajax in itjqueryjquery ajax login form submitjquery ajax login form validationlogin and registration form in php using ajaxlogin form using ajax and phplogin form validation using jquery in phplogin logout using jquery and ajaxmysqlphp ajax login form validationPHP and MySQLiPHP Login Script (PHPPHP Login Script Using MySQLi jQuery and AjaxPHP MySQL and BootstrapSimple PHP Login System Using MySQL and jQuery AJAX

Post navigation

Previous Post:PHP MySQL Connect Database Script
Next Post:PHP Laravel 6 SweetAlert jQuery Ajax Delete Rows Example

Search

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me
Cricday

Categories

3movierulz (48) Ajax (464) AngularJS (377) ASP.NET (61) Bollywood (92) Codeigniter (174) CSS (96) Earn Money (61) Education (53) Entertainment (108) fullform (77) Google Adsense (62) Highcharts (77) Hollywood (93) JavaScript (1354) Jobs (39) jQuery (1421) Laravel (1083) LifeStyle (50) movierulz4 (47) Mysql (1029) Mysqli (890) Node.js (38) php (2110) Programming (2320) Python (96) ReactJS (37) Software (102) Software (77) Stories (78) tamilrockers (88) Tamilrockers kannada (48) Tamilrockers telugu (47) Tech (102) Technology (2359) Tips and Tricks (107) Tools (112) Top10 (295) Trading (50) Trending (45) VueJs (250) Web Technology (83) webtools (129) wordpress (165) World (123)

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here

Web Development & Good Online education : Pakainfo by Pakainfo.
Top
Subscribe On YouTube : Download Source Code & New itsolutionstuck
We accept paid guest Posting on our Site : Guest Post Chat with Us On WhatsApp