プログラミング

【SpringBoot入門】#5~ 登録画面の作成

投稿日:2020年12月5日 更新日:

概要

共通ヘッダーの「新規登録」リンクから遷移する、書籍情報登録画面を作成します。
遷移できるようにControllerの作成と、遷移先である画面をHTMLで作成していきます。

 

Formクラスの作成

登録画面の項目をViewとController間で受け渡すためのFormオブジェクトを作成します。
 配置先:src > main > java > com > example > demo > controller > form > BookForm.java

・@Data
 Lombokのアノテーションで、Getter/Setterを利用可能にしてくれる。
 つまり、getId()や、setId(int id)などを書かなくても使えるようになります。
 

Controllerの作成

・BookController.javaを作成します。
 配置先:src > main > java > com > example > demo > controller > BookController.java

・コードを以下のように記述します。

・@Controller
 クラスをControllerとして認識するようにするアノテーションです。
 Controllerとしたいクラスに指定します。

・@GetMapping(“book/add”)
 リクエストを受け取る指定を行っています。
 @GetMappingでGetメソッドであること、
 (“book/add”)でドメイン以下のURLが「book/add」であることを定義しています。

・model.addAttribute(“bookForm”, form);
 遷移するViewの「bookForm」に「form」オブジェクトを渡します。

・return “book/add”;
 遷移する画面を指定します。
 ここでは「book/add」としているので、以下を指定していることになります。
 指定先:src > main > resource > templates > book > add.html
 

HTMLの作成

form.html

フォームは登録画面と更新画面で共通に使う部分があるので、その部分は共通フォームとして作成します。

・<html xmlns:th=”http://www.thymeleaf.org”>
 IDEがth:*属性の名前定義についてHTML5の仕様として有効でない警告を発することへの対応です。
 <html>としても動作に影響はありませんが、警告を表示させないために指定しておきます。
 引用元:3.1 複数言語でウェルカム

・th:value
 th:objectで指定されているオブジェクトのフィールド名に対応していた値が代入されます。
 th:objectは、以降のadd.htmlで定義します。

・th:if=”${#fields.hasErrors(…)}” th:errors=”*{…}”
 指定したフィールドにバリデーションエラーがある場合に、エラー内容を表示します。

・type=”hidden”
 id、version値は画面で操作する値ではありませんが、リクエストする値として必要(更新時)なのでフォームにhidden(非表示)で保持させます。
 登録時は保持していないので、空の値を持っていることになります。
 

add.html

登録画面固有の定義と共通ヘッダー/共通フォームの埋め込みを行います。

・共通ヘッダー部の埋め込み
 - タイトルを設定するために、titleタグに「書籍情報登録」とします。
 - 共通ヘッダーのリンク(header::header)をth:replaceで置換するようにします。

・共通フォームの埋め込み
 <div th:insert=”book/form”></div>
 divタグ内に挿入(insert)する形で埋め込みます。
 th:insertの場合、add.htmlのdivの中に埋め込まれます。
 共通ヘッダーではth:replaceであるため、add.htmlのheaderタグがheader.htmlのheaderタグで置換されていました。

・th:object
 サーバサイドからフォーム上に渡されるオブジェクトです。
 登録画面の初期表示の場合、各フィールドがNULLのオブジェクトが渡されるため空欄になっています。
 登録処理でエラーが発生した場合、入力データを画面に再表示させることができます。
 また、今後作成する更新画面であれば、初期表示時にデータを表示することもできます。
 

動作確認

index画面の「新規登録」をクリックすると、「http://localhost:8080/book/add」に遷移します。

以下が確認できればOKです。
・titleが「書籍情報登録」となっていること
・共通ヘッダーが表示されていること
・共通フォーム(書籍名など)が表示されていること
・登録ボタンが配置されていること

 

まとめ

・画面とController間での値の受け渡しにFormを利用する。
・Controllerとして使用するクラスには、@Controllerアノテーションを付ける。
・リクエストのマッピングでにおいて、Getメソッドであれば@GetMappingとし、URLはカッコ内に指定する。
・遷移先はtemplates配下のディレクトリとファイル名で指定する(book/addなど)。
・登録画面と更新画面でフォームが共通である場合は部品化しておくとよい。
・thymeleafのth:属性で受け取った値に対する操作が可能になる。

次回は登録処理を実装していきます。

 
最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!
もし内容が良かったらランキング評価を頂けると励みになります(^^)

ランキング評価する

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Java】IllegalArgumentExceptionの原因と対策方法

IllegalArgumentExceptionの原因と対策方法はとても簡単です。 基本的なことを理解すればすぐに解消できます。 IllegalArgumentExceptionとは? 不正な引数また …

AWSへWebアプリケーション(Java)をデプロイする方法(書籍紹介)

対象者 ・個人開発者 ・ポートフォリオ作成者 手順 こちらの書籍を参考に私自身がAWSにデプロイした手順です。 書籍では図解もあってわかり易く解説されているので、ここでは流れを簡潔に説明します。 すで …

【Java入門】プロジェクトの作成からHello, World!まで

概要 プログラミングの入門といえば「Hello, World!」です。 まずは最も簡単なプログラムを動かすことから始めていきましょう。   プロジェクトの作成 新規プロジェクト作成 新規で「Javaプ …

【Java入門】配列の扱い方まとめ

概要 配列の扱い方について学んでいきましょう。 配列は、同一の型の値を複数持つことができるデータ構造です。 ・int型の配列だったら、int(数値)を複数個持っている。 ・String型の配列だったら …

Springでバリデーションがimportされていないときの対処法

状況 SpringF/Wでバリデーションを実装したいが、@NotNullや@Minといったアノテーションが使えない。 @NotNullを使おうとすると、import com.sun.istack.No …

■運営者プロフィール
IT業界10年のエンジニア。
PHP -> VBA -> Javaと渡り歩いてきて、今はJavaをメインにフリーランスエンジニアとして活躍中!

[保有資格]
・Java SE 11 Gold

一度はエンジニアを辞めざるを得なかった私が再びエンジニアとして復活した数奇な物語

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。