국비/Project-2 쇼핑몰

2023.05.22 81일차 -2 Team Project

춘핑이 2023. 5. 22. 17:21

팀 프로젝트

고기쇼핑몰의 사이트를 주제로 잡았으며
상품관리, 상품목록, 상품상세페이지 등등의 기능을 맡았다.

갈등은 아직은 없었다.

1. 테이블 만들기

상품관련한 테이블을 먼저 만들어야한다.
일단은 상품 테이블 상품ID, 상품이름, 원산지, 카테고리, 가격
상품 카테고리 테이블, 이미지삽입을 위한 상품이미지테이블을 추가했다.

CREATE TABLE products (
    product_id INT PRIMARY KEY AUTO_INCREMENT,
    product_name VARCHAR(255) NOT NULL,
    country_of_origin VARCHAR(255) NOT NULL,
    category_id INT NOT NULL,
    price DECIMAL(10,2) NOT NULL
);

CREATE TABLE categories (
    category_id INT PRIMARY KEY,
    category_name VARCHAR(255) NOT NULL,
    description VARCHAR(255)
);

CREATE TABLE productfilename (
    id INT PRIMARY KEY,
    product_id VARCHAR(255) NOT NULL,
    file_name VARCHAR(255) NOT NULL
);

2. 상품 목록

일단 관리자 페이지의 상품관리시스템부터 만들것이다.
Join을 통해서 상품 카테고리를 묶어서 불러오기 위해 ProductView를 만들어사용하는 것이 편하다고 판단했다.

이를 바탕으로 DTO도만들었다.

CREATE View ProductView
AS
SELECT p.product_id, p.product_name, p.country_of_origin, p.price, p.stock_quantity, c.*
FROM products p JOIN categories c ON p.category_id = c.category_id;

@Data
public class ProdcutView {
    private Integer productId;
    private String productName;
    private String countryOfOrigin;
    private Double price;
    private Integer stockQuantity;
    private Integer categoryId;
    private Integer categoryName;
    private String description;
}

2.1 컨트롤러

@Controller("adminProductController")
@RequestMapping("/admin/product")
@RequiredArgsConstructor
public class ProductController {

    private final AdminProductService productService;

    @GetMapping("/list")
    public String list(Model model) {
        List<ProductView> productList = productService.getViewList();
        model.addAttribute("productList", productList);
        return "admin/product/list";
    }
}

2.2 서비스

@Service
@RequiredArgsConstructor
public class AdminProductServiceImpl implements AdminProductService {

    private final ProductMapper productMapper;

    @Override
    public List<ProductView> getViewList() {
        return productMapper.getAllView();
    }
}

2.3 mapper

<resultMap type="com.example.demo.domain.ProductView"
    id="productViewMap">
    <id column="product_id" property="productId" />
    <result column="product_name" property="productName" />
    <result column="country_of_origin" property="countryOfOrigin" />
    <result column="price" property="price" />
    <result column="stock_quantity" property="stockQuantity" />
    <result column="category_id" property="categoryId" />
    <result column="category_name" property="categoryName" />
    <result column="description" property="description" />
    <collection property="fileName" ofType="string">
        <result column="file_name" />
    </collection>
</resultMap>

<select id="getAllView" resultMap="productViewMap">
    SELECT * FROM productview
</select>

3. 상품 상세페이지

관리자를 위한 상품 상세페이지 이기 때문에 사진은 그냥 목록으로 보이고 내용만 적힌 단순한 페이지로 만들자.

3.1 컨트롤러

@GetMapping("/detail")
public String detail(Model model, Integer id) {
    ProductView product = productService.getOneView(id);
    model.addAttribute("product", product);
    return "admin/product/detail";
}

3.2 서비스

@Override
public ProductView getOneView(Integer productId) {
    return productMapper.getOneView(productId);
}

3.3 mapper

<select id="getOneView" resultMap="productViewMap">
    SELECT * FROM productview WHERE product_id = #{productId}
</select>

3.4 view

<div class="container-lg">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">
            <div class="d-flex">
                <div class="me-auto">
                    <h1>
                        <span id="boardIdText"> ${product.productId} </span>
                        상품
                    </h1>
                </div>
            </div>
            <div>
                <div class="mb-3">
                    <label for="" class="form-label">상품명</label>
                    <input type="text" class="form-control" value="${product.productName}" readonly />
                </div>

                <div class="mb-3">
                    <label for="" class="form-label">원산지</label>
                    <input type="text" class="form-control" value="${product.countryOfOrigin }" readonly />
                </div>

                <div class="mb-3">
                    <label for="" class="form-label">재고</label>
                    <input type="text" class="form-control" value="${product.stockQuantity }" readonly />
                </div>

                <div class="mb-3">
                    <label for="" class="form-label">종류</label>
                    <input type="text" class="form-control" value="${product.categoryName }" readonly />
                </div>

                <div class="mb-3">
                    <c:forEach items="${product.fileName}" var="fileName">
                        <div>
                            <img class="img-thumbnail img-fluid " src="/img/product/${fileName}" alt="${fileName}" />
                        </div>
                    </c:forEach>
                </div>

                <div>
                    <button>수정</button>
                    <button>삭제</button>
                </div>
            </div>
        </div>
    </div>
</div>

4. 상품 삭제

4.1 컨트롤러

삭제 성공시 list로 실패시 보던 페이지로 가게 만들었다.

@PostMapping("remove")
public String remove(Integer id, RedirectAttributes rttr) {
    Boolean ok = productService.remove(id);
    if (ok) {
        return "redirect:/admin/product/list";
    } else {
        return "redirect:/admin/product/detail?id=" + id;
    }
}

4.2 서비스

실패하면 트랜잭션처리로 예외가 발생하도록 했다.
실행결과를 값으로 받아 true false처리를 하도록 했다.

@Override
@Transactional(rollbackFor = Exception.class)
public Boolean remove(Integer productId) {
    Integer cnt = productMapper.deleteById(productId);
    return cnt == 1;
}

4.3 mapper

INSERT DELETE는 자동으로 INTEGER값을 반환한다.

<delete id="deleteById">
    DELETE FROM products WHERE product_id = #{productId}
</delete>

2023.05.22

싫어요
대댓글 JSP에서 글 level step 3단계로 나누었던 것 처럼 구현가능하긴할듯
작성자(닉네임)
댓글검색
회원이 다른회원신고
내가 댓글 쓴 글들 보기
내글 보기
여러 기능을 추가할 수 있다.
처음부터 다하겠다고 생각하지말고 아이디어를 하나씩 추가해나가는게 중요하다.

상품관리 페이지 더 필요한 내용
상품 추가 - 이미지 파일명/main으로 설정하게 하기
수정페이지및처리

페이지네이션

검색(카테고리 상품명 원산지 재고)

가격 정렬 및 필터링

만들어야하는 목록
상품 목록 조회
상품 추가
상품 수정
상품 삭제
상품 검색
이미지 업로드
가격 정렬 및 필터링
재고 관리
상품 상세 정보
등등