Login Form Using Ajax and jQuery




Hi friends,
In the last post labeled under ajax category you learnt how to make user poll script using ajax and php.In this post we'll be creating an ajax login form using jquery and php.

This post contains five simple steps which are as below.

First of all we are creating database that contains the data of the registered users.To create the database just copy and paste the code given below in the step:1

Step:1 Create table - registered_users



CREATE TABLE IF NOT EXISTS `registered_users`(
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
)


Download Source

Now we have database of the users.Its time to create a login form through which user can login.Create file named index.php and copy paste the code of step:2.

Step:2 Create file - index.php


In index.php file we'll have the small login form through which user can enter Username and Password.Entered data will be checked against the correct credentials for the login if they are correct then user will be redirected to the next page.

Note: Here this file has little more code. So i can't write down here.You can download the full source from the given Download Links.

In the login form we are getting the values entered by the users and sending these data using ajax request and checking them against the credentials.Following file named login.php will perform the same checking and return the response based on the requested data.

Step:3 Create file - login.php

<?php 
session_start();

$username = $_POST['name'];
$password = md5($_POST['pwd']);
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "";
$mysql_db_database = "test";
$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password)
or die("Could notconnect database");
mysql_select_db($mysql_db_database, $con)or die("Could not select database");

$query = "SELECT * FROM registered_users WHERE name='$username' AND password='$password'";
$result = mysql_query($query)or die(mysql_error());
$num_row = mysql_num_rows($result);
$row=mysql_fetch_array($result);
if( $num_row >=1 ) { 
echo 'true';
$_SESSION['user_name']=$row['name'];
}
else{
echo 'false';
}
?>


After successfull login,user will be redirected to the given page url.Now when user clicks on the logout button session will be distroyed and user redirected to the main page.

Step:4 Create file - logout.php

<?php
 session_start();
 unset($_SESSION['user_name']);
 header('Location: index.php');
 ?>

To make the form lookwise little better simply add the below classes.You can add and customize as per your need.

Step:5 Create CSS file - styles.css

@charset "utf-8";
/* CSS Document */
.popup {
position: fixed;
width: 100%;
opacity: 0.9;
top:0px;
min-height:200px;
height:100%;
z-index: 100;
background: #FFFFFF;
font-size: 20px;
text-align: center;
display:none;
}

#login_form
{
position:absolute;
width:200px;
top:100px;
left:37%;
background-color:#aca1e3;
padding:10px;
border:1px solid #9f92e0;
display:none;
z-index:101;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 10px #aaa;
}

.green
{
background-color:#29db47;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#292229;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #9f92e0;
}

.green:hover
{
background-color:#72e893;
}

.green:active
{
position:relative; top:1px;
}

.red{
background-color:#fa232e;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
color:#292229;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #de9295;
}

.red:hover{
background-color:#f56a6a;
}

.red:active{
position:relative;
top:1px;
} 
Thats it..! Your Ajax Login form with jquery and PHP is Completed.If you have any question or query then please comment.


Download Source


Comments

Post a Comment

Popular posts from this blog

How to construct a B+ tree with example

Image
A B+ tree contains n-1 search key values K1K2…….Kn-1 and have n pointers.   In a B+ tree the data are ordered  sequentially.  The leaf node may hold up to n pointers and must hold at least N/2 pointers. The root node must hold at least two pointers, unless the tree consists of only one node.  Now we construct a B+ tree. Construct a B+ tree for the following set of key values: (2,3,5,7,11,17,19,23,29,31) Assume that the tree is initially empty and values are added in ascending order. Construct a B+ tree where the pointer number is Four. Solution: When a node exceeds n-1 search key value then we split it into two nodes. First node contains (ceiling(n-1)/2) values.  2 nd node contains remaining node. Copy the smallest search key value of the second node to the parent node. Let's start, we know each node has N pointer and has N-1 search key values. In our example pointer number is 4, so the search key value is 4-1=3. So each node has 4 pointers and 3 search key value. The first node i
Read more

How to show only month and year fields in android Date-picker?

Image
Android default DatePicker show day/month/year fields but you have to customize this DatePicker as your requirements. Suppose that you want to show only month and year fields in android datepicker . To do this, you have to customize the Dialog DatePicker source code but it is not an easy task. In this tutorial I will show you a tricky way to solve this problem. Lets see how to show only month and year field in android DatePicker as a dialog.   Step to show only month and year fields in android date-picker: Some days ago I got this same problem and here I am trying to explain this in a sequential manner. I want to show a dialog datepicker when user click on an EditText. So if user click on EditText, A dialog datepicker will be invocked and it will show only month and year fields. To do this, at first we have to create a xml layout to hold the EditText fields. So create an android project and name it DatePickerExample. In the main.xml file just try to write this simple code.  main.xml
Read more

Visitor Counter Script Using PHP

Image
If you have noticed that many websites display their total numbers of visitors.In this tutorial I am going to explain you how to create a simple visitor counter using php. For this, 1) Create one table called “visitor_counter” in your database. 2) Create file named “counter.php”. Step1: Creating “visitor_counter” Table CREATE TABLE `visitor_counter` ( `counts` int(10) NOT NULL default '0' ) Step2: Creating “counter.php” File <?php  // Database Details $host="localhost"; $username="root"; $password=""; $db_name="test"; $tbl_name="visitor_counter"; // Connect to server and select database. mysql_connect("$host", "$username", "$password")or die("cannot connect to server "); mysql_select_db("$db_name")or die("cannot select DB");  $sql="SELECT * FROM $tbl_name"; $result=mysql_query($sql); $rows=mysql_fetch_array($result); $counter=$rows['counts']; // se
Read more