블로그를 관리할 수 있도록 관리자 페이지를 작성하도록 하겠습니다.
기본 레이아웃으로 사용되고 있는 'index.html' 과 비슷한 형태로, 관리자 'index.html' 페이지를 만들고, 관리자가 필요한 페이지들을 포함하도록 할 것 입니다.
기능 목록
- 메뉴 선택 시 content 영역 페이지 호출
레이아웃
소스
<!DOCTYPE html> <html lang="ko" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="context-path" th:content="@{/}"/> <title>HM & SB Blog - Admin</title> <!-- Common header --> <th:block th:include="common/include-link"></th:block> <!-- Custom styles for sidebar --> <link th:href="@{/css/admin-sidebar.css}" rel="stylesheet"> </head> <body> <!-- Common script --> <th:block th:include="common/include-script"></th:block> <div class="wrapper"> <!-- Sidebar Holder --> <nav th:replace="admin/sidebar"></nav> <div id="content" class="content"> <button type="button" id="sidebarCollapse" class="navbar-btn"><i class="fas fa-bars"></i></button> <hr> <!-- Page Content Holder --> <div th:replace="${template}"></div> </div> </div> </body> </html> | cs |
'templates/admin' 경로에 'index.html' 파일을 만들었습니다.
기존에 생성한 사용자 'index.html' 페이지와 비슷한 구조로, 공통적으로 사용하는 영역을 기술하였고, 관리자 페이지에서 사용할 CSS, 페이지를 만들어서 포함 시켰습니다.
<nav id="sidebar"> <th:block th:include="admin/sidebar-js"></th:block> <div class="sidebar-header"> <h3><a th:href="@{/admin}">ADMIN</a></h3> </div> <ul class="list-unstyled components"> <li><a th:href="@{/admin/category}">카테고리</a></li> <li><a th:href="@{/admin/users}">계정</a></li> </ul> </nav> | cs |
'templates/admin' 경로에 'sidebar.html' 파일을 만들었습니다.
메뉴를 클릭 시 카테고리, 계정 페이지를 호출하도록 합니다. 추가 기능이 필요한 경우 메뉴를 추가하고, 페이지를 만들면 됩니다.
스크립트 부분은 'sidebar-js.html' 페이지에 구현 하였습니다.
<script th:inline="javascript"> $(function(){ $('#sidebarCollapse').on('click', function() { $('#sidebar').toggleClass('active'); $(this).toggleClass('active'); }); }); </script> | cs |
'index.html' 에서 '#sidebarCollapse' 아이디로 지정된 버튼을 누르는 경우 'sidebar' show/hide 하는 부분입니다.
추가 스크립트가 필요한 경우 해당 파일에 기술합니다.
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.view.RedirectView;
@Controller
@RequestMapping("/admin")
public class AdminController {
@GetMapping
public RedirectView viewAdmin(Model model) {
return new RedirectView("/admin/category");
}
@GetMapping("/category")
public String viewCategory(Model model) {
// View attribute
model.addAttribute("template", "admin/category");
return "admin/index";
}
@GetMapping("/users")
public String viewAccount(Model model) {
// View attribute
model.addAttribute("template", "admin/users");
return "admin/index";
}
}
controller 패키지에 추가 하였습니다.
Front-End 영역에서 '/admin' 요청이 있는 경우 처리하도록 합니다.
소스 설명
@GetMapping
public RedirectView viewAdmin(Model model) {
return new RedirectView("/admin/category");
}'/admin' 요청이 있는 경우 카테고리 페이지를 호출할 수 있도록 합니다.
@GetMapping("/category")
public String viewCategory(Model model) {
// View attribute
model.addAttribute("template", "admin/category");
return "admin/index";
}'/admin/category' 요청이 있는 경우 'template' 변수에 dynamic content 영역에 표시할 페이지 경로를 지정하면서 관리자 'index.html' 페이지를 호출합니다. 'index.html' 페이지가 호출될 때 'template' 변수에 해당 페이지가 표시됩니다.
@GetMapping("/users")
public String viewAccount(Model model) {
// View attribute
model.addAttribute("template", "admin/users");
return "admin/index";
}'/admin/category' 요청이 있는 경우 'template' 변수에 dynamic content 영역에 표시할 페이지 경로를 지정하면서 관리자 'index.html' 페이지를 호출합니다. 'index.html' 페이지가 호출될 때 'template' 변수에 해당 페이지가 표시됩니다.
결과
카테고리 관리
계정 관리
'IT 프로젝트 > 블로그 만들기' 카테고리의 다른 글
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 관리자(admin) 사용자(users) 페이지 만들기 (1) | 2019.02.02 |
|---|---|
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 관리자(admin) 카테고리(category) 페이지 만들기 (0) | 2018.11.19 |
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 로그인(login) 페이지 만들기 (0) | 2018.11.17 |
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 사이드바(sidebar) 만들기 (0) | 2018.11.16 |
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - Welcome 페이지 만들기 (3) | 2018.11.15 |