[86일차 - 2] 삭제 이벤트 처리 / nav에 링크연결 / admin 계정 생성 / 상품 메인페이지 만들기 / 카테고리 목록 만들기

728x90

20221124(목)

목차
- 삭제 이벤트 처리
- nav에 링크연결
- admin 계정 생성
- 상품 메인페이지 만들기
- 카테고리 목록 만들기 - (USER)에게 보여지는

< 삭제 이벤트 처리 >

1. productList.jsp 에 삭제버튼 클릭 이벤트 처리

2. AdProduct 컨트롤러

(1) @ModelAttribute("cri") 어노테이션 삭제

파라미터(cri)에 들어온 정보를 jsp에서 사용하기 위해 쓰는건데 삭제기능은 jsp로 갈 필요가 없으니 삭제해도 된다.

3. AdProduct 매퍼 & 서비스

4. AdProduct 컨트롤러에 서비스 호출 코드 추가

- 리스트가 필요한 곳마다 cri.getListLink(); 추가해주기

- 수정하기와 삭제하기 링크에 cri.getListLink(); 추가

5. productList.jsp에 삭제 클릭시 모달창 띄우는 코드추가

ex) 실행화면

< nav에 링크연결 >

상품관리에서 '상품목록' 눌렀을 때 넘어가는 주소작업

nav.jsp에서 주소추가 /admin/product/productList

< admin 계정 생성 >

여기서 잠깐!!!🤔

비밀번호는 반드시 암호화된 것으로 넣어주어야 한다!!!!!!!

ex) 실행화면

< 관리자 계정 로그아웃 >

1. Admin 컨트롤러

2. Admin 매퍼 & 서비스

3. header.jsp 에 최근 접속시간 추가

ex) 실행화면

< 상품 메인페이지 만들기 >

1. GlobalControllerAdvice 생성

2. Product 매퍼

adProductMapper 복사함

3. Product 서비스

4. GlobalControllerAdvice 컨트롤러 코드추가

- @의 어노테이션들은 각각의 클래스들로 만들어져있다.

com.docmall.controller 패키지안의 존재하는 컨트롤러의 매핑주소 요청을 받으면, 안의 메서드가 자동으로 호출된다.

✨ 스프링 컨테이너에서 bean으로 등록 및 관리가 된다.
: 자바의 객체(스프링에서 bean으로 생성된 것)

Controller 기능의 클래스

Service 인터페이스를 구현한 ServiceImpl 기능의 클래스

Mapper 인터페이스 ➡ 내부적으로 Proxy Class 동작

**일반 클래스를 bean으로 등록하고 싶은 경우
: 일반 클래스 앞에 @Component를 사용해주어야 한다.

+ 추가

- views>product 폴더 생성 후 productList.jsp 생성

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h1 class="display-4">${cate_name }</h1>
</div>

<div class="container">
  <div class="row">
        
        <c:forEach items="${productList }" var="productVO">
        <div class="col-md-3">
          <div class="card mb-4 shadow-sm">
            <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
            <a href="${productVO.pdt_num }" class="proDetail">
            	<img src="/product/displayFile?folderName=${productVO.pdt_img_folder }&fileName=s_${productVO.pdt_img}" class="bd-placeholder-img card-img-top" width="100%" height="225">
			</a>
            <div class="card-body">
              <p class="card-text">${productVO.pdt_name }</p>
              <p class="card-text">
              	<fmt:formatNumber type="currency" pattern="￦#,###" value="${productVO.pdt_price }" /> 원
              </p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <input type="hidden" value="${productVO.pdt_num }" name="pdt_num"> 
                  <button type="button" name="btnDirectOrder"  class="btn btn-sm btn-outline-secondary">바로구매</button>
                  <button type="button" name="btnCart" class="btn btn-sm btn-outline-secondary">장바구니</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        </c:forEach>
        
        
      </div>

< 카테고리 목록 만들기 > - (USER)에게 보여지는

ex) 만들 화면

1. ProductController 생성

2. Product 매퍼에 카테고리 목록 내용 추가

- 해당 코드는 AdProductMapper에서 가져옴(가져다 쓰지 않고 그대로 복사해서 사용)

3. Product 서비스에다가도 집어넣어주기

4. Product 컨트롤러

5. categoryMenu.jsp에 서브카테고리 추가

6. GlobalControllerAdvice.java 에 mainCateList 추가

7. Product Mapper 및 Service에 코드 추가

// 2차 카테고리를 참조하는 상품목록
List<ProductVO> getProductListbysubCategory(@Param("cate_code") Integer cate_code, @Param("cri") Criteria cri);

// 2차 카테고리를 참조하는 상품목록의 개수
int getProductCountbysubCategory(@Param("cate_code") Integer cate_code, @Param("cri") Criteria cri);

<!-- 검색조건 쿼리. [제목 or 작성자]선택.  value="TW" -->
<!-- typeArr: 파라미터타입의 Criteria클래스의 메서드를 가리킴. 검색종류(타입)의 값을 참조하게 됨. [제목 or 작성자]선택.  value="TW"  -->
<sql id="criteria">
    <trim prefix="(" suffix=") AND " prefixOverrides="OR">
        <foreach collection="cri.typeArr" item="type">
            <trim prefix="OR">
                <choose>
                    <when test="type == 'N'.toString()">
                        PDT_NAME like '%' || #{cri.keyword} || '%'
                    </when>
                    <when test="type == 'C'.toString()">
                        PDT_COMPANY like '%' || #{cri.keyword} || '%'
                    </when>
                </choose>
            </trim>
        </foreach>
    </trim>
</sql>

<select id="getProductListbysubCategory" resultType="com.docmall.domain.ProductVO">

    <![CDATA[
    SELECT RN, PDT_NUM, CATE_CODE, CATE_CODE_PRT, PDT_NAME, PDT_PRICE, PDT_DISCOUNT, PDT_COMPANY, PDT_DETAIL, PDT_IMG_FOLDER, PDT_IMG, PDT_AMOUNT, PDT_BUY, PDT_DATE_SUB, PDT_DATE_UP
    FROM (
        SELECT  /*+ INDEX_DESC(PRODUCT_TBL PK_PRODUCT_NUM)*/ ROWNUM RN, PDT_NUM, CATE_CODE, CATE_CODE_PRT, PDT_NAME, PDT_PRICE, PDT_DISCOUNT, PDT_COMPANY, PDT_DETAIL, PDT_IMG_FOLDER, PDT_IMG, PDT_AMOUNT, PDT_BUY, PDT_DATE_SUB, PDT_DATE_UP
        FROM 
            PRODUCT_TBL
        WHERE  
            CATE_CODE = #{cate_code} 
        AND 
            PDT_BUY = 'Y' 
        AND
    ]]>    
     <include refid="criteria"></include> <!-- 검색기능이 없으므로 참조되지 않는다. -->

    <![CDATA[ 

             ROWNUM <= #{cri.pageNum} * #{cri.amount}
    )
    WHERE RN > (#{cri.pageNum}-1) * #{cri.amount}
    ]]>

</select>

<select id="getProductCountbysubCategory" resultType="int">

    SELECT 
        count(*) 
    FROM 
        PRODUCT_TBL 
    WHERE 
        CATE_CODE = #{cate_code}
    AND 
        PDT_BUY = 'Y' 
    AND

    <include refid="criteria"></include> 

    PDT_NUM > 0

</select>

8. ProductController에 카테고리 참조하는 상품리스트 코드 추가

//2차카테고리를 참조하는 상품리스트(페이징포함, 검색제외)
// 특수문자 / 의 값을 서버가 받을때 @PathVariable 이 해결을 할수가 없다.
// 요청주소1 /productList/10/맨투맨/후드티    결과: 404 매핑주소를 찾을수 없다.
// 요청주소2 /productList/10/맨투맨%2F후드티 결과: 404 에러는 발생되지 않는다. @PathVariable에서 해결이 되지 못한다. 다른방법으로 처리를 해야 한다.(추후 설명)
@GetMapping("/productList/{cate_code}/{cate_name}")
public String productList(@ModelAttribute("cri") Criteria cri, @PathVariable("cate_code") Integer cate_code, @PathVariable("cate_name") String cate_name, Model model) {

    log.info("2차카테고리 코드: " + cate_code);
    log.info("2차카테고리 이름: " + cate_name);

    //2차카테고리 이름
    model.addAttribute("cate_name", cate_name);

    //1)상품목록
    List<ProductVO> productList = productService.getProductListbysubCategory(cate_code, cri);

    // 브라우저에서 상품이미지 출력시 데이타베이스의 날짜폴더가 \ 역슬래시로 되어 있어 특수문자로 인한 요청에 문제가 발생된다.
    // 역슬래시를 슬래시로 변환하여, 사용하게 해야한다.
    productList.forEach(vo -> {
        vo.setPdt_img_folder(vo.getPdt_img_folder().replace("\\", "/"));
    });

    model.addAttribute("productList", productList);

    //2)페이징작업
    int totalCount = productService.getProductCountbysubCategory(cate_code, cri);
    model.addAttribute("pageMaker", new PageDTO(cri, totalCount));
    return "/product/productList";
}

728x90

저작자표시

'🏫 Open API_JAVA' 카테고리의 다른 글

[89일차] 주문하기 / 주문자 정보 & 배송지 정보 폼 / 카카오페이 결제 (0)	2022.12.01
[87일차] 장바구니 담기 / 장바구니 목록 (0)	2022.11.27
[86일차 - 1] 관리자_상품 수정 (페이지, 정보 읽어오기, 수정하기) (0)	2022.11.24
[85일차 - 2] 썸네일 크기조절 / 상품 목록 이미지 보여주기 / 특수문자 서버 전달 시 에러 / 검색 기능 추가 (0)	2022.11.24
[85일차 - 1] 썸네일 이미지 / 상품 정보 저장 / 상품 이미지 미리보기 / 상품 목록보기 (0)	2022.11.23

< 삭제 이벤트 처리 >

< nav에 링크연결 >

< admin 계정 생성 >

여기서 잠깐!!!🤔

< 관리자 계정 로그아웃 >

< 상품 메인페이지 만들기 >

< 카테고리 목록 만들기 > - (USER)에게 보여지는

'🏫 Open API_JAVA' 카테고리의 다른 글

티스토리툴바