Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

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

Ajax Login System with jQuery PHP and MySQLi

October 10, 2018 Pakainfo Technology, Ajax, JavaScript, Mysql, Mysqli, php, Programming Leave a comment

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

Ajax Login System with jQuery PHP and MySQLi

Contents

  • Ajax Login System with jQuery PHP and MySQLi
    • Step 1 Create Ajax Login Form
    • Step 2 Database Detials
    • Step 3 configuration in Database
    • Read
    • Summary
    • Related posts

There are the Following The simple About Ajax Login System with jQuery PHP and MySQLi Full Information With Example and source code.

As I will cover this Post with live Working example to develop jQuery Ajax PHP MySQLi Login Form System, so the Simple Ajax Login form with jQuery and PHP for this example is following below.

Step 1 : Create Ajax Login Form

signin_form.php

<!DOCTYPE html>
<html lang="en">
   <head>
	  <title>Ajax Login form using PHP and MySQL</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
   </head>
   <body>
      <div class="container">
         <div class="card" style="margin-top:10%">
            <div class="card-header">
               Member Login
            </div>
            <div class="card-body">
            <div id="preview_err" class="alert alert-danger" style="display:none" role="alert"></div>
               <form name="signin_form" action="/signin.php"  id="signin_form" method="post">
                  <div class="gst form-group">
                     <label for="email">Member Email</label>
                     <input type="email" class="gst form-control" name="email" id="email" placeholder="Enter Member email">
                  </div>
                  <div class="gst form-group">
                     <label for="password">Password</label>
                     <input type="password" class="gst form-control" name="password" id="password" placeholder="Member Password">
                  </div>
                  <button type="submit" id="login" class="gst btn btn-success">Login</button>
               </form>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
   
      <script>
            $(function()
            {
                $('#login').click(function(e){
                    let self = $(this);
                    e.preventDefault();
                    self.prop('disabled',true); 
                    var data = $('#signin_form').serialize();
                    $.ajax({
                        url: '/signin.php',
                        type: "POST",
                        data: data,
                    }).done(function(res) {
                        res = JSON.parse(res);
                        if (res['status'])
                        {
                            location.href = "secure.php";
                        } else {
 
                            var loadErrMsg = '';
                            console.log(res.message);
                            $.each(res['message'],function(index,message) {
                                loadErrMsg += '<p>' + message+ '</p>';
                            });
                            $("#preview_err").html(loadErrMsg);
                            $("#preview_err").show();
                            self.prop('disabled',false); 
                        }
                    }).fail(function() {
                        alert("responseError");
                    }).always(function(){
                        self.prop('disabled',false); 
                    });
                });
            });
        </script>
   
   </body>
</html>

Step 2 : Database Detials

member table structure in your database

CREATE TABLE IF NOT EXISTS `members` (
  `member_id` int(11) NOT NULL AUTO_INCREMENT,
  `member_fname` varchar(255) NOT NULL,
  `member_lname` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`member_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2;
--
-- Dumping data for table `members`
--
INSERT INTO `members` (`member_id`, `member_fname`, `member_lname`, `email`, `password`, `created_at`) VALUES
(1, 'Jaydeep', 'PHP', '[email protected]', '$2y$10$8mVSGv/bIGgcvCik9825606241Ml3jqfiirtQG9909816257LG', '2019-10-12 18:09:10');

Step 3 : configuration in Database

Config.php

<?php
   define('DB_SERVER', 'localhost');
   define('DB_USERNAME', 'root');
   define('DB_PASSWORD', '[email protected]');
   define('DB_DATABASE', 'atmiya25');
   $db = new PDO('mysql:host='.DB_SERVER.';dbname='.DB_DATABASE, DB_USERNAME, DB_PASSWORD);
?>

signin.php

 <?php
  require_once('config.php');
 
   $responseError  = array();
   $res    = array();
 
        
        if(empty($_POST['email']))
        {
            $responseError[] = "Member Email field is required";    
        }
    
        if(empty($_POST['password']))
        {
            $responseError[] = "Member Password field is required";    
        }
        if (!empty($_POST['email']) && !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $responseError[] = "Member Enter Valid Email address";
        } 
         
        if(count($responseError)>0)
        {
            $results['message']    = $responseError;
            $results['status'] = false;    
            echo json_encode($results);
            exit;
        }
 
        $statement = $db->prepare("select * from members where email = :email" );
        $statement->execute(array(':email' => $_POST['email']));
        $row = $statement->fetchAll(PDO::FETCH_ASSOC);
        if(count($row)>0) {
           if(!password_verify($_POST['password'],$row[0]['password'])) {
                $responseError[] = "Member Password is not valid";
                $results['message']  = $responseError;
                $results['status']   = false;    
                echo json_encode($results);
                exit; 
           }
          session_start();
          $_SESSION['member_id'] = $row[0]['member_id'];
          $results['redirect']    = "home.php";
          $results['status']      = true;    
          echo json_encode($results);
          exit;    
       } else {
          $responseError[] = "Email does not match";
          $results['message']  = $responseError;
          $results['status']   = false;    
          echo json_encode($results);
          exit;    
     } 

secure.php

<?php
session_start();
if(empty($_SESSION['member_id'])){
   header('location: signin_form.php');    
} else {
   echo 'Secure page!.';
   echo '<a href="/signout.php">signout</a>';
}

signout.php

session_start(); 
session_destroy(); 
header('location: signin.php');

Angular 6 CRUD Operations Application Tutorials

Read :

  • Technology
  • Google Adsense
  • Programming
Also Read This 👉   array functions in php - PHP Array Functions with Examples

Summary

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

I hope you get an idea about Ajax Login System with jQuery PHP and MySQLi.
I would like to have feedback on my Pakainfo.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 Login Script using PHP MySQLi
  2. Secure Login System with PHP and MySQLi – login page in php
  3. jQuery Ajax Secure Login Registration System in PHP and MySQL
  4. Create Live Editable Table with jQuery AJAX using PHP MySQLi
Ajax Login Form Using jQueryAjax Login form using PHP and MySQLAjax Login Script with jQueryAjax Login Script with PHP and jQuerymysqlPDOphpphp and mysqlPHP MySQL and BootstrapSimple Ajax Login form with jQuery and PHPSimple PHP Login System Using MySQL and jQuery AJAX

Post navigation

Previous Post:CodeIgniter 3 PDF Generate Tutorial With Example
Next Post:Codeigniter Fullcalendar Example Tutorial From Scratch

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