20211203 게시판과 jsp 마지막

·금요일, 평일의 마지막 & jsp 마지막

-사실 조금 빠듯한 감이 있긴 하지만, 2주에 걸쳐서 jsp로 게시판을 비롯해 로그인, 회원가입, 회원정보 수정 등에 대한 코딩을 했다. 그리고 월요일부터 스프링 다운로드 및 환경변수 세팅, 스프링 수업을 진행한다고 하셨다.

·게시글 수정과 삭제

-우선 view.jsp, 게시글을 보여주는 페이지에서 삭제와 수정을 하기 위해서 버튼 클릭에 대한 기능을 정의했다.

<%
			if(StringUtil.equals(cookieUserId, board.getUserId()))
			{
%>
				//수정 버튼 누르면 수정페이지로
				$("#btnUpdate").on("click",function(){
					document.bbsForm.action = "/board/update.jsp";
					document.bbsForm.submit();
				});
				
				//삭제는 물어보기.
				$("#btnDelete").on("click", function(){
					if(confirm("게시물을 삭제 하시겠습니까?") == true)
					{
						document.bbsForm.action = "/board/delete.jsp";
						document.bbsForm.submit();					
					}
				});
			
<%			
			}

-이미 form 태그의 hidden 타입으로 각각의 값들을 넣어놨기 때문에 굳이 따로 값을 넣어줘서 submit을 할 필요가 없다. 그래서 그냥 action의 경로만 설정해주고, submit만 해주면 된다.

·삭제, DELETE 쿼리문

-수정보다는 삭제가 훨씬 쉽기 때문에 DELETE를 먼저 진행했다. 우선 SQLDeveloper에서 쿼리문을 작성하고 해당 쿼리문을 자바에서 처리하는 코딩을 작성했다.

	//게시물 삭제 메소드
	public int boardDelete(long bbsSeq) 
	{
		int count = 0;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		StringBuilder sql = new StringBuilder();
		
		sql.append("DELETE FROM TBL_BOARD  ");
		sql.append(" WHERE ");
		sql.append(" BBS_SEQ = ? ");

		try 
		{
			conn = DBManager.getConnection();
			pstmt = conn.prepareStatement(sql.toString());
			
			pstmt.setLong(1, bbsSeq);
			
			count = pstmt.executeUpdate();
			
		}
		catch(SQLException e) 
	    {
	    	logger.error("[BoardDao] boardDelete SQLException", e);
	    }
	    finally 
	    {
	    	DBManager.close(pstmt, conn);
	    }

		return count;
	}

-지금까지 진행했던 코드와 크게 다르지 않아서 혼자서 미리 작성해봤고, 별반 다르지 않았다. 그래서 충분히 혼자 작성할 수 있는 내용이라고 생각했다.

	String cookieUserId = CookieUtil.getValue(request, "USER_ID");
	
	boolean bSuccess = false;
	String errorMsg = "";
	
	long bbsSeq = HttpUtil.get(request, "bbsSeq", (long)0);
	
	if(bbsSeq > 0 )
	{
		//제대로 된 경로로 들어옴
		BoardDao boardDao = new BoardDao();
		Board board = boardDao.boardSelect(bbsSeq); //데이터가 있는지 판별하기 위함.
		
		if(board != null)
		{
			//쿠키 아이디 비교를 위해서 boardSelect를 한 것, 아니었으면 count했으면 됐음
			if(StringUtil.equals(cookieUserId, board.getUserId()))
			{
				//쿠키아이디가 게시글 작성한 아이디.
				if(boardDao.boardDelete(bbsSeq) > 0)
				{
					//게시물이 정상적으로 삭제됨
					bSuccess = true;
				}
				else
				{
					errorMsg = "게시물 삭제 중 오류가 발생했습니다.";		
				}
			}
			else
			{
				errorMsg = "사용자가 작성한 게시물이 아닙니다.";
			}
		}
		else
		{
			//게시물이 없음
			errorMsg = "게시물 정보가 올바르지 않습니다.";
			
		}
	}
	else
	{
		bSuccess = false; //필요없는 구문임 사실 이해를 위한 용도
		errorMsg = "게시물 키 값이 올바르지 않습니다.";
	}

-여기서 중요한 부분은, 쿠키아이디와 해당 게시글을 작성한 아이디가 같은지를 꼭 확인해줘야 한다는 점이다. 왜냐하면, 따로 링크만 알고서 해당 페이지로 들어올 가능성도 있기 때문에 그럴 경우 아이디가 같지 않으면 애초에 접근이 안되도록 처리를 해주는 것이다. 사실 boardCountTotal이라는 메소드를 구현해놨고, 해당 메소드를 통하면 bbsSeq의 게시물 번호의 가진 게시물이 존재하는 지 확인이 가능하다. 하지만, boardSelect 메소드를 사용했다. 그 이유는 board.getUserId()와 cookieUserId를 비효해야 하기 때문이다.

·수정, UPDATE 쿼리문

-수정도 비슷한 로직을 거치긴 하지만, 조금 다른 부분이 있다. 보통 수정은 버튼을 누르면 게시글을 작성했던 페이지와 비슷한 페이지로 가서, 기존에 작성한 게시물들이 보여진 상태로 수정을 진행한다. 따라서 수정 페이지 하나, 수정을 실제로 진행하는 보여지지 않는 페이지 하나가 존재한다.

-우선 쿼리문 작성을 해야하기 때문에 쿼리문 부터 작성한다.

	//게시글 수정 
	public int boardUpdate(Board board) 
	{
		//업데이트는 여러 값을 넣어야되니까 보드 객체로 받아야 함. 확장성이 좋으니깐
		int count = 0;
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		StringBuilder sql = new StringBuilder();
		
		sql.append("UPDATE 	TBL_BOARD ");
		sql.append(" SET 	BBS_TITLE = ?, ");
		sql.append(" 		BBS_CONTENT = ? ");
		sql.append(" WHERE 	BBS_SEQ = ? ");

		try 
		{
			int idx = 0;
			conn = DBManager.getConnection();
			pstmt = conn.prepareStatement(sql.toString());
			
			pstmt.setString(++idx, board.getBbsTitle());
			pstmt.setString(++idx, board.getBbsContent());
			pstmt.setLong(++idx, board.getBbsSeq());
			
			count = pstmt.executeUpdate();
		}
		catch(SQLException e) 
		{
			logger.error("[BoardDao] boardUpdate SQLException", e);
		}
		finally 
		{
			DBManager.close(pstmt, conn);
		}
		
		return count;
	}

-처음에는 그냥 DELETE처럼 bbsSeq값만 매개변수로 받으면 되지 않나 생각해봤지만, 더 깊게 생각해보니 수정한 모든 값들을 다시 DB로 넣어줘야 하기 때문에 단순히 bbsSeq로 받으면 처리하기가 굉장히 까다로워진다. 그래서 board객체로 넘기는 것이 훨씬 더 유용하다.

-보여지는 업데이트 페이지에서는 당연히 넘겨받은 bbsSeq를 boardSelect메소드로 넘겨서 해당 게시물의 모든 값들을 board 객체에 넣어줘야 한다. 그리고 해당 board객체의 값들 중, 제목, 이름, 내용을 불러와서 input태그와 textarea에 넣어주어야 한다. 또한, update.jsp에서 수정 여부를 updateProc.jsp로 내용을 보내서 확인을 해야 하기 때문에 넘겨온 각각의 값들을 또 다시 보내줘야 한다. 그래서 hidden 타입에 넘겨받은 각각의 값들을 set해준다. 물론 당연히 예외처리를 전부 해줘야 한다.

long bbsSeq = HttpUtil.get(request, "bbsSeq", (long)0);
	String searchType = HttpUtil.get(request, "searchType", "");
	String searchValue = HttpUtil.get(request, "searchValue", "");
	long curPage = HttpUtil.get(request, "curPage", (long)1);
	
	String cookieUserId = CookieUtil.getValue(request, "USER_ID");
	
	BoardDao boardDao = new BoardDao();
	Board board = boardDao.boardSelect(bbsSeq);
	
	String errorMsg = "";
	
	if(bbsSeq > 0)
	{		
		if(board != null)
		{
			//본인 게시물이 아니면 수정 못함
			if(!StringUtil.equals(cookieUserId, board.getUserId()))
			{
				//쿠키 아이디와 유저 아이디가 같지 않으면 board를 null처리 해줌.
				board = null;	
			}
		}
	}
	else
	{
		errorMsg = "잘못된 접근입니다.";
	}

-스크립트 부분의 jQuery는 다음과 같다.

$(document).ready(function(){
<%
	if(board == null)
	{
%>
		alert("게시물이 존재하지 않습니다.");
		location.href = "/board/list.jsp";
<%
	}
	else
	{
		//board가 null이 아닐 때.
%>
		$("#btnList").on("click", function(){
			document.bbsForm.action = "/board/list.jsp";
			document.bbsForm.submit();
		});
		
		$("#btnUpdate").on("click",function(){
			if($.trim($("#bbsTitle").val()).length <=0)
			{
				alert("제목을 입력하세요.");
				$("#bbsTitle").val("");
				$("#bbsTitle").focus();
				//기존의 값과 비교해서 달라지면 바꿔주도록 처리를 해주기도 함	
				return;
			}
			
			if($.trim($("#bbsContent").val()).length <=0)
			{
				alert("내용을 입력하세요.");
				$("#bbsContent").val("");
				$("#bbsContent").focus();
				return;
			}
			
			document.updateForm.submit();
		});
<%
	}
%>
});

-수정 부분에서 유의할 점은, 수정 역시 글 작성과 비슷하게 내용이 비어있으면 수정이 안되도록 처리를 해줘야 한다.

-updateProc.jsp, 실제로 게시글 수정이 되는지 여부를 확인하고 처리를하는 페이지이다. 사실상 보여줄 게 없기 때문에 굳이 html태그를 쓸 필요가 없어보이지만, 넘어온 searchType, searchValue, curPage, bbsSeq 등을 다시 넘겨줘야 하기 때문에 hidden 타입의 form을 하나 작성해줘야 한다. 물론 이 form에 각각의 값들을 넣어줘야 하기 때문에, 각각의 변수를 정의하고 넘어온 값들을 넣어줘야 한다. 또한 쿠기 아이디와 실제 게시물을 작성한 이의 아이디가 같은지도 확인해야 하기 때문에 쿠키 아이디를 얻어온다.

//쿠키 아이디 값 얻어오기
	String cookieUserId = CookieUtil.getValue(request, "USER_ID");
	
	//성공여부의 변수
	boolean bSuccess = false;
	String errorMsg = "";
	
	//넘어온 각각의 값들 변수에 넣어주기
	long bbsSeq = HttpUtil.get(request, "bbsSeq", (long)0);
	String searchType = HttpUtil.get(request, "searchType", "");
	String searchValue = HttpUtil.get(request, "searchValue", "");
	long curPage = HttpUtil.get(request, "curPage",(long)1);
	
	String bbsTitle = HttpUtil.get(request, "bbsTitle", "");
	String bbsContent = HttpUtil.get(request, "bbsContent", "");
	
	BoardDao boardDao = new BoardDao();
	Board board = boardDao.boardSelect(bbsSeq);
	
	if(bbsSeq > 0 && !StringUtil.isEmpty(bbsTitle) && !StringUtil.isEmpty(bbsContent))
	{
		//각각의 값들이 비어있지 않아야 넣어줄 수 있으니까 값이 있는지 확인
		if(board != null && StringUtil.equals(cookieUserId, board.getUserId()))
		{
			board.setBbsTitle(bbsTitle);
			board.setBbsContent(bbsContent);			
			
			if(boardDao.boardUpdate(board) >0 )
			{
				bSuccess = true;	
			}
			else
			{
				errorMsg = "게시물 수정 중 오류가 발생했습니다.";
			}
		}
		else
		{
			errorMsg = "게시물이 존재하지 않습니다.";	
		}
		
	}
	else
	{
		errorMsg = "게시물 수정 값이 올바르지 않습니다.";	
	}

-다른 예외처리 부분은 전과 비슷한 맥락이다.

$(document).ready(function(){
<% 
	if(bSuccess)
	{
		//정상적인 수정
%>
		alert("수정이 완료되었습니다.");
		document.bbsForm.action = "/board/view.jsp";
		document.bbsForm.submit();
<% 
	}
	else
	{
%>
		alert("<%=errorMsg %>");
		location.href = "/board/list.jsp";
<% 
	}
%>
	
});

-jQuery는 굉장히 간단하지만, 한가지, 만약 수정이 안되거나, 수정을 할 수 없는 아이디이거나 등등의 이유로 수정이 안되었다면, list 페이지로 보내야 하기 때문에 if문으로 상황별 결과를 나눠준다.

·복습 및 팝업 관련 공부

-복습도 열심히 하고 팝업 관련 공부도 열심히 해봤다. 하루동안 열지 않기에 대한 코드를 찾아보고 해당 코드가 어떻게 진행되는지도 하나하나 찾아보며 이해해봤다. 다른 분의 코드라서 따로 올릴 수는 없으니 나중에 직접 해당 코드를 작성하게 되면 올리도록 해야겠다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var cookieData = document.cookie;
            if(cookieData.indexOf("close=Y")<0)
            {
                $("#popUp").show();
            }else
            {
                $("#popUp").hide();
            }
        });

        function popUpExit()
        {
            if($("#input[name=checkPop]").is(":checked") == true)
            {
               setCookie("close", "Y", 1);
               
            }

            $("#popUp").hide();
        }

        function popUpExit2()
        {
            setCookie("close", "Y", 1);
         
            $("#popUp").hide();
        }

        function hidePop()
        {
            $("#popUp").hide();
        }

        function setCookie(name, value, timeEnd)
        {
            var Cdate = new Date();
            Cdate.setTime(Cdate.getTime() + (timeEnd*24*60*60*1000));
            var expiresDay= "expires="+Cdate.toUTCString();
            var tmp = name + "=" + value + "; path=/;"+expiresDay;
            document.cookie = tmp;
            alert(document.cookie);
        }
    </script>
</head>
<body>
    <div name="popUp" id="popUp">
        <img src="../../img/incheon_night.jpg" alt="이미지">
        <a href="javascript:void(0)" onclick="popUpExit2()">오늘 하루 열지않기</a>
        <input type="checkbox" name="checkPop" id="checkPop" onclick="popUpExit()">
        <a href="javascript:void(0)" onclick="hidePop()">창 닫기</a>
    </div>
</body>
</html>

-원래 공부하다가 바로 자려고 했는데, 한번 안보고 작성해보았다.

내일은 스프링으로 인해 많은 사람들이 출석을 한다. 나역시 화요일부터 나가면 되는 한 주지만, 내일은 교수님의 요청으로 학원에 가게 되었다. 그래서 좀만 공부하고 이른 취침을 하려고 한다. 다음주부터 시작되는 스프링 파이팅!!!