1288
No
Header2.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"%>
<%
//로그 아웃 클릭시 파라미터를 통해서 로그아웃인지 여부 확인
String logout =request.getParameter("logout");
if(logout!=null){
//id에 null 값을 부여
session.setAttribute("id", null);
//세션 유지시간을 죽이시오
session.setMaxInactiveInterval(0);
out.println("<script>location.href='SessionMain.jsp';</script> ");
}
//세션을 통하여 id를 읽어드림
String id= (String)session.getAttribute("id");
//로그인이 되어 있지 않다면 session 값이 null 처리 해줌
if(id ==null){
id="손님";
}
%>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<h2 id="logo"><a href="/CookieSession/SessionMain.jsp"><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>
<%
if(id.equals("손님")){
%>
<li><a href="#"><%=id %> 님</a><li>
<li>
<a href="SessionMain.jsp?center=SessionLoginForm2.jsp" class="btn"> 로그인</a>
</li>
<% }else{ %>
<li><a href="#"><%=id %> 님</a><li>
<li>
<a href="SessionMain.jsp?logout=1">로그아웃</a>
</li>
<% } %>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="blank"> </div>
Bottom.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<p id="footerP"></p>
<nav class="avbar navbar-inverse navbar-fixed-bottom">
<div class="container text-center" style="color:#fff;">
<ul style=" list-style:none;">
<li><h3>주소 : <a href="http://macaronics.net" >macaronics.net</a></h3></li>
</ul>
</div>
</nav>
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="SessionMain.jsp?center=Snowpeak.jsp"
class="list-group-item ${ param.center=='Snowpeak.jsp'? 'active' : ''}">스노우피크</a>
<a href="SessionMain.jsp?center=Coleman.jsp"
class="list-group-item ${ param.center=='Coleman.jsp'? 'active' : ''}">콜맨</a>
<a href="SessionMain.jsp?center=Jeep.jsp"
class="list-group-item ${ param.center=='Jeep.jsp'? 'active' : ''}">지프</a>
<a href="SessionMain.jsp?center=Kovea.jsp"
class="list-group-item ${ param.center=='Kovea.jsp'? 'active' : ''}">코베아</a>
</div>
</div><!--/.sidebar-offcanvas-->
SessionMain.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="Header2.jsp" />
</head>
<body>
<%
//Center 값을 변경해주기위해서 request 객체를 Center 값을 받아옴
String center =request.getParameter("center");
//처음 SessionMain.jsp 를 실행하면 null값이 실행되기에 null 처를 해줌
if(center ==null){
center ="Center.jsp";
}
%>
<jsp:include page="Top.jsp">
<jsp:param value="aaa" name="id" />
</jsp:include>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right" >
<!-- Left -->
<jsp:include page="Left.jsp"/>
<!-- Center -->
<jsp:include page="<%=center %>" />
</div><!--/row-->
</div><!--/.container-->
<!-- Bottom -->
<jsp:include page="Bottom.jsp"/>
<!-- 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>
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-->
Snowpeak.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/snowpeak.jpg" id="centerImg" width="700" height="500"></p>
</div>
</div><!--/.col-xs-12.col-sm-9-->
Coleman.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/colman.jpg" id="centerImg" width="700" height="500"></p>
</div>
</div><!--/.col-xs-12.col-sm-9-->
Jeep.jsp
<p><img src="img/Jeep.JPG" id="centerImg"></p>
Kovea.jsp
<p><img src="img/kovea.jpg" id="centerImg"></p>
동영상 강좌와 다르게 모바일 적용이 가능한 반응형 부트스트랩을 사용하였다.
여기서는 jsp 를 배우는 강좌 이기 때문에 html 적 요소에는 비중있게 생각 하지 않아도 될 것이다.
소스 : https://github.com/braverokmc79/jsp_sin
유튜브 동영상 출처 :
강사 : 신형섭(잭임연구원)
저작권 : (주)소프트캠퍼스 http://www.softcampus.co.kr 더많은 무료 강의는 사이트에서 확인하실수 있습니다.
댓글 ( 4)
댓글 남기기