본문 바로가기
웹 개발/쇼핑몰 프로젝트(개인)

쇼핑몰 만들기(9)-고객 페이지(쇼핑몰 메인페이지, 회원가입)

osy9907 2024. 4. 18. 18:41
728x90
 

쇼핑몰 만들기(8)-고객 페이지

쇼핑몰 만들기(7)-카테고리 관리 쇼핑몰 만들기(6)-상품 관리(상품 수정, 삭제) 쇼핑몰 만들기(5)-상품 관리 쇼핑몰 만들기(4)-관리자 상세보기, 부트스트랩 적용 2024.04.05 - [웹 개발] - 쇼핑몰 만들

broad-backend.tistory.com

 

메인페이지를 구현해봤다.

메인 페이지

 

customerGoodsList.jsp

<%@page import="shop.dao.GoodsDAO"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	/* 상품 목록 페이징 */
	
	// 현재 페이지 구하기
	int currentPage = 1;	// 현재페이지
	if(request.getParameter("currentPage") != null) {
		currentPage = Integer.parseInt(request.getParameter("currentPage"));
	}
	
	// currentPage 세션 값 설정
	session.setAttribute("currentPage", currentPage);
	
	// 페이지당 보여줄 row 수
	int rowPerPage = 30;
	
 	// select 박스로 rowPerPage 구하기
 	if(request.getParameter("rowPerPage") != null) {
 		rowPerPage = Integer.parseInt(request.getParameter("rowPerPage"));
 		session.setAttribute("customerGoodsRowPerPage", rowPerPage);
 	}
 	
	if((session.getAttribute("customerGoodsRowPerPage")) != null) {
		rowPerPage = (int)(session.getAttribute("customerGoodsRowPerPage"));
	}
	
	// category 요청 값
	String category = request.getParameter("category");
	
	// category 세션 값 설정
	if(category == null) {
		category = "all";
		session.setAttribute("category", category);
	} else {
		session.setAttribute("category", category);
	}
	
	// 전체 goods 수
	int totalGoodsRow = GoodsDAO.getTotalGoods();
	
	// 카테고리별 goods 수
	int goodsPerCategoryRow = GoodsDAO.selectGoodsPerCategory(category);
	
	// 카테고리별(전체 포함) 마지막 페이지 구하기
	int lastPage = goodsPerCategoryRow / rowPerPage;
	if(goodsPerCategoryRow % rowPerPage != 0) {
		lastPage += 1;
	}
		
	// 페이지당 시작할 row
	int startRow = (currentPage - 1) * rowPerPage;
	
%>

<%	
	/* 카테고리명, 카테고리 별 상품 수 구하기 */
	ArrayList<HashMap<String, Object>> goodsCntPerCategory = GoodsDAO.selectGoodsCntPerCategory();
%>

<%
	/* 상품 목록 출력하기(category, page조건을 맞춰서) */
	ArrayList<HashMap<String, Object>> goodsList = GoodsDAO.selectGoodsList(startRow, rowPerPage, category);
%>

<%
	// 디버깅 코드
// 	System.out.println("CustomerGoodsList - currentPage 세션 값 = " + session.getAttribute("currentPage"));	// currentPage 세션 값 체크
// 	System.out.println("CustomerGoodsList - category = " + category);
// 	System.out.println("CustomerGoodsList - category 세션 값 = " + session.getAttribute("category"));	// category 세션 값 체크
// 	System.out.println("CustomerGoodsList - rowPerPage 세션 값 = " + session.getAttribute("rowPerPage"));	// rowPerPage 세션 값 체크
// 	System.out.println("CustomerGoodsList - totalGoodsRow = " + totalGoodsRow);
// 	System.out.println("CustomerGoodsList - goodsPerCategoryRow = " + goodsPerCategoryRow);
// 	System.out.println("CustomerGoodsList - lastPage = " + lastPage);
// 	System.out.println("CustomerGoodsList - startRow = " + startRow);
	
// 	System.out.println("CustomerGoodsList - goodsCntPerCategory = " + goodsCntPerCategory);
	
// 	System.out.println("CustomerGoodsList - goodsList = " + goodsList);
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<!-- 메인 메뉴 -->
	<jsp:include page="/customer/inc/customerMenu.jsp"></jsp:include>
	<div>
		<!-- 사이드바 - 서브메뉴 카테고리별 상품리스트 -->
		<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:15%">
			<h3 class="w3-bar-item">카테고리</h3>

			<a href="/shop/customer/goods/customerGoodsList.jsp" class="w3-bar-item w3-button">전체(<%=totalGoodsRow%>)</a>
			<%
				for(HashMap m : goodsCntPerCategory) {
			%>

					<a href="/shop/customer/goods/customerGoodsList.jsp?category=<%=(String)(m.get("category")) %>" class="w3-bar-item w3-button">
						<%=(String)(m.get("category")) %>
						(<%=(Integer)(m.get("cnt")) %>)
					</a>

			<% 
				}
			%>
		</div>
		
		<!-- goodsList 본문 -->
		<div style="margin-left:15%; ">
			<div class="row" style="padding:20px 5%;">
				<div class="col-9">
					<h1 style="display: inline-block;">상품 목록</h1>
				</div>
				
				<div class="col" style="display: inline-block;">
					<form action="/shop/customer/goods/customerGoodsList.jsp">
						<select name="rowPerPage">
							<option value="">선택</option>
							<option value="10">10개씩 보기</option>
							<option value="30">30개씩 보기</option>
							<option value="50">50개씩 보기</option>
						</select>
						<input type="hidden" value="<%=category%>" name="category">
						<button type="submit">보기</button>
					</form>
				</div>
			</div>
			
			<!-- goods 목록 출력 -->
			<div>
				<div class="row" style="margin: 0 3%;">				

					<%
						for(HashMap<String, Object> m : goodsList) {
					%>
							
							<div class="col-md-3" style="height: 300px; margin: 20px 10px; width: 17%;">
							
								<div class="w3-card-2" style="height: 100%;">
							
									<!-- 상품 이미지 -->
									<div class="w3-border-bottom" style="text-align: center; height: 70%; padding-bottom: 5%;">
										<a href="/shop/customer/goods/customerGoodsOne.jsp?goodsNo=<%=m.get("goodsNo")%>">
											<img alt="" src="/shop/upload/<%=m.get("imgName") %>" style="max-width: 100%; height: 100%;">
										</a>	
									</div>
									
									<!-- 상품 내용(이름, 가격) -->
									<div style="height: 30%; text-align: center;">
									
										<div style="margin-top: 10%;">
											<a href="/shop/customer/goods/customerGoodsOne.jsp?goodsNo=<%=m.get("goodsNo")%>">
												<%=m.get("goodsTitle") %>
											</a>
										</div>
										
										<div>
											<%=m.get("goodsPrice") %>원
										</div>
										
									</div>
								
								</div>
							
							</div>
							
			
					<%
						}
					%>
	
				</div>
			</div>
			
			
			
			<!-- 페이징 버튼 -->	
			<div class="w3-bar w3-center">
		
				<%
					if(currentPage > 1) {
				%>	
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=1">처음페이지</a>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=currentPage-1%>">이전페이지</a>
				<%		
					} else {
				%>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=1">처음페이지</a>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=1">이전페이지</a>
				<%		
					}
		
					if(currentPage < lastPage) {
				%>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=currentPage+1%>">다음페이지</a>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=lastPage%>">마지막페이지</a>
				<%		
					} else {
				%>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=lastPage%>">다음페이지</a>
						<a class="w3-button" href="/shop/customer/goods/customerGoodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=lastPage%>">마지막페이지</a>
				<%
					}
				%>
		
			</div>
		</div>
		
	</div>
	
</body>
</html>

 

현재페이지 변수를 설정해놓고 요청값에 따라 값을 교체해주고 세션변수에 담는다

rowPerPage(페이지당 보여줄 상품 개수), category도 마찬가지다

 

그리고 카테고리별로 마지막 페이지의 수를 구하기 위해 카테고리별로 goods수도 구했다.

int totalGoodsRow = GoodsDAO.selectTotalGoods();

int goodsPerCategoryRow = GoodsDAO.selectGoodsPerCategory(category);

를 사용했다.

 

selectTotalGoods

/* 전체 goods 수 구하기 */
public static int selectTotalGoods() throws Exception{
    int totalGoodsRow = 0;

    // DB 연결
    Connection conn = DBHelper.getConnection();

    // 전체 goods Row 구하기
    String selectTotalGoodsRowSql = "SELECT COUNT(*) cnt FROM goods";
    PreparedStatement selectTotalGoodsRowStmt = null;

    // category
    selectTotalGoodsRowStmt = conn.prepareStatement(selectTotalGoodsRowSql);

    ResultSet selectTotalGoodsRowRs = selectTotalGoodsRowStmt.executeQuery();

    if(selectTotalGoodsRowRs.next()) {
        totalGoodsRow = selectTotalGoodsRowRs.getInt("cnt");
    }

    conn.close();
    return totalGoodsRow;
}

selectGoodsPerCategory

/* 카테고리별 goods Row 구하기 */
public static int selectGoodsPerCategory(String category) throws Exception{
    int goodsPerCategoryRow = 0;

    // DB 연결
    Connection conn = DBHelper.getConnection();

    // 카테고리별 goods 수 구하기
    String selectGoodsPerCategoryRowSql = "SELECT COUNT(*) cnt FROM goods WHERE 1 = 1";
    PreparedStatement selectGoodsPerCategoryRowStmt = null;

    // category
    if(category.equals("all")) {
        selectGoodsPerCategoryRowStmt = conn.prepareStatement(selectGoodsPerCategoryRowSql);
    } else {
        selectGoodsPerCategoryRowSql = selectGoodsPerCategoryRowSql + " " + "AND category = ?";
        selectGoodsPerCategoryRowStmt = conn.prepareStatement(selectGoodsPerCategoryRowSql);
        selectGoodsPerCategoryRowStmt.setString(1, category);
    }

    ResultSet selectTotalGoodsRowRs = selectGoodsPerCategoryRowStmt.executeQuery();

    if(selectTotalGoodsRowRs.next()) {
        goodsPerCategoryRow = selectTotalGoodsRowRs.getInt("cnt");
    }

    conn.close();
    return goodsPerCategoryRow;
}

 

goodsDAO에 있는 두 개의 메소드이다.

그 다음은 카테고리별로 마지막 페이지를 구해줘야한다.(상품의 개수가 모두 다르기 때문에)

또한 페이지를 넘길때마다 시작할 데이터의 row가 달라져야 하기때문에 startRow라는 변수에 값을 구해 담는다.

 

그 후 사이드 바의 카테고리들 옆에 수량을 표시해주기 위해 list에 각 카테고리별 상품의 수를 구해 담았고

카테고리, 시작 row, 페이지당 보여줄 상품 수를 매개변수로 메서드에 전달해줬다.

/* 카테고리명, 카테고리 별 상품 수 구하기 */
ArrayList<HashMap<String, Object>> goodsCntPerCategory = GoodsDAO.selectGoodsCntPerCategory();

/* 상품 목록 출력하기(category, page조건을 맞춰서) */
ArrayList<HashMap<String, Object>> goodsList = GoodsDAO.selectGoodsList(startRow, rowPerPage, category);

 

여기까지가 Controller단이었다.

view는 이미지로 대신하여 보여주겠다.

 

 

다음은 고객의 회원가입 기능을 구현하겠다

회원가입 버튼을 누르면 아래의 페이지로 이동한다

회원가입 폼

 

가장 처음은 아이디 중복 확인이다

이메일 형식이며, 지금은 4가지 중에 선택해야하지만, 후에는 직접입력도 구현하고자 한다.

아이디를 입력 후 중복 확인을 누르면, 사용가능한지 불가능한지 확인 할 수 있고,

사용가능하다면, 중복확인 버튼 아래의 id 칸에 해당 아이디가 작성된다.

좌 : 사용 가능한 아이디 / 우 : 이미 존재하는 아이디

 

 

나머지 값들을 입력 후 회원가입을 하면 로그인 페이지로 이동하고, 로그인을 하면 성공이다!

 

insertCutomerForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- Controller Layer -->
<%@ include file ="/customer/inc/customerLoginSessionCheck.jsp" %>

<%
	// 요청 값 
	String customerId = request.getParameter("customerId");
	String errMsg = request.getParameter("errMsg");
	
	// null값 넘어올 시 공백으로 바꾸기
	if(customerId == null) {
		customerId = "";
	}
	// 요청 값 디버깅
	System.out.println("insertCustomerForm - customerId = " + customerId);
	
%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>회원가입</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="/shop/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
	<!-- 메인 메뉴 -->
	<jsp:include page="/customer/inc/customerMenu.jsp"></jsp:include>
	<div class="col"></div>
	
	<div class="col">
		<div class="w3-border w3-round" style="margin-top: 20px;">
		
			<div class="w3-container w3-dark-grey " style="padding: 10px;">
				<h1>회원 가입</h1>
			</div>	
			
			<div class="w3-card-4">
			
				<!-- 고객 아이디 중복 체크 -->
				<div>
					<form class="w3-container" action="/shop/customer/signup/checkIdAction.jsp" method="post">
						<label>id 중복 확인</label>
						<div class="input-group mb-3">
							<input class="form-control" type="text" name="checkIdFirst" style="width: 45%;">
							<input class="form-control" type="text" value="@" readonly="readonly" name="checkIdMiddle" style="width: 5%;">
							<select class="form-control" style="width: 45%;" id="email" name="checkIdLast">
								<option value="">email을 선택해주세요</option>
								<option value="naver.com">naver.com</option>
								<option value="google.com">google.com</option>
								<option value="daum.net">daum.net</option>
								<option value="nate.com">nate.com</option>
							</select>
						</div>
						
						<button class="btn btn-outline-secondary" type="submit">중복확인</button>
						<!-- 에러 메시지 출력 -->
						<%
							if(errMsg != null) { 
						%>
								<span><%=errMsg %></span>
						<%
							}
						%>
					</form>
					
				</div>
				
				<!-- 회원가입 폼 -->
				<div>
					<form class="w3-container" action="/shop/customer/signup/insertCustomerAction.jsp" method="post">
						<div>
							<div>
								<label>id</label>
								<input class="w3-input" type="text" value="<%=customerId %>" name="customerId" required="required" readonly="readonly">
							</div>
							
							<label>pw</label>
							<input class="w3-input" type="password" name="customerPw" required="required">
							
							<label>이름</label>
							<input class="w3-input" type="text" name="customerName" required="required">
							
							<label>생년월일</label>
							<input class="w3-input" type="date" name="customerBirth" required="required">
							
							<label>성별</label>
							<p>
							<input class="w3-radio" type="radio" name="customerGender" value="남" required="required">
							<label>남</label>
							<input class="w3-radio" type="radio" name="customerGender" value="여" required="required">
							<label>여</label>
						</div>
						
						<div style="text-align: center; margin: 10px auto;">
							<button class="btn btn-outline-secondary" type="submit" style="width: 60%;">회원가입</button>
						</div>
						
					</form>
				</div>

			</div>
			
		</div>
		
	</div>
	
	<div class="col"></div>
</div>
</body>
</html>

 

중복확인 후에 넘어올 customerId를 요청 값으로 받는다

 

중복확인 버튼 클릭 시 checkIdAction.jsp로 넘어간다.

checkIdAction.jsp

<%@page import="java.util.HashMap"%>
<%@page import="shop.dao.CustomerDAO"%>
<%@page import="java.net.URLEncoder"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- Controller Layer -->
<%@ include file ="/customer/inc/customerLoginSessionCheck.jsp" %>

<%
	// 요청 값
	String checkIdFirst = request.getParameter("checkIdFirst");
	String checkIdMiddle = request.getParameter("checkIdMiddle");
	String checkIdLast = request.getParameter("checkIdLast");

	// 요청 값 디버깅
	System.out.println("checkIdAction - checkIdFirst = " + checkIdFirst);
	System.out.println("checkIdAction - checkIdMiddle = " + checkIdMiddle); 
	System.out.println("checkIdAction - checkIdLast = " + checkIdLast); 

	// 요청 값 하나라도 null이거나 공백일 경우
	if(checkIdFirst == null || checkIdMiddle == null || checkIdLast == null 
		|| checkIdFirst.equals("") || checkIdMiddle.equals("") || checkIdLast.equals("")) {
		
		String errMsg = URLEncoder.encode("ID를 정확히 입력해주세요.", "UTF-8");
		response.sendRedirect("/shop/customer/signup/insertCustomerForm.jsp?errMsg=" + errMsg);
		return;
	}
	// customerID 종합해서 추가
	String checkCustomerId = checkIdFirst + checkIdMiddle + checkIdLast;
	// 요청 값 디버깅
	System.out.println("checkIdAction - checkCustomerId = " + checkCustomerId); 
	
%>

<%
	// 고객 아이디 중복 체크
	boolean canUseId = CustomerDAO.checkDuplicatedId(checkCustomerId);
	
	if(canUseId) {
		// 아이디 사용 가능
		String errMsg = URLEncoder.encode("사용 가능한 아이디 입니다", "UTF-8");
		response.sendRedirect("/shop/customer/signup/insertCustomerForm.jsp?errMsg=" + errMsg + "&customerId=" + checkCustomerId);
		
	} else {
		// 아이디가 중복
		String errMsg = URLEncoder.encode("이미 존재하는 ID입니다.", "UTF-8");
		response.sendRedirect("/shop/customer/signup/insertCustomerForm.jsp?errMsg=" + errMsg);
	}
	
%>

 

아이디 첫번째인 checkIdFirst와

@인 checkIdSecond, 이메일 부분인 checkIdThird를 요청 값으로 받고, null값인지 체크 한 후 

아이디를 조합한다.

조합된 아이디를 DB에서 조회해서 없으면 사용가능하므로 회원가입 form jsp파일로 넘겨주고, 나머지 값들을 입력한뒤 회원가입 버튼을 누르면 되는 것이다.

728x90

'웹 개발 > 쇼핑몰 프로젝트(개인)' 카테고리의 다른 글

쇼핑몰 만들기(11)-고객 페이지(주문하기)  (0) 2024.04.22
쇼핑몰 만들기(10)-고객 페이지(상품 상세페이지, 고객 마이페이지(회원정보 수정 및 탈퇴)  (0) 2024.04.22
쇼핑몰 만들기(8)-고객 페이지  (1) 2024.04.18
쇼핑몰 만들기(7)-카테고리 관리  (0) 2024.04.15
쇼핑몰 만들기(6)-상품 관리(상품 수정, 삭제)  (0) 2024.04.15

'웹 개발/쇼핑몰 프로젝트(개인)' Related Articles

티스토리툴바