Web编程代写、Java程序代写

日期：2021-10-02 10:56

Web Tech Assignment 1

Assignment 1

This assignment explores some of the different methods to incorporating dynamic content into a website.  This document is for all students regardless of their study mode and the assignment must be done individually.  This document specifies the minimum requirements to get a passing grade – the more effort you put in the better the outcome!

Each person is to complete the Assignment 1  that utilises the existing AmazonOrders test database.  There are several tasks to complete as outlined below

1.An item recall page using a ViewModel

2.An item recall detail page using a ViewModel

3.An annual sales graph

1.Download the Assignment Web Application

The web application has been pre-built complete with the AmazonOrders model.  You will need to update the connection string in your web application to use your local copy of the AmazonOrders database.  This is the same as used in the practicals.    

2.Create a new Controller

You will need to create a new controller to use with your pages or update the existing Home controller with new actions – either approach is acceptable. Your new controller will need to support views and/or return JSON formatted data for each of the following tasks.

Tasks

1.Item Recall page [30%]

This page allows the sales team to search for items that may need to be recalled.  The page provides an auto-complete search text-box that shows a list of matching item names as the user enters search terms. If a partial match is entered, then all item names containing that partial match are returned in a table (see example below).  This page must:

?Provide the auto-complete item name search using either @razor or JavaScript fetch request

?Provide the ability to limit the results by customer order year

?The page must initially load with no data and only show matching records once a search has been performed

?The search must include text of at least 2 characters otherwise it should be blocked by model validation.

?The page must use model display properties (such as display name) where appropriate

?Must only utilise a model/ViewModel for all displayed data and search data.  The ViewBag/ViewData object can only be used for setting the page title.  This includes the auto-complete list and the year list.  These may be generated using tag-helpers, @foreach OR JSON data generated by an action(s) in your controller.

?Hovering over a row in the table highlights the row

?Clicking on a row opens a Recall Detail page in a new tab with the correct item and year selection (requires JavaScript)

For full marks, your query needs to return the number of items sold (units sold) in addition to the number of effected customers (make sure you account for the fact a customer may purchase several of the recalled item).  You may wish to use additional Lambda features such as .ThenInclude() or multiple queries.  You may find the following links useful:

?Efficient Querying

?Complex Query Operators

?IQueriable Methods (Average, Sum etc)

Example Recall Search Page

The page initially loads with no data

Example Recall Search Page with auto-complete list

Example Recall Search Page with matching data returned for all years/customer order dates

Example Recall Search Page with matching data returned for 2020 only and a row being selected

2.Item Recall Detail [30%]

This page allows the sales team to view detail of the selected item being recalled as well as a list of all the customers who purchased the item, their address and available contact details (main phone number, secondary phone number and email, where available).  This page must:

?Show all the necessary details of the product being recalled (title, cost, description, image etc)

?List the customer details including the address, suburb, postcode, region etc

?Show the number of units of the recalled item the customer purchased for the given year

?Show the total cost in currency format of the recalled item to that particular customer

?Make use of Model display properties.

?Must only utilise a model/ViewModel for all displayed data.  The ViewBag/ViewData object can only be used for setting the page title.

3.Item Sales Report [30%]

On a more positive note, it would be good to produce a report for management that shows the popularity of the different items in the Amazon store.  You will need to create another View for the Annual Sales Report.  This report should be triggered by selecting a given report year based on the available customer order data in the database.  The Annual Sales report page must implement the following:

?It must not load with a report showing

?A Drop Down list containing the available order years (most recent first).  This can be generated using @razor a fetch request with JavaScript.  You do not need to use a ViewModel for this page :)

?When a year is selected, a horizontal bar graph is generated using plain JavaScript and D3 V7 (no other libraries can be used).

?Each item needs to be clearly represented on the y-axis in alphabetical order

?Each bar needs to reflect the number of units of that items sold for the selected year

?Each bar needs to include text showing the number of units sold.

?The bars need to be animated so that they grow from left -> right in a reasonable time

?The graph needs to look nice and clearly highlight the good (highest) and poor (lowest) performing items.  This could include making the item name text a different colour!

?When the year is changed, the original graph should retract before the next graph is displayed.  You may find examples using the end animation function useful (example1, example2) or search for other ideas.

To help you get started, a ReportController complete with AnnualSalesData Action has been created for you that returns the necessary Graph data in JSON format.

Example Annual Sales report

Note that this report is still missing some important features you need to implement:

?It should include a text title stating “Sales for [year selected]” in the SVG graph

?The x and y axes need labels like “Item Name” and “units sold”.  Make sure you reserve enough space for these elements to be included.

Example Graph gradually building up to correct counts (animation)

Example graph showing shrinkage on year change to 0 ready for new graph

Example graph showing almost complete shrinkage to 0 ready for new graph

4.HTML Validation (10%)

Your pages will need to generate valid HTML.  We suggest you use the W3C HTML validator to check this!  You need to use appropriate class names, bootstrap classes where possible and avoid using IDs where you can.  

Overall Requirements

For server-side queries you must use Entity Framework LINQ or Lambda expressions – no SQL statements are permitted.

For JavaScript you must use either the plain JavaScript language and web browser APIs (DOM, Fetch etc) or D3 only.  You are not allowed to use other libraries like jQuery etc.  You must use Lambda expressions/arrow functions and JavaScript `${xx}` expressions where appropriate/possible.

Any new Model/ViewModel classes you create need to be placed in the ViewModels folder.

Any CSS you want to include must be done either using the site.css file or using the styles render-section provided.  

Once you have completed your assignment, upload the individual files (not zipped) you worked on to the course page (your models/ViewModels, controller classes, view.cshtml files.

Presentation

During your scheduled practical class in Week 10 you will need to present your code in class to the tutor and answer questions on how it functions.  You must do this to receive a final grade for this assessment. Everyone must present their work for assessment in this way.