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

쇼핑몰 만들기(7)-카테고리 관리

 

 이제부터는 고객이 보는 페이지를 구현하려고 한다.

아래의 마인드 맵에 따라 페이지 및 기능을 구현하고자 한다

마인드 맵

일단 가장 첫 페이지로는 쇼핑몰의 메인페이지이다. 

메인페이지 왼쪽에는 사이드바로 카테고리를 표시할 것이고, 오른쪽에 상품들의 리스트를 바로 보여줄것이다.

상단에는 쇼핑몰 홈으로가는 페이지 버튼, 최근 본 상품 목록, 주문목록(비회원은 누르면 로그인폼), 고객 마이페이지, 로그아웃버튼(회원일 경우에만 표시)이 있도록 하려고 한다.

 

메인페이지에서 로그인 버튼을 누르면 로그인 창이 뜨고, id, pw를 입력받을것이다.

또한 로그인 버튼, 회원가입 버튼을 둘 예정이다. 회원가입 시 db 테이블에 맞게 입력 받을것이다.

customer 테이블

마이페이지에 들어가면 customer테이블의 데이터를 페이지에 출력시킬 것이다.

 

상품을 클릭하게 되면 상품의 상세정보가 나오고 상세 정보 아래에 주문 버튼을 둘 것이다.

주문 버튼 클릭시 수량, 주소를 입력하고 주문을 하면, 주문 목록으로 이동.

주문 목록에서는 orders테이블의 데이터들을 볼 수 있게 할거다.

orders 테이블

 

그리고 상품을 누르게 되면, 최근본 목록의 세션변수를 만들어 goodsNo를 추가해줄 것이다.

그러면 최근 본 상품 페이지로 이동했을 때 세션변수를 가져와 해당 상품의 이미지를 페이지에 차례대로 출력한다.

이미지를 클릭 할 경우 그 상품의 상세페이지로 다시 이동하게 된다.

 

일단 구상으로는 이정도로 했고,

 

현재까지는 DB를 mariaDB를 사용했으나, 클라우드 환경에서의 DB를 사용해보고 싶어 오라클 클라우드로 변경하려고 한다.

 

그리고 지금까지 한 jsp파일 내에 Model, View, Controller가 있어 관리가 힘들었다.

그래서 지금은 Model만 따로 빼려고 한다.

Model같은 경우는, DB에서 쿼리를 사용해 값들을 가져오는 것들이기 때문에, DAO 클래스를 만들어 따로 분리하고자 한다. 

 

일단 DB 교체를 하며 DB 접근 및 연결 부분도 따로 클래스로 분리해 사용하고자 한다.

DBHelper.java

public class DBHelper {
	public static Connection getConnection() throws Exception {
		// 오라클 DB 접근 클래스 로딩
		Class.forName("oracle.jdbc.driver.OracleDriver");
//		System.out.println("db클래스 로딩 성공");
		
		// 로컬 PC의 Properties 파일 읽어오기
		FileReader fr = new FileReader("D:\\webDevExercise\\auth\\oracledb.properties");
		Properties prop = new Properties();
		prop.load(fr);
		
		String dbUrl = prop.getProperty("dbUrl");
		String dbUser = prop.getProperty("dbUser");
		String dbPw = prop.getProperty("dbPw");
		
		Connection conn = DriverManager.getConnection(dbUrl, dbUser, dbPw);
//		System.out.println("db접근 성공");
		
		return conn;
	}
	
}

 

oracle 클라우드의 전자지갑을 사용했고, url, id, pw를 properties파일을 만들어 분리했다(보안상의 이유로)

 

그리고 DAO는 아래에 예시처럼 모두 변경했다

2024.04.15 - [웹 개발] - 쇼핑몰 만들기(7)-카테고리 관리

쇼핑몰 만들기(7)-카테고리 관리

에서 구현한 카테고리목록 페이지의 Controller 및 Model 코드이다.

dao 사용 전 categoryList

<!-- Controller Layer -->
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>

<!-- Model Layer -->
<%
	/* DB 연결 및 초기화 */
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/shop", "root", "****");
	
	/* [DB]shop.category에서 category와 생성일 가져오는 쿼리 */
	String getCategorySql = "SELECT category, emp_id empId, LEFT(create_date,16) createDate FROM category ORDER BY createDate DESC";
	PreparedStatement getCategoryStmt = null;
	ResultSet getCategoryRs = null;
	
	getCategoryStmt = conn.prepareStatement(getCategorySql);
	getCategoryRs = getCategoryStmt.executeQuery();
	
	// 자료 구조 변경(ResultSet --> ArrayList<HashMap>)
	ArrayList<HashMap<String, Object>> categoryList = new ArrayList<HashMap<String, Object>>();
	while(getCategoryRs.next()) {
		HashMap<String, Object> m = new HashMap<String, Object>();
		m.put("category", getCategoryRs.getString("category"));
		m.put("empId", getCategoryRs.getString("empId"));
		m.put("createDate", getCategoryRs.getString("createDate"));
		categoryList.add(m);
	}
%>
<%
	/* session의 정보 가져오기(grade별로 카테고리 삭제 권한 설정하기 위해) */
	HashMap<String, Object> getSessionMap = (HashMap<String, Object>)(session.getAttribute("loginEmp"));
%>

 

dao 사용 후 categoryList

<!-- Controller Layer -->
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>
<%
	// 카테고리 목록 가져오기
	ArrayList<HashMap<String, Object>> categoryList = CategoryDAO.selectCategoryList();
%>
<%
	/* session의 정보 가져오기(grade별로 카테고리 삭제 권한 설정하기 위해) */
	HashMap<String, Object> getSessionMap = (HashMap<String, Object>)(session.getAttribute("loginEmp"));
%>

 

20줄에 가까웠던 코드가 1줄로 줄어들었다.

또한 사용할 때마다 구현해줬어야했는데 이제 DAO에서 메서드를 실행하면 값을 가져올 수 있게 됐다.

 

아래에 DAO코드이다.

/* 카테고리 목록 출력 */
	public static ArrayList<HashMap<String, Object>> selectCategoryList() throws Exception {
		
		ArrayList<HashMap<String, Object>> categoryList = new ArrayList<HashMap<String, Object>>();
		
		// DB 연결
		Connection conn = DBHelper.getConnection();
		
		/* [DB]shop.category에서 category와 생성일 가져오는 쿼리 */
		String getCategorySql = "SELECT category, emp_id empId, create_date createDate FROM category ORDER BY createDate DESC";
		PreparedStatement getCategoryStmt = null;
		ResultSet getCategoryRs = null;
		
		getCategoryStmt = conn.prepareStatement(getCategorySql);
		getCategoryRs = getCategoryStmt.executeQuery();
		
		// 자료 구조 변경(ResultSet --> ArrayList<HashMap>)
		while(getCategoryRs.next()) {
			HashMap<String, Object> m = new HashMap<String, Object>();
			m.put("category", getCategoryRs.getString("category"));
			m.put("empId", getCategoryRs.getString("empId"));
			m.put("createDate", getCategoryRs.getString("createDate"));
			categoryList.add(m);
		}
		
		conn.close();
		return categoryList;
	}

 

다음 게시글 부터 차례차례 페이지와 기능을 구현해보도록 하겠다