Posted on August 17, 2008 - by webmaster
PHP ajax login form using Jquery
Because a lot of responses to the previous post php ajax tutorial create ajax based login form using jquery, and asking about some bug fixxing incl IE bugs, i decide to create a new PHP ajax login functionality using Jquery, and here it is…
Whats new?
- Completely recoded
- Tested in IE6, FF3, Opera9 and i think should be worked in other modern browsers as well
- Easliy switch the data source between database and PHP array
- Login authentication can be using username or email, or even both of ‘em by changing the config
- Automattic redirection could be done within the javascript config
- Redirect target (on success) can be changed in config file
- Message and Text controled by array variable which could be changed in 1 file
dependency:
- Jquery 1.2.3, never tested with the prior version
- PHP5, If you running prior version then you need to make some changes, probably but not limited at class constructor to make it compatible with your PHP version.
How to?
- Switch the data source : Turn the value of USEDB constant in login.config.php into true, and modify the db_config array values as needed, to use array vars turn it false and modify the user_config array values
- change the authentication method : change the LOGIN_METHOD constant value, possible values:
- user : match the username and password
- email : match the user email and password
- both : match the username or user email and password
- switch automattic redirection : turn the value of autoRedir var in login.js to true
- change the redirect target : change the value of SUCCESS_URL constant in login.config.php, for example you need to automatically redirect to user profile, so change it into “index.php?profile=”.$_SESSION['exp_user']['username']
- change error message and text : change the array values accordingly at login.lang.php
Notes:
- Thanks to John resig and the jquery developer team, thanks guys you made my life easier
- Please do not link to the download file directly, link to this page instead
- This script is absolutely free, credits nor link is not required but will be great if this site got ‘em
Demo & Download
- The demo available here use admin|admin@localhost|123456 as the test account
- Download the source again please do not link to the file directly, link to this page instead.
SQL
CREATE TABLE `tbl_user` ( `userid` integer (11) NOT NULL AUTO_INCREMENT , `username` varchar (50) NOT NULL, `useremail` varchar (100) NOT NULL, `userpassword` varchar (50) NOT NULL, PRIMARY KEY (`userid`) ) TYPE=MyISAM CHARACTER SET utf8 COLLATE utf8_general_ci; BEGIN; INSERT INTO `tbl_user` (`userid`, `username`, `useremail`, `userpassword`) VALUES(1, 'admin', 'admin@chazzuka.com', 'e10adc3949ba59abbe56e057f20f883e'); INSERT INTO `tbl_user` (`userid`, `username`, `useremail`, `userpassword`) VALUES(2, 'user', 'user@chazzuka.com', 'e10adc3949ba59abbe56e057f20f883e'); COMMIT;
The Jquery file can be downloded at jquery.com If you found something doesnt work as expected just let me know.
Update
Bug in google chrome beta which reported by Azo has fixed, the problem is caused by 2 byte chunk data in ajax JSON response which makes the response not valid JSON format, those chunks produced by files which include (required) in login.post.php (“login.lang.php” & “login.class.php”).
Now worked in IE6+, FF 2+, Opera 9+, Safari 3+ (for windows), Google Chrome beta
This entry was posted on Sunday, August 17th, 2008 at 00:32 and is filed under Ajax, Freebies, Programming, Tutorials, Web 2.0. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
80 Comments
We'd love to hear yours!
Leave a Comment
Here's your chance to speak.
-
Most Popular Posts
Visit My Website
August 17, 2008
Permalink
[...] have update the php ajax login to fix some bugs that exists, can be found here. Bookmark [...]
Visit My Website
August 21, 2008
Permalink
I’m such a huge fan of Jquery, it’s been a blessing in disguise of us on many a project.
Visit My Website
August 27, 2008
Permalink
how to set the session limit?
Visit My Website
September 1, 2008
Permalink
Hi, I just uploaded all this to my test site. All I get is a loading …. message in the upper left corner. When I debug this, I notice it never steps into the $.getJSON(postFile, function(data){ ….. code of the login.js file. I also had to include the jquery.js file in the root of the dir as it was not in the download file. Any suggestions? Thanks, Craig.
Visit My Website
September 1, 2008
Permalink
@apex
you could find the answer at http://www.captain.at/howto-php-sessions.php, provides a great tutorial dealing with php session along with sample codes.
@craig
it is never reach? or never return correct data?, try to use firebug to trace the error, it is important to ESCAPE the returned data including the HTML FORM because it will be proccessed through javascript.
Visit My Website
September 1, 2008
Permalink
Thanks demonita,
You are right, there is something wrong in the return data. The file that gets loaded on the getJSON call is: login.post.php.
Near the top of that file are these lines:
require(‘login.config.php’);
require(‘login.lang.php’);
require(‘login.class.php’);
It is corrupting the return data when it includes the login.class.php file. If I comment out lines this login.class.php file, it fails on the first public function statement (all of them actually).
Does anyone have any ideas? My server is using PHP ver. 5.2.5.
Thanks for your help,
-Craig.
Visit My Website
September 2, 2008
Permalink
@craig
if you comment out the class include statement, you loose all functionality required in the server process, is there any error message as guidelines?, again use firebug to track the response data to see the error message, also the simple thing make sure VALID_ACL_ is defined.
Visit My Website
September 2, 2008
Permalink
Understood, I was commenting things out to see where they fail. I will try firebug later today.
Visit My Website
September 2, 2008
Permalink
Still not working for me demonita. I installed firebug but do not know how to use it well enough to make any sense of anything. I know from my previous debugging efforts there is something wrong when $.getJSON call includes that class file. Also, you are missing a jquery.js file from rar file.
Visit My Website
September 2, 2008
Permalink
Here’s an error if you’re interested:
Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIWebNavigation.loadURI]” nsresult: “0×80070057 (NS_ERROR_ILLEGAL_VALUE)” location: “JS frame :: chrome://global/content/viewSource.js :: viewSource :: line 156″ data: no]
Visit My Website
September 3, 2008
Permalink
Thats not the correct error message i think, well you need to verify the returned data, do not use ajax first let the form submitted in normal HTTP POST and see if it is works.
if it is worked then you may have “NOT JS SAFE” data format, or you can send me your codes.
Visit My Website
September 3, 2008
Permalink
Demonita, all I did was download your code and upload to my server. Here’s the link below. I know that the repsonsse is bad from getJSON, but my point is, I have not changed the code. Also, as I have explained, the jquer.js file is not included in the rar file. I had to download my own, I could not get the 1.2 ver. Do you think this is the problem. Here’s the link:
http://www.craigdobson.com/aba/php/portal/src/login.html
Visit My Website
September 4, 2008
Permalink
@Craig
you stated uyour server running PHP 5.2.x, but here the error saying that you are running old version of PHP
syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR
Thats the error i found, thats is because the access modifier at login class not recognize by prior PHP version
Visit My Website
September 4, 2008
Permalink
Thanks demonita. I removed the access modifiers and it works! My provider claims php 5.2.5 is installed. I’ll check with them to make sure this is indeed the case. Thank you very much for the help. –Craig
Visit My Website
September 9, 2008
Permalink
I’ve tried the demo 9http://www.chazzuka.com/experiments/php-ajax-login/login.html) using Chrome browser, “loading” text seems forever & the login form never load.
Visit My Website
September 9, 2008
Permalink
yes you’re right, but unfortunately i didnt know how to javascript debugging in chrome as i used firebug in FF
and dont forget it is still in beta version, but i will try to investigate further this issue
Visit My Website
September 9, 2008
Permalink
Tested well in :
FF 3, IE6, IE7, Opera 9+, Safari for Windows 3.1+
Still Failed in Google Chrome Beta
Visit My Website
September 17, 2008
Permalink
That SQL file:
1.
CREATE TABLE `tbl_user`
2.
(
3.
`userid` integer (11) NOT NULL AUTO_INCREMENT ,
4.
`username` varchar (50) NOT NULL,
5.
`useremail` varchar (100) NOT NULL,
6.
`userpassword` varchar (50) NOT NULL,
7.
PRIMARY KEY (`userid`)
8.
) TYPE=MyISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
9.
10.
BEGIN;
11.
INSERT INTO `tbl_user` (`userid`, `username`, `useremail`, `userpassword`) VALUES(1, ‘admin’, ‘admin@chazzuka.com’, ‘e10adc3949ba59abbe56e057f20f883e’);
12.
INSERT INTO `tbl_user` (`userid`, `username`, `useremail`, `userpassword`) VALUES(2, ‘user’, ‘user@chazzuka.com’, ‘e10adc3949ba59abbe56e057f20f883e’);
13.
COMMIT;
where can i make that?
And is that jquery the same as that sql file?
Visit My Website
September 17, 2008
Permalink
okey, the jquery is okey now. But how can i make that sql file?
Visit My Website
September 17, 2008
Permalink
@Rick
Simply create a database in your mysql server, then copy paste those SQL command in the query browser or SQL command line. if you’r using PHPMyAdmin then it would be easy.
Visit My Website
September 21, 2008
Permalink
#Azo
Bug at google chrome beta has fixed, no worked in IE6+, FF 2+, Opera 9+, Safari 3+, and Google Chrome.
Visit My Website
October 12, 2008
Permalink
Tutorial yang bagus sekali chazzuka…Acung jempol buat Anda!
Visit My Website
October 17, 2008
Permalink
Great script – newbie question… is it possible to show the user that is currently logged in?
Visit My Website
October 17, 2008
Permalink
Great tutorial! Is it possible to show the current logged in user after they successfully login?
Visit My Website
October 17, 2008
Permalink
I’d suggest using session cookies instead of sessions, as they are much more secure.
Visit My Website
October 21, 2008
Permalink
Okay, i got it working, but what about profiles? cause u said something up above about redirecting to a profile, or was that an example. And how do u register? or make new accs? Cause i’m so confused.
Email: badblindboy13@comcast.net
Please help =(
Visit My Website
November 12, 2008
Permalink
Can you help me out with whatever changes need to be made for PHP 4.4.1?
I don’t understand what “craig” did above to fix this problem.
stupid webhost has older version running.
thanks!
Visit My Website
November 19, 2008
Permalink
I’m also facing a problem with the host running PHP < 5, any tips would be great.
Thanks!
Visit My Website
November 20, 2008
Permalink
@Steve
In the login.class.php, change the properties to var instead of private and delete all the public and private keywords in the methods in that file.
My problem now is that I get a redirect loop.
Visit My Website
November 25, 2008
Permalink
WebKit sucks parsing Dynamic XML, I had ‘parererror’ problem and I found it was because Gzip…
The SOLUTION in PHP, add the fallowing code in your PHP code:
header(‘Content-Type: application/xml’);
ob_start(‘ob_gzhandler’);
another problem reasons could be that your dynamic XML is not a real XML, my advice for tests:
Use Firefox and Firebug
save your dynamic XML in the same dir where is your dyamic one
open both, the dynamic and the saved on firefox
check if the headers look the same
good luck.
Visit My Website
December 3, 2008
Permalink
Demonita,
The login doesnt work on firefox 3.0.4
Help please!
Visit My Website
December 15, 2008
Permalink
Wow it is cool and very estetic. Thanks you my friends. This is very nice and usefully. Thanks again.
Visit My Website
December 16, 2008
Permalink
works fine here…
Visit My Website
December 21, 2008
Permalink
Thanks for this great script it works perfectly and looks very good!
I was just wondering if you know how to display the username once logged in … I tried using but to no avail… Thanks!
Visit My Website
December 21, 2008
Permalink
hum… the code in my previous post didn’t show up it was : echo $_SESSION['user'];
Visit My Website
December 23, 2008
Permalink
hello am looking for this kind of login form but the idea is i want it to show when the user click on a button to load to another page and this login form shows as a popup could it happend ?? am new in web dev any help please.
Visit My Website
January 1, 2009
Permalink
hi…… bali web designer
I love your tutorials, you looks likely a cool coder
Thanks for share, Your form login is really usefull
Keep rock and roll \m/
Visit My Website
January 8, 2009
Permalink
Its a great script. Thanks.
Can you please tell me how to set different user levels? I mean for ‘admin’ full access is available but for ‘user’ only selected feature of the website is available.
Regards,
MZ
Visit My Website
January 16, 2009
Permalink
having trouble with the redirect. i am trying to use the example above. For some reason the php is broken when i try to use the following:
define(‘SUCCESS_URL’, “index.php?id=”.$_SESSION['exp_user']['username']);
I am using email instead of username to validate -
but this doesn’t work either
define(‘SUCCESS_URL’, “index.php?id=”.$_SESSION['exp_user']['email']);
in fact i can not use any of the _SESSION variables in there and have the page load.
any ideas?
Visit My Website
January 17, 2009
Permalink
Ok I figured this one out. Instead of appending querystring data which could be insecure, i decided to try to just call the session variables on the index.php page.
$Profile = $_SESSION['exp_user']['ID'];
With the exp_user variable any field in your user table is accessable. Very nice!
Just a confirmation that I could not get it to work on the Querystring but I think this is a much better method.
Hope this helps someone!
Visit My Website
January 20, 2009
Permalink
Hi! The script works OK, but I can’t create new users and modifiy passwords. What encriptation is? I need help. Thank you.
Visit My Website
January 27, 2009
Permalink
@41 simple md5 encryption
Visit My Website
January 29, 2009
Permalink
hi : when a reeplace the SUCCESS_URL …
define(‘SUCCESS_URL’, ‘“index.php?profile=”.$_SESSION['exp_user']['username']‘);
Parse error: syntax error, unexpected T_STRING in login.config.php on line 15
_______________
i need a especific page for a couple users . tnx
Visit My Website
January 29, 2009
Permalink
You put the wrong single quotes
define(“SUCCESS_URL”, “index.php?profile={$_SESSION['exp_user']['username']}”);
Visit My Website
January 30, 2009
Permalink
Komang, still wrong the same problem with parse error, i dont know why … ??? =(… another solution only i have a one admin and 5 users specials … ty
Visit My Website
January 30, 2009
Permalink
post here your line 15 of login.config.php
Visit My Website
January 31, 2009
Permalink
my line 15:
define(“SUCCESS_URL”, “index.php?profile={$_SESSION['exp_user']['username']}”);
ok no problem with parse error,
but when I try to access the login page, this gets the message “loading” and does not disappear… why ??
Visit My Website
January 31, 2009
Permalink
when i remove ::::: {$_SESSION['exp_user']['username']} ::: in login.config.php …works fine and load the login page, but links to index.php?profile=… how can i modify this for work with a user especific.. on session ?
Visit My Website
January 31, 2009
Permalink
use firebug to track the response, thats the easiest way to know what is going on.
Visit My Website
February 3, 2009
Permalink
please help, trying to show the current logged in user however keeps coming up blank…
echo $_session['exp_user']['userID'];
echo $_session['exp_user'];
echo $_session['exp_user']['username'];
Visit My Website
February 5, 2009
Permalink
is your session already started? and PHP is case sensitive $_SESSION['exp_user']['username'];
Visit My Website
February 6, 2009
Permalink
Hi, great job! thanks to share it. Please, Can you put some working example for PHP 4.4.2. I can’t do to working on my site. I’ll hope you can help us, many that have php4 on our hosting server
Visit My Website
March 5, 2009
Permalink
I have been trying to download the source code.. but i am not able to do so… have you removed the file ? looking forward to hear from you. and receive the source code
Visit My Website
March 6, 2009
Permalink
Hello Bali, i dont find the code source file, “page not found”
thanks
Visit My Website
March 14, 2009
Permalink
source re-uploaded, sorry for the inconvenient
Visit My Website
March 19, 2009
Permalink
Thanks for the example, very nice!
I have a problem tho, or maybe question: when loading a login-form like this it doesn’t seem the brower can use saved username/password?
Visit My Website
April 6, 2009
Permalink
[...] 4. PHP ajax login form using Jquery [...]
Visit My Website
April 7, 2009
Permalink
If you are getting only a “Loading…” box and the form doesn’t appear, use Firefox and get Firebug. Open Firebug on your login.html page and go to the “Console” tab. Turn on script support, and go back to the console tab. Click the plus sign next to the “GET” element. If you are receiving the — parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR on line 15 error, remove the word “public” before each “function” declaration. This should resolve your issue.
Visit My Website
April 25, 2009
Permalink
I have change the table from the original tbl_user to wp_users from wordpress, but i can’t login to them .. can you help me..
I also change the table the name of table in wp and the row…
please help me
Visit My Website
April 27, 2009
Permalink
I need some help. What should i need to do if i want to login someone with email only not password. I want to create a system in which there is a email list already in database. I need to remove the password text field.
Visit My Website
May 14, 2009
Permalink
Wonderful.
Just wondering, if we can add some security check if user fails to authenticate in some tries, (Eg. we can show captcha if user enters wrong password/username 5 times)?
That will be so wonderful.
Visit My Website
May 17, 2009
Permalink
[...] Site: http://www.chazzuka.com/blog/?p=82 [...]
Visit My Website
May 29, 2009
Permalink
i have seen your demo that is quite impressive but there is some problem in source code
i have made changes in config file and also changed the redirecting url but its not working
even it is not showing the login form and loading message
Visit My Website
June 28, 2009
Permalink
Hi, can someone provide detail explanations on how the got it to work? I get the following error messages through Firebug:
Warning: session_start() [function.session-start]: open
(/var/php_sessions/sess_2d2d7357a7e8b879be98a9e6a16c819a, O_RDWR) failed: No such file or directory
(2) in /hermes/bosweb/web021/b213/d5.DIRECTORY/files/login.post.php on line 15
Warning: session_start() [function.session-start]: Cannot
send session cookie – headers already sent by (output started at /hermes/bosweb/web021/b213/d5.DIRECTORY
/files/login.post.php:15) in /hermes/bosweb/web021/b213/d5.DIRECTORY/files/login.post.php on line
15
Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started
at /hermes/bosweb/web021/b213/d5.DIRECTORY/files/login.post.php:15) in /hermes/bosweb/web021/b213/d5
.DIRECTORY/files/login.post.php on line 15
{’status’:false,’message’:'Username/E-mail:Password
‘}
Warning: Unknown: open(/var/php_sessions/sess_2d2d7357a7e8b879be98a9e6a16c819a, O_RDWR) failed
: No such file or directory (2) in Unknown on line 0
Warning: Unknown: Failed to write session data (files). Please verify that the current setting
of session.save_path is correct (/var/php_sessions) in Unknown on line 0
Please help! Or feel free to send me an email at njoay@netscape.net
Visit My Website
June 28, 2009
Permalink
Hi,
I get the following error messages from Firebug. If anyone can help me figure them out, I’d really appreciate it. The login page just hangs at loading…
Warning: session_start() [function.session-start]: open
(/var/php_sessions/sess_52e765c237aeeaebed34d690362d49d2, O_RDWR) failed: No such file or directory
(2) in /hermes/bosweb/web021/b213/d5.DIRECTORY/files/login.post.php on line 15
Warning: session_start() [function.session-start]: Cannot
send session cookie – headers already sent by (output started at /hermes/bosweb/web021/b213/d5.DIRECTORY
/files/login.post.php:15) in /hermes/bosweb/web021/b213/d5.DIRECTORY/files/login.post.php on line
15
Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started
at /hermes/bosweb/web021/b213/d5.DIRECTORY/files/login.post.php:15) in /hermes/bosweb/web021/b213/d5
.DIRECTORY/files/login.post.php on line 15
{’status’:false,’message’:'Username/E-mail:Password
‘}
Warning: Unknown: open(/var/php_sessions/sess_52e765c237aeeaebed34d690362d49d2, O_RDWR) failed
: No such file or directory (2) in Unknown on line 0
Warning: Unknown: Failed to write session data (files). Please verify that the current setting
of session.save_path is correct (/var/php_sessions) in Unknown on line 0
Visit My Website
July 16, 2009
Permalink
the above given example is really good and helpful for the developers.
I heard that now-a-days the database is not created and all the database is maintained through XML so is it also possible in PHP and if yes hen how can i implement in php?
Visit My Website
August 6, 2009
Permalink
Great post! Just wanted to let you know you have a new subscriber- me!
Visit My Website
August 21, 2009
Permalink
I have put all the files in my localhost, created an sql database and dump the sql but nothing loads in my form, only show up a red bar and the square where was supposed to show up the form.
Please help, thanks
Visit My Website
August 21, 2009
Permalink
solved, downloaded the last version of jQuery
Visit My Website
October 1, 2009
Permalink
HI.
Why the script dont accept ccs styles in google chrome 3.0.195.21?
In FF and IE its works correctly, but in chrome don´t.
Thanks, and Congratulations, very cool script!
Visit My Website
October 5, 2009
Permalink
Delicious post! Just wanna let you know you have a new subscriber – me! Can’t wait your next post..
Visit My Website
October 5, 2009
Permalink
I downloaded the source and I can’t find the ”
the jquery.js wasn’t in the folder
my website is http://www.danhannigan.co.uk – as you can see it doesn’t work.
Visit My Website
October 5, 2009
Permalink
I’ve got the jquery downloaded but still all it says is Loading… I am using PHP 5.2
http://www.danhannigan.co.uk – any help?
Visit My Website
October 10, 2009
Permalink
hello,
I have problem with script, I have always loading window in right corner and I don’t have html input username and password. I create database and add my user and password too login.config.php and I set USEDB to true, I have jquery file. If I have define(‘SUCCESS_URL’, ‘index.php’); I have this error message in firebug:
ďťż{’status’:false,’message’:'Username/E-mail:Password’}
If I change too define(‘SUCCESS_URL’, ‘index.php?profile={$_SESSION['exp_user']['username']}’); I have this message:
Parse error: syntax error, unexpected T_STRING in /var/www/src/login.config.php on line 16
What I can do with this? Please help me!
Visit My Website
November 17, 2009
Permalink
I had the Problem that your scipt didn’t work in Firefox.
I figured out that the login.post.php
returned Json with an wrong not jquery complient charset. I’ve added header directive to login.post.php
header(‘Content-Type: text/plain; charset=utf-8′);
now jquery is able to read the Json data.
I dont know how the php interpreter figures out which character set to use,
but in my case it was not the one I’ve needed.
thanks for the tutorial
great job
Visit My Website
December 9, 2009
Permalink
Doesn’t work for me and got some error
Parse error: syntax error, unexpected T_STRING in /var/www/src/login.config.php on line 16,recently got a problem also with the js but I downloaded the latest jquery package and it was solve.
Anyway found something related http://www.phpstring.co.cc/ajax-login-module/
And I’m currently using that.
But thanks a lot anyway.
Visit My Website
December 18, 2009
Permalink
Thanks A lots Good one
Visit My Website
December 22, 2009
Permalink
[...] Demo Tutorial Posted in ajax | Tags: ajax, jquery, login, php « Asynchronous Comments with [...]
Visit My Website
January 5, 2010
Permalink
creative one.Just keep running..
Visit My Website
January 16, 2010
Permalink
worked only in IE
not work in Opera 10, FF 3.5.5
maybe problems in prototype?