【Javaで作成するWebアプリケーション#5】データベースに登録されたデータを更新する

Java
2022.12.26

icon
icon

今回は新たに「顧客編集画面」を作成し、データベースに登録された顧客情報をブラウザから編集（更新）する処理を作成していきます。


前回までの内容はこちら

【JavaWebアプリケーション#1】概要と学べること
【JavaWebアプリケーション#2】基本的なログイン機能
【JavaWebアプリケーション#3】登録データをブラウザで表示
【JavaWebアプリケーション#4】データの登録機能

※内容名は略称しています。




まずは「顧客一覧画面」に「編集」と表示されたリンクを作成し、そのリンクで「顧客編集画面」へ遷移させるようにします。



「編集」リンクをクリックした際に、選択した顧客IDを用いて顧客情報を取得します。取得した顧客情報は「顧客編集画面」に表示させるようにします。



では始めていきます。


JSTLのダウンロードと設定

顧客IDを「編集」リンク（<a>タグ）でサーブレットに渡すため、今回はJSTL（JavaServer Pages Standard Tag Library）を使いたいと思います。

JSTLとはJSPでよく使用される機能をタグライブラリとしてまとめたものになります。

プログラムを作成する前にJSTLのダウンロードとプロジェクトへの設定を行いましょう。
JSTLを使用するためには2種類のJARファイルをダウンロードし、プロジェクトに組み込む必要があります。

jstl-api-1.2.jarのダウンロード

Just a moment...
mvnrepository.com




jstl-impl-1.2.jarのダウンロード

Just a moment...
mvnrepository.com



ダウンロードができたら、2ファイルをプロジェクトの/libフォルダに設置します。（コピーもしくはドラッグ&ドロップで設置）



これでJSTLの設定ファイルをプロジェクトで使用するための準備ができました。

WEB-INF/   
└ lib
    ├ jstl-api-1.2.jar
    └ jstl-impl-1.2.jar




リンクの作成

ではJSTLを使い、「顧客一覧画面」に「顧客編集画面」へ遷移するリンクと選択した顧客IDを渡すプログラムを作成します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.util.List" %>
<%@ page import="object.Customer" %>
<% List<Customer> customer_list = (List<Customer>)request.getAttribute("customer"); %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顧客一覧画面</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
	<div class="mx-auto text-center" style="width: 70%;">
	<h2 class="text-center mb-3">顧客一覧</h2>
	<table class="table table-striped">
		<thead>
			 <tr>
			 	<th scope="col">顧客ID</th>
			 	<th scope="col">お客様名</th>
			 	<th scope="col">住所</th>
			 	<th scope="col">登録日</th>
			 	<th scope="col">更新日</th>
			 	<th scope="col">操作</th>
			 </tr>
		</thead>
		<tbody>
			 <% for(Customer cus : customer_list) { %>
			 <tr>
			 	<td><%= cus.getCustomer_id() %></td>
			 	<td><%= cus.getName() %></td>
			 	<td><%= cus.getAddress() %></td>
			 	<td><%= cus.getRegistered_time() %></td>
			 	<td><%= cus.getUpdated_time() %></td>
				<!-- JSTLを使用して顧客IDのデータをリンクの -->
				<!-- パラメーターに設定してサーブレットで取得する -->
			 	<c:url var="update" value="/CustomerUpdateServlet">
			 		<c:param name="id" value="<%= String.valueOf(cus.getCustomer_id()) %>"></c:param>
			 	</c:url>
			 	<td><a href="${update}" >編集</a></td>
			 </tr>
			 <% } %>
		</tbody>
	</table>
	<a href="<%= request.getContextPath() %>/CustomerRegisterServlet">顧客登録画面へ</a>
</div>
</body>
</html>

3行目：使用するタグライブラリの宣言です。

4行目：Stringクラスを使用するための宣言です。

38〜43行目：「<a href=”${update}” >編集</a>」の変数内にURLパラメータを設定しています。「<c:url>と<c:param>」の使い方はこちら



確認すると以下のように「編集」リンクが作成されています。



各顧客の「編集」リンクをクリックするとそれぞれのURLが以下のようになっているかと思います。

顧客ID1の場合


顧客ID2の場合



では、リンクで取得した顧客IDを使用し、顧客情報を取得するメソッドを作成しておきます。このメソッドで取得した顧客情報をもとに「顧客編集画面」で編集する顧客情報（お客様名、住所）を表示させます。

パッケージ名：sql / クラス名：SelectOneCustomer

package sql;

import java.io.FileNotFoundException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import config.DBconfig;
import object.Customer;

public class SelectOneCustomer {

	public Customer get_One_Customer_Info(int customer_id) throws FileNotFoundException {
		// データベースへの接続情報をプロパティファイルから取得
		DBconfig db_info = new DBconfig();
		String url = db_info.getDBinfo().get("url");
		String user = db_info.getDBinfo().get("user");
		String pass = db_info.getDBinfo().get("password");

		// 該当する顧客情報のオブジェクトを作成
		Customer one_customer = new Customer();

		// 実行SQL
		// customer_id（顧客ID）で該当する顧客情報を取得する
		String one_customer_sql = "select * from customer_tb where customer_id = ?;";

		try(Connection conn = DriverManager.getConnection(url,user,pass)){
			PreparedStatement stmt = conn.prepareStatement(one_customer_sql);

			stmt.setInt(1, customer_id);
			ResultSet rs = stmt.executeQuery();

			while(rs.next()) {
				//オブジェクトにデータを一時格納
				one_customer.setCustomer_id(rs.getInt("customer_id"));
				one_customer.setName(rs.getString("name"));
				one_customer.setAddress(rs.getString("address"));
			}
		} catch (SQLException e) {
			System.out.println("データベースとの接続を閉じます");
			e.printStackTrace();
		}
		return one_customer;
	}
}

これで「編集」リンクをクリックした際に、選択された顧客情報のみを取得するメソッドが作成できました。




サーブレットの作成

では更新処理用のサーブレットを作成しておきます。

パッケージ名：servlet / クラス名：CustomerUpdateServlet

package servlet;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import object.Customer;
import sql.SelectOneCustomer;

/**
 * Servlet implementation class CustomerUpdateServlet
 */
@WebServlet("/CustomerUpdateServlet")
public class CustomerUpdateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// 「顧客編集画面」への遷移
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 文字コードの設定
		response.setContentType("text/html; charset=UTF-8");
		request.setCharacterEncoding("UTF-8");

		// 「編集」リンクから顧客IDを取得
		int id = Integer.parseInt(request.getParameter("id"));

		SelectOneCustomer one_customer = new SelectOneCustomer();
		// リンクで選択された顧客情報を取得する
		Customer customer = one_customer.get_One_Customer_Info(id);

		// 遷移先画面に値を渡す
		request.setAttribute("customer", customer);

		RequestDispatcher dispatcher =
				request.getRequestDispatcher("WEB-INF/jsp/customer_update.jsp");
		dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}
}

29行目：「編集」リンクより顧客IDを取得しています。<a>タグはGETメソッドとして処理され、POSTメソッドと同様にrequest.getParameter()で値を取得することが可能です。

33行目：顧客IDを使用して、データベースから顧客情報（お客様名、住所）を取得し、Customerオブジェクトに格納しています。




JSPの作成

では「顧客編集画面」を作成していきます。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="object.Customer" %>
<% Customer customer = (Customer)request.getAttribute("customer"); %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>顧客編集</title>
</head>
<body>
	<div class="mx-auto" style="width: 300px;">
		<h1 class="mb-3" style="text-align: center">顧客編集画面</h1>
		<form action="/CustomerManagement/CustomerUpdateServlet" method="post">
			<input type="hidden" name="id" value="<%= customer.getCustomer_id() %>">
		  <div class="mb-3">
		    <label for="name" class="form-label">お客様名</label>
		    <input type="text" class="form-control" id="name" name="name" value="<%= customer.getName() %>" required>
		  </div>
		  <div class="mb-3">
		    <label for="address" class="form-label">住所</label>
		    <input type="text" class="form-control" id="address" name="address" value="<%= customer.getAddress() %>" required>
		  </div>
		  <button type="submit" class="btn btn-primary">編集する</button>
		</form>
		<a href="#" onclick="window.history.back(); return false;" class="btn btn-primary mt-3">顧客一覧画面へ</a>
	</div>
</body>
</html>

17行目：編集する顧客情報の顧客ID（customer_id）を「<input type=”hidden”>」でブラウザ上に表示させることなく、サーブレットに渡します。顧客ID（customer_id）を使用し、編集（更新）する顧客情報をSQLで指定します。

20,24行目：value=”<%= customer.getName() %>” / value=”<%= customer.getAddress() %>”
編集する顧客情報（お客様名、住所）をあらかじめ表示させます。


ここまでで「顧客一覧画面」の「編集」リンクを押下すると、「顧客編集画面」へ遷移し、編集（更新）する顧客情報が表示されます。

「編集」リンクをクリック



編集する顧客情報が表示



では「顧客編集画面」で入力された値をもとにデータベースにある顧客情報を編集するプログラムを作成します。

パッケージ名：sql / クラス名：Update

package sql;

import java.io.FileNotFoundException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

import config.DBconfig;

public class Update {

	public  void customer_update(String name, String address, int customer_id) throws FileNotFoundException {

		// データベースへの接続情報をプロパティファイルから取得
		DBconfig db_info = new DBconfig();
		String url = db_info.getDBinfo().get("url");
		String user = db_info.getDBinfo().get("user");
		String pass = db_info.getDBinfo().get("password");

		// 実行SQL
		String update_sql = "update customer_tb "
				+ "set name = ?, address = ? where customer_id = ?;";

		// データベースへの接続
		// try〜catch〜resources構文を使用
		try(Connection conn = DriverManager.getConnection(url,user,pass)){
			// オートコミット機能を無効化
			conn.setAutoCommit(false);

			try(PreparedStatement stmt = conn.prepareStatement(update_sql)){
				// 変数update_sqlの一番目の?にnameをセット
				stmt.setString(1, name);
				// 変数update_sqlの二番目の?にaddressをセット
				stmt.setString(2, address);
				// 変数update_sqlの三番目の?にcustomer_idをセット
				stmt.setInt(3, customer_id);
				// SQLの実行
				stmt.executeUpdate();
				//コミット
				conn.commit();
				System.out.println("更新処理が成功しました");
			} catch (SQLException e) {
				conn.rollback();
				System.out.println("ロールバック処理を行いました");
				e.printStackTrace();
			}
		} catch (SQLException e1) {
			e1.printStackTrace();
		}
	}
}

22〜23行目：SQLのUPDATE文を変数にしています。


では作成したcustomer_updateメソッドをCustomerUpdateServlet.javaで使用できるようにし、顧客情報編集（更新）機能を完成させます。

追記箇所：48〜78行目

package servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import object.Admin;
import object.Customer;
import sql.Login;
import sql.SelectOneCustomer;
import sql.Update;

/**
 * Servlet implementation class CustomerUpdateServlet
 */
@WebServlet("/CustomerUpdateServlet")
public class CustomerUpdateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// 「顧客編集画面」への遷移
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 文字コードの設定
		response.setContentType("text/html; charset=UTF-8");
		request.setCharacterEncoding("UTF-8");

		// 「編集」リンクから顧客IDを取得
		int id = Integer.parseInt(request.getParameter("id"));

		SelectOneCustomer one_customer = new SelectOneCustomer();
		// リンクで選択された顧客情報を取得する
		Customer customer = one_customer.get_One_Customer_Info(id);

		// 遷移先画面に値を渡す
		request.setAttribute("customer", customer);

		RequestDispatcher dispatcher =
				request.getRequestDispatcher("WEB-INF/jsp/customer_update.jsp");
		dispatcher.forward(request, response);
	}

	// 顧客編集処理
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 文字コードの設定
		response.setContentType("text/html; charset=UTF-8");
		request.setCharacterEncoding("UTF-8");

		int id = Integer.parseInt(request.getParameter("id"));
		String name = request.getParameter("name");
		String address = request.getParameter("address");

		Update sql = new Update();
		// 顧客情報編集（更新）処理を実行
		sql.customer_update(name, address, id);

		// 管理者のセッションを取得
		HttpSession session = request.getSession(true);
		Admin admin = (Admin) session.getAttribute("admin");

		Login login = new Login();
		List<Customer> customer = null;

		// データベースから取得した顧客情報を格納
		customer = login.getCustomerInfo(String.valueOf(admin.getId()));

		// 格納した顧客情報を遷移先の画面に渡す
		request.setAttribute("customer", customer);

		RequestDispatcher dispatcher =
				request.getRequestDispatcher("WEB-INF/jsp/customer_list.jsp");
		dispatcher.forward(request, response);
	}
}

60行目：顧客情報を更新するメソッド（customer_update）に引数（お客様名、住所、顧客ID）を設定し、更新処理を実行します。

62〜73行目：更新処理後に「顧客一覧画面」に遷移させるので、ログイン成功時と同じように再度、顧客情報を取得しています。

icon
icon


ブラウザ上で確認

これで顧客編集（更新）処理のプログラムは作成できましたので、実際にブラウザ上から顧客情報を新してみましょう。


http://localhost:8080/CustomerManagement/LoginServlet


更新する顧客情報はお任せします。今回は下記のように更新をしていきます。



「編集する」ボタンを押下すると「顧客一覧画面」に遷移し、更新した顧客情報が確認できます。



一応、テーブル内の値も確認しておきます。

更新前
mysql> select * from customer_tb;
+-------------+----------+-----------------+--------------------+---------------------+---------------------+
| customer_id | admin_id | name            | address            | registered_time     | updated_time        |
+-------------+----------+-----------------+--------------------+---------------------+---------------------+
|           1 |        1 | 松藤春治郎      | 北海道札幌市       | 2022-12-11 23:58:22 | 2022-12-11 23:58:22 |
|           2 |        1 | 斉藤隆          | 滋賀県大津市       | 2022-12-18 15:59:52 | 2022-12-18 15:59:52 |
+-------------+----------+-----------------+--------------------+---------------------+---------------------+
2 rows in set (0.00 sec)

更新後
mysql> select * from customer_tb;
+-------------+----------+-----------------+--------------------+---------------------+---------------------+
| customer_id | admin_id | name            | address            | registered_time     | updated_time        |
+-------------+----------+-----------------+--------------------+---------------------+---------------------+
|           1 |        1 | 松藤春治郎      | 北海道札幌市       | 2022-12-11 23:58:22 | 2022-12-11 23:58:22 |
|           2 |        1 | 今川元春        | 兵庫県宍粟市       | 2022-12-18 15:59:52 | 2022-12-26 17:01:02 |
+-------------+----------+-----------------+--------------------+---------------------+---------------------+
2 rows in set (0.01 sec)

mysql>

テーブル内の値も更新されたことを確認できました。

またテーブル内の値を更新すると更新日時（updated_time）が変わっていることを確認してください。これはcustomer_tbを作成した際にオプションで設定しています。

mysql> desc customer_tb;
+-----------------+-------------+------+-----+-------------------+-----------------------------+
| Field           | Type        | Null | Key | Default           | Extra                       |
+-----------------+-------------+------+-----+-------------------+-----------------------------+
| customer_id     | int(11)     | NO   | PRI | NULL              | auto_increment              |
| admin_id        | int(11)     | NO   | MUL | NULL              |                             |
| name            | varchar(20) | NO   |     | NULL              |                             |
| address         | varchar(20) | YES  |     | NULL              |                             |
| registered_time | datetime    | YES  |     | CURRENT_TIMESTAMP |                             |
| updated_time    | datetime    | YES  |     | CURRENT_TIMESTAMP | on update CURRENT_TIMESTAMP |
+-----------------+-------------+------+-----+-------------------+-----------------------------+
6 rows in set (0.03 sec)

mysql>

今回はデータベースに登録された値（顧客情報）をブラウザ上から更新するプログラムを作成していきました。

次回は登録された顧客情報をデータベースから削除するプログラムを作成していきます。

続きはこちら

コメント

タイトルとURLをコピーしました