스프링에 Gentelella Admin 붙이기 with Apache Tiles

아파치 타일을 이용해서 Gentelella 어드민 템플릿을 스프링에 붙이는 튜토리얼 시작합니다.

스프링 이니셜라이져로 시작해서 Gentelella 어드민을 리소스에 포함시키고 아파치 타일로 레이아웃을 작성하도록 하겠습니다.

먼저 Gentelella 어드민 템프릿을 처음 보시는 분들은 아래 링크를 방문하시면 데모를 보실 수 있습니다.

https://colorlib.com/polygon/gentelella/index.html

Bootstrap 3를 적용하여 만든 어드민 사이트용 템플릿입니다. 여러가지 유용한 위젯을 모아둔 형태입니다. 사이트를 제작할 때 필요한 요소들을 골라서 사용하면 효과적으로 작업시간을 단축시킬 수 있습니다. 단시간에 그럴듯한 디자인을 만들어 내는데 유용하고요. 무엇보다 보기에 좋습니다.^^

좀 지루할 수 있지만 처음부터 하나씩 만들어 보겠습니다.

스프링 이니셜라이저

스프링 스타트에서 스프링 프로젝트를 생성합니다. 

• Gradle Project를 선택
• Artifact : gentelella
• Packaging : War
• switch to full version 클릭 후 Web 선택

아래는 옵션이 선택된 화면입니다.

마지막으로 Generate Project를 클릭해서 zip파일을 다운로드 받습니다.

gentelella.zip의 압축을 풀고 실행을 해 봅니다.

cd gentelella

./gradlew bootRun

Gentelella 다운로드 하기

깃허브에서 Gentelella를 다운로드합니다. 주소는 https://github.com/puikinsh/gentelella 입니다.

다운로드한 소스를 보면 아래와 같은 폴더 구조를 가지고 있습니다.

production 폴더에 있는 index.html을 클릭해서 브라우져에서 확인합니다. 사이드바 메뉴에서 보면 Dashboard가 선택되어 있습니다. Dashboard2를 클릭해 봅니다. 브라우져 주소를 보면 index2.html이 보입니다.

index.html은 Dashboard를 index2.html은 Dashboard2를 보여주고 있음을 알 수 있습니다.

Static파일 복사하기

아파치 타일 레이아웃을 만들기 전에 Gentelella에 있는 static 파일들을 스프링 프로젝트로 복사를 합니다.

복사를 하게될 위치는 src/main/resources/static 입니다.

• Gentelella의 vendors 폴더와 하위 내용을 모두 src/main/resources/static에 복사합니다.

• Gentelella의 build폴더 안에 있는 css, images, js 폴더와 하위 내용을 src/main/resources/static에 복사합니다.

• Gentelella의 production/images 폴더 안에 있는 파일을 src/main/resources/static/images에 복사합니다.

폴더구조는 아래와 같이 되었습니다.

아파치 타일 추가하기

기본적인 준비는 모두 마쳤습니다. 이제 아파치 파일을 디펜던시에 추가할 차례입니다.

build.gradle파일을 열어서 아래 라인을 추가합니다.

compile("org.apache.tomcat.embed:tomcat-embed-jasper")

compile("javax.servlet:jstl")

compile("org.apache.tiles:tiles-servlet:3.0.5")

compile("org.apache.tiles:tiles-jsp:3.0.5")

com/example.gentelella폴더에 configuration폴더를 추가하고 TitleConfiguration 클라스를 추가합니다.

package com.example.gentelella.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
import org.springframework.web.servlet.view.tiles3.TilesViewResolver;

@Configuration
public class TitleConfiguration {

    @Bean
    public TilesConfigurer tilesConfigurer() {
        final TilesConfigurer configurer = new TilesConfigurer();
        configurer.setDefinitions(new String[] {"WEB-INF/tiles/tiles.xml"});
        configurer.setCheckRefresh(true);
        return configurer;
    }

    @Bean
    public TilesViewResolver tilesViewResolver() {
        final TilesViewResolver resolver = new TilesViewResolver();
        resolver.setViewClass(TilesView.class);
        return resolver;
    }
}

레이아웃 파일 추가하기

tileConfigurer()에서 지정한 tiles.xml파일을 생성합니다. 위치는 webapp/WEB-INF/tiles 폴더입니다.

이제 tiles-definition에서 지정한 파일들을 생성할 차례입니다.

Gentelella 어드민 템플릿은 크게 네가지 파트로 구분을 할 수 있습니다.

우의 그림에서 각 영역을 아래와 같이 구분했습니다.

1. 사이드바 영역 : sidebar.jsp
2. 헤더 영역 : header.jsp
3. 바디 영역 : 컨텐츠에따라서 변경되는 영역
4. 푸터 영역 : footer.jsp

WEB-INF/tiles 폴더에 layout 폴더를 생성합니다.

Gentelella의 production 폴더에 있는 index.html 파일을 에디터로 엽니다. 이 파일의 내용을 사용해서 레이아웃 파일을 작성하도록 하겠습니다.

index.html파일의 내용 전체를 복사해서 layout 폴더에 base.jsp로 저장합니다.

base.jsp 첫 라인에 아래 라인을 추가합니다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

base.jsp에서 아래 라인을 찾습니다.

<!-- menu profile quick info -->

여기부터 사이드바가 끝나는 부분까지 복사를 합니다. 아래 라인까지입니다.

<!-- /menu footer buttons -->

복사한 내용을 layout폴더 아래 sidebar.jsp로 저장합니다.

base.jsp에서 sidebar.jsp로 복사한 부분을 삭제하고  그 자리에 아래 라인을 추가합니다.

<tiles:insertAttribute name="sidebar" />

base.jsp에서 아래 라인을 찾습니다.

<!-- top navigation -->

아래 라인까지 복사를 해서  header.jsp파일을 생성합니다.

<!-- /top navigation -->

base.jsp에서 header.jsp로 옮긴 부분을 삭제하고 아래 라인을 추가합니다.

<tiles:insertAttribute name="header" />

푸터를 만들 차례입니다.

base.jsp에서 아래 라인을 찾습니다.

<!-- footer content -->

마찬가지로 아래 라인까지 복사를 해서 footer.jsp를 생성합니다.

<!-- /footer content -->

base.jsp에서 footer.jsp로 옮긴 부분을 삭제하고 아래 라인을 추가합니다.

<tiles:insertAttribute name="footer" />

지금까지 생성된 모든 jsp 파일의 제일 첫 라인에 아래 내용을 추가합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

컨텐츠 파일 추가하기

레이아웃이 완성이 되었으므로 dashboard 컨텐츠파일을 만들겠습니다.

WEB-INF폴더 밑에 jsp폴더를 생성하고 그 아래 dashboard라는 폴더를 만듭니다.

base.jsp파일에서 아래 라인을 찾습니다.

<!-- page content -->

아래 라인까지 찾아서 복사한 후 dashboard 폴더 및에 dashborad.jsp 파일을 만들고 내용을 붙여 넣습니다.

파일의 첫 줄에는 아래 라인을 추가합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

base.jsp 파일에서 복사한 내용을 삭제하고 아래 라인을 추가합니다.

<tiles:insertAttribute name="body" />

컨트롤러 추가하기

configuration 폴더에 WebMvcConfiguration를 추가합니다.

package com.example.gentelella.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

@Configuration
@EnableWebMvc
public class WebMvcConfiguration extends WebMvcConfigurerAdapter {
    @Bean
    public InternalResourceViewResolver getInternalResourceViewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setViewClass(JstlView.class);
        resolver.setPrefix("/WEB-INF/jsp/");
        resolver.setSuffix(".jsp");

        return resolver;
    }

    @Override
    public void addResourceHandlers( ResourceHandlerRegistry registry )
    {
        registry.addResourceHandler( "/static/**" ).addResourceLocations( "classpath:/static/" );
    }
}

controller 폴더를 추가하고 Dashboard 클라스를 추가합니다.

package com.example.gentelella.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class Dashboard {

    private static final String VIEW_PATH = "dashboard/";

    @RequestMapping( value = "/dashboard", method = RequestMethod.GET )
    public String dashboard(Model model)
    {
        return VIEW_PATH + "dashboard";
    }
}

./gradlew bootRun 으로 프로젝트를 실행하고 브라우져로 http://localhost:8080/dashboard 에 접속을 합니다.

내용은 보이지만 스타일 적용이 전혀 안되어 있습니다.

스태틱 파일 경로 수정하기

base.jsp파일을 엽니다.

css와 js파일 경로중에서 ../vendors로 되어 있는 부분을 /static/vendors로 수정을 합니다.

../build라고 되어 있는 부분은 /static으로 수정을 합니다.

  sidebar.jsp에서 images/img.jpg 를 /static/images/img.jpg로 변경합니다.

header.jsp에서 images/img.jpg 를 /static/images/img.jpg로 변경합니다.

다시 프로젝트를 실행해 봅니다.

마지막, dashboard2추가하기

마지막으로 사이드바에 dashboard2를 추가해 보도록 하겠습니다.

sidebar.jsp를 엽니다.

아래와 같이 되어 있는 부분을 찾습니다.

<li><a href="index.html">Dashboard</a></li>

<li><a href="index2.html">Dashboard2</a></li>

아래와 같이 수정합니다.

<li><a href="dashboard">Dashboard</a></li>

<li><a href="dashboard2">Dashboard2</a></li>

Dashboard 클라스에 아래 메쏘드를 추가합니다.

    @RequestMapping( value = "/dashboard2", method = RequestMethod.GET )
    public String dashboard2(Model model)
    {
        return VIEW_PATH + "dashboard2";
    }

Gentelella의 production 폴더에서 index2.html파일을 엽니다.

파일에서 아래 부분을 찾아서 복사하여 dashboard/dashboard2.jsp 파일에 복사합니다.

파일 맨 앞에 아래 라인을 추가합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

다시 ./gradlew bootRun 으로 프로젝트를 실행하고 브라우져로 http://localhost:8080/dashboard 에 접속을 합니다.

사이드바 메뉴에서 Dashboard와 Dashboard2를 번갈아 눌러봅니다.

아래 화면은 Dashboard2를 눌렀을 때 화면입니다.

이상으로 Gentelella 어드민 템프릿을 스프링에 추가하는 과정을 정리했습니다.

간단할 것으로 생각하고 시작했는데, 생각보다 내용이 길어졌네요. ^^

소스는 첨부파일에서 받으실 수 있습니다. 단, 파일 사이즈를 줄이기 위해서 resources/static/vendors 폴더를 삭제하고 올렸습니다. vendors 폴더는 Gentelella 소스를 받으신 후 복사해서 사용하시면 됩니다.

gentelella-spring.zip