In this tutorial, you will learn how to build a Todo web application using JSP, Servlet, JDBC and MySQL database.

Build Todo App using JSP, Servlet, JDBC, and MySQL - Part 3 Series

To keep it simple, I divide this tutorial into 3 parts and here are the topics that I am going to cover in each Part.

1. Build a Todo App using JSP, Servlet, JDBC, and MySQL - Part 1

• Develop User registration and login module implementation

2. Build a Todo App using JSP, Servlet, JDBC, and MySQL - Part 2

• Develop a Todo App

1. Add Todo
2. Update Todo
3. Get Todo
4. Get all Todos
5. Delete Todo
6. Build a Todo App using JSP, Servlet, JDBC, and MySQL - Part 3

• Deployment and Demo

Features Implementation

• Develop User registration module implementation
• Develop a Login module implementation
• Develop a Todo CRUD operations implementation

What we will build?

We build a Todo web application using JSP, Servlet, JDBC and MySQL database.

Below are the screenshots shows UI of our Employee Management System App:

User Registration Page

Login Page

Add New Todo Page

Update Todo Page

List Todo Page

Delete Todo Page

Tools and technologies used

• JSP - 2.2 +
• IDE - STS/Eclipse Neon.3
• JDK - 1.8 or later
• Apache Tomcat - 8.5
• JSTL - 1.2.1
• Servlet API - 2.5 MySQL - mysql-connector-java-8.0.13.jar

MySQL Database Setup

Let's create a database named "demo" in MySQL. Now, execute below DDL script:

CREATE TABLE `users` (
  `id` int(3) NOT NULL AUTO_INCREMENT,,
  `first_name` varchar(20) DEFAULT NULL,
  `last_name` varchar(20) DEFAULT NULL,
  `username` varchar(250) DEFAULT NULL,
  `password` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

CREATE TABLE `todos` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `description` varchar(255) DEFAULT NULL,
  `is_done` bit(1) NOT NULL,
  `target_date` datetime(6) DEFAULT NULL,
  `username` varchar(255) DEFAULT NULL,
  `title` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;