[프로젝트] 게시판 만들기

만들기 전 내용을 작성하고나서 팀프로젝트에서 게시판을 맡게 되어 글을 작성한다.

만들기 시작한건 좀 되었지만 팀프로젝트에 매진하다보니 작성이 늦춰졌다ㅠㅠ

차차 작성을 해주면서 아래에 계속 추가하여 작성할 예정이다.

작성한 기록은 일단 적어둘 예정인데 지울 생각이 있긴 하다 ㅎㅎ

 

08.12

맨 처음 만들기 전에 팀프로젝트로 ERP 를 하기로 했다가 그룹웨어로 바뀌었다. 하지만 게시판은 어디든 거의 대부분 들어가는 부분이라서 프로젝트 이름만 변경하고 만들어 나갔다.

우선 Spring.io에서 프로젝트를 셋팅해서 만들어주었다.

Dependencies : wdb, mybatis, lombok, mysql, thymeleaf, devtools

이렇게 여섯가지로 다운로드 받아주고 나서 실행을 시켰다.

컨트롤러를 먼저 생성만 해주고 board 폴더를 생성한 후, html 파일을 만들어주고 코드를 작성해주었다.

html 에 jquery 가 필요하여 선언문을 넣어주었다.

이렇게 선언문을 작성해주고 아래 작성페이지로 코드 작성해주기 시작했다.

여기서 jquery 를 넣어주는 이유는 html 를 작성할 때 조작이 쉽게 바꾸어주는 라이브러리이다.

작성페이지에서 저장하기, 목록, 메인페이지를 만들어 주었는데,

여기서 저장하기는 버튼, 목록과 메인페이지는 a 태그에 넣은 후 버튼 타입으로 지정하여 만들어주었다.

 

버튼을 만든 다음 깔끔하게 보여주기 위해서 버튼 디자인을 간단하게 먼저 해주었다.

일단 이렇게 만들어 주긴 했는데 작성페이지도 마저 꾸며주기 위해 코드 작성해주었다.

작성페이지에서 분류를 공지글과 일반글로 나누어서 만들어주었고, 제목과 작성자, 내용, 첨부파일이 들어갈 수 있도록 작성해주고, css 도 함께 작성해 주었다.

 

작성페이지에 내용을 적는 곳에 디자인을 해주기 위해 에디터 다운로드를 할 수 있는 사이트에 들어가서 적용을 시켜주었다.

zip 을 다운로드 받아서

ckeditor js 파일과  Map 파일을 복사하여 인텔리에지 폴더에 붙여넣어 주었다.

 

jquery 문을 선언해준 것과 마찬가지로 선언해주고, 바로 위에 style 적용 및 script 로 선언해주었다.

위의 이미지를 확인해보면 에디터 적용해준게 잘 들어간 걸 확인할 수 있다.

적용하고 나면 글꼴의 디자인을 설정할 수 있고, 표나 이미지 등 많은 기능을 넣을 수 있게 만들어 주었다.

내용 작성주는 칸이 작아서 스타일로 바로 적용하기 위해 작성해주었다.

스타일도 잘 적용되었다.

 

다음으론 Dto 를 만들어서 작성해주었다.

BoardDto

어노테이션을 걸어 Data 로 게시판에 들어갈 내용들을 만들어 주었다.

write.html

작성페이지에 조건을 걸기 위해 제목을 입력하지 않으면 넘어가지 않도록 먼저 작성한 다음 실행을 시켜 보았다.(주석 참고)

확인하는 것과 같이 제목을 작성하지 않고 저장버튼을 누르게 되면 제목을 작성하라는 문구와 함께 팝업창이 뜨게 된다.

write.html

제목을 확인했으니 아래에 작성자와 내용이 빈칸이 되면 넘어가지 않도록 조건문을 만들어주었다.

myEditor 에 값이 없으면 제목, 작성자, 내용 입력 안하면 넘어가지 않게 하였고, value 값을 가져오게 한 다음 콘솔에 내가 넣은 내용이 잘 넘어오지 확인해 보았다.

내용을 작성해주고 저장하기 버튼을 눌러주면 옆에 콘솔창에 잘 넘어가는걸 확인할 수 있다.

 

write.html

나오는걸  확인해주고나서 ajax를 작성해 주었다.

ajax 는 함수라고 생각을 해주면 된다.

html이 어떤 타입인지 작성을 해주는건 컨트롤러에서 확인을 했을 때 PostMapping 을 걸어주었다면  post 타입으로 작성해 주면 되는 것이다.

url 은 페이지가 어떤 링크로 넘어가게 되는지 작성하는 것이고, 저장버튼을 눌렀을 때 작성한 내용이 잘 넘어간 경우에 '게시물이 저장되었습니다' 라는 팝업창이 뜨면서 리스트 페이지로 넘어갈 수 있게 만들어 주었다.

BoardController

앞에 ajax 에서 타입을 post 를 작성해주었으니 Controller 파일을 열어서 write 로 넘어가는 PostMapping 으로 작성해주었다. MultipartFile 은 파일을 첨부했을 때 그 파일을 저장하기 위해서 작성을 해주는 것이다.

application 파일을 열어서 파일을 넣었을 때 사이즈와 저장될 경로를 지정해주었다.

사이즈는 내가 원하는 사이즈로 지정을 해주면 되는 것인데 용량이 클수록 프로그램이 조금 느려진다.

BoardController

컨트롤러 파일로 넘어가서 위쪽에 Value 로 UPLOAD_LOCATION 선언을 해주어 프린트를 작성해서 파일 저장 경로에 잘 맞춰서 나오는지 확인해본다.

게시판 작성페이지에서 파일을 넣어서 저장하기 버튼을 눌러서 확인을 해보았을 때 경로가 잘 나오는지 확인을 했다.

확인을 했으니까 프린트를 지우고 원본파일이름, 원본파일용량, 원본파일의 이름을 다른 이름으로 저장될 이름을 나오게 코드를 작성해 주고 프린트로 확인을 해보았다.(코드 작성한 캡쳐본이 없어요ㅠㅠ)

png 파일을 넣고 저장하기를 눌렀을 때 위의 이미지에 나와있는 것처럼 파일의 정보가 잘 맞춰서 나온다.

확인했으면 예외처리를 위해 try, catch 문을 작성해주었다.

BoardController

try 문 안에 if 로 조건문을 걸어주었고, 업로드를 했을 때 파일 원본이름을 확인하고, 파일 사이즈와 변경된 이름을 나오게 하는 코드를 작성해 주었고, Dto 에 적어놓은 변수이름을 작성해주었다.

확인하기 위해서 프린트로 첨부파일 넣어서 확인해보기!

확인해보면 잘 나오는거 확인했다! 확인했으면 이제 파일 첨부를 해서 지정한 경로에 잘 들어가는지 확인해보겠다

파일선택을 해서 아무 이미지 파일을 선택해서 넣어보았다.

미리 캡쳐를 해놓은 사진이라 날짜는 무시하고 ㅎㅎ 사진이 잘들어갔는지 확인했다!

사진 넣은 날짜에 맞춰서 폴더가 생성이 되면서 파일이 들어가고, 넣었을 때 파일 기존 이름이 아니라 이름이 변경되면서 들어가게 된다.

 

위에서 파일 첨부해서 프린트로 확인했을 때 파일 첨부한 내용 말곤 전부 null 로 나왔었는데 Mapper 가 작성이 다 안되어서 나온 것이다. 그래서 수정해주었다.

BoardMapper

메퍼를 위의 이미지처럼 Insert 로 어노테이션 작성을 해주고 Dto에 작성했던 변수를 같이 넣어주었다.

아래 Select 로 걸어준것은 리스트에 표시하기 위해 작성해 놓은 것이다.

 

메퍼를 작성해주고 실행시키기 전에 컨트롤러에 들어가서 추가로 입력해주었다.

이전에 폴더생성될 때 올린 날짜에 맞춰서 저장되게 작성해 놓은 코드이다.

아래에 저장이 완료되면 메세지가 뜨게 추가로 작성해 준 것이다.

게시물이 저장되었다는 팝업창이 뜬다.