cookie를 통하여 컬럼명 클릭시 정렬 순서 바꿔보기

컬럼명을 클릭시에 cookie로 값을 전하여 정렬순서를 바꾸는 문제이다.

 

쿠키를 통해 값을 전달하여 employees테이블의 컬럼 클릭시 정렬 순서가 바뀐다.

[getCookie()]쿠키의 값이 null인지 아닌지를 판단하여
null값이 아니라면 쿠키의 값을 리턴하여주는 메서드이다.

 

[post_pass()] Get,Post 방식으로 들어오는 값을받는다.

(둘다 값을 받는 이유는 PostMapping을 이용해도되지만 연습 문제인만큼 배열형식으로

사용할수 있다는것을 잊지않기위해 사용해보았다.) 

쿠키와 클릭된 테이블의 컬럼값을 받아 Get방식으로 다시 리턴하여주는 메서드이며
처음 post방식으로 전송하여 받아내는 이유는 주소에 노출되는 정보를 막을수 있기 때문이다.  
쿠키의 값이 null이 아니면서 쿠키를 통해받은 컬럼값과 클릭된 컬럼의 값이 같다면
삼항문을 이용하여 현재 정렬 상태와 반대되는 정렬 쿼리문을 order에 받아준다.
쿠키의 값이 null이라면 null + /asc값으로 값을 넘겨준다.

 

[doGet()]메서드는 post_pass에서 포스트 방식으로 받아
정리해둔 컬럼명과 order 값을 가진 쿠키를 리다이렉트받아
list.jsp로 forward해주는 메서드이다.
 
1.쿠키의 값이 null이 아니라면 String sql 즉, sql문에 컬럼값과 order값을
셋팅하여준다.
가장 초기의 세팅은 null값이기때문에 else문의 sql문이 셋팅이된다.
    
2.쿠키의 값으로 받아온 컬럼값과 order값을 통해
sql쿼리문을 결정하여 list에 결과물을 담아주고
setAttribute를 통하여 값을 전달하여준다.

list.jsp

list.js

위의 첫 번째 사진은 받아온 값들을 출력하는 코드이며

jstl을 사용하여 <c:forEach>태그를 이용하여 출력하여준다.

 

두번째 사진은 js문을 통하여 눌린 컬럼의 값을 컨트롤러로 전송하여준다.

js를 통해 form의 id값인 passId를 sortbyForm에 passId의 객체를 반환받고
#passId값 안에 속해있는 input태그들은 sortbyData에 객체를 반환하여준다
headers는 th태그의 이름값을 반환받아준다.
 
Array.from(headers)을 통하여 th 즉, 컬럼명이 눌릴때마다 
눌린 컬럼의 text값을 input태그의 벨류에 담아주고
form태그의 action주소와 method방식을 결정하여 submit 버튼을 눌러
값들을 전송하여준다. 이곳에서 전송한 값들이 쿠키값이된다.
order(asc, desc)의 값이 어디있는지 의문을 가질수 있으나
컨트롤러에서 order값을 셋팅하여준다.

 

처음 이 문제를 접했을때에 조금 복잡하다 느꼈으나

복습을 하다보니 이제 한눈에 보이는 문제가되었다...

역시 복습은 하기는 힘들지만 참 좋다.