[영속 영역의 CRUD 구현 - 게시물 조회(READ), 삭제(DELETE), 수정(UPDATE)]
1. BoardMapper.java (인터페이스) 에 read(Integer bno), delete(Integer bno), update(Integer bno)를
추가합니다.
BoardMapper.java
2. BoardMapper.xml 에 각 메소드에 맞는 sql 구문을 추가합니다.
1) id를 메소드 이름에 맞게해야하는 것 같습니다.
read() 같은 경우는 결과값을 돌려줘야 하므로 해당 패키지의 BoardVO 로 경로를 설정합니다.
BoardMapper.xml
3. BoardMapperTests.java 에 각 메소드에 대하여 테스트를 합니다.
BoardMapperTests.java
read 테스트 결과 성공
delete 테스트 결과 성공 (bno = 19 삭제)
update 테스트 결과 성공 ( bno = 1 update)
[비즈니스(서비스)계층의 설정] - 서비스가 무엇인지는 구글링해서 IT개념에 올려봐야겠습니다..
이렇게 봐서는 이해가 안되네요.
1. 고객의 요구사항을 반영하는 계층입니다.
2. 업무의 단위로 설계합니다. (트랜잭션 단위)
3. 여러 개의 Mapper 나 DAO를 사용하는 경우가 존재합니다.
4. xxxService 형태로 작성합니다.
[서비스 패키지 설정]
1. org.zerock.service 에 BoardService.java(인터페이스)와
BoardServileImpl.java (BoardService 구현 클래스) 를 작성합니다.
BoardService.java
BoardServiceImpl.java 처음에는 각 메소드들의 내용이 null 일 것입니다. 일단은 null 로 두셔도 괜찮습니다.
2. root-context.xml 에 해당 패키지 경로를 등록합니다.
저도 헷갈려서 찾아보았는데 root-context는 비즈니스 로직과 관련된 설정을 해주는 곳이네요.
IT 개념에 올리겠습니다. 즉, root-context.xml 에 해당 패키지 경로를 등록해야 service가 동작할 수 있는거였습니다!
https://thiago6.tistory.com/70
servlet-context.xml, root-context.xml, web.xml 차이점 알기!
servlet-context.xml, root-context.xml, web.xml에 대한 차이점에 대해 정리해봅니다. 우선, xml 파일은 모두 객체(Bean)를 정의합니다. 1. servlet-contex.xml servlet에서 보듯이 요청과 관련된 객체를 정의..
thiago6.tistory.com
root-context.xml
3. 이제 BoardServiceImpl.java 의 각 기능들에 대해서 구현과 테스트를 할 차례입니다.
1) register()[등록], getList()[목록], get() [조회], modify() [수정], remove() [삭제] 기능을 구현합니다.
(1) modify(), remove() 는 성공여부를 확인할 수 있어야 하므로 == 1을 붙입니다.
성공하면 1을 반환할테니까요.
BoardServiceImpl.java
2) src/test/java 에 org.zerock.service.BoardServiceTests.java 를 만들어 각 기능을 구현합니다.
BoardServiceTests.java
register() 테스트 성공, 게시물(bno=21)이 생성되었습니다.
getList() 테스트 성공
get() 테스트 성공 bno = 1 을 가져오고 있습니다.
delete() 테스트 성공, bno = 21을 지웠고 콘솔에 boolean true를 가져와 성공임을 표시하고 있습니다.
modify() 테스트 성공, bno = 20의 Title을 수정하였고 콘솔에 MODIFY RESULT 로 boolean true를 가져와 성공임을 표시하고 있습니다.
[프레젠테이션(웹) 계층의 CRUD 구현]
1. 웹 계층의 구현
1) 웹 계층에서 가장 먼저 설계하는 것이 URI의 설계입니다.
2. 진행작업의 순서입니다.
1) 목록 페이지 - 모든 진입 경로인 동시에 입력으로 가는 링크
2) 등록 입력/처리 - 게시물 등록 및 처리, 처리 후 이동
3) 조회 - 목록 페이지에서 특정 게시물로 이동
4) 수정/삭제 - 조회 페이지에서 수정/삭제 선택 해 처리
3. BoardController 목록의 처리
1) src/main/java/org.zerock.controller/BoardController.java 를 작성합니다.
2) BoardVO(게시물)의 목록을 Model에 담아서 전달합니다.
BoardController.java
3)src/test/java/org.zerock.controller.BoardControllerTests.java 를 생성하여 테스트를 합니다.
BoardControllerTests.java 콘솔을 보면 list를 성공적으로 가져왔음을 확인할 수 있습니다.
4. 등록, 조회, 수정, 삭제 처리와 테스트를 동일한 과정을 통하여 진행합니다.
1) BoardController.java 에 register(), get(), modify(), remove() 메소드를 추가합니다.
2) BoardControllerTests에 해당 메소드들을 테스트하는 메소드들을 추가한 후 테스트합니다.
BoardController.java 에 해당 메소드들을 추가합니다.
BoardControllerTests.java 테스트 결과는 생략하겠습니다.
[화면처리]
1. BootStrap을 이용하여 무료 디자인을 합니다.
첨부파일
startbootstrap-sb-admin-2-gh-pages.zip
해당 부트스트랩을 알집을 풀어 STS 해당 경로에 복사합니다.
2. src/main/webapp/resources/tables.html 내용을 복사하여
src/main/webapp/WEB-INF/views/board/list.jsp 에 붙여넣습니다.
3. list.jsp 에서 참조하는 css의 ../ 경로를 /resources/로 전부 수정해줍니다.(Ctrl + F 로 find/replace)
사진 속에는 header, footer로 나누어져 있지만 아직 안나누어져 있는 것이 맞습니다.
4. list.jsp 의 3줄 ~ 378줄 부분을 잘라서 src/main/webapp/WEB-INF/views/includes/header.jsp 에 붙여넣습니다. 또한 list.jsp에는 <%@ include file="../includes/header.jsp" %>를 추가합니다.
5. list.jsp의 1112줄 이하를 잘라서 붙여넣어 src/main/webapp/WEB-INF/views/includes/footer.jsp 에 붙여넣습니다. 또한 list.jsp 맨 아랫부분에는 <%@ include file="../includes/footer.jsp" %>를 추가합니다.
6. footer.jsp 에 있는 jQuery 라이브러리를 주석처리하고 header.jsp의 새로운 라이브러리를 추가합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> header 밑 부분에 추가
7. 반응형 웹 처리를 합니다.
1) jquery 최신 버젼을 사용하는 경우 모바일 크기에서 새로고침 시 메뉴가 펼쳐지는 문제가 발생합니다.
2) footer.jsp에 아래의 코드를 기존 코드 대신에 추가합니다. 새로고침을 하면 메뉴가 펼쳐지지 않습니다.
8. 목록 화면을 처리하기 위해 list.jsp 를 다음과 같이 변경합니다.
list.jsp
서버를 키고 localhost:8080/board/list 를 입력했을 때 DB 에 있는 내용물이 나오는 것을 확인할 수 있습니다.
이떄 server에서 contextpath 를 / 로 하였습니다.
9. 등록 입력 페이지와 등록처리를 하기 위해 게시글 입력 폼을 구동하기 위한 부분을 추가합니다.
1) BoardController.java : /board/register 처리(GET)
2) views/board/regiseter.jsp 를 만들고 다음과 같이 작성합니다.
DB의 칼럼(속성)인 title, content, writer를 네임으로 가져 submit 합니다.
localhost:8080/board/register 를 입력하였을 때 다음과 같이 나오면 됩니다.
3) 데이터를 register 하였을 때 한글깨짐이 발생하므로 web.xml에 UTF-8 인코딩 필터를 추가합니다.
web.xml
register 하였을 때 DB와 list에 정상적으로 나옴을 확인합니다.
[재전송(redirect) 처리]
1. 등록과정에 대한 처리 흐름
1) redirect를 하지 않을 경우 새로고침을 하면 등록과정이 다시 수행되어 동일한 게시물이 반복저장됩니다.
(양식을 계속 제출)
2) redirect를 할 경우 새로고침을 하면 리스트를 다시 보여주므로 영향이 없습니다.
그러나 등록 수행결과를 다시 받으면 난감하므로 새로고침하면 안받도록 1회만 전송하는 것이 필요합니다.
2. 게시물의 작업 이후 재전송
1) 게시물의 등록, 수정, 삭제의 경우에 해당
2) 작업이 완료된 후에는 리스트 페이지로 다시 이동
3) BoardController에서는 RedirectAttributes의 addFlashAttribute()를 이용해서 단 한번만 전송되는
데이터 저장 후 전송
4) JSP 등의 화면에서는 Javascript를 이용해서 수행 결과를 경고창이나 모달창 등을 이용해서 보여주는 형식
5) BoardController.java 에 1회만 팝업할 수 있도록 addFlashAttribute 와 return redirect를 설정합니다.
6) list.jsp 에 해당 javascript를 추가하여 모달창 혹은 알람창이 1번만 나오게 합니다.
빨간 줄 부분만 해당합니다. 다른 부분은 Modal 내용입니다.
3. 모달(Modal)창 보여주기
https://bomango.tistory.com/57
모달창 VS 팝업창, 차이가 뭔데?
"팝업창 말고 모달창으로 만들어줘~" "이번 모달창은 iframe으로 만들어~" 입사 초기에 모달=팝업 이라고 생각했던 무지한 나에게 이런 요구사항들은 당황스러웠다. html 공부할 때 그저 모달창은 div로 묶어 만든..
bomango.tistory.com
1) BoardController 에서 특정한 데이터가 RedirectAttribute에 포함된 경우에 모달창을 보여주는 것입니다.
2) 최근에는 경고창을 띄우기보다 모달창을 띄우는 방식을 선호합니다.
3) Bootstrap에서는 모달창을 간단하게 사용할 수 있습니다.
4) 기본적으로 <div>를 화면의 특정 위치에 보여주고, 배경이 되는 <div>에 배경색을 입혀서 처리합니다.
5) 활성화된 <div>를 선택하지 않고는 다시 원래의 화면을 볼 수 없도록 막기 때문에 메시지를 보여주는데
효과적입니다.
6) list.jsp 에 해당 내용을 추가합니다. (Modal)
7) list.jsp 에 Modal 창을 보여주기 위한 javascript 를 작성합니다.
8) localhost:8080/board/list 로 이동하여 데이터를 하나 등록하고 modal 이 작동함을 확인합니다.
