プログラミング

【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


関連記事

プログラミングスキルを向上させる3ステップ

プログラミングスキルを向上させるための3ステップです。 私自身が実践していることであり、向上を実感している方法です。 写経 本をベースに写経します。 写し書きをして動いたらOKではなく、以下のような問 …

Facadeパターンの使い道をコードとクラス図で説明します。

Facadeパターンはどんな役に立つか? 簡単にいうと、複数の処理のまとめ役。 なので、依頼1つでいろんな仕事をやってくれる点で役に立つ。 Facadeパターンの要件 Facadeクラスはあくまでサブ …

no image

How to apply JavaScript fixes (PHP)

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

【SpringBoot入門】#3~ Index画面の作成

このチュートリアルでは、簡易な書籍管理システムを作っていきます。 まず最初にIndex画面を作成していきます。 HTML作成 以下の配下にindex.htmlを作成します。 配置先:プロジェクト(ここ …

フロントエンジニアとバックエンドエンジニアのどちらになるべきか?

対象読者 ・これからWebエンジニアを目指す人 ・フロントエンジニアとバックエンドエンジニアの違いを知らない人   フロントエンジニアかバックエンドエンジニアか? ・役割から考える フロント …

記事を探す

SpringFramworkの良書

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

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