Web Assignment
Restaurant / Customer tracker.
All work is 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, please include links to those resources as HTML/@razor comments at the
bottom of the relevant file.
Your task is to complete several web pages to search and view customer data and some information about
restaurants.
Tasks
A web application containing the necessary database, WebForms and MVC Views has already been created for you.
Your task is to complete several pages:
1. WebForms/A_Traditional/Index.aspx and Details.aspx
2. WebForms/B_Model/Index.aspx and Details.aspx
3. Views/Home/Index.cshtml and Details.cshtml
with the necessary layout using Traditional Data Controls (SqlDataSource, GridView etc), the Entity Framework and
MVC with @Razor code.
Task 1A: Customer Search and a Details List using Traditional Data Approaches [30%]
url: /WebForms/A_Traditional/Index.aspx
As a surveyor you want to check the information collected so far. To do this you want an easy to read table with a
search bar for identifying customers based on their first and or last name. This needs to meet several requirements:
● It needs to have bootstrap styled table and bootstrap styled search
● The page needs to be constructed using Traditional WebForm Data Controls (SqlDataSource, GridView etc)
and binding expressions <%# Eval(“xx”) %>
● The page should load with no records showing and return no records if no search criteria are provided.
● The user should be able to enter a name that is checked for matches against the firstName or lastName of
existing customer records.
● All searchers must use a “Starts With” match (i.e. not “Contains the word” but “Starts with the word”
entered). An example is presented below.
● When no search terms are provided, a message should indicate that a search needs to be performed
● If a search is performed and no records returned, a message should indicate there are no matching records
● If the search is successful, it should order the records in alphabetical order (lastName then by firstName).
● Each row in the table should include a link to the Details page so the user can view the customers favourite
food and information about restaurants that serve that.
Example Customer Search on 1
st page load or no search criteria:
Example Customer Search when no matching records returned:
Example Customer Search with matching records:
Example Customer Search with matching first and last name:
Task 1B: Restaurant Information
url: WebForms/A_Traditional/Details.aspx?id=xx
This page should show all the restaurants that serve the selected customers' favourite food. However you need to
make it user friendly:
● The page needs to display the selected user’s first and last names and their favourite food
● The page must include a table of all the restaurants that serve the “clicked on” favourite food including:
o The Restaurant's name
o Their founding year
o The description saved to the database
o The Restaurant’s logo
Example Restaurant List for selected Participant with favourite food shown:
Example response when no Restaurant information is returned.
Task 2: Customer Search and Restaurant Information using Model Binding Approaches[30%]
url: WebForms/B_Model/Index.aspx and WebForms/B_Model/Details.aspx?id=xx
These two pages should be an exact replica of those constructed in Task A except using the Entity Framework and
ModelBinding <%# Item.firstName %> etc
● Your SQL queries will be located in the Code Behind file and be written using LINQ/Lambda queries that
utilise the Entity Framework
Task 3: Customer Search and Restaurant information using Model-View-Controller Approaches[30%]
url: /Home/Index and /Home/Details?id=xx
These two pages will be an exact replica of the previous pages except using the Model-View-Controller design
pattern. You will need to generate and complete:
● The MVC
o Model(s)
o Controller
o Views(s)
Despite using @razor code in cshtml files, the Index and Details Views should look the same as the WebForms from
Task 1 and 2.
If you have scaffolded your views alongside your controller, you can safely remove any ‘Delete’/’Create’/’Edit’ views
and associated actions in the controller. For this assessment we are not utilising them.
Feel free to get creative with CSS. There are many ways you could improve the looks of the example website.
Mark Breakdown
Pages and Views [90%]
● Correct SQL statements
● Correctly structured pages
● Using base bootstrap (that looks neat and organised)
● Carefully crafted @razor code and SQL that is efficient in addition to experimenting and utilising the
bootstrap utility classes (borders, spacing, etc) in addition to other bootstrap features. If you need to add
your own tasteful custom CSS styles then include them in the /Context/Site.CSS file
● Any additional functional features will offset marks lost in other areas
HTML Validation [10%]
● Check that your final HTML generated is valid and does not contain any errors. Images should have custom
alt text etc.
Domain Model Diagram