-
페이지 이동 처리 (+이클립스 서버 설정)자바 초보개발/HTML 2023. 12. 6. 17:47
웹페이지를 만들 때 자주 사용할 수 있고 중요한 페이지 이동시키는 방법을 다시한번 되새길겸 절차들을 써보려고 한다.
이클립스 서버설정
servers 탭에서 현재 실행중인 서버 설정 들어가기.
HTTP/1.1의 PortNumber 부분을 클릭해 다른 서버와 겹치지 않는 포트로 설정한다. Timeout의 start 부분을 3분으로 넉넉히 설정해준다.
Overview, Modules 부분에서 기존 서버 Path를 변경한다. Edit 버튼을 누른뒤 / 로 바꾸면, localhost/ 까지만 입력하면, webapp document 까지 들어가게 된다.
webapp 밑의 board 폴더를 예시로 들면,
localhost/board/list.jsp로 주소를 입력해 들어가면 된다.
실습 중 유의사항
css파일을 따로 작성한 뒤
<link rel = stylesheet href = "파일명.css"> 태그를 헤드부분에 입력하면 된다.
<button> 태그의 기본속성은 submit이다. onclick만 사용하고 싶다면 반드시 button 타입을 지정해주자.
페이지 이동
실습 파일들의 위치 페이지를 이동시키는 방법은 아래의 종류가 있다.
0.주소란에 URL을 직접 입력한다. => 아주 쉬운 방법이므로 따로 예시는 들지 않겠다.
1. <a> 태그를 이용한다.
2. <form> 태그를 이용한다.
3. JavaScript 에서 location = "URL" 또는 location.href = "URL" 사용.
4. JSP response.sendRedirect("URL") 객체 사용.
3번 기능과 모든방법이 똑같이 결과가 나온다.
위 사진의 파일 경로를 기준으로, 각각의 방법에 대한 jsp 파일들을 page 폴더에 추가해서 학습한다.
방법 1. <a href = "페이지"> 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aExample.jsp</title>
</head>
<body>
<a href = "/board/list.jsp">리스트</a>
<a href = "pageMove">페이지 이동</a>
</body>
</html>
1번의 예시코드.
aExample.jsp 페이지에서 리스트 글자를 클릭하면 board폴더의 list.jsp 페이지로 이동하고, 페이지 이동 글자를 클릭하면
리스트 클릭 후 이동.
방법 2 . <form action = "파일경로"> 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>formAction.jsp</title>
</head>
<body>
<!-- action 요소에 입력한 이름의 파일 페이지로 이동한다 -->
<form action = "pageMove.jsp">
<!-- form 태그의 입력 값 -->
<label>입력 값 예시<input name = "inputEx" ></label>
<button type = "submit">이동</button>
</form>
</body>
</html>
2번의 예시코드.
submit 타입의 버튼을 통해 form 입력양식 안의 값을 pageMove.jsp에 전달한 뒤, 해당 페이지로 이동한다.
2번 페이지 
입력값 + 이동 버튼 결과 
2-3 . 입력값을 사용해 출력. 2-3 예제를 보면, pageMove.jsp에 <% %> 자바 코딩 공간 안에서, 입력받은 값을 받아서 사용할 수 있음을 알 수 있다.
방법 3. 자바스크립트의 location = "url" 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>locationJS.jsp</title>
</head>
<body>
<h1>location을 이용한 이동</h1>
<!-- 버튼을 누르면 onclick 이벤트가 발생해 = 뒤의 부분을 실행한다. -->
<button onclick = "location ='pageMove.jsp?inputEx=14444';"> 이동 버튼 </button>
</body>
</html>
3번의 예시코드 .
onclick 이벤트가 발생하면 그 뒤의 자바스크립트를 실행하게 된다. ? 쿼리기호 뒤에 Key=Value 값을 지정해서, <form>태그의 action 속성처럼 다른페이지로 값을 넘길 수 있다. 넘긴 매개값을 받아서 이용하는 방식은 차이가 조금 있다.
<%
String inputEx = request.getParameter("inputEx");
System.out.println("입력받은 값 = " + inputEx);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이동 결과 페이지</title>
</head>
<body>
<h1>페이지를 이동하셨습니다~!</h1>
로케이션 매개값 : ${param.inputEx}
</body>
</html>
pageMove.jsp에서 ${param.inputEx} 를 입력해, locationJS.jsp에서 넘겨준inputEx 키의 값을 가져올 수 있다.
locationJS.jsp 실행 화면 
pageMove.jsp에서 넘겨받은 매개값의 출력
방법4 response.sendRedirect 자바 메서드 사용
방법 4에서는 자바코드를 따로 작성해놓은 파일로 들어가서 , 해당 자바코드의 sendRedirect 메서드를 이용해 페이지 결과창으로 이동하는 방식을 쓰려고 한다.
<html>
<head>
<meta charset="UTF-8">
<title>javaSendRedirect.jsp</title>
</head>
<body>
<!-- 자바코드가 있는 파일로 들어가자 ! -->
<a href = "java.jsp">java 파일로 가서 코드를 실행해보자</a>
</body>
</html>
방법4 코드 예시
<%
// pageMove.jsp로 이동한다!
response.sendRedirect("pageMove.jsp");
%>
java.jsp 파일에는 위 자바코드만 존재한다.
방법4 예시코드 결과 
링크 클릭시,최종적으로 pageMove.jsp로 이동한다.
마무리
페이지 이동 처리 방법들은 모두 숙지하는게 유용하기에 한번 정리해봤다.
자바스크립트와 HTML은 이클립스에서 자바를 사용했을 때와 달리, 함수 오타 빨간줄도 안뜨고, 정말 오타한번 나면 찾기가 너무 힘들다. 뭔가 좀더 불친절한 것 같다.
혹시 자동완성과 오타표기를 해주는 플러그인이 있는지 찾아봐야겠다.