반응형

강좌 카테고리 목록 구현 및 추가

 

  • 웹페이지 관리자 메인 - 카테고리 관리

 

 

 

list.html

  • 카테고리 관리 페이지 생성

 

 

 

layout.html

  • fragment-admin-body-menu 추가
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> fastlms </title>
</head>
<body>
    <h1>메인 페이지</h1>

    <div th:fragment="fragment-body-menu">
        <div>
            <a href="/member/register">회원가입</a>
            |
            <a href="/member/info">회원정보</a>
            |
            <a href="/member/login">로그인</a>
            |
            <a href="/member/logout">로그아웃</a>
        </div>
        <hr/>
    </div>

    <div th:fragment="fragment-admin-body-menu">
        <a href="/admin/main.do">관리자 메인</a>
        |
        <a href="/admin/member/list.do">회원 관리</a>
        |
        <a href="/admin/category/list.do">카테고리 관리</a>
        |
        <a href="#">강의 관리</a>
        |
        <a href="/member/logout">로그아웃</a>
        <br/>
        <hr/>
    </div>

</body>
</html>

 

 

 

list.html

  • fragment 적용
<div th:replace="/fragments/layout.html :: fragment-admin-body-menu"></div>

 

 

 

  • fragment 적용된 모습

 

 

 

  • 카테고리 관리 페이지로 접근한 모습

 

 

 

list.html

  • 입력란과 추가 버튼 추가

 

 

 

  • 입력란과 추가 버튼이 추가된 모습

 

 

 

list.html

  • required 및 placeholder 적용

 

 

 

  • placeholder가 적용된 모습

 

 

AdminCategoryController.java

 

 

 

CategoryInput.java

 

 

 

Category.java

 

 

 

CategoryRepository.java

package com.zerobase.fastlms.admin.repository;

import com.zerobase.fastlms.admin.entity.Category;
import org.springframework.data.jpa.repository.JpaRepository;

public interface CategoryRepository extends JpaRepository<Category, Long> {
    
}

 

 

 

application.yml

 

 

 

category DB

  • Category.java에서 추가한 entity가 자동으로 등록된 모습

 

 

 

CategoryService.java

  • CategoryService 추가

 

 

 

CategoryDto.java

  • CategoryDto 추가

 

 

 

Category.java

package com.zerobase.fastlms.admin.entity;

import javax.persistence.*;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@AllArgsConstructor
@Builder
@Data
@Entity
public class Category {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    Long id;

    String categoryName;
    int sortValue;
    boolean usingYn;
}

 

 

 

CategoryService.java

package com.zerobase.fastlms.admin.service;

import com.zerobase.fastlms.admin.dto.CategoryDto;

import java.util.List;

public interface CategoryService {

    List<CategoryDto> list();

    /* 카테고리 신규 추가 */
    boolean add(String categoryName);

    /* 카테고리 수정 */
    boolean update(CategoryDto parameter);

    /* 카테고리 삭제 */
    boolean del(long id);
}

 

 

 

CategoryServiceImpl.java

 

 

 

CategoryDto.java

  • Builder pattern 적용
package com.zerobase.fastlms.admin.dto;

import com.zerobase.fastlms.admin.entity.Category;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;

@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
public class CategoryDto {

    Long id;
    String categoryName;
    int sortValue;
    boolean usingYn;

    public static List<CategoryDto> of (List<Category> categories) {
        if (categories != null) {
            List<CategoryDto> categoryList = new ArrayList<>();
            for (Category x : categories) {
                categoryList.add(of(x));
            }
            return categoryList;
        }
        return null;
    }

    public static CategoryDto of (Category category) {
        return CategoryDto.builder()
                .id(category.getId())
                .categoryName(category.getCategoryName())
                .sortValue(category.getSortValue())
                .usingYn(category.isUsingYn())
                .build();
    }
}

 

 

 

CategoryServiceImpl.java

@Override
public List<CategoryDto> list() {
    List<Category> categories = categoryRepository.findAll();
    return CategoryDto.of(categories);
}

 

 

 

CategoryInput.java

package com.zerobase.fastlms.admin.model;

import lombok.Data;

@Data
public class CategoryInput {

    String categoryName;
}

 

 

 

AdminCategoryController.java

package com.zerobase.fastlms.admin.controller;

import com.zerobase.fastlms.admin.dto.CategoryDto;
import com.zerobase.fastlms.admin.model.CategoryInput;
import com.zerobase.fastlms.admin.model.MemberParam;
import com.zerobase.fastlms.admin.service.CategoryService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class AdminCategoryController {

    private final CategoryService categoryService;

    @GetMapping("/admin/category/list.do")
    public String list(Model model, MemberParam parameter) {

        List<CategoryDto> list = categoryService.list();
        model.addAttribute("list", list);

        return "admin/category/list";
    }

    @PostMapping("/admin/category/add.do")
    public String add(Model model, CategoryInput parameter) {

        boolean result = categoryService.add(parameter.getCategoryName());

        return "redirect:/admin/category/list.do";
    }
}

 

 

 

  • 카테고리 관리 - 카테고리 'aaaa' 추가

 

  • 카테고리 관리 - 카테고리 'bbbb' 추가

 

 

category DB

  • DB에 추가된 모습

 

 

 

list.html

 

 

 

  • 입력된 값 확인

 

 

 

list.html

<tbody>
    <tr th:each="x : ${list}">
        <td th:text="${x.id}">1</td>

        <td th:text="${x.categoryName}">categoryName</td>
        <td th:text="${x.sortValue}">sortValue</td>
        <td>
            <p th:if="${x.usingYn}">Y</p>
            <p th:if="${x.usingYn eq false}">N</p>
        </td>
    </tr>
</tbody>

 

 

 

  • 입력된 카테고리 정보 출력

 

 

 

list.html

  • 가독성을 위하여 스타일 추가
<head>
    <meta charset="UTF-8">
    <title> 관리자 화면 </title>
    <style>
        .list table {
            width: 100%;
            border-collapse: collapse;
        }
        .list table th, .list table td {
            border: solid 1px #000000;
        }
    </style>
</head>

 

 

 

  • 스타일 적용된 모습

 

 

 

  • 카테고리 'cccc', 'dddd' 추가

 

 

 

  • 카테고리 추가된 모습

 


반응형

+ Recent posts