ajax login with php
ajax login with php
Let us check how to create ajax login with php.
Now a days i sow so many sites that are using ajax in login forms.
Here i’m not dealing with any security related think in login. We can discuss those things in some other post.
So let us start creating ajax login with php.
Firstcreate a table where we need to store user information.
CREATE TABLE IF NOT EXISTS `users` ( `user_id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; INSERT INTO `users` (`user_id`, `username`, `password`) VALUES (1, 'test1', '123');
Next is the html part. Here at on click of the submit button, a javascript function ‘chk_ajax_login_with_php’ is called.
Which will send ajax request to server.
<script src="jquery.min.js"></script>
<script>
function chk_ajax_login_with_php(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var params = "username="+username+"&password="+password;
var url = "login.php";
$.ajax({
type: 'POST',
url: url,
dataType: 'html',
data: params,
beforeSend: function() {
document.getElementById("status").innerHTML= 'checking...' ;
},
complete: function() {
},
success: function(html) {
document.getElementById("status").innerHTML= html;
if(html=="success"){
window.location = "test.php"
}
}
});
}
</script>
<link rel="stylesheet" href="style.css">
<body>
<div id='logindiv'>
<label>Username:</label>
<input name="username" id="username" type="text">
<label>Password:</label>
<input name="password" id="password" type="password">
<input value="Submit" name="submit" class="submit" type="submit" onclick='chk_ajax_login_with_php();'>
<div id='status'></div>
</div>
Next is the php part. here we will check the user name and password. if information is correct we will set a session and sent a success message.
If information is incorrect we will sent a failure message.
include "dbconnect.php";
if($_POST){
$username=$_POST['username'];
$password=$_POST['password'];
$sql=mysql_query("select * from users where username='$username' and password='$password'");
$res=mysql_num_rows($sql);
if($res>0){
$rs_login=mysql_fetch_assoc($sql);
$uid=$rs_login['user_id'];
$_SESSION['sess_uid']=$uid;
echo "success";
}else{
echo "invalid username or password";
}
}
So like this you can easily create an ajax login with php
Download Labs
About Author
Becareful with security ! This example is a good example of security holes.
1 – Information are not secured when sending datas to the login.php. Someone sniffing the network can get the password in clear
2 – In the login.php, there is not protection against SQL injection.
@titchagcreation I put this example only for those who don’t have the knowledge of how the ajax login is working using php and javascript. So i didn’t create an ultimate php/ javascript that have all the security loopholes closed.
Let us discus how sql injection and sniffing works and how to protect our website from these things in another post. Thanks for your comment…
I have created a correct mySQL table, and downloaded your code, but no matter what I do, the status never changes from “checking…” No matter if I enter correct or incorrect info, it always stays the same.
I do understand mySQL and PHP queries, and I have made a correct DBconnect.php file which accesses my DB.
What could I be doing wrong?
I don’t really know what was happened with you. But this simple code should work properly.
Check you created a working dbconnect.php like
After that try to find where your code is stopping. Better to download firebug plugin for Mozilla. it will help you to view the ajax requests in detail.
Also try to echo or print the results in login.php and check it is working properly.
Hop this will help you.