[Java Project] Part 2. 게시판 서비스 만들기 - 게시판 정렬

1. 게시판 정렬 구현

• 게시판 페이지에서 각 칼럼(제목, 해시태그, 작성자, 작성일)을 눌렀을 때 오름차순과 내림차순으로 정렬되는 기능이다.
• 정렬은 Spring data에서 제공하는 Paging 인터페이스를 사용하면 적용할 수 있다.
• 즉 뷰에서 표현만 해주면 된다.
• 현재 index.html의 table 칼럼명에는 class가 각각 정의되어 있다.
• 그렇기에 이 class를 사용하여 xml 파일에서 selection을 할 수 있다.
• thymeleaf 문법을 사용해 각각 컬럼명을 클릭하였을 때, 정렬이 되도록 구현한다.

th:href="@{/articles(page=${articles.number}, 
	sort = ‘컬럼명’ + (*{sort.getOrderFor(‘컬럼명’)} != null ? (*{sort.getOrderFor(‘컬럼명’).direction.name} != ‘direction.name) != ‘DESC’ ? ‘,desc’ : ‘’) : ‘’)}"

• 페이지 내에 있는 게시글들에 접근하여 컬럼명에 따라 정렬이 되어있었는지 확인해 주고 안되어 있다면 정렬을 진행을 한다. 정렬 이름이 내림차순으로 되어 있지 않으면 내림차순으로 변경하고 아니라면 빈칸 즉 오름차순으로 정렬한다.
• 이때 컬럼명은 도메인에서 사용한 것으로 쿼리가 나가기 때문에 유의해서 작성해야 한다. (userAccount.userId)

 

2. 게시판 검색 구현

(1) 검색 기능 테스트

• 게시판 정상 호출 테스트를 복사해 와 searchType과 searchValue 즉 검색어를 입력하고, searchArticles에 두 변수가 입력되도록 수정한다.
• 검색 타입을 서버에서 받아 보여줄 수 있도록 searchTypes attribute의 존재를 확인하는 코드도 작성한다.

 

(2) 검색 기능 구현

• ArticleController에서 마저 구현한다.
• map.addAttribute를 통해 searchTypes를 추가하고 SearchType의 enum의 값들을 받게 한다.

 

(3) 뷰

• 검색 유형과 검색어가 들어갈 수 있도록 한다.
• 현재는 옵션이 입력되어 있는 곳으로 이동하여 id(search-type)와 name(searchType)을 부여한다.
• <form> 태그에 action을 통해 검색 후 해당 페이지로 돌아올 수 있도록 “/articles”를 입력해주고, method는 “get”으로 설정한다.
• 검색어가 입력되는 <input> 태그에도 id(search-value), name(searchValue)를 설정한다.
• 이후 xml으로 이동하여 Thymeleaf를 수정해 준다.
• 검색이 유지된 상태에서 정렬과 페이지네이션이 될 수 있도록 해당 부분도 함께 수정해준다.

 

---

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/43z0P6S

 

 

#패스트캠퍼스 #포트폴리오 #직장인자기계발 #환급챌린지 #포트폴리오챌린지 #패스트캠퍼스후기 #초격차패키지 #오공완