• 1．Controllerクラスの実装
• 2．HTMLで見た目の実装
• 3．Formクラスの実装

この記事は「Javaで学習するSpringによるWebアプリ開発」というトレノキャンプのeラーニング講座を基に解説した記事です。

前回の記事では、お問い合わせフォームの構成、作成のためのHTMLやクラスについて解説しました。

本記事ではお問い合わせフォームを実装していきます。

記事内で使用している問い合わせアプリのプロジェクトの完全版は、以下のコース内にてダウンロードいただけます。

1．Controllerクラスの実装

SpringBeginnerStarterのsrc/main/java、appからinquiryパッケージを開いてください。

こちらがControlllerとFormのクラスです。

まず、InquiryController.javaの方を見て行きましょう。

それでは早速確認ポイントです。先頭に「Add annotations here」とコメントアウトされている部分がありますので、ここに「@Controller」アノテーションを記述し、このクラスがControllerであるという合図を入れます。

さらに、同様に「@RequestMapping(“/inquiry”)」も記述しておきます。今回こちらのControllerには/inquiryというURLを指定しています。

ここまで記述できたら、「Ctrl + Shift + O(オー)」でインポートしておいてください。

/*
 * Add annotations here
 */
public class InquiryController {

/*
 * Add annotations here
 */
@Controller
@RequestMapping("/inquiry")
public class InquiryController {

続いてメソッドを確認していきます。

「@GetMapping」アノテーションのついたメソッドがいくつかありますので、URLが「”/form”」となっているform()メソッドを編集します。

	@GetMapping("/form")
	public String form(/*Add parameters. */) {

		return "inquiry/form";
	}

	@GetMapping("/form")
	public String form(Model model) {

		model.addAttribute("title", "Inquiry Form");
		
		return "inquiry/form";
	}

こちらのメソッドには、@RequestMappingに指定した「”/inquiry”」と@GetMappingに指定した「”/form”」を合わせて、「/inquiry/form」とアクセスした際に処理が流れてくるということになります。

まずは引数にModelが必要となので、「Add parameters」というコメント部分を削除し、「Model model」を記述してください。

続いて中身の方書いていきます。HTMLにページのタイトルを送るため、Modelへ値を登録します。

model.addAttribute()メソッドを呼び出し、引数にキー「”title”」、値「”nquiry Form”」を渡しましょう。

そして最後、return文に「”inquiry/form”」が指定されていますので、inquiryフォルダ内のform.htmlというHTMLファイルが表示されます。

以上でControllerは一旦完成ですので、「Ctrl + S」で保存をしておいてください。

2．HTMLで見た目の実装

それでは、続いてHTMLの方を見ていきます。

src/main/resourcesから、templates、inquiryと進みform.htmlを開いてください。

コードの真ん中あたりに<form>タグがありますので、確認しましょう。

<form method="post" action="#" th:action="@{/inquiry/confirm}" th:object="${inquiryForm}">
	<label for="name">お名前:</label>
	<input id="name" name="name" type="text"><br>
	<div th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>
	<label for="email">メール:</label>
	<input id="email" name="email" type="text"><br>
	<div th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>
	<label for="contents">詳細　:</label>
	<textarea name="contents" id="contents" rows="3" cols="40"></textarea><br>
	<div th:if="${#fields.hasErrors('contents')}" th:errors="*{contents}"></div>
	<input type="submit" value="確認ページへ">
	
</form>

今回、<form>のmethodはpostを指定しています。

こちらをポストメソッドにすることによって、送信するデータをURLに含めるのではなくヘッダー情報の中に格納できます。

ここで確認ポイントです。ただし、URLにデータが現れないからといってセキュリティ的に安全というわけではないため注意してください。

もし、通信を傍受されたくない場合はSSL通信を導入するなど別の対策が必要となります。

続いて<form>のth:actionには、URL「/inquiry/confirm」にドメインを表す「@」が組み合わされています。

最後に<form>タグで囲われた中に<input>、<textarea>といった要素でデータの入力欄が3つあり、それぞれのname属性がキーとして対応しています。

3．Formクラスの実装

それでは次に、これらのデータを受け取るために必要となる、「Formクラス」を見ていきます。

Controllerと同じinquiryパッケージにInquiryForm.javaがありますので、こちらを開いてください。

こちらのファイルは既に完成させてありますが、練習のために自身で記述したい場合はそれぞれの部分を一旦消したうえで再度記述してみてください。

    @Size(min = 1, max = 20, message="Please input 20 characters or less")
    private String name;
    
    @NotNull
    @Email(message = "Invalid E-mail Format")
    private String email;

    @NotNull
    private String contents;

こちらのクラスにはフィールドが3つ定義されています。

全てString型でname、email、contentsとなっており、さらにそれぞれgetterおよびsetterが用意されています。

こちらのフィールド名はHTMLファイルの<input>等、データを入力する各要素のname属性と値を合わせる必要があります。

このgetterやsetterなどは記述する際自動生成機能を使用できます。

ツールバーの「ソース」から「getterおよびsetterの生成」を選択することで簡単に記述できますので、覚えておいてください。

同様にコンストラクタも用意してあります。

	public InquiryForm() {}

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

引数がない「デフォルトコンストラクタ」とフィールドを引数で初期化するためのコンストラクタの2種類が定義されています。

ここでもう一度ポイントをおさらいしておきます。

Formクラスに定義するフィールド名と、HTMLの<form>タグ内の<input>、<textarea>といったデータを入力する各要素のname属性は一致させる必要があります。

はポイントが確認できたら、最後にフィールドに付与されているアノテーションを見ていきましょう。

最初、nameフィールドには「@Size」アノテーションが付けられています。

こちらは引数「min」に1、「max」に20を指定することで、「1文字以上20文字以内の文字列である」という意味になります。

さらに、この条件に適合しない場合にメッセージを返すことが可能で、内容をデフォルトから変更したい場合は同じように引数「message」へ文字列を指定します。今回は上記の条件に合致しない場合は「”Please input 20 characters or less”」というメッセージを返します。

続いて、emailフィールドへは内容が空のまま送信できないようにするため「@NotNull」アノテーションが、そして、入力内容がメールアドレスの形式(ユーザー@ドメイン)になっているかをチェックする「@Email」の2つのアノテーションが指定されています。@Emailアノテーションには、@Sizeと同様に合致しない場合に返却するメッセージも指定してあります。

講義の最初に完成形を確認した際、メールアドレス欄には適当に文字を入力しただけでは送信ができなかったことを覚えているかと思いますが、こちらが@Emailアノテーションによって提供されている機能です。

最後、contentsフィールドには「@NotNull」のみ指定しています。

以上でControllerクラスおよびFormクラスの確認ができましたので、次回は確認ページの作成に入っていきます。

「Javaで学習するSpringによるWebアプリ開発」
トップページはこちら