CSC2406 Web Publishing (WPub)
Bachelor in Information Technology


Assignments

 

2002 Nov
Assignment 1
Assignment 2

 


Past/Present Assignments

Assignment 1. 2002 Nov (due 23 Dec 2002)
 
You work for a company that designs web sites, this includes designing the public interface and also the server side of the site.

Your company is bidding for a lucrative contract to design a web site (front end and back end) for a mail order company that sells - Succulent Plants. Succulent plants include the cacti that are commonly found in arid regions of the world. The company also sells related products required by the keen succulent grower.

You are to design the public side (HTML pages, Images, Forms pages) and server side (CGI scripts, Image Maps etc.) of your company's bid for the contract. The basic design criteria you are to employ are the following

  1. There should be an entrance page to the site. This should be simple but entice the potential buyer to look further into the site.
  2. From the entrance or welcome page there should be links to four major areas of the site.
    1. A section containing the product catalogue.
    2. A section describing the company.
    3. A section for submitting orders.
    4. A section to help the client in all aspects of the site.

 

This first assignment is to set up the basic structure of the company's site, construct the welcoming page and the description of the company.

 

Tasks

  1. In the directory ~/CSC2406/html/ass1 create four directories that will contain the documents and images etc. for the four main sections of the site:

     

    catalogue
     
    This directory will contain the catalogue with all its images that clients will be ordering from.
    order
     
    This directory will contain the ordering forms, CGI scripts and client orders
    info
     
    This directory will contain information on the company and its products.
    help
     
    This directory will be used by you to document your solutions to the assignments.

     

  2. Your site should contain the following elements
    Images
     
    Your site must contain at least one example of the following-
    • An image that has a transparent background.
    • Navigation buttons for the site. Javascript mouse events should modify the buttons' images.
    • A Client Side or Server Side image map.
    • An Animated GIF.
    Javascript
     
    Limit the Javascript to the navigation buttons of the site. That is, implement a script to modify images when a mouse event occurs over the image.

    The site must be navigable with Javascript turned off.

     

    Cascading Style Sheets
     
    All font changes, all text colors, background colors, H1 to H6 elements etc. should be modified using only style sheets.

    The site should be readable and navigable with style sheets turned off.

     

    Tables
     
    Use tables as layout engines for each page of the site. It is expected that all visible elements of the page would appear with a table.

     

    Style Guide
     
    When designing the site and individual pages follow the suggestions outlined in the style guide module in the study book.

     

  3. Create a welcoming page for the site (in the top level assignment directory). This welcoming page should be simple but eye catching. With basic information about the purpose of the company.

     

  4. Create a catalogue page. This should list all the items the client can purchase via the web. This part of the site will be tackled more fully in Assignment 2. For assignment 1 all that is required is that examples of what will be available soon for online purchase be given. In Assignment two this page will have to be re-written using Forms - so do not spend too much time on it. But remember this will be part of the company's site and viewable by the public - so more than just "Under Construction" is required.

     

  5. Create a Company Information page in the directory info. This page should contain images and information about the company. Information that should sell the company to prospective clients. As this is not a main entry point to the site this can be a flashy section - but remember to bear in mind the recommendations in the Style Guide Module.

     

  6. Create a Help page which will contain the following
    1. Describe, with examples from your site, all the Required images and Image maps.
    2. Explain how you made your images.
    3. Display All the component images of the animated gif. Describe how you created the component images, and how you created the final animated image.
    4. Include All code included in the site - Javascipt, Image Maps etc.
    5. Describe the rationale for your page design - That is, using the Style Guide - explain your design.

    The help directory is to be used to document you solution to the assignments.

     

Notes:

  • Use your imagination. Don't be frightened to make information up. The veracity of the information on the site will not be checked. Use the Internet to download images to be used in the catalogue and in the company information page.
  • Make certain it is clear from perusing your site where all the required elements are. If it is not clear the marker may miss required elements and mark you down accordingly. Have links on the help page to the required element in the main part of the site. The required elements Must appear in the main part of the assignment not just in the Help section.
  • The "welcome" page for your assignment, that is the first page to be viewed should be called index.html or index.htm. This ensures when marking the assignments they all have the same entry point. These are also the default files the server looks for in a directory when a URL points to a directory.

     

  • All your assignment documents should be contained in ONE directory tree. The top directory ass1 has been made for this purpose.
  • To ensure that all links on your pages are relative try the following -
    • Start your web browser and load the assignment top page using the Open Page pull down menu item. This will load the page directly off disk into the browser. Now check that no links are broken.

      Do not have your browser running when you do this.

    Relative links should NOT contain a server name!

     

  • Please experiment with the tar command to ensure you have used it correctly.

    It is your responsibility to ensure that the tar file you submit is correct.

     

  • If you use FTP to transfer the TAR file between machines, make sure that the transfer is done in BINARY mode.


source

g-top.gif (311 bytes)

Assignment 2. 2002 Nov (due 27 Jan 2003)

In Assignment 1, you set up the basics of the site, now must be added the ability to accept and remember orders.

Starting with your solution to Assignment 1, add the following server side functionality to your site:

Tasks

  1. In the catalogue directory create a Forms page that displays the company's product catalogue.
    • Each item that can be purchased has to be selectable.

       

    • After the customer has selected the items he or she wishes to purchase there should be a submit button on the page so that the customer's selections can be sent to the server.

       

    • Write a CGI script (to run in the catalogue directory) to do the following
      • Accept the input from the Catalogue form.

         

      • Write a HTML page to display the user's selections. Have the total cost of the purchases at the bottom of the page. On this page there should also be placed a link to the Ordering page in the order directory. This will take the user straight to the ordering page.

        This must be a well structured HTML page.

         

      • Save the state information of the script by writing the order to a cookie to be stored on the client machine. The cookie should be a site wide session cookie. Only one cookie should be sent and it should contain the entire order.

        The cookie should be returned by the CGI script with the total cost page

    An example of a simple catalogue order form is the following

    Orderform example

     

  2. In the order directory create two sub-directories called
    shipment
    This directory will contain individual files with each clients order.
    payment
    This directory will contain individual files with each clients payment details.
  3. In the order directory place an ordering CGI script that will perform the following tasks. The same script should perform All the following tasks:
    • Without input the script should dynamically create a well structured HTML page that will display the contents of the total cost cookie That is the client's order. (You can reuse parts of the code from Task 1). If the cookie does not exist or is empty send an error message to the effect that items must be selected before ordering.

       

    • At the bottom of the page place a link back to this script requesting the user's shipping address. Pass a parameter to the script (in the link URL) so that the script knows that the shipping address form is required.

       

    • Modify the script so that with the appropriate input (the parameter used above) it will dynamically create a Shipping Address request page. An example of a request for shipping information is the following
      Shipping Address example

       

    • When the submit button is pressed the script should return a feel good message to the effect that the order is being being processed - more importantly it should create two files.
      1. A file should be created in the shipment directory containing the clients order. At the same time -
      2. A file should be created in the payment directory containing the clients payment details.

     

  4. A diagram of the functionality the two scripts could look something like this
     
    Scripts state diagram

     

  5. The directories shipment and payment need to be protected from access by unauthorised people. To this end configure your server so that only users in the shipment group have access to the shipment directory, and only users in the payment group have access to the payment directory.

    Create a password file called password and group file called group, containing the following -

     

    Username Password Group
    bsmith bessie payment
    bguy blue shipment
    jtull ian  

    The password and group files must be placed in the order directory. These files must be protected by configuring the server so that noone can download them!

     

  6. Create your own 404 Document not Found page. Configure your server, using the site directory access file, to display your 404 page when there is a request for a non-existant document.

     

  7. In the help directory document this assignment and include links to the source of ALLyour CGI scripts, configuration files etc.

 

Notes:

  • CGI scripts are to be written in C. No other language will be accepted. The reason for this is that we can only support one language and most students have had experience with C.

    The libCGI library in C is supplied to simplify the task of writing scripts.

  • When writing the client's order file and payment file remember these files must be written into the directories order/shipment and order/payment The script needs to know where these directories are without having the path hardwired into the script. One way to do it is to extract the path information from the CGI environment variable SCRIPT_FILENAME. The order script should reside in the directory order

     

  • When creating the shipment-file and the payment-file, both files should have the same name (in different directories) and the name should be unique. A simple way to create a unique filename is to use the process identification number of the running script. For example

    #include <unistd.h>
    char filename[6];
    sprintf(filename,"%d",(int)getpid());
     

    Please note that for a busy commercial site this is NOT the best way of constructing a unique filename - the process id can recycle easily within a day.

     

  • This assignment must work on a Linux machine. All URLs must be relative. All CGI scripts must be handed in as executables and as source. CGI script executables should have filenames ending in .cgi so that they can run in any directory.
  • The directory configuration file should only appear in the shipment and the payment directories. Do Not use global configuration directives as the directives will Not be submitted with the assignment.
  • Please note that on a commercial site a password file would NEVER be placed in the document tree.

source

g-top.gif (311 bytes)


Created on 18 Nov 2002. Last revised on 19 Nov 2002
Maintained by Tralvex Yeap