Department of Computer Science and Engineering

web programming

Web programming exercise B

Multi-Input Forms

We saw in Exercise A that the HTML tag:

  <INPUT type="text" name="user"/>

is rendered (by the client's browser) as a text field in which the client can type the input. Upon submitting the form, the string user=input is poked into the standard input of the server. But what if the app involves more than one input, e.g., a login form that prompts for a name and a password? The following tasks explore this dimension of the problem.

Login to your red account.
Change to the ~/www/cbc1020 directory that was created in Exercise A.
Issue the following commands:
```
     mkdir LabA
     cp Server.java LabA
     cp form.html LabA
```
This will save the files of Exercise A in a separate directory, named labA, should you need to refer to them later.
We will create a form that provides an interface to a bulletin board. Below, we will explain how to edit the form.html file so that it will look like this when rendered.

   Name:


   Topic:


   Message:



Unlike the forms of Exercise A, this one allows the client to make three inputs: a name (an arbitrary string), a topic (selected from a drop-down menu) and a message. The next couple of tasks provide hints on creating the needed markup.
In order for the server to distinguish the inputs, they must have unique names. Hence, if you used name="user" for the name input tag, use a different name for the other two inputs, e.g., topic and message.
To create a menu, use the SELECT tag:
```
    <SELECT name="topic">
       <OPTION value="1">Computer science</OPTION>
       ...
       ...
       <OPTION value="0">Other</OPTION>
    </SELECT> 
```
Of course, you can choose your own topics for your bulletin board.
Note that these tags represent one input named topic. There is one OPTION tag per menu item and it specifies the string to be displayed and associates a value (any string) with it. When a user selects a menu item with value "3" for example, the string "topic=3" is sent to the server. Note that all values are treated as strings even if they are made up of digits. We have assigned consecutive values ("1", "2", ...) for the menu items (as ordered in the drop-down list) except we associated "0" with "Other".

To create a textarea, use the TEXTAREA tag:

    <TEXTAREA name="message" rows=8 cols=50></TEXTAREA>

Launch a browser and visit your form's URL: http://www.cse.yorku.ca/~csexxxxx/cbc1020/form.html. Make sure it looks like the one shown above. To add spaces before the "Name:", "Topic:", etc, you may use

Note: There is a subtle but interesting similarity between tags and classes. The INPUT tag, for example, can be thought of as a class with three fields: type, name, and value. The relation between the SELECT tag used above and the OPTION tag is one of aggregation: the latter occurs between the opening and closing tags of the former, i.e., SELECT has-a OPTION. The tag-class similarity offers a glimpse of the direction in which current XML research is heading.

Multi-Input Servers

When a multi-input form is submitted, all its fields are sent to the server. The following tasks demonstrate how the server can separate these inputs and handle them.

Fill in the form created above as follows: Enter Adam for the name, Computer Science for the topic, and I cannot wait for the third labtest for the message.
Submit the form.
Examine the server's response. Recall that "Hello" is something that we added to the server, i.e., it is not part of string that was sent to the server. Note that each input has the name=value form and that the inputs are concatenated into one long string with & as delimiter.
Modify Server.java so that the server's response appears as follows:
```
     Adam
     Topic 1
     I cannot wait for the third labtest
```
Hint: You may want to exploit the class StringTokenizer in the package java.util.
Compile your server and correct any compile-time errors.
Re-visit the form, fill it again, and submit. Alternatively, simply press Re-Load in your browser (currently displaying the old response). Your browser will re-send the information in the form (after prompting you to confirm) so you do not need to re-enter anything.
Do you get the response as shown above? If not, edit your server and try again. This cycle should be repeated, as many times as needed, until this particular test case succeeds.

URL Encoding

The seemingly fool-proof mechanism for transferring inputs from the client to the server via a long delimited string has an ambiguity: Consider the string:

     x=TER/&b=d&t=>4$t=9i=q#9

What value did the client enter for x? Is it TER/ or TER/&b=d? The problem arises because the delimiter may be part of the entry that the client made. The problem is in fact bigger than this because every component between the client and the server (the browser, the network router, the web server, etc.) may have its own set of delimiters and these may clash with symbols entered by the users. The following tasks examine the approach used by HTTP (the Hyper Text Transfer Protocol that we have been using throughout) to avoid these clashes.

Visit the form created above and enter Adam Smith as name and anything else for the other two inputs.
Submit the form and examine the server's response. Note that the space character has been replaced with a plus sign!
Press Back in your browser and re-enter the name as:
```
     Adam#1 & Company
```
Submit the form and examine the server's response. Note that the character # has been replaced with %23!
HTTP uses an encoding scheme known as URL Encoding in which letters and digits are kept as-is, space is replaced with a plus, and all other characters replaced with %nn, where nn is the ASCII code of the character in hex. Since the ASCII code of # is 35, which is 23 in hex, it appeared in the string as %23.
It will be a nuisance if we had to undo this encoding at the server end ourselves. Fortunately, Java has a class in its java.net package that does just that. Find that class and delegate the task of decoding to it. Hint: It is a utility.
Modify your server so that it decodes the name and the message.

File Manipulation

For a bulletin board to be of any use, you may want the messages to be saved (in a file). The following tasks demonstrate how this can be achieved.

First create a file for each topic by issuing the following commands:
```
   touch topic0.txt
   touch topic1.txt
   ...
```
Next, extend your Server class so that it reads the appropriate file and stores its content in a StringBuffer. For example, if the topic Computer science is chosen, then the content of the file topic1.txt is read. Subsequently, expand your Server class so that it appends something like
```
  On Tue Feb 27 19:50:32 EST 2007, Adam wrote from 75.100.175.156:
  I cannot wait for the third labtest
```
to the StringBuffer.
Hint: you may use something along the lines
```
  StringBuffer buffer = new StringBuffer();
  ...
  Date now = new Date();
  buffer.append("\nOn " + now + ", " + name + " wrote from " + System.getenv("REMOTE_ADDR") + ":\n" + message + "\n");
```
Finally, complete your Server class so that it writes the StringBuffer back to file and also to the screen. If Adam were to submit also the message not, he would see something like the following after pressing the submit button.
```
  On Tue Feb 27 19:50:32 EST 2007, Adam wrote from 75.100.175.156:
  I cannot wait for the third labtest

  On Tue Feb 27 20:12:51 EST 2007, Adam wrote from 75.100.175.156:
  not
```