1. JSP 기본 객체 중에 자주 사용하는 객체 - response 객체
1-1. respnse 기능
1) 응답 헤더 정보 입력
2) 리다이렉트(redirect) 하기 (사전적의미 : 다른 방향으로 다시 보내다, 전송하다)
* 이외에 기능이 있지만, JSP 페이지에서는 거의 사용하지 않음
1-2. 리다이렉트(redirect) 기능 설명
- 리다이렉트는 웹 서버가 웹 브라우저에게 다른 페이지로 이동하라고 응답하는 기능
- 새로운 페이지에서는 request와 response 객체가 새롭게 생성된다. 따라서 파라미터 값이 전달되지 않기 때문에 직접 구현해 주어야 한다.
- ex) 사용자가 로그인에 성공한 후 메인 페이지로 자동으로 이동하는 사이트처럼 특정 페이지를 실행한 후 지정한 페이지로 이동하길 원할 때 리다이렉트 기능을 사용
- 리다이렉트할 때 한글 파라미터는 반드시 인코딩을 해야한다.
* URLEncoder.encode(인코딩할파라미터, charset) 메서드로 인코딩
ex) URLEncoder.encode(id, "UTF-8")
- response.sendRedirect(location) 메서드로 해당 페이지(location)를 다시 요청함
예제1) ex03.jsp에서 id,pw 입력 후 로그인 버튼을 클릭하면 ex03_ok.jsp에서 id,pw 확인 후 ex03.jsp 로그인 성공, 실패 정보를 돌려준 뒤 경고창 띄우기
- ex03.jsp에서 id와 pw 입력 후 ex03_ok.jsp에 요청할 때는 파라미터 값에 id=아이디&pw=패스워드 로 넘어감
- ex03_ok.jsp에서는 넘어온 파라미터 값으로 id와 pw를 확인하여 일치하면 쿼리스트링을 id=아이디명&ok로 돌려주고 일치하지 않을 때는 error를 돌려줌
- 리다이렉트로 받은 파라미터 값을 ex03.jsp에서 if문으로 확인하여 로그인 성공 또는 실패 경고창을 띄움
[ex03.jsp 코드]
[ex03_ok.jsp]
[결과]
예제2) 리다이렉트 기능으로 로그인 했을 때와 안했을 때 보여지는 화면(기능들)
[ex04.jsp 코드]
[ex04_ok.jsp 코드]
[결과]
2. 포워드(forward)
- 클라이언트가 한 번 더 요청을 보내도록 하는 리다이렉트와는 다르게 포워드는 서버 내부에서 일어나는 호출이다.
- 서버에서 이동하기 때문에 request와 response의 객체가 그대로 전달됨
- 클라이언트의 URL에 대한 요청이 들어오면 해당 URL이 다른 URL로 포워딩 된 것이 확인되었을 경우 서버에서 포워딩된 URL의 리소스를 확인하여 클라이언트에 응답한다.
- 포워딩이 일어나면 클라이언트 단에서는 아무런 동작을 하지 않으며, 모든 동작을 서버에서 처리한다.
- 포워딩하는 코딩
RequestDispatcher dispatcher = request.getRequestDispatcher(path);
dispatcher.forward(request, response); => 이 코딩으로 파라미터 값이 그대로 넘어간다.
리다이렉트(redirect)와 포워드(forward)의 차이점
1) 리다이렉트는 URL의 변화가 있지만, 포워드는 변화가 없다.
2) 리다이렉트는 객체의 재사용이 안되지만, 포워드는 객체의 재사용이 가능하다.
즉, 시스템(session, DB)에 변화가 생기는 요청(로그인, 회원가입, 글쓰기 등)의 경우 리다이렉트 방식으로 응답하는 것이 바람직하며, 시스템에 변화가 생기지 않는 단순조회(리스트보기, 검색)의 경우 포워드 방식으로 응답하는 것이 바람직하다.
출처)
https://doublesprogramming.tistory.com/63
리다이렉트와 포워드 예제)
1) 리다이렉트
- e05.jsp에서 리다이렉트 링크 클릭 -> ex05_redirect.jsp 요청
- ex05_redirect.jsp에서 ex05_finish.jsp을 다시 새로 요청(새로 요청하기 때문에 파라미터값이 전달X 직접 구현해주어야함)
- ex05_finish.jsp에서 name과 age의 파라미터 값을 찍음
2) 포워드
- ex05.jsp에서 포워딩 링크 클릭 -> ex05_forward.jsp 요청 -> 포워딩 때문에 서버에서 직접 finish로 이동
[ex05.jsp 코드]
[ex05_redirect.jsp 코드]
[ex05_forward.jsp 코드]
[ex05_finish.jsp]
[결과]
> 리다이렉트 클릭
> 포워딩 클릭
리다이렉트와 포워드 예제)
- form 태그 2개를 생성한 뒤 각각의 from 태그에서 name과 age를 입력받도록 함
- Member.java 서블릿 파일 생성
- 1번 form 태그에서는 GET 방식으로 전송하여 요청 URL 매핑 패턴을 /member/get으로 Member.java 서블릿 파일을 호출 -> doGet() 메서드를 통해 ex07_ok.jsp로 리다이렉트
- 2번 form 태그에서는 POST 방식으로 전송하여 요청 URL 매핑 패턴을 /member/post로 Member.java 서블릿 파일을 호출 -> doPost() 메서드를 통해 ex07_ok.jsp 포워딩
[ex07.jsp 코드]
[Member.java 서블릿 코드]
[ex07_ok.jsp 코드]
[결과]
GET 전송시..
POST 전송시..
3. GET 방식 + 서블릿 + JDBC + 포워딩 예제(JSTL 맛보기)
dept 테이블에 있는 부서 번호 선택하면 해당 부서원의 정보를 emp 테이블에 가져온다.
따라서 JDBC Driver 연동할 수 있는 connection과 정보를 가져올 DTO가 필요!
예제가 처리되는 순서는 다음과 같다.
1) ex06.jsp 안에 a 링크 태그 선언(a 링크 태그는 GET 방식으로 요청함)
2) ScottDept 서블릿 생성 및 등록 (GET 방식으로 요청하기 때문에 doGet 메서드만 오버라이딩)
(doGet() 메서드 안에서는 부서 정보를 ArrayList로 저장하여 ex06_dept.jsp에 포워딩 시켜 ex06_dept.jsp에 출력)
3) ScottDept 서블릿이 호출되고 난 다음.. ex06_dept.jsp 포워딩 되어져서 부서정보가 select 태그로 출력
4) ex06_dept.jsp의 select 태그에서 부서를 선택 -> 이 작업은 ex06_dept.jsp에서 script 태그 안에 jquery 코딩
5) ScottEmp 서블릿 생성 및 등록을 한 뒤 ScottEmp.java 서블릿 호출하여 선택한 부서의 사원 정보를 ArrayList 저장
6) ex06_emp.jsp 포워딩을 시켜서 ex06_emp.jsp에 해당 부서원의 정보를 출력
[참고] 프로젝트 진행할 때 모든 경로는 상대경로로 지정하지 말고 , /jspPro라고 하는 context Path부터 경로 설정하기! 웹의 경로 구분자는 /
[ex06.jsp 코드]
[ScottDept 서블릿 코드]
- ScottDept.java 안에서는 JDBC 코딩으로 DB 연동 작업을 하여 부서정보를 ArrayList에 담아서 포워딩할 때 가지고 갈 DB 데이터를 setAttribute로 이름을 주고 담고자 하는 정보를 매개변수로 주어서 처리한다.
- 포워딩 코드로 파라미터 값이 그대로 넘어가서 처리 되어짐
[ex06_dept.jsp 코드]
- list라는 이름으로 정보를 가져왔기 때문에 request.getAttribute() 메서드로 list를 가져와 형변환을 해주고 ArrayList에 담아준다.
- list를 반복자(Iterator)로 가져와 option 태그를 동적으로 생성해 준다.
- 선택한 option 태그의 값을 쿼리스트링으로 날리기 위해선 from 태그로 감싸주어야 하기 때문에 script 태그 안에 jquery 코딩으로 처리한 뒤 옵션 태그를 선택해서 바뀔 때 form 태그의 action 속성과 method 속성을 submit 시킨다.
[ScottEmp 서블릿 코드]
- ex06_dept.jsp에서 선택한 부서번호를(select 태그의 name인 selDept로 파라미터를 가져옴) request.getParameter로 가져와서 DB 연동 작업을 하여 부서원 정보를 담는다.
[ex06_emp.jsp 코드]
[결과]
ACCOUNTING 선택 후
다시하기 클릭 시
4. JSTL 맛보기
- JSTL은 JSP Standard Tag Library 약자
- JSTL을 사용하면 스크립트릿 코드의 사용을 줄이면서 더욱 간결하고 이해하기 쉬운 JSP 코드를 작성할 수 있음
https://mvnrepository.com/artifact/javax.servlet/jstl/1.2
Maven Repository: javax.servlet » jstl » 1.2
Professional Java Data: RDBMS, JDBC, SQLJ, OODBMS, JNDI, LDAP, Servlets, JSP, WAP, XML, EJBs, CMP2.0, JDO, Transactions, Performance, Scalability, Object and Data Modeling (2001)by Carl Calvert Bettis, Michael Bogovich, Sean Rhody, Mark Wilcox, Kelly Lin P
mvnrepository.com
위의 링크에서 JSTL 1.2 버전을 다운로드 받고 WEB-INF/lib 폴더에 복사하여 붙여넣기를 한 뒤에
jsp 파일 상단에 JSTL을 사용하기 위한 디렉티브를 추가하면 사용이 가능하다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- JSTL 사용하기 위한 디렉티브 추가 -->
* JSTL 버전은 웹서버의 버전에 따라 사용하는 버전이 다르니 참고
3번의 예시와 동일한 결과를 나타내는데 JSTL을 사용하여 코딩하면 JSP의 가독성이 더 높아진다.
ex06_dept.jsp와 ex06_emp.jsp 파일을 복사하여 jstl이라는 이름을 추가한 뒤 JSTL 코딩을 한 것을 살펴보자
jstl 파일을 사용하기 위해서는 ScottDept 서블릿과 ScottEmp 서블릿의 path를 다시 설정해주어야한다.
[ScottDept 서블릿]
[ScottEmp 서블릿]
[ex06_dept_jstl.jsp 코드]
[ex06_emp_jstl.jsp 코드]
5. GET 방식으로 2번의 서브밋 단계를 거쳐 맨 처음의 JSP 파라미터를 계속 가져와 출력하는 예제
ex08.jsp에서는 이름과 나이를 입력받아 submit을 하면 ex08_02.jsp로 파라미터 값이 넘어가고 ex08_02.jsp에서는 주소와 연락처를 입력받아 ex08_03.jsp로 파라미터 값이 넘어가서 ex08_03.jsp에서 이름, 나이, 주소, 연락처를 출력하는 예제이다.
여기서 문제점은 ex08.jsp에서 입력받은 이름과 나이의 파라미터 값이 ex08_03.jsp까지 도달하지 못한다는 점인데 도달할 수 있도록 ex08_02.jsp에서 form 태그 안에 input 태그를 hidden(숨김)시켜 값을 ex08_03.jsp까지 가지고 가야한다.
[ex08.jsp 코드]
[ex08_02.jsp 코드]
[ex08_03.jsp 코드]
[결과]
ex08.jsp 실행
ex08_02.jsp
Next 버튼 클릭 후 ex08_03.jsp
'TIL > View Template' 카테고리의 다른 글
| [SIST] JSP_days04_급여 등급에 해당하는 사원 정보를 가져와서 아코디언 / 탭 형식으로 출력하는 예제(+JSTL 맛보기) (0) | 2022.06.18 |
|---|---|
| [SIST] JSP_days04_부서 선택시 해당 부서의 사원 정보를 테이블로 출력하는 예제 (0) | 2022.06.18 |
| [SIST] JSP_days02_DB연동해보기(JDBC) (0) | 2022.06.15 |
| [SIST] JSP_days02_예제 (0) | 2022.06.15 |
| [SIST] JSP_days02/days03 (0) | 2022.06.15 |