Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us

jQuery Ajax Login Script using PHP MySQLi

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

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

Contents

  • jQuery Ajax Login Script using PHP MySQLi
    • PHP MySQL CONNECT DATABASE
    • Creating the Database Table
    • Creating Function.js File
    • Read
    • Summary
    • Related posts

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

Also Read This 👉   Toggle Switch Button in VueJs Example

<?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.

Related posts:

  1. jQuery Ajax Secure Login Registration System in PHP and MySQL
  2. Vue.js Simple Login Script using PHP MySQLi Bootstrap
  3. Create Live Editable Table with jQuery AJAX using PHP MySQLi
  4. PHP login logout script with session Example
  5. Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP
Also Read This 👉   Learn Angular 5 from Scratch - angular 5 Tutorial
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

Advertise With Us

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

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

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (92) Education (61) Entertainment (130) fullform (86) Google Adsense (63) Highcharts (77) History (40) Hollywood (109) JavaScript (1359) Jobs (42) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1032) Mysqli (891) php (2127) Programming (2338) Python (98) Software (169) Software (88) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (145) Technology (2395) Tips and Tricks (121) Tools (210) Top10 (491) Trading (92) Trending (73) VueJs (250) Web Technology (106) webtools (192) wordpress (166) World (333)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

© 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites