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)
댓글 남기기