Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

DDWT Assignment Two

Environmental Data.

All work is to be done individually and must be your own work. You must not share your @razor code or SQL with anyone else.  You must only submit code you have personally written (with the exception of utilising bootstrap html template examples). If you use other resources, you must include direct links to those resources as HTML/@razor comments at the bottom of the relevant files.

Your task is to complete several web pages to search, view and add data relating to our Environmental Statistics database. Do not leave this to the last minute as it is not possible to finish the project without prior thought to the implementation.  Writing queries is one thing but implementing SQL with programming logic in @Razor and HTML combined with Bootstrap presentation does require serious thought to get the desired functionality and outcomes!

Task

A web application containing the necessary database and MVC Views has already been created for you.  This can be downloaded from the assessments tab on the course website.  Your task is to complete several pages:

1. Views/Regions/Index.cshtml

2. Views/Countries/Index.cshtml

3. Views/Countries/Detail.cshtml

4. Views/Cities/Index.cshtml

5. Views/Cities/Detail.cshtml

with the necessary layout using the WebMatrix data library, HTML, bootstrap v5.x and @Razor code.

Start by working on the Regions/Index page that allows a person to search the database for countries by the region they reside in.  You will need to determine the best layout to present the data to our users and ensure you implement HTML Validation to reduce errors. Once this is working, start implementing the other pages in the order above.

Task 1: Regions List [15%]

url: Regions/Index

This page should list the Regions available in alphabetical order.  The first item in the list should be an “All Regions” option so that records not related to a region can be found and viewed:

· There are only 10 or so regions in the database so don’t display them in a table.  Instead use something that is visually pleasing like bootstrap cards or columns with a background color border and padding.

· You need to find some sort of image to accompany your regions.  An “imageUrl” field has been provided in the database for this purpose.   Alternatively, you could provide your own professional CSS background color for each region.  You can store this color in the imageUrl field or a className in the field and then use the Site.css file in the Content folder to specify the various styles for that region.

Task 2: Countries List [15%]

url: /Countries/Index?regionID=xx

This page will change its behaviour depending if a region has been selected from the previous page.

1. If no region has been selected, then the page will list all the country records not associated with any region.

2. If a region has been selected, then the page will list all countries associated with that region.

Regardless of which mode, the countries listed will be in alphabetical order.  In addition to the above behaviour, this page must:

· Clearly show the region selected using some sort of bootstrap styled panel.  An example could be an Alert box, card or just a typical column using the background colors available etc.  You could make use of the borders and padding etc.  It needs to look good!

· The Countries need to be displayed using some sort of card/column layout (not a table).

· Each Country needs to have two buttons available to choose what happens next:

o View emission and annual Temperature Data

o View the cities.

· The page itself, also needs a button/link to return back to the region list.

Task 3: Country Detail [20%]

url: /Countries/Detail?countryID=xx

This page should display all the emission and temperature data for the selected country.

· Firstly, make sure it displays the name of the country, and where available, the region the country belongs to.

· Secondly, it needs to display all the emission and temperature data for the selected country and for each year this data is available.  You need to decide on the best presentation to use – you could use an oversized bootstrap card to present the country and maybe a bootstrap table or grid layout for the actual data..

· An imageUrl attribute has been provided in the database so that you can include an image for the selected country to improve your layout (or custom CSS as above).

· A button should also be provided on this page to view the Cities in the selected country

· A button should also be provided to return the user back to the Countries List for the selected region

Task 4: Cities Index [20%]

url: /Cities/Index?countryID=xx

This page will be linked to Task 2 via the cities button and needs to list the cities in the selected country that have data in our database.  As with before, the page needs to include several core components:

· The page needs to show the name of the country and region name (where available)

· A button needs to be provided to take the user back to the previous step.

· Each city should indicate the earliest and latest year for which we have air quality data in addition to how many air quality data records as present (default 0 if none are available).

· A link to view the Air Quality Data for the selected city.

· Some countries have many different cities (over 100 listed for Austria alone).  Thus it is important to provide a search textbox to limit the number of cities to names that start with the search text provided.  Were no search text is provided, then show all the cities in alphabetical order for the selected country.

Task 4: Cities Detail [20%]

url: /Cities/Detail?cityID=xx

This page will be linked to Task 2 via the cities button and needs to list the cities in the selected country that have data in our database.  As with before, the page needs to include several core components:

· The page needs to show the name of the City, Country and Region (where available)

· A button needs to be provided to take the user back to the previous step.

· You then need to show the Air Quality Data for the selected City for each year.  This includes:

o The Item and Element information

o The year

o The various values from the Air Quality Data table

o The number and type of monitoring stations used to gather the data

Mark Breakdown

Pages [90%]

· Correct SQL statements

· Correctly structured HTML in pages

· P Grade: Basic bootstrap implementation, basic query implementation, very simplistic.  Basic HTML and HTML Forms understanding.

· C Grade: Good bootstrap implementation and some investigation of bootstrap documentation.  Basic usage of bootstrap utilities.  SQL queries acceptable, somewhat optimised.  Code quality basic including expected HTML Forms attributes etc.  Consistent layout and professional looking pages as expected when using bootstrap CSS correctly.

· D Grade: Excellent use of bootstrap documentation and classes demonstrating investigation and experimentation of what’s available to create excellent looking customised layouts.  SQL Queries are optimised, well crafted, page structure shows in-depth knowledge and thought of functionality.  HTML is optimised to reduce errors and improve user experience.  SQL demonstrates thought and includes aggregate and sub-queries to provide additional and useful information.  Professional looking pages

· HD Grade: Extensive exploration of bootstrap documentation and classes to create a custom layout using the available classes.  Tasteful/professional overriding of some bootstrap style properties using bootstrap matched classes using the /Context/Site.CSS file.  Razor code demonstrates experimentation with conditional statements around HTML, managing various value conditions with suitable messages, well structured and thoughtful code to reduce errors.  SQL demonstrates thought and includes aggregate and sub-queries to provide additional and useful information that is efficiently combined with Razor Code.  Professional looking pages.

HTML Validation [10%]

· Check that your final generated HTML is valid and does not contain any errors.  You will need to run your page, then right click on it in the web browser and select “View Source” to check the html.   Images should have custom alt text etc.

Domain Model Diagram

Note: ImageUrl can be used to store the url link of images you find online OR custom CSS class names that you have created and used in the Content/Site.css file.