A Login page is one of the basic requirements when creating a registration based website where the user can register to the website and sign in to its account to manage.
In this case, you can use AJAX to create a user-friendly login page.
With AJAX you can directly check the entered username and password are correct or not in MySQL database without reloading the whole page.
If the user is registered then redirect the user to a home page otherwise display an error.
Contents
1. Table structure
I am using users
table in the tutorial example.
CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `name` varchar(80) NOT NULL, `password` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Configuration
Create a new config.php
file for the database connection.
Completed Code
<?php session_start(); $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }
3. HTML
Creating a simple login page which contains two input box for entering username and password.
A submit button to send AJAX request with jQuery on click.
Completed Code
<div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password"/> </div> <div> <input type="button" value="Submit" name="but_submit" id="but_submit" /> </div> </div> </div>
4. PHP
Create a new checkUser.php
file.
Check the $_POST
username and password values in the users
table.
If the query returns more than 0 value means the user exists in the table then initialize $_SESSION['uname']
variable with username and echo 1
.
If the query return 0 then echo 0
.
Completed Code
<?php include "config.php"; $uname = mysqli_real_escape_string($con,$_POST['username']); $password = mysqli_real_escape_string($con,$_POST['password']); if ($uname != "" && $password != ""){ $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'"; $result = mysqli_query($con,$sql_query); $row = mysqli_fetch_array($result); $count = $row['cntUser']; if($count > 0){ $_SESSION['uname'] = $uname; echo 1; }else{ echo 0; } }
home.php
When login user is valid then redirect the user to this page.
If the $_SESSION['uname']
variable is not initiated then redirect to index.php
webpage.
Created an anchor tag for logout.
Completed Code
<?php include "config.php"; // Check user login or not if(!isset($_SESSION['uname'])){ header('Location: index.php'); } ?> <!doctype html> <html> <head></head> <body> <h1>Homepage</h1> <br> <a href="logout.php">Logout</a> </body> </html>
Logout
Create a logout.php
file.
Destroy the SESSION and redirect to index.php
.
Completed Code
<?php // Destroy session session_destroy(); header('Location: index.php');
5. jQuery
On login button click send AJAX request where pass entered username and password as data.
Redirect to home.php
when the response is equal to 1 otherwise show error message on the screen.
Completed Code
$(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#txt_uname").val().trim(); var password = $("#txt_pwd").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'checkUser.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); });
6. Demo
Here, are some valid usernames – yssyogesh, bsonarika, vishal, vijay and all have the same password – 12345. View in a new tab.
7. Conclusion
AJAX login page saves time by not reloading the webpage on every wrong attempt and provides a better user-interface.
If you want to know how to create a register page then you can view the following tutorial.
If you found this tutorial helpful then don't forget to share.
Please Can you help me out, i am using your code exactly as is, with the same database.Though whenever iinsert the user name and password,eg sona 123456.It just comes up with the incorret username or password alert. Please could you kindly assist me.
Means you have created the tutorial database and users table. Inserted all 4 records in it.
I have created the database. All record are in it. Though it still says invalid username or password. Isn’t this program suppose to check if they record are present, and if they are. Then they can login.
Thanks for your login form example . Could u please give some example about the purchase or sales invoice which have the following fields. format.
ItemID Item Name Qty Rate Total
101 Item 1 5 3 15
102 Item 2 6 7 42
103 Item 3 7 8 56
Total Amount 113
The invoice should be in grid form and when i select item id then item name will automaticallly display from the database. The grid should contain edit,delete,save,search,print,csv,pdf format. Kindly resolve this problem immdeiately. both itemid and itemname should be autocomplete.
nice post…
is this session works on local server?
Yes, session works on the local server.
Could you give me the table structure, if the used sql is postgresql and not mysql.
Thank You
Hi Chitransh,
I don’t have the table structure for PostgreSQL.
I got the postgresql table figured out.Though there seems to be an issue in the AJAX part as it always seems to return incorrect username and password….is it due to echo that is being received by the AJAX code?
I rechecked the code it is working fine.
I use echo in AJAX file to return value to jQuery to execute an action according to value.
I want pure JavaScript coding.
Do not use JQuery code.
Please also include JavaScript code.
ThankYou,
For helping me
You’re welcome.
What’s going on with your Login Page?
When I input the data that you gave me to redirect it to home.php but I cannot see the word Hello World.Because I see that the file home.php you put the h1 tag with the text Hello World. What should I do now to display the text Hello World onto the server when I redirect it?
Thank you so mutch for sharing
You’re welcome.
please help below with a problem
thankyou
$(“#loginform”).submit(function(event){
//prevent default php processing
event.preventDefault();
//collect user inputs
var datatopost = $(this).serializeArray();
console.log(datatopost);
//send them to login.php using AJAX
$.ajax({
url: “login.php”,
type: “POST”,
data: datatopost,
success: function(data){
if(data.includes(“success”)){
window.location = “mainpageloggedin.php”;
}else{
$(“#loginmessage”).html(data);
}
},
error:function(){
$(“#loginmessage”).html(“There was an error with the Ajax Call. Please try again later.”);
}
});
});
I never comment on Blogs…But Thanku. This is the first time , I am commenting as your blog made my day……Thank u so much..GOD Bless you!!!
You’re welcome.
this code not support my page
Thanks for the great article. Really nice article and very clearly explained.
this approach with ajax is good and i managed to use it. i login using username, password and usertype…but i want to also parse the user’s firstname and lastname onto the destination page after login. i have so far not succeeded. any help?
You can store firstname and lastname on SESSION and read it after login or you can fetch data by username.
Hello, thanyou for this tut. Unfortunately I get this error when executing the login… Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given
Can you help please ?