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


SpringBootコース

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

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

## トップページの作成

ここでは、最後に各機能に移動できるためのトップページを作成します。


## IndexControllerの作成

### 1. IndexControllerクラスの作成 (IndexController.java)

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

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

### 2. IndexControllerクラスの実装

- 下記のソースコードを参考に、作成

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

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    @GetMapping("/")
    public String index() {
        return "index";
    }
}

```

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

### トップページのHTML作成 (index.html)

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

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

として**完了**をクリックし、作成されたファイルを開きます。


- 下記のHTMLファイルを参考に、作成

```html~index
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>レンタル管理システム</title>
	<link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
    <h1>レンタル管理システム</h1>
    <p>以下のリンクから各機能にアクセスしてください。</p>

    <ul>
        
        <li>
            <h2>ユーザー管理</h2>
            <ul>
                <li><a href="/users">ユーザー一覧</a></li>
                <li><a href="/users/new">新規ユーザー登録</a></li>
            </ul>
        </li>

        
        <li>
            <h2>アイテム管理</h2>
            <ul>
                <li><a href="/items">アイテム一覧</a></li>
                <li><a href="/items/new">新規アイテム登録</a></li>
            </ul>
        </li>

        
        <li>
            <h2>レンタル管理</h2>
            <ul>
                <li><a href="/rentals">レンタル履歴一覧</a></li>
                <li><a href="/rentals/new">新規レンタル開始</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
```

## 動作確認

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

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

Bootダッシュボードより「rental[devtools]」を選択し、開始ボタンをクリックします。

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

ブラウザのアドレスバーに *http://localhost:8080/* と入力し、トップページが表示されることを確認します。

![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/546130b0-9560-47ef-857e-f6f239a27cae.png)

トップページの表示が確認できたら、各機能にアクセスできるか、各リンクをクリックしてみましょう。

**これで、全てのファイルが完成しました。お疲れ様でした！**



## プロジェクト構成
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── rental/
    │               ├── controller/
    │               │   ├── UserController.java
    │               │   ├── ItemController.java
    │               │   └── RentalController.java
    │               ├── entity/
    │               │   ├── User.java
    │               │   ├── Item.java
    │               │   ├── Rental.java
    │               │   └── RentalView.java
    │               ├── repository/
    │               │   ├── UserRepository.java
    │               │   ├── ItemRepository.java
    │               │   └── RentalRepository.java
    │               └── service/
    │                   ├── UserService.java
    │                   ├── ItemService.java
    │                   └── RentalService.java
    └── resources/
        └── templates/
              ├── user_list.html
              ├── user_form.html
              ├── item_list.html
              ├── item_form.html
              ├── rental_list.html
              ├── rental_form.html
              └── index.html         <-- 今回のレッスンで完成!
```

11. トップページの作成