2019.04.12
今回もWEBアプリ作成の続きをしていこうと思います。
前回は本の詳細ページの作りこみをしました。 今回は簡単な注文画面とその注文処理を実装します。
まずは新しいテーブル（エンティティのクラス）を定義します。
定義するテーブルは注文した本や注文日、その個数など、注文されたデータを格納するためのものです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @Entity @Table(name="orderdata") public class OrderData { //注文番号 @Id @Column @GeneratedValue(strategy = GenerationType.AUTO) private long id; //ISBN番号 @Column(length = 40, nullable = false) private String isbn; //注文日 @Column(nullable = false) private Date orderDate; //注文個数 @Column(nullable = false) @Min(value = 0) @Max(value = 100) private int numOfOrder; //全受領フラグ @Column(nullable = false) private boolean receiptFlg; } |
前回まで同様、setterとgetterは省略してあります。
今回はある商品を選ぶと、その注文画面に移動するといった形にするため、注文番号をIDとしプライマリキーにします。
全受領フラグは今後納品ページを作成した際に注文した本の数と納品された本の数によって処理を付け足していくために用意しました。
今回はトップ画面から本をクリックすると注文画面にとぶようにしますが、その移動先のテンプレートを用意します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>TRANSONIC書店 在庫管理システム</title> <meta http-equiv="Content-Type" charset="UTF-8" /> </head> <body> <!------------------------------1ブロック-----------------------------------> <h2>在庫管理</h2> <div class="box"> <table th:object="${data}"> <tr><th>・ISBN</th><td th:text="*{isbn}">XXXX</td></tr> <tr><th>・タイトル</th><td th:text="*{title}">YYYY</td></tr> <tr><th>・単価</th><td th:text="*{unitPrice}">ZZZZ</td></tr> </table> </div> <!------------------------------2ブロック-----------------------------------> <form method="post" action="/order" > <p th:object="${data}"><input type="hidden" name="isbn" th:value="*{isbn}" /></p> <p>・注文個数 ：<input type="number" name="numOfOrder" value="1" min="1" max="100" required /></p> <input type="submit" name="submit" value="登録" /> </form> <br /> <a href="/"><button type="button">戻る</button></a> <hr /> <!------------------------------3ブロック-----------------------------------> <h3>デバッグ用 - 注文マスタ</h3> <table width="470"> <tr><th>注文番号</th><th>ISBN</th><th>注文日</th><th>注文数</th><th>フラグ</th></tr> <tr th:each="obj : ${oooolist}"> <td align="center" th:text="${obj.orderId}"></td> <td align="center" th:text="${obj.isbn}"></td> <td align="center" th:text="${obj.orderDate}"></td> <td align="center" th:text="${obj.numOfOrder}"></td> <td align="center" th:text="${obj.ReceiptFlg}"></td> </tr> </table> <br /> </body> </html> |
1ブロック目ではクリックした本の詳細を表示しています。2ブロック目は注文個数をユーザに選択してもらうフォームです。 3ブロック目はデバッグ用に用意しました。注文されたデータを表示するようにしたものです。
主に注文ページへのリンクを作るために編集します。 リンクはトップ画面の本の内容一覧が表示されている表の1つの見出し「注文」とし、「●」をクリックするとその本の注文ページに移動するようにします。
以下が修正後のindex.htmlです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html xmlns:th="http://www.themeleaf.org"> <head> <title>TRANSONIC書店 在庫管理システム</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" media="all" th:href="@{/css/index.css}"/> </head> <body> <h2>在庫管理</h2> <div class="box"> <p>条件を記入してください</p> <form method="post" action="/" th:object="${formModel}"> <p><label for="genre">ジャンル：</label> <select name="genre"> <option selected th:text="*{genre}"></option> <option value="文学">文学</option> <option value="推理">推理</option> <option value="エッセイ">エッセイ</option> <option value="プログラミング">プログラミング</option> </select></p> <p><label for="isbn">ＩＳＢＮ： </label><input type="search" name="isbn" th:value="*{isbn}" /></p> <p><label for="author">著者 ： </label><input type="search" name="author" th:value="*{author}" /></p> <p><label for="title">タイトル： </label><input type="search" name="title" th:value="*{title}" /></p> <input type="submit" name="submit" value="検索" /> </form> <a href="/"><button type="button">全データ表示</button></a> </div> <hr /> <table> <tr><th>ISBN番号</th><th>タイトル</th><th>著者名</th><th>在庫数</th><th>注文状態</th><th>注文日</th><th>注文</th><th>納品</th></tr> <tr th:each="obj : ${booklist}"> <td align="center"><a href="/detail" th:href="@{/detail/{isbn}(isbn=${obj.isbn})}" th:text="${obj.isbn}" ></a></td> <td align="left" th:text="${obj.title}"></td> <td align="left" th:text="${obj.author}"></td> <td align="center" th:text="${obj.stock}"></td> <td align="center" th:text="${obj.genre}"></td> <td align="center" ></td> <td align="center" ><a href="/order" th:href="@{/order/{isbn}(isbn=${obj.isbn})}">●</a></td> <td align="center" ><a href="/delivery"></a></td> </tr> </table> </body> </html> |
前回のindex.htmlと違う箇所は40行目です。 リンク先をorder.htmlにし、クリックした本のISBN番号を動的に送るようにしています。 これで、クリックした本のISBNがサーバに送られ必要な処理を通してレスポンスが返されます。
OrderData用のRepositoryを作成します。 以下がRepositoryとなります。
1 2 3 4 5 6 7 8 9 10 | package com.shohei.springboot.repositories; import com.shohei.springboot.OrderData; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; import java.util.Optional; @Repository public interface OrderDataRepository extends JpaRepository<OrderData, Long>{ } |
特に説明する点はありません。
では前回使用したStockControllerの中に以下を追加してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @RequestMapping(value="/order/{isbn}", method = RequestMethod.GET) public ModelAndView orderDisp(@PathVariable("isbn") String isbn, ModelAndView mav) { mav.setViewName("order"); Optional data = bRepository.findByIsbn(isbn); mav.addObject("data",data.get()); //デバッグ画面表示用データ取得 Iterable list = oRepository.findAll(); mav.addObject("oooolist",list); return mav; } @RequestMapping(value="/order", method = RequestMethod.POST) public ModelAndView orderRegist(@ModelAttribute OrderData orderData, ModelAndView mav) { orderData.setOrderDate(new Date()); orderData.setReceiptFlg(false); oRepository.saveAndFlush(orderData); return new ModelAndView("redirect:/order/" + orderData.getIsbn()); } |
GETリクエストPOST両方のハンドラを作成しています。
それでは実際に動かしてみましょう
まずはトップ画面ですね。試しに「ぼっちゃん」の注文画面に移動しましょう。
「●」をクリックすると、注文画面が表示されました。
適当に個数を入力(3個注文してみました)して、登録を押すと、、、
デバッグ用の表示に登録したデータが表示されました。 以上で注文ページの作成は完了です。 次回は、注文した商品が納品されたときにそれを入力する納品ページを作っていきたいと思います。
