CS 120, Fall 2011, Lab 9:
Forms and Interaction with the Server

The goal of this lab is to create four HTML forms to interact with a web application that is already running on the math department's web server. You will also enhance at least two of the forms, either by using HTML tables to improve the layout or by using JavaScript for some simple client-side validation. (Or you can do both enhancements, possibly for a little extra credit.) There is no need to make the forms especially attractive, since the web application will be a little clunky in any case; we will talk about improving the interface later.

To begin the lab, create a new Aptana project named lab9. Copy the file lab9.html from /classes/cs120 into your lab9 folder and run the file lab9.html.

You will see eight links on the page. The first four links are to the web pages with HTML forms that you have to create for this lab. These links won't function until you create the web pages. The next four links are to parts of the web application on the server. The application is on the web at http://math.hws.edu/bb120/. If you try to open any of the links in the web application, you will get an error, because the application requires that you log in before you are allowed access. The first form that you write will allow you to log in.

Don't shut down the web browser while you are working on the web application, since that will log you out of the application. It would be best to use the links on lab9.html or the reload button in the web browser, instead of using the "Run" command in Aptana.

Form #1: Logging In

The first form that you have to write is for logging on to the web application. Create an HTML file named login.html to contain the form. The <form> element on the web page must use the POST method. (All the forms that you write today must use POST.) The form data has to be sent to http://math.hws.edu/bb120/process_login.php. This is the action attribute of the <form> element. That is, the form has to look like:

<form action="http://math.hws.edu/bb120/process_login.php" method="POST">
  .
  .
</form>

The form must contain two input boxes, one for the user name and one for the password. The names of these boxes must be username and password, since that is how the server expects the data from the boxes to be identified. Of course, the form also needs a submit button.

Once you have the form written correctly, you can use it to log into the web application. Your user name is the same user name you use for linux. Your password is fred. If you fill in the user name and password in your form and click the submit button, you should see a "message board." At first, there is just one message, from me. If you can't log in, check that the names of the input boxes are correct, and that the action for the form is the correct web address!

Form #2: Posting a Message

For the second form, create a web page named post.html. The form on that page will let you post a message to the message board. (You have to be logged in before you can post.) The form should have a <textarea> and a Submit button. The name of the textarea must be message. The data from the form must be sent to 

http://math.hws.edu/bb120/process_post.php

Once your second form is complete, you should be able to post a message to the board. You -- and other people in the class -- will be able to see the message. After posting a message, check that it is there on the message board!

Posting a couple of messages is part of the assignment for this lab.

Form #3: Changing Your Password

For the third form, create a web page named change-password.html. The form on this page will be used to change the user's password for the web application. The form needs a submit button and three password input boxes. The boxes are for: the user's current password, the user's new password, and a repetition of the new password (to make it more likely that the user typed it correctly). The web server will check that the current password is correct, and that the two copies of the new password are the same. The names for the form's input boxes must be: oldpw, newpw, and confirmpw. The data from the form must be sent to 

http://math.hws.edu/bb120/process_change_password.php

Use your form to change your password, and check that the change was successful by logging out and logging back in. Changing your password is part of the assignment for the lab.

Form #4: Change Your Profile

The message board stores some information about you, in addition to your user name and password. This information is called your profile. Currently, all the data in the profile is unknown. You can view your profile at http://math.hws.edu/bb120/profile.php. You must be logged in to do so. In this version of the application, you can only see your own profile, not other users'.

For the fourth form, create a web page named set-profile.html. The form on this page will have input elements for setting all the data in your profile. The data from the form must be sent to 

http://math.hws.edu/bb120/process_set_profile.php

You need a form that will allow the user to enter their real name, email, college (Hobart, William Smith, or none), and whether or not they use Facebook, Twitter, and Google+.

This is the most complex of the forms that you have to make. In addition to a Submit button, the form requires:

  • A text input box where the user enters their real name. The name of the box must be realname.
  • A text input box where the user enters their email address. The name fo the box must be email.
  • A set of three radio buttons for selecting the user's college. The name for all three buttons must be college. The values for the buttons must be "H", "W", and "X" to specify Hobart, William Smith, and None, respectively.
  • A checkbox for specifying whether the user uses Facebook. The name for the checkbox must be facebook.
  • A checkbox for specifying whether the user uses Google+. The name for the checkbox must be googleplus.
  • A checkbox for specifying whether the user uses Twitter. The name for the checkbox must be twitter.

Once the form is done, use it to set a profile for yourself. This is part of the assignment for this lab, but you are not required to be honest about the data for the profile.

Enhancement Option #1: Tables

HTML tables can be used to improve the layout of forms. We have not yet covered tables, but we will do so next week. The are covered in Book 1, Chapter 4 of the textbook, pages 74--80. You will only need simple tables, as discussed on pages 74--76.

If you want to use tables, you should do so for at least two forms. Remember that you are only required to do one of the two enhancement options!

Enhancement Option #2: Client-side Validation

The web server checks that the data that is sent to it makes sense. For example, when changing a password, it makes sure that the new password is not empty and that the two copies of the new password are the same. If any of these checks fail, the server sends back an error message. However, it would be nicer if the obvious checks were make before sending the data to the server, so that the user would have a chance to fix the problem and try again. This is called client-side validation of the form data.

You can use JavaScript to do client-side validation. When the user submits a form, an event of type onsubmit is generated. You can respond to this event using by calling a JavaScript function. As we discussed in class, the JavaScript for the onsubmit event should be specified as onsubmit="return validate()", where validate is the name of the JavaScript function that you write for validating the form. That is, the <form> element would start like

<form onsubmit="return validate()" action= . . .

The function is called before the data is sent to the server. The function can make some basic checks on the data from the form elements, but of course it can't check things that require information that only the server has, such as whether a password is valid. The validate function can then decide whether to allow the data to be sent to the server, or to prevent the data from being sent. It does this with a "return statement", either: return true; or return false;

A return statement ends the function. If the function for the onsubmit event is ended by return true, then the data from the form is sent to the server as usual. If the function is ended by return false, then the data is not sent and the web browser stays on the current page.

If the function finds some problem with the data in the form, it should tell the user about the problem. It can do this by setting the innerHTML of a message on the page or by putting up an alert.

If you want to use client-side validation, you should do so at least for the login and change-password forms. Remember that you are only required to do one of the two enhancement options!