BLOG
ブログ

2019.04.12

[STS3.9.2]Spring BootでWEBアプリ作成(在庫管理システム) – その4

今回もWEBアプリ作成の続きをしていこうと思います。

 

前回は本の詳細ページの作りこみをしました。 今回は簡単な注文画面とその注文処理を実装します。

 

まずは新しいテーブル(エンティティのクラス)を定義します。

定義するテーブルは注文した本や注文日、その個数など、注文されたデータを格納するためのものです。

 

 

前回まで同様、setterとgetterは省略してあります。

今回はある商品を選ぶと、その注文画面に移動するといった形にするため、注文番号をIDとしプライマリキーにします。

全受領フラグは今後納品ページを作成した際に注文した本の数と納品された本の数によって処理を付け足していくために用意しました。

 

 

注文ページのテンプレート用意

今回はトップ画面から本をクリックすると注文画面にとぶようにしますが、その移動先のテンプレートを用意します。

 

1ブロック目ではクリックした本の詳細を表示しています。2ブロック目は注文個数をユーザに選択してもらうフォームです。 3ブロック目はデバッグ用に用意しました。注文されたデータを表示するようにしたものです。

index.htmlの修正

主に注文ページへのリンクを作るために編集します。 リンクはトップ画面の本の内容一覧が表示されている表の1つの見出し「注文」とし、「●」をクリックするとその本の注文ページに移動するようにします。

 

以下が修正後のindex.htmlです。

  前回のindex.htmlと違う箇所は40行目です。 リンク先をorder.htmlにし、クリックした本のISBN番号を動的に送るようにしています。 これで、クリックした本のISBNがサーバに送られ必要な処理を通してレスポンスが返されます。

Repositoryの作成

OrderData用のRepositoryを作成します。 以下がRepositoryとなります。

 

特に説明する点はありません。

コントローラーの実装

では前回使用したStockControllerの中に以下を追加してください。

 

GETリクエストPOST両方のハンドラを作成しています。

 

 

それでは実際に動かしてみましょう

 

 

まずはトップ画面ですね。試しに「ぼっちゃん」の注文画面に移動しましょう。

 

 

「●」をクリックすると、注文画面が表示されました。

 

 

適当に個数を入力(3個注文してみました)して、登録を押すと、、、

デバッグ用の表示に登録したデータが表示されました。 以上で注文ページの作成は完了です。 次回は、注文した商品が納品されたときにそれを入力する納品ページを作っていきたいと思います。