백엔드/JSP
JSP
코딩 화이팅
2023. 3. 8. 14:44
- Servlet 표준을 기반으로 작성된 웹 어플리케이션 개발 언어
- HTML 내에 Java를 작성하여 동적으로 웹페이지를 생성하여 브라우저에게 돌려주는 페이지
- 실행 시 Servlet으로 변환된 후 실행
JSP 출력
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<%
String name = "강현";
%>
<%-- <% %>를 사용하여 자바 코드 사용 가능 --%>
<h2>Hello JSP</h2>
<h4>안녕하세요. <%=name %>입니다.</h4>
<%-- <%= %>으로 입력된 변수를 사용 가능 --%>
</body>
</html>
스크립트릿
스크립팅 언어(java)로 작성된 코드 조각을 포함하는데 사용
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트릿</title>
</head>
<body>
<h2>스크립트릿 연습</h2>
<%
int A = 10;
int B = 20;
int sum = A + B;
out.print(A+"+"+B+"="+sum);
%>
</body>
</html>
선언부
멤버변수 선언이나 메서드를 선언하는 영역
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
String name = "SSAFY";
//두정수를 더하는 메서드
public int add(int A, int B){
return A+B;
}
//절대값을 반환하는 메서드
public int abs(int A){
return A > 0 ? A : -A;
}
int a = 10;
int b = -20;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선언</title>
</head>
<body>
<%out.print(add(a, b));%> <br>
<%out.print(abs(a));%> <br>
<%out.print(abs(b));%> <br>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
int cnt1 = 0;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
int cnt2 = 0;
out.print("cnt1 : ");
out.print(++cnt1);
out.print("<br>");
out.print("cnt2 : ");
out.print(++cnt2);
out.print("<br>");
%>
</body>
</html>
쉽게 생각하면 <%! %>으로 선언하면 전역변수가 되고 body안에 <% %>를 사용하면 지역 변수가 되어 f5를 누를 때마다 cnt2는 변하지 않지만 cnt1은 계속해서 올라가는 것을 볼 수가 있다.
표현식
변수의 값이나 계산식 혹은 함수를 호출한 결과를 문자열 형태로 웹문서에 출력
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
String name = "강현";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
out.print(name);
%>
<br>
<!-- 표현식(계산식, 변수, 메서드가 올 수 있다.) -->
<!-- 뒤에 ;없어야 된다. -->
<%=name %>
</body>
</html>
같은 것을 출력하는 것을 볼 수 있다.
주석문
- 작성한 코드에 대한 설명을 기술할 경우 사용
- HTML 주석문과 동일한 기능을 하지만 HTML 주석문은 클라이언트에게 보여지고, JSP 주석문은 보여지지 않는다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment</title>
</head>
<body>
<!-- 이것은 HTML 주석입니다. -->
<%-- 이것은 JSP 주석입니다. --%>
<%
//스크립트릿에서 사용한 주석입니다.
%>
<h2>주석</h2>
</body>
</html>
f12를 보면 html주석은 보여지고 jsp주석은 보여지지 않는 것을 볼 수 있다.
지시자
- 웹컨테이너가 JSP 번역하고 실행하는 방법을 서술
- page : 해당 JSP 전반적으로 환경을 설정할 내용 지정
- include : 현재 페이지에 다른 파일의 내용 삽입할 때 사용
- taglib : 태그 라이브러리에서 태그를 사용할 수 있는 기능 제공
Page
- JSP 페이지 실행 매개변수를 제어
- 출력처리, 오류처리 등의 내용을 포함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page errorPage="error.jsp" %>
<!-- 에러가 나면 여기로 가라 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>강제로 0으로 나누어</title>
</head>
<body>
0으로 나누는것은 불가넝~~
<%= 2/0 %>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page errorPage="error.jsp" %>
<!-- 에러가 나면 여기로 가라 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>강제로 0으로 나누어</title>
</head>
<body>
0으로 나누는것은 불가넝~~
<%= 2/1 %>
<!-- 0이었던 걸 1로 바꾼다면? -->
</body>
</html>
Include
- JSP 내에 다른 HTML 문서나 JSP 페이지의 내용을 삽입할 때 사용한다.
- 반복적으로 사용되는 부분(header, footer 등) 별도로 작성하여 페이지 내에 삽입하면 반복되는 코드의 재작성을 줄일 수 있다.
include안에 파일을 가기 위해 파일 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<header>head 수정 혹은 메뉴가 들어갈 내용입니다.</header>
===================================================================
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인클루드 써보자</title>
</head>
<body>
<%@ include file="/template/header.jsp"%>
<h3>메인내용입니다.</h3>
<p>가나다라마사바사</p>
</body>
</html>
페이지 이동
요청을 받아서 화면을 변경하는 방법
포워드 방식
- 요청이 들어오면 요청을 받는 JSP 또는 Servlet이 직접 응답을 작성하지 않고, 요청을 서버내부에서 전달하여 해당 요청을 처리하게 하는 방식
- request, response 객체가 전달되어 사용되기 때문에 객체가 사라지지 않는다. 브라우저에는 최초 요청한 주소가 표시된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인</title>
</head>
<body>
<a href="regist.jsp">등록하기</a>
<a href="main?action=list">목록으로</a>
</body>
</html>
등록하기를 누른다면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>등록</title>
</head>
<body>
<!-- 여기서 /는 컨테이너 루트를 의미함 그래서 생략 -->
<form action="main" method="POST">
<input type="hidden" name="action" value="regist">
<label>이름 : </label>
<input type="text" placeholder="이름을 입력하세요" name="name"><br>
<label>나이 : </label>
<input type="number" min="0" placeholder="나이를 입력하세요" name="age"><br>
<input type="radio" id="man" name="gender" value="man">
<label for="man">남자</label>
<input type="radio" id="woman" name="gender" value="woman">
<label for="woman">여자</label>
<fieldset>
<legend>취미</legend>
<input type="checkbox" id="sleep" name="hobby" value="sleep">
<label for="sleep">수면</label>
<input type="checkbox" id="eat" name="hobby" value="eat">
<label for="eat">먹기</label>
<input type="checkbox" id="study" name="hobby" value="study">
<label for="study">공부</label>
<input type="checkbox" id="jump" name="hobby" value="jump">
<label for="jump">점프</label>
</fieldset>
<input type="submit">
</form>
</body>
</html>아래와 같은 창이 뜨고 아래와 같은 정보를 입력 후 제출을 누르면
package com.ssafy.manager;
import java.util.ArrayList;
import java.util.List;
import com.ssafy.dto.Person;
//사람의 목록 관리를 하는 매니저
//싱글턴으로 만들고 싶어요!!
public class PersonManager {
//사람 목록
private List<Person> list = new ArrayList<>();
private static PersonManager manager = new PersonManager();
//기본생성자막기
private PersonManager() {
}
//외부에서 그래도 만들어진 매니저를 가져다 써야되니까~~~
public static PersonManager getInstance() {
return manager;
}
//사람을 등록하는 기능
public void regist(Person p) {
list.add(p);
}
//사람의 목록을 반환하는 기능
public List<Person> getAll(){
return list;
}
//... 다양하게 분류를 지어 가져오도록 만들어 볼수도있음...
}
====================================================================
package com.ssafy.servlet;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ssafy.dto.Person;
import com.ssafy.manager.PersonManager;
//Front Controller 패턴을 이용해서
@WebServlet("/main")
public class MainServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=UTF-8");
doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
doGet(request, response);
}
private void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("action");
switch (action) {
case "regist":
doRegist(request, response);
break;
case "list":
doList(request, response);
break;
default:
break;
}
}
private void doList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PersonManager pm = PersonManager.getInstance();
request.setAttribute("list", pm.getAll());
request.getRequestDispatcher("/WEB-INF/list.jsp").forward(request, response);
}
private void doRegist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
String gender = request.getParameter("gender");
String[] hobbies = request.getParameterValues("hobby");
Person p = new Person(name, age, gender , hobbies);
PersonManager pm = PersonManager.getInstance();
pm.regist(p);
request.setAttribute("person", p);
request.setAttribute("size", pm.getAll().size());
//response를 이용해서 여기다가 쭉 썼다면~~
RequestDispatcher disp=request.getRequestDispatcher("/result.jsp");
disp.forward(request, response);
// response.sendRedirect(request.getContextPath()+"/result.jsp");
}
}
===========================================================================
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.ssafy.dto.Person" %>
<%@ page import="java.util.Arrays" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
Person p = (Person)request.getAttribute("person");
%>
<h2>결과창</h2>
등록된 총인원 : <%=request.getAttribute("size") %> <br>
<table>
<tr>
<td>이름</td>
<td><%=p.getName() %></td>
</tr>
<tr>
<td>나이</td>
<td><%=p.getAge() %></td>
</tr>
<tr>
<td>성별</td>
<td><%=p.getGender() %></td>
</tr>
<tr>
<td>취미</td>
<td><%=Arrays.toString(p.getHobbies()) %></td>
</tr>
</table>
<a href="/BackEnd03_JSP">홈으로</a>
</body>
</html>아래와 같이 입력한 횟수에 따라 총인원이 바뀌고 입력한 정보들이 출력된다.
만약 이렇게 입력 후 목록으로를 들어간다면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="com.ssafy.dto.Person"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>목록</h2>
<%
ArrayList<Person> list = (ArrayList<Person>) request.getAttribute("list");
for (int i = 0; i < list.size(); i++) {
out.print(list.get(i).getName());
%>
<br>
<%
}
%>
</body>
</html>
리다이렉트 방식
- 요청이 들어오면 내부 로직 실행 후, 브라우저의 URL을 변경하도록 하여 새로운 요청을 생성함으로써 페이지를 이동한다.
- 브라우저가 새로운 요청을 만들어 내기 때문에 최초 요청 주소와 다른 요청주소가 화면에 보여진다.