728x90
반응형
SiteMeshFilter.java
package sitemesh;
import javax.servlet.annotation.WebFilter;
import org.sitemesh.builder.SiteMeshFilterBuilder;
import org.sitemesh.config.ConfigurableSiteMeshFilter;
/*
* sitemesh 설정 : 화면에 공통부분을 설정 모듈
* 1. sitemesh-3.0.1.jar 파일을 pom.xml에 sitemesh 관련 설정 추가
* 2. webapp/layout 폴더 생성. 폴더에 kiclayout.jsp 복사
* 3. webapp/css 폴더 생성. 폴더에 main.css 복사
* 4. webapp/image 폴더 생성. 폴더에 logo.png 복사
*/
@WebFilter("/*") //url 요청 정보
public class SiteMeshFilter extends ConfigurableSiteMeshFilter {
@Override
protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) {
builder.addDecoratorPath("/*", "/layout/kiclayout.jsp")
.addExcludedPath("/board/imgupload*")
.addExcludedPath("/user/idsearch*")
.addExcludedPath("/user/pwsearch*");
}
}kiclayout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<title><sitemesh:write property='title'/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${path}/css/main.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
#footer {position: fixed; bottom: 50px;}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<%-- 글작성시 다양한 형태 사용 가능 --%>
<script type="text/javascript"
src="http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<sitemesh:write property='head'/>
</head>
<body class="w3-light-grey">
<!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>
<span class="w3-bar-item w3-right">
<c:if test="${empty sessionScope.loginUser}">
<a href="${path}/user/login">로그인</a>
<a href="${path}/user/userEntry">회원가입</a>
</c:if>
<c:if test="${!empty sessionScope.loginUser}">
${sessionScope.loginUser.username}님이 로그인 하셨습니다.
<a href="${path}/user/logout">로그아웃</a>
</c:if>
</span>
</div>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:200px;" id="mySidebar"><br>
<div class="w3-container w3-row">
<img src="${path}/image/logo.png"
class="w3-circle w3-margin-right"
style="width:100px;">
<div class="w3-row"> </div>
<div class="w3-row">
<c:if test="${!empty sessionScope.loginUser}">
<span>반갑습니다. <strong>${sessionScope.loginUser.username }님</strong></span>
</c:if>
<c:if test="${empty sessionScope.loginUser}">
<span><strong>로그인하세요</strong></span>
</c:if>
<br>
</div>
</div>
<hr>
<div class="w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i> Close Menu</a>
<a href="${path}/user/mypage?id=${loginUser.userid}" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i> 회원관리</a>
<a href="${path}/item/list" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i> 상품관리</a>
<hr>
<a href="${path}/board/list?boardid=1" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> 공지사항</a>
<a href="${path}/board/list?boardid=2" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> 자유게시판</a>
<a href="${path}/board/list?boardid=3" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> QNA</a>
</div>
</nav>
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main"
style="margin-left:200px;margin-top:43px; margin-right: 20px;">
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-container w3-light-grey w3-padding-32">
<div class="w3-row">
<div class="w3-container w3-col" style="width:95%;">
<sitemesh:write property='body'/>
</div>
<div class="w3-container w3-col" style="width:5%;">
<p> </p>
</div>
</div>
</div>
</div>
<!-- End page content -->
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
} else {
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body></html>main.css
/* /webapp/css/main.css */
table { width : 100%; border-collapse: collapse; }
th,td {
border : 3px solid #bcbcbc;
text-align: center;
padding : 8px;
}
th {background-color: #4CAF50; color : white;}
td { background-color: #F2F2F2; }
input[type=text],input[type=password],textarea { width : 100%; }
caption {
color : #111111;
font-size : 20px;
background-color: #FFFFFF;
}
.nopadding {
width:280px;
table-layout:fixed;
}
.nopadding th,.nopadding td {
border : 1px solid #bcbcbc;
vertical-align : middle;
padding : 0px;
}
.nopadding caption {
color : #111111;
font-size : 15px;
background-color: #FFFFFF;
}728x90
반응형