강의와 다르게 html 적 요소는 부트스트랩을 사용 하였다.
부트스트랩 중 기본 템플릿 을 사용하였다.
http://bootstrapk.com/getting-started/#template
아래 사이트에서 제공
http://bootstrapk.com/examples/offcanvas/#contact
Top.jsp, Left.jsp, Bottom.jsp, Header.jsp, Center.jsp 로 분리해서
Main.jsp 에서 jsp:include 를 사용해서 include 하였다.
jsp:include 와 <%@ include%> 차이
SP include는 여러개의 JSP파일을 하나의 JSP파일에 인클루드하여 하나의 페이지를 구성하는 방법이다.
이러한 JSP Include에는 2가지 종류가 있으며 정적 include와 동적 include로 나뉘어 진다.
1. 정적 include :
설명 : 정적 인클루드는 지시문 Directive를 이용하여 페이지를 인클루드 하는 방식이다.
형식 : <%@include file="/common/header.jsp" %>
특징 : 정적이라는 의미와 같이 메인 페이지에, 포함되는 JSP 페이지를 로드하고 그것을 java로 변경후, 컴파일
여러 페이지를 합쳐허 하나의 페이지를 만든다는 의미로, class로 컴파일 할때 한번만 컴파일 하면 되기 때문에 성능상의 이점이 있다.
WAS에 따라 포함되는 내용이 변경되어도, 전체를 재 컴파일 하지 않을 수 있기 때문에 변화된 내용이 반영되지 않는 경우가 있다.
2. 동적 include :
설명 : 매번 메인 페이지가 호출 될때마다. 포함되는 내용을 재 컴파일 수행한다.
형식 : <jsp:include src="/common/header.jsp" />
특징 : 매번 내용을 새롭게 컴파일 하기 때문에 성능상의 문제가 발생한다.
하지만 변경이 이루어 져야하거나, 특정 파라미터를 전달하고 싶은경우 이용하면 편리하다.
출처: http://neokido.tistory.com/entry/정적과-동적인-jsp-include-지시문 [상선약수]
정적인 경우 데이터 변환과 전달 안 된다. 그리고 정적으로 incldue 하였을 경우 상단 혹은 하단의 내용 변경시 재컴파일 하지 않아 때로는
수정을 하였는데도 변화가 생기지 않은 경우도 있다.
동적인 경우 데이터 전달의 예은 다음과 같다. 강의 내용예
<jsp:include page="Top.jsp">
<jsp:param value="aaa" name="id" />
</jsp:include>
id 가 aaa 로 데이터를 전달 하였다. 이때 request.getParameter("id") 로 받아 와야 한다.
El 을 사용했을 경우는 ${param.id } 왜? jsp:include 는 페이지 이동후 데이터를받아서 다시 돌려 오기 때문이다.
Main.jsp
<jsp:include page="Top.jsp"> <jsp:param value="aaa" name="id" /> </jsp:include>
Top.jsp
<ul class="nav navbar-nav">
<li><a href="#"></a></li>
<li class="active"><a href="#">텐트</a></li>
<li><a href="#about">의자</a></li>
<li><a href="#contact">식기류</a></li>
<li><a href="#contact">침낭</a></li>
<li><a href="#contact">테이블</a></li>
<li><a href="#contact">화롯대</a></li>
<li><a href="#contact"><%= request.getParameter("id") %></a></li>
</ul>
전체 코드
Header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/img/favicon.ico">
<title>Off Canvas Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<h2 id="logo"><a href=""><img src="img/logo.png" ></a></h2>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#"></a></li>
<li class="active"><a href="#">텐트</a></li>
<li><a href="#about">의자</a></li>
<li><a href="#contact">식기류</a></li>
<li><a href="#contact">침낭</a></li>
<li><a href="#contact">테이블</a></li>
<li><a href="#contact">화롯대</a></li>
<li><a href="#contact"><%= request.getParameter("id") %></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="blank"> </div>
Left.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/.sidebar-offcanvas-->
Center.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<p><img src="img/auto.jpg" id="centerImg"></p>
</div>
</div><!--/.col-xs-12.col-sm-9-->
Main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="Header.jsp" />
</head>
<body>
<jsp:include page="Top.jsp">
<jsp:param value="aaa" name="id" />
</jsp:include>
<%--
<jsp:include page="Top.jsp"/>
--%>
>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<!-- Left -->
<jsp:include page="Left.jsp"/>
<!-- Center -->
<jsp:include page="Center.jsp"/>
</div><!--/row-->
<!-- Bottom -->
<jsp:include page="Bottom.jsp"/>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/offcanvas.js"></script>
</body>
</html>
소스 : https://github.com/braverokmc79/jsp_sin
유튜브 동영상 출처 :
강사 : 신형섭(잭임연구원)
저작권 : (주)소프트캠퍼스 http://www.softcampus.co.kr 더많은 무료 강의는 사이트에서 확인하실수 있습니다.
댓글 ( 4)
댓글 남기기