-
Admin 사이트 개발 - AdminLTE 를 JSP로 변경JSP 2016. 7. 27. 21:38
Bootstrap 기반의 Admin 사이트를 쉽게 개발하게 해주는 템플릿이다. 여러 javascript 라이브러리를 사용하여 만들어져 있고, 관리자 사이트에 필요한 다양한 차트 등을 제공한다.
제공되는 무료 소스를 이용하여 header, content, footer 영역으로 분리, 개발할 수 있는 형태를 만든다.
1. 무료 버전 다운로드
DOWNLOAD 버튼을 눌러 무료로 제공되는 소스를 다운받는다.
2. 소스 확인
starter.html 을 브라우저에서 연다. 아래와 같은 화면이 나오고, 표시한 영역이 각각 header, content, footer 다. starter.html 의 코드를 보면 각 영역별로 주석으로 구분되어 있다(Main Header, Main Content, Main Footer).
3. 소스 분리, JSP 작성
Main Header, Main Content, Main Footer 주석이 달려있는 대로 코드를 분리해서 jsp 파일을 만든다. header 와 footer는 서버에서 클라이언트로 전송할 페이지를 만들 때 항상 포함되어야 하는 부분이고, content 는 요청한 url 마다 달라져야 한다. 따라서 아래와 같은 구조로 만든다. home.jsp 페이지를 만들 때 header, footer 가 포함되는 형태로 이해하면 된다.
각 jsp 파일의 내용은 아래와 같은 형태가 된다.
header.jsp
123456789101112131415161718192021222324252627282930<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><!--This is a starter template page. Use this page to start your new project fromscratch. This page gets rid of all links and provides the needed markup only.--><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>AdminLTE 2 | Starter</title><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><!-- Bootstrap 3.3.6 --><link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css">...<ul class="treeview-menu"><li><a href="#">Link in level 2</a></li><li><a href="#">Link in level 2</a></li></ul></li></ul><!-- /.sidebar-menu --></section><!-- /.sidebar --></aside>cs footer.jsp
1234567891011<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!-- Main Footer --><footer class="main-footer"><!-- To the right -->...</body></html>cs home.jsp
12345678910111213141516171819202122232425262728293031<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ page session="false"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@include file="include/header.jsp"%><!-- Content Wrapper. Contains page content --><div class="content-wrapper"><!-- Content Header (Page header) --><section class="content-header"><h1>Page Header<small>Optional description</small></h1><ol class="breadcrumb"><li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li><li class="active">Here</li></ol></section><!-- Main content --><section class="content"><!-- Your Page Content Here --></section><!-- /.content --></div><!-- /.content-wrapper --><%@include file="include/footer.jsp"%>cs header, footer 는 content 영역(home.jsp)를 기준으로 위/아래 코드이고, home.jsp 에는 위아래에 <%@include> 를 통해서 header, footer 를 포함시킨다. 각 jsp 파일마다 들어있는 아래 코드는 페이지 특성을 나타내는 것으로 모든 jsp 파일에 들어가야 한다.
1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>cs 4. 서버 경로 설정
서버를 실행하기 전에 톰캣의 서버 경로를 확인한다. server.xml 을 아래와 같이 설정하여 localhost:8080 으로 접속이 되도록 한다. Server.xml 은 프로젝트 내에 있는 파일이 아니다. 톰캣 서버의 설정파일로, Servers 아래에 있다. "path" 부분이 바뀌어야 한다.
1<Context docBase="board" path="/" reloadable="true" source="org.eclipse.jst.jee.server:board"/></Host>cs 5. 맘이 급하다. 서버 실행 & 접속
접속주소 : http://localhost:8080/
여기까지 제대로 됐으면 서버에는 접속이 되야 한다. 접속만 되면 90% 성공이다. 하지만 텍스트만 나오고 배경 컬러 등이 전혀 없이 표시된다.
6. jsp 파일내 로드되는 파일들의 경로 설정
header.jsp, footer.jsp, home.jsp 파일에는 <script>, <link> 태그로 다른 파일을 로드하는 코드가 들어있는데, 이 파일들의 경로를 수정해줘야 한다. 다운로드 받았던 AdminLTE 에 bootstrap, dist, plugin 폴더를 아래 경로에 넣는다. webapp/resources 폴더는 변경되지 않는 js, css, image 파일들을 넣는 위치로, 외부 라이브러리가 보통 이 경로에 들어간다.
이후 jsp 파일을 열어서 <script>, <link> 태그에서 지적하는 파일이 제대로 참조될 수 있도록 경로를 수정해준다. 아래와 같이 /resources/ 를 붙여주면 되는데, 수정되야할 곳이 여러군데니 잘 찾아서 수정한다.
123456<!-- Bootstrap 3.3.6 --><link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css"><!-- AdminLTE App --><script src="/resources/dist/js/app.min.js"></script>cs 다시 접속해본다. starter.html 과 같은 화면이 표시되면 성공!
