{"id":27,"date":"2026-10-08T16:17:16","date_gmt":"2026-10-08T16:17:16","guid":{"rendered":"https:\/\/boot-code.com\/?p=27"},"modified":"2026-10-08T16:17:19","modified_gmt":"2026-10-08T16:17:19","slug":"spring-boot-todo-web-application-with-mysql-extension","status":"publish","type":"post","link":"https:\/\/boot-code.com\/?p=27","title":{"rendered":"Spring Boot Todo Web Application with MySQL Extension"},"content":{"rendered":"\n

Great. Let\u2019s upgrade the Todo application into a proper Spring Boot CRUD project<\/strong> with:<\/p>\n\n\n\n

    \n
  1. Add Todo<\/li>\n\n\n\n
  2. View Todo<\/li>\n\n\n\n
  3. Edit Todo<\/li>\n\n\n\n
  4. Delete Todo<\/li>\n\n\n\n
  5. Mark Complete\/Incomplete<\/li>\n\n\n\n
  6. Validation<\/li>\n\n\n\n
  7. Bootstrap UI<\/li>\n\n\n\n
  8. REST API<\/li>\n\n\n\n
  9. MySQL persistence<\/li>\n<\/ol>\n\n\n\n

    We can build it incrementally so you understand Controller \u2192 Service \u2192 Repository \u2192 MySQL<\/strong> rather than just copying code.<\/p>\n\n\n\n

    Below is a complete Spring Boot Todo CRUD application<\/strong> you can import into Eclipse and run with MySQL.<\/p>\n\n\n\n

    It includes Web UI + Bootstrap + CRUD + validation + REST API + MySQL<\/strong>.<\/p>\n\n\n\n

    Project structure<\/h3>\n\n\n\n
    todo\/\n\u251c\u2500\u2500 pom.xml\n\u2514\u2500\u2500 src\/\n    \u2514\u2500\u2500 main\/\n        \u251c\u2500\u2500 java\/com\/example\/todo\/\n        \u2502   \u251c\u2500\u2500 TodoApplication.java\n        \u2502   \u251c\u2500\u2500 controller\/\n        \u2502   \u2502   \u251c\u2500\u2500 TodoController.java\n        \u2502   \u2502   \u2514\u2500\u2500 TodoRestController.java\n        \u2502   \u251c\u2500\u2500 model\/\n        \u2502   \u2502   \u2514\u2500\u2500 Todo.java\n        \u2502   \u251c\u2500\u2500 repository\/\n        \u2502   \u2502   \u2514\u2500\u2500 TodoRepository.java\n        \u2502   \u2514\u2500\u2500 service\/\n        \u2502       \u2514\u2500\u2500 TodoService.java\n        \u2502\n        \u2514\u2500\u2500 resources\/\n            \u251c\u2500\u2500 templates\/\n            \u2502   \u251c\u2500\u2500 index.html\n            \u2502   \u2514\u2500\u2500 edit.html\n            \u2514\u2500\u2500 application.properties<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    1. MySQL setup<\/h2>\n\n\n\n
    Run:<\/p>\n\n\n\n
    sudo systemctl start mysql<\/code><\/pre>\n\n\n\n
    Then:<\/p>\n\n\n\n
    sudo mysql<\/code><\/pre>\n\n\n\n
    Create the database:<\/p>\n\n\n\n
    CREATE DATABASE todo_db;\n\nCREATE USER 'todo_user'@'localhost'\nIDENTIFIED BY 'todo_password';\n\nGRANT ALL PRIVILEGES ON todo_db.*\nTO 'todo_user'@'localhost';\n\nFLUSH PRIVILEGES;\n\nEXIT;<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    2. pom.xml<\/code><\/h1>\n\n\n\n
    Replace your pom.xml<\/code> with:<\/p>\n\n\n\n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\"\n         xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n         xsi:schemaLocation=\"\n         http://maven.apache.org\/POM\/4.0.0\n         https:\/\/maven.apache.org\/xsd\/maven-4.0.0.xsd\">\n\n    <modelVersion>4.0.0<\/modelVersion>\n\n    <parent>\n        <groupId>org.springframework.boot<\/groupId>\n        <artifactId>spring-boot-starter-parent<\/artifactId>\n        <version>3.5.6<\/version>\n        <relativePath\/>\n    <\/parent>\n\n    <groupId>com.example<\/groupId>\n    <artifactId>todo<\/artifactId>\n    <version>0.0.1-SNAPSHOT<\/version>\n\n    <name>todo<\/name>\n    <description>Spring Boot Todo Application<\/description>\n\n    <properties>\n        <java.version>17<\/java.version>\n    <\/properties>\n\n    <dependencies>\n\n        <!-- Spring Web -->\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-web<\/artifactId>\n        <\/dependency>\n\n        <!-- Thymeleaf -->\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-thymeleaf<\/artifactId>\n        <\/dependency>\n\n        <!-- Spring Data JPA -->\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-data-jpa<\/artifactId>\n        <\/dependency>\n\n        <!-- Validation -->\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-validation<\/artifactId>\n        <\/dependency>\n\n        <!-- MySQL -->\n        <dependency>\n            <groupId>com.mysql<\/groupId>\n            <artifactId>mysql-connector-j<\/artifactId>\n            <scope>runtime<\/scope>\n        <\/dependency>\n\n        <!-- DevTools -->\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-devtools<\/artifactId>\n            <optional>true<\/optional>\n        <\/dependency>\n\n        <!-- Testing -->\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-test<\/artifactId>\n            <scope>test<\/scope>\n        <\/dependency>\n\n    <\/dependencies>\n\n    <build>\n        <plugins>\n\n            <plugin>\n                <groupId>org.springframework.boot<\/groupId>\n                <artifactId>spring-boot-maven-plugin<\/artifactId>\n            <\/plugin>\n\n        <\/plugins>\n    <\/build>\n\n<\/project><\/code><\/pre>\n\n\n\n
    \n
    If your Spring Initializr generated a newer Spring Boot 3.x version, you can keep that version instead of 3.5.6<\/code>.<\/p>\n<\/blockquote>\n\n\n\n
    \n\n\n\n
    3. Main application<\/h1>\n\n\n\n
    File:<\/p>\n\n\n\n
    src\/main\/java\/com\/example\/todo\/TodoApplication.java<\/code><\/pre>\n\n\n\n
    package com.example.todo;\n\nimport org.springframework.boot.SpringApplication;\nimport org.springframework.boot.autoconfigure.SpringBootApplication;\n\n@SpringBootApplication\npublic class TodoApplication {\n\n    public static void main(String[] args) {\n\n        SpringApplication.run(TodoApplication.class, args);\n\n    }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    4. Todo Entity<\/h1>\n\n\n\n
    Create:<\/p>\n\n\n\n
    model\/Todo.java<\/code><\/pre>\n\n\n\n
    package com.example.todo.model;\n\nimport jakarta.persistence.Entity;\nimport jakarta.persistence.GeneratedValue;\nimport jakarta.persistence.GenerationType;\nimport jakarta.persistence.Id;\nimport jakarta.validation.constraints.NotBlank;\nimport jakarta.validation.constraints.Size;\n\n@Entity\npublic class Todo {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    private Long id;\n\n    @NotBlank(message = \"Title is required\")\n    @Size(min = 3, max = 100,\n          message = \"Title must be between 3 and 100 characters\")\n    private String title;\n\n    private boolean completed;\n\n    public Todo() {\n    }\n\n    public Todo(String title) {\n        this.title = title;\n        this.completed = false;\n    }\n\n    public Long getId() {\n        return id;\n    }\n\n    public void setId(Long id) {\n        this.id = id;\n    }\n\n    public String getTitle() {\n        return title;\n    }\n\n    public void setTitle(String title) {\n        this.title = title;\n    }\n\n    public boolean isCompleted() {\n        return completed;\n    }\n\n    public void setCompleted(boolean completed) {\n        this.completed = completed;\n    }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    5. Repository<\/h1>\n\n\n\n
    File:<\/p>\n\n\n\n
    repository\/TodoRepository.java<\/code><\/pre>\n\n\n\n
    package com.example.todo.repository;\n\nimport org.springframework.data.jpa.repository.JpaRepository;\n\nimport com.example.todo.model.Todo;\n\npublic interface TodoRepository extends JpaRepository<Todo, Long> {\n\n}<\/code><\/pre>\n\n\n\n
    That’s all the repository needs for basic CRUD.<\/p>\n\n\n\n
    Spring gives us:<\/p>\n\n\n\n
    findAll()\nfindById()\nsave()\ndeleteById()\nexistsById()\ncount()<\/code><\/pre>\n\n\n\n
    automatically.<\/p>\n\n\n\n
    \n\n\n\n
    6. Service<\/h1>\n\n\n\n
    File:<\/p>\n\n\n\n
    service\/TodoService.java<\/code><\/pre>\n\n\n\n
    package com.example.todo.service;\n\nimport java.util.List;\n\nimport org.springframework.stereotype.Service;\n\nimport com.example.todo.model.Todo;\nimport com.example.todo.repository.TodoRepository;\n\n@Service\npublic class TodoService {\n\n    private final TodoRepository todoRepository;\n\n    public TodoService(TodoRepository todoRepository) {\n        this.todoRepository = todoRepository;\n    }\n\n    \/\/ READ ALL\n    public List<Todo> getAllTodos() {\n\n        return todoRepository.findAll();\n\n    }\n\n    \/\/ READ ONE\n    public Todo getTodoById(Long id) {\n\n        return todoRepository.findById(id)\n                .orElseThrow(() ->\n                    new RuntimeException(\"Todo not found: \" + id)\n                );\n\n    }\n\n    \/\/ CREATE\n    public Todo saveTodo(Todo todo) {\n\n        return todoRepository.save(todo);\n\n    }\n\n    \/\/ UPDATE\n    public Todo updateTodo(Long id, Todo todoDetails) {\n\n        Todo todo = getTodoById(id);\n\n        todo.setTitle(todoDetails.getTitle());\n        todo.setCompleted(todoDetails.isCompleted());\n\n        return todoRepository.save(todo);\n\n    }\n\n    \/\/ DELETE\n    public void deleteTodo(Long id) {\n\n        if (!todoRepository.existsById(id)) {\n\n            throw new RuntimeException(\n                \"Todo not found: \" + id\n            );\n\n        }\n\n        todoRepository.deleteById(id);\n\n    }\n\n    \/\/ TOGGLE\n    public void toggleTodo(Long id) {\n\n        Todo todo = getTodoById(id);\n\n        todo.setCompleted(!todo.isCompleted());\n\n        todoRepository.save(todo);\n\n    }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    7. Web Controller<\/h1>\n\n\n\n
    This controller handles the HTML web pages.<\/p>\n\n\n\n
    File:<\/p>\n\n\n\n
    controller\/TodoController.java<\/code><\/pre>\n\n\n\n
    package com.example.todo.controller;\n\nimport org.springframework.stereotype.Controller;\nimport org.springframework.ui.Model;\nimport org.springframework.validation.BindingResult;\nimport org.springframework.web.bind.annotation.GetMapping;\nimport org.springframework.web.bind.annotation.ModelAttribute;\nimport org.springframework.web.bind.annotation.PathVariable;\nimport org.springframework.web.bind.annotation.PostMapping;\n\nimport com.example.todo.model.Todo;\nimport com.example.todo.service.TodoService;\n\nimport jakarta.validation.Valid;\n\n@Controller\npublic class TodoController {\n\n    private final TodoService todoService;\n\n    public TodoController(TodoService todoService) {\n        this.todoService = todoService;\n    }\n\n    \/\/ HOME PAGE\n    @GetMapping(\"\/\")\n    public String home(Model model) {\n\n        model.addAttribute(\n            \"todos\",\n            todoService.getAllTodos()\n        );\n\n        model.addAttribute(\n            \"todo\",\n            new Todo()\n        );\n\n        return \"index\";\n    }\n\n    \/\/ CREATE\n    @PostMapping(\"\/todos\")\n    public String addTodo(\n            @Valid @ModelAttribute(\"todo\") Todo todo,\n            BindingResult result,\n            Model model) {\n\n        if (result.hasErrors()) {\n\n            model.addAttribute(\n                \"todos\",\n                todoService.getAllTodos()\n            );\n\n            return \"index\";\n        }\n\n        todoService.saveTodo(todo);\n\n        return \"redirect:\/\";\n    }\n\n    \/\/ EDIT PAGE\n    @GetMapping(\"\/todos\/edit\/{id}\")\n    public String editTodo(\n            @PathVariable Long id,\n            Model model) {\n\n        Todo todo = todoService.getTodoById(id);\n\n        model.addAttribute(\"todo\", todo);\n\n        return \"edit\";\n    }\n\n    \/\/ UPDATE\n    @PostMapping(\"\/todos\/update\/{id}\")\n    public String updateTodo(\n            @PathVariable Long id,\n            @Valid @ModelAttribute(\"todo\") Todo todo,\n            BindingResult result) {\n\n        if (result.hasErrors()) {\n\n            return \"edit\";\n        }\n\n        todoService.updateTodo(id, todo);\n\n        return \"redirect:\/\";\n    }\n\n    \/\/ DELETE\n    @GetMapping(\"\/todos\/delete\/{id}\")\n    public String deleteTodo(\n            @PathVariable Long id) {\n\n        todoService.deleteTodo(id);\n\n        return \"redirect:\/\";\n    }\n\n    \/\/ TOGGLE\n    @GetMapping(\"\/todos\/toggle\/{id}\")\n    public String toggleTodo(\n            @PathVariable Long id) {\n\n        todoService.toggleTodo(id);\n\n        return \"redirect:\/\";\n    }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    8. REST Controller<\/h1>\n\n\n\n
    Now we also expose a REST API.<\/p>\n\n\n\n
    Create:<\/p>\n\n\n\n
    controller\/TodoRestController.java<\/code><\/pre>\n\n\n\n
    package com.example.todo.controller;\n\nimport java.util.List;\n\nimport org.springframework.http.HttpStatus;\nimport org.springframework.http.ResponseEntity;\nimport org.springframework.web.bind.annotation.*;\n\nimport com.example.todo.model.Todo;\nimport com.example.todo.service.TodoService;\n\n@RestController\n@RequestMapping(\"\/api\/todos\")\npublic class TodoRestController {\n\n    private final TodoService todoService;\n\n    public TodoRestController(TodoService todoService) {\n        this.todoService = todoService;\n    }\n\n    \/\/ GET ALL\n    @GetMapping\n    public List<Todo> getAllTodos() {\n\n        return todoService.getAllTodos();\n\n    }\n\n    \/\/ GET ONE\n    @GetMapping(\"\/{id}\")\n    public ResponseEntity<Todo> getTodo(\n            @PathVariable Long id) {\n\n        try {\n\n            return ResponseEntity.ok(\n                todoService.getTodoById(id)\n            );\n\n        } catch (RuntimeException e) {\n\n            return ResponseEntity.notFound().build();\n\n        }\n    }\n\n    \/\/ CREATE\n    @PostMapping\n    public ResponseEntity<Todo> createTodo(\n            @RequestBody Todo todo) {\n\n        Todo savedTodo =\n                todoService.saveTodo(todo);\n\n        return ResponseEntity\n                .status(HttpStatus.CREATED)\n                .body(savedTodo);\n    }\n\n    \/\/ UPDATE\n    @PutMapping(\"\/{id}\")\n    public ResponseEntity<Todo> updateTodo(\n            @PathVariable Long id,\n            @RequestBody Todo todo) {\n\n        try {\n\n            Todo updatedTodo =\n                    todoService.updateTodo(id, todo);\n\n            return ResponseEntity.ok(updatedTodo);\n\n        } catch (RuntimeException e) {\n\n            return ResponseEntity.notFound().build();\n\n        }\n    }\n\n    \/\/ DELETE\n    @DeleteMapping(\"\/{id}\")\n    public ResponseEntity<Void> deleteTodo(\n            @PathVariable Long id) {\n\n        try {\n\n            todoService.deleteTodo(id);\n\n            return ResponseEntity.noContent().build();\n\n        } catch (RuntimeException e) {\n\n            return ResponseEntity.notFound().build();\n\n        }\n    }\n\n    \/\/ TOGGLE\n    @PatchMapping(\"\/{id}\/toggle\")\n    public ResponseEntity<Todo> toggleTodo(\n            @PathVariable Long id) {\n\n        try {\n\n            todoService.toggleTodo(id);\n\n            return ResponseEntity.ok(\n                todoService.getTodoById(id)\n            );\n\n        } catch (RuntimeException e) {\n\n            return ResponseEntity.notFound().build();\n\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    9. application.properties<\/code><\/h1>\n\n\n\n
    File:<\/p>\n\n\n\n
    src\/main\/resources\/application.properties<\/code><\/pre>\n\n\n\n
    spring.application.name=todo\n\n# MySQL\nspring.datasource.url=jdbc:mysql:\/\/localhost:3306\/todo_db\nspring.datasource.username=todo_user\nspring.datasource.password=todo_password\n\n# JPA \/ Hibernate\nspring.jpa.hibernate.ddl-auto=update\nspring.jpa.show-sql=true\nspring.jpa.properties.hibernate.format_sql=true\n\n# Thymeleaf\nspring.thymeleaf.cache=false\n\n# Server\nserver.port=8080<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    10. Main HTML page<\/h1>\n\n\n\n
    Create:<\/p>\n\n\n\n
    src\/main\/resources\/templates\/index.html<\/code><\/pre>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\"\n      xmlns:th=\"http:\/\/www.thymeleaf.org\">\n\n<head>\n\n    <meta charset=\"UTF-8\">\n\n    <meta name=\"viewport\"\n          content=\"width=device-width, initial-scale=1\">\n\n    <title>Todo Application<\/title>\n\n    <link\n        href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\"\n        rel=\"stylesheet\">\n\n<\/head>\n\n<body class=\"bg-light\">\n\n<div class=\"container mt-5\">\n\n    <div class=\"row justify-content-center\">\n\n        <div class=\"col-md-8\">\n\n            <div class=\"card shadow\">\n\n                <div class=\"card-header bg-primary text-white\">\n\n                    <h2 class=\"text-center mb-0\">\n                        Todo Application\n                    <\/h2>\n\n                <\/div>\n\n                <div class=\"card-body\">\n\n                    <!-- ADD TODO -->\n\n                    <form\n                        th:action=\"@{\/todos}\"\n                        th:object=\"${todo}\"\n                        method=\"post\"\n                        class=\"mb-4\">\n\n                        <div class=\"input-group\">\n\n                            <input\n                                type=\"text\"\n                                th:field=\"*{title}\"\n                                class=\"form-control\"\n                                placeholder=\"Enter todo\">\n\n                            <button\n                                type=\"submit\"\n                                class=\"btn btn-primary\">\n\n                                Add Todo\n\n                            <\/button>\n\n                        <\/div>\n\n                        <div\n                            th:if=\"${#fields.hasErrors('title')}\"\n                            th:errors=\"*{title}\"\n                            class=\"text-danger mt-2\">\n                        <\/div>\n\n                    <\/form>\n\n\n                    <!-- TODO TABLE -->\n\n                    <table class=\"table table-hover\">\n\n                        <thead class=\"table-dark\">\n\n                        <tr>\n\n                            <th>ID<\/th>\n\n                            <th>Todo<\/th>\n\n                            <th>Status<\/th>\n\n                            <th>Actions<\/th>\n\n                        <\/tr>\n\n                        <\/thead>\n\n                        <tbody>\n\n                        <tr th:each=\"todo : ${todos}\">\n\n                            <td th:text=\"${todo.id}\">\n                                1\n                            <\/td>\n\n                            <td>\n\n                                <span\n                                    th:text=\"${todo.title}\"\n                                    th:classappend=\"${todo.completed}\n                                    ? 'text-decoration-line-through text-muted'\n                                    : ''\">\n\n                                    Learn Spring Boot\n\n                                <\/span>\n\n                            <\/td>\n\n                            <td>\n\n                                <span\n                                    th:if=\"${todo.completed}\"\n                                    class=\"badge bg-success\">\n\n                                    Completed\n\n                                <\/span>\n\n                                <span\n                                    th:unless=\"${todo.completed}\"\n                                    class=\"badge bg-warning text-dark\">\n\n                                    Pending\n\n                                <\/span>\n\n                            <\/td>\n\n                            <td>\n\n                                <a\n                                    th:href=\"@{\/todos\/toggle\/{id}(id=${todo.id})}\"\n                                    class=\"btn btn-sm btn-success\">\n\n                                    Toggle\n\n                                <\/a>\n\n                                <a\n                                    th:href=\"@{\/todos\/edit\/{id}(id=${todo.id})}\"\n                                    class=\"btn btn-sm btn-primary\">\n\n                                    Edit\n\n                                <\/a>\n\n                                <a\n                                    th:href=\"@{\/todos\/delete\/{id}(id=${todo.id})}\"\n                                    class=\"btn btn-sm btn-danger\"\n                                    onclick=\"return confirm('Delete this todo?');\">\n\n                                    Delete\n\n                                <\/a>\n\n                            <\/td>\n\n                        <\/tr>\n\n                        <tr th:if=\"${#lists.isEmpty(todos)}\">\n\n                            <td\n                                colspan=\"4\"\n                                class=\"text-center text-muted\">\n\n                                No todos found.\n\n                            <\/td>\n\n                        <\/tr>\n\n                        <\/tbody>\n\n                    <\/table>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    11. Edit page<\/h1>\n\n\n\n
    Create:<\/p>\n\n\n\n
    src\/main\/resources\/templates\/edit.html<\/code><\/pre>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\"\n      xmlns:th=\"http:\/\/www.thymeleaf.org\">\n\n<head>\n\n    <meta charset=\"UTF-8\">\n\n    <meta name=\"viewport\"\n          content=\"width=device-width, initial-scale=1\">\n\n    <title>Edit Todo<\/title>\n\n    <link\n        href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\"\n        rel=\"stylesheet\">\n\n<\/head>\n\n<body class=\"bg-light\">\n\n<div class=\"container mt-5\">\n\n    <div class=\"row justify-content-center\">\n\n        <div class=\"col-md-6\">\n\n            <div class=\"card shadow\">\n\n                <div class=\"card-header bg-primary text-white\">\n\n                    <h3 class=\"text-center mb-0\">\n                        Edit Todo\n                    <\/h3>\n\n                <\/div>\n\n                <div class=\"card-body\">\n\n                    <form\n                        th:action=\"@{\/todos\/update\/{id}(id=${todo.id})}\"\n                        th:object=\"${todo}\"\n                        method=\"post\">\n\n                        <div class=\"mb-3\">\n\n                            <label class=\"form-label\">\n                                Todo\n                            <\/label>\n\n                            <input\n                                type=\"text\"\n                                th:field=\"*{title}\"\n                                class=\"form-control\">\n\n                            <div\n                                th:if=\"${#fields.hasErrors('title')}\"\n                                th:errors=\"*{title}\"\n                                class=\"text-danger\">\n                            <\/div>\n\n                        <\/div>\n\n                        <div class=\"form-check mb-3\">\n\n                            <input\n                                type=\"checkbox\"\n                                th:field=\"*{completed}\"\n                                class=\"form-check-input\">\n\n                            <label class=\"form-check-label\">\n                                Completed\n                            <\/label>\n\n                        <\/div>\n\n                        <button\n                            type=\"submit\"\n                            class=\"btn btn-primary\">\n\n                            Update\n\n                        <\/button>\n\n                        <a\n                            href=\"\/\"\n                            class=\"btn btn-secondary\">\n\n                            Cancel\n\n                        <\/a>\n\n                    <\/form>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    12. Run the application<\/h1>\n\n\n\n
    From the project directory:<\/p>\n\n\n\n
    cd todo<\/code><\/pre>\n\n\n\n
    Run:<\/p>\n\n\n\n
    .\/mvnw spring-boot:run<\/code><\/pre>\n\n\n\n
    Or in Eclipse:<\/p>\n\n\n\n
    Right click TodoApplication.java\n        \u2193\nRun As\n        \u2193\nSpring Boot App<\/code><\/pre>\n\n\n\n
    Then open:<\/p>\n\n\n\n
    Todo Application<\/a><\/p>\n\n\n\n
    \n\n\n\n
    13. Test CRUD<\/h1>\n\n\n\n
    Create<\/h3>\n\n\n\n
    Enter:<\/p>\n\n\n\n
    Learn Java<\/code><\/pre>\n\n\n\n
    Click Add Todo<\/strong>.<\/p>\n\n\n\n
    Read<\/h3>\n\n\n\n
    The todo appears in the table.<\/p>\n\n\n\n
    Update<\/h3>\n\n\n\n
    Click:<\/p>\n\n\n\n
    Edit<\/code><\/pre>\n\n\n\n
    Change:<\/p>\n\n\n\n
    Learn Java<\/code><\/pre>\n\n\n\n
    to:<\/p>\n\n\n\n
    Learn Java and Spring Boot<\/code><\/pre>\n\n\n\n
    Click Update<\/strong>.<\/p>\n\n\n\n
    Complete<\/h3>\n\n\n\n
    Click:<\/p>\n\n\n\n
    Toggle<\/code><\/pre>\n\n\n\n
    The status changes:<\/p>\n\n\n\n
    Pending<\/code><\/pre>\n\n\n\n
    to:<\/p>\n\n\n\n
    Completed<\/code><\/pre>\n\n\n\n
    Delete<\/h3>\n\n\n\n
    Click:<\/p>\n\n\n\n
    Delete<\/code><\/pre>\n\n\n\n
    The record is removed from MySQL.<\/p>\n\n\n\n
    \n\n\n\n
    14. Test REST API<\/h1>\n\n\n\n
    You can test the REST API using Postman, curl, or your browser.<\/p>\n\n\n\n
    Get all todos<\/h2>\n\n\n\n
    curl http:\/\/localhost:8080\/api\/todos<\/code><\/pre>\n\n\n\n
    Example:<\/p>\n\n\n\n
    [\n    {\n        \"id\": 1,\n        \"title\": \"Learn Java\",\n        \"completed\": false\n    },\n    {\n        \"id\": 2,\n        \"title\": \"Learn Spring Boot\",\n        \"completed\": true\n    }\n]<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Get one todo<\/h2>\n\n\n\n
    curl http:\/\/localhost:8080\/api\/todos\/1<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Create todo<\/h2>\n\n\n\n
    curl -X POST \\\n-H \"Content-Type: application\/json\" \\\n-d '{\"title\":\"Learn REST API\",\"completed\":false}' \\\nhttp://localhost:8080\/api\/todos<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Update todo<\/h2>\n\n\n\n
    curl -X PUT \\\n-H \"Content-Type: application\/json\" \\\n-d '{\"title\":\"Learn Spring Boot REST\",\"completed\":true}' \\\nhttp://localhost:8080\/api\/todos\/1<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Toggle todo<\/h2>\n\n\n\n
    curl -X PATCH \\\nhttp://localhost:8080\/api\/todos\/1\/toggle<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Delete todo<\/h2>\n\n\n\n
    curl -X DELETE \\\nhttp://localhost:8080\/api\/todos\/1<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    15. Check MySQL<\/h1>\n\n\n\n
    mysql -u todo_user -p<\/code><\/pre>\n\n\n\n
    Then:<\/p>\n\n\n\n
    USE todo_db;<\/code><\/pre>\n\n\n\n
    Check tables:<\/p>\n\n\n\n
    SHOW TABLES;<\/code><\/pre>\n\n\n\n
    Check todos:<\/p>\n\n\n\n
    SELECT * FROM todo;<\/code><\/pre>\n\n\n\n
    You should get something like:<\/p>\n\n\n\n
    +----+-------------------------+-----------+\n| id | title                   | completed |\n+----+-------------------------+-----------+\n|  1 | Learn Java              |         0 |\n|  2 | Learn Spring Boot       |         1 |\n|  3 | Learn REST API          |         0 |\n+----+-------------------------+-----------+<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    16. How the application works<\/h1>\n\n\n\n
    The important Spring architecture is:<\/p>\n\n\n\n
                        Browser\n                       |\n                       v\n              TodoController\n                       |\n                       v\n                TodoService\n                       |\n                       v\n              TodoRepository\n                       |\n                       v\n                 JPA\/Hibernate\n                       |\n                       v\n                    MySQL<\/code><\/pre>\n\n\n\n
    For REST:<\/p>\n\n\n\n
    Postman \/ curl \/ Frontend\n          |\n          v\n  TodoRestController\n          |\n          v\n     TodoService\n          |\n          v\n   TodoRepository\n          |\n          v\n       MySQL<\/code><\/pre>\n\n\n\n
    Create<\/h3>\n\n\n\n
    POST \/todos\n       \u2193\nController\n       \u2193\nService\n       \u2193\nRepository\n       \u2193\nINSERT\n       \u2193\nMySQL<\/code><\/pre>\n\n\n\n
    Read<\/h3>\n\n\n\n
    GET \/\n   \u2193\nController\n   \u2193\nService\n   \u2193\nRepository\n   \u2193\nSELECT\n   \u2193\nThymeleaf\n   \u2193\nHTML<\/code><\/pre>\n\n\n\n
    Update<\/h3>\n\n\n\n
    PUT \/api\/todos\/1\n       \u2193\nController\n       \u2193\nService\n       \u2193\nRepository\n       \u2193\nUPDATE\n       \u2193\nMySQL<\/code><\/pre>\n\n\n\n
    Delete<\/h3>\n\n\n\n
    DELETE \/api\/todos\/1\n       \u2193\nController\n       \u2193\nService\n       \u2193\nRepository\n       \u2193\nDELETE\n       \u2193\nMySQL<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    17. Final API table<\/h2>\n\n\n\n
    Method<\/th>URL<\/th>Purpose<\/th><\/tr><\/thead>
    GET<\/td>\/api\/todos<\/code><\/td>Get all<\/td><\/tr>
    GET<\/td>\/api\/todos\/1<\/code><\/td>Get one<\/td><\/tr>
    POST<\/td>\/api\/todos<\/code><\/td>Create<\/td><\/tr>
    PUT<\/td>\/api\/todos\/1<\/code><\/td>Update<\/td><\/tr>
    PATCH<\/td>\/api\/todos\/1\/toggle<\/code><\/td>Toggle<\/td><\/tr>
    DELETE<\/td>\/api\/todos\/1<\/code><\/td>Delete<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    And the web application:<\/p>\n\n\n\n
    Method<\/th>URL<\/th>Purpose<\/th><\/tr><\/thead>
    GET<\/td>\/<\/code><\/td>Todo home<\/td><\/tr>
    POST<\/td>\/todos<\/code><\/td>Add<\/td><\/tr>
    GET<\/td>\/todos\/edit\/1<\/code><\/td>Edit page<\/td><\/tr>
    POST<\/td>\/todos\/update\/1<\/code><\/td>Update<\/td><\/tr>
    GET<\/td>\/todos\/toggle\/1<\/code><\/td>Toggle<\/td><\/tr>
    GET<\/td>\/todos\/delete\/1<\/code><\/td>Delete<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    This gives you a complete Spring Boot + Maven + MySQL + JPA\/Hibernate + Thymeleaf + Bootstrap + REST CRUD<\/strong> project suitable for practicing in Eclipse on Ubuntu.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Great. Let\u2019s upgrade the Todo application into a proper Spring Boot CRUD project with: We can build it incrementally so you understand Controller \u2192 Service \u2192 Repository \u2192 MySQL rather than just copying code. Below is a complete Spring Boot…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,9,8,24,30,10],"tags":[33,31,23,32],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-java","category-linux","category-maven","category-mysql","category-spring","category-web","tag-application","tag-spring","tag-ubuntu","tag-web"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t