웹 프로그래밍에서의 페이지 이동

1.클라이언트 페이지(html, jsp)에서 서버에게 요청

1) 태그를 이용하는 방법

<a href="서버 URL">텍스트 또는 이미지</a>

<form action="서버 URL">
</form>

2) 스크립트를 이용하는 방법

location.href = "서버 URL";

3) ajax 를 이용하는 방법

  • 1번과 2번은 처리를 해서 결과 페이지로 이동하고자 할 때 주로 이용하고 ajax는 데이터만 받아오고자 할 때 주로 이용

2.서버가 요청을 처리하고 결과 페이지로 이동하도록 하는 방법

1) forwarding

  • 결과 페이지로 이동할 때 요청한 URL을 그대로 가지고 가는 방법으로 요청 흐름이 이어지는 형태로 request 와 reponse 객체가 계속 유지가 됩니다.
  • 결과 페이지에서 새로 고침을 하게되면 서버의 처리가 다시 수행됩니다.
  • jsp 태그를 이용하는 방법 - 전자정부 프레임워크에서 시작 페이지 이동
<jsp:forward page="포워딩할 페이지 경로" />
  • java 코드를 이용하는 방법 
RequestDispatcher ? = request.getRequestDispatcher("포워딩 페이지 경로");
?.forward(request객체, response객체);

2) redirect

  • 결과 페이지로 이동할 때 요청 URL은 버리고 결과 페이지의 URL을 가지고 가는 방법으로 요청 흐름이 끊어지고 새로운 요청 흐름을 만드는 형태로 request 와 response 객체가 새로 만들어 집니다.
  • 결과 페이지에서 새로고침을 하게되면 결과 페이지만 다시 출력이 됩니다.
  • 리다이렉트 하는 방법
response.sendRedirect("리다이렉트할 URL");

3) 어떻게 이동할 것인가?

  • 삽입, 삭제, 갱신 작업을 해야 하는 경우는 반드시 리다이렉트로 결과 페이지로 이동
  • 로그인 과 로그아웃 처리도 리다이렉트
  • 새로 고침을 했을 때 이전 작업을 다시 수행하면 안되는 경우는 반드시 리다이렉트
    • 단순 페이지 이동이나 검색된 결과를 보여줄 때는 포워딩을 합니다.
    • 검색된 결과를 새로고침을 했을 때 결과만 보여주고자 할 때는 리다이렉트를 해도 됩니다.
    • 포워딩은 서버에서 다시 처리를 하고 결과를 새로 가져와서 출력을 하기 때문에 트래픽이 많이 발생 합니다.

실습 : 포워딩과 리다이렉트의 차이

1) index.html에 링크 추가

<a href="./result/input.jsp">포워딩과 리다이렉트의 차이</a><br/>

2) WebContent 디렉토리에 result 디렉토리를 생성하고 input.jsp 파일을 만들고 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forwording 과 Redirect의 차이</title>
</head>
<body>
    <h3>결과 페이지로 포워딩</h3>
    <form action="forward.jsp">
        수1:<input type="text" size="10" name="first"/><br/>
        수2:<input type="text" size="10" name="second"/><br/>
        <input type="submit" value="더하기" />
    </form>
    <h3>결과 페이지로 리다이렉트</h3>
    <form action="redirect.jsp">
        수1:<input type="text" size="10" name="first"/><br/>
        수2:<input type="text" size="10" name="second"/><br/>
        <input type="submit" value="더하기" />
    </form>
</body>
</html>

3) result 디렉토리에 forward.jsp 파일을 만들고 결과 페이지로 포워딩하는 코드를 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
        System.out.println("처리");
        //포워딩하기
        RequestDispatcher dispatcher = 
            request.getRequestDispatcher("forwardresult.jsp");
        dispatcher.forward(request, response);
    %>
</body>
</html>

4) result 디렉토리에 forwardresult.jsp 파일을 만들고 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과 페이지</title>
</head>
<body>
    <%
        out.println("<h3>포워딩 결과를 보여주는 페이지</h3>");
    %>
</body>
</html>

5) 실행

  • 브라우저 창의 URL을 확인하고 새로고침을 했을 때 콘솔창의 메시지를 확인
  • URL:http://localhost:9000/javaweb0212/result/forward.jsp?first=&second=
  • 화면에 출력되는 페이지는 forwardresult.jsp 이지만 URL은 forward.jsp 입니다.
  • 새로고침을 하면 forward.jsp에 작성한 내용이 다시 수행

6) result 디렉토리에 redirect.jsp 페이지를 만들고 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
        System.out.println("리다이렉트 처리");
        //리다이렉트 하기
        response.sendRedirect("redirectresult.jsp");
    %>
</body>
</html>

7) result.jsp 파일에 redirectresult.jsp 파일을 만들고 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
        out.println("<h3>리다이렉트 결과를 보여주는 페이지</h3>");
    %>
</body>
</html>

8) 실행하고 리다이렉트 했을 때의 URL 과 새로고침을 했을 때 콘솔을 확인

  • 새로고침을 하면 결과 페이지만 새로고침이 됩니다.
  • 서버의 처리를 다시 수행하지 않습니다.

9) 웹 프로그래밍의 처리 절차

  • 요청페이지 -> 서버에서 처리 -> 결과페이지
  • 요청 페이지에서 서버에게 요청할 때 a, form, 자바스크립트를 이용
  • 서버에서 처리할 때는 서버언어로 처리
  • 서버의 처리가 끝나면 서버언어의 페이지 이동 방법으로 결과 페이지로 이동
    • 포워딩 할 것인지 리다이렉트 할 것인지 결정

10) 서버에서 처리한 후 결과 페이지에게 데이터 전달

  • 자바에서는 서버에서 결과 페이지에게 전달하는 데이터를 Attribute 라고 합니다.

1> Attribute를 저장할 수 있는 객체

객체 내용
page 현재 페이지에서만 사용할 수 있는 데이터를 저장
request forwarding으로 이동할 때만 데이터가 유지, redirect 하게되면 소멸
session 브라우저를 종료하거나 직접 삭제하기 전까지는 계속 유지
application 모든 클라이언트가 공유, 1개만 생성

2> 저장 관련 메소드

  • void setAttribute(String name, Object value): 데이터 저장
  • Object getAttribute(String name) : 저장한 데이터 가져오기
    • 가져온 데이터를 사용할 때는 원래의 자료형으로 형변환해서 사용해야 합니다.
  • void removeAttribute(String name) : 저장한 데이터 제거하기
  • getAttribute 했을 때 null이 리턴되면 name으로 저장한 적이 없거나 삭제한 데이터

3> forwarding 할 때 일반적으로 request에 데이터를 저장하지만 redirect 할 때 request에 저장하면 소멸됩니다.

  • redirect 할 때 데이터를 전달하고자 하면 session에 저장해야 합니다.
  • 모든 클라이언트가 공유해야 하는 데이터가 있다면 이 경우는 application에 저장
  • korail 같은 웹 사이트에서 전체 접속자수는 application에 저장

실습

1) forward.jsp 파일의 내용을 수정

<%
        //요청 페이지에서 전달한 파라미터 읽기
        String first = request.getParameter("first");
        String second = request.getParameter("second");

        int s1 = 0;
        int s2 = 0;
        try{
            s1 = Integer.parseInt(first);
            s2 = Integer.parseInt(second);
        }catch(Exception e){}

        int result = s1 + s2;

        //포워딩을 하는 경우 데이터 저장
        request.setAttribute("result", result);

        //포워딩하기
        RequestDispatcher dispatcher = 
            request.getRequestDispatcher("forwardresult.jsp");
        dispatcher.forward(request, response);
    %>

2) forwardresult.jsp 파일을 수정

  • forward.jsp에서 넘겨준 데이터를 출력
<%
        out.println("<h3>포워딩 결과를 보여주는 페이지</h3>");
        Object result = request.getAttribute("result");
        out.print("<p>연산결과:" + result + "</p>");
    %>

3) redirect.jsp 파일을 수정

<%
        //요청 페이지에서 전달한 파라미터 읽기
        String first = request.getParameter("first");
        String second = request.getParameter("second");    
        int s1 = 0;
        int s2 = 0;
        try{
            s1 = Integer.parseInt(first);
            s2 = Integer.parseInt(second);
        }catch(Exception e){}

        int result = s1 + s2;

        //리다이렉트를 하는 경우 데이터 저장
        //리다이렉트를 할 때 request에 데이터를 저장하면 데이터는 소멸됩니다.
        session.setAttribute("result", result);

        //리다이렉트 하기
        response.sendRedirect("redirectresult.jsp");
    %>

4) redirectresult.jsp 파일을 수정

<%
        out.println("<h3>리다이렉트 결과를 보여주는 페이지</h3>");
        Object result = session.getAttribute("result");
        out.println("<p>결과:" + result + "</p>");
    %>

웹 프로그래밍 연습을 할 때 가장 먼저 해볼 프로젝트

입력받는 페이지를 만들어서 데이터를 입력 -> 서버가 입력된 데이터를 읽어서 처리를 하고 결과를 생성 -> 출력하는 페이지를 만들어서 처리한 결과를 출력

  • 처음 연습을 할 때 부터 3개의 페이지를 별도로 만들어서 처리
  • 처리 내용이 없어서 단순하게 페이지 이동만 하더라도 지금처럼 수행
    할 수 있으면 매 페이지마다 접속한 클라이언트의 아이피 주소와 페이지 URL을 파일에 기록합니다.
    파일에 기록된 내용을 읽어서 분석하는 작업에 활용
    어떤 아이피가 접속해서 입력페이지나 결제페이지에서 종료하는 경우가 많은 UI를 개선

웹 프로젝트를 할 때 분석 공부를 같이

  • 웹 사이트에서 이동한 경로 와 아이피 그리고 아이디를 기록해 놓는 것은 매우 중요
  • 이런 정보를 바탕으로 UI 분석을 해서 UI를 개선하고 추천 시스템 같은 것을 만들 수 있습니다.

실습 : log 파일 생성 IP + 페이지

<%@ page import="java.io.*, java.sql.*"%>
    <%
    //오늘 날짜를 문자열로 생성
    long d = System.currentTimeMillis();

    //java.sql.Date 는 날짜만 저장하고 toString을 호출하면 날짜만 문자열로 리턴 
    Date today = new Date(d);
    String filename = today.toString();

    //파일에 기록할 수 있는 객체를 생성 
    //파일이 없으면 생성하고 있으면 뒤에 이어붙이도록 생성 
    PrintWriter pw = new PrintWriter(
                     new FileOutputStream("/Users/jw/javalab/WebPro/WebContent/log/" + filename + ".log", true));

    String ip = request.getRemoteAddr();        //접속한 IP주소 가져오기 
    String requestURI = request.getRequestURI();        //요청한 URL 가져오기 - 전체요청 경로     
    String contextPath = request.getContextPath();        //루트 경로 
    String url = requestURI.substring(contextPath.length() + 1);    // 전체 요청 경로에서 루트 경로 제외하기

    //파일에 기록
    pw.println(ip + "-" + url + "\n");
    pw.flush();
    pw.close();
    %>

실습 : java에서 log 파일 열기

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;

public class Main {

    public static void main(String[] args) {

        try {
            BufferedReader br = new BufferedReader(new InputStreamReader(
                    new FileInputStream("/Users/jw/javalab/WebPro/WebContent/log2020-02-12.log")));

            while (true) {
                String line = br.readLine();
                if (line == null) {
                    break;
                }
                System.out.println(line);
            }
            br.close();
        } catch (Exception e) {
        }
    }
}

results matching ""

    No results matching ""