１．環境
（１）開発環境
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（ユーザー管理画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<%@ 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（ユーザー登録画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<%@ 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（ユーザー一覧画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<%@ 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（ユーザー変更画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<%@ 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（登録成功確認画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<%@ 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（登録失敗確認画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<%@ 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（削除成功確認画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<%@ 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（削除失敗確認画面）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<%@ 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受信処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
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受信処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
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受信処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
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（データモデル）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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パターン）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
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.