본문 바로가기

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

쇼핑몰 만들기(4)-관리자 상세보기, 부트스트랩 적용

728x90

2024.04.05 - [웹 개발] - 쇼핑몰 만들기(3)-관리자 리스트, 관리자 메뉴, 권한 변경

 

쇼핑몰 만들기(3)-관리자 리스트, 관리자 메뉴, 권한 변경

쇼핑몰 만들기(2)-관리자 로그인,로그아웃 쇼핑몰 만들기(1)-관리자페이지 두번째 개인 프로젝트로 쇼핑몰을 만드려고 한다. 일단은 관리자페이지 먼저 구상을 조금씩 해놓고 코드를 구현할 것

broad-backend.tistory.com

 

 

아무래도 기능을 완성 시킨 후에 css나 부트스트랩을 적용하면 혼란스러울거 같아서 적용시키면서 기능도 구현하기로 했다.

 

엄청 기본적인 부트스트랩을 사용했고, w3school에서 제공하는 w3.css도 함께 사용해보고자 했다.

https://www.w3schools.com/w3css/default.asp

 

W3.CSS Home

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

부트스트랩, css를 적용한 empList의 모습

오른쪽 상단의 프로필 이미지를 클릭하면 로그인 돼있는 관리자의 상세정보를 볼 수 있다.

이름을 주인으로 해놨다.

관리자의 상세정보

 

세션에 저장돼있는 loginEmp변수의 empId를 이용해 [DB]shop.emp의 데이터들을 가져왔다.

그 후 ResultSet을 HashMap으로 변환해줬다.(키 값으로 저장, ResultSet은 JDBC API에 종속적이라 좋지않음)

 

그리고 View단에 모두 get메소드를 사용해 값들을 가져와 출력했다!

 

empOne.jsp

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

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

<%
	HashMap<String, Object> loginMember = (HashMap<String, Object>)(session.getAttribute("loginEmp"));
%>
<%
	// 1. 특수한 형태의 데이터(RDBMS:mariaDB)
	// 2. API 사용(JDBC API)해 자료구조(ResultSet) 획득
	// 3. 일반화된 자료구조(ex. List, Set 등)로 변경 -> 모델 획득
	
	/* DB 연결 및 초기화 */
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/shop", "root", "****");
	
	// [DB]shop.emp에서 empId의 모든 정보 가져오는 쿼리
	String getEmpDataSql = "SELECT emp_id empId, grade, emp_name empName, emp_job empJob, hire_date hireDate, update_date updateDate, create_date createDate, active FROM emp WHERE emp_id = ?";
	PreparedStatement getEmpDataStmt = null;
	ResultSet getEmpDataRs = null;
	
	getEmpDataStmt = conn.prepareStatement(getEmpDataSql);
	getEmpDataStmt.setString(1, (String)(loginMember.get("empId")));
	getEmpDataRs = getEmpDataStmt.executeQuery();
	
	// ResultSet -> HashMap 변환
	HashMap<String, Object> empInfo = new HashMap<String, Object>();
	if(getEmpDataRs.next()) {
		empInfo.put("empId", getEmpDataRs.getString("empId"));
		empInfo.put("grade", getEmpDataRs.getString("grade"));
		empInfo.put("empName", getEmpDataRs.getString("empName"));
		empInfo.put("empJob", getEmpDataRs.getString("empJob"));
		empInfo.put("hireDate", getEmpDataRs.getString("hireDate"));
		empInfo.put("updateDate", getEmpDataRs.getString("updateDate"));
		empInfo.put("createDate", getEmpDataRs.getString("createDate"));
		empInfo.put("active", getEmpDataRs.getString("active"));
	}
%>
<!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>
<div class="row">
<!-- 메인 메뉴 -->
<jsp:include page="/emp/inc/empMenu.jsp"></jsp:include>

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

	<div class="col-4">
		<table class="w3-table w3-centered w3-card-4 w3-bordered" style="margin-top: 50px; width: 100%;">
			<thead class="w3-dark-grey">
				<tr>
					<td colspan="3">
						<h1><%=empInfo.get("empName") %>의 상세정보</h1>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>직원 ID</th>
					<td>
						<%=empInfo.get("empId") %>
					</td>
				</tr>
				<tr>
					<th>권한 등급</th>
					<td>
						<%=empInfo.get("grade") %>
					</td>
				</tr>
				<tr>
					<th>이름</th>
					<td>
						<%=empInfo.get("empName") %>
					</td>
				</tr>
				<tr>
					<th>직급</th>
					<td>
						<%=empInfo.get("empJob") %>
					</td>
				</tr>
				<tr>
					<th>고용일</th>
					<td>
						<%=empInfo.get("hireDate") %>
					</td>
				</tr>
				<tr>
					<th>정보 수정일</th>
					<td>
						<%=empInfo.get("updateDate") %>
					</td>
				</tr>
				<tr>
					<th>정보 생성일</th>
					<td>
						<%=empInfo.get("createDate") %>
					</td>
				</tr>
				<tr>
					<th>권한</th>
					<td>
						<%=empInfo.get("active") %>
					</td>
				</tr>
			</tbody>
		</table>
		
	</div>
	
	<div class="col"></div>
</div>
</body>
</html>
728x90