CSE 340: Web Backend Development

W03 Team Activity: Displaying Service Projects

Overview

In this activity, you will work with your team to add model functions, views, and controllers for service projects, adding those new features to the existing functionality you built in the learning activities.

Activity Instructions

For the meeting, follow these steps.

Determine the Leader for the Meeting

Choose one person that will be the leader for this meeting. Their role will be to help guide the rest of the team through the steps of the meeting. Try to rotate so that each person gets a chance to be the leader of at least one meeting.

Begin with Prayer

One person on the team should begin the meeting with a prayer.

Code Review (10 minutes)

Select one person to share their screen and share some of their code from the last week. (Try to rotate so that each person gets a chance to share at least once during the course.)

• What was particularly well done or interesting?
• Do you have any suggestions for improvement?

Understand the Requirements

In this activity you will add the following new features:

1. A new service project details page (/project/[id]) that will list the details of a given service project.
2. Update the main service projects page (/projects) so that rather than listing all service projects, it only lists the next five upcoming projects.
3. Update the main service projects page (/projects) so that each service project in the list is a link to the service project details page and that it also contains a link back to the organization details page for that project.

Add the model functions

The first step is to add the model functions you will need to retrieve service project data from the database.

Add the following model functions to the src/models/projects.js file:

1. Create a new function getUpcomingProjects(number_of_projects) that will retrieve the next number_of_projects upcoming service projects from the database.
   • At this point your controller will pass 5 as the number of projects to retrieve, but you should design the function to accept any number.
   • This function should query the database for service projects with a date greater than or equal to the current date, ordered by date in ascending order, and limited to number_of_projects results.
   • The function should return an array of service project objects, each containing the following properties:
     • project_id
     • title
     • description
     • date
     • location
     • organization_id
     • organization_name

     Notice that you need to get the organization name, which comes from a different table.

Using AI for SQL queries

These SQL queries are a little more complicated than the ones you have written before. Don't forget that AI can be very useful in writing SQL queries like this. It can also be helpful for writing the model functions that use these queries and that need to pass in parameters.

Remember to look at each part of the query to make sure you understand it, and that it meets the requirements and is secure.

If you have any questions about the SQL or JavaScript code that is generated, ask AI to help explain it.

2. Create a new function getProjectDetails(id) that will retrieve a single service project by its ID.
   • This function should accept a service project ID as a parameter.
   • It should query the database for the service project with the given ID.
   • It should return a service project object containing the following properties:
     • project_id
     • title
     • description
     • date
     • location
     • organization_id
     • organization_name
3. Add these two new functions to your export statement at the bottom of the src/models/projects.js file.

Add the controllers

The next step is to add the controllers and route handlers you will need to handle requests for service project data. They will use the model functions you created to retrieve data and then render the appropriate views.

Update your src/controllers/projects.js file as follows:

1. Import the new model functions you created at the top of the file.
2. Update your showProjectsPage function to call the new model function you just created, that gets the upcoming projects, instead of getting all projects.
3. Create a constant named, NUMBER_OF_UPCOMING_PROJECTS at the top of this file, and set its value to 5. Then, pass that constant to the model function.
4. Update the title of the projects page to "Upcoming Service Projects".
5. Create a new controller function named showProjectDetailsPage that calls the new getProjectDetails model function you just created.
   • This function should extract the service project ID from the URL parameters.
   • It should use the getProjectDetails model function you created to retrieve the service project with that ID from the database.
   • It should then render a new view for the service project details page (project.ejs), passing in the service project data.
6. At the bottom of the file, export this new function so it can be used in your route handlers.

Update the routes

Next, update your route handlers to use the new controller functions you just created.

Update your src/controllers/routes.js file to as follows:

1. Import the new showProjectDetailsPage controller function at the top of the file.
2. Create a new route for /project/[id] that will handle requests for the service project details page for a single service project as specified by the [id] parameter. This route should use the new showProjectDetailsPage controller function you just created.
3. No changes are needed for the /projects route. The changes were made to the existing controller function it uses, so it is already correct.

Add the views

The next step is to add the views you will need to display service project data.

1. Create a new view src/views/project.ejs to display the service project details page, which shows the details of a single service project. It should show the following:
   • The title of the service project.
   • The description of the service project.
   • The date of the service project.
   • The location of the service project.
   • The name of the partner organization for the service project. This should be a link to the organization details page for that organization. The URL for this link should be /organization/[id], where [id] is the ID of the organization.
2. Update the view projects.ejs for the main service project page, which will now list the next five upcoming service projects with links to each.
   • This page should list the title of each project along with the organization to which the project belongs.
   • Make each service project tile a link that goes to the service project details page for that project. The URL for this link should be /project/[id], where [id] is the ID of the service project.
   • Make each organization name a link to the organization details page for that organization. The URL for this link should be /organization/[id], where [id] is the ID of the organization.

Notice that you do not need to do anything on this EJS page to reduce the list of projects from all service projects to only show the next five upcoming service projects. That change will be already be handled in the model and controller functions. The view simply displays the projects it is given, which will now be the next five upcoming service projects.

Test your code locally

Finally, test your code locally to ensure everything is working as expected.

1. Start your development server.
2. Navigate to http://127.0.0.1:3000/projects in your web browser.
   • Verify that the page displays the next five upcoming service projects with their names and organization names as links.
3. Click on a service project name to navigate to its details page.
   • Verify that the page displays the correct details for the selected service project.
4. Click on the organization name link to navigate to the organization details page.
   • Verify that the page displays the correct details for the selected organization.
5. From the organization details page, verify that the links to the service project details (that you added earlier in the learning activities) work correctly.

Deploy and test

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

Conclude the meeting

You have now completed all the steps of the activity.

Submission

After you have completed all the steps for this team activity, return to Canvas to submit the associated quiz.

Other Links:

• Return to: Week Overview | Course Home