Spring Boot で書籍の貸出状況確認・貸出申請する Web アプリケーションを作る ( その49 )( 貸出申請結果確認画面の作成 )
概要
Spring Boot で書籍の貸出状況確認・貸出申請する Web アプリケーションを作る ( その48 )( 気になった点を修正 ) の続きです。
- 貸出申請結果確認画面を作成します。6~8回に分けて書きます。
- 今回の手順で確認できるのは以下の内容です。
- 貸出申請結果確認画面の作成
- Thymeleaf テンプレートファイルと Controller クラスの雛形の作成
- 貸出申請結果確認画面の作成
参照したサイト・書籍
目次
- はじめに
- feature/81-issue ブランチの作成
- 貸出申請結果確認画面の HTML ファイルの作成
- Thymeleaf テンプレートファイルの作成
- ConfirmresultController クラスの作成
- 動作確認
- 次回は。。。
手順
はじめに
貸出申請結果確認画面を作成します。以下の仕様の想定です。
- 貸出承認画面から送信されたメールに表示されている URL にアクセスして、パラメータで指定されている貸出申請 ID のデータを表示します。
- 貸出申請ID、ステータス、貸出申請したユーザ名、承認/却下したユーザ名、及び「申請する」が選択された書籍、申請理由、承認/却下、却下理由の一覧を表示します。
- 貸出申請したユーザだけが画面を表示できるようにします。貸出申請したユーザでなければ、共通エラー画面を表示し HTTPステータスコードの 403 を返すようにします。
- 「CSV ダウンロード」ボタンを表示し、クリックされたら書籍、申請理由、承認/却下、却下理由の一覧が出力された CSV ファイルをダウンロードできるようにします。
feature/81-issue ブランチの作成
- feature/81-issue ブランチを作成します。
貸出申請結果確認画面の HTML ファイルの作成
src/main/resources/static/html の下に confirmresult.html を作成します。作成後、リンク先の内容 に変更します。
今回は CSV ダウンロード機能がメインなので、画面自体はシンプルにしています。
Thymeleaf テンプレートファイルの作成
src/main/resources/templates の下に confirmresult ディレクトリを作成します。
src/main/resources/static/html/confirmresult.html を src/main/resources/templates/confirmresult の下にコピーします。
src/main/resources/templates/confirmresult の下の confirmresult.html を リンク先の内容 に変更します。
ConfirmresultController クラスの作成
src/main/java/ksbysample/webapp/lending/web の下に confirmresult パッケージを作成します。
src/main/java/ksbysample/webapp/lending/web/confirmresult の下に ConfirmresultController.java を作成します。作成後、リンク先の内容 に変更します。
動作確認
Gradle projects View から bootRun タスクを実行して Tomcat を起動します。
ブラウザを起動し http://localhost:8080/confirmresult へアクセスします。最初はログイン画面が表示されますので ID に "tanaka.taro@sample.com"、Password に "taro" を入力して、「次回から自動的にログインする」をチェックせずに「ログイン」ボタンをクリックします。
以下の画面が表示されることを確認します。
「CSVダウンロード」ボタンをクリックしても同じ画面が表示されることを確認します。
Ctrl+F2 を押して Tomcat を停止します。
一旦 commit します。
次回は。。。
パラメータで指定されている貸出申請 ID とそのステータス、貸出申請したユーザ名、承認/却下したユーザ名、及び「申請する」が選択された書籍、申請理由、承認/却下、却下理由の一覧を表示する処理を実装します。
ソースコード
html/confirmresult.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>貸出申請結果確認</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/> <!-- Bootstrap 3.3.4 --> <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <!-- Font Awesome Icons --> <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <!-- Ionicons --> <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css"/> <!-- Theme style --> <link href="/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link href="/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css"/> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="/js/html5shiv.min.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> <style> .content-wrapper { background-color: #fffafa; } .selected-library { color: #ffffff !important; font-size: 100%; font-weight: 700; } .buttom-btn-area { padding-top: 10px; } .box-body.no-padding { padding-bottom: 10px !important; } .table>tbody>tr>td , .table>tbody>tr>th , .table>tfoot>tr>td , .table>tfoot>tr>th , .table>thead>tr>td , .table>thead>tr>th { padding: 5px; font-size: 90%; } .jp-gothic { font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } </style> </head> <!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. --> <body class="skin-blue layout-top-nav"> <div class="wrapper"> <header class="main-header"> <nav class="navbar navbar-static-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand"><b>ksbysample-lending</b></a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <i class="fa fa-bars"></i> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse pull-left" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">メニュー <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <p class="navbar-text selected-library">選択中:テスト図書館</p> <ul class="nav navbar-nav"> <li><a href="#">ログアウト</a></li> </ul> </div> <!-- /.navbar-custom-menu --> </div> <!-- /.container-fluid --> </nav> </header> <!-- Full Width Column --> <div class="content-wrapper"> <div class="container"> <!-- Content Header (Page header) --> <section class="content-header"> <h1>貸出申請結果確認</h1> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <form id="confirmresult" method="post" action=""> <div class="box"> <div class="box-body no-padding"> <div class="col-xs-6 no-padding"> <table class="table table-bordered"> <colgroup> <col width="30%"/> <col width="70%"/> </colgroup> <tr> <th class="bg-purple">貸出申請ID</th> <td>1</td> </tr> <tr> <th class="bg-purple">ステータス</th> <td>承認済</td> </tr> <tr> <th class="bg-purple">申請者</th> <td>田中 太郎</td> </tr> <tr> <th class="bg-purple">承認者</th> <td>鈴木 花子</td> </tr> </table> </div> <br/> <table class="table"> <colgroup> <col width="5%"/> <col width="20%"/> <col width="20%"/> <col width="20%"/> <col width="15%"/> <col width="20%"/> </colgroup> <thead class="bg-purple"> <tr> <th>No.</th> <th>ISBN</th> <th>書名</th> <th>申請理由</th> <th>承認/却下</th> <th>却下理由</th> </tr> </thead> <tbody class="jp-gothic"> <tr> <td>1</td> <td>978-4-7741-6366-6</td> <td>GitHub実践入門</td> <td>開発で使用する為</td> <td>承認</td> <td></td> </tr> <tr> <td>2</td> <td>978-4-7741-5380-3</td> <td>Spring3入門</td> <td>開発で使用する為</td> <td>却下</td> <td>既に購入済です</td> </tr> <tr> <td>3</td> <td>978-4-87311-718-8</td> <td>Javaパフォーマンス</td> <td>勉強会の為</td> <td>承認</td> <td></td> </tr> </tbody> </table> <div class="buttom-btn-area text-center"> <button class="btn bg-blue js-btn-filedownload"><i class="fa fa-download"></i> CSVダウンロード</button> </div> </div> </div> </form> </div> </div> </section> <!-- /.content --> </div> <!-- /.container --> </div> </div> <!-- ./wrapper --> <!-- jQuery 2.1.4 --> <script src="/js/jQuery-2.1.4.min.js" type="text/javascript"></script> <!-- Bootstrap 3.3.2 JS --> <script src="/js/bootstrap.min.js" type="text/javascript"></script> <!-- AdminLTE App --> <script src="/js/app.min.js" type="text/javascript"></script> </body> </html>
templates/confirmresult/confirmresult.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>貸出申請結果確認</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/> <link th:replace="common/head-cssjs"/> <style> .content-wrapper { background-color: #fffafa; } .selected-library { color: #ffffff !important; font-size: 100%; font-weight: 700; } .buttom-btn-area { padding-top: 10px; } .box-body.no-padding { padding-bottom: 10px !important; } .table>tbody>tr>td , .table>tbody>tr>th , .table>tfoot>tr>td , .table>tfoot>tr>th , .table>thead>tr>td , .table>thead>tr>th { padding: 5px; font-size: 90%; } .jp-gothic { font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } </style> </head> <!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. --> <body class="skin-blue layout-top-nav"> <div class="wrapper"> <!-- Main Header --> <div th:replace="common/mainparts :: main-header"></div> <!-- Full Width Column --> <div class="content-wrapper"> <div class="container"> <!-- Content Header (Page header) --> <section class="content-header"> <h1>貸出申請結果確認</h1> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <form id="confirmresultForm" method="post" action="/confirmresult/filedownload" th:action="@{/confirmresult/filedownload}" th:object="${confirmresultForm}"> <div class="box"> <div class="box-body no-padding"> <div class="col-xs-6 no-padding"> <table class="table table-bordered"> <colgroup> <col width="30%"/> <col width="70%"/> </colgroup> <tr> <th class="bg-purple">貸出申請ID</th> <td>1</td> </tr> <tr> <th class="bg-purple">ステータス</th> <td>承認済</td> </tr> <tr> <th class="bg-purple">申請者</th> <td>田中 太郎</td> </tr> <tr> <th class="bg-purple">承認者</th> <td>鈴木 花子</td> </tr> </table> </div> <br/> <table class="table"> <colgroup> <col width="5%"/> <col width="20%"/> <col width="20%"/> <col width="20%"/> <col width="15%"/> <col width="20%"/> </colgroup> <thead class="bg-purple"> <tr> <th>No.</th> <th>ISBN</th> <th>書名</th> <th>申請理由</th> <th>承認/却下</th> <th>却下理由</th> </tr> </thead> <tbody class="jp-gothic"> <tr> <td>1</td> <td>978-4-7741-6366-6</td> <td>GitHub実践入門</td> <td>開発で使用する為</td> <td>承認</td> <td></td> </tr> <tr> <td>2</td> <td>978-4-7741-5380-3</td> <td>Spring3入門</td> <td>開発で使用する為</td> <td>却下</td> <td>既に購入済です</td> </tr> <tr> <td>3</td> <td>978-4-87311-718-8</td> <td>Javaパフォーマンス</td> <td>勉強会の為</td> <td>承認</td> <td></td> </tr> </tbody> </table> <div class="buttom-btn-area text-center"> <button class="btn bg-blue js-btn-filedownload"><i class="fa fa-download"></i> CSVダウンロード</button> </div> </div> </div> </form> </div> </div> </section> <!-- /.content --> </div> <!-- /.container --> </div> </div> <!-- ./wrapper --> <script th:replace="common/bottom-js"></script> <script type="text/javascript"> <!-- $(document).ready(function() { $(".js-btn-filedownload").click(function(){ $("#confirmresultForm").submit(); return false; }); }); --> </script> </body> </html>
<html>
→<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
へ変更します。<!-- Bootstrap 3.3.4 --> ... <script src="/js/respond.min.js"></script><![endif]-->
→<link th:replace="common/head-cssjs"/>
へ変更します。<header class="main-header"> ... </header>
→<div th:replace="common/mainparts :: main-header"></div>
へ変更します。<form id="confirmresultForm" method="post" action="">
→<form id="confirmresultForm" method="post" action="/confirmresult/filedownload" th:action="@{/confirmresult/filedownload}" th:object="${confirmresultForm}">
へ変更します。<!-- jQuery 2.1.4 --> ... <script src="/js/app.min.js" type="text/javascript"></script>
→<script th:replace="common/bottom-js"></script>
へ変更します。</body>
の前に<script type="text/javascript"> ... </script>
を追加します。
ConfirmresultController.java
package ksbysample.webapp.lending.web.confirmresult; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller @RequestMapping("/confirmresult") public class ConfirmresultController { @RequestMapping public String index() { return "confirmresult/confirmresult"; } @RequestMapping(value = "/filedownload", method = RequestMethod.POST) public String filedownload() { return "confirmresult/confirmresult"; } }
履歴
2016/01/29
初版発行。