コンビニエンスストア店舗検索システム -JavaEE8,PostgreSQL

2024年9月7日 14:50

JavaEE8（JSP・Servlet）の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。今回は基本情報技術者試験のソフトウエア設計問題として過去出題された仕様をもとにプログラムを設計し実装します。
とりわけ、DBを操作するクラスファイルを実装する方法を学びます（DAOを作成します）。チーム開発での役割分担を想定しています。

2024年9月よりECLIPSEのバージョンを最新版（Version: 2024-06 (4.32.0)）に変更しました。

開発概要

JavaEE8アプリケーション・サーバ（Tomcat）とデータベース・サーバ（PostgreSQL）を利用して開発を行うということを前提に実装を進めていきます。開発ツールには統合開発環境のEclipseを用いることにします。

題材として『基本情報技術者試験の平成28年春期の午後問５（ソフトウエア設計）』を取り上げます。具体的にはコンビニエンスストアの店舗検索システムをWebアプリケーションのMVCモデルで作成します（試験問題の中ではWeb方式と呼んでいます）。

JavaEE8環境ですので使用言語は当然Java（JSP・Servlet）となり、設計技法にはMVCモデルを使います。MVCモデルとはWebアプリケーションの構成をModel（業務ロジック）ーView（表示）ーController（制御）に分割して設計する技法です。３つのモデルに役割分担することで部品化が促され、ひいてはチーム開発に貢献します。

今回は、データベースの接続や抽出処理など業務ロジックを実現するBeanも作成します。

実装していく過程でEclipseの利用方法が不明な場合は、別途メール等でお知らせください。この講座では、作成済みの仕様と設計書から「JavaEE8環境でのMVCモデルの実装の仕組みを学ぶ」ことを目的とします。

開発方針

Webアプリケーションの開発環境には図１のようにEclipse2024を用います。

Spring等のフレームワークは使用しません。これは、MVCモデルにおけるhttpプロトコルの処理の実装を直に学んでいただきたいためです。

開発に必要な最小限の設計ドキュメントとソースコードの例はすべて提示します。この情報をもとに、自分で試行錯誤しながら実装してみてください。
設計のもとになる仕様は基本情報技術者試験の問題文に提示されています。以下のサイトから参照して、内容をしっかりと把握してください。

プログラムは問題文において提示されたWeb方式で開発することにします。

DB設計

論理設計

基本情報技術者試験の問題文通りに設計します。

図2．店舗データテーブル（T_店舗）のレコード形式

図3．お気に入りデータテーブル（T_お気に入り）のレコード形式

物理設計

接続するPostgreSQLサーバのDB名は「mrp」とします。

（DB構造,スキーマ）

create table T_店舗(
　店舗番号 int not null,
　店舗名 varchar(30),
　市区町村名 varchar(30),
　住所 varchar(30),
　電話番号 varchar(20),
　特売情報 varchar(20),
　PRIMARY KEY (店舗番号));
create table T_お気に入り(
　店舗番号 int not null,
　お気に入り数 int,
　PRIMARY KEY (店舗番号));

SQL-DDLとSQL-DMLを含んだテキストファイルを添付します。
A5：SQL Mk-2などのSQLクライアントソフトを使ってSQL文を流し込んでください。店舗データテーブル（T_店舗）とお気に入りテーブル（T_お気に入り）が作成されサンプルデータが入力されます。

（SQL-DDL,SQL-DML）

念のために、作成したすべてのテーブルとビューの中身を確認しておいてください。すべてのinsertデータがDBに格納されているか、しっかりと確認してください！図４のようにV_お気に入り店舗の出力件数は２６件あります。

外部設計

接続urlはhttp://localhost:8080/sunkusfe/Sunkusとします。よってEclipseの動的Webプロジェクトの名前はsunkusfeとなり、サーブレットのurlパターンはSunkusとなります。

Eclipseのメニューバーより
ファイル→新規→動的Webプロジェクト→「sunkusfe」プロジェクトを作成する→図５の内容で設定する

※作成済みであればこの処理は必要ありません

urlにアクセスすると図６のような、コンビニ店舗検索・更新画面が表示されます。市区町村名で対象店舗を絞り込み、店舗番号を選択するか直接店舗レコードの更新ボタンから、お気に入り数を更新します。スマートフォンでの運用が前提のため絞り込みや選択にはドロップダウンリストを用いレコード毎に更新ボタンを設置します。

内部設計

クラス連携図は図７のようになります。

図７のMVCモデル図において、実装を単純化するためにまずは白抜き枠の部分の仕様を実現することにします。枠の背景が赤と青のクラスは、ドロップダウンリスト（選択）とレコード内での更新ボタンの設置の役割を担うクラスになります。これら選択と更新を行う機能は「単純化した実装」の動きを確認したうえで、改めて仕様反映として実現します。

白抜き枠のBeanの使い方とクラス図は以下のようになります。

SunkusHtmlBean.classの仕様とクラス図

（仕様）
・データベースから店舗情報を検索し表示を行います。
・コンストラクタの引数でPostgreSQLサーバのIPとDB名を指定して実体化し
　ます。
・setInputCity()メソッドに市区町村名をセットしてsunkusSearch()メソッド
　を実行することで対象となる地域の店舗情報がDBから検索されます。
・検索結果はhtml形式で表組整形されてresultSetフィールドに格納されま
　す。
・利用側のクラスはgetResultSet()メソッドで検索結果を取得します。

（クラス図）

SunkusUpdateHtmlBean.classの仕様とクラス図

（仕様）
・データベースの店舗情報を更新し表示を行います。
・コンストラクタの引数でPostgreSQLサーバのIPとDB名を指定して実体化し
　ます。
・setInputNumber()メソッドに店舗番号をセットしてsunkusUpdate()メソッ
　ドを実行することで対象店舗の「お気に入り数」が＋１インクリメントさ
　れます。
・更新された店舗情報はhtml形式で表組整形されてresultSetフィールドに格
　納されます。
・利用側のクラスはgetResultSet()メソッドで更新店舗情報を取得します。

（クラス図）

実装準備

PostgreSQLのjdbcドライバを配置

org.postgresql.driver.jarファイルをパッケージエクスプローラ内のsunkusfeプロジェクトのsrc/main/webapp/WEB-INF/libフォルダにドラッグ＆ドロップして登録します。

実装手順

１．DAO用JavaBeansクラスを作成します

Eclipseパッケージ・エクスプローラより
sunkusfeプロジェクトを右クリック→新規→クラス
→以下の内容で作成する

・SunkusHtmlBean.java　
　　パッケージ：jp.ict.aso.model
　　クラス名：SunkusHtmlBean
　　ソースコード例：図８のクラス図より以下のように実装する

Eclipseパッケージ・エクスプローラより
sunkusfeプロジェクトを右クリック→新規→クラス
→以下の内容で作成する

・SunkusUpdateHtmlBean.java　
　　パッケージ：jp.ict.aso.model
　　クラス名：SunkusUpdateHtmlBean
　　ソースコード例：図９のクラス図より以下のように実装する

２．リクエストコントロール用Servletクラスを作成します

Eclipseパッケージ・エクスプローラより
sunkusfeプロジェクトを右クリック→新規→その他→Web→サーブレット
→以下の内容で実装する

・SunkusServlet.java　
　　パッケージ：jp.ict.aso.controller
　　クラス名：SunkusServlet
　　ソースコード例：以下のように実装する　※アノテーションは/Sunkus

【処理概要】
doPost()メソッド内ではリクエストパラメータactionの値により処理を振り分けます。
・actionの値がviewの場合は、SunkusHtmlBeanを実体化して指定対象の設定
　で検索を行い結果をリクエストスコープに保存してsunkusView.jspへフォ
　ワードします。
・actionの値がupdateの場合は、SunkusUpdateHtmlBeanを実体化して指定
　対象の設定で更新を行い結果をリクエストスコープに保存して
　sunkusUpdate.jspへフォワードします。

２．お気に入り店舗検索用画面のJSPファイルを作成します

Eclipseパッケージ・エクスプローラより
sunkusfeプロジェクトを右クリック→新規→その他→Web→JSPファイル
→以下の内容で作成する

・sunkusView.jsp
　　保存場所：sunkusfe/src/main/webapp/WEB-INF/jsp ← 注意！
　　ファイル名：sunkusView.jsp
　　ソースコード例：以下の内容で実装する

３．お気に入り数更新用画面のJSPファイルを作成します

Eclipseパッケージ・エクスプローラより
sunkusfeプロジェクトを右クリック→新規→その他→Web→JSPファイル
→以下の内容で作成する

・sunkusUpdate.jsp
　　保存場所：sunkusfe/src/main/webapp/WEB-INF/jsp ← 注意！
　　ファイル名：sunkusUpdate.jsp
　　ソースコード例：以下の内容で実装する

実行確認

サーブレットクラス（SunkusServlet.java）を実行します。

１．正常に実行されることを確認します

以下のようにデフォルト設定の「春日市」で検索されて、お気に入り店舗を更新できることを確認します。

２．スタイルシートや背景画像で簡単に装飾します

ソースコード例として提示したJSPにはCSSファイルが指定してあるので簡単に実装します。

Eclipseパッケージ・エクスプローラより
sunkusfeプロジェクトを右クリック→新規→CSSファイル
→以下の内容で作成する

・sunkus.css
　　保存場所：sunkusfe/src/main/webapp/WEB-INF/ ← 注意！
　　ファイル名：sunkus.css
　　ソースコード例：以下の内容で実装する

あわせて背景画像を設定します。

【参考】フリー画像サイト↓
https://pixabay.com/illustrations/search/background/

・images/背景画像
　　画像を配置するimagesフォルダの位置は以下の場所です。

imagesフォルダを配置後、jspファイルのbodyタグにあるbackground属性を変更して背景画像を有効にしてください。

３．装飾を確認します

再度サーブレットクラス（SunkusServlet.java）を実行し画面の装飾を確認します。

仕様反映

設計のもとになった基本情報技術者試験の問題では『指定した市区町村にある店舗情報をスマートフォンを用いて検索するシステムを構築する』となっていました。

これを受けて外部設計では『スマートフォンでの運用が前提のため絞り込みや選択にはドロップダウンリストを用いレコード毎に更新ボタンを設置します』としていましが、当初は内部設計において実装を単純化するためにこの仕様は『仕様反映で実現します』としていました。

そこで当初の内部設計どおりに以下のMVCモデル図の枠の背景が赤と青のクラスを追加設計して実装します。

１．SunkusDropdownListBean.classの設計を追加します

（仕様）
・データベースから店舗番号の検索と表示を行います。
・オーバーロードされたコンストラクタを3つ用意しSQL文を指定します。
　①IPとDB名のみを指定した場合はすべての店舗番号を検索するSQL文
　②IPとDB名と市区町村名を指定した場合は対応する市区町村の店舗番号を
　　検索するSQL文。
　③IPとDB名と店舗番号を指定した場合は対応する店舗番号を検索するSQL
　　文。
・tenpoSearch()メソッドを実行することで検索が実行され結果がhtml形式で
　表組整形されてresultSetフィールドに格納されます。
・利用側のクラスはgetResultSet()メソッドで店舗番号を取得します。

（クラス図）

２．SunkusHtmlButtonBean.classの設計を追加します

（仕様）
・データベースから店舗情報を検索し更新ボタン付きで表示を行います。
（SunkusHtmlBeanクラスに更新ボタンを付加したクラスです）
・コンストラクタの引数でPostgreSQLサーバのIPとDB名を指定して実体化し
　ます。
・setInputCity()メソッドに市区町村名をセットしてsunkusSearch()メソッド
　を実行することで対象となる地域の店舗情報がDBから検索されます。
・検索結果はhtml形式で表組整形されてresultSetフィールドに格納されま
　す。この時、更新ボタンも付加します。
・利用側のクラスはgetResultSet()メソッドで検索結果を取得します。

（クラス図）