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

#目的
自己学習向け・初心者向けメモ。
前回の [SpringBootやってみる~DBアクセス(mybatis)編~ データ登録①](https://qiita.com/y_ogawa_naaaa/items/e6c914dde066c6c9b4df "SpringBootやってみる~DBアクセス(mybatis)編~ データ登録①") のアプリケーションをベースとする

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

#完成図
【検索画面】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/22f67028-ee86-65d0-82e0-ac7f80c98fb1.png)

【検索結果画面】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/a383d171-e7f1-ac72-dc6d-b14abc4adba4.png)

【登録画面】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/e64f815b-c9a9-f2d7-9785-63a4fd5732ef.png)

【登録画面_入力チェック】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/1c79aa26-4537-e30b-bbd4-901aeb813a58.png)

【登録確認画面】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/bf7ab081-1fc1-fffa-8802-3ec2d583e967.png)

#テーブルへのカラム追加
ユーザー情報テーブルに生年月日を追加する

【userinfo(ユーザー情報)】

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


#アプリケーションの実装

バリデーションの追加に関して変更したプログラムの構成は以下の通り
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/b3563e65-d7e9-e947-8508-853cffb824f9.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](https://github.com/yuki1234567890/learn "GitHub") 

#アプリケーションの実行
名前以外入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/d56cbeca-4ab8-39ad-2ca1-68c1975c83a5.png)

性別以外入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/14ee3a93-120f-16bc-08b9-dd0f769c1b44.png)

生年月日 8桁以外入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/04a72f9b-6aa4-25f5-a5dc-2c83336e0e9b.png)

生年月日以外入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530028/1106a16a-7701-b3d3-2c0e-17858099254e.png)

#次回
データの更新とか追加予定？