JSP 활용한 간단한 쇼핑몰 페이지

JSP를 활용하여 간단한 쇼핑몰 기능들을 구현해보도록 하겠습니다.

1. 로그인 페이지

우선은 간단히 아이디로만 로그인을 한다고 생각해보겠습니다.
로그인 페이지에서는 아이디를 입력 받고 submit을 진행하면, uid라는 이름으로 입력받은 아이디와 함께 shop_product.jsp로 이동합니다.

2. 상품 목록

• - 3~5번째 라인:
• 로그인 페이지에서 uid라는 이름으로 넘겨받은 데이터는 request이기 때문에 scope 상 다음 페이지로 이동할 때 데이터가 유지되지 않습니다.
• 그렇기 때문에 브라우저 단위의 session scope에 입력받은 아이디를 저장합니다.
• - 17 ~ 28번째 라인:
• 선택할 수 있는 상품들을 select 태그를 이용하여 드롭다운으로 선택할 수 있도록 하였습니다.
• 25번째 라인에서 장바구니에 추가 버튼을 누르면 선택된 데이터와 함께 shop_add.jsp로 넘어가게 됩니다.
• shop_add.jsp에서 선택된 상품이 추가됩니다.
• 28번째 라인에서 "결제하기"를 클릭하면 GET 방식으로 shop_result.jsp 페이지로 넘어갑니다. shop_result.jsp 페이지는 장바구니에 담긴 상품 목록을 볼 수 있는 페이지입니다.

3. 장바구니

• - 2번째 라인:
• 코드 작성하는 부분에서 ArrayList를 사용하기 때문에 ArrayList를 사용하기 위해 import해주었습니다.
• - 4번째 라인:
• 한글로 되어있는 데이터를 처리하기 위해 UTF-8로 설정해주었습니다.
• - 5 ~ 12번째 라인:
• 이전 페이지에서 product라는 이름으로 form 태그를 통해 데이터를 보내줬기 때문에 다른 페이지로 넘어가면 데이터가 사라집니다.
• 그렇기 때문에 6번째 라인에서 session을 통해 브라우저 scope로 ArrayList 타입으로 데이터를 저장합니다.
• 이 때, datas에 데이터가 없는 경우, 6번째 라인에서 null이 되기 때문에, 만약 datas가 null일 경우 ArrayList를 생성합니다.
• 6번째 라인 이후에는 datas에는 기존에 있던 데이터들이 들어있게 되고, 12번째 라인에서 datas에 이전 페이지에서 넘어온 데이터가 담기게 됩니다.
• - 23 ~ 24번째 라인:
• 23번째 라인에서는 이전 페이지에서 선택한 데이터가 장바구니에 추가되었다는 것을 alert를 통해 알립니다.
• 24번째 라인에서는 이전 페이지로 돌아가게 됩니다.

4. 결제하기

• - 2번째 라인:
• 코드 작성하는 부분에서 ArrayList를 사용하기 때문에 ArrayList를 사용하기 위해 import해주었습니다.
• - 4번째 라인:
• 한글로 되어있는 데이터를 처리하기 위해 UTF-8로 설정해주었습니다.
• - 13번째 라인:
• 지금까지 선택한 데이터들을 datas에 담고 있는데, 이를 받아옵니다.
• - 14 ~ 22번째 라인:
• 14 ~ 16번째 라인에서는 만약 선택한 물품이 없다면, 선택한 상품이 없다는 것을 화면에 출력하여 알려줍니다.
• 16 ~ 22번째 라인에서는 선택한 물품들을 ordered list 형식으로 화면에 출력하게 합니다.