[bootstrap] adminLTE 템플릿 관리자 페이지 예제

개발자가 디자이너와 코더 없이 관리자페이지를 꾸미기란 여간 힘든 일이 아니다.
하지만 부트스트랩을 이용한다면 디자인,퍼블리싱 시간도 상당히 단축시키고 생각보다 훌륭한 사이트를 만들 수 있다.

Bootstrap이란?

부트스트랩은 웹사이트를 쉽게 만들수 있게 도와주는 css.js 프레임워크이다.
약간의 html 지식만 있다면 코드하나로 손쉽게 휴대폰,태블릿,pc까지 작동하게끔 사이트를 제작하게 해준다.

부트스트랩의 본래 이름은 트위터 블루프린트.
UI 프레임워크가 정형화되지 않아 유지보수에 어려움을 겪었던 트위터 개발자 마크 오토가 이를 개선하기 위해 만들었다.
그 이후 여러 개발자들이 개발에 참여했고 현재는 v5.3.2 버전까지 출시되었다.

Bootstrap 소스 제공 사이트

부트스트랩 소스를 제공해 주는 사이트는 생각보다 많다.(아래참고)
모든 소스가 무료는 아니지만 기본적인 디자인 틀을 잡을 수 있을 만큼의 소스는 제공이 된다.

AdminLTE

많은 템플릿 사이트 중에 오늘은 adminLTE 템플릿을 이용해 간단하게 관리자를 만들어 보았다.
먼저 사이트에 접속해 Download를 눌러 소스를 다운로드했다.

압축을 푼다음 브라우저에서 index.html 파일을 열어보자.
깔끔한 구조의 관리자 템플릿을 확인할 수 있다.

이제 내가 원하는 구조로 소스를 바꿀 차례.
html 파일에서 공통영역에 해당되는 소스들을 각각의 jsp파일로 생성했다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>AdminLTE 3 | Starter</title>
    <jsp:include page="/WEB-INF/views/admin/common/common.jsp"/>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- header -->
    <jsp:include page="/WEB-INF/views/admin/common/header.jsp"/>
    <!-- /header -->
    <!-- leftmenu -->
    <jsp:include page="/WEB-INF/views/admin/common/leftmenu.jsp"/>
    <!-- /leftmenu -->
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-12">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">메뉴</a></li>
                            <li class="breadcrumb-item">상세메뉴명</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <div class="content"></div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <jsp:include page="/WEB-INF/views/admin/common/footer.jsp"/>
    <!-- Main Footer -->
</div>
<!-- ./wrapper -->
</body>
</html>

js와 css 그리고 공통적인 선언들이 들어갈 파일은 common.jsp로 만들고
상단메뉴는 top.jsp, 왼쪽 메뉴는 leftmenu.jsp, 하단 영역은 footer.jsp로 만들었다.
그리고 그 파일들은 include를 통해 다른 파일에서도 공통으로 쓰일수 있게 해줬다.