semiproject

semi index.jsp 1/10

index.jsp회원가입이용후기 로그인장바구니헤어상품

커트!펌!

삼평동으로!��

��

팀원소개지도

로그인�없시�장바구니�진입시alert()으로�알려주고�로그인폼으로�보낸다

semi hair_cart.jsp 2/10

hair_cart.jsp

이미지 상품명� �수량 판매가격�

� � � �

� � � �

� � � �

�총�합 � 총�수량�자바스크립트로�연산 총�가격을�자바스크립트로�연산

‒‒‒

상품상세보기에서선택한�수량�그대로�가져온

다

쇼핑하기 예약하기

클릭시�hair_list.jsp로�이동 추가�구현사항click시�예약하기로�이동

hair_reserve.jsp추가구현�실패시�DB에만�void로�반영

+‒ 1

헤어상품 장바구니 이용후기 로그인 회원가입

이미지�클릭시�상품�상세보기hair_detail.jsp로�이동

semi hair_detail.jsp 3/10

hair_detail.jsp

이미지�클릭시상세�정보�페이지로

이동한다hair_detail.jsp

헤어상품 헤어상품 헤어상품

헤어상품

헤어상품

헤어상품 헤어상품

상품명�클릭시�자바스크립트�이용숨겨진�상세�정보를�보여준다

4�X�4�액자�적용


semi hair_list.jsp 4/10

hair_list.jsp

상품이름 �

�가격 �

�상세정보 �

�수량 �

장바구니 예약하기

로그인이�되어있지�않다면alert�후!

로그인�폼으로�보낸다

그�후�로그인�성공위치는�미정

예약�성공�후�void로�DB반영만�체크하며그�후�페이지�반영은�추가구현

alert창장바구니�보기

상품이�담겼습니다장바구니로�이동하시겠습니까?

OK Cancel

현�위치�머물기click시cart_hair.jsp로�이동


semi login.jsp 5/10

login.jsp

현�위치에계속�머문다

실패시�폼�리셋�후�포커스

성공시�index.jsp로이동한다

••••

ID

로그인 회원가입

헤더에�자바스크립트�hide�적용하여�로그인폼을�숨기기�추가구현으로�빠짐

Ajax�적용alert�아닌�화면에�실패시�

알림

상황�안좋을�시에는�alert


semi register.jsp 6/10

register.jsp

중북확인시�alert이�아닌Ajax�적용하여�본문에다가�알려주고�해당�텍스트�리셋

후�포커스�적용한다.

실패시�추가구현으로�빼고alert�적용

아이디

비밀번호

이름

abc

0000 0000

@ 이메일�선택

회원가입

취소

중복확인

회원가입�성공시alert활용

취소�클릭시�index.jsp�이동

확인�클릭시index.jsp로�이동

XXX님회원가입을�축하합니다.

확인


010

input�text�입력양식�빈값�체크시HTML5�기능�required�이용하여적용

semi review_board.jsp 7/10

review_board.jsp

회원일�경우에만�보이는�버튼

NO� 제목� 작성자 날짜 �조회수

� � � �

� � � � �

� � � � �

� � � � �

� � � � �

� � � � �

< 1 2 3 4 > 글쓰기

회원이�클릭하면review_postiong.jsp�로�이동


이용후기를작성하는�게시판

추가구현�시간�생길�시에는글쓰기버튼을�열어놓고회원아닐시에�로그인�페이지로��넘겨버린다

semi review_content.jsp 8/10

review_content.jsp

review_board.jsp�로�이동

내용

제목

목록 수정 삭제

2016-10-18 조회수�1

no.�99 id�삼평동

수정�and�삭제�모두클릭�시�alert을�띄운다

해당�작업�수행�후review_board.jsp�로

이동

수정�or�삭제하시겠습니까?

OKCancel

그냥�alert�창�닫기


semi review_update.jsp 9/10

review_update.jsp

수정�완료�후alert()을�띄운다

수정�가능한�것은오로지�제목과�내용뿐

제목

수정완료

날짜�(수정불가) 조회수�(수정불가)

no.�99 id�삼평동


review_content.jsp로�이동

수정하시겠습니까?

OK창닫기

semi review_posting.jsp 10/10

review_posting.jsp

내용작성

글�작성�후review_detail로�이동

제목

id�삼평동

글쓰기 취소

클릭�시�목록review_board.jsp로�이동


semiproject

Business