LoginSignup
5
0

More than 3 years have passed since last update.

SpringBootやってみる~DBアクセス(mybatis)編~ データ登録②

Last updated at Posted at 2021-02-17

目的

自己学習向け・初心者向けメモ。
前回の SpringBootやってみる~DBアクセス(mybatis)編~ データ登録① のアプリケーションをベースとする

概要

画面項目の追加、登録時のデータ入力チェックを行う
- 完成図(予定)
- テーブルへのカラム追加
- アプリケーションの実装
- アプリケーションの実行
- 次回

完成図

【検索画面】
image.png

【検索結果画面】
image.png

【登録画面】
image.png

【登録画面_入力チェック】
image.png

【登録確認画面】
image.png

テーブルへのカラム追加

ユーザー情報テーブルに生年月日を追加する

【userinfo(ユーザー情報)】

論理名 論理名 文字数 制約
id ID integer NOT NULL, PRIMARY KEY
name 名前 varchar 255
sex 性別 varchar 1
dob 生年月日 varchar 8

アプリケーションの実装

バリデーションの追加に関して変更したプログラムの構成は以下の通り
image.png

バリデーションを使うためにpom.xmlにvalidationを依存関係に追加する

pom.xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

Formの各項目にバリデーションを追加する

そもそもバリデーションとは・・・・
入力内容や記述内容が要件を満たしているか、妥当性を確認すること

追加したバリデーション

アノテーション(javax.validation.*) 用途
@NotEmpty Nullおよび空でないことをチェックする
@Size 文字列の最小と最大の間のサイズかチェックする
@Pattern 文字列のパターンにマッチする
UserForm.java

/** 名前 */
@NotEmpty(message="名前を入力してください。")
private String name;

/** 性別 */
@NotEmpty(message="性別を選択してください。")
private String sex;

/** 生年月日 */
@NotEmpty(message="生年月日を入力してください。")
@Size(min=8, max=8, message="生年月日は8文字です。")
@Pattern(regexp="[0-9]*", message="生年月日は半角数字です。")
private String dob;

バリデーションを有効化する(@Validatedの追加)

UserForm.java
/**
 * 確認画面に遷移する
 * @param demoForm Formオブジェクト
 * @param result バインド結果
 * @return 確認画面または入力画面へのパス
 */
 @PostMapping(value = "/confirm", params = "next")
 public String confirm(@Validated UserForm userForm, BindingResult result){
    //チェック処理を行い、画面遷移する
    if (result.hasErrors()) {
    return "register";
    }
    return "confirm";
}

エラーメッセージを追加する

register.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登録画面</title>
</head>
<body>
    <form method="post" action="/confirm" th:object="${userForm}">
        <ul>
            <li th:each="error : ${#fields.detailedErrors()}" style="color: red">
                <span th:text="${error.message}"></span>
            </li>
        </ul>
        <p>名前: <input type="text" th:value="*{name}" th:field="*{name}" /></p>
        <p>性別: <for th:each="item : *{getSexItems()}">
                       <input type="radio" name="sex" th:value="${item.key}" th:text="${item.value}" th:field="*{sex}" />
                   </for>
        <p>生年月日: <input type="text" th:value="*{dob}" th:field="*{dob}" maxlength="8"/></p>
        </p>
        <input type="submit" name="next" value="確認" />
        <input type="button" onclick="location.href='./'" value="戻る" />
    </form>
</body>
</html>

ソースコードの詳細はいかに記載
GitHub

アプリケーションの実行

名前以外入力
image.png

性別以外入力
image.png

生年月日 8桁以外入力
image.png

生年月日以外入力
image.png

次回

データの更新とか追加予定?

5
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
5
0