A Complete(-ish) Login System Using jQuery
- A Complete(-ish) Login System Using jQuery
- Creating Basic Functionality
- Adding JavaScript Validation
- Applying Ajax
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The adoption of Ajax over the past few years has been a tremendous boon to the user experience, and is yet another reason why today’s server-side PHP developer needs to be comfortable with client-side JavaScript programming. The easiest way to create reliable, dynamic JavaScript functionality is to use one of the many frameworks that are available. For this reason, in the 4th Edition of my PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide, I added a chapter introducing jQuery. That chapter explains the core jQuery concepts, using several different examples. In this article, I’ll completely flesh out a login system in that book, which uses Ajax.
Identifying the Goals
Before writing a single line of code, one ought to identify the goals of the project. In this particular case, the goal is to improve upon a simple login form that takes an email address and a password. Upon submission, the form data needs to be validated in two ways:
- The form should be checked so that a syntactically valid email address and some password were entered.
Moreover, the submitted values need to be compared against values previously stored in the database. If any errors occurred, those need to be reported to the user, giving him or her the opportunity to try again.
Ideally, the form should also be “sticky,” reflecting the original data (see Figure 1). If the user-provided data is correct, a session should be started and the user redirected to a page, or just back to the same page, with the logged-in status being reflected (see Figure 2).
)
Figure 1 The sticky login form, with error messages and highlighting.
)
Figure 2 The visible result upon a successful login.
Two aspects of this process require server-side PHP:
- Validation against the database
- Creation of the session
Conventionally, two other aspects would have been done in PHP, too:
- Basic form validation
- Redirection of the browser
With JavaScript alone, both of these last two steps can be accomplished without a need for PHP, thereby improving the user experience. When you add in Ajax, the first two steps can be executed in the background, unbeknownst to the user, further improving how the user interacts with the site. Therefore, the goal of this project, and of this article, is to use JavaScript for a smooth client-based user experience. But first…
To be more precise, the goal is more demanding than just using JavaScript for an enhanced experience. That’s easy enough to do. The bigger target is that all of the login functionality must still work reliably for any user with any browser or device. This may sound like an impossible goal, but it’s actually not. The key to pulling this off is an approach called progressive enhancement. Progressive enhancement is brilliant in its simplicity: establish the default behavior that will work universally, and then enhance that behavior for those browsers and devices that can support the enhancement. So to start, let’s get the basic behavior in place.