INTP의 멋대로 개발 세상

[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 3. 권한에 따른 header, 상품 상세 페이지 변경 본문

KDT 풀스택 국비 과정/파이널 프로젝트(미니)

[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 3. 권한에 따른 header, 상품 상세 페이지 변경

인팁구름 2023. 4. 26. 11:49

로그인 전 헤더
USER 로그인 후 헤더
ADMIN 로그인 후 헤더

 

로그인 전 / USER 로그인 후 / ADMIN 로그인 후 상품 상세 페이지

 

유저와 관리자로 권한을 나누었기 때문에

권한에 따라 보이는 페이지와 기능들이 달라야 할 것이다.

그 기능을 구현해 보자!!😏😏

 

 

 

⏬ 4단계 프로젝트 세팅 보러가기 ⏬

 

[연습📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 1. 프로젝트 세팅

⏬전체 코드는 아래의 깃 허브에😚⏬ GitHub - JungminK1m/Springboot-Product-Study-V4 Contribute to JungminK1m/Springboot-Product-Study-V4 development by creating an account on GitHub. github.com 드디어 5단계 중 4단계로 넘어왔다!

whiteclouds-dev.tistory.com

 

 

📺 화면 설계📺

 

 

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
        <title>Product</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <style>
            .gitlink {
                text-decoration-line: none;
                color: rgb(255, 105, 138);
                font-weight: bolder;
                background-color: rgb(255, 228, 154);
            }

            .center {
                display: flex;
                justify-content: center;
            }
        </style>

        <body>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <div class="container-fluid">
                    <h3 style="color: white;">🍌 쇼핑몰 🍓</h3>

                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav">

                            <%-- 공통 헤더 --%>
                                <li class="nav-item">
                                    <a class="nav-link" href="/product">상품목록페이지</a>
                                </li>

                                <c:choose>

                                    <%-- 로그인 하지 않았을 때 헤더 --%>
                                        <c:when test="${empty principal}">
                                            <li class="nav-item">
                                                <a class="nav-link" href="/loginForm">구매자 로그인</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="/adminLoginForm">관리자 로그인</a>
                                            </li>
                                        </c:when>

                                        <%-- USER로 로그인 했을 때 헤더 --%>
                                            <c:when test="${principal.role == 'USER'}">
                                                <li class="nav-item">
                                                    <a class="nav-link" href="/ordersList/${principal.userId}">주문조회</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="/logout">로그아웃</a>
                                                </li>
                                            </c:when>


                                            <%-- ${principal.role=='ADMIN' } 일 때 헤더 --%>
                                                <c:otherwise>
                                                    <li class="nav-item">
                                                        <a class="nav-link" href="/productSave">상품등록페이지</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" href="/logout">로그아웃</a>
                                                    </li>
                                                </c:otherwise>

                                </c:choose>
                        </ul>
                    </div>
                </div>
            </nav>
        </body>

        </html>

 

 

productDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ include file="../layout/header.jsp" %>

        <div class="center">
            <div style="margin: 20px;">

                <form type="submit" action="/orders/${productId}" method="post">


                    <%-- productName 과 ordersName 연결하기 --%>
                    <input name="ordersId" type="hidden" value="${product.productId}">
                    <input name="ordersName" type="hidden" value="${product.productName}">
                    <input name="ordersPrice" type="hidden" value="${product.productPrice}">
                    <table border="1" style="width: 500px; height: 200px; text-align: center;">

                        <tr style="border: 1px solid">
                            <th style="background-color: rgb(185, 185, 185)">상품명</th>
                            <th>${product.productName}</th>
                        </tr>
                        <tr style="border: 1px solid">
                            <th style="background-color: rgb(185, 185, 185)">상품명</th>
                            <td>${product.productPrice}원</td>
                        </tr>
                        <tr style="border: 1px solid">
                            <th style="background-color: rgb(185, 185, 185)">상품명</th>
                            <td>
                                <span id="productQty">${product.productQty}</span>
                                <span>개</span>
                            </td>
                        </tr>
                    </table>

                    <c:choose>
                        <%-- 로그인 했을 때만 구매하기 버튼 뜨게 하기 --%>
                        <c:when test="${empty principal}" >
                            <div class="center" style="margin-top: 40px; text-align: center;">
                                <h5>상품을 구매하시려면 로그인 해주세요😀</h5>
                            </div>
                        </c:when>

                        <%-- USER일 때는 구매하기 버튼 뜨게 하기 --%>
                        <c:when test="${principal.role == 'USER'}">
                            <div class="center" style="margin-top: 20px; text-align: center;">

                                수량 :<input name="ordersQty" type="number" min="0" class="form-control mb-3"
                                    style="width: 200px;">
                                <button
                                    style="width: 240px; height: 50px; margin-right: 20px; background-color: rgb(255, 210, 199);">구매하기</button>
                            </div>
                        </c:when>
                    </c:choose>
                </form>

                        <%-- ADMIN일 때는 수정하기/삭제하기 버튼 뜨게 하기 --%>
                        <c:if test="${principal.role == 'ADMIN'}">
                            <div class="center" style="margin-top: 20px; text-align: center;">
                                <form action="/product/${product.productId}/updateForm" method="get">
                                    <button
                                        style="width: 240px; height: 50px; margin-right: 20px; background-color: rgb(255, 210, 199);">수정하기</button>
                                </form>
                                <form action="/product/${product.productId}/delete" method="post">
                                    <button
                                        style="width: 240px; height: 50px; margin: auto; background-color: rgb(250, 255, 182);">삭제하기</button>
                                </form>
                            </div>
                        </c:if>

            </div>
        </div>

    <%@ include file="../layout/footer.jsp" %>

 

 

 

🎤 코드 리뷰 🎤

 

 

header.jsp

 

우리가 쇼핑몰을 이용할 때를 생각해 보면 로그인을 하지 않아도 상품들을 구경할 수 있다.

상품목록페이지과 상세페이지는 로그인을 하지 않고도 볼 수 있도록 구현했다.

(상세페이지는 헤더가 아니라 상품 목록의 이름을 클릭하면 들어가는 거라서 헤더에는 없다)

 

 

JSP의 choose문을 통해서 principal에 따라 구분을 해 준다.

조건은 3개가 필요하다.

1. 로그인을 하지 않았을 때

2. USER로 로그인 했을 때

3. ADMIN으로 로그인 했을 때

 

그렇기 때문에 choose문 안에

when 첫 번째 조건

when 두 번째 조건

otherwise 세 번째 조건

으로 만들어 주었다.

 

 

principal의 role(권한)이 'USER'일 때는 구매자의 주문조회와 로그아웃을 띄운다.

 

 

otherwise는 when이 아닐 때 실행되는 것이라 위 두 조건이 아니라면 ADMIN인 경우이다.

principal의 role(권한)이 'ADMIN'일 때는 상품 등록을 할 수 있는 탭과 로그아웃을 띄운다.

지금 생각해보니 로그아웃은 중복되니까 choose문 안에 안 넣고 밖에 두어도 됐을 것이다🙄🙄

 

 

productDetail.jsp

 

상품 상세 페이지의 choose문은 헤더와 약간 다르다.

헤더는 단순히 메뉴탭이고 각각 a태그로 연결되어 있어 상관없지만,

상품 상세 페이지는 로그인 안했을 때를 제외하곤 form태그를 submit해야 하기 때문에

위 처럼 단순히 choose - when - otherwise 로 구분하니 주소값을 잘못 찾아가는 오류가 생겼다.

 

1. 로그인을 하지 않았을 때

2. USER로 로그인 했을 때

3. ADMIN으로 로그인 했을 때

 

조건은 헤더와 같지만,

2,3번 조건 모두 form 태그를 submit 해야 하기 때문에 같은 choose문 안에 쓸 수 없어

3번째 조건은 choose문 밖에서 if문으로 따로 구분했다

 

 
               ==========================================================================
 
<form type="submit" action="/orders/${productId}" method="post">


                    <%-- productName 과 ordersName 연결하기 --%>
                    <input name="ordersId" type="hidden" value="${product.productId}">
                    <input name="ordersName" type="hidden" value="${product.productName}">
                    <input name="ordersPrice" type="hidden" value="${product.productPrice}">
                    <table border="1" style="width: 500px; height: 200px; text-align: center;">

                        <tr style="border: 1px solid">
                            <th style="background-color: rgb(185, 185, 185)">상품명</th>
                            <th>${product.productName}</th>
                        </tr>
                        <tr style="border: 1px solid">
                            <th style="background-color: rgb(185, 185, 185)">상품명</th>
                            <td>${product.productPrice}원</td>
                        </tr>
                        <tr style="border: 1px solid">
                            <th style="background-color: rgb(185, 185, 185)">상품명</th>
                            <td>
                                <span id="productQty">${product.productQty}</span>
                                <span>개</span>
                            </td>
                        </tr>
                    </table>
               --------------------------------------------------------------------------------------------------------------------------------
                    <c:choose>
                        <%-- 로그인 했을 때만 구매하기 버튼 뜨게 하기 --%>
                        <c:when test="${empty principal}" >
                            <div class="center" style="margin-top: 40px; text-align: center;">
                                <h5>상품을 구매하시려면 로그인 해주세요😀</h5>
                            </div>
                        </c:when>

                        <%-- USER일 때는 구매하기 버튼 뜨게 하기 --%>
                        <c:when test="${principal.role == 'USER'}">
                            <div class="center" style="margin-top: 20px; text-align: center;">

                                수량 :<input name="ordersQty" type="number" min="0" class="form-control mb-3"
                                    style="width: 200px;">
                                <button
                                    style="width: 240px; height: 50px; margin-right: 20px; background-color: rgb(255, 210, 199);">구매하기</button>
                            </div>
                        </c:when>
                    </c:choose>
 </form>
 
               ==========================================================================

 

 

choose문으로 첫 번째, 로그인을 하지 않았을 경우를 걸러준다.

두 번째는 헤더 코드와 같이 'USER'로 로그인 할 시에 수량 입력칸과 구매하기 버튼을 띄운다.

그리고 form 태그를 닫는다!'

 

 

 

'ADMIN'으로 로그인 했을 때는 수정하기 / 삭제하기 기능이 있다

이 부분은 따로 if문으로 묶어준다.

만약에 제일 바깥의 form 태그를 이 코드 아래에다 적으면

수정하기 버튼을 눌러도 해당 form 태그 주소에 가지 않고 위의 구매하기 버튼의 주소로 가기 때문에

꼭 form 태그를 잘 닫아주자!

 

 

 

 

저작자표시 (새창열림)

'KDT 풀스택 국비 과정 > 파이널 프로젝트(미니)' 카테고리의 다른 글

[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 5. 구매자 로그인/회원가입 유효성 체크 추가  (0) 2023.04.27
[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 4. 관리자 상품 등록하기, 수정하기, 삭제하기  (0) 2023.04.26
[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 2. 관리자 로그인 구현하기  (0) 2023.04.25
[📚상품 구매 사이트 4단계] MySQL DB 연결 없이 관리자 페이지 구현하기 - 1. 프로젝트 세팅  (0) 2023.04.24
[📚상품 구매 사이트 3단계] 판매자 서버 만들기 - MySQL 포트 연결하기  (0) 2023.04.24
'KDT 풀스택 국비 과정/파이널 프로젝트(미니)' Related Articles more
Comments