【今更ながらSpring BootでWEB開発 #3】フォームの送信

Web

今回の目標

前回はサーバーサイドからフロントエンドにデータを渡し、Thymeleafによってデータを表示する方法について説明しました。

【今更ながらSpring BootでWEB開発 #2】データの表示(Thymeleaf)
今回は、サーバーサイドから受け取った値をページで表示するためのテンプレートエンジンである「Thmeleaf」について紹介していきます。基本的なデータの表示方法と繰り返し、要素の表示について簡単に紹介してしています。

今回はフロントエンドからサーバーサイドにデータを送信する方法について説明していきます。

具体的に以下のgifのようにお問い合わせフォームを作成し、入力した内容が確認できるページを表示するまでをやります。

事前準備

ファイルの作成

以下のフォルダ構造になるように「InquiryController.java」、「InquiryForm.java」、「confirm.html」、「index.html」を作成してください。

src/main
 ├ java
 │ └ com.example.demo
 │   └ app
 │     └ inquiry
 │       ├ InquiryController.java
 │       └ InquiryForm.java
 └ resources
   └ templates
     └ inquiry
        ├ confirm.html
        └ index.html

InquiryController.java

「/inquiry」をコンテキストパスとしてフォーム画面(index.html)を表示する処理だけとりあえず定義しておきます。

@Controller
@RequestMapping("/inquiry")
public class InquiryController {
  @GetMapping
  public String form() {
    return "inquiry/index.html";
  }
}

InquiryForm.java

InquiryForm.javaは、フロントエンドから送信されたデータを格納し、確認ページで表示するために使用します。

public class InquiryForm {

  private String name;
  private String email;
  private String contents;
  
  public InquiryForm(String name, String email, String contents) {
    this.name = name;
    this.email = email;
    this.contents = contents;
  }
  
  public InquiryForm() {
    this("", "", "");
  }

  //Getter、Setterは省略
}

index.html

以下のようにフォームを作成します。デザイン用に余分なものもありますが、そこは無視してください。

<form>
  <div>
    <label for="name">お名前</label><span class="tag">必須</span><br />
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="email">メールアドレス</label><span class="tag">必須</span><br />
    <input type="text" id="email" name="email">
  </div>
  <div>
    <label for="contents">お問い合わせ内容</label><span class="tag">必須</span><br />
    <textarea id="contents" name="contents" cols="30" rows="10"></textarea>
  </div>
  <input type="button" value="確認ページへ">
</form>

confirm.html

確認用のページなので、送信された内容が確認できればどのようにしてもかまいません。

<div th:object="${inquiryForm}">
  <div>
    <label for="name">お名前</label><br />
    <p th:text="*{name}"></p>
  </div>
  <div>
    <label for="email">メールアドレス</label><br />
    <p th:text="*{email}">email</p>
  </div>
  <div>
    <label for="contents">お問い合わせ内容</label><br />
    <p th:text="*{contents}">contents</p>
  </div>
</div>

フォームの送信

formタグ 属性の設定

一般的にフォームを送信するためにはformタグにaction属性method属性を追加します。

action属性にはどこにデータを送信するかを設定します。今回の想定では「/inquiry/confirm」に送信します。

method属性はデータの送信方法(Httpメソッド)を設定します。基本的にはPOSTを設定することが多いと思います。

これを踏まえて「index.html」のformタグを次のように変更します。

<form method="post" action="/inquiry/confirm">

</form>

submitボタンの設置

フォームデータの送信のトリガーとしてsubmitボタンがよく使われます。ボタンがクリックされると、formタグの先ほどの属性に設定された情報にデータが送信されます。

submitボタンは、inputタグのtypeの1つなので次のように配置します。

<input type="submit" value="確認ページへ">

下準備の段階ではあえてtype=”button”に設定しているので変更してください。

フォームデータの受け取り

それでは送信されたフォームデータをサーバーサイドで受け取る方法を説明します。

POSTメソッドの受け取り

ページ表示の際はGETメソッドでアクセスされるため、@GetMappingを指定していました。今回はPOSTメソッドでアクセスされるため@PostMappingを指定します。

また「/inquiry/confirm」として受け取るのでパスの指定もしておきます。

@PostMapping("/confirm")
function String confirm() {
  return "inquiry/confirm.html";
}

最終的に確認ページとして「confirm.html」を表示したいので、返値も設定しておきます。

フォームデータ(パラメータ)の受け取り

フォームから送信データを受け取るには次のように引数を設定します。

@PostMapping("/confirm")
public String confirm(@RequestParam("name")String name, @RequestParam("email")String email, @RequestParam("contents")String contents, Model model) {
  model.addAttribute("inquiryForm", new InquiryForm(name, email, contents));
  return "inquiry/confirm.html";
}

@RequestParam(“パラメータ名”)とすることで、データを受け取ります。パラメータ名はフォームのname属性に対応します。

あとは前回やった通り、受け取ったデータからInquiryFormオブジェクトを作成し、確認ページに渡すことで目的の確認ページまでの処理が完成します。

 

ちょっとまって!!

パラメータ1つ1つ引数に設定するなんてめんどくさすぎる!!

 

というわけで実は次のようにすることもできます。

@PostMapping("/confirm")
public String confirm(InquiryForm inquiryForm) {
  return "inquiry/confirm.html";
}

ずいぶんとスッキリしました。実はフォームに対応するクラスを引数に設定することで、先ほどのように面倒な設定をしなくて済みます。しかも自動でaddAttributeされた状態になります。

注意点として、パラメータ名(name属性)とクラスのフィールド名は同じ必要があります。

あとがき

今回はフォームの送信ということで、フロントエンドからサーバーサイドにデータを送信する方法を説明しました。

Spring Bootではフォームに対応するクラスを利用することで楽に送信されたデータを扱うことができます。

ただし、今回はノーチェックでただデータを送信しているだけです。次回はサーバーサイドでデータをチェックする方法(バリデーション)について説明したいと思います。

 

- Spring Bootのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました