- A Complete(-ish) Login System Using jQuery
- Creating Basic Functionality
- Adding JavaScript Validation
- Applying Ajax
Creating Basic Functionality
In order to meet the requirement that the form be sticky, even in its non-dynamic implementation, the same page must both display and handle the HTML form. I’d normally call this page login.php, but in this case, it’ll be just index.php, as the same page will either display the login form or another bit of content, depending upon whether the user is logged in or not (see Figures 1 and 2). Making the form sticky and displaying errors inline makes the code slightly more complicated, but the end result is thoroughly professional. I’ll walk through the key components of the PHP script, but you should download all of the source code and view this file in order to get a full sense of context.
The page begins with a PHP block. This is necessary, as PHP begins a session, which must be done before any HTML is sent to the web browser. The PHP block then checks for a form submission:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
and validates the submitted data:
if (isset($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { $e = $_POST['email']; } else { $errors['email'] = true; } if (isset($_POST['password']) && !empty($_POST['password'])) { $p = $_POST['password']; } else { $errors['password'] = true; }
For each element, if it passes simple validation, the value is assigned to a local variable for later use. If not, a new element is added to the $errors array. If your site has more stringent requirements for the user password, you could use that test here instead.
As the last step in the validation process, if there were no errors, you would query the database to confirm that the submitted values match those previously registered. To simplify this example a bit, and to not tie this code to a specific database table, I’m just comparing the submitted values to hardcoded ones here:
if (empty($errors)) { // Check the database! if ( ($e == 'email@example.com') && ($p == 'testpass') ) { $_SESSION['user'] = true; } else { $errors['incorrect'] = true; } }
If the values were right, the user’s information could be added to the session. If not, another error element is created. And that’s it for the validation.
Later on in this page, within the HTML body, either the login form or some user-specific content will be shown, depending upon the presence of the session variable:
if (isset($_SESSION['user'])) { // Show logged-in content. echo '<h1>Welcome</h1><p>Welcome back, user!</p>'; } else { // Show login form. }
The login form itself is a bit messy, just because it needs to be sticky and show error messages. Here’s the start of it; see the downloadable script for the complete code:
// Start the form: echo '<div id="flexArea"><h1>Login</h1> <form action="index.php" method="post" id="loginForm">'; // Check for a general error: if (isset($errors['incorrect'])) { echo '<p class="error">The email address and password submitted do not match those on file.</p>'; } // Start the email input: echo '<p id="emailP">Email Address: <input type="text" name="email" id="email"'; // Make it sticky, if applicable: if (isset($_POST['email'])) echo ' value="' . $_POST['email'] . '"'; // Complete the input: echo ' />';
And that concludes all of the basic functionality. In terms of progressive enhancement, the only thing different about this HTML and PHP code is the use of unique id values for elements that may be referenced in JavaScript. This includes the form elements, the surrounding paragraphs, the form itself, and the div encasing the form.