How to create Ajax based Login Page in PHP is the question that is frequently asked. In this tutorial We’ll discuss how to create Ajax PHP Login Page with jQuery ui Shake effect. We’ll create a user table, Our Login form will post and check the values of username and password from User table. We’ll also create and destroy the session values. jQuery Shake effect shakes the element vertically/horizontally. We’ll create shaking effect just like WordPress.
It’s very simple and basic tutorial for beginners.
Create User Table
|
1 2 3 4 5 6 |
CREATE TABLE `users` ( `uid` INT(11) NOT NULL AUTO_INCREMENT , `username` VARCHAR(45) , `password` VARCHAR(100) , `email` VARCHAR(45) , PRIMARY KEY (`uid`)); |
To store user login records.
Required jQuery files for Login Page
|
1 2 3 |
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> |
We need 3 files for login page. jQuery, jQuery ui and jQuery ui CSS file. We need jQuery ui files for shake effects.
jQuery Code for Login Page
|
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 29 30 31 32 33 34 |
<script> $(document).ready(function() { $('#btnLogin').click(function(){ var username=$("#username").val(); var password=$("#password").val(); var dataString = 'username='+username+'&password='+password; if($.trim(username).length>0 && $.trim(password).length>0) { $.ajax({ type: "POST", url: "ajax_login.php", data: dataString, cache: false, success: function(response){ if(response) { $("body").load("welcome.php").hide().fadeIn(1500).delay(6000); window.location.href = "welcome.php"; } else { $( "#login-box" ).effect( "shake" ); //Shake Effect $("#login-error").html("<span style='color:#cc0000'><strong>Error:</strong></span> Invalid Username/Password. "); } } }); } return false; }); }); </script> |
We used $.ajax method of jQuery to check login information on Login button click event. If $.ajax receives any success response, It will redirect to welcome.php page, and in case of invalid username/password it shakes the login box and displays an error.
Login form on Login Page
|
1 2 3 4 5 6 7 8 9 10 |
<div id="login-box"> <form action="" method="post"> Username <input type="text" class="input" id="username"/> Password <input type="password" class="input" id="password"/> <input type="button" class="button button-primary" value="Log In" id="btnLogin"/> <div id="login-error"></div> </form> </div> |
It’s the basic login form.
Complete Login Page
create login.php page and paste the following code
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php session_start(); if(!empty($_SESSION['login_userid'])) { header('Location: welcome.php'); } ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Ajax PHP Login with jQuery Shake Effect by sharp-coders.com</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <script> $(document).ready(function() { $('#btnLogin').click(function(){ var username=$("#username").val(); var password=$("#password").val(); var dataString = 'username='+username+'&password='+password; if($.trim(username).length>0 && $.trim(password).length>0) { $.ajax({ type: "POST", url: "ajax_login.php", data: dataString, cache: false, success: function(response){ if(response) { $("body").load("welcome.php").hide().fadeIn(1500).delay(6000); window.location.href = "welcome.php"; } else { $( "#login-box" ).effect( "shake" ); //Shake Effect $("#login-error").html("<span style='color:#cc0000'><strong>Error:</strong></span> Invalid Username/Password. "); } } }); } return false; }); }); </script> </head> <body> <div class="container"> <div class="content"> <h3>Ajax PHP Login with jQuery Shake Effect by <a href="http://sharp-coders.com" target="_blank"> http://sharp-coders.com </a></h3> <div id="login-box"> <form action="" method="post"> Username <input type="text" class="input" id="username"/> Password <input type="password" class="input" id="password"/> <input type="button" class="button button-primary" value="Log In" id="btnLogin"/> <div id="login-error"></div> </form> </div> </div> </div><!-- end .content --> </div><!-- end .container --> </body> </html> |
Ajax Login Page
create ajax_login.php file and paste following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php include("config.php"); session_start(); if(isset($_POST['username']) && isset($_POST['password'])) { // Username $username=mysql_real_escape_string($_POST['username']); //Password $password=md5($_POST['password']); $result=mysql_query("SELECT * FROM users WHERE username='".$username."' and password='".$password."'"); if($result){ $num_rows=mysql_num_rows($result); if($num_rows == 1){ $row=mysql_fetch_array($result); $_SESSION['login_userid']=$row['uid']; echo $row["uid"]; } } } ?> |
It receives the posted information via $.ajax method on login.php and validate it from database. If login informations is valid it creates a session for that user.
Welcome Home Page
create welcome.php page and paste the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php session_start(); if(empty($_SESSION['login_userid'])) { header('Location: login.php'); } ?> <div class="container"> <div class="content"> <h1>Welcome to HomePage</h1> <p><a href="logout.php">Logout</a></p> </div><!-- end .content --> </div><!-- end .container --> |
Logout Page
create logout.php page and paste
|
1 2 3 4 5 6 7 8 9 |
<?php session_start(); if(!empty($_SESSION['login_userid'])) { $_SESSION['login_userid']=''; session_destroy(); } header("Location:login.php"); ?> |
It checks the session, if session is created it will destroy and redirect to login.php page
Database Connectivity Configuration Page
create config.php file and paste following:
|
1 2 3 4 5 6 7 8 |
<?php define('DB_SERVER', 'localhost'); define('DB_USERNAME', 'username'); define('DB_PASSWORD', 'password'); define('DB_DATABASE', 'database_name'); $con = mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD); $db = mysql_select_db(DB_DATABASE); ?> |
change values according to your database server.
