Section 11.3. Extending the Login Form

11.3. Extending the Login Form

With some basic formatting, we now have an AJAX login form that easily meets the needs of pages that need a login. However, in the case of a blog, you usually want to load some profile information into the current page as well. To do this, we need to make some data available to the rest of the site and update the login form. The Comment section of my blog is shown in Figure 11-4; you can see that we also want to load the user's name, email address, and Web site. On some sites, you might hide these fields after a login because the values from the user's profile will be used, but we will just update these fields directly, allowing the user to change the information for this post.

Figure 11-4. Comment form from my blog

From a user interface standpoint, this form will be easy to extend. There is room to the right of the informational fields to add a login box. The login form will be submitted over AJAX, and instead of returning a logout form, it will return some JavaScript that will populate the fields with information from the user's profile. If the user is already logged in when he or she comes to this page, he or she will just get the prepopulation of his or her profile information. The user will not get a logout button, because logging out from this area of the user interface doesn't make a lot of sense. This approach can be accomplished in this fashion because our AJAX library is doing a lot of work for us.

When you add new content to a document using innerHTML, the JavaScript included in it isn't run; HTML_AJAX includes code to pull the JavaScript code out and evaluate it (returning to code). An updated comment form with a login added is shown in Figure 11-5. The code that builds this form is shown in Listing 11-3.

Figure 11-5. Sample comment form with a login

Listing 11-3. `Comment.php`

1  <?php 2  session_start(); 3  ?> 4  <html> 5  <head> 6  <title>A sample Comment Page</title> 7  <link rel="stylesheet" type="text/css" 8    href="Comment.css" /> 9  <script src="/books/2/341/1/html/2/server.php?client=all" 10    type="text/javascript"></script> 11  </head> 12  <body> 13  <h3>Leave a reply</h3> 14  <form action="Comment.php" method="post"> 15 16  <div > 17  <p><input name="author"  18    size="22" type="text"> 19  <label for="author"><small>Name 20    (required)</small></label></p> 21 22  <p><input name="email"  23    size="22" type="text"> 24  <label for="email"><small>Mail (will not be 25    published) (required)</small></label></p> 26 27  <p><input name="url"  28    size="22" type="text"> 29  <label for="url"><small>Web site 30    </small></label></p> 31  </div> 32  <br style="clear:both" /> 33 34  <p><textarea name="comment"  35    cols="100" rows="10"></textarea></p> 36 37  <p><input name="submit"  38    value="Submit Comment" type="submit"> 39  </p> 40 41  </form> 42  <div > 43  <?php include 'CommentLogin.php'; ?> 44  </div> 45  </body> 46  </html>

Comment.php is mainly a form (lines 1441) for submitting a comment to a blog. In the example shown in Listing 11-3, submitting the form doesn't do anything, but the goal isn't to show how to submit comments. The goal is to show how a login form that loads profile data could be integrated with a comment system. To make this integration work, the page starts a session on line 2 and then pulls in the needed JavaScript library files on lines 910. A CSS file is also included. This file handles the formatting of the page and the positioning of the login form. Forms can't be nested, so if you want that visual effect, you'll need to accomplish it with a positioning effect. The login form is included on line 43; it sits inside a DIV with the ID of loginForm. This wrapper DIV helps in positioning the form and gives it an element to update with its results. The login code from Listing 11-2 was updated to work with this comment form, loading profile data when a login is complete; this code is shown in Listing 11-4.

Listing 11-4. `CommentLogin.php`

1  <?php 2  if (!session_id()) { 3      session_start(); 4  } 5  $message = ""; 6 7  if (isset($_POST['ajaxLogin'])) { 8     // hard coded login, use the application's 9     // normal login code here 10     if ($_POST['username'] === 'jeichorn' && 11       $_POST['password'] === 'test') { 12 13       $_SESSION['clogin'] = true; 14       $_SESSION['profile'] = array( 15       'name' => 'Joshua Eichorn', 16       'email'=> 'josh@bluga.net', 17       'url'  => 'http://blog.joshuaeichorn.com' 18       ); 19     } 20     else { 21       $_SESSION['clogin'] = false; 22       $message = "Login Failed"; 23     } 24     } 25     if (!isset($_SESSION['clogin']) 26     || $_SESSION['clogin'] == false) { 27 ?> 28 <form method="post" action="CommentLogin.php" 29 onsubmit= 30 "return !HTML_AJAX.formSubmit(this,'ajaxForm')"> 31 <?php 32 echo "<p>$message</p>"; 33 ?> 34 35 <h4>Login</h4> 36 <p> 37 <input name="username"> 38 <label><small>Username</label> 39 </p> 40 41 <p> 42 <input name="password" type="password"> 43 <label>Password</label> 44 </p> 45 46 <input type="hidden" name="ajaxLogin" value="1"> 47 <p><input type="submit" value="Login"></p> 48 49 </form> 50 <?php 51 } 52 else { 53      require_once 'HTML/AJAX/Helper.php'; 54      $h = new HTML_AJAX_Helper(); 55      $var = 'var profile = '. 56          $h->jsonEncode($_SESSION['profile']); 57      $js = " 58      $var; 59      document.getElementById('author').value = 60          profile.name; 61      document.getElementById('email').value = 62          profile.email; 63      document.getElementById('url').value = 64          profile.url; 65      "; 66      echo $h->encloseInScript($js); 67 } 68 ?>

Like the login code in Listing 11-2, the first part of CommentLogin.php takes care of processing POSTs from the login form. On lines 24, we start a session if one hasn't already been started. Then on lines 724, we process the login. The information is again hard-coded to keep the example clear. If the username and password match jeichorn and test (lines 1011), we set a flag in the session and add some profile information to the session. In some applications, this information could include other demographics and various application details, such as the user's ID or what permissions he or she has. If the login fails, the clogin flag is set to false, and a message is provided.

The form generated by CommentLogin.php has two modes: One is a normal login form (lines 2849), whereas the other produces some JavaScript that updates the comment form. We check which mode we're in on lines 2526, which show the login form when we're not logged in. Lines 3547 produce the actual elements of the form, giving us username and password inputs as well as a submit button and a hidden field to let this page know we are trying to log in.

The logged-in mode of the form uses the HTML_AJAX_Helper class to help it produce some JavaScript. We include this class on line 53 and then create an instance of it on line 54. On lines 5556, we use the helper's jsonEnode method to turn the session's profile data into a JSON string that can be directly used in the JavaScript we're writing. We then write the rest of the JavaScript, updating each field in the comment form, using the user's ID and the matching value from the profile. After that, we use another helper method to quickly add a script tag around this JavaScript. Because this login code is session driven, the logged-in mode will be used each time the parent Comment.php page is reloaded after a single login has happened. With this design, you need to close your browser to log out, but you normally put a Logout button somewhere else on the page where it would make sense.

11.3. Extending the Login Form

Figure 11-4. Comment form from my blog

Figure 11-5. Sample comment form with a login

Listing 11-3. Comment.php

Listing 11-4. CommentLogin.php

Listing 11-3. `Comment.php`

Listing 11-4. `CommentLogin.php`