INFS 1025 Data Driven Web Technologies
INFS 1025 Data Driven Web Technologies
Assignment 2
Your task is to complete several web pages to search, view and add data relating to our Water Quality database. It stores data about water quality measures in Adelaide/SA water. 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:
Views/System/Index.cshtmlViews/Systems/Index.cshtmlViews/Systems/Details.cshtml
Views/Parameter/Index.cshtmlViews/Parameter/Create.cshtmlViews/Parameter/Edit.cshtmlViews/DisinfectionMethod/Index.cshtmlViews/DisinfectionMethod/Details.cshtmlViews/DisinfectionMethod/Create.cshtmlViews/DisinfectionMethod/Edit.cshtmlwith the necessary layout using the WebMatrix data library, HTML, bootstrap v5.x and @Razor code.
Start by working on the /System/Index page that allows a user to search the database for water quality systems by the region and town/suburb they supply quality water to. 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: Water Quality System Search [20%]
url: /System/Index
This page should provide a searching option to list the water quality systems based on the regions and towns/suburbs they supply water to. The page should:
load with no records displaying initially,
show the water quality systems in a table alphabetically ordered by the name of the water quality systems, then the regions and finally the town/suburbs. Each row in the table should have the information of a water quality system and include a link to the /Systems/Index page so that the user can view sample data associated with that water quality system,
perform searching with Starts With match, not Contains the word match with both the search criteria. If one or both search criteria are not provided, the search will not be executed and appropriate message should be shown, and
display message indicating that there are no matching records if the search returned no records.
Example Water Quality System Search
1a. Initial load or page without no search criteria.
1b. Page with no records returned.
1c. Page with records returned.
1d. Page with more specific search criteria and ordered table displayed.
Task 2: Listing Condensed Sample Data of Water Quality System [20%]
url: /Systems/Index?id=xx
This page shows the condensed sample data of a water quality system. Each row in the table will show the minimum, maximum and average of the values of the avgValue attribute recorded for a region and a test parameter.
The rows will be alphabetically ordered by the name of the regions and then the test parameters and include a link to the /Systems/Details page so that the user can view all the sample data associated with a water quality system supplied water to a region and having a test parameter.
Example Listing Condensed Sample Data of Water Quality System
2a. Condensed Sample Data of a Water Quality System
Task 3: Listing All Sample Data [20%]
url: /Systems/Details?rid=xx&sid=yy&pid=zzThis page should display all the sample data in a table for the associated region, water quality system, and test parameter. The rows in the table should be ordered by the record identification number. Each row should also be provided to view the disinfection methods used for this record by including a link to the /DisinfectionMethod/Details page.
Example Listing all Sample Data
3a. Sample Data of a Region, a Water Quality System, and a Test Parameter
Task 4: Listing Disinfection Methods [15%]
url: /DisinfectionMethod/Details?id=xx
This page will display the disinfection methods used for a particular record of the sample data. If there are no disinfection methods used, it should display appropriate message to the users.
Example Listing Disinfection Methods
4a. Disinfection Methods used for a Sample Data Record
Task 5: Listing and Modifying Test Parameters [15%]
url: /Parameter/Index
url: /Parameter/Create
url: /Parameter/Edit
The /Parameter/Index page will display the test parameters used in a tabular form. The row in the table should also include a link to /Parameter/Edit page to allow users to modify existing data of test parameters. Just below the table, there should also be a link to /Parameter/Create page to enable users to add new test parameter.
The /Parameter/Edit page will display the existing data of a selected test parameter. The user will be able to change few values as per the database design.
The /Parameter/Create page will automatically generate the parameter identification number and display it. The users will need to supply other values as per the database design.
Task 5 (Alternative): Listing and Modifying Disinfection Methods [15%]
url: /DisinfectionMethod/Index
url: /DisinfectionMethod/Create
url: /DisinfectionMethod/Edit
The /DisinfectionMethod/Index page will display the disinfection methods used in a tabular form. The row in the table should also include a link to /DisinfectionMethod/Edit page to allow users to modify existing data of disinfection methods. Just below the table, there should also be a link to /DisinfectionMethod/Create page to enable users to add new disinfection method.
The /DisinfectionMethod/Edit page will display the existing data of a selected disinfection method. The user will be able to change few values as per the database design.
The /DisinfectionMethod/Create page will automatically generate the disinfection method identification number and display it. The users will need to supply other values as per the database design.
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 whats 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.
Submission
Once completed, stop your application. Exit Visual Studio and then locate your visual studio project folder. Zip up your entire project and upload a single .zip file with file name username_DDWT_a2.zip, where the username is your university network username/email ID (e.g., bonjy007).
Domain Model Diagram
13517804153200
