📝Server 중 JSP 공부 및 실습
#230320
📌 JSP(Java Server Page)란?
JAVA코드가 들어가 있는 HTML 코드
🏷️Servelt과 JSP의 차이점
Servlet
- 자바 소스코드 속에 HTML 코드가 들어가는 형태
- HTML 문서를 작성하는데 복잡하고 번거롭다는 단점이 있음.
JSP
- HTML소스코드 속에 자바 소스코드(<% %> 또는 <%= %>)가 들어가는 형태.
- 컴파일을 통해 클래스 파일로 변환되어 웹 서버(WAS==서블릿컨테이너) 에서 실행됨
🏷️ JSP 작성순서(?) ⭐⭐⭐⭐
1. 이클립스에서 Dynamic Web Project용 프로젝트 만들기
만드는 과정은 Servlet 당시 만들던거랑 동일함.
2. 이클립스 👉 VS CODE 이동,
VS CODE 해당 프로젝트 폴더로 변경
3. webapp 폴더 안에 index.html 파일 생성
3-1. webapp - temp 폴더 생성 - test1.html 파일 생성
4. 최종 결과물이 보여질 index.html 보여질 화면에 대한 코드 작성
- form태그 처음과 끝 위치 맞는지 잘 확인하기!!
- 서비스 요청주소 대소문자 맞게 썼는지 주의 !!
/프로젝트명(JSPProject)/서비스요청주소(login) / 데이터 전달방식(get/post) <form action="/JSPProject/login" method="post">
5. src/main/java-edu.kh.jsp.controller 안에서 .java 클래스 만들기
6-1. 클래스 생성 후 클래스 이름 바로 위에
어노테이션 @WebServlet("/서비스요청주소") 써주고 import
6-2 생성 클래스 바로 뒤에 extends HttpServlet 구문 작성
6-3 (get/post방식) 오버라이딩 해주기
7. post 방식의 경우 요청 데이터 문자 인코딩 처리 구문 작성
req.setCharacterEncoding("UTF-8");
8. 전달받은 파라미터(input 태그값) 얻어와 변수에 저장
👉 파라미터는 모두 String 타입!
✔️ java에서 적을 경우
- req.getParameter("");
- 9~11번 순서대로 진행
String id = req.getParameter("inputId"); String pw = req.getParameter("inputPw");
✔️ jsp에서 적을 경우
<body>구문 안에 JSP주석 <% %> 을 달고 안에 작성request라고 풀어서 써주기- 9번 내용 jsp에서 작성하고, 11번 내용 생략가능.
String id = request.getParameter("inputId"); String name = request.getParameter("inputName"); String email = request.getParameter("inputEmail"); String[] pw = request.getParameterValues("inputPw"); String[] hobby = request.getParameterValues("hobby");
9. 조건식 적기
String result = null; if(id.equals("user01") && pw.equals("pass01!")) { result = "로그인 성공"; } else { result = "아이디 또는 비밀번호 불일치"; }
10. JSP 요청 위임 객체 생성 (jsp 경로 지정)
RequestDispatcher 변수명 = req.getRequestDispatcher("JSP 경로")
RequestDispatcher dispathcer = req.getRequestDispatcher("/WEB-INF/views/loginResult.jsp");
- RequestDispatcher import 해주기
- webapp 폴더 기준으로 쓰기
💻 RequestDispatcher
Servlet → JSP로 HttpServletRequest 객체,
HttpServletResponse 객체를 발송(위임)하는 역할의 객체
→ 정확히는 요청에 대한 응답화면을 만들어,
클라이언트에게 출력하는 역할을 위임하는 객체
11. JSP에게 전달될 예정인 req 객체에,
Object value(result 변수값) 담아서 같이 전달
req.setAttribute(String key, Object value)
req.setAttribute("r", result);
- value는 모든 객체 (타입 상관 없음)
- Attribute : 속성 == 데이터(값)
12. forword문 작성
dispathcer.forward(req, resp);
- req : 파라미터
- resp : 응답용 스트림
13. 이클립스 👉 VS CODE 이동,
WEB-INF 폴더 안에 views라는 폴더 생성, (여기에 jsp결과값 모아둘거임)
폴더 안에 .jsp파일 만들기.
14. VS CODE 👉 이클립스 이동,
VSCODE에서 만든 .jsp파일 열어서 제일 상단에 아래 구문 적기
이거 작성 안하면 저장오류 계속 뜹니다...... 꼭꼭 적어주기!!
자바코드를 삽입할 수 있는 스트립 틀릿(scriptlet)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
15. 구문 안에 결과페이지에 보이는(?) 출력할 코드 작성하기
- JSP주석을 이용해서 코드 작성하기
<%= request.getParameter("inputId") %>
<br>
<%= request.getParameter("inputPw") %>
<br>
<%= 2 * 5 + 10 %>
String res = (String)request.getAttribute("r");
<!-- res 변수에 저장된 값("r" = result)이 출력됨 -->
<h3 style='color:green;'> <%= res %></h3>
<!-- res 변수값 style 효과 -->
<button type='button' onclick='history.back()'> 돌아가기</button>
<!-- history.back() 이전페이지로 돌아가는 효과 -->
✔️ 스크립팅 원소(scripting element) == JSP 주석
JSP페이지에서 자바코드를 직접 기술할 수 있게 하는 기능
<%@ %> : 지시자
알려주거나 지시하는 속성을 기입
<% %> : 스크립틀릿(Scriptlet)
JSP에서 자바 코드를 작성할 수 있는 영역
<%= %> : 표현식(Expression)
자바코드의 값을 HTML 형식으로 출력 (자바의 값을 화면에 보이게 함)
charset=UTF-8
현재 문서를 해석할 때 UTF-8 인코딩을 이용해서 해석 (해석 방법 안내)
pageEncoding="UTF-8"
현재 문서가 UTF-8 인코딩으로 작성되어 있음. (문서가 작성된 형식 안내)
${EL}
(Expression Language, 표현 언어)로 변경
