MVC と Servlet を使った社員情報の取得

はじめに

このプロジェクトでは、MVCアーキテクチャとServlet2.xを使って社員情報検索機能を実装する方法を学びます。インデックスページに検索ボックスを作成し、ユーザーが社員IDを入力して検索できるようにし、その後、別のページに社員情報を表示します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• インデックスページに検索ボックスを作成し、ユーザーが社員IDを入力できるようにする方法
• 社員データを表すエンティティクラスを実装する方法
• データベース接続を取得するためのJDBCユーティリティクラスを実装する方法
• データベースから社員情報を取得するためのDAOクラスを実装する方法
• リクエストを処理し、社員データをJSPページに転送するためのコントローラクラスを実装する方法
• 照会した社員情報を表示するためのJSPページを実装する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• MVCアーキテクチャを使ってWebアプリケーションを構築する
• Servlet2.xを使ってHTTPリクエストとレスポンスを処理する
• JDBCを使ってデータベースとやり取りする
• JSPを使ってWebページに動的なデータを表示する

Skills Graph

検索ボックスを作成する

このステップでは、インデックスページに検索ボックスを作成し、ユーザーが社員IDを入力して検索できるようにします。

1. EmployeeInfo/src/main/webapp ディレクトリにある index.jsp ファイルを開きます。

2. 検索ボックスを作成するために、次のHTMLコードを追加します。

<form action="/findEmpByEid" method="get">
  <input type="text" name="employeeId" /><input type="submit" value="search" />
</form>

このフォームは、ユーザーが「検索」ボタンをクリックすると、employeeId パラメータ付きで /findEmpByEid URLにGETリクエストを送信します。

社員エンティティクラスを実装する

このステップでは、employees テーブルのフィールドに基づいて Employee.java エンティティクラスを実装します。

1. EmployeeInfo/src/main/java/org/labex/entity ディレクトリにある Employee.java ファイルを開きます。

2. 次のコードを追加して、フィールドとそれに対応するゲッターとセッターを定義します。

public class Employee {
    private Integer id;
    private String name;
    private Integer gender;
    private String phone;
    private String email;
    private String address;

    // Getters and setters
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    // 残りのゲッターとセッターを実装する
}

JDBCユーティリティクラスを実装する

このステップでは、JdbcUtil.java クラスを実装して、データベース接続を取得するメソッドを提供します。

1. EmployeeInfo/src/main/java/org/labex/jdbc ディレクトリにある JdbcUtil.java ファイルを開きます。

2. 次のコードを追加して、getConn() メソッドを実装します。

public class JdbcUtil {
    private static final String URL = "jdbc:mysql://localhost:3306/test";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "";

    static {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static Connection getConn() {
        Connection conn = null;
        try {
            conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return conn;
    }
}

このメソッドは、提供されたURL、ユーザー名、およびパスワードを使用して、データベース接続を返します。

DAOクラスを実装する

このステップでは、社員情報を取得するメソッドを提供するために EmployeeDao.java クラスを実装します。

1. EmployeeInfo/src/main/java/org/labex/dao ディレクトリにある EmployeeDao.java ファイルを開きます。

2. 次のコードを追加して、getEmployee() メソッドを実装します。

public class EmployeeDao {
    public Employee getEmployee(Integer employeeId) {
        Connection conn = JdbcUtil.getConn();
        String sql = "select * from employees where employee_id =?";
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;

        Employee employee = null;
        try {
            preparedStatement = conn.prepareStatement(sql);
            preparedStatement.setInt(1, employeeId);
            resultSet = preparedStatement.executeQuery();
            if (resultSet.next()) {
                employee = new Employee();
                employee.setId(resultSet.getInt(1));
                employee.setName(resultSet.getString(2));
                employee.setGender(resultSet.getInt(3));
                employee.setPhone(resultSet.getString(4));
                employee.setEmail(resultSet.getString(5));
                employee.setAddress(resultSet.getString(6));
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return employee;
    }
}

このメソッドは、JdbcUtil.java の getConn() メソッドを使ってデータベース接続を取得し、その後、コントローラから渡された社員IDを使ってデータベースを照会し、Employee オブジェクトを返します。

コントローラクラスを実装する

このステップでは、社員情報を取得するリクエストを処理するために EmployeeController.java クラスを実装します。

1. EmployeeInfo/src/main/java/org/labex/controller ディレクトリにある EmployeeController.java ファイルを開きます。

2. 次のコードを追加して、doGet() および doPost() メソッドを実装します。

@WebServlet("/findEmpByEid")
public class EmployeeController extends HttpServlet {
    EmployeeDao employeeDao = new EmployeeDao();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String employeeId = req.getParameter("employeeId");
        Employee employee = employeeDao.getEmployee(Integer.parseInt(employeeId));
        req.setAttribute("employee", employee);
        req.getRequestDispatcher("info.jsp").forward(req, resp);
    }
}

doGet() メソッドは、リクエストから employeeId パラメータを取得し、EmployeeDao クラスを使って社員情報を取得し、それをリクエストに格納した後、社員情報を表示するために info.jsp ページにリクエストを転送します。

JSPページを実装する

このステップでは、照会した社員情報を表示するために info.jsp ファイルを実装します。

1. EmployeeInfo/src/main/webapp ディレクトリにある info.jsp ファイルを開きます。

2. 社員情報を表示するためのテーブルを作成するために、次のコードを追加します。

<%@ page import="org.labex.entity.Employee" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>社員情報</title>
    <style>
        th, td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
</head>
<body>
    <% Object employeeObj = request.getAttribute("employee");
    if (employeeObj!= null) {
        Employee employee = (Employee) employeeObj; %>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>名前</th>
                <th>性別</th>
                <th>電話番号</th>
                <th>メールアドレス</th>
                <th>住所</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><%= employee.getId() %></td>
                <td><%= employee.getName() %></td>
                <td><%= employee.getGender() == 1? "男性" : "女性" %></td>
                <td><%= employee.getPhone() %></td>
                <td><%= employee.getEmail() %></td>
                <td><%= employee.getAddress() %></td>
            </tr>
        </tbody>
    </table>
    <% } else { %>
    <p>情報が見つかりません。</p>
    <% } %>
</body>
</html>

このJSPページは、リクエストから employee オブジェクトを取得し、その後、社員情報をテーブルに表示します。

3. EmployeeInfo ディレクトリに切り替え、次のコマンドを使用してサービスを起動します。

cd ~/project/EmployeeInfo/
mvn clean tomcat7:run

照会した社員情報の期待される結果は次のとおりです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験力を向上させるために、LabExでさらに多くの実験を行ってみましょう。