☃️ Day 054 

• ShoppingMall

 🌟 js함수, CSS, ActionFactory, Dao는 맨 아래에 한 번에 정리 

 🎄 우편번호 찾기 

 🎁 FindZipNumAction 

• zip.sql로 전국 우편번호를 DB에 미리 저장해놨음
  (옛날 방식이지만 DB연습겸 DB에서 우편번호를 찾아 회원가입시 멤버DB에 저장하는 방식으로 만들어봄)
• 어제 만든 join.jsp에서 우편번호 찾기 버튼을 클릭하면 자바스크립트 함수 post_zip()에서 호출되는 클래스
  (post_zip()는 맨 아래 member.js에 정리)
• ActionFactory에 command가 fideZipNum일 때 코드를 추가하고 FindZipNumAction 클래스를 생성
• 단순히 member/findZipNum.jsp로 이동하는 클래스임
  (findZipNum.jsp는 팝업창으로 열릴 것임)

 🎁 member/findZipNum.jsp 

• 우편번호를 검색할 팝업창이며 재검색도 할 수 있어야 함
• 팝업창으로 열릴 것이므로 include를 사용하지 않는다.
  (html, head, body 적어야 하고, jstl도 사용해야하므로 import 까먹지 말 것!!)
• result(zip_num, sido, gugun, dong)은 JavaScript함수이다. 맨 아래에 member.js에 정리!!
  이 함수는 우편번호나 주소를 클릭하면 팝업창의 opener(join.js)에 우편번호와 주소를 입력란에 입력하고 스스로 닫는 함수

 🎁 AddressVo 

• Dao에서 DB에 접속하여 우편번호를 검색하고 주소를 받아오려면 ADDRESS 테이블의 레코드를 받아서 담을 객체가 필요하다.
• 따라서 AddressVO를 만들어야 한다.

 🎄 회원 가입 

 🎁 JoinAction 

• join.jsp에서 입력란에 필요한 데이터를 입력받고 가입버튼을 클릭하면 먼저 js함수 go_save()를 호출해서 필수 입력사항을 입력받았는지, 아이디 중복체크를 했는지 비밀번호와 비밀번호 확인은 일치하는지 등을 확인 한 후 ActionFactory로 이동한다.
• command가 join일 때 JoinAction 객체를 생성하는 코드를 입력한 후 JoinAction 클래스를 생성한다.
• JoinAction은 입력받은 데이터들을 받아서 Dao로 보내 DB에 회원정보를 insert한 후 로그인 화면으로 이동한다.
  (MemberDao의 insertMember(mvo)메서드는 맨 아래 정리)

 🎄 회원 정보 수정 

 🎁 추가 : header.jsp (정보 수정) 

<li><a href="shop.do?command=editForm">정보수정</a></li>

 🎁 추가 : sub_image_menu.html (Member Edit) 

<li><a href="shop.do?command=editForm">Member Edit</a></li>

 🎁 EditFormAction 

• 회원 정보 수정과 관련된 버튼이나 a태그를 클릭하면 command에 'editForm'을 담아서 이동한다.
• EditFormAction 클래스는 updateForm.jsp로 이동하는 클래스

 🎁 updateForm.jsp 

• join.jsp와 거의 비슷한 구조, 로그인한 사용자의 정보를 가지고 이동하며, id는 수정불가, 패스워드는 다시 입력하도록 한다.

 🎁 MemberUpdateAction 

• updateForm.jsp에서 정보수정 버튼을 클릭하면 JS함수 go_update()를 호출한다.
• 이 함수는 필수입력사항 등을 확인하고 form의 input값들을 summit하는 함수이다.
• go_save()와 거의 유사한 내용이며, 맨 아래에 정리
• MemberUpdateAction은 updateForm.jsp에서 받은 입력값을 MemberVO객체에 담아 Dao의 updateMember(mvo)의 전달인수로 전달한다.
• updateMember()메서드는 전달받은 객체를 가지고 DB의 레코드를 update한다 (맨 아래 MemberDao에 한번에 정리)

 🎄 카테고리 탭 

 🎁 수정 : header.jsp (카테고리 탭) 

• 카테고리 메뉴의 a태그의 href내용 수정 및 추가

 🎁 CategoryAction 

• command가 category일 때는 kind의 값도 같이 가지고 이동
• CategoryAction은 pdao의 selectKindProductList(kind)를 호출한다. 이 메서드는 같은 kind값을 가진 product의 레코드들을 각각 ProductVO 객체에 담고, 이 객체들을 ArrayList에 넣어서 리턴하는 메서드이다.
  (맨 아래에 ProductDao에 정리)

 🎁 product/sub_image_menu.html 

• productKind.jsp에 inclued할 서브메뉴 (카테고리 탭)

 🎁 product/productKind.jsp 

• 카테고리 별로 상품 리스트가 보여질 페이지
• 상품 이미지나 이름을 클릭하면 상품 상세 페이지로 이동
  href="shop.do?command=productDetail&pseq=${productVO.pseq}"

 🎁 수정 : main.jsp (제품 페이지) 

• 메인의 베스트상품과 신상품태그에도
  href="shop.do?command=productDetail&pseq=${productVO.pseq}"
  코드를 추가해서 상품을 클릭하면 상세 페이지로 이동할 수 있도록 수정한다.

 🎄 제품 상세 페이지 

 🎁 ProductDetailAction 

• pseq를 전달받아서 상품 하나를 조회하고, 조회된 상품을 request에 넣어서 productDetail.jsp로 이동

 🎁 product/productDetail.jsp 

 🎄 장바구니 담기 

• 상품 상세 페이지에서 장바구니 담기 버튼을 클릭하면 제품의 정보와 로그인한 사용자의 정보를 가지고 CART테이블에 insert하고 로그인한 사용자가 cart에 넣고 order하지 않는 레코드들을 조회해서 cartList 페이지로 (장바구니 페이지) 이동한다.
• 장바구니 페이지에서는 cart에 넣은 상품들을 보여주고 총액을 알려준다. 상품을 장바구니에서 삭제하는 버튼도 만든다.
• 수량을 변경하거나 같은 상품끼리 수량을 합칠 수는 없지만 현재 배운 것에서 최대한 구현해보는 장바구니이다.

 🎁 CartVO 

• CART테이블에 레코드를 추가하기 위해서는 데이터를 담을 객체가 필요하다 -> CartVO 생성
• 이때, CART테이블이 아니라 cart_view를 기준으로 VO를 만들어야 한다. 왜냐하면 장바구니페이지 에서는 cart_view를 조회하여 데이터를 이용할 예정이기 때문이다.

 🎁 CartInsertAction 

• 상품 페이지에서 '장바구니에 담기' 버튼을 클릭하면 JS함수 go_cart() 호출한다.
• go_cart()는 수량을 확인하고(빈칸이 입력되지 않았는지) commane=cartInsert를 가지고 이동
• 만약 로그인하지 않은 상태라면 로그인 페이지로 이동
• CartInsertAction은 cartVO에 전달된 파라미터들을 넣고 CART테이블에 레코드를 추가한다.
• DB에 insert하기 위해서 CartDao 객체를 생성하고 insertCart(cvo)메서드를 호출한다.
• 그 후 command=cartList를 가지고 이동한다.

 🎁 CartListAction 

• 로그인 유저의 아이디로 카트리스트를 검색해서 리턴받고 리퀘스트에 저장하여 이동 한다.
  이 때 장바구니 물품을 모두 구매했을 때 결제할 금액을 계산한다.
  list에서 상품을 하나하나 꺼내서 price2*quantity를 합산하는 방법으로 계산한다.

 🎁 수정 : header.jsp (cart list 이동) 

<li><a href="shop.do?command=cartList">CART</a></li>

 🎁 mypage/cartList.jsp 

• 장바구니의 리스트를 보여질 페이지
• css를 추가함 (아래에 정리)

 🎁 mypage/sub_image_menu.jsp 

• 장바구니 페이지에서 보여질 서브메뉴
  

 🎄 장바구니 삭제 

 🎁 CartDeleteAction 

• 장바구니 페이지에서 해당 상품의 오른쪽에 radio태그를 체크하고 '삭제하기' a태그를 클릭하면 go_cart_delete()라는 JS함수를 호출한다.
  go_cart_delete()함수의 내용을 맨 아래 mapage.js에 정리
• radio버튼 태그에 각 레코드의 cseq정보를 가지고 있으므로 JS함수에서는 이 정보를 가지고 CartDeleteAction 객체가 호출되도록 한다. (js함수 ➡️ ActionFactory ➡️ CartDeleteAction)
• 전달받은 cseq가 2개 이상일 수도 있으므로 배열로 전달 받는다.
  레코드 삭제는 for문을 사용하여 하나씩 꺼내서 하나씩 삭제하도록 한다. (CartDao의 deleteCart(cseq) 메서드 호출)

 🎄 JavaScript 함수 

 🎁 mypage/mypage.js 

• mypage폴더에 새로 만든 js파일
• 장바구니 관련 함수 정리

 🎁 member/member.js 

• 추가된 함수만 정리

 🎁 css/shopping.css 

• 추가된 내용 정리

 🎄 ActionFactory 

 🎄 Dao 

 🎁 CartDao 

• 새로 생성한 Dao

 🎁 ProductDao 

 🎁 MemberDao 

• selectAddress(String dong)에서 sql문 만들 때 %?%사용 시 주의해서 작성하기
  '%'||?||'%'로 작성해야 ?가 문자 그대로 해석되지 않는다.

 ✨ 정리 

• 지금까지 배웠고 사용했던 방법들이지만 복잡해지고 신경써야 할 디테일들이 많으므로 복습을 잘 해야 함!!!