CGS4825 Project

Due Thursday, 4/19 at 11:59 pm.

To hand in the assignment, zip your cgs4825 folder and upload it from ocelot.

• Please use the following command to compress your cgs4825 folder. Change to your ~ directory on ocelot and issue the command
  zip -r username cgs4825 -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 assignment is long, if you wait until the last week to start, then you will not have enough time to finish it. Even though some of the features have not been covered in class, there are many things that can be implemented now. Please get started.

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/0701/registered.passwd
• Create a subdirectory of project named includes.
  • Create a file that can be included in other pages.
    • Name it banner.html.
    • Add the name of your site to the file.
    • Add a horizontal rule at the bottom of the file.
    • Only include the text and tags that are necessary, do not include all of the standard tags for a web page.
    • This file will be referred to as the banner file.
  • Create another file that can be included in other pages.
    • Name it footer.html.
    • Add your contact information to the file.
    • Add a horizontal rule at the top of the file.
    • Only include the text and tags that are necessary, do not include all of the standard tags for a web page.
    • This file will be referred to as the footer file.
  • In the index for the includes directory, 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.
  • In the index for the includes directory, 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 a previous homework.
  • Turn on language negotiation in this directory. No other directories should have language negotiation turned on.
    • Accept the languages English and French.
  • Header and ReadMe.
    • Set the ReadmeName as README.cgs4825.html
    • Set the HeaderName as HEADER.cgs4825.html
    • The contents of the header and readme files should appear above and below the directory listing, when it is displayed in the browser.
  • Create two versions of the readme and header files.
    • Do not create files with the names README.cgs4825.html and HEADER.cgs4825.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 French 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 French. You may use the same file as the English file, but add the word French 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 French, depending on the user's preference.
• Configure Apache so that the URL /username is handled by Tomcat. Replace username with your user name.
• Configure Apache so that all URLs that start with /username/ are handled by Tomcat. Replace username with your user name.
• Configure Apache so that all URLs that end with .jsp are handled by Tomcat.
• Configure Apache so that all URLs that start with /manager/ are handled by Tomcat.
• For the the cgs4825/group 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.
• Create a cgs4825.shtml file in the cgs4825/group directory.
  • Include the banner file at the top of the body of the page.
  • Include the footer file at the bottom of the body of the page.
  • Add an image to the page. Choose an image from the /icons/ directory on your server. Use a relative reference.
• Create a cgs4825.shtml page in the project directory.
  • Using SSI tags, include the banner 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 your group folder. You must use the ~ to access the group folder.
  • Create a link to the tdowne99 group folder. You must use the ~ to access the group folder.
  • 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 to the manager 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 to the user name 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.
  • Use the secure web.xml file.
  • Create a welcome page named index.jsp. Be sure that this is the page that is displayed when the root of the web application is requested.
  • 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 session and should always display the edit page.
  • A POST request should retrieve data from the session 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. It must be related to the service that your site is providing.
• 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)
    • Each of these needs an import statement:
      import org.hibernate.validator.Min;
import org.hibernate.validator.Max;
import org.hibernate.validator.Range;
  • Validate that one of the string properties only contains uppercase letters, lowercase letters and spaces.
  • 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 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. Change the font for this tag to be a monospace font. Use the font-family attribute and specify a very specific font, a more common font and a generic font.
  • Define the em tag to be bold and 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 nested ordered lists, use two different numbering systems for two levels of nested ordered lists. Do not use decimal for either numbering.
• Use the stylesheet in all pages your HTML pages on Apache. Only add the style sheet to complete pages, not included files. Also include it in the HEADER.cgs4825 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 checkbox group to your project application.
• Add a single selection list to your project. Include at least six options. Validate that the value that is selected is one of the values from the selection list. It is possible that someone could write their own form to access your site, so it is always good to validate, even when using a selection list.
• Initialize the checkbox group and the selection list according to the values in the query string.
• When displaying the data that the user entered, display all the values that were chosen in the checkbox group.
• When displaying the data from the database, display all the values that were chosen in the checkbox group, for each row.
• Use the Apache stylesheet in all your JSPs for the project. The style sheet only needs to appear when the project application is accesst from Apache. When the site is accessed from Tomcat, the style sheet does not appear. Use a relative reference to access the style sheet.