JavaサーブレットとJSPファイルを使ったCRUDアプリケーションの作成

投稿者:RegionCellLabo

１．環境
（１）開発環境
OS: Windows 10 Pro
IDE：Eclipse IDE for Enterprise Java Developers Version: 2020-12 (4.18.0)
Java version:11.0.9、Tomcat v8.0
（２）データベース
XAMPPのmysql
mysql Ver 15.1 Distrib 10.4.17-MariaDB, for Win64 (AMD64)

２．アプリケーションの概要

　データベースに対して、ユーザー名の登録、参照、更新、削除を行う。

３．設計
（１）CRUD表

（２）ER図

（３）クラス図

（４）シーケンス図

４．実装
（１）プロジェクトフォルダ作成
ファイル＞新規＞その他を選択し、「動的Webプロジェクト」を選択

（２）mysqlドライバーのビルドパスを設定
　プロジェクトフォルダのWebContent/WEB-INF/libに
MysqlコネクタMysql-connector-java-8.0.12.jarをダウンロードし保存する。
https://dev.mysql.com/downloads/connector/j/
　プロジェクトを選択してマウス右ボタンで「ビルド・パス」＞「ビルド・パスの構成」を選択して、「javaのビルドパス」の画面を表示する。（下図）
「JARの追加」を選択し、「JARの選択」画面で、WebContent/WEB-INF/lib配下の「Mysql-connector-java-8.0.12.jar」を選択して、適用する。

（３）ソースファイル
Index.jsp（ユーザー管理画面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メニュー</title>
</head>
<body>
<h2>【ユーザー管理】</h2>
<a href="/Crud_sample/view/UserReghist.jsp">『ユーザー登録』</a><br>
<a href="/Crud_sample/UserCnt2">『ユーザー一覧』</a>
</body>
</html>


UserReghist.jsp（ユーザー登録画面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>登録</title>
</head>
<body>
	<h2>【ユーザー登録】</h2>
	<form action="/Crud_sample/UserCnt" method="post">
		名前：<input type="text" name="user_name"><br>
		<input type="submit" value="登録">
		<a href="/Crud_sample/index.jsp">戻る</a>
	</form>
</body>
</html>


UserList.jsp（ユーザー一覧画面）

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

<%@ page import="model.UserModel,java.util.ArrayList,java.util.Iterator" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ユーザー一覧画面</title>
	<style type="text/css">
	/* 基本のテーブル定義 */
	.t {border:1px solid   #000000;border-collapse:collapse;table-layout:fixed;font-size:16px}
	.t td{border:1px solid #000000;height:16px;}
	.t th{border:1px solid #000000;font-size:16px}
	.t th{background-color:#FFBB88;color:#000000;}
	.t tr:nth-child(odd)  td{background-color:#C8C8E8;color:#000000;}
	.t tr:nth-child(even) td{background-color:#E8E8FF;color:#000000;}
	.t1{width:550px;}
	.t2{width:50px}
	.fixed{position: sticky;
		 top: 0;}
	#data {
	   overflow-x:scroll;overflow-y:scroll;
	   width:700px;height:245px;
	   }
	</style>
</head>
<body>
	<h2>【ユーザー一覧】</h2>
	<form action="/Crud_sample/UserCnt2" method="post" >
		<div id="data">
		<table class=t>
			<tr>
				<th class="t1 fixed">名前</th>
				<th class="t2 fixed">ボタン</th>
				<th class="t2 fixed">ボタン</th>
				<th class="t2 fixed">ID</th>
			</tr>
			<%
			//リクエストスコープからインスタンスを取得。
			ArrayList<UserModel> user_s=(ArrayList<UserModel>)request.getAttribute("userlist");
			//インスタンスがNULLでないとき、イテレータで１件づつ取り出す
			if(user_s!=null){
				Iterator<UserModel> iterator = user_s.iterator();
				while(iterator.hasNext()){
					 UserModel user = (UserModel)iterator.next();
					int uid=user.getUser_id();
			%>
				<tr>
				<td class="t1"><%=user.getUser_name() %></td>
				<td><button type="submit" name="ref" class="t2" value=<%=uid %> >変更</button></td>
				<td><button type="submit" name="del" class="t2" value=<%=uid %> >削除</button></td>
				<td class="t2"><%=user.getUser_id() %></td>
				</tr>
			<%
				}
			}
			%>
			</table>
		</div>
		<a href="/Crud_sample/index.jsp">戻る</a>
	</form>
</body>
</html>


UserUpdate.jsp（ユーザー変更画面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="model.UserModel" %>
<%
//リクエストスコープからオブジェクト取得
UserModel user_m=(UserModel)request.getAttribute("user_m");
int id=user_m.getUser_id();
String user_name=user_m.getUser_name();
%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ユーザー変更</title>
</head>
<body>
	<h2>【ユーザー変更】</h2>
	<form action="/Crud_sample/UserCnt3" method="post">
		id:<%=id %>
		<input type="hidden" name="user_id" value=<%=id %>><br>
		名前：<input type="text" name="user_name" value=<%=user_name %>><br>
		<input type="submit" value="登録">
		<a href="/Crud_sample/index.jsp">戻る</a>
	</form>
</body>
</html>


OK.jsp（登録成功確認画面）

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

<%@ page import="model.UserModel" %>
<%
//リクエストスコープからオブジェクト取得
UserModel user_m=(UserModel)request.getAttribute("user_m");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>登録確認画面</title>
</head>
<body>
	<h2>【登録確認】</h2>
	<%=user_m.getUser_name() %> さん登録しました<br>
	<a href="/Crud_sample/index.jsp">確認</a>
</body>
</html>


NG.jsp（登録失敗確認画面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>登録確認画面</title>
</head>
<body>
	<h2>【登録確認】</h2>
	登録に失敗しました<br>
	<a href="/Crud_sample/index.jsp">確認</a>
</body>
</html>


DelOK.jsp（削除成功確認画面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="model.UserModel" %>
<%
//リクエストスコープからオブジェクト取得
UserModel user_m=(UserModel)request.getAttribute("user_m");
%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>削除確認画面</title>
</head>
<body>
	<h2>【削除確認】</h2>
	user_id:<%=user_m.getUser_id() %> さん削除しました<br>
	<a href="/Crud_sample/index.jsp">確認</a>
</body>
</html>


DelNG.jsp（削除失敗確認画面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>削除確認画面</title>
</head>
<body>
	<h2>【削除確認】</h2>
	削除に失敗しました<br>
	<a href="/Crud_sample/index.jsp">確認</a>
</body>
</html>


UserCnt.java（コントローラ）
「ユーザー登録画面」からのpost受信処理

package controller;

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 model.UserModel;
import model.UserRegist;

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

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserCnt() {
        super();
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//リクエストパラメータの文字コードを指定
	    request.setCharacterEncoding("UTF-8");
	    //リクエストパラメータの取得
	    String user_name=request.getParameter("user_name");
	    System.out.println("user_name："+user_name);
	    //Modelオブジェクト作成
	    UserModel user_m=new UserModel();
	    user_m.setUser_name(user_name);
	    //DAOのメソッドを使いDBに登録
	    UserRegist u=new UserRegist();
	    boolean res=u.user_create(user_m);
	    //リクエストスコープに保存（ユーザ名を表示するため）
	    request.setAttribute("user_m", user_m);
	    //DBへの保存結果でＯＫ、又はＮＧのポップアップ表示
	    if(res==true) {
	    	//ＯＫ画面へフォワード
	    	 RequestDispatcher dispatcher=request.getRequestDispatcher("/view/OK.jsp");
		      dispatcher.forward(request, response);
	    }else {
	    	//ＮＧ画面へフォワード
	    	 RequestDispatcher dispatcher=request.getRequestDispatcher("/view/NG.jsp");
		      dispatcher.forward(request, response);
	    }
	}
}


UserCnt2.java（コントローラ）
「ユーザー管理画面」からのget受信処理
「ユーザー一覧画面」からのpost受信処理

package controller;

import java.io.IOException;
import java.util.ArrayList;
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 model.UserModel;
import model.UserRegist;

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

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserCnt2() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//DAOのインスタンス作成
		UserRegist s=new UserRegist();
		//DBの参照結果のArrayListオブジェクト作成
		ArrayList<UserModel> userlist=s.user_listget();
        //DBの参照結果をリクエストスコープに保存
        request.setAttribute("userlist", userlist);
  	    //ユーザー一覧画面にフォワード
  		RequestDispatcher dispatcher=request.getRequestDispatcher("/view/UserList.jsp");
        dispatcher.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
	    //リクエストパラメータの文字コードを指定
	    request.setCharacterEncoding("UTF-8");
	    //リクエストパラメータの取得
	    String button1=request.getParameter("ref");
	    String button2=request.getParameter("del");
	    //変更釦、又は削除釦の処理
	    if(button1==null && button2==null) {
	    	System.out.println("変更釦、削除釦の対象：NULL");
	    }else {
		    if(button1==null){
		    	System.out.println("変更釦の対象：NULL");
		    }else{
		    	System.out.println("変更釦の対象id："+button1);
				UserRegist s=new UserRegist();
				int key=Integer.parseInt(button1);
				UserModel user_m=s.ref(key);//戻り値
				System.out.println("戻り値："+user_m);
				System.out.println(user_m.getUser_id());
		      	System.out.println(user_m.getUser_name());

			      //リクエストスコープに保存
				  request.setAttribute("user_m", user_m);
			      //変更画面にフォワードする
			      RequestDispatcher dispatcher=request.getRequestDispatcher("/view/UserUpdate.jsp");
			      dispatcher.forward(request, response);
		    }

		    if(button2==null){
		    	System.out.println("削除釦の対象：NULL");
		    }else{
		    	System.out.println("削除釦の対象id："+button2);

		   	//指定されたレコードの削除
		    	UserRegist s=new UserRegist();
		    	int key=Integer.parseInt(button2);

		    	//レコード削除メソッド
				boolean res=s.user_del(key);//戻り値boolean

				UserModel user_m=new UserModel();
				user_m.setUser_id(key);
				if(res==true) {
					//削除処理成功画面にフォワードする
					request.setAttribute("user_m", user_m);
				    RequestDispatcher dispatcher=request.getRequestDispatcher("/view/DelOK.jsp");
				    dispatcher.forward(request, response);
				}else {
					System.out.println("レコードの削除失敗");
					//削除処理失敗画面にフォワードする
				    RequestDispatcher dispatcher=request.getRequestDispatcher("/view/DelNG.jsp");
				    dispatcher.forward(request, response);
				}
		    }
	    }
	}
}

UserCnt3.java（コントローラ）
「ユーザー変更画面」からのpost受信処理

package controller;

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 model.UserModel;
import model.UserRegist;

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

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserCnt3() {
        super();
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//リクエストパラメータの文字コードを指定
	    request.setCharacterEncoding("UTF-8");
	    //リクエストパラメータの取得
	    String user_id=request.getParameter("user_id");
	    String user_name=request.getParameter("user_name");
	    //UserModelクラスのインスタンスに保存
	    UserModel user_m=new UserModel();
	    int id = Integer.parseInt(user_id);
	    user_m.setUser_id(id);
	    user_m.setUser_name(user_name);
	    //InfoRegistクラスのメソッドにDBに保存する値を値参照渡し
	    UserRegist u=new UserRegist();
	    boolean res=u.user_update(user_m);
	    //リクエストスコープに保存
	    request.setAttribute("user_m", user_m);
	    //DBに保存ＯＫ、又はＮＧのポップアップ表示
	    if(res==true) {
	    	//ＯＫ画面へフォワード
	    	 RequestDispatcher dispatcher=request.getRequestDispatcher("/view/OK.jsp");
		      dispatcher.forward(request, response);
	    }else {
	    	//ＮＧ画面へフォワード
	    	 RequestDispatcher dispatcher=request.getRequestDispatcher("/view/NG.jsp");
		      dispatcher.forward(request, response);
	    }
	}
}

UserModel.java（データモデル）

package model;

import java.io.Serializable;

public class UserModel implements Serializable {
	private int user_id;
	private String user_name;
	//コンストラクタ
	public UserModel(int user_id, String user_name) {
		super();
		this.user_id = user_id;
		this.user_name = user_name;
	}
	public UserModel(String user_name) {
		super();
		this.user_name = user_name;
	}
	public UserModel() {
		super();
	}
	//ゲッターセッター
	public int getUser_id() {
		return user_id;
	}
	public void setUser_id(int user_id) {
		this.user_id = user_id;
	}
	public String getUser_name() {
		return user_name;
	}
	public void setUser_name(String user_name) {
		this.user_name = user_name;
	}
}


UserRegist.java（DAOパターン）

package model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;

public class UserRegist {
    static final String URL ="jdbc:mysql://localhost:3306/crud_sample?characterEncoding=UTF-8&serverTimezone=JST";
	static final String USERNAME ="root";
	static final String PASSWORD ="";

	public boolean user_create(UserModel user_m) {
	    try {
	        // MySQLのドライバを指定
	    	Class.forName("com.mysql.cj.jdbc.Driver");
            // MySQLデータベースに接続 (DB名,ID,パスワードを指定)
	    	Connection connection = DriverManager.getConnection(URL, USERNAME,PASSWORD);
	    	System.out.println("DB接続OK");
			String str1=user_m.getUser_name();
            // ステートメントを作成
            Statement stmt = connection.createStatement();
            String str="INSERT INTO tbl_user(user_name) VALUES('" + str1 + "')";
            //sql実行
            stmt.executeUpdate(str);
            // ステートメントをクローズ
            stmt.close();
            // 接続をクローズ
            connection.close();
        }
        catch (Exception e) {
            e.printStackTrace();
            return false;
        }
	    return true;
		}

	public  ArrayList<UserModel> user_listget() {
		//DBに登録してある一覧を検索して、List<String>に保存する
		int id=0;
		String user_name="";
        ArrayList<UserModel> userlist = new ArrayList<UserModel>();
        try {
	        //MySQLのドライバを指定
	    	Class.forName("com.mysql.cj.jdbc.Driver");
            // MySQLデータベースに接続 (DB名,ID,パスワードを指定)
            Connection connection = DriverManager.getConnection(URL, USERNAME,PASSWORD);
            System.out.println("DB接続OK");
            //ＤＢに登録したデータから一覧の項目を取得する
			String sql="SELECT user_id,user_name FROM tbl_user";
            PreparedStatement pstmt=connection.prepareStatement(sql);
            ResultSet rs=pstmt.executeQuery();
            while(rs.next()) {
            	id=rs.getInt("user_id");
            	user_name=rs.getString("user_name");
            	//DBから取得したデータをリストに保存
        	    UserModel user_m=new UserModel(id,user_name);
        	    userlist.add(user_m);//※java.lang.NullPointerExceptionが発生
            }
            // ステートメントをクローズ
			rs.close();
            // 接続をクローズ
            connection.close();
	    }
        catch (Exception e) {
            e.printStackTrace();
        }
	   	return userlist;
	}


	//指定された１レコードを取得
	public UserModel ref(int key_id) {
		//DBを検索して、該当する１レコードをインスタンスに保存する
		UserModel user_m=new UserModel();
		int id=0;//
		String user_name="";
        try {
	        //MySQLのドライバを指定
	    	Class.forName("com.mysql.cj.jdbc.Driver");
            // MySQLデータベースに接続 (DB名,ID,パスワードを指定)
            Connection connection = DriverManager.getConnection(URL, USERNAME,PASSWORD);
            System.out.println("DB接続OK");
            //ＤＢに登録したデータから一覧の項目を取得する
 			String sql="SELECT * FROM tbl_user WHERE user_id=?";
			PreparedStatement pstmt=connection.prepareStatement(sql);
			//key_idをintからStringに変換
			String key_ids=String.valueOf(key_id);
			pstmt.setString(1,key_ids);
			ResultSet rs=pstmt.executeQuery();
			rs.next();//これが必要
			id=rs.getInt("user_id");
			System.out.println("id"+id);
            user_name=rs.getString("user_name");
            user_m.setUser_id(id);
            user_m.setUser_name(user_name);
            // ステートメントをクローズ
			rs.close();
            // 接続をクローズ
            connection.close();
	    }
        catch (Exception e) {
            e.printStackTrace();
        }
        return user_m;
	}

	public boolean user_update(UserModel user_m) {
	    try {
	        //MySQLのドライバを指定
	    	Class.forName("com.mysql.cj.jdbc.Driver");
            // MySQLデータベースに接続 (DB名,ID,パスワードを指定)
	    	System.out.println("DB接続開始");
	    	Connection connection = DriverManager.getConnection(URL, USERNAME,PASSWORD);
	    	System.out.println("DB接続OK");
			String str1=user_m.getUser_name();
			int id=user_m.getUser_id();
            String sql="UPDATE tbl_user SET user_name=? WHERE user_id=?";
            PreparedStatement pstmt=connection.prepareStatement(sql);
            //key_idをintからStringに変換
			String key_ids=String.valueOf(id);
			pstmt.setString(1, str1);
			pstmt.setString(2, key_ids);
			pstmt.executeUpdate();
            // ステートメントをクローズ
            pstmt.close();
            // 接続をクローズ
            connection.close();
        }
        catch (Exception e) {
            e.printStackTrace();
            return false;
        }
	    return true;
		}

		//指定された１レコードを削除
		public boolean user_del(int key_id) {
		    try {
		        // 先程インストールしたMySQLのドライバを指定
		    	Class.forName("com.mysql.cj.jdbc.Driver");
		        // MySQLデータベースに接続 (DB名,ID,パスワードを指定)
		        Connection connection = DriverManager.getConnection(URL, USERNAME,PASSWORD);
		        System.out.println("DB接続OK");
		        //ＤＢに登録したデータから一覧の項目を取得する
				//String sql="DELETE FROM tbl_info_sum WHERE id=?";
				String sql="DELETE FROM tbl_user WHERE user_id=?";//削除フラグの追加
				PreparedStatement pstmt=connection.prepareStatement(sql);
				//key_idをintからStringに変換
				String key_ids=String.valueOf(key_id);
				pstmt.setString(1,key_ids);
		        int line=pstmt.executeUpdate();
		        System.out.println("id="+key_ids+"を"+line+"行削除しました");
		    }catch (Exception e) {
		        e.printStackTrace();
		        return false;
	        }
		    return true;
		}
}

（４）データベースとテーブル作成
データベース作成
・データベースの作成
CREATE DATABASE crud_sample;
・DB接続
USE crud_sample;

・テーブル作成CREATE TABLE tbl_user(user_id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,user_name VARCHAR(100));

５．実行

（１）XAMPPのMySQLサーバを起動する

（２）アプリケーションを選択して、実行ボタン▷を押す

（３）ブラウザからWebサーバに接続http://localhost:8080/Crud_sample/

「ユーザー登録」ボタン押下

名前：テストネームを入力し、「登録」ボタン押下

「ユーザー管理」画面で「ユーザー一覧」ボタン押下

ID:47の「変更」ボタン押下

ID:47の「削除」ボタン押下

The subject ends herewith.