Web Project Specification – Practical Requirements
In this project, each student is required to design, develop and test a website for the Fitzroy Catholic Bookshop. The Bookshop has a catalogue of their products, which are categorised as follows:
- Audio Books
The Bookshop sells products from the following Publishers:
- Harper Collins
- St Pauls Publication
- Franciscan Media
The following information is stored for each item:
- ISBN (which is a number that uniquely identifies a product)
- Author(s) / Artist(s)
Product information can be entered via the Website and stored in a text file.
You will need to write web pages in XHTML, CSS and write server-side scripts using Python. You will also need to apply the design and programming concepts and techniques you have learnt in this subject in order to implement a successful web application.
The project is to be developed in two stages:
The aim of Stage 1 is to design the client-side of the Website. You will not be assessed at this stage, but submitting it in time for feedback is crucial to the success of your project. You are required to design and layout the web pages, and the necessary forms for user input using XHTML, and CSS for presentation
Required Web Pages:
The following pages must be implemented as a minimum:
This is the main page of the site. It must contain at least a picture that represents the company or the company logo, some explanation of the website, what services or functionalities it provides and briefly how to use them.
Site Map Page
This page must show a list of all pages on the website, as well as links to these pages. You do not need to include the Catalogue Search Result Page in your site map. (It will be generated dynamically in Stage 2).
Catalogue Search Page
This is the form where user can search for products in the catalogue based on category, or publisher, or within a price range, or a combination of any these criteria. For instance, the user can choose to view all Videos, or they can choose to view all Videos under $30, or they can choose to view all Videos published by Franciscan Media between $20 and $30. The user can also choose to view products in all categories, and/or by any publisher, and/or at any price.
In Stage 1, you need to design the page layout and UI elements required to allow for these functionalities. You may hard code the categories and publishers in your HTML code.
Catalogue Search Result Page
This is the page that will display the search result from the Catalogue Search Page. It will be generated dynamically as the search is carried out (which you will implement in Stage 2).
In Stage 1, you need to design the page layout and UI elements to:
- Display 5 product records. All details of each product (as listed in the Overview section) must be shown
- Highlight the products with quantity-on-hand less than 5
- Display the total number of products that satisfy the search criteria
Catalogue Maintenance Page
This is the form where user can enter product details that are listed in the Overview section. In Stage 1, you need to design the UI elements required to allow for this functionality, as well as the layout of the page.
Required Web Page Elements
The following page elements must be included in all web pages:
Company title and logo
The company title is “Fitzroy Catholic Bookshop”. The logo can be any reasonable thing you create.
The navigation bar must include links to the following pages.
- Site map
- Catalogue Search
- Catalogue Maintenance
There must be a way to know which page is currently active. One way of doing it is by using breadcrumbs, for instance, Home → Catalogue Display indicates that you are currently viewing Catalogue Display page, which is under the Home page. You may choose to use this or another suitable way.
This is the main space of each page in which the UI elements required to carry out the functionalities of the page are placed, or the result of carrying out these functionalities are returned and displayed.
Technical and Design Requirements
You should write your web pages in XHTML. It should validate using the