Assignment 1: Website Design and Development
Due 9:00am Monday, 13th August 2018
Introduction
Matt Johnston, the manager of the local furniture shop, is attempting to setup an online furniture website. He has found a free online furniture shop template but needs help to implement and populate it with contents.
Requirements
1. Currently the online furniture store template provides “home”, “shop”, “site” relevant pages. It includes web forms, such as: search, order, contact, register forms.
The above forms are not ‘active’ at this stage (in assignment 1); that is, if the user clicks on the Submit button, nothing should happen.
2. The manager Matt also wants to use XML to develop a catalogue of all the furniture products. In the first step, you are asked to create a sample catalogue including the provided twenty (20) furniture products using XML technologies. The sample website details have been provided here. You have the freedom to use your own product images and details. Please do NOT use the dummy contents generated by Lorem Ipsum site.
For each product, your XML record shall include at least six (6) child elements and these will be nested with at least 3 levels. The following information is used as a guide only. Feel free to choose your own element names and orders.
- <CATALOG>
<PLANT> <!– level 1 nesting –>
<NAME> <!– level 2 nesting –>
<COMMON>Bloodroot</COMMON> <!–level 3 nesting –>
<BOTANICAL>Sanguinaria canadensis</BOTANICAL> <!– level 3 nesting –>
</NAME>
<ZONE>4</ZONE>
<LIGHT>Mostly Shady</LIGHT>
<PRICE>$6.44</PRICE>
<PHOTO>bloodroot.gif</PHOTO>
</PLANT><PLANT>
<NAME>
<COMMON>Columbine</COMMON>
<BOTANICAL>Aquilegia canadensis</BOTANICAL>
</NAME>
<ZONE>3</ZONE>
<LIGHT>Mostly Shady</LIGHT>
<PRICE>$9.35</PRICE>
<PHOTO>columbine.gif</PHOTO>
</PLANT>
</CATALOG>
3. Develop Javascript and XSL to transform the XML information into HTML in an appropriate way when user browses furniture products on the website.
Requirements are:
- Use Javascript, XML and CSS to implement the rendering, filtering, sorting and pagination of furntiture products on page “shop-furniture.html” and “shop-accessories.html”.
- Use Javascript, XML and XSL to implement the rendering of details of a furniture product on page “detail.html”.
For example, when user clicks on SHOP-FURNITURE from SITE menu, Javascript code on page “shop-furniture.html” loads product XML file and renders all the furniture products with pagination on page shop-furniture.html. By default, six (6) products are displayed on one page. But user may change to “Show 12 products” or “All” products. The display will be updated accordingly. (Here is a pagination example)
When user selects FURNITURE > Chairs, only chairs are displayed; when user selects brand filters or sort-by, chairs displayed are updated accordingly. The requirements are applied to all the FURNITURE and ACCESSORIES categories.
When user clicks “View detail” or the image of a specific product in the product display area, user is led to detail.html page which is generated completely or partially by Javascript, XML and XSL. For example, Javascript code on page detail.html may pass parameters to an XSL to display the chosen XML element’s information.
The provided product layout on the category pages is just for your reference. You have the freedom to change it. However, it is recommended that your layout be similar to the provided one and be consistent with the style of the website.
4. Validate all code. (All the web pages must pass the official HTML specifications via http://validator.w3.org/)
5. All information used from other external sites MUST be acknowledged in Harvard referencing style. FAILURE TO DO SO WILL RESULT IN LOSS OF MARKS.
6. Add appropriate and consistent comments throughout the code created by yourself. Please state your name who changed the files and the date of any change as required by the license of the furniture shop software.
Submission
This assignment is worth 30% of the overall assessment for this unit. Your submissions (including the assignment submission form, XML and relevant documents) must use the dropbox that will be placed in the Assessment folder on CloudDeakin. DO NOT UPLOAD ANY OF THE CONTENT OF YOUR WEBSITE TO CLOUDDEAKIN.
All the files used within the web site must be placed ‘in’ your public_html folder (or in a suitably-named sub-directory) on your Deakin student account. The ‘front page’ for your web site should be named index.html (as provided by the template). You must check that all the internal links work.
A typical URL would look like http://www.deakin.edu.au/~shang/sit203/index.html where shang is replaced with your Deakin username name. You do not have to place the public_html reference in the URL as the server will automatically default to this directory.
Your assignment will be marked after the due date and the assignment result (with comments) will be sent back to you.
Extension
If you wish to apply for an extension, please contact your campus lecturer AT LEAST TWO DAYS before the due date; also attach what you have done. LAST MINUTE EXTENSION REQUEST WILL NOT BE GRANTED. The teaching staff will then make a judgement as to whether an extension shall be granted.