CGS4825 Project

Due Wednesday, 12/06 at 11:59 pm.

To hand in the assignment, zip your username web application and upload it from ocelot.

• Please use the following command to compress your username web app folder. Change to your webapps directory on ocelot and issue the command
  zip -r username username -x \*.jar \*.zip \*.war \*.log
  Replacing username with your user name.
• Check the size of the ZIP file, it should be less than 1 MB. If it is not, then you probably have another ZIP file stored in the ZIP archive. Delete it and re-zip.
• Use my uploading program from ocelot to upload the file.
  ~downeyt/cs/public/webftp/webftp.pl
• Upload the file as binary.

Be sure that all your files and subdirectories are included in the zip file.
After uploading, do not modify your files on ocelot until after your assignment has been graded.

Overview

You are to create a service oriented web site. Users will be able to log into your site and maintain an account on your site. The type of service that you provide is your choice. For example, the site that was developed in the book kept track of a user's hobby and aversion. Try to be creative in picking your site. There are already enough book sellers on the web and one site that keeps track of hobbies is enough. Choose a service that interests you.

The description of the assignment will grow, as we cover more material. Each new segment of the description will be described as an additional step. Work on this assignment as I add the new steps. If you wait until the last week of the course to start the assigment, you will not complete it.

Step One

On Apache

• When modifying access.conf, always use a Directory tag in preference to a Location tag. Location tags cannot set the icon for fancyindexing. Also, All Directory tags are executed before any Location tags, so if you mix and match, you might get unexpected results, like the Location of a parent directory undoing the changes that you made in a Directory for a subdirectory.
• Create a directory named project.
  • For the this directory and its subdirectories, make cgs4825.shtml the first choice for a default page when a directory is requested. All other directories should display cgs4825.html as the first choice.
  • Turn on server side includes in this directory and its subdirectories.
  • Turn on fancy indexing in this directory and its subdirectories. Show the size, last modified date and description for all files when a directory listing is displayed, except as noted below.
  • Turn on indexes in this directory and its subdirectories.
  • Limit access to this directory to you and me.
    • Use Basic authentication.
    • The password file is located in /aul/homes/downeyt/cs/etc/0608/registered.passwd
• Create a subdirectory of project named includes.
  • Create a banner file that contains the name of your site. Add a horizontal rule at the bottom of the file.
  • Create a footer file that contains your contact information. Add a horizontal rule at the top of the file.
  • Add a description for the banner file and footer file.
    • Create a different description for each file.
    • The description should appear when the directory listing is displayed in the browser.
  • Change the icon for each file to one of your choice from the /icons/ directory on your site.
    • Choose a different icon for each file.
    • The icons should appear when the directory listing is displayed in the browser.
  • When a directory listing is displayed for this directory,
    • Do not display the size of the files.
    • The icons for the banner and footer files will be different from each other.
    • The banner and footer files will have different descriptions.
• Create a subdirectory of project named errors.
  • Create a page for 404 errors. Using SSI tags, include the banner and footer files, from the includes directory, in this file.
  • Create a page for 403 errors. Using SSI tags, include the banner and footer files, from the includes directory, in this file.
  • Create a page for 500 errors. Using SSI tags, include the banner and footer files, from the includes directory, in this file.
  • For the project directory and its subdirectories, make these the error pages that Apache will show when there is an error. All other directories should still display the error messages that were created in Homework 1.
  • Turn on language negotiation in this directory.
    • Accept the languages English and Spanish.
  • Headers and footers.
    • Set the ReadmeName as README4825.html
    • Set the HeaderName as HEADER4825.html
    • The header and footer files should appear when the directory listing is displayed in the browser.
  • Create two versions of the readme and header files.
    • Do not create files with the names README4825.html and HEADER4825.html. You must create the files with this name plus an additional language extension, as explained next.
    • Create an English version of each file. Add some meaningful content to each. Add the extension that is used for language negotiation to each file.
    • Create a Spanish version of each file. Add some meaningful content to each. Add the extension that is used for language negotiation to each file. It is not necessary that the page be in Spanish. You may use the same file as the English file, but add the word Spanish in a prominent place in the file.
  • When a directory listing is displayed for this directory,
    • Do not display the file descriptions.
    • The header and readme files will be in English or Spanish, depending on the user's preference.
• Create a cgs4825.shtml page in the project directory.
  • Using SSI tags, include the header and footer in this file.
  • Create at least three meaningful paragraphs that describe your site and the service that you will provide.
  • Create a link to the includes directory.
  • Create a link to the errors directory.
  • Create a link to a file that does not exist.
  • Create a link to a file that does not have any access.
  • Create a link to the root of the your-username web application on Tomcat. Use a relative reference from the Apache server, do not include an absolute reference to the Tomcat server on port 8008.
• Create a link in the cgs4825.html file in the root of Apache to the project directory on Apache.

On Tomcat,

• Create a new web application named your-username.
• Create a welcome page named cgs4825.jsp. Be sure that this is the page that is displayed when the root of the web application is requested.
• Create custom error pages for 404 and 500 errors. Be sure that these pages appear when there is a 404 or 500 error in your web application.
• Restrict access to this web site to you and me.
• Create a servlet controller application that is similar to the ch4.enhanced application.
  • Do not use hidden fields.
  • Use a controller helper and helper base.
  • Use a data bean to store the data from the request.
  • Automatically populate the data from the request into the bean.
  • Use a logger to write informational messages.
  • Use the ButtonMethod attributes to annotate the controller helper and simplify the doGet method.
  • Place the JSPs in the same directory as the controller.
• Instead of using the two fields hobby and aversion, create three different text fields to gather information form a user for your site. The fields should be relevant to the service that your site is providing. Be creative.

Step Two

On Tomcat,

• To be able to compile java files on ocelot in your username web application, you must add the following statement to the .cshrc file.
  setenv CLASSPATH {$CLASSPATH}:{$HOME}/cgs4825/webapps/username/WEB-INF/classes
  Replacing username with your ocelot user name.
• If you have already added the jar files from the book web application to the CLASSPATH ,in .cshrc, then you will not need to add the jar files in the username web app to the CLASSPATH. You need to have the jar files in both lib directories, but they only need to appear in the CLASSPATH once.
• Modify the application so that it handles GET and POST requests.
  • Modify your JSPs so that they use POST.
  • A GET request should not retrieve data from the bean and should always display the edit page.
  • A POST request should retrieve data from the bean and should display different pages, based upon the button that was clicked.
• Add an additional property to your application. This property must be numeric: int, float or double.
• Add required validation to your application.
  • Validate that the numeric field is in a specific range of numbers. Do not include 0 in the range. There are additional annotations that can be used with numeric properties. Built-in Annotations for Hibernate.
    • @Min(value=100)
    • @Max(value=200)
    • @Range(min=100,max=200)
  • Validate that the one of the string properties does not contain the punctuation marks period, comma and colon.
  • For each field that is to be validated, display information in the web page that indicates the correct format of the data to be entered.
• When the process button is clicked, save the user's information in a database. Do not display all the data from the database in the process page, only display the data that the user entered.
• Modify the edit button on the process page so that it starts a new transaction.
  • The edit page should be shown after the button is clicked.
  • The old data should not appear in the edit page.
• Add a new button to the process page.
  • When the button is clicked, show a new page that will display all the data that is stored in the database.
  • Use a tag from the JSTL to loop through all the records in the database and display all the data for each record.
  • Add a button to the new page that will start a new transaction.
    • The edit page should be shown after the button is clicked.
    • The old data should not appear in the edit page.

Step Three

On Apache,

• Create a subdirectory of project named styles.
• Create a stylesheet in the styles directory.
  • Change the backgournd color of the page. If you are having a difficult time deciding on colors, try this site http://www.siteprocentral.com/html_color_code.html
  • Change the text color of the page.
  • Change the font of the page. Use the font-family attribute and specify a very specific font, a more common font and a generic font.
  • Change the left and right margin of the page.
  • Define the color for hypertext links. Use the A:LINK pseudo tag.
  • Define the color for visited links. Use the A:VISITED pseudo tag.
  • For H1 and H2 headings,
    • H1 and H2 headings should use a different font than the body. Use the font-family attribute and specify a very specific font, a more common font and a generic font.
    • H1 and H2 headings should have center alignment.
    • Make all H1 headings use upper case letters.
    • Make all H2 headings use capitalized first letters for each word in the heading.
  • Define the var tag to be bold and underlined. Be sure that any text that uses this tag does not appear italicized. The default style for this tag is italicized, be sure to turn this off.
  • Define the em tag to be 10% larger than the font used in the body. Make the text color different from the text color in the body. Be sure that any text that uses this tag does not appear italicized.
  • Define td elements to use a different backgound and text color than the body.
  • Define nested ordered lists, use two different numbering systems for two levels of nested ordered lists. Do not use decimal vor either numbering.
• Use the stylesheet in all pages your HTML pages on Apache, including files that were created in previous assignments. Only add the style sheet to complete pages, not included files. Also include it in the HEADER4825 files.
• In the cgs4825.shtml in the project directory.
  • Add an H1 heading to the page. Place it at the top, after the included header.
  • Add an H2 heading above each of the three paragraphs on your page.
  • Use the var tag several times in the page.
  • Use the em tag several times in the page.
  • Create a nested ordered list with two levels of nesting. The list will contain links to parts of the assigment.
    • Directories
      • link to errors directory
      • link to includes directory
    • Files
      • link to nonexistent file
      • link to resticted access file
    • Project
      • link to project root
      • link to project controller

On Tomcat,

• Add a radio group to your project application. Display the radio group in a table.
  • Place each button in a separate row in the table.
  • Place the button in the first cell in a row, place the label for the button in the second cell in the row.
• Add a multiple selection list to your project. Include at least six options. Show three options at a time in the selection list.
• Initialize the radio group and the selection list according to the values in the query string.
• When displaying the data that the user entered, display the chosen values from the multiple selection list in a table. Display all the values in one row with each value in a separate cell.
• When displaying the data from the database, be sure to display all the values that were chosen in the multiple selection list, for each record. Display all the values in one row with each value in a separate cell.
• Use the Apache stylesheet in all your JSPs for the project, including the error pages. The sytle sheet only needs to appear when the project application is accessed from Apache. When the site is accessed from Tomcat, the style sheet does not appear.