Ajax PHP Login with jQuery Shake effect

July 10, 2014 // In: PHP

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.

ajax php login with jquery ui shake effect


Create User Table

To store user login records.

Required jQuery files for Login Page

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

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

It’s the basic login form.

Complete Login Page

create login.php page and paste the following code

Ajax Login Page

create ajax_login.php file and paste following code

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

 Logout Page

create logout.php page and paste

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:

change values according to your database server.

Download Source Code

Send Mail using PHP
Create Captcha Verification in PHP