Javaマスターへの道 SpringBoot編 Part20
今日やるプログラムは数当てゲームです。
今回はそのHTMLを解説していきます。
下記のHTMLをご覧ください。
<!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つを用意しており
これらのデータを記憶する処理をコントローラークラスに書いてあります。
そして一番下には「もう一度最初から」ボタンを作っており
いつでも最初からやり直すことが出来ます。
次回はこれを動かしている核となるコントローラークラスについて解説していきます。