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