ThymeleafでPOSTしたデータをJPAで簡単にDBへ登録

Spring Boot

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

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
        │               ├── dto
        │               │   └── UserRequest.java
        │               ├── entity
        │               │   └── User.java
        │               ├── repository
        │               │   └── UserRepository.java
        │               └── service
        │                   └── UserService.java
        └── 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?characterEncoding=UTF-8&serverTimezone=JST
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:1.16.4'
	runtimeOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'mysql:mysql-connector-java'
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

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

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

■ユーザー情報TEL

物理名 論理名 データ型 NOT NULL 説明
id ID BIGINT(20) 主キー(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(20) 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 javax.transaction.Transactional;

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

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

/**
 * ユーザー情報 Service
 */
@Service
@Transactional(rollbackOn = 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. 登録内容の確認

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

ユーザー情報一覧画面結果

 

よろしければ記事の評価をお願いします

© 2020 ITを分かりやすく解説