Welcome back! In our previous lessons, we set up the foundation of our MVC ToDo App in Symfony. We've learned how to manage our todos with a TodoService and added new items to our list. Now, it's time to enhance our application by allowing users to view and update individual ToDo items.

Being able to view and edit ToDo items is crucial for any todo list application, as it enables users to modify existing tasks as their needs change. By the end of this lesson, you will be able to view details of a ToDo item and update it through a dedicated details page.

First, let's implement the logic in our TodoService to handle fetching individual ToDo items.

The findOne method iterates through the list of ToDo items to locate an item by its ID and return it. If there's no match, the method returns null.

The method returns a nullable type (?Todo) because it returns a Todo object when a ToDo item is found, and null if no matching item is found.

Next, let's implement the logic in our TodoService to handle updating ToDo items.

The update method iterates through the list of ToDo items to find an item with the matching ID. Unlike findOne, which returns a single item, we use findAll because we need access to the entire list to update the relevant item and then save the updated list back to the session.

Upon finding a match, it updates the title and description of the ToDo item, saves the updated list to the session, and returns the updated item. If no item with the specified ID is found, the method returns null.

Now, let's define the route and corresponding controller action to handle displaying individual ToDo items.

Here's the TodoController with the detail method:

The detail method within the TodoController handles the fetching and displaying of details for a specific ToDo item. It uses the findOne method from the TodoService to fetch the item by its ID and then renders the detail.html.twig template, passing the fetched item as a parameter.

Next, we'll define the route and corresponding controller action to handle updating ToDo items.

Here's the TodoController with the update method:

The update method handles the updating process for a specific ToDo item. It retrieves the updated title and description from the request, calls the update method from the TodoService to make the changes, and then redirects the user back to the list view via the todo_list route.

We use the POST method for this route because forms natively support only GET and POST methods. Although PUT is also used for updates in the HTTP protocol, HTML forms do not support it directly. Thus, we can use POST to handle the update process securely and correctly.

Finally, let's create the Twig template that will render the details of a specific ToDo item. Here is the detail.html.twig template:

In this template, we have a form that allows the user to edit the title and description of the ToDo item. The form's action attribute points to the todo_update route while passing the ToDo item's ID as a parameter. The fields are pre-filled with the current title and description values of the ToDo item. When the form is submitted via the "Update To Do" button, the data will be sent using the POST method to the update action in the controller.

To make it easy for users to navigate to the details page of any ToDo item, we need to update our list view. We will modify the list.html.twig template so that each ToDo item redirects to the details page when clicked.

Here is the updated list.html.twig template:

In this updated template, we loop through all ToDo items and create a list item (<li>) for each one. Inside each list item, there's a link (<a>) that points to the todo_detail route, passing the respective ToDo item's ID as a parameter. This allows users to click on any ToDo item in the list and be redirected to the details page of that specific item. Additionally, the form at the bottom allows users to add new ToDo items.

Let's go through a complete example, from selecting an item from the list page to updating a ToDo item.

1. Navigate to details page: Click on a ToDo item link on the list page to access its details.
2. Edit form fields: Modify the title and description.
3. Submit form: Click "Update To Do" to send data via POST.
4. Controller processes update: update method in TodoController processes form data.
5. Service updates item: TodoService updates the ToDo item in the session.
6. View updated list: Redirected list view shows the updated item.

In this lesson, we enhanced our ToDo app by adding the functionality to view and update ToDo items. We created the details page by

• Setting up the route and controller action to handle displaying the details of a ToDo item
• Implementing the update logic in the service layer
• Building the details page view using Twig.

Finally, we walked through the entire process from accessing the details page to updating a ToDo item. Now it's your turn to practice what you've learned. Head over to the practice exercises and try updating ToDo items in your list. Remember, the more you practice, the better you'll become. Great job!