chap10 - Ajax 사용 상품보여주기

쇼핑몰홈 이나 장바구니를 클릭했을경우 아래처럼 보인다.

CATEGORY LIST 자리에 

를 뿌려줄것이다.

 

DAO 에 HashMap으로 담아 두었다. 정확히 List<HashMap<String, String>> 이다.

 

먼저 로그인 아래로 보이게 해주자.

 

[ header.jsp ]

[ categoryList.jsp ]

 

 

 

이제 카테고리 리스트 아래에 DB에 있는 카테고리테이블을 불러오자.

이제 보여진 전자제품과 의류 도서를 클릭했을시 분류가 무엇인지 나오게한다.

링크를 걸어볼 것이다.

 

실제로 클릭했을시 해당 제품이 나오게 만든다.

 

현재 GET 방식으로 넘어간 것이 code 이다.

 

전자제품 을 클릭하면~

 

 

주소가 이렇게 나온다.~

현재는 계획만 짜온것이다.

 

 

쇼핑몰홈 에서는 전체제품을 보여줄 것이고 끝이나면 카테고리별로 보여지도록 할것이다.

 

 

 

현재 받아준 code 가 나오는지 안나오는지 확인해 보는 것이다.

 

로그인후 쇼핑몰홈 > 전자제품 클릭하면

여기서 카테고리에 목록을 눌렀으면 code 값이 보여지긴 하는데 카테고리 목록이 사라진다~

 

카테고리 목록을 같이 보여지게 한다.

MallByCategoryAction 에서 부모클래스에 저장해 놓은 getCategoryList를 불러오면 끝이난다.

 

------------------------------------------------------------------------------------------------------------

이제 쇼핑몰홈에 HIT 상품을 먼저 보여지도록 해볼것이다.

HIT 상품을 보여줄때 대표이미지를 보여지도록 할것이다.

먼저 HIT 상품을 DIV 로 4개씩 총 8개를 보여지도록 해볼것이고 [더보기] 버튼을 하나 만들것이다.

[더보기]를 눌렀을시 기존 8개에서 + 8개를 더 보여줄것이다.(append)

여기서 마지막까지 보여주면 [더보기] 버튼을 비활성화 시켜주고 이름을 바꿀것이다.

 

Ajax - JSON 로 처리를 해볼것이다.

-------------------------------------------------------------------------------------------------------------

 

연습용 으로 해본다. 추후 다 지움

 

[ mallHome.jsp ]

 

이렇게 하면된다~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~잘 나왔으면 모두 주석문처리 한다.

 

---------------------------------------------------------------------------------------------------------------------------------

 

 

1. DB에서 무언가를 가져와야 한다. - VO를 하나 만든다.

 

[ ProductVO ] - 참조!

 

 

현재 아래 테이블의 VO 를 뜻한다.

 

2. Interface 를 만들고 DAO를 만든다.

현재 만들어 놓은 상태이다.

 

 

우리는 맨처음 HIT 상품을 보여주고 다보여지면 NEW 상품을 보여줄것이다.

pspec 는 아래 테이블의 컬럼이다.

 

 

 

메소드를 만든다.

 

 

 

 

 

우리는 페이징처리를 위해 rownum 을 사용해 왔는데 rownum 이 아닌 다른방식으로 사용해보겠다.

row_number() over(order by pnum asc) 을 사용해 왔다.

row_number() - 오라클의 함수이다.

 

우리는 8개씩 보이기로 했으므로 잘라보자.

결과적으로 분석함수인 row_number() over(order by pnum asc) 은 where 절에 바로 사용할수가 없다.

그러므로 View 를 사용한다.

 

이제 Ajax 로 [더보기] 에 보여주면 된다.

 

먼저 [ MallHomeAction.java ] 로 간다.

 

[ MallHomeAction.java ]

[ mallHome.jsp ]

현재 HIT 상품이 36개를 받아왔고 더보기를 클릭할때마다 8씩 증가를 시켜줄것이다. 40이되면 더이상 보일게 없으므로

비활성화 시킬것이다.

 

[ MallDisplayJSONAction.java ]

 

이제 DB에가서 데이터를 읽어온다.

 

[ mallHome.jsp ]

현재 위에서 HIT 부분을 BEST로 부꾸고 해보았다.

위에처럼 나오고 또한 커서모양도 바뀌었다.

 

 

 

 

 

 

이제 더보기를 클릭하면 기존거는 변동없이 그아래에 값을 보이도록 한다.

더보기를 클릭 할때마다 8개씩 나온다.

 

다보여지면 아래처럼 나온다.

 

더보기 버튼 옆에 0 즉, countHIT에 갯수를 누적해서 기록한다.

 

여기서 쌓아준 값이 json.length 의 끝이라면(현재는 36) 끝내야 한다.

 

여기서 처음으로 를 눌렀을 경우 다시 처음으로 돌아가야 한다.

즉, 지금까지 불러온 이미지를 없애야 한다.

처음으로 누르면 다시 첫 모습으로 나온다.

 

이제 더보기 옆의 36 totalHITCount 과 8 countHIT 을 감춘다.