Assignment Part 1: Website Design and Development
Introduction
Will Goodman, the owner of the local pet store, is attempting to setup an online shopping website. He has found a free online Pet Shop template but needs your help to customize and populate it with contents.
Requirements
1. Currently the online Pet Shop template provides "home", "about us", "category", "special gifts", "details", "my account", "register", and "contact" pages, etc. It needs to include AT LEAST the following two web forms.
• A search form: for customers to look up details of pets and/or accessories.
• An order form: for customers to place an order for pets and/or accessories. The form should include but is not limited to: pets/accessories selected, customer contact details (name, phone number, email address, etc.), delivery address (unit number/street name, city, postal code, etc.) and payment methods (credit card number, expiry date, card holder name, etc.)
Based on the design of the provided website, you decide what new pages to create to accommodate these forms. The forms must not be 'active' at this stage (in assignment 1); that is, if the user clicks on the Submit button, nothing should happen.
2. The owner Will also wants to use XML to develop a catalogue of all of the stores' information about pets and accessories. In the first step, you are asked to create a sample catalogue including at least ten (10) different categories of pets and/or accessories using XML technologies.
For each pet or accessory, 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.
•
Bloodroot
Sanguinaria canadensis
4
Mostly Shady
$6.44
bloodroot.gif
bloodroot.html
Columbine
Aquilegia canadensis
3
Mostly Shady
$9.35
columbine.gif
columbine.html
3. On category.html page, develop XSL to transform the XML catalogue into (X)HTML in an appropriate way. When users browse the translated category, they go to the detailed (X)HTML page of a selcted pet or accessory on the Pet Shop website.
4. Validate all code. (All the web pages must pass the official (X)HTML specifications via https://validator.w3.org/ and CSS specifications viahttps://jigsaw.w3.org/css-validator/)
5. Will has prepared basic website information/details. When populate the website with the information/details (definitely NOT the dummy contents generated by Lorem Ipsum site), use appropriate text, colour, and images. Consider response times and low bandwidth requirements, ie: use small file sizes and limited use of graphics. You might have to process some images to suit the size and color requirements of the site. No broken links.
6. Please feel free to customize the Pet Shop template. E.g., add or remove unnecessary links. All information used from other external sites MUST be acknowledged in Harvard referencing style. FAILURE TO DO SO WILL RESULT IN LOSS OF MARKS.
7. Add appropriate and consistent comments throughout the code. Please state your name who changed the files and the date of any change as required by the license of the Pet Shop software.
8. The following statement MUST be included at the bottom of all web pages developed.
"©Deakin University, School of Information Technology. This web page has been developed as a student assignment for the unit SIT203: Web Programming. Therefore it is not part of the University's authorised web site. DO NOT USE THE INFORMATION CONTAINED ON THIS WEB PAGE IN ANY WAY."
Assignment Part 2: Implementing a dynamic web site
This Part of assignment is BIG!!! Start it as early as possible.
Introduction
You are to apply all the Web technologies (DOM, XML, Flash, Ajax, PHP, Oracle, etc.) learnt from lectures and practicals to make the site that you created in Assignment One fully functional. That is,
• To create a flash introducing your products/services(e.g pets and accessories) on your website.
• To validate the order form using Ajax and PHP on server side. User's input is validated on the fly. If error is found, appropriate information is displayed.
o All required fields should be checked for completion, and all data that are entered should be checked for 'correctness'. For example, products/services selected, buyer contact details (name, phone number, email address, etc.), delivery address (unit number/street name, city, postal code, etc.) and payment methods (credit card number, expiry date, card holder name, etc.) are fields expected in the order form to be validated.
o Regular expression is recommended for pattern matching in PHP.
• To develop the system to respond to the forms by accessing your products/services XML files, querying your Oracle database, generating contents, and adding information to the database. Your PHP code needs to be used to enable
o search sugguestions: a suggest/autocomplete box similar to Google Suggest, where a user gets suggested products/sevices while typing in the search form.
Example: User is typing a pet name:
dog
Suggestions which would be displayed:
dog poodle
dog chihuahua
dog German Shepherd
dog boxer
o search function: the search form responds to user's input with retrieved information from server side.
o shopping cart: it allows a user to place items in the cart and calculates a total for the order, including shipping and handling (i.e. postage and packing) charges and the associated taxes (e.g. GST), as applicable upon checkout. After checkout, all the data from the completed form will be inserted into the relevant table. A receipt page confirming the order that has been made should be displayed or in the event of an error, an appropriate error message should be shown to the user. The stock level is updated accordingly in Oracle database.
• To implement the "my account" and "register" function on your website.
o On "my account" page, a user can view his last three months' order(s) if any.
o Once logged on, user's registered name should be displayed at a proper location on the pages accordingly.
o When a logged on user makes an order, the shipping details in the order form can be auto-filled directly with the information collected on register page. The details should be editable. (note: you might need to change the register form to accommodate more information fields used in order form.)
You are permitted to change the forms that you created for Assignment One if you believe that they can be improved for the purposes of this assignment.However before receiving your assignment 1 mark, please do not modify the orignial html pages. Copy them to another folder and then copy them back later after the assignment 1 mark be finalized.
Requirements
General requirements include:
• Properly sized flash. The images (and sound if any) used in flash should be appropriate and related to your website products/services (e.g. pets).
• Appropriate server side Ajax and PHP validation of all data. You must provide necessary validation of all form fields where appropriate. You must decide what validation is required and how the validation is performed. For instance,
o Are all the required fields checked for completion?
o Are the fields which require a specific length, numeric data or a predetermined format (for example, contact phone numbers, postal codes, credit cards, street numbers) properly checked?
o Do the messages provided while validation help the user fix the 'problem'?
• Well developed and structured PHP code. Write functions to re-use code for common tasks. The code should be clear and properly indented; use meaningful variable names; and be free of errors.
o Your PHP code should maintain users shopping cart, connect to the relevant Oracle database tables, and disconnect 'safely'; it should also generate readable and reasonable output for the user. For instance, if an order has been accepted successfully, a receipt/confirmation page should be sent back.
• Well documented code. Appropriate and consistent comments should be placed throughout the code. The comments should be sufficiently detailed to allow an assessor to understand what it is doing without having to spend too much time on your code.