본문으로 바로가기

[JSP개발] 게시판 - 방명록 수정

category 코딩/JSP 2017. 1. 1. 15:39







1. 개요





 난 포스팅 :  [JSP개발] 게시판 - 방명록 삭제



방명록의 마지막 작업으로 방명록 수정을 구현할 것이다. 방명록의 경우 게시판과 달리 로그인하지 않은 사람도 작성이 가능하게 되어있다. 그래서 수정의 경우 수정 전 일단 비밀번호를 체크하도록 한다. 비밀번호가 일치하면 방명록 수정이 가능하게 한다.


비밀번호 확인 부분은 지난번 방명록 삭제와 마찬가지로 Ajax를 이용하여 구현할 것이다.



 JSP

  • GuestbookForm.jsp : 방명록 화면에는 수정 클릭 시 수정 창을 open 하는 코드를 추가한다.

  • GuestbookUpdateForm.jsp : 방명록 수정 창이다. 수정창이 open 되면 비밀번호를 입력하는 화면이 나오고, 올바른 비밀번호 입력 시 수정 화면으로 전환된다.


 Java

  • GuestbookUpdateFormAction.java : 수정 화면을 표시하는 Action이다.

  • GuestbookPwCheckAction.java : 수정 시 비밀번호를 체크하는 Action이다.

  • GuestbookUpdateAction.java :  방명록 수정을 처리하는 Action이다.

  • GuestbookDAO.java : DAO에는 방명록 수정 메서드를 추가한다.




2. 소스 코드



■ GuestbookForm.jsp




[수정] 클릭 시 수정 창이 나타나게 하는 함수이다. 답글 창과 마찬가지로 부모창(방명록) → 자식창(삭제 창) → 부모창(방명록) 이런 순서로 동작하도록 하였다. 




[수정] 클릭 시 이벤트와 함수를 추가한다. 





■ GuestbookUpdateFormAction.java




여기에서는 수정 창을 띄우기 전 먼저 수정할 글의 정보를 가져오는 작업을 한다. GuestbookForm에서 넘겨받은 방명록 글 번호를 이용하여 DB에서 글의 정보를 가져온다.




방명록 정보와 페이지 번호를 request에 세팅하고, 수정 창을 다음 경로로 지정한다.





■ GuestbookUpdateForm.jsp




방명록 수정 화면의 경우 먼저 html 부분을 살펴보자. 크게 2개의 부분으로 나누어져 있는데 첫 번째가 비밀번호를 입력하는 부분이다. 수정 화면이 나타나면 먼저 비밀번호를 입력하게 한다. 


그리고 GuestbookUpdateFormAction에서 전달받은 방명록 정보에서 방명록 글 번호를 hidden으로 세팅한다. 글 번호는 비밀번호 확인 시 필요한 정보이지만 화면에 보여줄 필요가 없기에 hidden으로 처리한다.




두 번째 부분은 방명록 수정 부분이다. 이 부분은 처음에는 보여줄 필요가 없으므로 CSS에서 display:none을 적용하여 화면에 보이지 않게 하였다. 비밀번호가 일치하면 수정 화면이 나타난다.


148 ~ 158 줄을 보면 이름을 수정하는 부분인데, 두 가지로 처리하였다. 일단 로그인한 경우(아이디가 있는 사용자의 경우)는 자신의 아이디가 방명록의 이름으로 입력되기 때문에 수정 불가하게 하였다. 그리고 회원가입이 안된 사용자의 경우는 방명록 수정 시 이름도 수정할 수 있게 하였다.




다음으로 스크립트 부분을 보자. 비밀번호 확인시에는 Ajax를 사용하는데 지난 방명록 삭제 포스팅과 똑같이 처리하였다. 먼저 스크립트의 첫 부분은 XMLHttpRequest 객체를 생성하는 함수이다.


객체의 생성은 브라우저에 따라 달리 처리를 한다.




checkValue( )는 비밀번호 입력 후 확인을 누르면 실행되는 부분이다. 먼저 비밀번호가 입력되었는지를 검사하고, 비밀번호가 입력되었다면 Ajax를 이용하여 GuestbookPwCheckAction(서버 측)으로 비밀번호와 방명록 글 번호를 전달한다. 


GuestbookPwCheckAction에서는 비밀번호를 확인하여 결과값을 GuestbookUpdateForm으로 전달한다.



XMLHttpRequest의 상태변화에 checkValue( )가 호출이 된다.  지금은 서버에서 정상적으로 데이터를 받았을 경우만 작업을 수행하도록 하였다. GuestbookPwCheckAction에서 0을 받았다면 비밀번호가 일치하지 않는 경우이므로 비밀번호가 틀리다는 경고 창을 띄운다.


그리고 1을 받았다면 비밀번호가 일치하는 것이므로 수정 화면을 띄운다. 비밀번호 입력 부분인 <div id="pwCheckForm">은 display 속성을 none으로 변경하여 화면에서 보이지 않게 한다. 그리고 수정 부분인 <div id="writeUpdateForm">의 display 속성을 block으로 변경하여 화면에 보이도록 한다.




수정 부분에서 수정 버튼을 클릭 시 실행되는 부분이다. 수정 화면에서 이름과 내용을 입력하였는지 검사를 하고, 모두 입력을 했으면 그 값을 서버로 전달한다. 그 후 현재 수정 창을 닫는다.





■ GuestbookPwCheckAction.java




GuestbookPwCheckAction는 수정 화면에서 넘겨받은 비밀번호와 방명록 글 번호를 이용하여 비밀번호를 검사하는 작업을 한다. 입력받은 글 번호를 DAO에 전달하여 해당 글의 비밀번호를 가져온다.




그리고 입력된 비밀번호와 DB에 저장된 비밀번호를 비교하여 그 결과 값을 전달한다.




■ GuestbookUpdateAction.java




GuestbookUpdateAction에서는 방명록 글 번호 및 수정할 정보를 가져온다. 그것을 GustbookBean에 세팅한다.




방명록 정보를 담고 있는 GustbookBean을 DAO에 전달하여 방명록 수정을 한다. 수정이 정상적으로 처리되면 방명록 화면으로 돌아가도록 한다.





■ GuestbookDAO.java




DAO에는 방명록 수정 메서드를 추가한다. 





■ GuestbookCommand.properties


프로퍼티에는 방명록 수정 관련 명령어를 추가한다.





3. 실행 결과





방명록5를 수정할 것이다.





수정창이 뜨면 먼저 비밀번호를 입력하는 부분이 나온다.





올바른 비밀번호 입력 시 수정 화면이 나타난다. 이름과 내용을 수정하고 수정 버튼을 누른다.





방명록 화면에서 방명록5가 수정된 것을 확인할 수 있다.




4. 소스코드 다운로드 (war 파일)



JSP_DEV.war






RSS구독 링크추가 트위터 이메일 구독