#4 계정(시큐리티 적용)과 게시판 CRUD 구현

 

현재 진행 상황

 

 

 

시큐리티 로그인 적용 & DB 연동 완료

 

 

서머노트와 게시판 글쓰기 & DB 연동 완료

 

 

여기까지의 회원가입과 시큐리티 로그인 적용, 그리고 게시판 CRUD 중 Create 파트까지는

내가 이전에 작성했던 스프링 부트 블로그 JPA 프로젝트의 내용과 유사하므로 따로 작성하진 않겠다.

 

#17 회원가입을 위한 세팅 : https://daramgda.tistory.com/67?category=554648 

#18 회원가입 구현 : https://daramgda.tistory.com/68?category=554648 

 

#21 스프링 시큐리티 : https://daramgda.tistory.com/71?category=554648 

#22 스프링 시큐리티2 : https://daramgda.tistory.com/72?category=554648 

#23 스프링 시큐리티 로그인 : https://daramgda.tistory.com/74?category=554648 

 

#24 CRUD 게시판 - Create (글쓰기 구현) : https://daramgda.tistory.com/75?category=554648 

 

 

 

 

 

게시판 CRUD 구현  -  Read (목록, 페이징, 상세보기)

 

 

index 페이지에서 게시판 목록 띄우기

 

 

 

현재 게시판을 테이블 형태로 만들어서 작성 중인데,

index 페이지에서 상단에 고정되어야 할 제목, 작성자와 같은 속성이 게시글 마다 나온다.

 

따라서 코드를 다음과 같이 수정하였다.

 

실행결과 :

그럼 이제 이렇게 제목, 작성자, 작성일, 조회, 추천의 속성이 테이블 최상단에 한 번만 나온 채로 고정되는데,

하나 신경쓰이는 것이 있다.

timestamp를 그대로 가져오다보니 작성일이 너무 길게 출력된다는 것이다. 

내가 밑줄 친 저 부분까지만 나오면 좋을 것 같았다. 방법이 없을까?

index 페이지 내에서 jstl에서 substring을 이용해 문자열을 원하는 만큼 자를 수 있지 않을까?

생각했는데 정답이였다.

 

 

taglib prefix를 지정하고 substring을 이용해 해당하는 인덱스 부분의 문자열을 가져올 수 있다.

 

 

실행결과 :

 

그리고 작성일, 조회, 추천 열을 중앙 정렬하였다.

 

실행결과 :

 

 

여기까지 index 페이지에서 테이블 형식으로 글 목록을 가져와 보여주는 처리를 해보았다.

그런데 이대로면 최근 글들이 뒤로 가서 보기 힘들어지고, 글이 많아질 경우 스크롤이 엄청 길어질 것이다.

그러니 이제 페이징 처리를 해서 이 문제들을 해결해보자

 

 

index 페이지에서 페이징 처리하기

 

페이징 처리의 전반적인 절차나 코드는 내가 이전 부트 블로그 프로젝트를 만들며 작성하였던

https://daramgda.tistory.com/76#toc-%EA%B8%80%20%EB%AA%A9%EB%A1%9D%20%ED%8E%98%EC%9D%B4%EC%A7%95

#25 CRUD 게시판 - Read (목록,페이징,상세보기)

 

해당 링크에서 확인하기를 바란다!

 

해당 링크에서 작성하였던 페이징 처리는 현재 페이지가 표시가 안되고,

결정적으로 페이지가 10페이지가 넘을 경우에도 페이지 번호 목록이 그대로 출력된다는 문제점이 있었다.

 

3페이지 정도의 경우에는

이전 페이지 1 2 3 다음 페이지

이렇게 출력되어 정상적으로 이용 가능하지만

만약 페이지의 수가 많아지면, 예를 들어 15 페이지를 가정하면

이전 페이지 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 다음 페이지

이렇게 모든 페이지 목록의 숫자가 표시되는 문제점이 있었다.

20페이지, 50페이지, 100페이지가 넘을 경우엔 더 심각해진다.

 

따라서 10페이지 단위로 페이징 처리를 하도록 기존의 코드를 수정해 작성하였다.

 

BoardController.java

index.jsp

 

실행결과 :

 

 

index 페이지에서 테이블의 제목 클릭 시 글 상세보기

 

index 페이지에서 테이블에 다음과 같이 링크를 걸어준다.

그러면 해당하는 board.id의 링크로 이동하게 된다.

 

그 이후 게시판 상세 보기가 진행되는 과정은 

https://daramgda.tistory.com/76#toc-%EA%B8%80%20%EC%83%81%EC%84%B8%EB%B3%B4%EA%B8%B0

#25 CRUD 게시판 - Read (목록,페이징,상세보기)

내가 이전 부트 블로그 프로젝트를 만들며 진행했던 상세보기 처리를 확인하면 된다.

 

 

실행결과 :

 

 

게시판 CRUD 구현  -  Update, Delete (수정, 삭제)

 

해당 게시판의 Update와 Delete의 진행 과정과 코드는

내가 이전에 부트 블로그 프로젝트를 만들며 작성하였던

https://daramgda.tistory.com/77

#26 CRUD 게시판 - Update, Delete (수정, 삭제)

해당 링크를 통해 확인할 수 있다.

 

 

실행결과 :

 

게시판 CRUD가 잘되는 것을 확인할 수 있다. (gif로 보여주느라 화질 낮춤)

물론 JPA 방식으로 DB랑도 잘 연동된다.