페이지를 넘나드는 다른 방법
지난 시간엔 액션태그를 이용해 .jsp 파일을 지정해서 페이지를 넘나드는 방법에 대해 배웠다.
이번에는 그 외에 방법이 어떤게 있는지 또 그걸 활용해서
로그인 페이지를 만들고 해당 원리를 조금이나마 이해해보자
ㄱㄱㄱ
일단 로그인 페이지를 구현해볼건데, 메인페이지를 먼저 만들고
중간에 입력한 id 값과 pw 값이 일치하면 성공페이지로, 아니면 실패페이지로 가게끔 분류해주는 중간페이지, 성공,실패 페이지 총 4개의 페이지를 만들었다.
<loginMain.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>
<h1>로그인 페이지</h1>
<form action="loginTo.jsp" method="post">
아이디 : <input type="text" name="id" placeholder="insert ID.."/>
비밀번호 : <input type="password" name="password" placeholder="insert password.."/>
<input type="submit" value="로그인"/>
</form>
</body>
</html>loginMain.jsp 파일에서 먼저 액션태그로 중간분류파일인 loginTo.jsp 로 경로를 설정해주고,
<loginTo.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head> //헤드 부분에서 파라미터를 가져와 저장 가능
<%
String id = request.getParameter("id");
String pw = request.getParameter("password");
%>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
if(id.equals("hanjae") && pw.equals("99")){
response.sendRedirect("loginWelcome.jsp"); // 로그인에 성공했을 때
}else{ // 로그인에 실패했을 때
%>
<jsp:forward page="loginFail.jsp"/>
<%} %>
</body>
</html>이렇게 loginTo.jsp 파일에서 if 문을 활용해 분기점을 나눠주면 된다. 여기서 response.sendRedirect 가 쓰였는데 이게 또 하나의 페이지를 넘어가는 방법이다. 자세한 설명은 밑에서 jsp: forward 와 함께 비교하겠음!
그리고 보다보면 좀 특이한 부분이 있는데 바로 <%,,,%> 표현식 내에서 작성되다가 갑자기 표현식을 닫고, html 구문을 마저 작성 후 다시 표현식을 연다음, else 문을 닫아주는것이다.
상당히 복잡한데, 일단 표현식 내에서 자바언어로 쓰이다가 html 언어로 써야할 때가 오면 저런식으로 열고 닫아 두 언어를 혼용해 사용할 수 있다.
또 하나의 페이지를 넘어가는 방식인 jsp: forward 가 쓰인것도 볼 수있다.
<loginWelcome.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>
<h1>로그인 성공!</h1>
</body>
</html><loginFail.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>
<h1>로그인 실패~</h1>
</body>
</html>로그인성공 페이지와 로그인실패 페이지도 대충 만들어주자.
이제 메인페이지에서 실행시키고 id: hanjae, pw:99 를 입력시 성공, 아닐 시 실패가 뜨는것을 잘 확인할 수 있다.
자 그럼 이제 두 방식, redirect 와 jsp:forward 방식의 차이점은 뭘까?
우리들의 친구C가 친절히 그림판으로 설명해줬지만
애플펜슬도 써보고싶으니 내가 다시 그려봤다 ㅋ
redirect 방식은 클라이언트가 서버에 요청을 보내면 서버에서 수정해서 다시 요청해달라 보내고 수정해서 요청하면 그제서야 응답이 오는 방식으로
주소가 바뀐다는 특징이 있다.
반대로 jsp:forward 방식은 클라이언트가 서버에 요청을 하면 서버내에서 처리해서 처리한 결과를 응답하는 방식이다
주소가 바뀌지 않는다는 특징이 있다.
이러한 특징으로 redirect 방식은 주로 데이터베이스에 변화를 줄 수 있는 회원가입이라던가.. 등을 작성할 때 쓰이고,
forward 방식은 단순검색등에 자주 쓰인다.
파일을 지정할 때 내 컴퓨터에 있는 파일 경로를 그대로 복사할 경우 다른 사람의 컴퓨터에서 프로젝트를 열때 제대로 실행이 안될 수 있다. 이런 경우를 절대경로라 하는데 만약 프로젝트를 모두가 실행할 수 있도록 하려면 어떻게 해야할까?
프로젝트내 작성된 이미지나 다른 파일들을 프로젝트파일과 같이 보내면서, 작성되는 파일을 기준으로 위치를 컴퓨터에게 알려주면 된다.
colorTo.jsp 파일을 작성 중, bluePage.jsp 파일로 액션태그를 걸고 싶을 때 같은 webapp 폴더 안에 있으므로 ./bluePage.jsp 로 지정해주면 된다.
만약 지정해주고싶은 파일이 상위폴더인 main 안에 있다 하면
..//~~ 으로 . 을 두번 해주면 된다.
하위폴더는 ./같은위치폴더 이름/하위폴더 이름 이런식으로 /로 타고타고 작성하면 된다.
마무리
이렇게 페이지를 넘나들 수 있는 두가지의 방법에 대해 추가로 배웠는데 같은 기능인것처럼 보여도 세부적인 차이는 있었다.
각기 수행하는 기능은 같아보여도 내부의 차이를 인지하고 작성하는게 중요한것같다..
