자바(JAVA)기반 안드로이드 웹&앱 개발 78일차 스프링, MySQL (게시판 첨부파일 등록, 삭제 )
[첨부파일 정보를 위한 준비]
1. 첨부파일에 대한 정보를 저장하는 tbl_attch 테이블을 추가합니다.
create table tbl_attach (
uuid varchar(100) not null,
uploadPath varchar(200) not null,
fileName varchar(100) not null,
fileType char(1) default '1',
bno integer
);
alter table tbl_attach add constraint pk_attach primary key (uuid);
(tbl_attach 테이블에 uuid를 기본키(PK)로 준 것입니다.)
alter table tbl_attach add constraint fk_board_attach foreign kye (bno) references tbl_board (bno);
(tbl_board의 bno 를 tbl_attach 에 외래키(FK)로 준 것입니다.)
2. BoardAttachVO.java 클래스를 생성합니다. (tbl_attach VO)
1) 그 후, BoardVO를 수정합니다. BoardAttachVO 를 List로 가져오는 attachList()메소드를 추가합니다.
게시글 처리할 때, 첨부파일에 대한 정보를 가져와야 하기 때문입니다.
BoardAttachVO.java / BoardVO.java
3. VO 클래스를 만들었으니, VO 클래스의 데이터를 다루는 BoardAttachMapper.java (인터페이스)와
BoardAttachMapper.xml 로 데이터를 다룰 수 있도록 합니다.
BoardAttachMapper.java / BoardAttachMapper.xml
[ 첨부파일 등록을 위한 화면처리]
추가된 첨부파일은 이미 업로드가 되는 상황입니다. (<form> 처리 할 때 )
즉, <form> 전송 시 <input type="hidden"> 태그들을 첨부된 파일의 수 만큼 생성 해서 같이 전송하면 됩니다.
1. src/main/WEB-INF/board/register.jsp 에 css 부분을 추가합니다.(uploadAjax.jsp 의 css 복사)
register.jsp css 추가
2. register.jsp 에 첨부파일 등록을 위한 HTML 부분을 추가합니다.
register.jsp HTML 추가
결과확인
[javascript 처리]
추가했던 버튼(<input type="file" name='uploadFile' mutiple>)에 이벤트를 걸어줘야 합니다.
첨부파일을 추가해줘야 하기 때문에 submit 버튼의 default 동작을 막아주어야 합니다.(e.preventDefault())
그 후 ,첨부파일에 대한 처리코드를 작성합니다.
<input type file> 에는 내용의 변경을 감지해서 처리하는 동작이 필요합니다.
1. register.jsp 에 submit 버튼의 default 동작을 막고, 첨부파일에 대한 처리코드를 하는 javascript를 작성합니다.
1) e.preventDefault() 로 submit 버튼의 default 동작을 막았습니다.
2) 파일형식과 크기를 검사합니다.
register.jsp javascript submit 버튼 이벤트
2. register.jsp 에 input type file의 내용의 변경을 감지해서 처리하는 코드를 작성합니다.
배열형식으로 첨부파일은 POST type, json 데이터로 보내 showUploadResult(result)로 보여줍니다.
기존의 uploadAjax.jsp 에서 사용했던 코드와 거의 동일합니다.
register.jsp javascript input 버튼 이벤트
register.jsp javascript showUploadResult() fafa가 아니라 fa fa-times 입니다.
결과확인, 파일명 옆 주황색 동그라미에 흰색 X가 나와야하는것이 맞습니다.(fa fa-times)
[첨부파일의 변경 처리]
파일 선택 옆에 파일 개수를 초기화시키고,
X 버튼을 눌렀을 때 첨부파일이 삭제가 되어야하고
파일 선택을 클릭했을 때 새로운 파일이 첨부될 수 있도록 하여야 합니다.
1. 삭제버튼을 누르면 파일정보를 가져와서 삭제를 하기위한 코드를
register.jsp javascript showUploadResult()에 추가합니다.
1) button에 data-file 과 data-type을 넣습니다.
2. 삭제버튼에 대한 이벤트를 처리합니다.
1) url : /deleteFile (UploadController) 로 data를 POST 형식으로 보내 targetLi를 remove()합니다.
register.jsp javascript uploadResult 버튼에 대한 이벤트 등록
결과확인, X 버튼을 눌렀을 떄 alert 창이 뜨면서 업로드된 파일이 있는 folder에 파일이 삭제됨을 확인할 수 있습니다.
그 후 첨부파일이 나오는 목록에서도 사라지는 것을 확인할 수 있습니다.
결과확인 (2)
[게시물 등록과 첨부파일의 데이터베이스 처리]
1. 파일에 대한 정보를 저장하기 위해 showUploadResult() 에 DB 칼럼에 맞게 데이터들을 입력하는 코드를 작성합니다.
register.jsp javascript showUploadResult()
2.submit 버튼이 눌렸을 때, attachList (BoardVO, 첨부파일 정보) 들이 DB로 갈 수 있도록 합니다.
register.jsp javascript submit 이벤트
3. BoardController 의 register 메소드를 추가합니다.
1) logging 을 하고 나서, service.register로 등록합니다.
BoardController.java
4. BoardServiceImpl.java 에 BoardAttachMapper attachMapper 객체를 추가하고 register 변수를 @Transactional(트랜잭션화) 하여 첨부파일이 존재하면 첨부파일 정보를 저장하도록 합니다.
BoardServiceImpl.java register()메소드 수정
결과확인, DB에 저장, 폴더에 저장, List에 등장
[게시물의 조회와 첨부파일]
게시물 조회 시에는 게시물의 정보와 첨부파일들의 정보를 같이 가져오도록 해야 합니다.
Ajax로 해당 게시물의 첨부파일들만 조회하는 방식으로 합니다.
1. BoardService 에 첨부파일정보를 가져오는 메소드를 추가하고
BoardServiceImpl 에 해당 메소드를 구현합니다.
BoardService.java / BoardServiceImpl.java
2. get.jsp 에서 javascript 에 첨부파일 정보를 가져오는 코드를 추가합니다.
자동으로 실행되면서 board.bno의 /board/getAttachList 의 json 형태로 {bno}에 해당하는 첨부파일의 정보를 가져옵니다.(console.log(arr))
F12키를 눌러 콘솔창을 확인하면 해당 게시물(Bno)에 해당하는 첨부파일 정보가 나오는 것을 확인할 수 있습니다.
3. get.jsp 에서 uploadAjax.jsp의 css를 복사해서 붙여넣고(사진생략),
첨부파일을 보여줄 HTML 코드를 추가합니다.
get.jsp HTML
4. get.jsp javascript 부분에 첨부파일 정보를 가져오는 코드를 작성합니다.
1) /board/getAttachList 로부터 배열로 정보를 하나씩 가져오고
uploadResult ul로 리스트형식으로 출력합니다.
(uploadAjax.jsp 에서 showUploadFile()부분과 변수명만 다를뿐 동일한 방법)
get.jsp javascript
[첨부파일 클릭 시 이벤트 처리]
일반파일은 클릭하였을 때 다운로드를,
이미지 파일은 클릭하였을 때, 원본이미지 파일을 보여주는 것을 작업합니다.
1. get.jsp 에 첨부파일 리스트를 출력하는 클래스(uploadResult)를 클릭하였을 때 이미지 파일은 원본이미지를
보여주는, 일반파일은 다운로드 해주는 javascript 코드를 작성합니다.
1) 그 후, 원본이미지 창을 닫는 코드를 추가합니다.
get.jsp javascript
결과를 확인합니다. 이미지 파일은 클릭했을 때 원본이미지를, 첨부파일은 클릭했을 때 다운로드가 됩니다.
[게시물을 삭제했을 때 첨부파일 삭제]
게시물이 삭제 되었을 때 DB 상의 첨부파일 정보도 같이 삭제되어야 합니다.
또한, 실제 업로드된 파일 (이미지의 경우 + 썸네일)도 삭제되어야 합니다.
1. BoardAttachMapper 인터페이스에 첨부파일을 deleteAll() 하는 메소드를 추가하고
BoardAttachMapper.xml에 해당 쿼리문을 작성합니다.
BoardAttachMapper.java (인터페이스) / BoardAttachMapper.xml
2. BoardServiceImpl.java 에 해당 비즈니스 로직을 처리하는 delete 메소드에 @Transactional(Aspect확인)
하여 트랜잭션화 하고 attachMapper.deleteAll(bno)를 추가합니다. (bno에 따른 첨부파일 전부삭제)
BoardServiceImpl.java
3. BoardController.java의 remove() 메소드에 첨부파일을 삭제하는 코드를 추가합니다.
1) attachlist 에 BoardAttachVO 를 List로 만들어 deleteFiles(attachList)로 삭제하는 것입니다.
이 때, 게시글이 전부 삭제된 후에 첨부파일이 삭제되는 것이 맞으므로 if(service.remove(bno))밑에 있는 것
입니다. DB 니까 철저히 지켜야 하는 원칙입니다.
BoardController.java
2) deleteFiles() 메소드를 BoardController.java에 구현합니다.
(1) attachList 가 null 이 아니고 attachList size 가 0이면 return 하고 그 외의 경우에는 attchList를
반복문으로 하나하나 삭제하는 것입니다. 또한 if("image")의 경우네는 썸네일까지 삭제해야하므로
썸네일까지 같이 삭제해줍니다.
BoardController.java deleteFiles()
게시물을 삭제하여, 게시물이 삭제되었을 때, 첨부파일이 DB(Workbench)에서 삭제되는지와
폴더(E://zzz/upload/2021/06/18/ )에서도 삭제되는지 확인합니다. (결과사진 생략)
[게시물의 수정과 첨부파일]
첨부파일은 사실상 수정이라는 개념이 존재하지 않습니다.
삭제 후 다시 추가하는 방식입니다.
1. 첨부파일 데이터를 보여주기 위해서 modify.jsp(수정화면) 에 HTML 과 CSS를 추가합니다.
CSS는 기존에 사용하던 것과 동일하므로 복사해옵니다. (CSS 생략)
modify.jsp
교안이 끊겨서 다음 주에 올리겠습니다.