Scribd
Upload
12 views

To Build A Simple Full-Stack Java A

Uploaded by

harshitha Katuru
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

To Build A Simple Full-Stack Java A

Uploaded by

harshitha Katuru
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

To build a simple full-stack Java application for a to-do list, we can use Spring

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:

Spring Web: To handle HTTP requests.


Spring Data JPA: To interact with the database.
H2 Database: An in-memory database to store tasks.
Thymeleaf: For rendering HTML templates.
Step 2: Code the Application
1. TodoListApplication.java (Main Class)
This is the main class that starts the Spring Boot application.

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;

private String description;

// Getters and Setters


public Long getId() {
return id;
}

public void setId(Long id) {


this.id = id;
}

public String getDescription() {


return description;
}

public void setDescription(String description) {


this.description = description;
}
}
3. TaskRepository.java (Repository)
This interface extends JpaRepository to provide CRUD operations.

java
Copy code
package com.example.todolist.repository;

import com.example.todolist.model.Task;
import org.springframework.data.jpa.repository.JpaRepository;

public interface TaskRepository extends JpaRepository<Task, Long> {


}
4. TaskController.java (Controller)
The controller handles HTTP requests for adding, viewing, and deleting tasks.

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.

You might also like