JSP

 

 

 

 

 

 

 

 

 

 

 

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">&nbsp;</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 더많은 무료 강의는 사이트에서 확인하실수 있습니다.

 

 

 

about author

PHRASE

Level 60  라이트

실수를 두려워 하지 마라. 그대신 그러한 실수들에 대한 창의력, 건설적 그리고 개선적인 대책의 부재를 두려워 하라.

댓글 ( 0)

댓글 남기기

작성