ThymeleafでPOSTしたデータを簡単にDBへ登録する方法

2019年5月8日 2024年5月27日

1 ThymeleafでPOSTしたデータを簡単にデータベースへ登録する方法
2 事前準備
3 フロントエンド（画面）のソースコード
4 バックエンド（サーバ）のソースコード
5 Webアプリケーションの実行

ThymeleafでPOSTしたデータを簡単にデータベースへ登録する方法

Javaの人気フレームワークである「Spring Boot」と「Spring Boot」と相性の良いテンプレート・エンジン「Thymeleaf」を使用し、登録画面からPOSTしたデータを「Spring Data JPA」を利用して簡単にデータベースに簡単に登録する方法を紹介します。

本記事で作成する画面は以下の通り。一覧画面と登録画面を作成していきます。

[ユーザー情報一覧画面]

「ユーザー情報一覧画面」の「新規登録はこちら」リンクを押下すると「ユーザー新規登録」画面へ遷移します。

[ユーザー新規登録画面]

「ユーザー新規登録画面」で「登録」ボタンを押下すると、「ユーザー情報一覧画面」へ遷移して登録した内容を一覧に表示させます。

[ユーザー情報一覧画面]

事前準備

開発環境

開発環境は以下の通り。

開発環境	名称	説明
開発言語	Java	人気の開発言語
開発ツール	Eclipse	Javaでの定番開発ツール
フレームワーク	Spring Boot	人気のSpringフレームワークをベースとしたフレームワーク
テンプレートエンジン	Thymeleaf	Spring Bootと相性が良いテンプレートエンジン
データベース	MySQL	フリーで利用できる人気データベース

環境構築手順はこちら ⇒ EclipseでSpring Bootの環境構築 | 分かりやすく図解で説明

ディレクトリ構成

プロジェクトのディレクトリ構造は以下の通り。

springSample
  |
  |___src.main.java
       |
       |___com.example.demo
       |    |
       |    |___controller
       |    |    |
       |    |    |__UserController.java
       |    |
       |    |___entity
       |    |    |
       |    |    |___User.java
       |    |
       |    |___dto
       |    |    |
       |    |    |___UserRequest.java
       |    |
       |    |___repository
       |    |    |
       |    |    |___UserRepository.java
       |    |
       |    |___service
       |         |
       |         |___UserService.java
       |
       |___src.main.resources
            |
            |___templates
            |    |
            |    |___user
            |         |
            |         |___add.html
            |         |
            |         |___list.html
            |
            |___static
            |    |
            |    |___css
            |         |
            |         |___add.css
            |         |
            |         |___list.css
            |
            |___application.properties

データベース接続設定

プロジェクトにある「application.properties」を開き、MySQLの接続情報を設定します。

spring.datasource.url=jdbc:mysql://localhost/sampledb
spring.datasource.username=root
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

build.gradleの依存関係

プロジェクト配下にある「build.gradle」を開き、使用する機能の設定を行います。

dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
  implementation 'org.springframework.boot:spring-boot-starter-web'
  compileOnly 'org.projectlombok:lombok'
  runtimeOnly 'mysql:mysql-connector-java'
  annotationProcessor 'org.projectlombok:lombok'
  providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
  testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

データベースにテーブルの作成

今回は以下のテーブルを作成します。

■ユーザー情報TBL

物理名	論理名	データ型	NOT NULL	説明
id	ID	BIGINT	〇	主キー（AUTO_INCREMENT）
name	名前	VARCHAR(100)	〇	ユーザーの名前
address	住所	VARCHAR(255)		ユーザーの住所
phone	電話番号	VARCHAR(50)		ユーザーの電話番号
update_date	更新日時	DATETIME	〇	最終更新日時
create_date	作成日時	DATETIME	〇	登録日時
delete_date	削除日時	DATETIME		論理削除した日時

以下のCreate文でテーブルを作成します。

CREATE TABLE `sampledb`.`user` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(100) NOT NULL,
  `address` VARCHAR(255) NULL,
  `phone` VARCHAR(50) NULL,
  `update_date` DATETIME NOT NULL,
  `create_date` DATETIME NOT NULL,
  `delete_date` DATETIME NULL,
  PRIMARY KEY (`id`));

フロントエンド（画面）のソースコード

ユーザー情報一覧画面のHTML（list.html）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>
<title>ユーザー情報一覧</title>
<link href="/css/list.css" rel="stylesheet"></link>
<meta charset="utf-8" />
</head>
<body>
    <h1>ユーザー情報一覧</h1>
    <div>
        <a th:href="@{/user/add}">新規登録はこちら</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>名前</th>
                <th>住所</th>
                <th>電話番号</th>
                <th>更新日時</th>
                <th>登録日時</th>
                <th>削除日時</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user : ${userlist}" th:object="${user}">
                <td class="center" th:text="*{id}"></td>
                <td th:text="*{name}"></td>
                <td th:text="*{address}"></td>
                <td class="center" th:text="*{phone}"></td>
                <td class="center"
                    th:text="${#dates.format(user.updateDate, 'yyyy/MM/dd')}"></td>
                <td class="center"
                    th:text="${#dates.format(user.createDate, 'yyyy/MM/dd')}"></td>
                <td class="center"
                    th:text="${#dates.format(user.deleteDate, 'yyyy/MM/dd')}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ユーザー新規登録画面のHTML（add.html）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>
<title>ユーザー新規登録</title>
<link href="/css/add.css" rel="stylesheet"></link>
<meta charset="utf-8" />
</head>
<body>
    <h1>ユーザー新規登録</h1>
    <form th:action="@{/user/create}" th:object="${userRequest}"
        method="post">
        <table>
            <tr>
                <th class="cell_title">名前</th>
                <th class="cell_required">※</th>
                <td><input type="text" th:field="*{name}"></td>
            </tr>
            <tr>
                <th class="cell_title">住所</th>
                <th class="cell_required"></th>
                <td><input type="text" th:field="*{address}"></td>
            </tr>
            <tr>
                <th class="cell_title">電話番号</th>
                <th class="cell_required"></th>
                <td><input type="text" th:field="*{phone}"></td>
            </tr>
        </table>
        <div class="btn_area_center">
            <input type="submit" value="登録" class="btn">
        </div>
    </form>
</body>
</html>

ユーザー情報一覧画面のスタイルシート(list.css)

body {
    width: 90%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 6px;
}

table th {
    background-color: #F2F2F2;
}

ユーザー新規登録画面のスタイルシート(add.css)

body {
    width: 80%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 6px;
}

table th {
    background-color: #F2F2F2;
}

table input {
    width: 90%;
}

.cell_title {
    border-right: 0;
}

.cell_required {
    color: red;
    font-size: 12px;
    width: 10px;
    border-left: 0;
}

.btn {
    width: 100px;
    text-align: center;
}

.btn_area_center {
    margin-top: 20px;
    text-align: center;
}

バックエンド（サーバ）のソースコード

Controllerクラスの作成（UserController.java）

フロントエンドとバックエンドの入出力の管理を行うControllerクラスを作成します。

package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.example.demo.dto.UserRequest;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;

/**
 * ユーザー情報 Controller
 */
@Controller
public class UserController {

    /**
     * ユーザー情報 Service
     */
    @Autowired
    UserService userService;

    /**
     * ユーザー情報一覧画面を表示
     * @param model Model
     * @return ユーザー情報一覧画面
     */
    @RequestMapping(value = "/user/list", method = RequestMethod.GET)
    public String displayList(Model model) {
        List<User> userlist = userService.searchAll();
        model.addAttribute("userlist", userlist);
        return "user/list";
    }

    /**
     * ユーザー新規登録画面を表示
     * @param model Model
     * @return ユーザー情報一覧画面
     */
    @RequestMapping(value = "/user/add", method = RequestMethod.GET)
    public String displayAdd(Model model) {
        model.addAttribute("userRequest", new UserRequest());
        return "user/add";
    }

    /**
     * ユーザー新規登録
     * @param userRequest リクエストデータ
     * @param model Model
     * @return ユーザー情報一覧画面
     */
    @RequestMapping(value = "/user/create", method = RequestMethod.POST)
    public String create(@ModelAttribute UserRequest userRequest, Model model) {
        // ユーザー情報の登録
        userService.create(userRequest);
        return "redirect:/user/list";
    }
}

Serviceクラスの作成（UserService.java）

具体的な処理（ビジネスロジック）を記述するServiceクラスを作成します。

package com.example.demo.service;

import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.example.demo.dto.UserRequest;
import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;

/**
 * ユーザー情報 Service
 */
@Service
@Transactional(rollbackFor = Exception.class)
public class UserService {

    /**
     * ユーザー情報 Repository
     */
    @Autowired
    UserRepository userRepository;

    /**
     * ユーザー情報 全検索
     * @return 検索結果
     */
    public List<User> searchAll() {
        return userRepository.findAll();
    }

    /**
     * ユーザー情報新規登録
     * @param user ユーザー情報
     */
    public void create(UserRequest userRequest) {
        userRepository.save(CreateUser(userRequest));
    }

    /**
     * ユーザーTBLエンティティの生成
     * @param userRequest ユーザー情報リクエストデータ
     * @return ユーザーTBLエンティティ
     */
    private User CreateUser(UserRequest userRequest) {
        Date now = new Date();

        User user = new User();
        user.setName(userRequest.getName());
        user.setAddress(userRequest.getAddress());
        user.setPhone(userRequest.getPhone());
        user.setCreateDate(now);
        user.setUpdateDate(now);

        return user;
    }
}

Repositoryクラスの作成（UserRepository.java）

データベースへアクセスするためのRepositoryクラスを作成します。

package com.example.demo.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.entity.User;

/**
 * ユーザー情報 Repository
 */
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

Entityクラスの作成（User.java）

データベースのデータを格納するEntityクラスを作成します。

package com.example.demo.entity;

import java.io.Serializable;
import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Data;

/**
 * ユーザー情報 Entity
 */
@Entity
@Data
@Table(name = "user")
public class User implements Serializable {

    /**
     * ID
     */
    @Id
    @Column(name = "id")
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    /**
     * 名前
     */
    @Column(name = "name")
    private String name;

    /**
     * 住所
     */
    @Column(name = "address")
    private String address;

    /**
     * 電話番号
     */
    @Column(name = "phone")
    private String phone;

    /**
     * 更新日時
     */
    @Column(name = "update_date")
    private Date updateDate;

    /**
     * 登録日時
     */
    @Column(name = "create_date")
    private Date createDate;

    /**
     * 削除日時
     */
    @Column(name = "delete_date")
    private Date deleteDate;
}

Data Transfer Objectの作成（UserRequest.java）

データを格納する箱である「Data Transfer Object」を作成します。

package com.example.demo.dto;

import java.io.Serializable;

import lombok.Data;

/**
 * ユーザー情報 リクエストデータ
 */
@Data
public class UserRequest implements Serializable {

    /**
     * 名前
     */
    private String name;

    /**
     * 住所
     */
    private String address;

    /**
     * 電話番号
     */
    private String phone;
}

Webアプリケーションの実行

1. ユーザー情報一覧画面の表示

Spring Bootプロジェクトを実行して http://localhost:8080/user/list へアクセスし、ユーザー情報一覧画面を表示させます。ユーザー情報一覧画面が表示したら「新規登録はこちら」リンクを押下します。

2. ユーザー新規登録

ユーザー新規登録画面が表示されるので、「名前」「住所」「電話番号」を入力して「登録」ボタンを押下します。

3. 登録内容の確認

ユーザー情報一覧画面に登録されたデータが追加されて表示されれば、登録は成功しています。

helpful

この記事は役に立ちましたか？

comment コメントをキャンセル

2024/5/29

MyBatis + SpringでWebアプリ（CRUD）を作成する

はじめに MyBatisとSpring Bootを利用して「検索画面」「登録画面」「編集画面」の作成方法を紹介します。本記事で作成する画面は次のとおりです。 ■検索画面 ■新規登録画面 ■編集画面開発環境開発環境名称説明開発言語Java人気の開発言語開発ツールEclipseJavaでの定番開発ツールフレームワークSpring Boot人気のSpringフレームワークをベースとしたフレームワークテンプレートエンジンThymeleafSpring Bootと相性が良いテンプレートエンジンデータベースMy ...

2020/8/23

Spring BootでWebSocketを簡単に実装する方法

Spring BootでWebSocket（STOMPなし）の実装 pom.xml pom.xmlに「spring-boot-starter-websocket」を追加します。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> WebS ...

2024/5/13

【Spring Boot】Thymeleafでプルダウンを作成する方法

はじめに Javaのフレームワーク「Spring Boot」とテンプレートエンジン「Thymeleaf」を使用してプルダウンを簡単に作成する方法を紹介します。本記事で作成するプルダウンのサンプルは次のとおりです。テーブル定義本画面で使用するテーブルのテーブル定義は次のとおりです。物理名論理名データ型NOT NULL説明code都道府県コードCHAR(2)〇主キーname都道府県名VARCHAR(45)〇都道府県の名称 [CREATE文] CREATE TABLE `sampledb`.`prefe ...

2024/5/27

Spring Boot+Thymeleafで入力フォームをPOSTする

はじめに Javaの人気フレームワークであるSpring Boot、そしてSpring Bootと相性の良いテンプレート・エンジンThymeleafを使用して、本記事では簡単に入力フォームをPOSTする方法を紹介します。開発環境開発環境は以下の通り。開発環境名称説明開発ツールEclipseJavaでの定番開発ツールフレームワークSpring Boot人気のSpringフレームワークをベースとしたフレームワークテンプレートエンジンThymeleafSpring Bootと相性が良いテンプレートエンジン ...

2024/10/20

Spring Bootで多言語対応する方法

Spring Bootで多言語対応の手順 Spring Bootにはデフォルトで多言語の機能（i18n）がついています。その機能を利用すれば多言語化対応は簡単にできます。本記事ではSpring Bootの多言語対応の手順について紹介します。 [手順1] 多言語ファイルの作成今回は日本語と英語の多言語ファイルを作成します。 src.main.resources配下に、日本語と英語用のプロパティファイルを作成します。 ※Springのデフォルトの配置場所がsrc.main.resources配下です。 [ ...