Assignment title: Information
Swinburne University of Technology
Faculty of Science, Engineering and Technologies
COS10011 / COS60004 / COS60007
Creating Web Applications [and Databases]
Assignment Part 2, Semester 1, 2017
Develop an interactive Website
Important Dates:
Due Date ESP Week 8 - Normal day of you tutorial: 25-28 April,8 am.
(Late submission penalty: 10% of total available marks per day)
Demonstration Your tutorial: Week 8
Note: due to the ANZAC day public holiday on Tuesday 25 April, students who
normally have Tuesday Labs should demonstrate in Labs on 26-28 April.
Extra demonstration Labs have been scheduled for: 10:30 Wed 26, 2:30 Thurs 27,
and 12:30 Fri 28. Details will be announced on BB
Contribution to Final Assessment: 14% (Hurdle)
Hurdle: You must meet the Essential Requirements of this assignment to be eligible to submit Part 3.
See the making guide for the Essential Requirements for this part of the assignment.
Purpose of the assignment
To gain practical skills and knowledge in coding and using JavaScript, by adding dynamic behavior and
extending and enhancing the website you developed in Part 1. In particular, you will:
Use JavaScript to validate data entered into HTML forms and provide user feedback,
Understand the ways that data can be stored locally and be transferred between web pages,
Use client-side data storage to transfer data between pages,
Understand how, and check that, hidden form data is correctly passed to a server-side script.
As in Part 1, there is an opportunity to enhance your website beyond the basic requirements.
Note: Do not use JavaScript libraries or frameworks (e.g. jQuery, Angular) in this assignment.
Note: This assignment must be demonstrated in you Lab.
The code that is assessed in your demonstration must be identical to the code you submit to
ESP. This will be checked before the demonstration.
Prerequisite
If you failed to meet the Essential Requirements of Part 1, then you must demonstrate that you have
fixed these problems before this part of the assignment is submitted and marked.
It is advisable to get these fixes completed and signed off well before you hand in this part of the
assignment.
How to get your fixes signed off:
1. Arrange a time with your tutor to check your work during your allocated tutorial or during a
consultation time.
2. Bring a copy of the ESP assessment printout from Part 1
3. Your tutor will check that your fixes to Part 1 address the issues identified under the Essential
Requirements on the mark sheet.
4. If the fixes are successful, your tutor will record this and you will be eligible to have this
assignment assessed. If there are issues that have not been fixed, your tutor will inform you
of this and you will have a further chance to fix the assignment.
Note that any fixes will not alter the mark you received for Part 1.COS10011/6004/6007 Creating Web Applications Assignment Part 2–2017 S1 Page 2 of 7
Web Site Description
Extend your Part 1 website by: modifying your existing enquire.html page; adding an additional
payment.html page to enable a user to enter payment details for a selected product/service;
adding JavaScript data validation to your forms; using JavaScript to store data client-side and transfer
data between web pages, and correctly passing all the data to a server-side script.
Implement your Web site in standard HTML5; that is also well-formed XML; that is styled with valid
CSS3; and that has dynamic behavior coded in ‘strict’. JavaScript.
If you wish to make other alterations to the HTML and CSS in your Assignment Part 1 that is OK, but
you must keep your assigned product/service topic.
1. Modify your enquire page (enquire.html)
Extend the form to enable a user to purchase a product/service that they have selected.
You will need to:
Add some price details for various items in the product/service range, and add extra options
where applicable.
Add one or more fields so a user can select the quantity of the product/service to be
purchased. For a product, the quantity might represent the number of items. For a service, the
quantity might represent the dates of hire, or the number of days.
Change the ‘submit’ to ‘Pay Now’ with a link to the payment.html page, where the user
can view their product/service selection and can enter their credit card details.
The user should only be able to go to the payment page if all the necessary data in the form
has been validated. A user should not be able to ‘Pay Now’ if they have not chosen a
product/service, or the ‘quantity’ is inappropriate. (See required validations later.)
2. Product Payment page (payment.html)
This additional product/service payment page will:
Display the customer’s details, together with the product selection details that a user has
entered in the form on the modified enquire.html page.
Display the calculated total price of the purchase.
Display a form that will allow the user to enter credit card payment details:
a. Credit card type (e.g. Visa, Mastercard, American Express) – no valid default selection
b. Name on credit card
c. Credit card number
d. Credit card expiry date (mm-yy)
e. Card verification value (CVV)
When a customer decides to proceed with the order, a Check Out button should submit the form, and
all the customer and product information to the server-side script. (So you check that all name-value
data has been correctly submitted.)
A user should also have the ability to Cancel Order, and if they cancel, the stored data should be
cleared, and they should be returned to the home page of the website.
Implement your website in standard HTML5, that is also well-formed XML.COS10011/6004/6007 Creating Web Applications Assignment Part 2–2017 S1 Page 3 of 7
Implementation of JavaScript (part2.js)
There should be no embedded and no inline JavaScript in your HTML files.
In other words, no event registration (e.g.