A Complete(-ish) Login System Using jQuery
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