プログラミング

【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


関連記事

no image

prepareステートメントの挙動について調べてみた

調べるきっかけ PHPでSQLをセキュアに記述する方法としてprepareステートメントが推奨されているが、なぜなのかがわからず、挙動を調べれば自分なりに納得のいく答えがでるのではないかと思ったため。 …

AbstractFactoryパターンをenumで生成するメリット

AbstractFactoryパターンの説明には、実行時引数に文字列を渡したり、フラグでif-else判定する例をよく見かける。 しかし、どんなFactoryが生成可能を知らない担当者がFactory …

no image

How to apply JavaScript fixes (PHP)

※This article (Japanese) is translated from Google (English). After editing JavaScript, it is the ac …

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

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

Redmineでリンクにできない場合にチェックすること

リンクにできない場合のチェック項目 前後に文字列がくっついている。 前後に全角スペースがある。 リンクの#が全角になっている。   リンクにするには? 以下のルールで記述すればリンクにできま …

記事を探す

SpringFramworkの良書

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

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