CSE 340: Web Backend Development

W03 Assignment: Model-View-Controller Implementation

Overview

In this assignment you will demonstrate your knowledge of this lesson by implementing the Model-View-Controller (MVC) pattern to add new features the the work you have previously completed in the Learning Activities and the Team Activity for the week.

New Features

In this assignment you will add the following new features to the work you have completed so far:

  1. Create a category details page (/category/[id]) that displays the name of the category and lists all the service projects for that category. Each service project name will be a link to the service project details page for that project.
  2. Update the categories page (/categories) that lists each category, so that the category names are now links to the new category details page for that category.
  3. Update the service project details page (/project/[id]) to add category tags for that project. Each tag will be a link to the category details page for that category.

Instructions

Follow these steps to complete the assignment:

Ensure the Learning Activity and Team Activity features are working

Verify that you have completed the following activities:

Make sure that the application is deployed to your hosting site and that the organizations and service project pages are working correctly. If anything is not working, you should fix it before proceeding.

Add model functions

Add new model functions for each of the following:

  1. Retrieve a single category by its ID.
  2. Retrieve all categories for a given service project.
  3. Retrieve all service projects for a given category.

Hint: Refer to the learning activities for examples of how to create model functions that interact with the database.

Also, remember that AI can be very helpful in creating the SQL queries you need. You can copy and paste your setup.sql file into the prompt so that AI knows your exact database structure.

Add controller functions

Add controller functions to call the model functions you created in the previous step. The controller functions should retrieve the necessary data and pass it to the views.

  1. Create a new controller function for the category details page.
  2. Update the controller function for the service project details page to include the categories for that project.
  3. You should not need to update the controller function for the main categories page, because it already contains the ids needed for linking.

Follow the Pattern from the Learning Activities

Refer to the learning activities for examples of how to create controller functions that interact with model functions and views.

Remember that controller functions should not contain any database code. They should delegate that to model functions and focus on preparing data for the views.

Add routes

Next, add routes to handle requests for the new category controller functions.

  1. Define a new route for the category details page.
  2. You should not need to update the routes for the changes you made to the categories and service project pages, because any changes will be handled in the controllers or the views.

Update the views

Finally, update the EJS views

  1. Create a new category details page (/category/[id]) that displays the category name and lists all service projects for that category. Each service project name should be a link to the service project details page for that project.
  2. Update the categories page (/categories) so that each category is now a link to the category details page for that category.
  3. Update the service project details page (/project/[id]) to display tags for each category for that project. Each tag should be a link to the category details page for that category.

Code Organization

Make sure to follow the same pattern for this model, controller, route, and view files and functions that were used in the learning activities, including the same naming convention for files and functions.

Deploy and Test

Once you have everything working, deploy your code to your hosting server and verify that everything is working correctly there.

Requirements

Your assignment must implement the following requirements:

  1. Learning and Team Activity Features: Organization and Project pages (including model and controller functions) are functional, as defined in the Learning Activities and the Team Activity. Specifically:
    • The /organizations page lists all partner organizations, each of which is a link to the organization details page for that organization.
    • The organization detail pages (/organization/[id]) lists the details of that organization and contains a list of all service projects for that organization, each of which is a link to the service project details pages for that project.
    • The /projects page lists the next five upcoming service projects along with the name of the partner organization next to it. (The name of the partner organization is a link to the organization details page.)
    • The service project detail pages (/project/[id]) lists the details of that service project along with the name of the partner organization. (The partner organization name is a link to the organization details page.)
    • Error handling is in place and the required 404 and 500 error pages are served when appropriate.
  2. Categories Pages: The categories and categories details pages are functional. Specifically:
    • The categories page (/categories) lists each category, which is a link to the category details page for that category.
    • The category details page (/category/[id]) lists all service projects for that category. Each service project name is a link to the service project details page for that project.
  3. Category Tags on Service Project pages:
    • The service project details page (/project/[id]) displays category tags for that project. Each tag is a link to the category details page for that category (/category/[id]).
  4. Code Organization and Adherence to Pattern: All Node.js functions follow the Model-View-Controller (MVC) pattern and are in the appropriate files.
    • Model functions (database code) are in the appropriate model files.
    • Controller functions contain no database code and focus on preparing data for the views.
    • Routes are defined in the appropriate route file, not the server.js file. They use the controllers functions defined in the separate controller files.
    • All files and functions follow the naming conventions demonstrated in the learning activities.
  5. Deployment and Professional style: The application is deployed and looks professional.
    • The application is deployed and fully functional on the hosting server.
    • The CSS used for the application provides a professional appearance that adheres to accessibility standards.

Score

Your assignment will receive a score according to the following criteria:

If your assignment is graded as Incomplete, you should fix any issues and resubmit.

Submission

When you have finished this assignment:

Other Links: