Admin 관리 시스템

• 목표
  기존에 spring-mvc 강의에서 진행한 프로젝트를 결과물을 이용하여 웹 페이지의 member, item, order을 관리할 수 있는 admin 전용 페이지를 만든다.

만약 서비스를 실제로 운영한다면 보안상의 문제가 되겠지만 일단은 http://localhost:8080/admin/main url로 접속하면 접근할 수 있도록 하였다.

기존의 회원등록, 주문등록은 클라이언트 전용 페이지에 이미 기능이 구현되어 있기 때문에 생략하였다.

• Admin Controller

@Controller
@RequiredArgsConstructor
@Slf4j
public class AdminController {


    private final MemberRepository memberRepository;
    private final ItemService itemService;
    private final OrderRepository orderRepository;

    @GetMapping("/admin/main")
    public String main(){
        return "admin/home";
    }

    @GetMapping("/admin/members")
    public String memberList(Model model){

        List<Member> members = memberRepository.findAll();
        model.addAttribute("members", members);

        return "admin/memberList";
    }

    @GetMapping("/items/new")
    public String create_NewItem(Model model) {
        ItemForm form = new ItemForm();
        model.addAttribute("form", form);

        return "admin/items/newItem";
    }

    @GetMapping("/items")
    public String items(Model model) {

        List<Item> itemList = itemService.findAll();
        model.addAttribute("items", itemList);

        return "admin/items/list";
    }

    @ModelAttribute("categories")
    public List<String> category(){
        List<String> categories = new ArrayList<>();
        categories.add("top");
        categories.add("trouser");
        categories.add("shoe");

        return categories;
    }

    @PostMapping("/items/new")
    public String regist(@ModelAttribute ItemForm itemForm){

        Item item = new Item(itemForm.getName(),itemForm.getPrice(),itemForm.getCategory());
        if(itemForm.getImgUrl()==null) {
            item.setImgUrl("https://image.thehyundai.com/static/image/sect/hnm/cpnt/hnmmain1344420020211103141541.png");
        }else {
            item.setImgUrl(itemForm.getImgUrl());
        }
        itemService.save(item);


        return "admin/home";
    }

    @GetMapping("items/{itemId}/edit")
    public String editForm(@ModelAttribute("form")ItemForm itemForm, Model model
            ,@PathVariable("itemId") Long id){
        Item item = itemService.findOne(id);
        itemForm.setName(item.getName());
        itemForm.setPrice(item.getPrice());
        itemForm.setStockQuantity(item.getStockQuantity());
        model.addAttribute("form",itemForm);
        return "admin/items/editForm";
    }

    @PostMapping("items/{itemId}/edit")
    public String edit(@PathVariable("itemId") Long id,@ModelAttribute("form")ItemForm itemForm)
    {
        Item item = itemService.findOne(id);
        item.setName(itemForm.getName());
        item.setPrice(itemForm.getPrice());
        item.setStockQuantity(itemForm.getStockQuantity());
        item.setCategory(itemForm.getCategory());
        itemService.save(item);
        return "admin/home";
    }
    @PostMapping("items/{itemId}/delete")
    public String delete(@PathVariable("itemId") Long id,@ModelAttribute("form")ItemForm itemForm)
    {
        Item item = itemService.findOne(id);
        itemService.delete(item);
        return "admin/home";
    }



    @GetMapping("orders")
    public String orderList(Model model){

        List<Order> orders = orderRepository.findAll();
        model.addAttribute("orders",orders);


        return "admin/orderList";

    }

}

• 회원 목록

        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
                <th>User ID</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
                <td th:text="${member.userId}"></td>

            </tr>
            </tbody>
        </table>

회원가입을 통해 repository 에 있는 member를 모두 찾아서 model에 담아 반환하면 th:each 를 통해 출력한다.

화면

• 아이템 등록

 <form th:action="@{/items/new}" th:object="${form}" method="post">
        <div class="form-group">
            <label for="category">카테고리</label>
            <select name="categoryId" id="category" th:field="*{category}" class="form-control">
                <option value="">카테고리선택</option>
                <option th:each="category : ${categories}"
                        th:value="${category}"
                        th:text="${category}" />
            </select>
   </div>
        <div class="form-group">
            <label th:for="name">상품명</label>
            <input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="price">가격</label>
            <input type="number" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="stockQuantity">수량</label>
            <input type="number" th:field="*{stockQuantity}" class="form-control" placeholder="수량을 입력하세요">
        </div>

        <div class="form-group">
            <label th:for="img">이미지</label>
            <input type="text" th:field="*{imgUrl}" class="form-control" placeholder="이미지 url을 입력하세요" >
        </div>
        <button type="submit" class="btn btn-primary">등록</button>
    </form>

itemForm 객체를 넘겨서 값을 입력받고 등록 요청을 받았을 때 form 에 있는 정보들을 item 객체에 담아 item 을 생성하는 구조이다.
category 선택을 셀렉트 박스를 이용해 구현했고 이미지 업로드같은 경우에는 아직 잘 몰라서 String 으로 이미지 주소를 받아 저장하도록 하였다.

• 아이템 목록

  회원 목록과 동일한 구조

• 주문 목록

<table class="table table-striped">
     <thead>
     <tr>
     <th>주문번호</th>
     <th>회원명</th>
     <th>대표상품 이름</th>
     <th>대표상품 주문가격</th>
     <th>대표상품 주문수량</th>
	 </tr>
     </thead>
      <tbody>
      <tr th:each="order : ${orders}">
          <td th:text="${order.id}"></td>
          <td th:text="${order.member.name}"></td>
          <td th:text="${order.orderItems.get(0).item.name}"></td>
          <td th:text="${order.orderItems.get(0).orderPrice}"></td>
          <td th:text="${order.orderItems.get(0).count}"></td>
          <td>
          <a href="#" th:href="@{/orders/{id} (id=${order.id})}" class="btn btn-primary" role="button">주문 상세</a>
          </td>
            </tr>
       </tbody>
</table>

클라이언트가 주문하기를 눌러 아이템을 주문하면 해당 주문이 OrderRepository에 주문을 저장한다. 주문 목록은 orderRepository에 있는 주문들을 찾아서 화면에 출력한다.
각각의 주문에 주문상세 버튼을 넣어서 대표상품 외의 나머지 상품들도 확인할 수 있도록 하였다.

화면

주문 목록

주문 상세