[22.12.27] 46일차 [프론트엔드] JSP

W·2022년 12월 27일
0

국비

목록 보기
67/119

JSP(Java Server Page) 동작원리

  1. 웹브라우저(사용자, 유저, 클라이언트)
    주소줄(URL) http://localhost:8080/webProject/jsp1/form1.html
    https://www.naver.com
    => 웹서버 요청
    => 웹서버 : 요청한 페이지(form1.html) 찾기
    => 페이지를 찾아서 http에 전달
    => http form1.html를 받아서 되돌아옴
    => 사용자 웹브라우저에 전달해서 요청한 화면 보임

  2. 웹브라우저(사용자, 유저, 클라이언트)
    주소줄(URL) http://localhost:8080/webProject/jsp1/pro1.jsp?id=kim
    => http : 사용자가 요청하면 서버에 가서 html을 받아서 전달해주는 통신규약(통신방식)
    => 웹서버 요청
    => 웹서버(아파치) : 요청한 페이지(pro1.jsp) 찾기
    => 페이지를 찾아서 jsp => html 변경(처리) 작업 필요
    => 웹 애플리케이션 서버 (WAS, 톰캣, 웹컨테이너, 컨테이너, 처리서버) 전달
    => 1) id=kim,.. 요청을 저장하는 저장공간 만듦
    =>  자바 내장객체(HttpServletRequest) -> 객체생성(request) -> 기억장소를 할당 -> 요청정보를 저장 -> 처리결과인 응답정보를 저장하는 저장공간 만듦
    =>  자바 내장객체(HttpServletResponse) -> 객체생성(response) -> 기억장소를 할당 -> 응답정보(pro1.jsp -> html로 변경)를 저장
    => 2) web.xml (설정정보, 처리담당자 지정) 무조건 참조
    => 3) 처리담당자(자바 내장객체 HttpServlet) : 개발자가 입력한 명령을 처리하는 담당자
    =>  처리결과인 응답정보를 response에 저장
    => 처리 결과를 웹서버에 전달
    => 웹서버는 http에 전달
    => http pro1.jsp -> html로 변경된 응답정보를 받아서 되돌아옴
    => 사용자웹브라우저에 전달해서 요청한 화면 보임

<% %> java, jsp 명령
<%= %> java, jsp 내용을 출력
<%@ %> jsp 페이지 설정
<%! %> 전역변수선언, 메서드 선언

내장객체 request, response, session, application, out, pageContext, ...
액션태그 include, forward
DB연결 -> 회원가입, 로그인, 게시판, ...
자바등장 -> 회원가입, 로그인, 게시판, ...

모델2(MVC)
스프링 프레임워크(MVC)

아이디 출력하기

  • form1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp1/form1.jsp</title>
</head>
<body>
<form action="pro1.jsp" method="get">
아이디 : <input type="text" name="id"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
  • pro1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp1/pro1.jsp</title>
</head>
<body>
<!-- http://localhost:8080/webProject/jsp1/pro1.jsp?id=kim
사용자가 입력한 요청정보를 서버에 전달하면 request 객체 생성 기억장소 할당
jsp 내장객체 request 요청정보 저장
request 요청정보 저장
request.멤버변수 request.메서드() 
// 태그 name이름 = 태그 value값 id=kim
request.getParameter("태그이름") 
: request 저장 공간에서 태그이름 id를 찾아서 value 값을 가져오는 메서드
-->
<h1>jsp1/pro1.jsp</h1>
아이디 : <%=request.getParameter("id")%>
</body>
</html>

메서드 변수에 담아서 출력하기

  • form2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp1.form2.jsp</title>
</head>
<body>
<h1>jsp1/form2.jsp</h1>
<form action="pro2.jsp" method="get">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="pass"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
  • pro2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp1/pro2.jsp</title>
</head>
<body>
<!-- String 변수에 메서드 담을 수 있다 -->
<%
String sid=request.getParameter("id");
String spass=request.getParameter("pass");
%>

<h1>jsp1/pro2.jsp</h1>
아이디 : <%=sid%><br>
비밀번호 : <%=spass %><br>
</body>
</html>

예제)

  • form3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp1/form3.jsp</title>
</head>
<body>
<h1>jsp1/form3.jsp</h1>
<form action="pro3.jsp" method="get">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="pass"><br>
이름 : <input type="text" name="name"><br>
나이 : <input type="text" name="age"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
  • pro3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp1/pro3.jsp</title>
</head>
<body>
<%
String id = request.getParameter("id");
String pass = request.getParameter("pass");
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
<h1>jsp1/pro3.jsp</h1>
아이디 : <%=id %> <br>
비밀번호 : <%=pass %> <br>
이름 : <%=name %> <br>
나이 : <%=age %>
</body>
</html>

  • get방식
    기본전송 방식, 주소줄에 보이면서 전달하는 방식(id=kim&pass=1111)

  • post방식
    form 태그에서만 선택해서 데이터 전달하는 방식
    주소줄에 안보이면서 http 안에 담아서 전달하는 방식
    보안상 좋은 방식 (pass를 포함하고 있으면 선택하는 방식)
    서버단에서 한글 설정이 안되어 있음
    => request 사용하기 전에 한글 설정 작업 필요
    request.setCharacterEncoding("utf-8");

  • 문자열(참조형) => 정수형(기본자료형) 숫자 변경
    int a = Integer.parseInt(문자열숫자);

0개의 댓글