時計在庫検索システム-EE8,PostgreSQL

2024年9月14日 18:29

JavaEE8（JSP・Servlet）の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。今回はログイン処理でユーザの認証を行った後に時計店の在庫状況を検索することができるシステムを実装します。
とりわけ、DBを操作するクラスファイルを実装する方法を学びます（DAOを作成します）。チーム開発での役割分担を想定しています。

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

開発概要

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

具体的には時計店の在庫検索システムをWebアプリケーションのMVCモデルで作成します。

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

今回は、これまでの開発の練習を踏まえ、データベースの接続や抽出処理を行うBeanとともにServletやJSPのプログラム全てを自由に実装します。

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

開発方針

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

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

開発に必要な最小限の設計ドキュメント提示します。この情報をもとに、自分で試行錯誤しながら実装してみてください。

DB設計

論理設計

ユーザテーブル（T-USER）と在庫テーブル（T-ZAIKO）の２つを用意します。ユーザテーブルにはデータベースを検索するユーザのIDとパスワードの情報を格納しログイン処理に用います。ユーザのIDは電話番号としパスワードはハッシュ化して保存します。在庫テーブルには商品在庫情報とともに保管場所の情報も格納します。

図2．ユーザーテーブル（T_USER）レコード形式

図3．在庫テーブル（T_ZAIKO）レコード形式

物理設計

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

（DB構造,スキーマ）

create table T_USER(
　TEL varchar(20) not null,
　PASSWORD varchar(64) not null,
　primary key(TEL)
);
create table T_ZAIKO(
　ITEM_ID varchar(20) not null,
　ITEM_NAME varchar(20) not null,
　ZAIKO_NUM int,
　LOCATION varchar(20),
　PRIMARY KEY (ITEM_ID)
);

A5：SQL Mk-2などのSQLクライアントソフトを使って上記のスキーマをDBに構築してください。その後、以下のようなテスト用データを入力しておきます。

（テスト用データ）

外部設計

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

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

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

urlにアクセスすると図７のような、ログイン画面が表示されます。電話番号とパスワードで認証し在庫検索を行います。認証がOKの場合のみ図８のような在庫検索画面が表示されます（認証を経ないと在庫検索画面は表示されません）。在庫検索はDBから読み込んだ商品番号（商品ID）をもとにドロップダウンリストで指定します。商品の画像も表示します。

内部設計

クラスの連携は図９、図10のようになります。ログイン処理用のWebアプリと在庫検索処理用のWebアプリをそれぞれ別々に制作します。両者をセッションでつなぐことで認証済みの場合だけ在庫検索が実行できるような設計にします。

LoginCheckBean.classの仕様とクラス図

（仕様）
・データベースからTEL番号をキーにハッシュ化されたパスワードを取得し
　ます（ハッシュ化されたパスワードは事前にDBに登録されています）。
・コンストラクタの引数でキーとなる電話番号とPostgreSQLサーバのIPとDB
　名を指定して実体化します。
・コンストラクタの実行により対象となる電話番号のパスワードが取得され
　ます。
・利用側のクラスはgetPassword()メソッドでパスワードを取得します。

（クラス図）

ZaikoDropdownListBean.classの仕様とクラス図

（仕様）
・データベースから商品番号のドロップダウンリストを作成します。
・コンストラクタの引数でPostgreSQLサーバのIPとDB名を指定して実体化し
　ます。
・zaikoDropdownListHtml()メソッドの実行によりDBから商品番号を取得
　し、昇順の並べかえを行ってドロップダウンリストのオプション指定の
　html文を生成します。
・その際、シリーズごとの出力と全件出力のオプション指定も追加します。
・生成されたhtml文はresultHtmlフィールドに格納されます。
・利用側のクラスはgetResultHtml()メソッドで商品番号リスト（html文）を
　取得します。

（クラス図）

ZaikoItemListBean.classの仕様とクラス図

（仕様）
・データベースから商品番号をキーに商品情報のリストを作成します。
・コンストラクタの引数で商品番号とPostgreSQLサーバのIPとDB名を指定し
　て実体化します。
・zaikoItemListHtml()メソッドの実行によりDBから商品情報を取得し、昇順
　の並べかえを行ってテーブル整形されたhtml文を生成します。
・その際、シリーズごとの出力や全件出力にも対応させます。
・さらに、時計のイメージ画像の出力にも対応させます。
（時計の画像はimages-watchフォルダ内から読み込みます）
・生成されたhtml文はresultHtmlフィールドに格納されます。
・利用側のクラスはgetResultHtml()メソッドで商品リスト（html文）を取得
　します。

（クラス図）

実装準備

PostgreSQLのjdbcドライバの登録

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

ハッシュ算出用ライブラリの登録

「Apache Commons Codec」のDigestUtilsクラスでハッシュ値を求めます。よってcommons-codec-1.15.jarファイルをパッケージエクスプローラ内のzaikoプロジェクトのsrc/main/webapp/WEB-INF/libフォルダにドラッグ＆ドロップして登録します。

実装手順１（ログイン処理）

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

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

・LoginCheckBean.java　
　　パッケージ：jp.ict.aso.model
　　クラス名：LoginCheckBean
　　ソースコード：以下のヒントと図11を参考に考えましょう！

【ヒント】
   /* ●業務処理セクション    */ 
   //[1]JDBCドライバのロード
   Class.forName("org.postgresql.Driver");

   //｢2｣RDBへの接続
   String url="jdbc:postgresql://"+ip+":5432/"+db;
   Connection connection =DriverManager.getConnection(url,"postgres","postgres");

   //[3]SQL文のコンテナ作成
   Statement stmt = connection.createStatement();

   //[4]SQL文を実行する
   ResultSet rs = stmt.executeQuery
            ("select TEL,PASSWORD from T_USER where TEL = '" + tel + "'");

   //[5]RDBの検索結果を取り出す
   while( rs.next() ){
	     tel = rs.getString("TEL" );
	     password = rs.getString("PASSWORD" );
   }

   //[6]データベースから切断する
   stmt.close();
   connection.close();

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

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

・LoginServlet.java　
　　パッケージ：jp.ict.aso.controller
　　クラス名：LoginServlet
　　ソースコード：以下のヒントを参考に考えましょう
　※アノテーションは/Login

【ヒント】
doGetメソッド
　// エラーメッセージ(なし)をセッションに設定
　// フォワード
doPostメソッド
　// リクエストスコープの取得
　// DB接続パラメータの設定
　// DB接続・ユーザ検索・ハッシュパスワード取得
　// if リクエストパスワードのハッシュ値とDB取得パスワードが同じ
　　　// 認証OKなら認証済みメッセージをセッションに設定
　　　//zaiko検索サーブレットへリダイレクト
　//else
　　　// 認証NGならエラーメッセージをセッションに設定
　　　// アカウント再入力へフォワード

３．アカウント入力用画面のJSPファイルを作成します

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

・loginForm.jsp
　　保存場所：zaiko/src/main/webapp/WEB-INF/jsp ← 注意！
　　ファイル名：loginForm.jsp
　　ソースコード：以下のヒントを参考に考えましょう！

【ヒント】
<FORM METHOD="POST" ACTION="Login">
<TABLE border=1>
<TR>
<TD width=200>利用者電話番号：</TD>
<TD width=200 align="left">
　　　<INPUT TYPE=TEXT NAME="tel" value="03-1234-5678" SIZE=20></TD>
</TR>
<TR>
<TD width=200>パスワード：</TD>
<TD width=200 align="left">
　　　<INPUT TYPE=PASSWORD NAME="password" value="0312345678" SIZE=20></TD>
</TR>
</TABLE>
<INPUT TYPE=SUBMIT VALUE=ログイン><INPUT TYPE=RESET VALUE=リセット>
</FORM>

実行確認１（ログイン処理）

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

１．ログインエラー時の出力を確認します

以下のように利用者電話番号とパスワードの組み合わせを間違えるとエラーメッセージが出力されることを確認します。

２．ログイン正常時の状態を確認します

ZaikoServlet.java（/Inventory）を制作していない状態では、当然エラーとなります。エラーメッセージだけ確認します。

実装手順２（在庫検索処理）

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

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

・ZaikoDropdownListBean.java　
　　パッケージ：jp.ict.aso.model
　　クラス名：ZaikoDropdownListBean
　　ソースコード：以下のヒントと図12を参考に考えましょう！

【ヒント】
//[1]JDBCドライバのロード
　Class.forName("org.postgresql.Driver");　

//｢2｣RDBへの接続
　String url="jdbc:postgresql://"+ip+":5432/"+db;
　Connection connection =DriverManager.getConnection(url,"postgres","postgres");

//[3]SQL文のコンテナ作成
　Statement stmt = connection.createStatement();

//[4]SQL文を実行する
　ResultSet rs = stmt.executeQuery
　　("select ITEM_ID from T_ZAIKO order by ITEM_ID");  　

//[5]RDBの検索結果を取り出す
　while (rs.next()) {
　　id = rs.getString("ITEM_ID");
　　resultHtml=resultHtml+"<option>"+id+"</option>";
　}
　resultHtml=resultHtml+"<option value='A%'>Ａシリーズ</option>";
　resultHtml=resultHtml+"<option value='B%'>Ｂシリーズ</option>";　
　resultHtml=resultHtml+"<option value='C%'>Ｃシリーズ</option>";　
　resultHtml=resultHtml+"<option value='D%'>Ｄシリーズ</option>";
　resultHtml=resultHtml+"<option value='%'>全て</option>";

//[6]データベースから切断する
　stmt.close();　
　connection.close();

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

・ZaikoItemListBean.java　
　　パッケージ：jp.ict.aso.model
　　クラス名：ZaikoItemListBean
　　ソースコード：以下のヒントと図13を参考に考えましょう！

【ヒント】
//[1]JDBCドライバのロード
　Class.forName("org.postgresql.Driver");

//｢2｣RDBへの接続
　String url="jdbc:postgresql://"+ip+":5432/"+db;
　Connection connection =DriverManager.getConnection(url,"postgres","postgres");

//[3]SQL文のコンテナ作成
　Statement stmt = connection.createStatement();

//[4]SQL文を実行する
　ResultSet rs = stmt.executeQuery
　　("select ITEM_ID,ITEM_NAME,ZAIKO_NUM,LOCATION from T_ZAIKO where ITEM_ID like '"
　　+ id + "' order by ITEM_ID");

//[5]RDBの検索結果を取り出す
　resultHtml=resultHtml+"<table border=1><tr>";
　resultHtml=resultHtml+"<tr><th>No.</th><th>商品ID</th><th>商品イメージ</th>"
　　+ "<th>商品名</th>";
　resultHtml=resultHtml+"<th>在庫数</th><th>保管棚</th></tr>";
　int no=0;
　while( rs.next() ){
　　no++;
　　id = rs.getString("ITEM_ID");
　　name = rs.getString("ITEM_NAME" );
　　zaiko = rs.getInt( "ZAIKO_NUM" );
　　location = rs.getString( "LOCATION" );
　　resultHtml=resultHtml+"<tr><td>"+no+"</td>";
　　resultHtml=resultHtml+"<td>"+id+"</td>";
　　resultHtml=resultHtml+"<td><img src='watch-images/"+id+".png' width=100></td>";
　　resultHtml=resultHtml+"<td>"+name+"</td>";
　　resultHtml=resultHtml+"<td>"+zaiko+"</td>";
　　resultHtml=resultHtml+"<td>"+location+"</td></tr>";
　}
　resultHtml=resultHtml+"</table>";

//[6]データベースから切断する
　stmt.close();connection.close();

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

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

・ZaikoServlet.java　
　　パッケージ：jp.ict.aso.controller
　　クラス名：ZaikoServlet
　　ソースコード：以下のヒントを参考に考えましょう
　※アノテーションは/Inventory

【ヒント】
doGetメソッド
//httpセッションが認証済みか確認
//if　"認証済み"と.messageの内容が同じ
　// ドロップダウンリストの実体化（IP,DB名の初期値をプロパティに設定）
　// ドロップダウンリストを作成
　// リクエストスコープに保存（スコープ名：dropdown）

　// 検索結果リストの実体化（商品番号の初期値、IP、DB名をプロパティに設定）
　// 在庫リストを作成
　// リクエストスコープに保存（スコープ名：searchresult）

　// 入出力用JSPにフォワード

//else
　// 認証されていない場合はアカウント入力に戻す
　// 入出力用JSPにフォワード

doPostメソッド
　// ドロップダウンリストの実体化（IP,DB名の初期値をプロパティに設定）
　// ドロップダウンリストを作成
　// リクエストスコープに保存（スコープ名：dropdown）

　// リクエストパラメータ（入力値）の取得（パラメータ名：id）
　// 検索結果リストの実体化（入力値、IP、DB名をプロパティに設定）
　// 在庫リストを作成
　// リクエストスコープに保存（スコープ名：searchresult）

　// 入出力用JSPにフォワード

３．入力・検索結果リスト出力用画面のJSPファイルを作成します

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

・zaikoSearch.jsp
　　保存場所：zaiko/src/main/webapp/WEB-INF/jsp ← 注意！
　　ファイル名：zaikoSearch.jsp
　　ソースコード：以下のヒントを参考に考えましょう！

【ヒント】
    <table border="1">
        <tr>
            <form action="Inventory" method="post">
                <td>商品ID:
                    <select name="id">
                    <%= zdlb.getResultHtml() %>
                    </select>
                </td>
                <td><input type="submit" value="在庫状況取得"></td>
            </form>
            <td><%= message %></td>
            <td>
                <form method="post">
                    <input type="submit" name="logout" value="ログアウト">
                </form>
            </td>
        </tr>
    </table>
    <%= zilb.getResultHtml() %>

実行確認２（在庫検索処理）

・図17のようにログインシステム（LoginServlet.java）を実行します。正
　常に認証されたとき在庫検索画面が表示されるか確認します。
・図18のようにログアウトしたときに/Inventoryのurl指定でログイン状態に
　なることを確認します（ログインしていない状態で/Inventoryの内容が表
　示されてはいけません）。