배운 내용을 가지고 MVC파트로 나눠서 코드를 작성해 보았다.
M의 할일 으로는
1. DTO 요구사항을 보고 테이블 구조를 정의한다.
2. DTO는 테이블로 condition을 세팅한다.
3. 변수명을 최대한 동일하게 사용한다.
4. DTO 1개당 CRUD를 확인한다.
V 의 할일 으로는
1. 페이지 개수가 몇개인지 파악한다.
2. 페이지 내부의 버튼 개수를 파악한다.
3. 페이지가 이동되는지???, 기능을 수행하러가는것인지??? 확인한다.
4. C와 함께 다음 페이지로 넘어갈 때 어떤 데이터를 몇개 주는지 파악한다.
5. C와 함께 본 페이지로 넘어올 때 어떤 데이터를 몇 개 받아오는지 파악한다.
ex)
main.jsp로 넘어올때는 로그인 여부 정보가 넘어와야 한다.
상품 목록들이 넘어와야 한다.
상품 선택 버튼을 누르면 어떤 상품을 선택했는지를 넘겨야한다.
상품 검색 버튼을 누르면 어떤 카테고리로, 어떤 데이터를 검색했는지 넘겨야한다.
C 의 할일 으로는
1. A 페이지 >>> B 페이지로 연결하는 작업을 한다.
2. A 페이지에서 전송한 데이터가 무엇이고, 몇개인지 파악한다.
3. B 페이지가 필요한 데이터가 무엇이고, 몇개인지 파악한다.
나눈 역할을 토대로 쇼핑몰 프로그램을 설계해 봤다.
[ 요구 사항 ]
1) View 페이지
main.jsp
1. 로그인했을때
로그아웃 버튼 / 마이페이지 버튼 / 장바구니 버튼
2. 로그인안했을때
로그인 버튼 / 회원가입 버튼
3. 상품 목록 출력
상품 선택 버튼
4. 상품 검색 버튼
mypage.jsp
1. 이름변경 버튼
2. 회원탈퇴 버튼
3. 메인으로 돌아가기 버튼
join.jsp
1. 회원가입 버튼
2. 메인으로 돌아가기 버튼
cart.jsp
1. 장바구니 목록 출력
상품 선택 버튼
2. 구매
3. 메인으로 돌아가기 버튼
product.jsp
1. 상품 설명 출력
2. 장바구니에 추가 버튼
3. 메인으로 돌아가기 버튼
admin.jsp
1. 상품추가 버튼
2. 상품삭제 버튼
2) Model (dto/dao)DBMS
ProductDTO
int num
String name
String details
int price
int cnt
String seller
MemberDTO
String mid
String password
String name
String role
나와 팀원2명은 함께 View 파트를 맡았고, 나는 그 중 product와 cart 페이지를 맡았다.
<cart.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="product.ProductDTO, java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>장바구니 페이지</title>
<style>
/* ul의 기본 불릿을 없애기 위한 CSS */
ul {
list-style-type: none; /* 불릿을 제거 */
padding: 0; /* 여백 제거 */
margin: 0; /* 여백 제거 */
}
li {
margin-bottom: 10px; /* 항목 사이에 여백 추가 */
}
</style>
</head>
<body>
<%
ArrayList<ProductDTO> datas=(ArrayList<ProductDTO>)request.getAttribute("cart"); // c한테 장바구니 받아올거야!!
%>
<div id="cartlist">
### 장바구니 목록 ###
<ul> <!-- unorderList로 목록 작성 -->
<%-- <form action="ctrl_cart.jsp" method="GET"> <!-- 폼 만든 뒤 --%>
<form action="ctrl_cart.jsp" method="POST"> <!-- 폼 만든 뒤 -->
<%
for(ProductDTO data:datas) { // 배열만큼 비교해서 // 장바구니 안에 목록들 전체 출력
%>
<label><li><input type="checkbox" name="cart_product" value=<%= data.getNum() %>>
<!-- 1. 상품 선택을 checkbox로 해서 구매하고 싶은 상품만 선택 후 -->
<!-- PK값만 보낸다.(다시 얘네 가격만 더해서 줘) -->
상품명 : <%= data.getName()+" " %>
재고 : <%= data.getCnt()+" " %>
가격 : <%= data.getPrice()+" " %>
</li></label> <!-- 장바구니에 담긴 상품들 ul로 모두 출력 -->
<%
}
%>
<input type="submit" value="구매"> <!-- 2. 구매버튼 누르면 -->
</form> <!-- 컨트롤에게 해당 데이터 보냄 -->
</ul>
</div>
<button onclick="location.href='main.jsp'">메인으로 돌아가기</button> <!-- 3. 메인으로 돌아가는 버튼 -->
</body>
</html>
<product.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="product.ProductDTO"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 페이지</title>
</head>
<body>
<%
ProductDTO data=(ProductDTO)request.getAttribute("data"); // c한테 데이터값 받아와서
//ProductDTO data=(ProductDTO)request.getAttribute("product"); // c한테 데이터값 받아와서
%>
<h2> 상품 설명 출력 </h2>
<p>---- <%=data.getName()%> 의 정보 ----</p> <!-- 상품이름 -->
<ul> <!-- unorderlist로 출력할거야 -->
<li>정보 : <%= data.getDetails() %></li> <!-- 1) 상품 상세정보 -->
<li>가격 : <%= data.getPrice() %></li> <!-- 2) 상품 가격 -->
<li>재고 : <%= data.getCnt() %></li> <!-- 3) 상품 재고 -->
<li>판매자 : <%= data.getSeller() %></li> <!-- 4) 상품 판매자 이름 -->
</ul>
<!-- 2.장바구니에 추가 버튼 상품을 선택하고 추가 버튼을 눌렀을 때 CONTROLLER 페이지로 지금 보고 있는 상품의 데이터 전달 -->
<form action="ctrl_cart_insert.jsp" method="GET"> <!-- 폼만들어서 -->
<%--<form action="controller.jsp" method="GET"> <!-- 폼만들어서 --> --%>
<input type="hidden" value="<%= data.getNum() %>" name="num"> <!-- 사용자 눈에 보이지않게 PK값 저장한뒤 -->
<%-- <input type="hidden" value="<%= data.getNum() %>" name="product_num"> <!-- 사용자 눈에 보이지않게 PK값 저장한뒤 -->--%>
<input type="submit" value="장바구니에 추가" > <!-- 장바구니에 추가버튼 누르면 -->
</form> <!-- PK값 C한테 전달 -->
<!-- 3. 메인으로 돌아가기 버튼 메인으로 돌아가기 버튼을 눌렀을 때 메인 페이지로 돌아감 (상품 전체 목록을 출력해주는 화면 /
로그인 직후 화면) -->
<button onclick="location.href='main.jsp'">메인으로 돌아가기</button> <!-- 버튼 누르면 메인화면으로 돌아간다. -->
</body>
</html>
2024.08.12
'WEB' 카테고리의 다른 글
| [WEB] 05. SQL 정규화 (0) | 2024.08.14 |
|---|---|
| [WEB] 06. View의 가독성을 올려주는 3가지 방법 (0) | 2024.08.14 |
| [WEB] 03-1. Session scope 맞추기 (0) | 2024.08.12 |
| [WEB] 03. JSP 내장 객체 (0) | 2024.08.07 |
| [WEB] 02-2. JSP의 스크립트릿(JAVA 공간)을 JAVA파일로 나누기 (0) | 2024.08.06 |
