PROG2230 This my web tech assign

Conestoga College – CP/CPA ProgramsProgramming MS Web Tech (PROG2230) – Practice assignment #2
Worth 3% of final course grade (3 marks total)
Due: Midnight on Sept 27, 2023
Peer grading & feedback due midnight of the next night
Introduction
The goals of this assignment are for you to:
● Define controllers and views that make use of Bootstrap tabs and layout capabilities
● Make use of a View Model
● Use attribute routing and named views
What you need to do
To complete this in-class assignment you need to do all of the following:
● Complete the task as described below
● Submit your solution (by midnight of the day of your assignment) as a single zip file to
the eConestoga dropbox for the assignment so that ultimately I can associate a grade
with it.
● Share your solution (again as a single zip file) with the student that has been randomly
assigned to be your peer-grader.
● Grade the solution, and provide feedback on it, to the student that you have been
randomly assigned to grade. To do this you will use a Microsoft Form as a means of
submitting the grade and code review feedback to me. See below for the link to that form
for this in-class assignment. Please submit your grade and feedback by midnight of the
day after the assignment.
Peer-marking Details
First of all, please review the details of the peer-grading-rules document. It is available at the top
level of the In-class-assignments folder in eConestoga.
Also, I used a small Python program that randomly generated pairings for this in-class
assignment and the resulting Excel spreadsheet that provides these pairings is included in the
eConestoga folder for this assignment. Please consult this spreadsheet to know who you are
peer-grading and who is peer-grading your solution.
Finally, please use the Microsoft Form linked to in the eConestoga folder for this assignment to
submit your grade and feedback to the student you have been randomly assigned to grade.
Your Task
For this assignment you are to develop a simple ASP.NET Core MVC app that allows the user
to manage a “student roster” of varying enrollment statuses. That is, the students are
categorized by their enrollment status (e.g. full-time, part-time, etc.) and the idea is that the app
will use Bootstrap tabs to allow the user to see all the students or see only those belonging to a
particular status, e.g. see only part-time students by clicking on the “Part-time” tab. You will also
use Bootstrap to layout the page so that the tabs are on the top and below them the students
are on the left and the form to add a new student is on the right, except in small-screen mode,
1
where the form should flow below the students. The Bootstrap tabs example we looked at in
class will be very helpful for this assignment.
The following is a screenshot of the final solution with “Part-time” tab currently selected:
Beyond using Bootstrap tabs and responsive layout features, the key to this assignment is to
bundle up what is needed in the view into a View Model class. In simplest terms, the view needs
to know:
● The list of all possible tabs
● Which tab is currently selected
● And the students for that currently selected enrollment status
● And possibly, in an adding new student scenario, the new student being added.
Note that the starting solution already defines an entity called Student and a StudentService that
manages an in-memory collection of students for you. The student service also provides for you
a public static array of strings property that is all the tab names and it is seeded with a few
students.
Detailed steps:
●
●
Open the starting code solution
Add a class called StudentsViewModel to the folder Models in your solution and define
the following 4 public get/set properties:
2
○
●
A list of Student objects that represent the students to be shown for the current
tab
■ Note: the Student class is already defined for you in the Entities
namespace/folder.
○ An array of the strings that represent all the tab names
○ A string representing the currently active enrollment status (or tab name)
○ A Student object that represents the newly submitted student when the user is
adding a new student using the form
Flesh out the “Student/Items.cshtml” view:
○ First declare its model to be a StudentsViewModel
○ The using the Bootstrap row class define 2 structural rows:
■ The top row is for the tabs.
■ The bottom row contains the students on the left and a form to add a new
student on the right.
● With each of these inside a div you can make the layout
responsive by specifying that in small-screen mode each of these
2 div’s take up 12 columns but in anything larger than that they
take up only 6 columns.
○ For the top “tabs” row you need to also do the following:
■ Loop through all the tab names in the array on the view model and in the
loop:
● Specify a nav-item “li” tag that shows the tab name and is a link to
the students for the enrollment status that name represents
● However, you will also need to add an if-condition that looks at
whether the current tab being iterated over is the currently active
tab, and if it is, then add the “active” CSS class in addition to the
“nav-link” class.
○ For the bottom “students & form” row:
■ On the left just setup an unordered list that loops through the students in
the view model.
● Or, if the list is empty, just says something like “no students found”
■ And on the right a form that provide 2 input fields:
● A text field that binds to the Name property on the new student
● And a dropdown list whose values bind to the EnrollmentStatus
property on the new student
○ Finish the Items action method on the StudentController:
■ First, enable attribute routing by annotating it with the HttpGet attribute
and the URL pattern: “/students/{status?}” where status is the name of a
tab/enrollment status and becomes the string parameter to the action
method
● Note: this now enables you to rename the action method to
something more meaningful if you want to. If you do change it
though, remember that you will have to update the link on the
home page accordingly.
3
■
○
If the status is empty or null or “All” then use the private data field
reference to the student service to get all students, otherwise use the
service to get students by the provided status.
■ Use the students, the status, the array of all statuses, and a new empty
student object to setup a new view model object and pass it off to the
“Items” view
Finally, add another action method on the Student controller to handle the POST
requests to add a new student:
■ Again, enable attribute routing by annotating it with the HttpPost attribute
and the URL pattern: “/students” – this means your action method can be
named whatever you see fit to choose.
■ Have it accept a StudentsViewModel object as a parameter that has a
property that represents the new student being passed in the POST body
■ Implement it by using the student service to add the new student and then
just redirecting to the other action method to get students
For your convenience I have also created a video demonstrating a running solution so you get a
clear picture of what you need to build and it is posted in the eConestoga in-class assignment
folder. Also, one final screenshot that illustrates the responsive layout aspect of the solution here is the solution in small-screen mode:
4
Grading
Grading of these in-class assignments is a simple 0, 1, 2, or 3 and is and based on the following
scale:
Grade
Description
3
The solution builds and runs without errors and all 3 of the following criteria
are met:
● Bootstrap tabs are used and work correctly and the layout includes
tabbed students on the left and new student form on the right, except
in small screen mode where the form goes below the tabbed items.
● A view model that bundles the current students, the active tab, and
the list of all tabs, possibly a newly added student, is used.
● Attribute routing is used on both the action methods for handling the
GET and POST of students.
2
The solution builds and runs with some functionality present but at least 1 of
the above criteria has not been met.
1
A poor or minimal solution was submitted. For instance, it might build and run
but almost none of the functionality is present, or there might be some code
5
provided but it either fails to build or runs with errors.
0
No solution submitted or no code attempted in the solution.
6