はじめに
このプロジェクトでは、MVC アーキテクチャと Servlet2.x を使って社員情報検索機能を実装する方法を学びます。インデックスページに検索ボックスを作成し、ユーザーが社員 ID を入力して検索できるようにし、その後、別のページに社員情報を表示します。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下のことを学びます。
- インデックスページに検索ボックスを作成し、ユーザーが社員 ID を入力できるようにする方法
- 社員データを表すエンティティクラスを実装する方法
- データベース接続を取得するための JDBC ユーティリティクラスを実装する方法
- データベースから社員情報を取得するための DAO クラスを実装する方法
- リクエストを処理し、社員データを JSP ページに転送するためのコントローラクラスを実装する方法
- 照会した社員情報を表示するための JSP ページを実装する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- MVC アーキテクチャを使って Web アプリケーションを構築する
- Servlet2.x を使って HTTP リクエストとレスポンスを処理する
- JDBC を使ってデータベースとやり取りする
- JSP を使って Web ページに動的なデータを表示する
検索ボックスを作成する
このステップでは、インデックスページに検索ボックスを作成し、ユーザーが社員 ID を入力して検索できるようにします。
EmployeeInfo/src/main/webappディレクトリにあるindex.jspファイルを開きます。検索ボックスを作成するために、次の HTML コードを追加します。
<form action="/findEmpByEid" method="get">
<input type="text" name="employeeId" /><input type="submit" value="search" />
</form>
このフォームは、ユーザーが「検索」ボタンをクリックすると、employeeId パラメータ付きで /findEmpByEid URL に GET リクエストを送信します。
社員エンティティクラスを実装する
このステップでは、employees テーブルのフィールドに基づいて Employee.java エンティティクラスを実装します。
EmployeeInfo/src/main/java/org/labex/entityディレクトリにあるEmployee.javaファイルを開きます。次のコードを追加して、フィールドとそれに対応するゲッターとセッターを定義します。
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 クラスを実装して、データベース接続を取得するメソッドを提供します。
EmployeeInfo/src/main/java/org/labex/jdbcディレクトリにあるJdbcUtil.javaファイルを開きます。次のコードを追加して、
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 クラスを実装します。
EmployeeInfo/src/main/java/org/labex/daoディレクトリにあるEmployeeDao.javaファイルを開きます。次のコードを追加して、
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 クラスを実装します。
EmployeeInfo/src/main/java/org/labex/controllerディレクトリにあるEmployeeController.javaファイルを開きます。次のコードを追加して、
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 ファイルを実装します。
EmployeeInfo/src/main/webappディレクトリにあるinfo.jspファイルを開きます。社員情報を表示するためのテーブルを作成するために、次のコードを追加します。
<%@ 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 オブジェクトを取得し、その後、社員情報をテーブルに表示します。
EmployeeInfoディレクトリに切り替え、次のコマンドを使用してサービスを起動します。
cd ~/project/EmployeeInfo/
mvn clean tomcat7:run
照会した社員情報の期待される結果は次のとおりです。
まとめ
おめでとうございます！このプロジェクトを完了しました。実験力を向上させるために、LabEx でさらに多くの実験を行ってみましょう。
