2 of 75

이동하기

sopang

Spring Framework를 이용한 쇼핑몰 웹개발 기획서

WS ↔ WAS

web.xml

servlet-context.xml

request ↔ response

History

기획일정

기능요약

Tool & FrameWork

pom.xml

DB 설계

tiles

기능별 상세화면

이동하기

3 of 75

웹 애플리케이션의 동작, 서버에서 데이터까지

WS ↔ WAS 페이지를 제공하는 서버

web.xml 실행정보 제공하는 web.xml

servlet-context.xml 화면정보 제공하는 servlet-context.xml

request ↔ response 데이터의 요청 request

데이터의 응답 response

4 of 75

WS WAS

클라이언트의 요청에 따라 정적은 WS, 동적은 WAS가 제공한다.

↔

<!DOCTYPE html>

<title>stylseheet</title>

</head>�<body>� <div class="fixed-top bg-light">

<a class="skills text-decoration-none fw-bold h5 " data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop"

href="#offcanvasExample"></a>

<div>

<a href="#" class="text-decoration-none px-2 ps-0">kakao</a>

</div>

Apache

WAS

Apache Tomcat

클라이언트가 페이지를 요청시

모든 클라이언트에게 동일하게 보여줘야 하는 상품상세(정적페이지)와 클라이언트마다 달리 보여야하는 마이(동적페이지) 등이 있다.

정적페이지의 경우 WS(Web Server)가 바로 제공하며

동적페이지의 경우 WS가 WAS(Web Application Server)에 요청, WAS는 Database와 연동 및 구현을 하여 WS에 페이지를 제공한다.

5 of 75

애플리케이션 실행정보를 담고 있는 Web.xml에 기술된 jsp를 매핑하는 context에는 root-context.xml, servlet-context.xml가 있다.

이 둘은 부모/자식 관계로 각각 jdbc(bean)와 mybatis 경로를 설정하고, Interceptor, tiles 등을 설정하는 등 역할을 분담해 관리한다.

Spring은 이 과정을 개발자가 쉽게 할 수 있도록 애너테이션등의 기능을 제공해 도와준다.

WAS

Apache Tomcat

web.xml

애플리케이션은 web.xml이 실행한다.

Web.xml - root-context.xml

- servlet-context.xml

6 of 75

servlet-context.xml

사용자의 요청에 따라 interceptor, controller, tiles를 거쳐 화면을 띄우도록 Dispatcher한다.

web.xml에

DispatcherServlet로 정의된 이 servlet-context.xml는

<servlet-name>appServlet</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

Web.xml - root-context.xml

- servlet-context.xml

사용자의 요청패턴에 따라

interceptor를 거치거나, 거치지않고 Controller에 진입한다.

<mvc:interceptor>

<mvc:mapping path="/*/*.do"/>

<mvc:mapping path="/*/*/*.do"/>

<beans:bean class="com.myspring.common.interceptor.ViewNameInterceptor" />

</mvc:interceptor>

</mvc:interceptors>

7 of 75

Web.xml - root-context.xml

- servlet-context.xml

controller는 ModelAndView로 리턴되어

<context:component-scan base-package="com.myspring" />

<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">

<beans:property name="definitions">

<beans:list>

<beans:value>classpath:tiles/*.xml</beans:value>

</beans:list>

</beans:property>

<beans:property name="preparerFactoryClass" value="org.springframework.web.servlet.view.tiles2.SpringBeanPreparerFactory"/>

</beans:bean>

tiles.xml로 넘어가 조합된 페이지를 띄우게된다.

servlet-context.xml

사용자의 요청에 따라 interceptor, controller, tiles를 거쳐 화면을 띄우도록 Dispatcher한다.

8 of 75

request response

Servlet, Spring annotation, Ajax를 이용해 요청하고 응답합니다.

↔

Servlet 으로 값, 파일 받기

request.getAttribute(), 값

MultipartHttpServletRequest, 파일

jdbc api를 이용하여 db에 접근

Spring annotation 으로 값, 객체로 받기

@RequestParam(), 값

@RequestParam Map<String, String>, 값 전체

@ModelAttribute(), 모델객체로

Mybatis 프레임워크를 이용해 처리

Ajax로 json형태 주고받기

javascript를 이용해 비동기적으로 db에 접근

→

9 of 75

request response

Servlet, Spring annotation, Ajax를 이용해 요청하고 응답합니다.

↔

@responsebody

json형태로 응답하기

Model and view

데이터와 뷰이름을 함께 전달해 응답하기

ResponseEntity

응답 상태 코드를 포함해 응답

←

10 of 75

sopang 기획_ History, 일정, 기능요약

History 31일 이후로부터의 수정 / 버전업 기록

기획일정 31일 기준 기획일정과 추후 계획

기능요약 주요기능 및 서비스 내용 요약

11 of 75

History

변경/추가 내용을 기술합니다

Ver.	Date.	Content.	이동하기
0.x	230331	기획완료
1.0	230412	구현완료, 기존기획에서 아래와 같이 3건변경, 1건 추가로 구현됨.
		버튼식 주문조회 변경
		최근본상품 변경
		회원관리 변경
		상품상세페이지 - 수량선택기능 삭제
		top버튼 추가
	230502	결제서비스 추가 (신용카드, 카카오, 네이버)

이동하기

12 of 75

페이지에 사용될 서식/기능

(html, css, javascript, plugin)

stylesheet 23.03.28 ~ 23.03.29

페이지별 화면/기능구현

Java (servlet, spring, mybatis, tiles, maven)

Backend 23.04.03 ~ 23.04.14

기획일정

주요기능 및 서비스 내용 요약

페이지별 화면/기능 구현

(stylesheet, javascript, plugin)

Frontend 23.03.29 ~ 23.03.31

화면/기능 테스트 및 보완

Test 23.04.14 ~ 23.04.15

결제서비스 접목

API

결제 23.05.00 ~ 23.05.00

배포

화면/기능 테스트 및 보완

Test 23.04.14 ~ 23.04.15

13 of 75

페이지/기능	내용	이동하기
회원가입	아이디 중복체크 , 비밀번호 확인, input 필수입력 여부확인, 회원가입 결과 안내 및 화면이동, 로그인 화면이동
로그인	회원조회, input 필수입력 여부확인, 로그인 여부, 회원정보 session 저장, 로그인 결과 안내 및 화면이동, 회원가입 화면이동
로그아웃	로그아웃, 로그인여부, 회원정보 session 삭제, top-bar 메뉴변경 및 화면이동
Header	카테고리이동, 카테고리 select, 마이소팡 이동, 장바구니 이동, 추천키워드, 상품검색
메인	Hero 영역 tab 구현, 추천상품 tab구현
카테고리 리스트	카테고리 선택시 menuGoods.jsp 이동
검색결과리스트	상품검색시 searchGoods.jsp 이동
상품상세	이미지 뷰어, 상품정보 뿌리기, 장바구니 담기, 바로구매하기
	quickMenu 상세페이지 방문시 최근본상품 에 추가, quickMenu 장바구니 카운팅

기능요약

주요기능 및 서비스 내용 요약

이동하기

14 of 75

페이지/기능	내용	Page.
장바구니	장바구니 리스트 뿌리기, 전체 선택하기, 선택상품 리스트 총 주문금액 계산하기
	수량변경하기, 개별 장바구니 상품 삭제하기, 선택 장바구니 상품 삭제하기
	개별주문하기, 선택상품 주문하기
주문하기	주문상품 리스트 뿌리기, 주문금액 계산, 기본배송지 출력 및 수정, 결제하기
주문목록	마이페이지 화면이동, 배송중 count, 장바구니 count, 소팡머니 count, 주문목록 뿌리기, 버튼식 주문조회하기, 주문취소하기
내정보	내 정보 뿌리기, 우편번호검색, 수정하기, 취소하기, 탈퇴하기
상품관리	상품 뿌리기, 버튼식 조회, 상품추가, 상품수정, 상품삭제
주문/배송관리	주문리스트 뿌리기, 버튼식 주문조회, 주문 수정하기
회원관리	회원리스트 뿌리기, 버튼식 회원조회 , 회원수, 회원삭제

기능요약

주요기능 및 서비스 내용 요약

이동하기

■ 관리자

15 of 75

sopang 기획_ Tool & FrameWork, pom.xml

Tool & FrameWork 사용 툴 및 프레임워크 요약

pom.xml 프레임워크, 라이브러리, 플러그인 요약

16 of 75

IDE	Eclipse, VisualStudioCode, SublimeText
DBMS	Oracle RDBMS
WAS	Apache Tomcat
BuildTool	Maven
FrameWork	Spring, Mybatis, Tiles

Tool & FrameWork

사용 툴 및 프레임워크 요약

17 of 75

구분	버전	요약
Spring	spring-context 4.1.1.RELEASE	스프링 애플리케이션 핵심 컨테이너
	spring-webmvc 4.1.1.RELEASE	스프링 MVC 핵심 모듈, 컨트롤러, 뷰(view), 모델(model) 상호작용
	spring-aop 4.1.1.RELEASE	애너테이션을 사용해 로직을 추가
AspectJ	aspectjrt 1.6.10	AspectJ 애플리케이션 실행
	aspectjweaver 1.6.10	런타임에 AOP기능을 적용
	aspectjtools 1.6.10	컴파일, 디버깅 기능제공
slf4j	slf4j-api 1.6.6	로깅을 위한 인터페이스 제공
	jcl-over-slf4j 1.6.6	jcl(Jakarta Commons Logging)라이브러리를 SLF4J 인터페이스로 변환
	slf4j-log4j12 1.6.6	SLF4J 인터페이스를 사용해 로깅을 수행하며 log4j 라이브러리를 사용하는 브릿지역할
	log4j 1.2.15	자바 로깅 라이브러리, 다양한 로깅출력방식 지원

pom.xml

프레임워크, 라이브러리, 플러그인 요약

■ 주요기술

18 of 75

구분	버전	요약
Inject	inject 1	javax.inject패키지에서 제공하는 @lnject 애너테이션을 통해 의존성 주입을 구현
Servlet	servlet-api 2.5	서블릿기술을 구현하기 위한 라이브러리
	jsp-api 2.1	JSP 기술을 구현하기 위한 라이브러리
	jstl 1.2	JSP에서 태그형태로 제공하는 라이브러리로 반복문/조건문 등을 직관적으로 작성
junit	junit 4.7	단위테스트 프레임워크, 코드수행결과를 확인해 코드의 정확성/신뢰성을 검증하는 기능
JDBC	OracleDriver 12.1.0.2.0	자바언어에서 오라클 데이터베이스와의 연동을 하기위한 드라이버
mysql	mysql 5.1.29	데이터베이스 관리시스템
myBatis	commons-beanutils 1.8.0	속성값을 문자열, map등으로 변환해 가져오는 등 자바 beans사용이 쉽도록 도우는 라이브러리
	commons-dbcp 1.2.2	데이터연결을 풀에 저장해 요청할때마다 연결을 제공해 애플리케이션 성능을 향상
	mybatis 3.1.0	SQL을 자바코드에서 분리해 XML등의 형태로 처리해 작성하도록 도움
	mybatis-spring 1.1.0	SqlSessionFactory를 생성하고 SqlSession을 관리해 Mybatis와 스프링의 쉬운연동을 도움

pom.xml

프레임워크, 라이브러리, 플러그인 요약

■ 주요기술

19 of 75

구분	버전	요약
sqlSessionFactory	cglib-nodep 2.2	노드 의존성, 런타임시에 클래스를 생성하거나 수정하는 기능등을 지원
tiles	tiles-core 2.2.2	Apache Tiles의 핵심기능, Tiles를 정의하고 조합해 전체 페이지 생성
	tiles-jsp 2.2.2	JSP에서 Apache Tiles를 사용할 수 있도록 지원
	tiles-servlet 2.2.2	Servlet에서 Apache Tiles를 사용할 수 있도록
fileupload	commons-io 2.4	파일/디렉토리 복사,삭제등의 작업을 간단한 코드로 처리하는 메서드 제공
	commons-fileupload 1.3.1	파일업로드 기능 제공
jquery	jquery 2.2.1	HTML 문서와 상호작용하기 위한 다양한 기능 제공, 비동기적 데이터주고받기위한 기법 Ajax
thumbnailator	thumbnailator 0.4.8	이미지 리사이징,자르기,회전,필터링 등의 작업을 수행
json	json-lib 2.4	자바객체를 JSON으로, JSON을 자바객체로 변환하는 등 자바에서 JSON 데이터를 다룸

pom.xml

프레임워크, 라이브러리, 플러그인 요약

■ 주요기술

20 of 75

구분	버전	요약
maven	maven-eclipse-plugin 2.9	Maven 프로젝트를 Eclipse 프로젝트로 변환하기 위한 플러그인
	maven-compiler-plugin 2.5.1	Maven을 사용해 Java 프로젝트를 빌드할때 사용하는 컴파일러 플러그인
	exec-maven-plugin 1.2.1	표준입출력, 출력, 에러출력 등 Maven 외부명령어나 스크립트를 실행하기 위한 플러그인
mesir-repo	-	http://mesir.googlecode.com/svn/trunk/mavenrepo
		오라클 드라이버 라이센스

pom.xml

프레임워크, 라이브러리, 플러그인 요약

■ 주요기술

21 of 75

sopang 기획_ DB 설계

DB 설계 회원, 상품, 상품이미지, 장바구니, 주문 테이블의 구성

22 of 75

DB 설계

회원, 상품, 상품이미지

장바구니, 주문 테이블

23 of 75

sopang 기획_ tiles

tiles 공통레이아웃과 공통섹션

24 of 75

공통레이아웃

views.common.layout.jsp

공통섹션

views.common.header.jsp

views.common.quickMenu.jsp

views.common.footer.jsp

tiles

회원가입/로그인 페이지를 제외한 모든 페이지에 적용

25 of 75

sopang 기획_ 기능별병 상세화면

기능별 상세화면 31일 기준 세부 구현계획

26 of 75

view	views.member.addMember.jsp	title	회원가입	Description

아이디 중복체크 비밀번호 확인 input 필수입력 여부확인 회원가입 결과 안내 및 화면이동 로그인 화면이동
01	keyup시 fn_overlapped() /member/overlapped.do Ajax 결과에 따라 input의 표시와 안내문구를 달리 띄움. input에 removeClass/addClass is-valid/is-invalid div valid-feedback/invalid-feedback에 removeClass/addClass d-none
02	blur시 비밀번호 확인 input의 value와 동일하지 않을경우 input에 removeClass/addClass is-valid/is-invalid div valid-feedback/invalid-feedback에 removeClass/addClass d-none
03	2-1) 모든 input이 입력되지않았을 경우 안내문구 d-block + btn disabled 2-2) 회원정보 db저장 MemberVO형 데이터로 받아 insertNewMember sql실행, db저장 /member/addMember.do @ModelAttribute("memberVO") MemberVO memberVO mapper.member.insertNewMember <insert id="insertNewMember" parameterType="memberVO"> 2-3) 성공/실패 여부 안내 및 화면이동 ResponseEntity 회원가입 스크립트(성공/실패 안내 + location.href) 반환
04	로그인 화면이동 "${contextPath}/member/login.do"

27 of 75

view	views.member.login.jsp	title	로그인	Description

회원조회 input 필수입력 여부확인 로그인 여부, 회원정보 session 저장 로그인 결과 안내 및 화면이동 회원가입 화면이동
01	2-1) 모든 input이 입력되지않았을 경우 안내문구 d-block + btn disabled 2-2) 결과여부에 따라 ModelAndView 반환 성공시 setViewName("redirect:/main/main.do"); session.setAttribute("isLogOn", true"); session.setAttribute("memberInfo",memberVO”); 실패시 alert("아이디/비밀번호를 다시 확인해주세요.") setViewName("/member/loginForm");
02	회원가입 화면이동 "${contextPath}/member/addMember.do"

28 of 75

view	views.member.header.jsp	title	로그아웃	Description

로그아웃 로그인여부, 회원정보 session 삭제 top-bar 메뉴변경 및 화면이동
01	로그아웃 "/logout.do" 로그인여부, 회원정보 session 삭제 session.setAttribute("isLogOn", false); session.removeAttribute("memberInfo"); [회원명] 님 클릭시 마이페이지로 이동 "/myPageMain.do" top-bar 회원이름 삭제 및 화면이동 removeClass/addClass d-none mav.setViewName("redirect:/main/main.do"); member_id가 admin일 경우 관리자 메뉴 show "${isLogOn==true and memberInfo.member_id =='admin' }" "/adminMemberMain.do"

29 of 75

view	views.member.header.jsp	title	Header	Description

카테고리이동 카테고리 select 마이소팡 이동 장바구니 이동
01	카테고리 dropdown 각 카데고리 클릭시 "/menuGoods.do" @RequestParam("menuWord") String menuWord goodsDAO.selectGoodsList("카테고리이름") mapper.goods.selectGoodsList 조회 "menuGoods.do" 이동
02	카테고리 select
03	마이소팡, 마이페이지로 이동 "${contextPath}/mypage/myPageMain.do"
04	장바구니 페이지로 이동 "${contextPath}/cart/myCartList.do"

30 of 75

view	views.member.header.jsp	title	메인	Description

추천키워드 상품검색
01	추천키워드 onKeyUp할때 keywordSearch()실행, url : "${contextPath}/goods/keywordSearch.do“ "/goods/keywordSearch.do" @RequestParam("keyword") String keyword @ResponseBody String mapper.goods.selectKeywordSearch 추천키워드 창 활성화 후 db 뿌려주기 .keywordSearchList removeClass d-none 상품검색 및 페이지이동 "/goods/searchGoods.do" @RequestParam("searchWord") String searchWord mapper.goods.selectGoodsBySearchWord sql 상품 조회

31 of 75

view	views.member.main.jsp	title	메인	Description

Hero 영역 tab 구현
01	Bootstrap list tab + position을 이용해 구현

32 of 75

view	views.member.main.jsp	title	메인	Description

추천상품 tab구현
01	Bootstrap list tab + position을 이용해 구현
02	"/menuGoods.do" 을 통해 카테고리별 상품 db 가져오기

33 of 75

view	views.member. menuGoods.jsp	title	카테고리 리스트	Description

카테고리 선택시 menuGoods.jsp 이동
01	카데고리 클릭시 "/menuGoods.do" @RequestParam("menuWord") String menuWord goodsDAO.selectGoodsList("카테고리이름") mapper.goods.selectGoodsList 조회 "menuGoods.do" 이동 카테고리 정보 ${goods_sort}
02	각 상품 정보 뿌리기 이동url "${contextPath}/goods/goodsDetail.do?goods_id=${item.goods_id}" 썸네일 "${contextPath}/thumbnails.do?goods_id=${item.goods_id}&fileName=${item.goods_fileName}"> 타이틀 ${item.goods_title} 가격 ${goods_price}

34 of 75

view	views.member. searchGoods.jsp	title	검색결과리스트	Description

상품검색시 searchGoods.jsp 이동
01	각 상품 정보 뿌리기 이동url "${contextPath}/goods/goodsDetail.do?goods_id=${item.goods_id}" 썸네일 "${contextPath}/thumbnails.do?goods_id=${item.goods_id}&fileName=${item.goods_fileName}"> 타이틀 ${item.goods_title} 가격 ${goods_price}

35 of 75

view	views.goods.goodsDetail.jsp	title	상품상세	Description

이미지 뷰어 상품정보 뿌리기 quickMenu 상세페이지 방문시 최근본상품 에 추가 장바구니 담기 quickMenu 장바구니 카운팅 바로구매하기
01	Bootstrap list tab을 이용해 구현 썸네일 표시 "${contextPath}/thumbnails.do?goods_id=${goods.goods_id}&fileName=${goods.goods_fileName}"
02	이미지 표시 "${contextPath}/download.do?goods_id=${goods.goods_id}&fileName=${image.fileName}"
03	상품정보 뿌리기 "/goodsDetail.do" @RequestParam("goods_id") String goods_id goodsService.goodsDetail() ${goods_sort} ${goods.goods_title } ${goods.goods_sales_price}
04	상품상세 이미지 리스트 for문으로 돌림 "${contextPath}/download.do?goods_id=${goods.goods_id}&fileName=${image.fileName}"
05	상세페이지 방문시 최근본상품 리스트에 추가 최근본 상품 리스트 12개 제한 4개씩 3슬라이드 노출 addGoodsInQuick(goods_id,goodsVO,session); 230412 기록 슬라이드를 접목해 15개까지 보여주는것으로 기획되었으나 3개만정렬 + 3개가 넘어갈시 최근본상품으로 덮어쓰여지는 방식으로 변경

36 of 75

view	views.goods.goodsDetail.jsp	title	상품상세	Description

이미지 뷰어 상품정보 뿌리기 quickMenu 상세페이지 방문시 최근본상품 에 추가 장바구니 담기 quickMenu 장바구니 카운팅 바로구매하기
01	수량선택후 장바구니 담기: 수량기본값 1, 수량제한 7 장바구니담기 javascript:add_cart('${goods.goods_id }') url : "${contextPath}/cart/addGoodsInCart.do“ "/cart/addGoodsInCart.do" @RequestParam("goods_id") int goods_id @ResponseBody String 장바구니 상품 중복 여부 확인후 안내 alert() mapper.cart.selectCountInCart else if(data.trim()=='already_existed') alert("이미 카트에 등록된 상품입니다, 장바구니에서 수량을 변경해주세요."); mapper.cart.insertGoodsInCart if(data.trim()=='add_success') alert("장바구니에 추가되었습니다."); 수량선택삭제, 바로구매시 1개로 제한
02	바로 구매하기 ＂javascript:루_order_each_goods(＇${goods.goods_id }＇,＇${goods.goods_title }＇,＇${goods.goods_sales_price}＇,＇${goods.goods_filename}＇);＂ var formObj=document.createElement("form"); formObj.action="${contextPath}/order/orderEachGoods.do"; "/orderEachGoods.do" @ModelAttribute("orderVO") OrderVO _orderVO session.setAttribute("myOrderList", myOrderList); session.setAttribute("orderer", memberInfo); 타일즈설정으로 “/order/orderEachGoods”, “/order/orderAllCartGoods” /WEB-INF/views/order/orderGoodsForm.jsp 레이아웃을 사용함.
03	장바구니 개수 카운트 SELECT COUNT(*) FROM t_shopping_cart

37 of 75

view	views.mypage.myOrder.jsp	title	마이페이지 홈 / 주문목록	Description

마이페이지 화면이동 배송중 count 장바구니 count 소팡머니 count
01	화면이동 "${contextPath}/mypage/myPageMain.do" "${contextPath}/mypage/myCartList.do" "${contextPath}/mypage/myDetailInfo.do"
02	배송중 count SELECT COUNT(*) FROM t_shopping_order WHERE delivery_state = 'delivering' and member_id=#{member_id}
03	장바구니 count SELECT COUNT(*) FROM t_shopping_cart WHERE member_id=#{member_id}
04	소팡머니 count SELECT SOPANG_MONEY FROM t_shopping_member WHERE member_id=#{member_id}

38 of 75

view	views.mypage.listMyOrderHistory.jsp	title	마이페이지 홈 / 주문목록	Description

주문목록 뿌리기 버튼식 주문조회하기 주문취소하기
01	첫 진입시 n개월 전으로 주문조회해 뿌리기 com.bookshop01.common.base BaseController.java if(fixedSearchPeriod == null) {cal.add(cal.MONTH,-6);}
02	버튼식 주문조회하기 "javascript:search_order_history('today')" action="${contextPath}/mypage/listMyOrderHistory.do"; myPageService.listMyOrderHistory(dateMap); mapper.mypage.selectMyOrderHistoryList 230412 기록 최근6개월, 1, 2, 3년전 등으로 기획되었으나 오늘, 최근1, 2, 3, 6개월으로 변경
03	주문취소 "/mypage/cancelMyOrder.do" @RequestParam("order_id") String order_id ModelAndView myPageService.cancelOrder() myPageDAO.updateMyOrderCancel() mapper.mypage.updateMyOrderCancel update t_shopping_order set delivery_state='cancel_order' where order_id=#{order_id}

39 of 75

view	views.mypage.CartList.jsp	title	장바구니	Description

장바구니 리스트 뿌리기 수량변경하기
01	장바구니 리스트 뿌리기 "/cart/myCartList.do" ModelAndView 저장된상품이 없는경우 null, 있는 경우 cartmap을 반환 mapper.cart.selectCartList mapper.cart.selectGoodsList
02	수량변경하기 Select에서 option을 선택할경우 "javascript:modify_cart_qty(${item.goods_id },${item.goods_sales_price },${cnt.count-1});" modify_cart_qty(goods_id,bookPrice,index) $.ajax "${contextPath}/cart/modifyCartQty.do" mapper.cart.updateCartGoodsQty success : function(data, textStatus) { alert("수량을 변경했습니다!!") }

40 of 75

view	views.mypage.CartList.jsp	title	장바구니	Description

개별 장바구니 상품 삭제하기
01	개별 장바구니 상품 삭제하기 "javascript:delete_cart_goods('${cart_id}');" formObj.action="${contextPath}/cart/removeCartGoods.do"; "/cart/removeCartGoods.do" @RequestParam("cart_id") int cart_id cartService.removeCartGoods() cartDAO.deleteCartGoods() mapper.cart.deleteCartGoods

41 of 75

view	views.mypage.CartList.jsp	title	장바구니	Description

개별주문하기 전체 선택하기 선택상품 리스트 총 주문금액 계산하기 선택상품 주문하기
01	개별주문하기 상품상세에서 바로 주문하기와 같음 바로 구매하기 ＂javascript:루_order_each_goods(＇${goods.goods_id }＇,＇${goods.goods_title }＇,＇${goods.goods_sales_price}＇,＇${goods.goods_filename}＇);＂ var formObj=document.createElement("form"); formObj.action="${contextPath}/order/orderEachGoods.do"; "/orderEachGoods.do" @ModelAttribute("orderVO") OrderVO _orderVO session.setAttribute("myOrderList", myOrderList); session.setAttribute("orderer", memberInfo); 타일즈설정으로 “/order/orderEachGoods”, “/order/orderAllCartGoods” /WEB-INF/views/order/orderGoodsForm.jsp 레이아웃을 사용함.
02	전체 선택하기 function selectAll(selectAll) { const checkboxes = document.getElementsByName(''); checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; }) }
03	선택상품 리스트 총 주문금액 계산하기 ${totalGoodsPrice+totalDeliveryPrice}
04	선택상품 주문하기 "javascript:fn_order_all_cart_goods()" "${contextPath}/order/orderAllCartGoods.do" "/order/orderAllCartGoods.do" @RequestParam("cart_goods_qty") ModelAndView

42 of 75

view	views.mypage. orderAllCartGoods.jsp	title	주문하기	Description

주문상품 리스트 뿌리기 주문금액 계산 기본배송지 출력 및 수정 결제하기
01	/order/orderEachGoods, /order/orderAllCartGoods 모두 /WEB-INF/views/order/orderGoodsForm.jsp 레이아웃을 사용 myOrderList를 for문으로 돌려 출력 해당 리스트는 선택해 들어오거나/카트에서 선택해 진입할 수 있음. "/order/orderEachGoods.do" @ModelAttribute("orderVO") OrderVO _orderVO 로그아웃 상태인 경우 로그인 화면으로 이동 if(isLogOn==null \|\| isLogOn==false){ session.setAttribute("orderInfo", _orderVO”); session.setAttribute("action", "/order/orderEachGoods.do"); return new ModelAndView("redirect:/member/login.do");} "/order/orderAllCartGoods.do" @RequestParam("cart_goods_qty") String[] cart_goods_qty ModelAndView
02	For문을 실행하여 총 주문금액을 구함. final_total_order_price=${final_total_order_price+ item.goods_sales_price* item.order_goods_qty}
03	기본배송지는 회원의 정보로 채워지고 회원은 기본배송지를 수정할 수 있다.
04	다음 주소 검색 이용해 구현 "http://dmaps.daum.net/map_js_init/postcode.v2.js"
05	결제하기 "/order/payToOrderGoods.do“ ordertable에 db추가 + 장바구니에서 삭제 mapper.order.insertNewOrder mapper.order.deleteGoodsFromCart 취소하기 메인페이지로 돌아감.

43 of 75

view	views.mypage.myDetailInfo.jsp	title	내정보	Description

내 정보 뿌리기 우편번호검색 수정하기 취소하기 탈퇴하기
01	내 정보 뿌리기 "/mypage/myDetailInfo.do"
02	다음 주소 검색 이용해 구현 "http://dmaps.daum.net/map_js_init/postcode.v2.js"
03	수정하기 "/mypage/modifyMyInfo.do" @RequestParam(""attribute"") @RequestParam(""value"") update를 한뒤 MyDetailInfo를 return해 뿌린다. mapper.mypage.updateMyInfo mapper.mypage.selectMyDetailInfo message = "mod_success"; alert("회원 정보를 수정했습니다."); ResponseEntit
04	취소하기 새로고침 onClick="window.location.reload()"
05	탈퇴하기 admin회원삭제와 같은기능. "/mypage/deleteMyInfo.do" adminMemberService.modifyMemberInfo() adminMemberDAO.modifyMemberInfo() mapper.admin.member.modifyMemberInfo

44 of 75

view	views.admin.adminGoods.jsp	title	상품관리	Description

상품 뿌리기 버튼식 조회 상품추가 상품수정 상품삭제
01	상품목록, 상품뿌리기 "/admin/goods/goodsList.do" @RequestParam Map<String, String> dateMap mapper.admin.goods.selectNewGoodsList ModelAndView
02	버튼식 주문조회하기 마이페이지 홈 / 주문목록 버튼식 주문조회와 흡사하게 구현. "javascript:search_order_history('today')" action="${contextPath}/mypage/listMyOrderHistory.do"; myPageService.listMyOrderHistory(dateMap); mapper.mypage.selectMyOrderHistoryList
03	상품추가, 새로운 tr이 생김 추가클릭 "/admin/goods/addNewGoods.do" mapper.admin.goods.insertGoodsImageFile ResponseEntity
04	상품수정 "/admin/goods/modifyGoods.do" @RequestParam(""goods_id"") int goods_id, @RequestParam(""attribute"") String attribute, @RequestParam(""value"") String value mapper.admin.goods.selectGoodsDetail mapper.admin.goods.selectGoodsImageFileList mapper.admin.goods.deleteGoodsImage mapper.admin.goods.updateGoodsInfo ResponseEntity
05	상품삭제 "/admin/goods/removeGoods.do" @RequestParam(""goods_id"") int goods_id, @RequestParam(""image_id"") int image_id, @RequestParam(""imageFileName"") String imageFileName mapper.admin.goods.deleteGoodsImage

45 of 75

view	views.admin.adminOrder.jsp	title	주문/배송관리	Description

주문리스트 뿌리기 버튼식 주문조회 주문 수정하기
01	주문리스트 뿌리기 주문목록 "/admins/order/orderList.do” @RequestParam Map<String, String> dateMap mapper.admin.order.selectNewOrderList
02	버튼식 주문조회하기 마이페이지 홈 / 주문목록 버튼식 주문조회와 흡사하게 구현. "javascript:search_order_history('today')" action="${contextPath}/mypage/listMyOrderHistory.do"; myPageService.listMyOrderHistory(dateMap); mapper.mypage.selectMyOrderHistoryList
03	주문 수정하기 "/admins/order/modifyOrder.do" @RequestParam Map<String, String> mapper.admin.order.selectOrderDetail mapper.admin.order.selectOrderer mapper.admin.order.updateDeliveryState

46 of 75

view	views.admin.adminMember.jsp	title	회원관리	Description

회원리스트 뿌리기 버튼식 회원조회 회원수정 회원삭제
01	회원리스트 뿌리기
02	버튼식 주문조회하기 마이페이지 홈 / 주문목록 버튼식 주문조회와 흡사하게 구현. "javascript:search_order_history('today')" action="${contextPath}/mypage/listMyOrderHistory.do"; myPageService.listMyOrderHistory(dateMap); mapper.mypage.selectMyOrderHistoryList
03	회원수정 "/admin/member/modifymember.do" mapper.admin.member.modifyMemberInfo 230412 기록 본래 기획에 회원정보수정이 있었으나 위험한 기획이라고 판단해 제하고 회원삭제는 강제탈퇴로 기능명을 바꿔 구현
04	회원삭제 "/admin/member/removeMember.do" mapper.admin.member.modifyMemberInfo ModelAndView

47 of 75

view	모든페이지	title	Top버튼	Description

top버튼
01	230412 기록 Top버튼 리스트가 길어질경우 최상단으로 올라갈 수 있도록 추가함.

48 of 75

view	views.mypage. orderAllCartGoods.jsp	title	결제페이지 - 신용카드	Description

결제방법에 따른 TABLE 레이아웃 변경 결제결과에 따른 페이지 이동
01	신용카드 선택시 결제정보를, 그 외일경우 보이지않는다.
03	결제하기가 완료된 이후, 주문목록페이지로 넘어가며, 결제에 실패한 경우 결제실패페이지로 넘어간다.

49 of 75

view	views.mypage. orderAllCartGoods.jsp	title	결제페이지 - 신용카드	Description

결제실패시 화면이동
01	결제실패사유를 출력한다.
02	모든 레이아웃 및 기능은 주문하기페이지와 동일하며, 해당영역 STYLE만 바뀐다.

50 of 75

구현완료 video

https://github.com/StandOut-0/sopang

다음 구현완료된 video를 감상하시려면 슬라이드쇼 실행 후, 약간의 로딩시간을 거쳐 확인하실 수 있습니다.

외부 미디어 개체에 대한 참조가 차단되었을경우 재생되지않습니다.

재생되지않거나, 빠른 확인을 원하신다면 위의 링크로 이동해주세요.

51 of 75

header