Ajax login form using jQuery and PHP

In this tut, we will let to know about Ajax login form using jQuey and PHP. It’s simple and easy to integrate in your projects. By using the below script you can get the live Ajax login method. Simple ajax() by jQuery function is letting here to do this job. Simple and ready to use script. Let’s see,

Step1: library.php (For connect the host and the database)

Start the session here for global access

1 2 3 4 5

<?php session_start(); mysql_connect("localhost", "root", "") or die ("Oops! Server not connected"); // Connect to the host mysql_select_db("demo") or die ("Oops! DB not connected"); // select the database ?>Step 2: login.php (User Interface file and get the values from the user)

Step 2: login.php (User Interface file and get the values from the user)

NOTE: This page is little bit length to write here. You can download the source from below.
 In the above login.php you will get the username and password values entered by the user. And then simple POST that values to another checker.php file which I am going to explain below using ajax() function by jQuery.

Step3: checker.php (Check the user credentials and give the result)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<?php include 'library.php'; // include the library for database connection   /* Simple encryption and decryption for password */ function encrypt($string){     return base64_encode(base64_encode(base64_encode($string))); }   function decrypt($string){     return base64_decode(base64_decode(base64_decode($string))); }   if(isset($_POST['action']) && $_POST['action'] == 'login'){ // Check the action `login`     $username       = htmlentities($_POST['username']); // Get the username     $password       = htmlentities(encrypt($_POST['password'])); // Get the password and decrypt it     $query          = mysql_query('SELECT * FROM users WHERE username = "'.$username.'" AND password = "'.$password.'" '); // Check the table with posted credentials     $num_rows       = mysql_num_rows($query); // Get the number of rows     if($num_rows <= 0){ // If no users exist with posted credentials print 0 like below.         echo 0;     } else {         $fetch = mysql_fetch_array($query);         // NOTE : We have already started the session in the library.php         $_SESSION['userid']         = $fetch['id'];         $_SESSION['username']   = $fetch['username'];         echo 1;     } } ?>

This page is making the PHP role in this Ajax login script. Simple login.php will send the values to this page and this page will return the result for the request.
Here we used the logic is,
Get the username and password values,

1. Encrypt the password value. In this script I have used simple base64_encode() to  encrypt the users password.
2. Check with the database table and return the result.
3. If the mysql_num_rows() returns greater than 0 means it’s a valid user so we will start the session and print a positive result like 1.
4. If mysql_num_rows returns 0 means its an invalid user or the credentials are wrong. So we will print here a negative result.

Depends on the checker.php file result login.php file will do the proper action like redirect to the secured user page or shows authentication failed message.

Step 4: logout.php (To end the user session)

1 2 3 4 5 6 7

<?php include 'library.php'; session_destroy(); unset($_SESSION['userid']); unset($_SESSION['username']); echo '<script type="text/javascript">window.location = "login.php"; </script>'; ?>

The above page is using for destroy the sessions and logout the user from the page.
I prefer JS redirect for application developed by core PHP for avoid 'header already sent' error.
On each page we have checked is the session is valid or not. So, we can prevent users to visit secured page without session. View a demo of this script and download this ready to use ajax login script from below.