본문 바로가기
JAVA_JSP

초보의 JSP 개발 데이터 수정, 삭제

by old Developer 2020. 11. 13.

이제 등록된 데이터를 수정하고 삭제해보자. 등록할 때 한글이 깨져버렸던 홍길순은 지워야겠다.. ㅠ

1. 목표

 

index.jsp에 데이터를 받을 input태그를 추가 및 수정 버튼을 추가하고 데이터 수정 JSP와 수정을 수행할 JSP, 삭제 JSP를 Update, Delete SQL을 작성하자.

 

- index.jsp 접근

- 아이디를 입력하고 수정버튼을 클릭

- 수정화면으로 이동

- 변경할 데이터를 변경하고 수정 버튼 또는 삭제 버튼 클릭 SQL 실행 완료, 실패 알림 노출

- 알림 확인하면 index.jsp 화면으로 이동

 

2. index.jsp 수정하기

 

여러건의 데이터가 들어가는데 매번 홍길동만 수정되면 좀 구린 것 같다. 

아이디를 받아서 조회하도록 수정하자.

 

소스코드 :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

olDevStudy Hello World!<br/>

<form id="testFrm" name="testFrm" >
	<input type="text" id="mberId" name="mberId" placeholder="아이디 입력">
	<input type="button" onclick="fnPageChange('/userSample.jsp');" value="조회">
	<input type="button" onclick="fnPageChange('/userRegistView.jsp');" value="등록">
	<input type="button" onclick="fnPageChange('/userUpdateView.jsp');" value="수정">
</form>

</body>
<script type="text/javascript">

function fnPageChange(pageUrl) {

	var frm = document.getElementById("testFrm");
	frm.action = pageUrl;
	frm.submit();
}

</script>
</html>

 

소스코드를 보면 추가된 내용은 form태그에 input type="text" 태그를 추가하고 id, name을 mberId로 작성

수정 버튼은 만들어둔 등록태그를 복붙 하고 앞으로 만들어줄  userUpdateView.jsp를 이동 페이지로 지정한 게 끝이다.

 

첫화면에 뭔가 점점 늘어간다.

 

수정하고 실행해보면 아이디를 받을수 있는 input 영역과 수정 버튼이 생성되었다.

저 input은 이제 데이터를 입력받고 입력받은 내용으로 조회할 것이다.

 

3. 수정 화면 만들기 (userUpdateView.jsp)

 

이전에 만들어둔 userSample.jsp를 복사 붙여 넣기하면 파일명을 수정하라고 뜬다. 

파일명을 userUpdateView.jsp로 수정하고 파일을 열어보자.

 

userSample.jsp를 클릭하고 복사 붙여넣기하면 팝업이 하나 뜬다.

 

복사 붙여넣기 하면 팝업이 하나 뜨는데 userUpdateView.jsp로 입력하고 ok 눌러 완료하자.

 

파일명을 입력하고 ok하면 이렇게 생긴다.

 

이제 생성된 파일을 열어서 아래 소스코드처럼 수정하자.

 

소스코드 :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>

<body>
<%

Connection dbConn = null;

try {
	
	String reqMberId = request.getParameter("mberId");
	
	Class.forName("org.mariadb.jdbc.Driver");
	
	dbConn = DriverManager.getConnection(
			"jdbc:mariadb://127.0.0.1:3306/oldev"
			, "olDev"
			, "olDev@1234"
			);
	
	Statement stmt = dbConn.createStatement();
	
	String sqlStr = "";
	
	sqlStr += "SELECT MBER_SN          ";
	sqlStr += "     , MBER_ID          ";
	sqlStr += "     , MBER_PWD         ";
	sqlStr += "     , MBER_NM          ";
	sqlStr += "     , MBER_MOBLPHON    ";
	sqlStr += "     , RM               ";
	sqlStr += "     , REGIST_SN        ";
	sqlStr += "     , REGT_DTTM        ";
	sqlStr += "     , UPDT_SN          ";
	sqlStr += "     , UPDT_DTTM        ";
	sqlStr += "  FROM OD_MBER          ";
	sqlStr += " WHERE MBER_ID = '"+reqMberId+"'";
	
	ResultSet resultSet = stmt.executeQuery(sqlStr);
	
	while(resultSet.next()) {
		String mberSn	= resultSet.getString("MBER_SN");
		String mberId	= resultSet.getString("MBER_ID");
		String mberPwd	= resultSet.getString("MBER_PWD");
		String mberNm	= resultSet.getString("MBER_NM");
%>
<table style="border:1px solid blue;">
	<tr>
		<td style="border:1px solid blue;">회원 일련번호</td>
		<td style="border:1px solid blue;">회원 아이디</td>
		<td style="border:1px solid blue;">회원 비밀번호</td>
		<td style="border:1px solid blue;">회원 이름</td>
	</tr>
	<tr>
		<td style="border:1px solid blue;"><%=mberSn%></td>
		<td style="border:1px solid blue;"><%=mberId%></td>
		<td style="border:1px solid blue;"><%=mberPwd%></td>
		<td style="border:1px solid blue;"><%=mberNm%></td>
	</tr>
</table>
<%
	}		
} catch (SQLException e) {
	e.printStackTrace();
}
%>
</body>

 

userSample.jsp에 이미 만들어두었던 Select SQL의 조회 조건을 MBER_SN = '1' --> MBER_ID = '조회 조건값'으로 수정했고 저 값은 index.jsp에서 입력받은 값을 넣으려고 request.getParameter로 값을 얻어오게 했다.

 

이렇게 수정하면 이전에 MBER_SN = '1'로 고정되어 홍길동만 조회됐었는데 이제는 index.jsp에서 입력받은 아이디에 매핑된 정보를 조회하게 된다. 

 

test2를 입력하고 수정을 클릭해보면 조회 된다.

 

등록 때 입력했던 홍길순의 아이디 test2를 넣고 조회했더니 한글이 왕창 깨진 상태로 잘 조회된다.

이제 조회된 내용을 변경할 수 있도록 태그를 추가하고 버튼도 추가해보자.

 

소스코드 :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>

<body>
<%

Connection dbConn = null;

String mberSn	= "";
String mberId	= "";
String mberPwd	= "";
String mberNm	= "";
String rm		= "";

try {
	
		String reqMberId = request.getParameter("mberId");
		
		Class.forName("org.mariadb.jdbc.Driver");
		
		dbConn = DriverManager.getConnection(
				"jdbc:mariadb://127.0.0.1:3306/oldev"
				, "olDev"
				, "olDev@1234"
				);
		
		Statement stmt = dbConn.createStatement();
		
		String sqlStr = "";
		
		sqlStr += "SELECT MBER_SN          ";
		sqlStr += "     , MBER_ID          ";
		sqlStr += "     , MBER_PWD         ";
		sqlStr += "     , MBER_NM          ";
		sqlStr += "     , MBER_MOBLPHON    ";
		sqlStr += "     , RM               ";
		sqlStr += "     , REGIST_SN        ";
		sqlStr += "     , REGT_DTTM        ";
		sqlStr += "     , UPDT_SN          ";
		sqlStr += "     , UPDT_DTTM        ";
		sqlStr += "  FROM OD_MBER          ";
		sqlStr += " WHERE MBER_ID = '"+reqMberId+"'";
		
		ResultSet resultSet = stmt.executeQuery(sqlStr);
		
		while(resultSet.next()) {
			mberSn	= resultSet.getString("MBER_SN");
			mberId	= resultSet.getString("MBER_ID");
			mberPwd	= resultSet.getString("MBER_PWD");
			mberNm	= resultSet.getString("MBER_NM");
			rm		= resultSet.getString("rm");
		}
		
	} catch (SQLException e) {
		e.printStackTrace();
	}
%>
<form id="updateOrDeleteFrm">
	<table style="border:1px solid blue;">
		<tr>
			<td style="border:1px solid blue;">회원 일련번호</td>
			<td style="border:1px solid blue;">회원 아이디</td>
			<td style="border:1px solid blue;">회원 비밀번호</td>
			<td style="border:1px solid blue;">회원 이름</td>
			<td style="border:1px solid blue;">비고</td>
		</tr>
		<tr>
			<td style="border:1px solid blue;"><input type="hidden" id="mberSn" name="mberSn" value="<%=mberSn%>"><%=mberSn%></td>
			<td style="border:1px solid blue;"><%=mberId%></td>
			<td style="border:1px solid red;"><input type="text" id="mberPwd" name="mberPwd" value="<%=mberPwd%>"></td>
			<td style="border:1px solid red;"><input type="text" id="mberNm" name="mberNm" value="<%=mberNm%>"></td>
			<td style="border:1px solid red;"><input type="text" id="rm" name="rm" value="<%=rm%>"></td>
		</tr>
		<tr>
			<td colspan="5">
				<div align="right">
					<input type="button" onclick="fnUserUpdate('/userUpdate.jsp');" value="수정">
					<input type="button" onclick="fnUserDelete('/userDelete.jsp');" value="삭제">
				</div>
			</td>
		</tr>
	</table>
</form>

<script type="text/javascript">
	
function fnUserUpdate(pageUrl) {
	var frm = document.getElementById("updateOrDeleteFrm");
	frm.action = pageUrl;
	frm.submit();
}

function fnUserDelete(pageUrl) {
	var frm = document.getElementById("updateOrDeleteFrm");
	frm.action = pageUrl;
	frm.submit();
}

</script>
</body>

 

userSample.jsp 조회된 데이터는 변경할 수가 없어서 input type="text" 태그에 value="" 값으로 적용하고 등록과 마찬가지로 실제 update를 수행할 jsp를 지정해주었다. 삭제라는 게 어차피 상세 조회하고 맘에 안 들면 지우는 거니깐 수정 버튼 옆에 삭제 버튼도 추가했다.

 

input 태그 중 type="hidden" 유형이 있는데 이건 감춰두겠단 거임. 화면에 표시하진 않지만 데이터 처리 시 필요한 값을 감춰두고 실제 처리 시에 전달 할 수 있도록 한다고 생각하면 됨.

 

mberSn 값은 hidden처리하였는데 등록 때 언급한것처럼 이녀석 Primary Key(PK)이므로 내가 수정할 데이터를 식별해줄것이니 반드시 update sql에 전달하여 처리 할 수 있도록 하자.

 

위 소스코드를 실행시키면 변경이 가능한 부분은 붉은색 테두리를 적용해 요기는 수정해도 된다는 의미로다가 표시하였다. 

 

수정 가능한 영역은 붉은색이고 버튼도 수정과 삭제가 붙었다.

userUpdate.jsp를 생성하고 Upadate SQL을 작성해보자.

 

4. 진짜 수정하기 (Update SQL 수행)

 

소스코드 :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>

<%

Connection dbConn = null;

try {
	
	String mberSn		= request.getParameter("mberSn");
	String mberPwd		= request.getParameter("mberPwd");
	String mberNm		= request.getParameter("mberNm");
	String rm			= request.getParameter("rm");
	
	Class.forName("org.mariadb.jdbc.Driver");
	
	dbConn = DriverManager.getConnection(
			"jdbc:mariadb://127.0.0.1:3306/oldev"
			, "olDev"
			, "olDev@1234"
			);
	
	Statement stmt = dbConn.createStatement();
	
	String sqlStr = "";
	
	sqlStr += "UPDATE OD_MBER                                           ";
	sqlStr += "   SET MBER_PWD   = '"+mberPwd+"'                        ";
	sqlStr += "     , MBER_NM    = '"+mberNm+"'                         ";
	sqlStr += "     , RM         = '"+rm+"'                             ";
	sqlStr += "     , UPDT_SN    = '"+mberSn+"'                         ";
	sqlStr += "     , UPDT_DTTM  = DATE_FORMAT(NOW(), '%Y%m%d%H%i%s')   ";
	sqlStr += " WHERE MBER_SN    = '"+mberSn+"'                         ";

	int resultNum = stmt.executeUpdate(sqlStr);
	
	if (resultNum < 1) {
%>
	<script type="text/javascript">
		alert("수정에 실패했어요!");
		location.href="/";
	</script>
<%
	} else {
%>
	<script type="text/javascript">
		alert("수정이 완료되었습니다.");
		location.href="/";
	</script>
<%
	}
	
} catch (SQLException e) {
	e.printStackTrace();
}
%>

 

등록때 사용한 그 녀석을 복사 붙여 넣기 해서 userRegist.jsp -> userUpdate.jsp로 파일명 변경하고 update sql을 작성하여 넣었다.

 

수정 화면의 input type="hidden" 값으로 설정된 mberSn은 PK이므로 where 조건으로 설정하고 이 mberSn값을 수정자 칼럼에 설정함.

 

SQL 자체도 기본 문법 그대로이고 데이터도 몇 개 없기 때문에 수정이 되는지 테스트나 해보자.

 

한글이 어차피 깨지니깐 대충 데이터를 넣고 수정해보자.

 

한글 깨지는걸 아직 수정하지 않았으니 대충 넣고 수정을 클릭해보자.

수정이 됐든 안됐든 index.jsp로 이동할 텐데 다시 test2번을 입력하고 조회해보자.

 

update 잘된다. ㅎㅎ

 

수정해봤으니 이제 삭제를 구현해보자.

 

5. 삭제하기 (Delete SQL 수행)

 

삭제를 위한 화면을 보여줄 것은 아니고 수정 즉 상세화면으로 들어오면 삭제 버튼을 통해 삭제 처리하고 index.jsp로 돌아가자.

 

userUpadate.jsp 파일을 복사 붙여 넣고 userDelete.jsp를 만들고 소스코드처럼 SQL을 수정하자.

 

소스코드 :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>

<%

Connection dbConn = null;

try {
	
	String mberSn		= request.getParameter("mberSn");
	String mberPwd		= request.getParameter("mberPwd");
	String mberNm		= request.getParameter("mberNm");
	String rm			= request.getParameter("rm");
	
	Class.forName("org.mariadb.jdbc.Driver");
	
	dbConn = DriverManager.getConnection(
			"jdbc:mariadb://127.0.0.1:3306/oldev"
			, "olDev"
			, "olDev@1234"
			);
	
	Statement stmt = dbConn.createStatement();
	
	String sqlStr = "";
	
	sqlStr += "DELETE FROM OD_MBER				";
	sqlStr += " WHERE MBER_SN    = '"+mberSn+"'	";

	int resultNum = stmt.executeUpdate(sqlStr);
	
	if (resultNum < 1) {
%>
	<script type="text/javascript">
		alert("삭제에 실패했어요!");
		location.href="/";
	</script>
<%
	} else {
%>
	<script type="text/javascript">
		alert("삭제가 완료되었습니다.");
		location.href="/";
	</script>
<%
	}
	
} catch (SQLException e) {
	e.printStackTrace();
}
%>

 

PK칼럼이 MBER_SN이므로 수정과 같이 MBER_SN에 값을 전달하자.

삭제는 뭐 특별히 할 게 없다. 이미 수정 작업 시 PK칼럼 값도 넘기고 있으므로 SQL만 수정하면 될 것 같다.

 

잘되는지 한번 지워보자.

 

삭제 버튼을 클릭해보자.

 

삭제가 완료되었다는 메시지가 보인다. 확인을 누느고 index.jsp에서 홍길순의 아이디 test2를 입력해보자.

 

 

test2로 조회해도 데이터가 없다. 삭제됐으니까 ㅎ

 

test2를 입력하고 조회해도 딱히 조회될 게 없다. 삭제를 했으니깐.. 진짜 지워졌나? 믿음이 안 간다면 HediSql로 확인해보자.

 

테이블을 조회해보면 진짜 홍길동만 남았다 ㅎ

 

이렇게 수정, 삭제는 된 것 같고.. 데이터도 좀 더 넣고 목록을 만들어 선택한 데이터의 상세를 수정하고 삭제도 해볼 수 있도록 만들어야겠다. 뭐 수정, 삭제를 했으니 목표는 달성했으니 ㅎㅎ

 

'JAVA_JSP' 카테고리의 다른 글

초보의 JSP 개발 다듬기  (1) 2020.11.16
초보의 JSP 개발 데이터 등록  (0) 2020.11.12
초보의 JSP 개발 데이터 조회하기  (0) 2020.11.11
초보의 JSP 개발 DB Table 생성  (0) 2020.11.10
초보의 JSP 개발 JSP Servlet 비교  (0) 2020.11.09

관련글

댓글

티스토리툴바