Javaマスターへの道 SpringBoot編 Part20
今日やるプログラムは数当てゲームです。
今回はそのHTMLを解説していきます。
下記の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 46 47 48 49 | <!DOCTYPE html> <html xmlns="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>数あてゲーム</title> <style> th,td { border: solid 1px; } table { border-collapse: collapse; } </style> </head> <body> <h1>数あてゲーム</h1> <form action="/challenge" method="post"> <p> <input type="text" name="number" placeholder="いくつでしょう？"> </p> <p> <input type="submit" value="これでどうだ！"> </p> </form> <hr> <table> <tr> <th>回数</th> <th>あなたの答え</th> <th>結果</th> </tr> <tr th:each="h:${histories}"> <td th:text="${h.seq}"></td> <td th:text="${h.yourAnswer}"></td> <td th:text="${h.result}"></td> </tr> <!--<tr th:each="h:${histories}"> <td>[[${h.seq}]]</td> <td>[[${h.yourAnswer}]]</td> <td>[[${h.result}]]</td> </tr>--> </table> <p> <a href="/">もう一度最初から</a> </p> </body> </html> |
このHTMLを実際に実行すると一番上に「数当てゲーム」と書いてあり、
その下に入力欄と「これでどうだ！」ボタンを設置しています。
そして今回の最も大切な部分として挑戦するたびにそのデータを格納して、
出力する欄を作っています。
ここでは「回数」「あなたの答え」「判定」の3つを用意しており
これらのデータを記憶する処理をコントローラークラスに書いてあります。
そして一番下には「もう一度最初から」ボタンを作っており
いつでも最初からやり直すことが出来ます。
次回はこれを動かしている核となるコントローラークラスについて解説していきます。