This content originally appeared on DEV Community and was authored by Prasanth
Step:1
File -> String Starter Project -> Project name ToDoList ->Type Maven -> Packaging Jar-> Next
Step:2
Add dependencies:-
- Spring Web
- Spring Dev Tools
- Thymeleaf
Step:2-
create class ToDoController, at the top of class @Controller and @RequestMapping("/todo") and method
for @GetMapping.@GetMapping is handle HTTP Get request coming from frontend or Postman , or any api clients.
it is a shortcut for @RequestMapping(method = RequestMethod.GET). it used to method level inside a controller class to map a specific URL to a method(function).
@RequestMapping("/todo")@RequestMapping is general -purpose annotation used to handle any type of HTTP request(GET,POST,PUT,kDELETE) depends on method the attributes.
BY short HttpSession to handle the every user session data temporarily without database,not only one page across every page. without HttpSession do not remember your web site, , session memory erased(session not remember you) when you log out or browser closed , because is temp memory.
Controller class Explanation:
- Allready you know that Controller is handles for HTTP web requests or REST API request and also resposbile for returning views(HTML pages) via Thymeleaf of JSP. @RequestMapping("/todo") .Maps the base URL path /todo to the controller.
In Controller class all method base path is /todo.so when a request is send to http://localhost:8080/todo, this controller is responsible and handle it.
Method: show_todo_list(...)@Getmapping handle Http GEt requests.now we can not specified any path so ,the base path is /todo/ like GET/todo
,if any you set the path like @Getmapping("/show_todo") that time is you can http://localhost:8080/todo/show_todo ,to HTTP GET request.
Parameters: Model model, HttpSession session
- Model is used to send data form controller to view,Attributes added to the model will be avilabel int Thymelaf HTML page(like todo.html) ** HttpSession ?**
- HttpSession store data per every user across multiple multiple HTTP requests. it holds the task list of every user. every use get unique session ,so their task not mixed.
blog link :- https://dev.to/prasanth362k/httpsession-21g2
Logic in the Method:
List<String> tasks = (List<String>) session.getAttribute("tasks");
- session.getAttribute("tasks"); => it retrives the object stored to session under the key "tasks".this return type for object . now need except list tasks (string value) so we can typecast (List) ,because session.getAttribute("tasks"); it returns object , not returns specfic type.,we store List of tasks(string) to the tasks like List tasks =
Condition Check:
if (tasks == null) {
tasks = new ArrayList<String>();
session.setAttribute("tasks", tasks);
}
- If no tasks list was found the session is null .so the new list create new ArrayList(),the list stored to tasks variable ,then list saved into the session with key ""tasks"
- add to Model
- model.addAttribute("tasks", tasks);
- this adds the tasks list model,model is a Spring object used to send data from controller to HTML view (Thymeleaf). So in todo.html, you can access this list using ${tasks}.
Note: Before project Model was used to hold data int he controller and send it to the HTML (Thymeleaf) view page. Now HttpSession is used to store user-specific data, and Model is still used to send that data to the view page.
model.addAttribute("tasks", tasks);
return "todo";
- This line sends the tasks data (like a list of tasks)
from the java back end to the Html page.
tasks is the java variable that has the list of tasks."tasks" is the name used in html page to get the data.return "todo"; this line tells spring boot ,show the todo.html page and give it the data ,i added data to model.
Note: Other methods explained simply inside controller class
Step:3
create Html file
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>TODO List</title>
</head>
<body>
<h2>ToDo List - Spring Boot App</h2>
<!-- Add new TOdo -->
<form action="/todo/add" method="post">
<input type="text" name="task" required placeholder="Enter Task">
<button type="submit">Add</button>
</form>
<!-- Displaying All ToDo Tasks -->
<ul>
<li th:each="task, iterStat:${tasks}">
<span th:text="${task}"> </span>
<!-- Displaying All ToDo Tasks -->
<form action="/todo/delete" method="post">
<input type="hidden" name="index" th:value="${iterStat.index}">
<!-- <input
type="hidden" Hidden field: user can't see or edit this
name="index" The name of the field to be sent in form
th:value="${iterStat.index}" Thymeleaf expression: gives current index in loop
-->
<button type="submit"> Delete </button>
</form>
</li>
</ul>
<form action="/todo/delete_all" method="post">
<button type="submit"> Delete All </button>
</form>
</body>
</html>
Step:4
create Controller class:
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import jakarta.servlet.http.HttpSession;
@Controller
@RequestMapping("/todo")//loczlhost:8080/todo
public class ToDoController {
@GetMapping
public String show_todo_list(Model model,HttpSession session)
{
List<String> tasks = (List<String>)session.getAttribute("tasks");
if(tasks == null)
{
tasks = new ArrayList<String>();
session.setAttribute("tasks", tasks);
}
model.addAttribute("tasks", tasks);
return "todo";
}
@PostMapping("/add") // when you add some task that request came to this method from ,request came from html .
public String add_todo(@RequestParam String task ,HttpSession session)
{
/*
* Why http://localhost:8080/todo/add does not work directly in the browser:
* Post request mean like form submission
* http://localhost:8080/todo/add, it sends a GET request , You will get an error like 405 Method Not Allowed or Whitelabel error page.
*
*
*/
// @RequestParam String task means get the value or data of task from the URL form(sent from frontend), the data passed to the backend , you can use to store the data , not avilable closes browser or session ends
// String task ,HttpSession session it mean user give task , we will maintain session .
List<String> tasks = (List<String>)session.getAttribute("tasks");
if(tasks == null)
{
tasks = new ArrayList<String>();
session.setAttribute("tasks", tasks);
}
tasks.add(task);
return "redirect:/todo"; // redirect same page
// this code add task but do not display , you can write code in html .
}
@PostMapping("/delete") // when you delete some task that request came to this method from ,request came from html(web page) .
public String delete_todo(@RequestParam int index ,HttpSession session)
{
List<String> tasks = (List<String>)session.getAttribute("tasks");
tasks.remove(index);
return "redirect:/todo"; // redirect same page
}
@PostMapping("/delete_all")
public String deleteAll(HttpSession session) // now only session maintain not is requestparam that why we use to session
{
session.removeAttribute("tasks");
return "redirect:/todo"; // redirect same page
}
// now we did todo list with (temp data) session management without using database
}
// @RequestParam int index gets the tasks's index number from the URL or Form like 0,1,2.
tasks.remove(index) remove the taks at tha index from the list .
This content originally appeared on DEV Community and was authored by Prasanth
Prasanth | Sciencx (2025-07-13T06:47:39+00:00) To do List App – SprinBoot. Retrieved from https://www.scien.cx/2025/07/13/to-do-list-app-sprinboot/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.