Spring Bootを使ったWebアプリケーション⓪~業務用アプリケーションの概要~


<h2>はじめに</h2>
この記事は、<a href="https://qiita.com/homes31285/items/1ade4d469cad6170062d">Spring BootのWebアプリケーションの基本①</a>から<a href="https://qiita.com/homes31285/items/7b3c4d4dd3a6a6c07185">Spring BootのWebアプリケーションの応用④</a>まで作成をした業務用アプリケーションのシステムの詳細を説明をした記事です。

<h2>Spring Bootを使ったWebアプリケーションの内容</h2>
1. <a href="https://qiita.com/homes31285/items/1ade4d469cad6170062d">Spring BootのWebアプリケーションの基本① ~IntelliJの使い方とMVCモデルの概要~</a><Br>
2. <a href="https://qiita.com/homes31285/items/4c034d62875922dbb0e0">Spring BootのWebアプリケーションの基本② 〜MVCモデルとEntityとlombok~</a><Br>
3. <a href="https://qiita.com/homes31285/items/8fa63b905ec807b7f714">Spring BootのWebアプリケーションの基本③~3層アーキテクチャと依存性の注入~</a><Br>
4. <a href="https://qiita.com/homes31285/items/70eee4f4a8cd3560d5d2">Spring BootのWebアプリケーションの基本④ ~データ・アクセス層とMyBatisとH2コンソール〜</a><Br>
5.<a href="https://qiita.com/homes31285/items/acde6e52e2a8fde14a61">Spring BootのWebアプリケーションの応用① ~Spring Bootで注文フォームを作成する手順~</a><Br>
6.<a href="https://qiita.com/homes31285/items/2115d1e743ce8e5002f0">Spring BootのWebアプリケーションの応用② ~注文フォームでトランザクションと二重サブミット対策とバリデーション〜</a><Br>
7.<a href="https://qiita.com/homes31285/items/5393b30cdfd9741f604a">Spring BootのWebアプリケーションの応用③〜注文フォームの更新と削除~</a><Br>
8.<a href="https://qiita.com/homes31285/items/7b3c4d4dd3a6a6c07185">Spring BootのWebアプリケーションの応用④〜Bootstrap~</a><Br>


<h2>成果物</h2>
<a href="https://github.com/tamakawa-ryuji/business_management_application">GitHub</a>


<h2>システム概要</h2>
このアプリケーションは、業が顧客からの注文情報を受け取り、記録、管理、更新、削除し、注文情報を管理することを目的としています。<BR>

<Br>
注文情報は、注文番号、納入日付、会社情報、品物情報、数量、単価、金額などのデータで構成されています。

<Br>
このシステムは、アプリケーションは、データベース内の注文情報を3層アーキテクチャとMVCモデルに基づいて処理し、ユーザーが注文情報を効率的に操作できるようになっています。

<h2>システムアーキテクチャ</h2>

このアプリケーションは、3層アーキテクチャとMVCモデルを採用して設計されています。以下にそれぞれの要素を説明します。

<h3>3層アーキテクチャ</h3>

このアプリケーションは、3つの主要な層で構成されています。

<b>プレゼンテーション層</b>: ユーザーインターフェースとのやり取りを担当します。Thymeleafテンプレートを使用して、ユーザーにデータの表示、入力、操作を提供します。これにより、注文の一覧表示、詳細表示、作成、更新、削除が実現されます。

<b>アプリケーション層</b>: コントローラとサービスがこの層で動作します。コントローラは、ユーザーからのリクエストを受け取り、適切な処理を呼び出す役割を果たします。サービスは、ビジネスロジックを処理し、データベースアクセスを行います。サービスは、注文の作成、更新、削除、検索などの機能を提供します。

<b>データアクセス層</b>: データベースとのやり取りを担当します。MyBatisを使用して、データベース内の注文情報を操作するためのリポジトリが実装されています。リポジトリは、データベースへのCRUD（作成、読み取り、更新、削除）操作を提供します。

<h3>MVCモデル</h3>

MVC（Model-View-Controller）モデルは、アプリケーションの設計アーキテクチャの一部として採用されています。

<b>Model</b>: データの保持と処理を担当します。OrderEntity や OrderForm クラスがデータモデルとして使用され、データベースからの情報の取得や更新、フォームデータのバインディングが行われます。

<b>View</b>: ユーザーインターフェースの表示を担当します。Thymeleafテンプレートが使用されており、ユーザーにデータの表示や操作を提供します。

<b>Controller</b>: ユーザーからのリクエストを受け取り、適切な処理を呼び出す役割を果たします。OrderController クラスがこの役割を担当し、各種アクションの処理を制御します。

<h2>データベース</h2>

<h3>ORDERSテーブル</h3>
顧客からの注文情報を効果的に管理するために使用するテーブル

| カラム名 | データ型 | NULL許容| デフォルト値 | 主キー | 説明 |
|:-:|:-:|:-:|:-:|:-:|:-:|
| order_id  | INT  | NOT NULL  |   |  ✔ |  注文番号 |
|  order_date | DATE  | NOT NULL  | SYSDATE  |   |  納入日付 |
|  company_no | INT  |   |  0 |   |  会社番号 |
|  company_name	 | VARCHAR(255)	  |   |   |   | 会社名  |
|  item_no |  INT |   |  0 |   | 品物番号  |
| item |  VARCHAR(255) |  	 |   |   |  品物 |
| quantity  |INT   |   | 0  |   | 数量 |
| unit_price  |  INT |   |  0 |   |  単価 |
| price  |  INT |   |  0 |   | 金額  |


<h2>画面詳細</h2>

<h3>トップページ</h3>

![スクリーンショット 2023-08-21 20.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/f4b91163-7258-2418-6937-f95d2e960e0d.png)

<b>説明</b>
アプリケーションのトップページです。
「業務管理アプリケーション」という見出しと、注文リスト一覧へのリンクが表示されます。


<h3>注文リスト一覧ページ</h3>

![スクリーンショット 2023-08-22 8.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/4443f12d-f68d-4a57-6c82-571d7f676e18.png)

<b>説明</b>
注文の一覧を表示するページです。
テーブル形式で各注文の詳細が表示され、注文番号をクリックすると注文詳細ページに遷移します。また、「業務管理アプリケーション」のタイトルをクリックすると「トップページ」に遷移します。
トップページのボタンをクリックすると、「トップページ」に遷移し、作成ボタンをクリックすると、「注文リストフォームページ」に遷移します。

<h3>注文リストフォームページ</h3>

![スクリーンショット 2023-08-22 8.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/41c69d73-8634-7a0c-4f7d-b9999da74c10.png)


<b>説明</b>
新しい注文を作成するためのフォームページです。
各フィールドに入力し、「作成」ボタンをクリックすると新しい注文が作成されます。「取消」ボタンをクリックすると、「注文リスト一覧ページ」に遷移します。


<h3>注文詳細フォームページ</h3>

![スクリーンショット 2023-08-22 8.36.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/623e1d1e-e146-8d24-bd95-5858d28e92ef.png)

<b>説明</b>
注文の詳細を表示・編集するためのフォームページです。
各フィールドに表示される情報は注文の詳細です。必要に応じてフィールドを編集し、「更新」ボタンをクリックすると注文が更新されます。「削除」ボタンをクリックすると「注文削除確認ページ」に遷移します。「取消」ボタンをクリックすると、「注文リスト一覧ページ」に遷移します。


<h3>注文削除確認ページ</h3>

![スクリーンショット 2023-08-22 18.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782718/7f0b9f3c-ccee-d89c-70d7-af0ec98d8f7f.png)

<b>説明</b>
注文を削除する際に確認するためのページです。
注文の詳細が表示され、「削除」ボタンをクリックすると注文が削除されます。「取消」ボタンをクリックすると、「注文リスト一覧ページ」に遷移します。