Reference no: EM132361534

Assessment : Server-Side Web Programming

Background

You have been approached to create two storefront websites for a storefront in Brisbane. Your choice will be the same choice you made as per your Assignment 1 and 2 works. You must create the websites to be as realistic as possible for a normal organisation.

The organisation has requested two websites: A public website with information about the organisation and an internal website that members of the organisation will use for day-to-day management. For assignment 3, you are now tasked to create the internal website.

This assignment is part of a running scenario for all assignments in this subject, where the Brisbane storefront will continue to be your client. Please also refresh your memory regarding the additional background information provided previously in Assignments 1 and 2.

The tasks of this assignment are organised as follows. Tasks 1-5 first describe the functional requirements of the website, regarding what each of the web pages will do. Then Tasks 6-10 describe the non-functional requirements regarding the behaviour of all parts of your solution. Note that some of the non-functional requirements have similarities to Assignment 2, so please read these carefully in particular.

Task 1: Home (index.aspx)

The home page is the entry point for the website. As this is the first page that will be viewed by the staff, it should be designed in an attractive manner.

The home page includes a GridView control that has a list of Purchases. The data will be taken from a XML data file and populated in the grid via the data binding technique. The fields will be for the following data: id, full name, email address, product name, unit price, quantity. Note that the value of the id field must always be unique. A sample data file with dummy data can be downloaded from where you obtained this assignment document. You must include a copy of the data file in your submission. You must also demonstrate your familiarity in  working with the data file format by modifying and/or extending the data.

The home page also includes a Label control with a one-sentence summary about the following: number of "big orders" (i.e.: quantity of 10 or more). Your data file should therefore have a mixture of records to make this output meaningful.

Task 2: Add record (add.aspx)

This page is a form that allows the user to make changes to the XML data file by adding records one at a time. An appropriate form field is given for each field of the record. Regarding the id field, this is omitted, and instead your solution determines what the new id will be at the end. Validation must be implemented in all form fields. In addition, a submit button will save the new data to the data file. The contents of a label will indicate a success message when done.

Task 3: Invoice (invoice.aspx and print.aspx)

This feature will allow administrators to prepare a printable invoice. It is divided into two pages:

invoice.aspx and print.aspx.

invoice.aspx page:

This page collects details about the invoice items. The form is designed to accept 3 rows of data for the invoice. A mock-up of the interface is below:

Some notes about the interface:

Full name of invoicee: Must be no longer than 50 characters to be valid. Required.

Item name: Must be no longer than 100 characters to be valid.

Unit price and quantity: Text boxes that must be validated to receive non-negative numbers only. A maximum of “1000.00” is allowed for unit price and a maximum of “100” is allowed for quantity.

Submit: Validates the form and submits the form if valid. User is taken to the print.aspx page after submission.

The interface must also have appropriate validation controls and a ValidationSummary control at the end. Validation for individual inputs will be sufficient, and you may omit validation for whole rows of inputs in combination.

Task 4: Stocktake (stocktake.aspx)

This page allows administrators to take a general stock inventory for any day-to-day items related to the organisation. Examples could be food, beverages, consumables, stationery, equipment, etc.

The stocktake form will allow the user to enter up to three rows of items. The form will be “preloaded” with dummy data to simulate taking the data from a data source.

The stocktake form also has a text input for the “reorder level”. The reorder level is the level that the stock must be replenished to. Only stock that has dipped below the reorder level needs to be replenished back to the reorder level.

Some notes about the interface:

Reorder level: Read only. Default 10. Modified with “-“ and “+” buttons. Range is 0 to 1000. Additionally performs the function of the “Calculate” button (see below).

Item name: Must be no longer than 100 characters to be valid.

Stock quantity and unit price: Required. Text boxes that must be validated to receive non-negative numbers only. A maximum of “1000.00” is allowed for unit price and a maximum of “100” is allowed for stock quantity. May be set to zero to indicate unused rows.

Reorder quantity, subtotal and total: Derived data in labels.

Calculate: Validates the form and recomputes calculations (if valid).

Task 5: Chart (chart.aspx)

This page includes an ASP.NET Chart control to model data for the organisation with the Chart Type is set to Line. The data will model the total earnings for last 5 years.

You only need to populate the chart with static data. I.e.: You are not expected to perform any data binding. It does not matter if your data does not automatically update to remain consistent with any other page in the site.

The chart must be given attention to detail for its presentation, including all components that you may expect for this type of chart: title, axis labels, data labels.

Task 6: Organisation

The following organisational aspects must be put in place for your solution:

(1) Programming language:

The website will be a server-side website using ASP.NET for the web forms and C# for the codebehind functionality. Other language combinations will not be accepted (such as Visual Basic for the code-behind functionality). Some HTML and CSS may also be used where appropriate.

(2) Third-party components:

The website will be hand-coded by yourself. Therefore, you may not include any third-party components except for those mentioned in the assignment.

(3) Images:

Even though this “internal” website for Assignment 3 is not public-facing, we still expect you to use images in your website design. Store the images in a subfolder called “images”. Note that the website cannot use copyrighted images. To avoid this problem, you are welcome to use images with an open licence.

You can get these from free image websites or by performing an image search on your search engine with a “usage rights” filter set to “labelled for reuse” (or equivalent). Maintain a list of references in a file called references.txt in your solution with the name, author, location and access date of the images. You may reuse images from Assignment 2, provided these also follow the conventions above.

(4) Integrated development environment:

The website must be built using Visual Studio 2017.

(5) Template:

The website will be built from scratch beginning with an empty folder. Follow these steps:

a) Create a new folder called xxx_cse2icx_assignment3, where xxx is your student ID.

b) Open Visual Studio 2017. Select “File” -> “Open” -> “Website…” and select the new folder.

c) Select “File” -> “Close Solution” immediately. This will prompt you to save a solution file (*.sln suffix). This must be saved in your new folder. Close Visual Studio 2017.

d) Double-click on the solution file to open Visual Studio 2017 and your solution again. Continue to use this method for opening your solution going forward for convenience.

e) You are now ready to go. Add your project assets next.

Task 7: Layout

The body of the website pages must be organised to include distinct header, navigation, main and footer semantic tags with the following content:

1. Header: Site name and branding.

2. Navigation: Navigation bar.

3. Main: This is the main content of each page.

4. Footer: Copyright statement.

Task 8: Navigation

The navigation bar appears on every page of the website and contains the following aspects:

1. The navigation bar has links to the five main pages of the website (Tasks 1-5).

2. Each navigation item must be the same size.

3. The link for the current page is disabled and has a different colour/appearance.

4. The links for the non-current pages have a different colour/appearance when hovering.

5. The navigation bar is responsive, meaning that the menu options gracefully wrap to the next line when they cannot all fit horizontally on the screen.

Mock-up examples are as per Assignment 2.

Task 9: Presentation

The presentation of the website will largely be controlled by CSS with the following aspects:

1. All CSS code will be stored in a site-wide style file called styles.css and referenced on each web page.

2. The styling will include a variety of styling for layout.

3. The styling will include a variety of styling for content.

4. The presentation will endeavour to give the site a contemporary appearance, including HTML version 5 and CSS version 3 where practical.

A good way to test presentation is to perform cross-browser testing. I.e.: View your website in a range of popular web browsers and check that the presentation is consistent.

Task 10: Code

This task will award marks according to the quality of your code according to these aspects:

1. Code indentation is consistent with one level of indentation per block.

2. All ASP, C# and CSS file types each use some comments (<%-- comment --%>, <!-- comment -->, /* comment */ or // comment as appropriate, minimum of 3 per file type).

3. The Visual Studio 2017 Error List reports zero errors and zero warnings.