Building an Effective Todo List with Servlet: A Step-by-Step Guide
To-Do list application using Servlets is a great way to learn about handling web requests and data persistence in Java web applications. In this example, we’ll guide you through the process of building a basic To-Do list application.
Project Structure
Here’s the recommended project structure:
|-- src
| |-- com
| |-- codeswithpankaj
| |-- servlets
| |-- TodoServlet.java
| |-- model
| |-- TodoItem.java
|-- WebContent
| |-- WEB-INF
| |-- web.xml
| |-- index.html
| |-- todo.jsp
| |-- error.jspStep 1: Create a Model for Todo Items
Create a simple model class to represent To-Do items:
Step 1: Create a Model for Todo Items
Create a simple model class to represent To-Do items:
// TodoItem.java
package com.codeswithpankaj;
public class TodoItem {
private String description;
private boolean completed;
public TodoItem(String description) {
this.description = description;
this.completed = false;
}
public String getDescription() {
return description;
}
public boolean isCompleted() {
return completed;
}
public void setCompleted(boolean completed) {
this.completed = completed;
}
}Step 2: Create Servlet for Managing To-Do Items
Create a Servlet to manage To-Do items. In this example, we’ll use an ArrayList to store items in memory:
// TodoServlet.java
package com.codeswithpankaj.servlets;
import model.TodoItem;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/TodoServlet")
public class TodoServlet extends HttpServlet {
private List<TodoItem> todoList;
@Override
public void init() throws ServletException {
todoList = new ArrayList<>();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("action");
if ("add".equals(action)) {
String description = request.getParameter("description");
todoList.add(new TodoItem(description));
} else if ("complete".equals(action)) {
int index = Integer.parseInt(request.getParameter("index"));
todoList.get(index).setCompleted(true);
}
response.sendRedirect("todo.jsp");
}
}Step 3: Create JSP Pages
Create JSP pages to display the To-Do list and handle user input:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Todo List - codes with pankaj</title>
</head>
<body>
<h1>Todo List</h1>
<form action="TodoServlet" method="post">
<input type="text" name="description" placeholder="Enter a task">
<input type="hidden" name="action" value="add">
<input type="submit" value="Add">
</form>
<br>
<a href="todo.jsp">View To-Do List</a>
</body>
</html>todo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<ul>
<c:forEach items="${requestScope.todoList}" var="todo" varStatus="status">
<li>${status.index + 1}. ${todo.description}
<c:if test="${todo.completed}"> - Completed</c:if>
<form action="TodoServlet" method="post">
<input type="hidden" name="action" value="complete">
<input type="hidden" name="index" value="${status.index}">
<input type="submit" value="Complete">
</form>
</li>
</c:forEach>
</ul>
<br>
<a href="index.html">Back to Home</a>
</body>
</html>error.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Error</title>
</head>
<body>
<h1>An error occurred</h1>
<p>${requestScope.errorMessage}</p>
<br>
<a href="index.html">Back to Home</a>
</body>
</html>Step 4: Configure web.xml
In the web.xml file located in the WEB-INF directory, configure your servlet as follows:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>TodoServlet</servlet-name>
<servlet-class>com.yourdomain.servlets.TodoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TodoServlet</servlet-name>
<url-pattern>/TodoServlet</url-pattern>
</servlet-mapping>
</web-app>Step 5: Run the Application
Deploy your web application to your Servlet container (e.g., Tomcat) and access it through the browser. Start with index.html, where you can add and complete To-Do items. You can view the list on the todo.jsp page and handle user input. If an error occurs, users will be redirected to the error.jsp page.
Congratulations! You’ve created a basic To-Do list application using Java Servlets. You can further enhance this application by adding features like user authentication, database storage, and additional functionality to manage tasks.
