Spring Bootフレームワークを用いて、シンプルなレンタル管理システムを開発する課題です。


SpringBootコース

テンプレートエンジン(thymeleaf)

レンタル管理システムを作ろう

## アイテム（図書と機材）の管理機能について
ここでは、アイテム管理機能を作成していきます。レンタル管理システムとしては、「レンタルするモノ」を管理する機能になります。

アイテム管理機能は、3種類の機能を実装します。

- 登録機能
- 編集機能
- 削除機能

上記の機能をそれぞれ、**3層アーキテクチャ**に沿って、コントローラー、サービス、リポジトリの3種類に分けて作成していきます。

### 学習のポイント

この章では、図書と機材を管理するアイテム機能を実装します。アイテム管理機能では、ユーザー管理機能で学んだ基本に加えて、以下の点を拡張して学びます。

1. **CRUDの実装**：Create（作成）、Read（読み取り）に加えて、Update（更新）操作も含めたCRUD機能を実装します
2. **ステータス管理**：アイテムの貸出状態（available/rented）を管理する方法を理解します
3. **編集フォームの実装**：既存データを編集するためのフォーム実装方法を学びます

アイテム管理機能は、ユーザー管理機能よりも少し複雑な実装となりますが、頑張って作成していきましょう。



##  テーブルの確認

1.  利用するテーブルの確認

 - プロジェクトを実行、SpringBootアプリケーションを起動する

 - http://localhost:8080/h2-console/ へアクセスする
    - 追記したパラメータに従い、URL、ユーザー名、パスワードを入力する
      - url: `jdbc:h2:mem:testdb`
      - username: `sa`
      - password: (未入力)

- 下記SQLを実行する

```sql~コンソールで実行するSQL
SELECT * FROM ITEMS 
```

- データが格納されていることを確認する

## アイテム関連クラスの作成
3層アーキテクチャに沿って、以下の順序でクラスを作成していきます。


```mermaid
flowchart 
    subgraph 3層アーキテクチャ
        A[プレゼンテーション層<br><br>◆ItemController]
        B[ビジネス層<br><br>◆ItemService<br>◆Item]
        C[(データアクセス層<br><br>◆ItemRepository)]
    end
    A <-->B
    B <-->C
```

◆とついている部品が、今回作成するクラスになります。


1. Itemクラスの作成
2. ItemRepositoryクラスの作成
3. ItemServiceクラスの作成
4. ItemControllerクラスの作成

の順で作成を進めていきます。

## Itemの作成
アイテム情報を表すモデルクラスを作成します。


### 1-1 .Itemクラスの作成 (Item.java)
下記のクラスを作成しましょう。
- 名前 : Item
- パッケージ： com.example.rental.model

作成できたら、`src/main/java`ディレクトリ内に作成された`Item.java`をダブルクリックして開きます。

### 1-2. Itemクラスの実装
`Item`クラスではLombokを使用するため、ゲッターやセッターなどの基本的なメソッドは手動で記述する必要がありません。
代わりに`@Data`アノテーションを付与することで、以下のメソッドが自動生成されます。

---
- ゲッター・セッター
- toString()
- equals() / hashCode()
---

- 以下のクラス図とソースコードを参考に、フィールドを実装しましょう。

#### クラス図

```mermaid
classDiagram
    class Item {
        - id Integer 
        - type String
        - name String 
        - status String
    } 
```

```java~Item
package com.example.rental.model;

import lombok.Data;

@Data
public class Item {
    private Integer id;
    private String type;
    private String name;
    private String status;
}
```
**コード補足**

- Itemクラスは、データベースのITEMSテーブルと対応するモデルクラスです
  - 4つのフィールド（id, type, name, status）はテーブルの各カラムに対応しています
  - typeフィールドは、アイテムの種類（図書か機材か）を示します
  - statusフィールドは、アイテムの貸出状態（利用可能か貸出中か）を示します

statusフィールドについて、今回は学習のシンプルさのために、文字列で扱います。
実際のアプリケーションでは、列挙型フィールド、Enum型を使用する事を検討してみてもよいでしょう。

##  2. ItemRepositoryの作成

###  2-1. ItemRepositoryインターフェースの作成(ItemRepository.java)

下記の**インターフェース**を作成しましょう。
- 名前 : ItemRepository
- パッケージ： com.example.rental.repository

作成できたら、`src/main/java`ディレクトリ内に作成された`ItemRepository.java`をダブルクリックして開きます。

### 2-2 ItemRepositoryインターフェースの実装


- 下記のソースコードを参考に、作成する
- 実装のポイント
  - それぞれの機能で用いるメソッドを定義する
    - `findAll` : アイテム一覧機能
    - `findById` : 特定アイテムの取得(主キー、idを指定して1件取得するメソッドは、様々な場面で利用できる)
    - `insert` : アイテム登録機能
    - `update` : アイテム更新機能
    - `delete` : アイテム削除機能
  - そのほかは、**UserRepository**と同様

```java~ItemRepository
package com.example.rental.repository;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.example.rental.model.Item;

@Mapper
public interface ItemRepository {

    @Select("SELECT * FROM items")
    List<Item> findAll();

    @Select("SELECT * FROM items WHERE id = #{id}")
    Item findById(Integer id);

    @Insert("""
        INSERT INTO items (type, name, status) 
        VALUES (#{type}, #{name}, #{status})
        """)
    void insert(Item item);

    @Update("""
        UPDATE items 
        SET type = #{type}, name = #{name}, status = #{status}
        WHERE id = #{id}
        """)
    void update(Item item);

    @Delete("DELETE FROM items WHERE id = #{id}")
    void delete(Integer id);
}
```

## 3. ItemServiceの作成

### 3-1. ItemServiceクラスの作成(ItemService.java)


下記のクラスを作成しましょう。
- 名前 : ItemService
- パッケージ： com.example.rental.service

作成できたら、`src/main/java`ディレクトリ内に作成された`ItemService.java`をダブルクリックして開きます。


### 3-2. ItemServiceクラスの実装


- 下記のソースコードを参考に、作成
- 実装のポイント
  - `Repository`の機能に対応するメソッドを実装する

|**ItemServiceメソッド**|**ItemRepositoryメソッド**|**説明**|
|-|-|-|
|`getAllItems()`|`findAll()`|すべてのアイテム情報を取得する|
|`getItemById(Integer id)`|`findById(Integer id)`|指定されたIDのアイテム情報を取得する|
|`saveItem(Item item)`|ID値に応じて:<br>- IDが`null`の場合: `insert(Item item)`<br>- IDが存在する場合: `update(Item item)`|アイテム情報を保存または更新する。IDの有無で新規登録か更新かを判断|
|`deleteItem(Integer id)`|`delete(Integer id)`|指定されたIDのアイテム情報を削除する|



  - saveItem(Item item)メソッドでは、item.getId()の値に基づいて新規登録か更新かを判断している
    - IDがnullの場合は新規アイテムとしてinsertメソッドを呼び出し
    - IDが存在する場合は既存アイテムの更新としてupdateメソッドを呼び出し


```java~ItemService.java
package com.example.rental.service;


import java.util.List;

import org.springframework.stereotype.Service;

import com.example.rental.model.Item;
import com.example.rental.repository.ItemRepository;

@Service
public class ItemService {

    private final ItemRepository itemRepository;

    public ItemService(ItemRepository itemRepository) {
        this.itemRepository = itemRepository;
    }

    public List<Item> getAllItems() {
        return itemRepository.findAll();
    }

    public Item getItemById(Integer id) {
        return itemRepository.findById(id);
    }

    public void saveItem(Item item) {
        if (item.getId() == null) {
            itemRepository.insert(item);
        } else {
            itemRepository.update(item);
        }
    }

    public void deleteItem(Integer id) {
        itemRepository.delete(id);
    }
}
```

## 4. ItemControllerクラスの作成

### 4-1 .ItemControllerクラスの作成 (ItemController.java)

下記のクラスを作成しましょう。
- 名前 : ItemController
- パッケージ： com.example.rental.Controller

作成できたら、`src/main/java`ディレクトリ内に作成された`ItemController.java`をダブルクリックして開きます。

### 4-2. ItemControllerの実装

- 下記のソースコードを参考に、作成
  - ユーザー側の操作を意識して、各メソッドを作成する

- 実装のポイント
    - `UserController`と同様に、`@Controller`アノテーションと`@RequestMapping("/items")`を使用してリクエストマッピングを設定
    -  `createOrUpdateItem(@ModelAttribute Item item)`は新規登録と更新の両方を処理を行っている
    - サービス層のsaveItemメソッドが、IDの有無に基づいて適切な処理を行う

|**ユーザーの操作**|**ItemControllerのメソッド**|**説明**|
|-|-|-|
| アイテム一覧画面の表示 | `listItems(Model model)` | すべてのアイテム情報を取得し、一覧画面を表示する |
| 新規アイテム登録画面の表示 | `showCreateForm(Model model)` | 新規登録用のフォームを表示する |
| アイテム登録/更新フォームの送信 | `createOrUpdateItem(@ModelAttribute Item item)` | アイテム情報を保存または更新する |
| アイテム編集画面の表示 | `showEditForm(@PathVariable Integer id, Model model)` | 指定されたIDのアイテム情報を取得し、編集用のフォームを表示する |
| アイテム削除ボタンの押下 | `deleteItem(@PathVariable Integer id)` | 指定されたIDのアイテム情報を削除する |


```java~ItemController
package com.example.rental.controller;

import com.example.rental.entity.Item;
import com.example.rental.service.ItemService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/items")
public class ItemController {

    private final ItemService itemService;

    public ItemController(ItemService itemService) {
        this.itemService = itemService;
    }

    @GetMapping
    public String listItems(Model model) {
        model.addAttribute("items", itemService.getAllItems());
        return "item_list";
    }

    @GetMapping("/new")
    public String showCreateForm(Model model) {
        model.addAttribute("item", new Item());
        return "item_form";
    }

    @PostMapping
    public String createOrUpdateItem(@ModelAttribute Item item) {
        itemService.saveItem(item);
        return "redirect:/items";
    }

    @GetMapping("/edit/{id}")
    public String showEditForm(@PathVariable Integer id, Model model) {
        model.addAttribute("item", itemService.getItemById(id));
        return "item_form";
    }

    @GetMapping("/delete/{id}")
    public String deleteItem(@PathVariable Integer id) {
        itemService.deleteItem(id);
        return "redirect:/items";
    }
}
```

## 5. テンプレートファイルの作成


### 5-1. アイテム一覧のテンプレート作成(item_list.html)の作成

下記のHTMLを作成しましょう。

- 名前: item_list.html
- ファイルパス：src/main/resources/templates/

として**完了**をクリックし、

`src/main/resources/templates`ディレクトリ内に作成された`item_list.html`をダブルクリックして開く。

- 下記のHTMLファイルを参考に、作成
  - 各リンクと対応する`Controller`のメソッドを確認しながら実装する

|**HTMLの表記**|**リクエストURL**|**対応するメソッド**|
|-|-|-|
| `<a href="/items/new">新規アイテム登録</a>` | `/items/new` (GET) | `showCreateForm(Model model)` |
| `<a th:href="@{/items/edit/{id}(id=${item.id})}">編集</a>` | `/items/edit/{id}` (GET) | `showEditForm(@PathVariable Integer id, Model model)` |
| `<a th:href="@{/items/delete/{id}(id=${item.id})}" onclick="return confirm('削除しますか？')">削除</a>` | `/items/delete/{id}` (GET) | `deleteItem(@PathVariable Integer id)` |

```html~item_list
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>アイテム一覧</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<h1>アイテム一覧</h1>
<a href="/items/new">新規アイテム登録</a>
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>タイプ</th>
            <th>名前</th>
            <th>ステータス</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr th:each="item : ${items}">
        <td th:text="${item.id}"></td>
        <td th:text="${item.type}"></td>
        <td th:text="${item.name}"></td>
        <td th:text="${item.status}"></td>
        <td>
            <a th:href="@{/items/edit/{id}(id=${item.id})}">編集</a>
            <a th:href="@{/items/delete/{id}(id=${item.id})}"
                onclick="return confirm('削除しますか？')">
                削除
            </a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
```

### 5-2. アイテム登録/編集フォームのテンプレート作成 (`item_form.html`)

下記のHTMLを作成しましょう。

- 名前: item_form.html
- ファイルパス：src/main/resources/templates/

として**完了**をクリックし、

`src/main/resources/templates`ディレクトリ内に作成された`item_form.html`をダブルクリックして開く。

- 下記のHTMLファイルを参考に、作成
  - 各リンクと対応する`Controller`のメソッドを確認しながら実装する
  - リクエストがコントローラーのメソッド`createOrUpdateItem()`に対応するように指定する。(**"/items"へPost**)できるようにフォームを作成する。
  - Item.javaのフィールドに対応したコントロールを記述する
    - `#id` : `*{id}`
    - `#type` : `*{type}`
    - `#name` : `*{name}`
    - `#status` : `*{status}`
        - statusは、**図書** か **機材** を選択できる

- 実装のポイント
  - 登録フォーム(item_form.html)は、新規作成と編集の両方で共用される
    - フォームに設定されるitemオブジェクトは、新規作成の場合は空のオブジェクト、編集の場合は既存のデータが設定されたオブジェクトとなる


```html~item_form
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>アイテム登録/編集</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<h1>アイテム登録/編集</h1>
<form th:action="@{/items}" method="post" th:object="${item}">
    <input type="hidden" th:field="*{id}" />
    <label for="type">タイプ:</label>
    <select id="type" th:field="*{type}">
        <option value="book">図書</option>
        <option value="equipment">機材</option>
    </select>
    <br/>
    <label for="name">名前:</label>
    <input type="text" id="name" th:field="*{name}" required />
    <br/>
    <label for="status">ステータス:</label>
    <select id="status" th:field="*{status}">
        <option value="available">available</option>
        <option value="rented">rented</option>
    </select>
    <br/>
    <button type="submit">保存</button>
</form>
<a href="/items">アイテム一覧に戻る</a>
</body>
</html>
```

## アイテム管理機能の動作確認

作成したアプリケーションを実行し、ブラウザから確認します。

1. アプリケーションの実行

**Bootダッシュボード(下図参照)**より localサーバー内の**__rental[devtools]__**を選択し、左上の開始ボタンをクリックする。

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/4dddd4d6-4777-404e-8080-7d68f5bedcf0.png)

2. ブラウザからアクセスする

ブラウザ（ChromeやSafariなど）のアドレスバーに *http://localhost:8080/items* と入力し、以下の画像のような結果となることを確認する。

<img src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/8d16c8ce-07f7-474f-92ae-e4ed96a138c0.jpg" alt="Image 3">

アイテム一覧の表示が確認出来たら、以下の操作を行い、確認する
- **新規登録リンクから、新規登録画面が表示されるか**
- **任意の新規アイテム登録を行い、データーベース(H2Consoleで確認する)に変化があるか**
  - アイテム一覧に表示されるかも確認する
- **任意のアイテム編集（更新）を行い、データーベース(H2Consoleで確認する)に変化があるか**
  - 編集画面で任意のアイテム情報を変更し、更新後のアイテム情報が反映されるか
  - アイテム一覧の情報が更新されるかも確認する
- **任意のアイテム削除を行い、データベース(H2Consoleで確認する)に変化があるか**
  - アイテム一覧から消えるかも確認する

---

これで、アイテム管理機能の関連クラス、および画面が完成しました。

## プロジェクト構成


```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── rental/
    │               ├── controller/
    │               │   ├── UserController.java
    │               │   └── ItemController.java      <-- 今回のレッスンで完成!
    │               ├── entity/
    │               │   ├── User.java
    │               │   └── Item.java
    │               ├── repository/
    │               │   ├── UserRepository.java
    │               │   └── ItemRepository.java      <-- 今回のレッスンで作成!(後ほど拡張)
    │               └── service/
    │                   ├── UserService.java
    │                   └── ItemService.java         <-- 今回のレッスンで完成!
    └── resources/
        └── templates/
              ├── user_list.html
              ├── user_form.html
              ├── item_list.html      <-- 今回のレッスンで完成!
              └── item_form.html      <-- 今回のレッスンで完成!
```