CSE 340 | Team Activity

W04 Team Activity: Updating Service Projects

Overview

For this team activity, you will meet for a 1-hour synchronous team meeting using Microsoft Teams video sharing.

Please make every effort to attend this meeting. If you cannot attend, you must complete the Absent from Meeting Checklist.

In this activity you will create an update form for service projects, including the form, the controller, and the model functions to process it.

Activity Instructions

Before the Meeting

Before the meeting begins, each person should individually do the following:

Complete all of the Learning Activities for this week.

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?

Feel free to share your screen and discuss any of these issues in detail.

Understand the Requirements

In this activity you will add the ability to edit service projects. This will involve the following steps:

Create model functions to update a service project in the database (updateProject).
Create a controller functions to display the Edit Service Project form (showEditProjectForm) and process the update (processEditProjectForm).
Create the edit form EJS page (src/views/update-project.ejs).

Create the model function

Create an updateProject model function that follows the example of the updateOrganization model function in this week's learning activity.

Here are a few things to remember:

Make sure to use parameterized queries to prevent SQL injection attacks.
Remember to include the organization id in the update, so a user can assign the project to a new organization as part of the update.
If the SQL statement does not return any rows, you should throw a new Error.
Remember to export the function so it can be used in the controller.

Group Discussion

If the user wants to change the organization that a project belongs to, what data in the organization table will need to be updated?

Create the controller functions

Create controller functions: showEditProjectForm and processEditProjectForm that follow the example of the Edit Organization controller functions in this week's learning activity.

Here are a few things to remember:

Remember to import your new model function in the controllers file.
In the showEditProjectForm function, you will need to get the project data from the model using the model function getProjectDetails. Then, you will pass this data to the view so that the edit form can be filled in with the existing information.
The Edit Project form will also need a list of all the organizations to allow the user to assign the project to a different organization, just like on the Create New Project form. This can be done by using the model function getAllOrganizations and passing the list to the view.
The edit-project.ejs view will fill in the values of the form fields with the existing project data and create a dropdown list for the organization.
In the processEditProjectForm function, you will need to get the form data from the request body and pass it to the updateProject model function.
Remember to redirect the user to the project details page after the update is complete.

Group Discussion

What would happen if the controller function did not get the project data before displaying the edit form?
What is the purpose of this controller function calling the getAllOrganizations model function?

Create the routes

Create the routes to display the edit form and process the form submission. The routes should follow the example of the Edit Organization routes from this week's learning activity.

Here are a few things to remember:

Create a GET route for /edit-project/:id that calls the showEditProjectForm controller function.
Create a POST route for /edit-project/:id that calls the processEditProjectForm controller function.

Group Discussion

If the URL for showing the edit form is the same as the one for processing the form submission, how does the server distinguish between the two actions?

Create the Edit Project EJS page

create the edit-project EJS page that follows the example of the Edit Organization Form from this week's learning activity.

Here are a few things to remember:

Make sure to set the form's action attribute to point to the correct route that will handle the form submission (/edit-project/{id}).
Use the existing project data passed from the controller to fill in the form fields with the current values.
Make sure the date format is correct for the date picker form. (AI can help with this.)
Create a dropdown list for the organization field, using the list of organizations passed from the controller. Make sure to set the selected option to the current organization of the project.

Add a link to the edit form

Add a link to the edit form on the project details page. This link should point to the route that displays the edit form for the specific project (/edit-project/{id}).

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.

Make sure to finish on your own if needed

You need to complete all the steps in this team activity before submitting your quiz. If you are not able to finish some of the steps during your meeting, you will need to finish them on your own after the meeting is over.

Submission

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