To Build A Simple Full-Stack Java A
To Build A Simple Full-Stack Java A
Boot as the backend and Thymeleaf for the front end. This application will have
basic functionality to add, view, and delete tasks.
Project Structure
Backend (Java, Spring Boot): Manages CRUD operations for tasks.
Frontend (Thymeleaf): Displays the tasks and allows for task addition and deletion.
Step 1: Set Up Spring Boot Project
You can set up a Spring Boot project using Spring Initializr or by running:
bash
Copy code
spring init --dependencies=web,thymeleaf,data-jpa,h2,todo-list
Dependencies:
java
Copy code
package com.example.todolist;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class TodoListApplication {
public static void main(String[] args) {
SpringApplication.run(TodoListApplication.class, args);
}
}
2. Task.java (Entity)
This class represents the Task entity and maps to a table in the database.
java
Copy code
package com.example.todolist.model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Task {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
java
Copy code
package com.example.todolist.repository;
import com.example.todolist.model.Task;
import org.springframework.data.jpa.repository.JpaRepository;
java
Copy code
package com.example.todolist.controller;
import com.example.todolist.model.Task;
import com.example.todolist.repository.TaskRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
@Controller
public class TaskController {
@Autowired
private TaskRepository taskRepository;
@GetMapping("/")
public String index(Model model) {
model.addAttribute("tasks", taskRepository.findAll());
return "index";
}
@PostMapping("/addTask")
public String addTask(@RequestParam String description) {
Task task = new Task();
task.setDescription(description);
taskRepository.save(task);
return "redirect:/";
}
@GetMapping("/deleteTask/{id}")
public String deleteTask(@PathVariable Long id) {
taskRepository.deleteById(id);
return "redirect:/";
}
}
5. index.html (Thymeleaf Template)
The index.html file displays the to-do list and includes forms to add tasks and
delete tasks.
html
Copy code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
}
.todo-container {
width: 300px;
padding: 20px;
border-radius: 8px;
background-color: #e0f7fa;
text-align: center;
}
h2 {
color: #00796b;
}
.task-list {
list-style-type: none;
padding: 0;
}
.task-item {
display: flex;
justify-content: space-between;
padding: 8px;
background-color: #ffffff;
border: 1px solid #00796b;
margin-top: 5px;
border-radius: 4px;
}
.delete-btn {
color: white;
background-color: #e57373;
border: none;
cursor: pointer;
padding: 3px 5px;
border-radius: 3px;
}
input[type="text"] {
width: 80%;
padding: 5px;
margin-top: 10px;
border: 1px solid #00796b;
border-radius: 4px;
}
button {
padding: 5px 10px;
margin-top: 10px;
background-color: #00796b;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="todo-container">
<h2>To-Do List</h2>
<form th:action="@{/addTask}" method="post">
<input type="text" name="description" placeholder="Enter a new task"
required>
<button type="submit">Add Task</button>
</form>
<ul class="task-list">
<li th:each="task : ${tasks}" class="task-item">
<span th:text="${task.description}"></span>
<a th:href="@{/deleteTask/{id}(id=${task.id})}" class="delete-
btn">Delete</a>
</li>
</ul>
</div>
</body>
</html>
Explanation of the Code
Main Application (TodoListApplication.java): Starts the Spring Boot application.
Entity (Task.java): Represents the Task model with a description.
Repository (TaskRepository.java): Provides data access methods for CRUD operations.
Controller (TaskController.java): Handles HTTP requests to add, display, and delete
tasks.
Frontend (HTML + Thymeleaf) (index.html): Renders the tasks, form to add tasks, and
buttons to delete individual tasks.
Running the Application
Build and Run: Open the project in an IDE (like IntelliJ or Eclipse) or use the
command line.
bash
Copy code
./mvnw spring-boot:run
Access the Application: Go to http://localhost:8080 in your web browser to see the
to-do list.
Summary
This simple to-do list application provides:
Adding Tasks: Uses a form to submit tasks, handled by the addTask method in the
controller.
Displaying Tasks: All tasks are fetched from the H2 database and displayed in a
list.
Deleting Tasks: Each task has a delete button, which calls deleteTask to remove the
task from the list.
This application provides a clean starting point to extend functionality further,
such as by adding user authentication or task editing features.