LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kanfutrooper(masaomi)

Kotlin+SpringBootでアプリを作成してみた【Crud Web app】

Last updated at Posted at 2024-12-07

spring.initializr でプロジェクトを作成する

(1) ブラウザを開き、(https://start.spring.io/) を入力し、開く
(2) 下記を入力し、Dependenciesで下記を選択し、『GENERATE』ボタンを押す

  • Project: Maven

  • Language: kotlin

  • SpringBoot: 3.3.6

  • Group: br.edu.ifpi

  • Artifact: GerencidorUsuarioApp

  • Name : GerencidorUsuarioApp

  • Description: Demo project for Spring Boot

  • Package name:

Dependencies

  • Spring Web
  • Spring Data JPA
  • MySQL Driver
  • Thymeleaf
  • Validation

データベースの作成とデータベースへの接続する

(1)postgresqlデータベースを作成する

(2)application.propertiesを編集する

src/main/resources/application.properties
spring.jpa.database=mysql
spring.sql.init.platform=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true

Bootstrap で登録フォームを作成する

(1)formulario-cadastro.htmlを作成する

resouce/templates/formulario-cadastro.html
<!DOCTYPE html>
<htmllang="en">
  <head>
    <title>formulario de cadastro</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <h2>formulario de cadastro</h2>
    <form>

        <div class="mb-3">
            <input class="form-control" type="text" id="name" name="name" placeholder="Name">
        </div>

        <div class="mb-3">
            <input class="form-control" type="text" id="email" name="email" placeholder="Email">
        </div>

        <div class="mb-3">
            <input class="form-control" type="text" id="cpf" name="cpf" placeholder="Cpf">
        </div>

        <div class="mb-3">
            <input class="form-control" type="text" id="senha" name="senha" placeholder="Senha">
        </div>

        <div class="mb-3">
                <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
                  <option selected value="">Selecione o papel</option>
                  <option value="Adminstrador">Adminstrador</option>
                  <option value="Usuario">Usuario</option>
                  <option value="Programador">Programador</option>
                </select>
        </div>
        <button type="submit" class="btn btn-primary">Cadastrar</button>
    </form>
</div>
  </body>
</html>

(2)controller/UsuarioControllerを作成する

controller/UsuarioController.kt
package br.edu.ifpi.GerencidorUsuarioApp.controller
import org.springframework.stereotype.Controller

@Controller
class UsuarioController {

    @GetMapping("/formulario/cadastro")
    fun abrirFormularioCadastro(): String {

        return "formulario-cadastro"   
    }
}

(3)model/Usuarioを作成する

model/Usuario.kt
package br.edu.ifpi.GerencidorUsuarioApp.model

data class Usuario (

    @field:NotBlank(message = "Nome e obrigatorio")
    var nome: String = "",

    @field:NotBlank(message = "Email e obrigatorio")
    @field:Email(message = "Email invalido")
    var email: String = "",

    @field:NotBlank(message = "Cpf e obrigatorio")
    @field:CPF(message = "Cpf invalido")
    var cpf: String = "",

    @field:NotBlank(message = "senha e obrigatorio")
    @field:Size(min=6, max=12, message = "A senha deve ter entre 6 e 12 caracteres")
    var senha: String = "",

    var papel: String = ""
){

}

(4)thymeleaf を使用してユーザー オブジェクトの入力と属性を設定する

resouce/templates/formulario-cadastro.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>formulario de cadastro</title>
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>formulario de cadastro</h2>
      <form th:object="${usuario}" method="post" action="/cadastrar">
        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="nome"
            name="nome"
            placeholder="Nome"
            th:field="*{nome}"
          />
        </div>

        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="email"
            name="email"
            placeholder="Email"
            th:field="*{email}"
          />
        </div>

        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="cpf"
            name="cpf"
            placeholder="Cpf"
            th:field="*{cpf}"
          />
        </div>

        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="senha"
            name="senha"
            placeholder="Senha"
            th:field="*{senha}"
          />
        </div>

        <div class="mb-3">
          <select
            class="form-select"
            id="floatingSelect"
            aria-label="Floating label select example"
            th:field="*{papel}"
          >
            <option selected value="">Selecione o papel</option>
            <option value="Adminstrador">Adminstrador</option>
            <option value="Usuario">Usuario</option>
            <option value="Programador">Programador</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Cadastrar</button>
      </form>
    </div>
  </body>
</html>

(5)コントローラーでユーザーオブジェクトを受け取る

controller/UsuarioController.kt
package br.edu.ifpi.GerencidorUsuarioApp.controller
import org.springframework.stereotype.Controller

@Controller
class UsuarioController {

    @GetMapping("/formulario/cadastro")
    fun abrirFormularioCadastro(model: Model): String {

        val usuario = Usuario()

        model.addAttribute("usuario", usuario)

        return "formulario-cadastro"   
    }

    @PostMapping("/cadastrar")
    fun cadastrarUsuario(@Validated usuario: Usuario, result: BindingResult):String{

        if(result.hasErrors()){
            return "formulario-cadastro"
        }

        println(usuario)
        return "home"

    }
}

(6)home.htmlを作成する

resouce/templates/home.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Geranciamento de Usuarios</title>
  </head>
  <body></body>
</html>

(7)formulario-cadastro.htmlを編集する

resouce/templates/formulario-cadastro.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>formulario de cadastro</title>
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>formulario de cadastro</h2>
      <form th:object="${usuario}" method="post" action="/cadastrar">
        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="nome"
            name="nome"
            placeholder="Nome"
            th:field="*{nome}"
          />
          <div
            class="alert alert-danger"
            th:if="${#fields.hasErrors('nome')}"
            th:errors="*{nome}"
          ></div>
        </div>

        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="email"
            name="email"
            placeholder="Email"
            th:field="*{email}"
          />
          <div
            class="alert alert-danger"
            th:if="${#fields.hasErrors('email')}"
            th:errors="*{email}"
          ></div>
        </div>

        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="cpf"
            name="cpf"
            placeholder="Cpf"
            th:field="*{cpf}"
          />
          <div
            class="alert alert-danger"
            th:if="${#fields.hasErrors('cpf')}"
            th:errors="*{cpf}"
          ></div>
        </div>

        <div class="mb-3">
          <input
            class="form-control"
            type="text"
            id="senha"
            name="senha"
            placeholder="Senha"
            th:field="*{senha}"
          />
          <div
            class="alert alert-danger"
            th:if="${#fields.hasErrors('senha')}"
            th:errors="*{senha}"
          ></div>
        </div>

        <div class="mb-3">
          <select
            class="form-select"
            id="floatingSelect"
            aria-label="Floating label select example"
            th:field="*{papel}"
          >
            <option selected value="">Selecione o papel</option>
            <option value="Adminstrador">Adminstrador</option>
            <option value="Usuario">Usuario</option>
            <option value="Programador">Programador</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Cadastrar</button>
      </form>
    </div>
  </body>
</html>

(8)model/Usuarioを修正する

model/Usuario.kt

package br.edu.ifpi.GerencidorUsuarioApp.model

import jakarta.Validation.constraints.NotBlank
import jakarta.Validation.constraints.Size
import org.hibernate.Validator.constraints.br.CPF

@Entity
data class Usuario (

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    var id: Long? = null,

    @field:NotBlank(message = "Nome e obrigatorio")
    var nome: String = "",

    @field:NotBlank(message = "Email e obrigatorio")
    @field:Email(message = "Email invalido")
    var email: String = "",

    @field:NotBlank(message = "Cpf e obrigatorio")
    @field:CPF(message = "Cpf invalido")
    var cpf: String = "",

    @field:NotBlank(message = "senha e obrigatorio")
    @field:Size(min=6, max=12, message = "A senha deve ter entre 6 e 12 caracteres")
    var senha: String = "",

    var papel: String = ""
){

}

(9)repository/UsuarioRepositoryを作成する

repository/UsuarioRepository.kt

(10)controller/UsuarioControllerを編集する

controller/UsuarioController.kt
package br.edu.ifpi.GerencidorUsuarioApp.controller
import org.springframework.stereotype.Controller

@Controller
class UsuarioController {

    @Autowired
    lateinit var repositorio: UsuarioRepository

    @GetMapping("/formulario/cadastro")
    fun abrirFormularioCadastro(model: Model): String {

        val usuario = Usuario()

        model.addAttribute("usuario", usuario)

        return "formulario-cadastro"   
    }

    @PostMapping("/cadastrar")
    fun cadastrarUsuario(@Validated usuario: Usuario, result: BindingResult):String{

        if(result.hasErrors()){
            return "formulario-cadastro"
        }

        println(usuario)
        repositorio.save(usuario)
        
        return "home"

    }
}

ホームページにユーザー テーブルを実装する

(1)home.htmlを編集する

resouce/templates/home.html

(2)formulario-edicao.htmlを作成する

resouce/templates/formulario-edicao.html

(3)controller/UsuarioControllerを編集する

controller/UsuarioController.kt

参考サイト

Tutorial Criando Uma Aplicação Web CRUD com Kotlin, Spring Boot, Thymeleaf e Bootstrap - Aula 01
Criação do formulário de cadastro com Bootstrap - Aula 02
Criando a Função para Abrir o Formulário de Cadastro - Aula 03
Criação da Classe Modelo Usuario e Enviando Objeto Usuário para o Formulário - Aula 04
Utilizando o thymeleaf para colocar os dados dos inputs nos atributos do objeto usuario - Vídeo 05
Recebendo o Objeto Usuário no Controller - Aula 06
Implementando a Validação do Formulário de Cadastro - Aula 07
Salvando dados do usuário no banco de dados - Aula 08
Implementando a Tabela de Usuários na Página Home - Aula 09
Populando a Tabela com Dados do Banco de Dados - Aula 10
Implementando a Edição de Dados de Usuário - Aula 11
Implementando a Edição de Dados do Usuário - Aula 12

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?