🌱[구디아카데미 IT국비지원]

김희진·2023년 4월 21일

GDJ 66기 - 클라우드 활용 자바 개발자 양성과정

목록 보기

14/25

[구디아카데미 IT국비지원] 다이어리 프로젝트를 이어갔다. 이번에는 수정(update)기능을 추가해보았다.

💡 update 기능 추가

지난 시간에 추가한 수정 a태그를 클릭하면 updateNoticeForm.jsp 페이지로 이동한다.

작성된 데이터 테이블의 속성 중 사용자가 form 페이지에서 사용자가 수정 가능한 부분은 제목인 notice_title와 내용인 notice_content일 것이다.
글번호인 notice_no와 글작성자인 notice_writer은 수정할 수 없고, createdate와 updatedate는 자동으로 부여되는 것이므로 수정시 updatedate만 바뀌면 될 것이다.
notice_pw는 삭제(delete)와 마찬가지로 사용자가 입력한 값과 일치하는지 확인 (where절 사용)하는데 쓰일 것이다.

📌 updateNoticeForm.jsp

📍 작성

<%@ 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.PreparedStatement" %>
<%@ page import = "java.sql.ResultSet" %> <!-- 수정폼도 select 해야하므로 rs 이용 -->
<%
	// 유효성 검사
	// null일 경우 리다이렉션
	// 리턴 // 코드진행종료 // 반환값을 넘길때
	if(request.getParameter("noticeNo") == null) {
		response.sendRedirect("./noticeList.jsp");
		return;
	}
	
	// null이 아닐경우
	// 변수에 값 받기 // int 타입으로 변환
	int noticeNo = Integer.parseInt(request.getParameter("noticeNo"));
	System.out.println("updateNoticeForm noticeNo: " + noticeNo); // 디버깅
	
	// 1) 드라이버로딩
	Class.forName("org.mariadb.jdbc.Driver"); 
	// 2) db서버에 접속
	Connection conn = DriverManager.getConnection(
			"jdbc:mariadb://127.0.0.1:3306/diary","****","****");
	// 3) 쿼리 작성
	// 해당 no에 맞는 페이지 출력 == noticeOne 페이지와 같은 sql
	String sql = "select notice_no, notice_title, notice_content, notice_writer, createdate, updatedate from notice where notice_no = ?";
	PreparedStatement stmt = conn.prepareStatement(sql);
	// 첫번째 ?에 noticeNo 값을 set
	stmt.setInt(1, noticeNo);
	System.out.println("updateNoticeForm sql: " + stmt); // 디버깅
	ResultSet rs = stmt.executeQuery();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>updateNoticeForm.jsp</title>
</head>
<body>
	<div><!-- 메인메뉴 -->
		<a href="./home.jsp">홈으로</a>
		<a href="./noticeList.jsp">공지 리스트</a>
		<a href="./scheduleList.jsp">일정 리스트</a>
	</div>
	
	<h1>공지 수정</h1>
	<div><!-- 에러문구 추가 -->
		<%
			if(request.getParameter("msg") != null) {
		%>
				<%=request.getParameter("msg") %>
		<%
			}
		%>
	</div>
	<form action="./updateNoticeAction.jsp" method="post">
	<%
		if(rs.next()) {
	%>
			<table>
				<tr>
					<!-- 수정불가지만, action페이지에서 where절에 들어가야하므로 (값을 넘겨야하므로) input태그 -->
					<td>notice_no</td>
					<td>
						<input type="number" name="noticeNo" value="<%=rs.getInt("notice_no")%>" readonly="readonly">
					</td>
				</tr>
				<tr>
					<!-- 패스워드입력란, action페이지에서 where절에 들어가야하므로 (값을 넘겨야하므로) input태그 -->
					<td>notice_pw</td>
					<td>
						<input type="password" name="noticePw">
					</td>
				</tr>
				<tr>
					<!-- 수정가능란, input태그 -->
					<td>notice_title</td>
					<td>
						<input type="text" name="noticeTitle" value="<%=rs.getString("notice_title")%>">
					</td>
				</tr>
				<tr>
					<!-- 수정가능란, input태그 -->
					<td>notice_content</td>
					<td>
						<textarea rows="5" cols="80" name="noticeContent"><%=rs.getString("notice_content")%></textarea>
					</td>
				</tr>
				<tr>
					<!-- 수정불가란, 출력만 하기 -->
					<td>notice_writer</td>
					<td>
						<%=rs.getString("notice_writer")%>
					</td>
				</tr>
				<tr>
					<!-- 수정불가란, 출력만 하기 -->
					<td>createdate</td>
					<td>
						<%=rs.getString("createdate")%>
					</td>
				</tr>
				<tr>
					<!-- 수정불가란, 출력만 하기 -->
					<td>updatedate</td>
					<td>
						<%=rs.getString("updatedate")%>
					</td>
				</tr>
			</table>
	<%
		}
	%>
		<div>
			<button type="submit">수정</button>
		</div>
	</form>
</body>
</html>

수정폼은 삭제폼과 다르게 기존의 값을 사용자에게 보여주어야 하므로, select문을 이용해야 한다! 즉, noticeOne 페이지와 거의 비슷 하다.
이번에 에러문구가 출력되도록 하는 기능을 추가적으로 배웠다. action 페이지에서 에러 발생시 msg 값을 가지고 form 페이지로 돌아오게 되는데, msg 발생시 에러문구를 출력할 수 있도록 if문을 작성했다.
수정가능한 부분, 수정이 불가능한 부분, 수정이 불가능하지만 action페이지에 값을 넘겨야하는 부분 등 잘 구분해서 input태그를 작성하거나 단순 출력만 하도록 한다.

📍 결과

notice_no는 수정이 불가능하다. (확인용)
notice_pw는 수정용이 아니라 action 페이지에서 update 실행시 where절에 사용될 값이므로 value를 두지 않고 사용자가 직접 입력하도록 한다.
notice_title과 notice_content는 사용자가 수정하는(update 되는) 곳이므로 수정 전 원래의 값을 보여주고 (value를 주고) 수정이 가능하도록 한다.
그 밖에 수정도 불가능하고 action 페이지에서 쓰이지 않는 값들은 확인용으로 단순 출력만 되도록 했다.

📌 updateNoticeAction.jsp

📍 작성

<%@ 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.PreparedStatement" %>
<%
	// post방식 인코딩처리 // 한글 깨지지 않게
	request.setCharacterEncoding("utf-8");
	
	//유효성 검사 (1)
	// noticNo가 null이면 form페이지로 갈 수 없으므로 list페이지로 리다이렉션
	if(request.getParameter("noticeNo") == null) {
		response.sendRedirect("./noticeList.jsp");
		return; // 코드진행종료
	}

	// 유효성 검사 (2)
	// null 이거나 공백인 것에따라 에러메세지(msg) 분기
	String msg = null;
	if(request.getParameter("noticeTitle") == null
			|| request.getParameter("noticeTitle").equals("")) {
			msg = "noticeTitle is required";
	} else if(request.getParameter("noticeContent") == null
			|| request.getParameter("noticeContent").equals("")) {
			msg = "noticeContent is required";
	} else if(request.getParameter("noticePw") == null
			|| request.getParameter("noticePw").equals("")) {
			msg = "noticePw is required";
	}
	System.out.println("updateNoticeAction msg: " + msg); // 디버깅
	
	// msg 발생 시 수정폼 페이지로 리다이렉션 // msg도 출력되게 하기 위해 같이 넘겨준다
	if(msg != null) {
		response.sendRedirect("./updateNoticeForm.jsp?noticeNo=" + request.getParameter("noticeNo") + "&msg=" + msg);
		return; // 코드진행종료!!!!!!!
	}
	
	// null 이거나 공백이 아닐 경우
	// 값 변수에 받기 (형변환)
	int noticeNo = Integer.parseInt(request.getParameter("noticeNo")); // int타입으로 변환
	String noticePw = request.getParameter("noticePw");
	String noticeTitle = request.getParameter("noticeTitle");
	String noticeContent = request.getParameter("noticeContent");
	
	// 디버깅
	// 어느 페이지의 어떤 디버깅인지도 잘 적어주기
	System.out.println("updateNoticeAction noticeNo: " + noticeNo);
	System.out.println("updateNoticeAction noticePw: " + noticePw);
	System.out.println("updateNoticeAction noticeTitle: " + noticeTitle);
	System.out.println("updateNoticeAction noticeContent: " + noticeContent);
	
	// 1) 드라이버 로딩
	Class.forName("org.mariadb.jdbc.Driver"); 
				
	// 2) mariadb 서버에 접속, 접속 유지
	Connection conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306/diary","****","****");
		
	// 3) 쿼리 생성 후 실행
	// UPDATE notice SET notice_title=? , notice_content=? , updatedate=now() WHERE notice_no=? AND notice_pw=?
	String sql = "UPDATE notice SET notice_title=? , notice_content=? , updatedate=now() WHERE notice_no=? AND notice_pw=?";
	PreparedStatement stmt = conn.prepareStatement(sql);
	// ? 총 4개
	stmt.setString(1, noticeTitle);
	stmt.setString(2, noticeContent);
	stmt.setInt(3, noticeNo); // noticeNo는 int타입
	stmt.setString(4, noticePw);
	System.out.println("updateNoticeAction sql: " + stmt); // 디버깅
	
	// 쿼리가 잘 실행되었는지 확인
	int row = stmt.executeUpdate(); // 수정 성공시 1, 실패시 0
	System.out.println("updateNoticeAction row: " + row);
	
	// 수정 성공 유무에 따라 리다이렉션
	// = 쿼리 실행 결과에 따라 페이지(View)를 분기한다
	if(row == 0) {
		response.sendRedirect("./updateNoticeForm.jsp?noticeNo="
            +request.getParameter("noticeNo")
            +"&msg=incorrect noticePw");
   	} else if(row == 1) {
      response.sendRedirect("./noticeOne.jsp?noticeNo="+noticeNo);
  	} else {
      // update문 실행을 취소(rollback)해야 한다
      System.out.println("error row값 : "+row);
 	}

%>

유효성 검사(1) : noticeNo가 null일 경우를 따로 분기하지 않으면 오류가 발생한다. 왜냐하면 리다이렉션을 "./updateNoticeForm.jsp?noticeNo=" + request.getParameter("noticeNo")" 로 주게되는데 이때, noticeNo가 String타입(문자열)인 "null"로 들어가 form 페이지의 유효성 검사에 걸리지 않게되기 때문이다. 따라서, list 페이지로 정상적으로 갈 수 있도록 해준다.
유효성 검사(2) : 유효성 검사에 걸려 form 페이지로 돌아갈 때, 어떤 값이 null이거나 공백이었는지 사용자에게 알려주는 에러문구(msg)를 줄 수 있도록 if문을 작성했다. 리다이렉션시 msg의 값을 같이 넘겨준다.
update도 마찬가지로 입력된 패스워드의 값에 따라 일치하지 않을 경우(row == 0) 삭제가 실패되는 분기가 생겼다. 이때 페스워드가 일치하지 않는다는 에러문구를 생성하여 같이 넘겨 리다이렉션한다. 정상적으로 수정되었을 경우 (row == 1) 수정된 페이지를 확인할 수 있도록 noticeOne페이지로 리다이렉션.

💡 과제

store페이지에도 직접 update 기능을 추가해보았다. 지난 시간에 추가한 수정 a태그를 클릭하면 updateStoreForm.jsp 페이지로 이동한다.

📌 updateStoreForm.jsp

📍 작성

<%@ 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.PreparedStatement" %>
<%@ page import = "java.sql.ResultSet" %> <!-- select 해야하므로 rs사용 -->
<%
	// 유효성 검사
	// null이거나 공백일 경우 리다이렉션
	if(request.getParameter("storeNo") == null) {
		response.sendRedirect("./storeList.jsp");
		// 돌아갈 주소 알려주기
		return;
		// 코드진행종료 // 반환값을 넘길때
	}

	// null이 아닐 경우 변수에 값 넣기
	int storeNo = Integer.parseInt(request.getParameter("storeNo")); // int타입으로 변환
	// 디버깅
	System.out.println("updateStoreForm storeNo: " + storeNo);
	
	// 1) 드라이버로딩
	Class.forName("org.mariadb.jdbc.Driver");
	// 2) db 서버 연결
	Connection conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306/homework0419","****","****");
	// 3) 쿼리 작성
	// 해당 no에 맞는 페이지 출력, where절 사용
	String sql = "select * from store where store_no=?";
	PreparedStatement stmt = conn.prepareStatement(sql);
	// 첫번째 ?에 storeNo을 set
	stmt.setInt(1, storeNo);
	System.out.println("updateStoreForm sql: " + stmt); // 디버깅
	ResultSet rs = stmt.executeQuery();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>updateStoreForm.jsp</title>
<style>
    .center {text-align: center;}
</style>
<!-- 부트스트랩5 사용 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="center"><!-- 메인메뉴 -->
		<a href="./storeHome.jsp">홈으로</a>
		<a href="./storeList.jsp">리스트로</a>
	</div>
	<h1 class="center">게시글 수정&#127869;</h1>
	<div class="center text-bg-danger" ><!-- action페이지에서 반환된 에러문구 추가 -->
		<%
			if(request.getParameter("msg") != null) {
		%>
				<%=request.getParameter("msg") %>
		<%
			}
		%>
	</div>
	<div class="container mt-3">
	<form action = "./updateStoreAction.jsp" method="post">
		<%
			if(rs.next()) {
		%>
				<table class="table table-bordered">
					<tr><!-- 수정불가, action페이지에서 where절에 사용해야하므로 input태그 -->
						<td>글번호</td>
						<td>
							<input type="number" name="storeNo" value="<%=rs.getInt("store_no")%>" readonly="readonly" class="form-control">
						</td>
					</tr>
					<tr><!-- 패스워드입력란, action페이지에서 where절에 사용해야하므로 input태그 -->
						<td>비밀번호</td>
						<td>
							<input type="password" name="storePw">
						</td>
					</tr>
					<tr><!-- 수정가능란, input태그 -->
						<td>식당이름</td>
						<td>
							<input type="text" name="storeName" value="<%=rs.getString("store_name")%>" class="form-control">
						</td>
					</tr>
					<tr><!-- 수정가능란, input태그 -->
						<td>카테고리</td>
						<td>
							<select name="storeCategory" class="form-select">
								<option value="<%=rs.getString("store_category")%>">
									<%=rs.getString("store_category")%> <!-- 이미 선택한 값 보여주기 -->
								</option>
								<option value="한식">한식</option>
								<option value="일식">일식</option>
								<option value="중식">중식</option>
							</select>
						</td>
					</tr>
					<tr><!-- 수정가능란, input태그 -->
						<td>주소</td>
						<td>
							<input type="text" name="storeAddress" value="<%=rs.getString("store_address")%>" class="form-control">
						</td>
					</tr>
					<tr><!-- 수정가능란, input태그 -->
						<td>점원수</td>
						<td>
							<input type="number" name="storeEmpCnt" value="<%=rs.getInt("store_emp_cnt")%>" class="form-control">
						</td>
					</tr>
					<tr><!-- 수정가능란, input태그 -->
						<td>개업일자</td>
						<td>
							<input type="date" name="storeBegin" value="<%=rs.getString("store_begin")%>" class="form-control">
						</td>
					</tr>
					<tr><!-- 수정불가란, 출력만 하기 -->
						<td>글생성일</td>
						<td><%=rs.getString("createdate").substring(0, 10)%></td>
					</tr>
					<tr><!-- 수정불가란, 출력만 하기 -->
						<td>글수정일</td>
						<td><%=rs.getString("updatedate").substring(0, 10)%></td>
					</tr>
					<tr>
						<td colspan="2">
							<button type="submit" class="btn btn-primary">수정</button>
						</td>
					</tr>
				</table>
		<%
			}
		%>
	</form>
	</div>
</body>
</html>

select 태그를 이용한 부분은 미리 선택한 값을 추가해서 보여주었다. 원래 원했던 부분은 미리 선택한 값을 추가하는 것이 아닌, 한식/일식/중식 중 선택했던 값을 selected 하는 것이었다. 수정폼에서 선택된 값을 중복으로 표시되는 것이 싫었기 때문이다. 😥 이 부분은 더 고민해보고 추후에 수정예정 🤔
(23.04.24 추가) if문 을 활용하면 된다는 것을 알았다!! if문을 이용하면 생각보다 단순하게 해결할 수 있는 문제였다😅 equals 메서드 이용해주는 것 잊지 말기!

<select name="storeCategory" class="form-select"> <!-- 이전에 선택된 값 selected 된 상태로 보여주기 -->
	<option <%if(rs.getString("store_category").equals("한식")){%> selected <%}%>> 한식 </option>
	<option <%if(rs.getString("store_category").equals("일식")){%> selected <%}%>> 일식 </option>
	<option <%if(rs.getString("store_category").equals("중식")){%> selected <%}%>> 중식 </option>
</select>

📍 결과

📌 updateStoreAction.jsp

📍 작성

<%@ 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.PreparedStatement" %>
<%
	// 한글이 깨지지 않게 한다. post방식 인코딩 처리
	request.setCharacterEncoding("utf-8");

	// 유효성 검사 (1)
	// storeNo가 null이면 form페이지로 갈 수 없으므로 list페이지로 리다이렉션
	if(request.getParameter("storeNo") == null) {
		response.sendRedirect("./storeList.jsp");
		return; // 코드진행종료
	}

	// 유효성 검사 (2)
	// null 이거나 공백인 것에따라 에러메세지(msg) 분기
	// storeCategory는 select태그로 option에 null값을 준 것이 없으므로 생략
	String msg = null;
	if(request.getParameter("storeName") == null
			|| request.getParameter("storeName").equals("")) {
		msg = "storeName is required";
	} else if(request.getParameter("storeAddress") == null
			|| request.getParameter("storeAddress").equals("")) {
		msg = "storeAddress is required";
	} else if(request.getParameter("storeEmpCnt") == null
			|| request.getParameter("storeEmpCnt").equals("")) {
		msg = "storeEmpCnt is required";
	} else if(request.getParameter("storeBegin") == null
			|| request.getParameter("storeBegin").equals("")) {
		msg = "storeBegin is required";		
	} else if(request.getParameter("storePw") == null
			|| request.getParameter("storePw").equals("")) {
		msg = "storePw is required";
	}
	// 에러메세지(msg) 디버깅
	System.out.println("updateNoticeAction msg: " + msg);
	
	// msg 발생 시 수정폼 페이지로 리다이렉션 // form페이지에 msg를 출력하기 위해 같이 넘겨준다
	if(msg != null) {
		response.sendRedirect("./updateStoreForm.jsp?storeNo=" + request.getParameter("storeNo") + "&msg=" + msg);
		return; // 코드진행종료 꼭 해주기!
	}
	
	// null 이거나 공백이 아닐 경우
	// 변수에 값 넣기 (형변환)
	int storeNo = Integer.parseInt(request.getParameter("storeNo")); // int타입으로 변환
	String storeName = request.getParameter("storeName");
	String storeCategory = request.getParameter("storeCategory");
	String storeAddress = request.getParameter("storeAddress");
	int storeEmpCnt = Integer.parseInt(request.getParameter("storeEmpCnt")); // int타입으로 변환
	String storeBegin = request.getParameter("storeBegin");
	String storePw = request.getParameter("storePw");
	
	// 값이 정상적으로 넘어왔는지 디버깅
	System.out.println("updateStoreAction storeNo: " + storeNo);
	System.out.println("updateStoreAction storeName: " + storeName);
	System.out.println("updateStoreAction storeCategory: " + storeCategory);
	System.out.println("updateStoreAction storeAddress: " + storeAddress);
	System.out.println("updateStoreAction storeEmpCnt: " + storeEmpCnt);
	System.out.println("updateStoreAction storeBegin: " + storeBegin);
	System.out.println("updateStoreAction storePw: " + storePw);
	
	// 1) 드라이버 로딩
	Class.forName("org.mariadb.jdbc.Driver"); 
	// 2) mariadb 서버에 접속, 접속 유지
	Connection conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306/homework0419","****","****");
	// 3) 쿼리 작성
	// update할 내용: storeName, storeCategory, storeAddress, storeEmpCnt, storeBegin, updatedate
	// where에 들어갈 내용: storeNo, storePw
	// UPDATE store SET store_name=?, store_category=?, store_address=?, store_emp_cnt=?, store_begin=?, updatedate=now() WHERE store_no=? AND store_pw=?
	String sql = "UPDATE store SET store_name=?, store_category=?, store_address=?, store_emp_cnt=?, store_begin=?, updatedate=now() WHERE store_no=? AND store_pw=?";
	PreparedStatement stmt = conn.prepareStatement(sql);
	// 물음표 총 7개 (1~7)
	stmt.setString(1, storeName);
	stmt.setString(2, storeCategory);
	stmt.setString(3, storeAddress);
	stmt.setInt(4, storeEmpCnt);
	stmt.setString(5, storeBegin);
	stmt.setInt(6, storeNo);
	stmt.setString(7, storePw);
	// sql이 잘 작성되었는지 디버깅
	System.out.println("updateStoreAction sql: " + stmt);
	
	// 쿼리가 잘 실행되었는지 확인
	int row = stmt.executeUpdate(); // 성공시 1, 실패시 0
	System.out.println("updateStoreAction row: " + row);
	
	// if문으로 수정 성공 유무에 따라 보여줄 페이지(view)를 분기
	if(row == 0) { // 패스워드가 일치하지 않아서 수정 실패 // 패스워드가 공백이거나 null인 경우는 유효성 검사에서 걸러지므로 
		msg = "incorrect noticePw";
		response.sendRedirect("./updateStoreForm.jsp?storeNo=" + storeNo +"&msg=" + msg);
		// 수정폼으로 리다이렉션 // 패스워드가 일치하지 않았다는 msg를 같이 보내준다
	} else if(row == 1) { // 정상적으로 수정 완료
		response.sendRedirect("./storeOne.jsp?storeNo=" + storeNo);
		// 수정된 게시글 확인을 위해 상세 페이지로 리다이렉션
	}
%>

📍 결과
msg 발생시 form 페이지

🧐 하루를 마치며

오늘은 수정기능을 추가하는 방법만 배웠지만, 추가적으로 더 세밀하게 리다이렉션을 분기하는 방법과 msg를 출력하는 것 등 조금더 디테일한 구현을 할 수 있었다. select 태그를 사용했을시에 form 페이지에서 선택한 값이 selected된 상태로 출력이 가능한 방법이 있을지 더 찾아봐야겠다! 🤔

김희진

하루 한걸음씩💪 초보 개발자 도전기 🌱💻

이전 포스트