Removing ToDo Items from the List

Welcome back! In previous lessons, you've already learned how to list, create, and update ToDo items in our Symfony-based MVC application. Now, we will add one final and essential piece of functionality: the ability to delete ToDo items from the list. Deleting items is an essential feature for any ToDo app because it allows users to manage their tasks more effectively. Imagine having a long list of completed or irrelevant tasks — you want an easy way to remove those items, right? By the end of this lesson, you'll be able to delete any ToDo item from your list.

Defining the Delete Method in the Service Layer

First, let's add the necessary logic to our service layer. The service layer is responsible for handling your application's business logic. In this case, it will manage the deletion of ToDo items. We'll be working with the TodoService.php file. Here's the code you need to add to your TodoService class: PHP<?php namespace App\Service; use App\Entity\Todo; use Symfony\Component\HttpFoundation\RequestStack; class TodoService { private $requestStack; public function __construct(RequestStack $requestStack) { $this->requestStack = $requestStack; } private function getSession() { return $this->requestStack->getSession(); } public function findAll(): array { return $this->getSession()->get('todos', []); } // Existing methods... public function delete($id): void { $todos = $this->findAll(); // Iterating through the list of ToDo items foreach ($todos as $key => $todo) { if ($todo->getId() == $id) { // Remove the ToDo item from the array unset($todos[$key]); // Re-index the array and save it back to the session $this->getSession()->set('todos', array_values($todos)); break; } } } } In this code, the first step is to retrieve the current list of ToDo items from the session using the findAll method. We then iterate through the list to find the ToDo item with the matching ID. Once found, we use the unset function to remove the item from the array. Finally, we re-index the array (to avoid gaps in the index) and save the updated list back to the session. By adding this method, you've now defined how a ToDo item will be deleted from your session.

Creating the Delete Endpoint in the Controller

Next, we need to create an endpoint in our controller to handle the deletion request. Let's update the TodoController.php file to include a route and method for deleting ToDo items. PHP<?php namespace App\Controller; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\Routing\Annotation\Route; use App\Service\TodoService; class TodoController extends AbstractController { private $todoService; public function __construct(TodoService $todoService) { $this->todoService = $todoService; } // Existing methods... #[Route('/todos/{id}/delete', name: 'todo_delete', methods: ['POST'])] public function delete($id): Response { $this->todoService->delete($id); return $this->redirectToRoute('todo_list'); } } Here, we define a new route for deleting ToDo items. This route uses the POST method and requires an ID parameter. The delete method in the controller calls the delete method from the TodoService class to remove the specified ToDo item. After the ToDo item is deleted, the user is redirected back to the main list view using the redirectToRoute('todo_list') method. By setting up this route and method, you ensure that your app can properly handle delete requests.

Updating the Twig Template to Include Delete Button

The final step is to update our list.html.twig template to include a "Delete" button for each ToDo item. Twig templates in Symfony are used to render the views of your application. HTML<!DOCTYPE html> <html> <head> <title>ToDo List</title> </head> <body> <h1>ToDo List</h1> <ul> {% for todo in todos %} <li> <a href="{{ path('todo_detail', {'id': todo.id}) }}"> {{ todo.getTitle() }} - {{ todo.getDescription() }} </a> <!-- Form for deleting a ToDo item --> <form action="{{ path('todo_delete', {'id': todo.id}) }}" method="post" style="display: inline;"> <button type="submit">Delete</button> </form> </li> {% else %} <li>No todos found</li> {% endfor %} </ul> <form action="{{ path('todo_create') }}" method="post"> <input type="text" name="title" placeholder="Title" required> <input type="text" name="description" placeholder="Description"> <button type="submit">Add To Do</button> </form> </body> </html><!DOCTYPE html> <html> <head> <title>ToDo List</title> </head> <body> <h1>ToDo List</h1> <ul> {% for todo in todos %} <li> <a href="{{ path('todo_detail', {'id': todo.id}) }}"> {{ todo.getTitle() }} - {{ todo.getDescription() }} </a> <!-- Form for deleting a ToDo item --> <form action="{{ path('todo_delete', {'id': todo.id}) }}" method="post" style="display: inline;"> <button type="submit">Delete</button> </form> </li> {% else %} <li>No todos found</li> {% endfor %} </ul> <form action="{{ path('todo_create') }}" method="post"> <input type="text" name="title" placeholder="Title" required> <input type="text" name="description" placeholder="Description"> <button type="submit">Add To Do</button> </form> </body> </html> In this template, for each ToDo item in the list, a form with a Delete button is created. The form's action attribute is set to the delete route using path('todo_delete', {'id': todo.id}). When the Delete button is clicked, the form sends a POST request to the delete endpoint, and the specified ToDo item is deleted. By updating your template, users can now visually interact with the delete functionality.

Example Walkthrough

Let's go through a complete example of deleting a ToDo item. Click Delete button : Click the "Delete" button next to the desired ToDo item on the list page. Form submission : The form sends a POST request to the delete endpoint. Controller processes delete : delete method in TodoController processes the request. Service deletes item : TodoService removes the ToDo item from the session. View updated list : You are redirected back to the list view, now without the deleted item.

Recap and Summary

Congratulations! You've successfully added the ability to delete ToDo items in your Symfony-based MVC application. Here's a quick recap of what we've covered: We added a delete method to the TodoService to handle the deletion logic. We created a new route and method in the TodoController to handle delete requests. We updated the list.html.twig template to include a Delete button for each ToDo item. By completing this lesson, you've built out all the core functionalities of a ToDo app: listing, creating, updating, and deleting items. Now it's time to go to the practice exercises and test your skills further. Keep coding!

Previous Lesson

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal