Cookies and Hidden Form Fields

The lab on An Introduction to Dynamic Web Pages with Java provided an overview of interactions between a browser and server. After considering static Web pages, that lab introduced the basics of CGI programming to allow the construction of dynamic Web pages. The latter part of that lab showed the use of forms which allow a user to enter information into a Web page and transmit it to a Java program for later processing. The Java program then can utilize these data in preparing a Web-page response for the user.

This lab considers mechanisms to provide some continuity from one Web page to another, as part of an extended user session. In particular, this lab considers two mechanisms to enhance communication between a browser and server:

• Hidden Form Fields
• Cookies

Both of these approaches are illustrated in the Web page, java-form-cookies.html that extends the example from the previous lab.

1. Examine what happens when you use java-form-cookies.html.
   1. Click on the link, fill out the form, click "submit", and record carefully what is displayed (you may want to print this page for further reference).
   2. Click "Reload" several times, and describe what happens.
   3. Note what information is displayed in the URL field of your browser after you click "submit".
   4. Close all windows for your browser, then reopen the browser, display java-form-cookies.html, click "submit", and again record carefully what is displayed.
   5. Summarize the behavior of java-form-cookies.html and the corresponding cgi and Java programs in a paragraph or two.

Form Fields

From your experience with fac-directory-java.html in the lab on dynamic pages, you know how much of this interaction works:

1. The html page contains a form, indicating what URL is to be used when a user clicks "submit".
2. The form contains input fields of type text, to provide a place for the user to enter data. These input fields have an associated name, for future reference in processing.
3. When you click "submit", the name/text fields are appended to the URL as a query string.
4. The URL itself references a cgi script that calls a Java program and passes along the query string.
5. The Java program receives the query string as a parameter to main.
6. This query string is then divided into pieces using standard Java String methods as part of later processing.
7. The Java program prints html formatting commands as well as page content using System.out, and this information is returned to the browser for display.

With this review, we look at the new pages java-form-cookies.html more closely.

2. Copy the following files to your cgi-bin directory:

   • ~walker/public_html/cgi-bin/examples/java-form-cookies.html
   • ~walker/public_html/cgi-bin/examples/java-visits.cgi
   • ~walker/public_html/cgi-bin/examples/javaVisits.java

3. Compile javaVisits.java, and make the html, cgi, and class files public.

4. Check that your version of java-form-cookies.html works in your browser and that it appropriately calls your versions of these programs. (You may need to edit the CLASSPATH in the cgi file to refer to your account.)

5. Open java-form-cookies.html in an editor, so that you can view the html in detail.
   1. Note that the input boxes are exactly the same for myText and myNumber as in the form from the previous lab.
   2. Note that this form also contains a new input field of type hidden. Identify the name and value of this field.
   3. Fill out the java-form-cookies.html form in your browser, click submit, and examine the query string. Explain how the hidden name and value information are reflected in the URL.

These observations illustrate that forms allow the embedding of hidden fields within forms on a Web page. If the Web page were generated from a CGI script, the CGI script could print hidden fields as well as visible boxes and other page elements. These hidden fields then can be used in subsequent processing. This is illustrated in the following application for elementary school arithmetic.

Simple Arithmetic Drill

Problem:

A dynamic Web page is to be constructed to give elementary school students practice with simple addition. The idea is to generate two integers between 0 and 9 (inclusive), and form a Web page in which a student enters the sum. After clicking "submit", the answer is checked, and the student gets a "right" or "wrong" response.

Solution:

This problem will involve a cgi script and corresponding Java program:

• The cgi script simply sets up the Java CLASSPATH, and passes along the query string to the Java program.
• The Java program first analyzes the query string. If it is non empty, it retrieves the first number, second number, and answer from the form, checks if the sum matches, and prints "right" or "wrong" as appropriate.
• The Java program then generates two random integers between 0 and 9 (inclusive), prints them to the screen for the next addition problem, and sets up a form with fields for the first number (hidden), the second number (hidden), and the answer (text field), as well as a "submit" button.

To clarify, the student would see something like the following when first typing the URL:

As a technical note, Java contains a random number generator in java.lang.Math. In particular, Math.random() generates real numbers between 0 and 1 (including 0, but excluding 1). Thus, (int)Math.floor(10.0*Math.Random()) generates integers between 0 and 9 (inclusive).

6. Write a cgi script simple-addition.cgi and Java program SimpleAddition.javafor this interaction. As a suggestion, first write the section that generates the form (the second half of the Java processing). This program could be run directly in a terminal window, so it can be checked directly - without worrying about the Web and cgi. With this part of the program complete, the cgi script can be implemented, so the program generating the form can be viewed on the Web. With this done, the first part (examining the query string) can be added.

Cookies

When a browser accesses a Web page, the Web server can request that your browser store a small piece of information, called a cookie, on your machine. When you go to this Web page again, the Web server can ask for this cookie and can use that cookie in processing.

7. Check if your browser is usually set to accept cookies.

   • If you use Internet Explorer under Windows, this information can be found by looking under select "Internet Options" from the "Tools" menu, then look under "General" and "Settings" in the "Temporary Internet Files" section.
   • If you use Internet Explorer on a Macintosh, this information can be found by looking under "Preferences" under the "Explorer" menu, and then looking under "Cookies" in the "Receiving Files" section.
   • If you use the Mozilla browser, this information can be found by looking under "Preferences" in the "Edit" menu, and then going to "Privacy & Security" and "Cookies".

   If your browser does not usually accept cookies, change the setting for now, and redo Step 1. You can change the settings back at the end of this lab.

The form-cookie example you have already seen, java-form-cookies.html, illustrates how a program can utilize cookies to track information when working with a browser. The basic idea is to print one or more lines Set-Cookie: at the very start of a program (after the Content-type line, but before the blank line before <!DOCTYPE). CGI script java-visits.cgi and program javaVisits.java show a typical scenario.

• java-visits.cgi has a similar form to the cgi scripts of the previous lab:

  
            #!/bin/bash
  
            export CLASSPATH=":/home/walker/public_html/cgi-bin/examples"
  
            /opt/jdk1.5.0/bin/java javaVisits "$QUERY_STRING" "$HTTP_COOKIE"
  

  As this illustrates, java-visits.cgi passes two strings to the Java program.

  • $QUERY_STRING contains the query string, as before
  • $HTTP_COOKIE contains any cookie information that the browser has gathered previously from this server.

• javaVisits.java receives these two strings as parameters to main. The cookie information is organized as a sequence of name=value pairs, separated by semi-colons (just as a query string contains name=value pairs when the information comes from a form).

  • Since both cookies and query strings come as pairs, a common generatePairs method handles the chores of dividing the pairs into values that can be retrieved from a Hashtable
  • Since cookies must be set before <!DOCTYPE is printed, processing related to cookies typically appears at the very beginning of a program.
  • Cookies are set by printing a Set-Cookie line, such as:

    
          System.out.println("Set-Cookie:  numVisits=" + (numVisits+1));
          System.out.println("Set-Cookie:  lastDate=" + todaysDate.getTime()
                             +"; expires=" + nextWeek.getTime());
    

    In the first case, a value is associated with the field numVisits, while in the second case, today's date is associated with the field lastDate.

  • In Web use, cookies have an associated expiration time. This can be set explicitly with an expires= string, as in the second line above. However, if this is not set, then the cookie will expire when your browser session is done (e.g., when you close your browser).

  • Once set, the values are sent to the browser, and this information is returned to the server whenever the browser links again to this server. Thus, cookies provide a convenient way for a server to set a simple history of past work, and that information can be used in future processing. Note that this information is not displayed in the URL or query string. Further, the information is not visible on the Web page (in contrast to hidden fields that are visible when you view the page source).

8. Review program javaVisits.java, and give a careful description of how processing proceeds in each section of the code.

Overall, javaVisits.java uses cookies numVisits and lastDate to keep track of how often a page is used in the current session and of when the user last accessed this material. If the values of these variables are null, the program assumes these have not been set previously, so initial values are assigned. Otherwise, the program retrieves past values for later processing.

The same idea can be used to keep of the number of right and wrong answers for the simple-addition.cgi script and associated SimpleAddition.java program from Step 6.

9. Add cookies to simple-addition.cgi and SimpleAddition.java from Step 6, so that your program prints the total number of correct and incorrect answers supplied so far in the current session of this user.

Work to be Turned In

• Within your subdirectory public_html/cgi-bin, maintain public copies of your files simple-addition.cgi and SimpleAddition.java.
• Submit descriptions for Step 1e (with cookies enabled on your browser), 8
• Submit printed listings of the cgi script and Java program for Step 6 combined with Step 9.

http://www.walker.cs.grinnell.edu/courses/223.fa05/labs/cookies-forms.shtml

created 6 October 2005 last revised 7 October 2005
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.