4章 チェックテスト

---

はじめに

---

今回やっていただくのは、DBの作成と社員システム簡易版の構築です。
これまで、学んできたことの総集編になります。
wikiなどを見直しながら、自力でクリアできるように頑張ってください。

以下に続くように、【準備・確認】から進めてもらい、
準備が整ったら、課題に取り掛かってください。

準備

---

実施前にいくつかの準備と確認が必要となります。
しっかり読み実施しましょう。
プロジェクトの作成
JSP準備と実行 を参考に Check4 というプロジェクトを作成してください。
作成が完了したら、以下のコードをコピーしたファイルをフォルダ構造と同じになるようにプロジェクトに格納してください。

EmployeeBean.java

package bean;

/**
 * ・社員情報データ（モデル）
 */

public class EmployeeBean {

    private String Id;
    private String PassWord;
    private String Name;
    private String Comment;
    private String Login_Time;

    public void setId(String Id) {
        this.Id = Id;
    }

    public String Id() {
        return Id;
    }

    public void setPassWord(String PassWord) {
        this.PassWord = PassWord;
    }

    public String getPassWord() {
        return PassWord;
    }

    public void setName(String Name) {
        this.Name = Name;
    }

    public String getName() {
        return Name;
    }

    public void setLogin_Time(String Login_Time) {
        this.Login_Time = Login_Time;
    }

    public String getLogin_Time() {
        return Login_Time;
    }

    public void setComment(String Comment) {
        this.Comment = Comment;
    }

    public String getComment() {
        return Comment;
    }
}

EmployeeController.java

package controller;

/**
 * 社員情報管理コントローラー
 */

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class EmployeeController extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        try {
            // 問① index.htmlから送信されたIDとPassWordの値を取得できるように修正しましょう。
            String id = request.getParameter("ここを改修");
            String password = request.getParameter("ここを改修");
            
            /*
             *  IDとPassWordと元に、社員情報を検索する関数の呼び出し、結果をJSPに渡す処理
             *  ※ EmployeeBeanとEmployeeServiceをimportするのを忘れないでください。
             */

            // 問② EmployeeServiceクラスをインスタンス化する。

            // 問③ EmployeeBeanに、EmployeeServiceよりsearch関数を呼び出し、返り値を格納する。

            // 問④ nullの部分に適切な引数をセットする。
            request.setAttribute("EmployeeBean", null);

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            ServletContext context = this.getServletContext();
            RequestDispatcher dispatcher = context.getRequestDispatcher("/index.jsp");
            dispatcher.forward(request, response);
        }
    }
}

EmployeeService.java

package service;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.text.SimpleDateFormat;
import java.util.Calendar;

import bean.EmployeeBean;

/**
 * ・社員情報検索サービス
 */

public class EmployeeService {

    // 問① 接続情報を記述してください
    /** ドライバーのクラス名 */
    private static final String POSTGRES_DRIVER = "org.postgresql.Driver";
    /** ・JDMC接続先情報 */
    private static final String JDBC_CONNECTION = "ここを改修";
    /** ・ユーザー名 */
    private static final String USER = "postgres";
    /** ・パスワード */
    private static final String PASS = "postgres";
    /** ・タイムフォーマット */
    private static final String TIME_FORMAT = "yyyy/MM/dd HH:mm:ss";

    // 問② 入力された値で、UPDATEする文
    /** ・SQL UPDATE文 */
    private static final String SQL_UPDATE = "ここを改修";

    // 問③ 入力されたIDとPassWordをキーにして、検索するSELECT文
    /** ・SQL SELECT文 */
    private static final String SQL_SELECT = "ここを改修";

    EmployeeBean employeeDate = null;

    // 送信されたIDとPassWordを元に社員情報を検索するためのメソッド
    public EmployeeBean search(String id, String password) {

        Connection connection = null;
        Statement statement = null;
        ResultSet resultSet = null;
        PreparedStatement preparedStatement = null;

        try {
            // データベースに接続
            Class.forName(POSTGRES_DRIVER);
            connection = DriverManager.getConnection(JDBC_CONNECTION, USER, PASS);
            statement = connection.createStatement();

            // 処理が流れた時間をフォーマットに合わせて生成
            Calendar cal = Calendar.getInstance();
            SimpleDateFormat sdFormat = new SimpleDateFormat(TIME_FORMAT);

            // PreparedStatementで使用するため、String型に変換
            String login_time = sdFormat.format(cal.getTime());

            /*
             *  任意のユーザーのログインタイムを更新できるように、プリペアドステートメントを記述。
             */

            // preparedStatementに実行したいSQLを格納
            preparedStatement = connection.prepareStatement(SQL_UPDATE);
            // 問④ preparedStatementを使って、一番目のindexに今の時間をセットしてください。2番目のindexにIDをセットしてください。

            // 問⑤ UPDATEを実行する文を記述

            /*
             *  UPDATEが成功したものを即座に表示
             *  任意のユーザーを検索できるように、プリペアドステートメントを記述。
             */
            preparedStatement = connection.prepareStatement(SQL_SELECT);
            //問⑥ 一番目のindexにIDをセットしてください。2番目のindexにPASSWORDをセット。

            // SQLを実行。実行した結果をresultSetに格納。
            resultSet = preparedStatement.executeQuery();

            while (resultSet.next()) {
                // 問⑦ tmpName,tmpComment,tmpLoginTimeに適当な値を入れてください。
                String tmpName = resultSet.getString("ここを改修");
                String tmpComment = resultSet.getString("ここを改修");
                String tmpLoginTime = resultSet.getString("ここを改修");

                // 問⑧ EmployeeBeanに取得したデータを入れてください。
                employeeDate = new EmployeeBean();
                employeeDate.setName("ここ改修");
                employeeDate.setComment("ここ改修");
                employeeDate.setLogin_Time("ここ改修");
            }

            // forName()で例外発生
        } catch (ClassNotFoundException e) {
            e.printStackTrace();

            // getConnection()、createStatement()、executeQuery()で例外発生
        } catch (SQLException e) {
            e.printStackTrace();

        } finally {
            try {

                if (resultSet != null) {
                    resultSet.close();
                }
                if (statement != null) {
                    statement.close();
                }
                if (connection != null) {
                    connection.close();
                }

            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return employeeDate;
    }
}

index.css

@charset "utf-8";

.wrapper{
    margin: 0 auto;
    width: 400px
}
.header{
  float: auto;
  margin-top: 10px;
   width: 400pX;
   text-align: left;
 /* 問① 背景を青色にする */

 /* 問② 文字の色を白にする */

 /* 問③ 背景に対して文字を縦方向に中央揃え */

}

ul li {
     margin-top: 10px;
    list-style: none;
}

label {
    width: 100px;
    float: left;
}

ul {
    width: 400px;
    margin: 0 auto;
}
input#button {
    display: block;
    margin: 0 auto;
}
ul li.pass {
    margin-bottom: 15px;
}

.footer{
  float: auto;
  margin-top: 10px;
  width: 400pX;
  text-align: left;
 /* 問④ 背景を青色にする */

 /* 問⑤ 文字の色を白にする */

 /* 問⑥ 背景に対して文字を縦方向に中央揃え */

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員情報システム</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
  <form action="/Check4/search" method="post">
    <div class="wrapper">
      <div class="header">社員情報システム</div>
        <ul>
          <!-- ID入力欄 -->
          <li class="id">
           <label for="id">ID</label>
          <input type="text" name="id" value="" size="20">
          </li>
          <!-- パスワードを入力する欄を作成してください -->
          <li class="pass">

          <!-- 検索ボタン -->
          <li><input id="button" type="submit" name="button" value="検索">
          </li>
        </ul>
      <div class="footer">blue.inc</div>
    </div>
  </form>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="bean.EmployeeBean"%>

<%
    // 問① getAttributeに適切な引数をセットして、EmployeeControllerから渡されたBeanを取得する。
    EmployeeBean employeeBean = (EmployeeBean) request.getAttribute("ここを改修");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>検索結果</title>
</head>
<body>
    <div align="center">
        <!-- 検索が成功した場合の表示 -->
        <%
            if (employeeBean != null) {
        %>
        <table border="1">
            <tr>
                <th>社員名</th>
                <td><%=employeeBean.getName()%></td>
            </tr>
            <tr>
                <th>コメント</th>
                <td><%=employeeBean.getComment()%></td>
            </tr>
            <tr>
                <th>ログインタイム</th>
                <td><%=employeeBean.getLogin_Time()%></td>
            </tr>
        </table>

        <!-- 問②  それ以外の表示（エラーの場合）-->
        <% } else { %>
           【ここを修正】
        <% } %>
    </div>
</body>
</html>

フォルダ構造

JDBCドライバのビルド・パス

postgresql-42.2.5.jarについては、下記のやり方に従って、ビルド・パス設定をしてください。

lib配下に JDBCドライバ でダウンロードした jarファイル を入れてビルド・パスしてください。
詳しい設定のやり方は、カリキュラムの JDBCドライバ の【Step2 : JDBCドライバの設定】を参考にしてください。
Tomcatの設定
プロジェクトを動かすためにサーバーの準備が必要です。
カリキュラムの サーブレットのプログラムを動作させるための準備 を参考にして、
サーバーの設定を行ってください。
web.xmlの記述

3行目の <display-name>SC3-A</display-name> から最下部までコピーして、
ご自身のxmlファイルに反映してください。
1行目、2行目に関しては、それぞれの環境によって違う記述になっているので、使用しないでください。
今回はイメージとして全て記述しております。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>Check4</display-name>
  <servlet>
    <servlet-name>search</servlet-name>
    <servlet-class>controller.EmployeeController</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>search</servlet-name>
    <url-pattern>/search</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

課題①：DBの作成

---

下記のように、定義されたDBを作成しなさい。

DB名：Employee

テーブル名：Employee_table

カラム名	データ型	サイズ	キー	NUll可
id	char	5	primary	NOT NUll
password	varchar	256		NOT NUll
name	varchar	256
comment	varchar	256
login_time	varchar	19

初期データ

insert into employee_table(id,password,name,comment)
values('09090','admin','nanaumishinya','javaman');

課題②：プログラム改修

---

改修対象

• EmployeeController.java
• EmployeeService.java
• index.jsp
• index.css
• index.html

全部で５つのファイルに準備されている問題に回答をお願いいたします。

要件①

検索処理を実行したタイミングで以下を実行してください。

• 社員情報テーブルの login_time を検索処理の実行時間でUPDATEする
• 社員名、コメントに加え、ログインタイムとして login_time を表示する

要件②

• パスワードの入力時、入力内容にマスクをかけてください。(課題③のエビデンス参照)

課題③：エビデンス

---

全部で、5枚のエビデンスを用意してください。
エビデンス① | TOP画面

エビデンス② | パスワードのマスク

エビデンス③ | 検索成功時

エビデンス④ | 検索失敗時

エビデンス⑤ | DBのエビデンス