PHP web开发代写: COSC2413/2426/2453 – Web Programming

Instructions 2

Overview 2

Requirements 3

1. Website Page Structure 3 2. Page Details / Content (4 pages) 3 3. Colour, Layout and Style (CSS and Design Component) 4

4. Product Page Content (Javascript Component)

Marks Allocation

20 marks or 20% of your final grade
Website structure (5 marks)
Layout and style (9 marks)
Forms on Login and Product pages (2 marks) Quantity buttons and form validation (4 marks)

4

5

5 5 5 5 5

COSC2413/2426/2453 – Web Programming

Page 1 of 5

Instructions

Students may work ​individually or in ​groups of 2 for this assignment, but are encouraged to seek help from classmates and teaching staff.

Keep the ​wireframe.css​ stylesheet and button intact, this will help you during the development process and also your assignment marker to visually assess your website structure.

Please Note:​ If there are issues with your assignment that you need to fix before marking can the place, a temporary mark of 0.25 will be assigned until your assignment is ready for marking.

Do not use a framework in assignment 2, eg Bootstrap is not allowed. You may use Skeleton in assignment 3: ​http://getskeleton.com/

Overview

Have a look around your local area. Find a business, a shop, a community organisation etc to develop a website for. Alternatively you may know someone who needs a website for their own business or community. Imagine now that the owner or manager (ie ​the client​) has engaged you to develop their website.

The website must sell at least 3 things that has two options, for example a clothing business must sell 3 things (eg TShirt, skirt, hat) that has at least 2 options (eg large, small). If this is not the case (ie for an actual “real world” assignment), please contact the instructor to negotiate alternative tasks. These must be equivalent to or slightly exceed the assignment specifications.

COSC2413/2426/2453 – Web Programming Page 2 of 5

Requirements

1. Website Page Structure

The client would like HTML5 standard pages constructed with a uniform structure across all pages:

1. Masthead area ​<header>

   Contains a logo and a business name, a chance to use your photoshopping skills

2. Navigation area ​<nav>

   Styled links to other pages (​http://www.w3schools.com/css/css_link.asp​ may come in handy)

3. Main content area ​<main>

   More details in next sections, but essentially “all the page details/content” inside other HTML 5

   semantic elements such as ​articles​, ​sections​, ​asides​; ie in addition to generic ​div​s.

4. Footer ​<footer>

   Client copyright notice, student name and id.

2. Page Details / Content (4 pages)

1. Home page: ​index.php
   With complete copy and content (ie no placeholder text/lorem ipsum) – ideally a mix of paragraphs and images that explain the client’s background, history and focus.
2. ALL Products/Services page: ​products.php​ or ​services.php
   One​ page that displays ​small images​ (or thumbnails) and ​brief descriptions​ of ALL the products / services. (at least 3 separate products/services, and we suggest no more than 10).
3. SINGLE Product/Service page: ​product.php​ or ​service.php​ – ​or facility
   A page or facility that displays a ​larger image​ and ​full description​ on ONE of your products / services, plus form controls. This page should submit to the instructor’s testing script, ie the form’s action should be set to ​https://titan.csit.rmit.edu.au/~e54061/wp/processing.php​. Detailed information on this task can be found in point 4.
4. Members login page: ​login.php​ – o​ r facility
   A page or facility that allows the user to login and logout. The page will ask for an email address and a password and should have a submit button. As per the above page, this page should submit to the instructor’s testing script, ie the form’s action should be set to https://titan.csit.rmit.edu.au/~e54061/wp/processing.php

NB:​ The processing script expects form data from ​login.php​, ​product.php​ or ​service.php​. If you are using a facility, add ​?ref={{facility}}​ to the end of the url, eg:

https://titan.csit.rmit.edu.au/~e54061/wp/processing.php?ref=product https://titan.csit.rmit.edu.au​/~e54061/wp/processing.php?ref=service https://titan.csit.rmit.edu.au​/~e54061/wp/processing.php?ref=login

COSC2413/2426/2453 – Web Programming Page 3 of 5

3. Colour, Layout and Style (CSS and Design Component)

Your pages must make ​extensive​ use of CSS to attract marks, with ​all CSS​ (… ie at least 95%) in shared external stylesheet(s). Pages must look good, have a neatly spaced layout, and uniform look and feel.

4. Product Page Content (Javascript Component)

For at least one of the products, there must be a form that uses javascript and submits form data (ie shopping cart information) to a test processing script. This script is found at the following url:

https://titan.csit.rmit.edu.au/~e54061/wp/processing.php

The form must submit using the post method and have the following properties:

• ●  A visible unit price to 2 decimal places for the product or service ​that is not submitted to the server​.
• ●  A hidden form field (eg ​name=’id’​) that contains a unique product or service code for this item.
• ●  A quantity field (eg ​name=’qty’​) allowing only a p​ ositive integer​ (0 is allowed) which represents the

  number of items being ordered. A customer must also be able to enter an amount directly.

• ●  A minus ( – ) and a plus ( + ) button that updates the quantity field described above by 1 unit. A

  version of this (taken from Dick Smith / Kogan’s website) is below:

• ●  A drop down field (ie ​name=’option’​) that contains secondary information, ie size, color or some other product / service differentiation that will be dependent on your client.
• ●  A submit button (can be called “Add” or “Buy” etc)
• ●  The form won’t submit if the quantity field is not 0 or a positive integer.

COSC2413/2426/2453 – Web Programming Page 4 of 5

Marks Allocation

20 marks or 20% of your final grade

Website structure (5 marks)

1. All 4 pages (or facilities) present at correct urls.
2. Uniformly indented and well formed HTML code throughout.
3. Appropriate use of key HTML5 semantic elements.
4. No HTML4 styling tags or attributes present.
5. Thoughtful and well composed page imagery and content throughout.

Layout and style (9 marks)

6. Colour scheme has good contrast, there is a clear brand guideline in place.
7. Attention to alignment and proximity is evident, logical areas visually distinct.
8. Good use of padding and margin, no dead spaces or cramped content.
9. Thoughtful and stylish navigation styling, distinct hover / active effects.
10. Navigation links styled using the grouped ​L​o​V​e ​HA​te rule.
11. At least two webfonts are used extensively throughout the site.
12. Webfonts are readable, heading fonts larger and more stylish than normal text.
13. Efficient and extensive use of external CSS, contextual selectors used throughout.
14. Advanced CSS styles are used tastefully such as shadows, transitions etc.

Forms on Login and Product pages (2 marks)

15. Form controls are correct, data is sent to the processing script using the post method. 16. All fields present and are correctly named.

Quantity buttons and form validation (4 marks)

17. Quantity buttons exist, minus on left and plus on right of quantity field. 18. Clicking buttons updates the quantity by 1 and -1.
19. Clicking buttons do not update with negative or non-integer quantities. 20. Form does not submit unless a positive integer (1 or more) is entered.

1 mark 1 mark 1 mark 1 mark 1 mark

1 mark 1 mark 1 mark 1 mark 1 mark 1 mark 1 mark 1 mark 1 mark

1 mark 1 mark

1 mark 1 mark 1 mark 1 mark

Total:​ ​20 marks (or 20% of your final grade)

COSC2413/2426/2453 – Web Programming Page 5 of 5