23.06.28 수업 정리 2 (JSP / Java Server Pages)

쇼핑몰 홈페이지 실습 하기.

 

 

 

 

 

 

import 는, 자바의 ArrayList 랑, ProductVO 클래스를 사용 하기 위한 용도.

 

<jsp:useBean id="pDAO" class="test.ProductDAO" />

액션 태그는,

test.ProductDAO 클래스에서, pDAO 객체를 선언 하겠다는 의미.

 

 

 

[ a.jsp ]

 

 

 

1.

시멘틱 태그의 개념으로, div 태그의 id 속성값을 header 로 이름 짓기.

 

2.

session 주체가 "mid" 라는 속성의 값을 get 할거야.

근데, 그게 null 이야 ?

그러면,

form 태그 영역으로 진입 해 ~

사용자에게 text 타입으로, 아이디를 입력받고, 사용자가 submit 을 누르면,

데이터가 d.jsp 로 전송 된다.

 

session 주체가 "mid" 라는 속성의 값을 get 했는데,

null 이 아니야 ? 즉, 로그인을 한 상태야 ?

그러면,

session.getAttribute("mid") 를 표현식 내부에 사용해서,

mid님 ~ 안녕하세요 ! 라고 사용자에게 화면에 멘트를 보여준다.

 

a태그로 둘러쌓여 있는 로그아웃을 누르면, e.jsp 링크로 가게 된다.

 

 

1.

div 태그로 둘러 쌓여 있다.

시멘틱 태그의 개념으로, id 속성의 값으로 content 라고 표기 했다.

 

2.

form 태그가 있다.

사용자가 submit 을 누르면, 즉, 장바구니에 추가하기를 누르면, b.jsp 파일로 데이터가 전송 된다.

 

select 태그가 있다. name 속성의 값은 num으로 되어 있다.

 

form 태그는 데이터를 전송할 때, name 속성의 값과, value 속성의 값을 전송 한다.

 

select 태그 특성상, 사용자는 1개만 선택을 할 수 있다.

 

스크립트릿 내부는 다음과 같다.

자바의 문법을 사용 하면서,

pDAO.selectAll()을 해서, 상품 객체가 담겨져있는, 배열리스트를 return 하고,

그 데이터를 datas가 받고 있다.

for each 문을 돌리면서, out.println() 을 한다.

option 태그가 반복문을 돌려지면서, 상품 객체를 출력 해주는데,

 

이때, 사용자가 상품 한개를 선택하면, 그 상품의 value 값을 v.getNum()이 되도록 설정해 줬다.

 

이게 무엇을 의미하냐면, 사용자가 submit을 눌러서 데이터를 다음 페이지로 전송했을 때,

 

name 속성의 값이 num이기 때문에, 다음 페이지에서 num 이라는 이름을 가진 속성의 값,

즉, v.getNum() 을 읽을 수 있게 된다.

 

3.

44번째 라인의 input 태그는 테스트 용도 이다.

name 속성의 속성값이 name 이면, submit 되었을 때, 다음 페이지에서

name 이라는 이름을 가진 속성의 값을 사용할 수 있게 된다.

즉, test012345 를 사용 할 수 있다.

 

테스트 해보려고 작성한 코드.

 

 

 

장바구니에 추가 버튼 (submit) 을 누르면, 다음 페이지에서,

객체 pVO의 멤버변수의 값이 어떻게 set 됬는지를 보기 위한 이미지 이다.

 

ProductVO 클래스에 멤버변수로 num, name 이 있고,

 

다음 페이지에서 각각의 멤버변수 즉, jsp 에서는 속성을 사용하기 위해서,

setProperty 액션태그가 setter을 호출 한다.

setter를 호출하면, 별다른 값을 받지 않은 경우라면 모두

null, 또는 0으로 초기화가 되어 있다고 보면 된다.

 

근데, form 태그 내부에서 데이터를 전송 시켜줄 때, name 속성의 값이,

다음 페이지에 속성 이름과 동일 하다면,

name 속성의 값을 set 하게 되는 것이다.

 

그래서, 이미지를 보면, num은 101 로 초기화 됬고,

(장바구니로 보낸 상품의 pk가 101번 이여서..)

 

name은 테스트로 보낸 test012345 가 되는 것이다.

 

4.

결제하기 링크를 누르면, c.jsp 링크로 가지게 된다.

 

 

 

[ b.jsp ]

 

 

1.

ProductVO 타입과, ArrayList를 사용 하기 위해서, 상단의 페이지 지시어 내부에

import 를 해준 모습이다.

 

2.

4번 5번 라인의 액션 태그는, 어떤 자바 클래스의 객체를 선언 하겠다는 의미 이다.

객체를 사용하기 위한 참조변수 이름은 id 속성의 값으로 적어주면 된다.

 

3.

7번 라인의 setProperty 액션태그는 선언한 객체의 값을 사용 하기 위해,

setter 을 호출 해주는 역할을 한다.

 

* 을 사용 했으니, 모든 속성 (멤버변수) 의 setter을 호출 하겠다는 의미 이고,

name = "참조변수명" 은,

선언 해주는 객체명과 동일하게 작성해주면 된다.

 

 

1.

a.jsp 에서, 선택한 상품 1개의 num 값을 set 할 수 있다.

즉, 선택한 상품의 PK를 알기 때문에, 

pDAO.selectOne(pVO) 를 하면, 선택 상품을 식별하여, 해당 상품의 정보를 return 해준다.

 

그 return 한 데이터 객체를 ProductVO 타입의 data 라는 참조변수에 대입 한다.

 

여기서는 data 라는 참조변수를 새로 선언 해준 모습인데, 사실은 pVO를 재활용 해도 된다.

 

2.

그리고, session 주체가 cart 라는 속성의 값을 get 하여,

그 get 한 값은 String 타입이기 때문에,

ArrayList<ProductVO> 타입의 cart 변수에 대입하기 위해서, 형변환을 해주는 모습 이다.

 

3.

session 주체가 get한 cart 속성값을 cart 에 대입했는데,

만약에 그게 null이야 ? 즉, 장바구니가 없어 ?

그러면, 새롭게 cart 객체를 생성 해줘 ~ (인스턴스 해줘)

 

그리고, session 주체가 "cart" 라는 속성을 set 할거야. 그 "cart" 라는 속성의 값은 cart 야.

즉, cart를 set 하겠다는 의미 이다.

 

해석하자면, session 주체가 장바구니 데이터가 없어?

그러면 장바구니 새롭게 set 하자 ~ 라는 의미 이다.

 

4.

장바구니가 있어 ?

그러면 cart에 add() 할거야 ~

data를 ~

data가 뭐였어 ?

사용자가 선택했던 상품의 data ~

 

즉, 사용자가 고른 상품을 selectOne() 해서 (상품 객체의 num으로 식별)

해당 상품을 장바구니에 담는 로직 이다.

 

5.

장바구니에 잘 추가 되었으면 ~

(추가가 안되는 경우는 없다고 보면 된다. 현재 로직에서는)

 

alert 할거야 ~

표현식 내부에 data.getName() 을 한 모습을 볼 수 있다.

data 참조변수에는 selectOne()을 해서, 해당 상품 객체의 name의

정보도 받은 상태이기 때문에, oo (이)가 추가 되었다고 표현할 수 있게 된다.

 

6.

location.href = 'a.jsp' 를 통해서,

장바구니에 상품을 담고, 메인페이지로 돌아가게 한다.

 

 

[ c.jsp ]

 

 

1.

결제 페이지 이다.

 

session에 로그인한 회원의 정보가 계속 유지 되어있기 때문에,

mid 속성의 값을 get 할 수 있는 상황 이다.

 

2.

결제 페이지 에서도,  session 주체가 cart 속성의 값을 get 하는 모습이다.

 

그것을 cart 참조변수에 담은 모습 이다.

이것을 이렇게 표현한 이유는, 상품 목록을 출력 하기 위해서 인데,

자바 문법 표현을 위해서, 15번째 라인 처럼 코드를 작성한 것이다.

 

for each 문을 통해서, 상품을 출력 한다.

 

ol 태그 내부에 list 형식으로, 상품을 출력 하는 모습 이다.

 

3.

다시 메인 페이지로 돌아갈 수 있도록,

a태그 내부에 a.jsp 링크가 달려 있는 모습을 볼 수 있다.

 

 

[ d.jsp ]

 

 

1.

d.jsp 페이지는 로그인 페이지를 의미 한다.

 

2.

로그인이 됬을 때,

즉, 사용자가 form 태그 내부에서 mid 의 값을 d.jsp 로 submit을 해준다.

 

이렇게 전송된 데이터는, request.getParameter("mid") 로 받을 수 있다.

 

그놈을 String mid 변수에 저장 하고,

 

로그인된 회원의 mid 정보를 session 주체가 set 하게 한다.

"mid" 라는 속성의 값을 set 할거야 ~ 그 값은 mid 야 ~

 

3.

session 주체도 로그인 정보를 set 했고, 로그인도 끝났으니,

다시 메인페이지로 돌아가야 해서,

response.sendRedirect("a.jsp") 를 작성한 모습 이다.

 

 

 

[ e.jsp ]

 

 

1.

로그인한 사용자가 로그아웃을 눌렀을 때, 진입하게 되는 e.jsp 파일 이다.

 

2.

session이 가지고 있는 mid 속성의 값을 없애야 하기 때문에,

session.removeAttribute("mid") 를 해준다.

 

또한,

session이 cart 속성의 정보도 들고 있기 때문에,

그놈도 remove 해주는 모습이다.

 

3.

표현 방법의 차이인데,

session.setAttribute("mid", null) 로 작성해도 같은 의미가 된다.

mid 라는 속성의 값을 null 로 해줘 ~

 

4.

로그아웃이 끝나면, 메인페이지로 돌아가야하니,

a.jsp로 sendRedirect 를 해주는 모습 이다.

 

[ 참고 ]