こんにちは、くまごろーです。
今家計簿アプリを作成しているんですが、出入金登録時に支出・収入のカテゴリを選択できるようにしようと考えています。
動作テストも兼ねて、とりあえずカテゴリ一覧をプルダウンメニューで表示させる方法を導入したので、そのやり方をまとめます。
1 DBにカテゴリを登録
(1)Categoryクラスを作成
エンティティクラスとして、以下のクラスを作成
<Category.java>(一部抜粋)
package com.example.demo.model; ~importについては省略~ @Getter @Setter @Entity @Table(name="categories") public class Category { @Id @NotNull @Column(name = "category_id", nullable = false) private Long categoryId; @NotBlank @Column(name = "category_name", nullable = false) private String categoryName; @NotBlank @Column(name = "subcategory_name", nullable = false) private String subcategoryName; }
(2)DBにカテゴリ・サブカテゴリを登録
今回はテストなので、とりあえず「食費」に属するものをSQL文ベタ打ちで登録。
category_id | category_name | subcategory_name |
---|---|---|
101 | 食費 | 食費 |
102 | 食費 | 食料品 |
103 | 食費 | 朝食 |
104 | 食費 | 昼食 |
105 | 食費 | 夕食 |
106 | 食費 | カフェ |
107 | 食費 | 外食 |
108 | 食費 | その他食費 |
2 DBからカテゴリのデータを引き出す
リポジトリインターフェースのfindAll()メソッドで、カテゴリ一覧を取得する。
<HomeController.java>(一部抜粋)
@GetMapping("/post") public String post(@ModelAttribute("moneyRecord") MoneyRecord moneyRecord, Authentication loginUser, Model model){ model.addAttribute("user", userRepository.findByUsername(loginUser.getName())); model.addAttribute("categories", categoryRepository.findAll()); //カテゴリを全て取得してviewに渡す return "post"; }
3 Viewファイルに以下のコードを記載
(1)プルダウンメニューを表示させるには
htmlのselect,optionタグを使用する。
<例>
<select name="test"> <option value="パターン1">パターン1</option> <option value="パターン2">パターン2</option> <option value="パターン3">パターン3</option> </select>
(2)カテゴリ一覧をviewに出力するには
Thymeleafのth:eachタグを使用する。
<例>
<div th:each="record : ${records}" th:inline="text"> ID:[[${record.recordId}]]<br> 支出額:[[${record.incomeAndExpense}]]円 </div>
(1)と(2)を組み合わせると、以下の様になる。
<post.html>
<div class="form-group"> <select class="form-control" name="category"> <div th:each="category : ${categories}" th:inline="text"> <option th:value="${category.categoryId}" th:field="*{categoryId}">[[${category.subcategoryName}]]</option> </div> </select> </div>
実行してみると、このようになりました。
4 参考