..
DEV (257)
JSP 페이지 이동 4가지 방법 및 특성
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

먼저 다음 페이지 이동 특성들을 미리 알아볼 필요가 있습니다

JSP에서는 페이지 이동시 다음 4가지 정도의 방법이 있습니다

 

JavaScript를 이용

window.open, location.href, location.replace 등을 이용할수 있습니다

 

login_process.jsp

<% if (a == null) { %>

      <script>location.href = "admin.jsp"; </script>

<% } else { %>

      <script>alert('권한이 없어요!'); window.history.back(); </script>

<% } %>

         

특징적인부분은 브라우져의 주소창이 변경되며

(이말은 즉슨 클라이언트가 다시 admin.jsp를 서버에 요청한다는 말입니다)

login_process.jsp 에서 jsp가 다 실행되고 브라우져에 out put된 html 및 javascript들만으로

실행된 코드들이라는 것입니다

 

response.sendRedirect를 이용

login_process.jsp

<% if (a == null) {

          response.sendRedirect("admin.jsp");

     } else {

          response.sendRedirect("login.jsp");

     }


     a = "test 입니다";

     System.out.println(a);

%>


이 코드에서 a가 출력될까요 안될까요?

출력 됩니다.

sendRedirect가 되더라도 밑에 jsp 코드들은 모두 실행 된다는 말입니다

response.sendRedirect는 기본적으로 모든 로직들을 다 처리한 후 코드 맨 마지막 부분에

사용하는 것이 올바른 방법입니다

만약 그렇지 못한 경우는 response.sendRedirect 다음 바로 return; 이라는 코드를 집어 넣어야 합니다

 

response.sendRedirect은 HTTP 헤더정보를 변경하여 redirect시키기 때문에 역시 브라우져의 주소창이 변경되며 sendRedirect가 실행되기전 html이나 javascript로 out put되는 코드들은 모두 실행되지 않습니다.

 

forward 이용

jsp 태그의 <jsp:forward> 나 servlet의 RequestDispatcher.forward 를 이용할수 있습니다

 

login_process.jsp

<% if (a == null) { %>

          <jsp:forward page="admin.jsp"/>

<% } else { %>

          <jsp:forward page="login.jsp"/>

<% }


     a = "test 입니다";

     System.out.println(a);

%>


그럼 위의 코드의 경우 a가 출력 될까요 안될까요?

정답은 출력 안됩니다. 바로 forward 되어 버립니다.

클라이언트로 응답주지 않고 바로 서버측에서 admin.jsp로 이동하기 때문에

주소창이 바뀌지 않고 그로인해 브라우져에 출력되는 응답속도 또한 사용자가 보기에는

응답이 빠른 장점이 있습니다

 

하지만 forward 이후 JSP 코드들이 실행되지 않는것 사실이지만 만약 finally절이 있는경우

finally절은 실행 됨으로 확실히 알아둡시다.

 

meta 태그 이용

마지막으로 meta 태그를 이용할 수도 있습니다.


<META http-equiv=refresh content="0;url=admin.jsp">


즉 요약하자면..

페이지 이동 방법이 여러가지가 있습니다.

그 특성들을 잘 알고 올바르게 사용하여야 합니다.

'DEV > java' 카테고리의 다른 글

서블릿 컴파일 후에 실행이 안되요  (0) 2008.08.28
이클립스에서 스트럿츠 프레임 워크 세팅하기  (0) 2008.06.21
prodList.jsp  (0) 2008.05.24
  Comments,     Trackbacks
※레이어의 스타일 속성 사용법
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

※레이어의 스타일 속성 사용법
   –레이어를 자바스크립트와 함께 사용할 때는 레이어의 스타일 속성을 이용
   –스타일 속성은 <div style=“ ”>에서 style 속성에 지정한 스타일 속성 값을 그대로 사용
       document.all[id명].style.스타일 속성

     ①레이어 보이거나 감추게 하기
         document.all[id명].style.visibility=visible/hidden
     ①레이어 이동하기
        document.all[id명].style.left=값
        document.all[id명].style.top=값
        document.all[id명].style.left=event.clientX
        document.all[id명].style.top=event.clientY

     
      •애니메이션 효과를 줄 때 사용
      •레이어의 좌표 값을 변경하여 레이어가 담고 있는 문자, 그림 등을 움직이게 할 수 있음

'DEV > html/css/js/img' 카테고리의 다른 글

ajax 관련 사이트 모음  (0) 2008.10.12
Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
  Comments,     Trackbacks
Layers 객체
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
레이어란 문서에 떠 있는 새로운 창입니다.
레이어를 문서에 삽입하려면 <div> 태그를 사용합니다.
자바스크립트와 스타일을 함께 사용하면 애니메이션 효과를 만들 수도 있습니다.

레이어의 스타일 속성 사용법
레이어를 자바스크립트와 함께 사용할 떄는 레이어의 스타일 속성을 이용합니다.
레이어의 스타일 속성은 <div style=""> 에서 style 속성에 지정한 스타일 값을 그대로 사용합니다.


  1. document.all[id명].style.스타일 속성  

아래는 실제 사용되는 예입니다.

  1. <div id=coolsoft>  
  2. <a href=# onMouseOver="note1.style.visibility='visible'" onMouseOut="note1.style.visibility='hidden'">쿨소프트</a><br><br>  
  3. </div>  
  4. <div id=note1>  
  5. 쿨소프트<br>  
  6. HTML, CSS, 자바 스크립트, JSP, XML, 플래시 등 웹프로그래밍 강좌 및 자료 수록.  
  7. </div>  

쿨소프트를 누르게 되면 아래에 설명이 나오게 됩니다..

'DEV > html/css/js/img' 카테고리의 다른 글

※레이어의 스타일 속성 사용법  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
  Comments,     Trackbacks
Layer 객체의 특성
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
Layer 객체의 특성

<name>

 name특성은 <LAYER> 택에서 ID속성을 지정해 놓은 레이어의 이름을 가리키게 된
다. 이 특성은 자바스크립트에서 값을 참조만 할 수 있지 수정할 수는 없다.

<let / top>

left와 top은 레이어의 좌측 상단 위치(픽셀 단위)를 가리키는 특성이다. 특히 이 특성
값은 자신히 현재 속해 있는 레이어나 문서를 기준으로 계산된다는 점에 주의해야
한다.
 
이 특성은 자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있기 때문에 레이어의
위치를 동적으로 바꾸는데 사용할 수 있다.
 

 

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
            function leftLayer() {
                // layer1을 지정하는 방법을 보자.
                // document 객체 밑에 있는 layers라는 객체 배열에는 현재 문서 안에
                // 포함되어 있는 모든 레이어들의 객체가 들어가 있다. 이중에 layer1
                // 레이어 객체를 가리키기 위해 참조 배열 방식을 사용하여야 한다.
                // 또는 이 레이어가 문서에 첫번째로 나타나는 레이어 객체이기 때문에
                // window.document.layers[0]도 동일한 객체를 가리키는 것이 된다.
                var val = window.document.layers['layer1'].left;
                window.document.layers['layer1'].left = val - 5;
            }
            function upLayer() {
                var val = window.document.layers['layer1'].top;
                window.document.layers['layer1'].top = val - 5;

            }
            function downLayer() {
                var val = window.document.layers['layer1'].top;
                window.document.layers['layer1'].top = val + 5;
            }
            function rightLayer() {
                var val = window.document.layers['layer1'].left;
                window.document.layers['layer1'].left = val + 5;
            }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER> <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="왼쪽으로" onClick="leftLayer()">
            <INPUT TYPE="button" VALUE="  위로  " onClick="upLayer()">
            <INPUT TYPE="button" VALUE=" 아래로 " onClick="downLayer()">
            <INPUT TYPE="button" VALUE="오른쪽으로" onClick="rightLa

yer()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=250 WIDTH=250 HEIGHT=50
                  BGCOLOR="WHITE">
         <H2> 넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서
         특정 영역을 지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을
         제공하기 시작하였다. </H2>
        </LAYER>
    </BODY>
</HTML>

결과보기

<width / height>

width와 height는 각각 레이어의 너비와 높이에 대한 정보를 가지고 있는 특성이다.
이 특성은 자바스크립트에 의해 참조할 수도 있고 수정할 수도 있다.

<pageX / pageY>

 pagex와 cageY는 앞에 나온 1911와 top특성처럼 레이어의 좌측 상단 위치(픽셀 단위)
를 가리키는 특성이다. 다만 다른점이라면 pagex와 cageY가 항상 전체 페이지를 기
준으로 한 위치 정보라면, left와 top은 현재 포함되어 있는 레이어나 문서를 기준으로
한다는 것이다. 이 특성 역시 자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있다

<clip.top / clip.left / clip.right / clip.bottom>

이 특성들은 클리핑 영역의 크기에 대한 정보를 가지고 있다. 여기서 클리핑 영역이
라는 것은 전체 레이어 중에서 실제로 화면에 보여줄 영역을 의미한다. 이 특성들은
자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있다.

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
           function zoomOut() {
            window.document.layers[0].clip.left = window.document.layers[0].clip.left-2;
            window.document.layers[0].clip.top = window.document.layers[0].clip.top-2;
            window.document.layers[0].clip.right = window.document.layers[0].clip.right+2;
            window.document.layers[0].clip.bottom = window.document.layers[0].clip.bottom+2;
            }
           function zoomIn() {
            window.document.layers[0].clip.left = window.document.layers[0].clip.left+2;
            window.document.layers[0].clip.top = window.document.layers[0].clip.top+2;
            window.document.layers[0].clip.right = window.document.layers[0].clip.right-2;
            window.document.layers[0].clip.bottom = window.document.layers[0].clip.bottom-2;
           }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER>
        <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="확대" onClick="zoomOut()">
            <INPUT TYPE="button" VALUE="축소" onClick="zoomIn()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=300 WIDTH=250 HEIGHT=50
                 CLIP=50,50,100,100 BGCOLOR="WHITE">
         <H2> 넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서
         특정 영역을 지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을
         제공하기 시작하였다. </H2>
        </LAYER>
    </BODY>
</HTML>

결과보기

<bgColor / background>


bgcolor는 레이어의 배경색을 가리키는 특성이고, background는 레이어의 배경 이미지
의 URL주소를 가리키는 특성이다. bgcolor에는 직접 색상 이름이 지정될 수도 있고,
RGB 값이 지정될 수도 있다. 또한 배경색을 투명하게 만들고 싶은 경우에는 null을
지정하게 되는데, 이 값이 bgcolor의 디폴트값이다.
 
   //파란색 배경 이데지
   layer.bgcolor = "BLUE":
     or
   layer.bgcolor = "#0000FF":
 
// 배경을 투명하게
layer.bgcolor = null;

<zindex / siblingAbove / siblingBelow / above / below>


zindex는 레이어들 사이의 순서를 지정하는 특성으로, 이 값이 높은 레이어일수록 값
이 낮은 레이어 위로 올라가게 된다. 그리고 siblin턴.hove와 above는 모두 현재 정의
되는 레이어 위에 들어갈 레이어를 지정하게 되고, siblingBelow와 below는 현재 정의
되는 레이어 밑에 들어갈 레이어를 지정하게 된다. 단, sibling이 앞에 붙은 특성의 경
우에는 동일한 상위 레이어 안에 들어간 레이어들 중에서 하나를 지정해야 한다.

여기에서 한 가지 주의해야 할 점은 zlndex의 경우에는 자바스크립트에서 값을 참조
할 뿐만 아니라 수정할 수도 있지만, 나머지 siblin앓,hove, siblingBelow, above, below
특성은 수정할 수는 없고 참조만 할 수 있다는 것이다.
 

<visibility>

 visibility특성은 현재 래이어를 보여줄 것인지 감출 것인지를 지정하기 위한 것이다.
이 특성에는 "show", "hi(k", "irlherit" 중 한 값이 설정될 수 있다. 여기에서 show는 레
이어를 보여준다는 것이구 hide는 레이어를 감춘다는 것이며, inherit는 현 레이어를
포함하고 있는 상위 레이어의 속성값을 상속받는다는 것을 의미한다.

<parentLayer>

 pcrenaayer는 레이어가 현재 포함되어 있는 상위 레이어의 이름을 가리키게 되는데,
만약 레이어 안에 포함되어 있지 않다면, 레이어가 포함되어 있는 윈도우 객체를 가
리키게 된다. 참고로 이 특성값은 참조만 할 수 있고 수정할 수는 없다.
 

<src>
src는 레이어 안에 내용으로 들어갈 HTML파일의 URL주소를 지정하는데 사용하는
특성이다. 이 특성은 자바스크립트에서 수정할 수 있기 때문에 포맷을 그대로 유지하
면서 내용이 계속해서 바뀌는 웹 사이트에 유용하게 사용될 수 있을 것이다.
 

 

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
           function showLayer() {
              window.document.layers[0].visibility = "show";
           }
           function hideLayer() {
              window.document.layers[0].visibility = "hide";
           }
           function docu1() {
              window.document.layers[0].src = "docu1.htm";
           }
           function docu2() {
              window.document.layers[0].src = "docu2.htm";
           }
           function docu3() {
              window.document.layers[0].src = "docu3.htm";
           }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER>
        <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="보이기" onClick="showLayer()">
            <INPUT TYPE="button" VALUE="감추기" onClick="hideLayer()">
            <INPUT TYPE="button" VALUE="문서 1" onClick="docu1()">
            <INPUT TYPE="button" VALUE="문서 2" onClick="docu2()">
            <INPUT TYPE="button" VALUE="문서 3" onClick="docu3()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=280 WIDTH=250 HEIGHT=200
                 SRC="docu1.htm" BGCOLOR="WHITE">
        </LAYER>
    </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서 특정 영역을
   지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을 제공하기 시작하였다.</H3>
   </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>이 레이어는 여러개가 서로 겹쳐서 나타날 수 있으며, 자바스크립트를 이용하면
   위치도 자유롭게 바꿀 수가 있다. </H3>
   </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>또한 자바스크립트를 이용하여 레이어를 감출 수도 있으며, 겹쳐진 레이어들이
   투명하게 나타나도록 만들 수도 있다. </H3>
   </BODY>
</HTML>

결과보기

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
css관련 참고 사이트  (0) 2008.03.11
  Comments,     Trackbacks
[javascript] javacript 객체 모델
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
사용자 삽입 이미지

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
css관련 참고 사이트  (0) 2008.03.11
  Comments,     Trackbacks
prodList.jsp
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<%@ page import="product.*" language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="/error.jsp"%>
<jsp:useBean id="productList" class="java.util.ArrayList" scope="request" />
<%--<jsp:useBean id="productBean" class="product.ProductBean" scope="request" />--%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<%-- <%@ include file="/common/top.jsp" %> --%>

<jsp:include page="/common/top.jsp" >
 <jsp:param name="title" value="list view"/>
</jsp:include>

</head>
<BODY>
<form action="" method='POST'>
<br/>
<br/>
<center>
<table width="70%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr><td colspan="10" align="center" style="font-size:16px; font-weight:bold"> 기자재 목록</td></tr>
<tr height="2" bgcolor="7E7B7B">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr height="17" bgcolor="DEDBDE" align="center">


 
 <td width="45">no.</td>
 <td  width="200">자산번호</td>
 <td width="150">분류코드명</td>
 <td width="200">기자재명</td>
 <td width="200">등록일</td>
 <td width="70">관리자</td>
 <td width="120">보관장소</td>
 <td width="80">남은날</td>
 <td width="120">불용여부</td>
</tr>
<tr height="1" bgcolor="A5A6A5">

 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<%
 int total = productList.size();
 int pageSize = 2;
 String pageNum = request.getParameter("num");
 int pageCount = total / pageSize + ((total%pageSize)==0?0:1);//페이지 몇개?
 ProductBean productBean = null;
 
 if(pageNum == null){
  pageNum = "1";
 }
 
 int currentPage = Integer.parseInt(pageNum);
 int startNum = 1+ (currentPage-1)*pageSize; //페이지 첫번호
 int endNum = (pageCount == currentPage)?(startNum+(total%pageSize)-1):startNum+(pageSize-1);
 
// if (endNum ==0)
//  endNum = 10;//페이지 끝번
 
// if(total != 0){
 for(int i= startNum-1 ; i < endNum; i++){
  productBean = (ProductBean)productList.get(i);
// }
%>

<tr height="23" align="center">
 
 <td class="board_no"><%=productBean.getProdId() %></td>
 <td><div id="prodNo"><%=productBean.getProdNo() %></div></td>
 <td class="board_title" align="left">7110-004-0139</td>
 <td class="board_name"><a href="/webProduct/product/productView.do?prodNo=<%=productBean.getProdNo() %>"><%=productBean.getProdName() %></a></td>
 <td class="board_date">2007-01-30</td>
 <td class="board_hit"><%=productBean.getProdChargeName() %></td>
 <td class="board_down">55506</td>
 <td class="board_good">3년</td>
 <td class="board_bad">N</td>
</tr>

<tr height="1" bgcolor="E3DFDF">

 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>

<%} %>
<tr height="2" bgcolor="7E7B7B"><td colspan="16"></td></tr>
<tr>
 
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td>

 <a href="/webProduct/product/insertForm.jsp"> <img src="/webProduct/image/b_write.gif" /></a>
 </td></tr>
</table>

<%
 int backPage = 0;
 
 if(currentPage == 1){
  backPage = 1;
%>
  [Back]
<%
 }else{
  backPage = currentPage-1;
%>

 <a href="/webProduct/product/productList.do?num=<%=backPage%>">[Back]</a>
<%
 }
 for(int i = 1; i <= pageCount; i++){
 
  if(currentPage == i){
%>
   [<%=i%>]
<%
  }else{
%>  
  <a href="/webProduct/product/productList.do?num=<%=i%>">[<%=i%>]</a>
<%  
  }
 }
%>
<%
 int nextPage = 0;
 
 if(currentPage == pageCount){
  nextPage = pageCount;
%>
  [Next]
<%
 }else{
  nextPage = currentPage+1;
%>

 <a href="/webProduct/product/productList.do?num=<%=nextPage%>">[Next]</a>
<%
}
%>
</center>

<!--리스트 목록 끝-->
</form>
<jsp:include page="/common/footer.jsp">
 <jsp:param name="email" value="korigp21@naver.com"/>
 <jsp:param name="tel" value="041-634-3128"/>
</jsp:include>
</BODY>
</html>

  Comments,     Trackbacks
css관련 참고 사이트
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
  Comments,     Trackbacks