[20221005] JSP

kangsun·2022년 10월 5일

jsp

JSP

목록 보기

2/16

JSP

서버 실행 방법

index.html Run 시키기

04_함수.jsp

CSS파일, js 파일 링크 걸고 폴더 안에 넣기

css reset파일 경로

I:\java202207\frontend\css
js jquery-3.6.1.min.js파일 경로

I:\java202207\setup
파일 복사해서 이클립스 css, js 폴더 안에 넣기

JSP 사용자 정의 함수

선언 영역
함수 작성 영역
페이지소스

✍️ 함수 분석

form

05_내부객체.jsp

[JSP페이지 실행과정]

톰캣WAS에 의해서 .java와 .class가 자동으로 생성된다.
.java 파일이 .class로 번역되어 실행된다.
예) hello.jsp → hello_jsp.java → hello_jsp.class

▶ 실제론 class파일이 실행됨.
▶ hello_jsp.java파일을 만들어야 할 때가 있다.
▶ 코드가 지저분해지고 복잡해질 때가 있다. (스파게티코드)

예) hello_jsp.java 소스 저장 경로

I:\java202207\workspace
			 \.metadata
			 \.plugins
			 \org.eclipse.wst.server.core
			 \tmp0
			 \work
			 \Catalina
			 \localhost
			 \basic04_web
			 \org
			 \apache
			 \jsp
			 \form

JSP 내부객체

톰캣서버에 의해 자동으로 생성된 객체
개발자는 별도의 객체를 선언하지 않고 가져다 사용만 한다. (우리는 그냥 쓰면 된다.)

↳ out.write은 객체를 만들지 않고 그냥 사용할 수 있는데 그 이유는 톰캣에서 미리 만들어 둔 객체이기 때문에 out. 만 사용할 수 있다.

반드시 알아야 할 JSP 내부객체의 종류

★ 1) out

출력객체
JspWriter out

★ 2) request

사용자가 요청한 정보를 관리하는 객체
HttpServletRequest request

★ 3) response

요청한 사용자에게 응답을 관리하는 객체
HttpServletResponse response

4) session

요청한 사용자를 개별적으로 구분하기 위한 객체
HttpSession session

5) application

모든 사용자가 공유하는 값 또는 서버에 대한 정보를 관리하는 객체
ServletContext application

6) pageContext

JSP, JSTL, EL등 현재 페이지내에서 서로 다른 문법과의 값을 교류할 수 있다
PageContext pageContext

06_form.jsp

사용자에게 값을 요청받는 form

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06_form.jsp</title>
</head>
<body>
	<h3> * 성적 입력 * </h3>
	<form name="sungjukfrm" id="sungjukfrm" method="get" action="06_ok.jsp">
		이름:<input type="text" name="uname" id="uname" size="10" maxlength="20" placeholder="이름" required> 
		<hr>
		국어:<input type="number" name="kor" id="kor" size="5" min="0" max="100">
		<hr>
		영어:<input type="number" name="eng" id="eng" size="5" min="0" max="100">
		<hr>
		수학:<input type="number" name="mat" id="mat" size="5" min="0" max="100">
	  	<hr>
	  	<input type="submit" value="전송">
	  	<input type="reset"  value="취소">
	</form>
	
</body>
</html>

폼이 생성된다.

name과 id는 같은 이름으로 작성해줘야 편하다.
id값으로 접근해야한다.
name은 나중에 ??어디로 접근할 떄 필요해서 작성해둬야함.

폼은 개별로 1개씩 전송되어야 하지, form 안에 form이 올 수 없다.

- form의 결과를 06_ok.jsp가 받는다.
- 06_ok.jsp은 결과페이지가 된다.

`<form>`과 관련된 다양한 속성들

사용자가 입력한 정보를 서버로 전송하기 위한 양식
하나의 from에 <input type="submit" value="전송"> 이 버튼을 누르면 <form> 전체가 전송된다.

name

폼 이름.
서버에서 식별하기 위한 이름 (보통 id로 접근하는 것을 추천. 하지만 서버에 도착해서는 name으로 접근해야한다.)

id

폼아이디.
Frontend단에서 식별자로 주로 사용

method

폼 전송방식.
get / post 방식 두가지가 있다.
가끔 생략할 때가 있는데 그때 기본은 get방식으로 사용한다.

1) method=get방식 (기본)
- 생략 시 기본값
- 사용자가 입력 요청한 정보가 URL 그대로 노출

2) method=post방식
- 사용자가 요청한 정보가 URL에 노출되지 않고 팩키지화 되어서 서버로 전송

action

사용자가 요청한 정보를 서버가 받아서 처리할 결과 페이지

enctype

폼에서 파일을 첨부해서 서버로 전송하고자 할 때 추가해야하는 속성.
"multipart/form-data" 추가

06_ok.jsp

request 내부객체

사용자가 요청한 모든 정보를 관리하는 객체

request.getParameter("") 메소드
사용자가 입력한 정보를 개별적으로 가져올 때
예) <input type="text" name="uname">
request.getParameter("uname")
사용자가 입력한 uname값 가져옴

out.print(request.getParameter("uname"));
out.print("<hr>");
out.print(request.getParameter("kor"));
out.print("<hr>");
out.print(request.getParameter("eng"));
out.print("<hr>");
out.print(request.getParameter("mat"));
out.print("<hr>");

06_form.jsp 실행하기

1) method="get"

생략 시 기본값
사용자가 입력 요청한 정보가 URL 그대로 노출
한글 안깨짐
ok.jsp?서버로전송되는값들 (공백주면안된다)

형식)
요청페이지(또는 명령어)?변수=값&변수=값&변수=값 ~~
- 예시) 06_ok.jsp?uname=대한민국&kor=40&eng=50&mat=60

- 예) 검색어

입력 후 전송
06_ok.jsp로 페이지가 이동한다.
URL 확인 ? 물음표 뒤에있는 값이 06_ok.jsp 파일에 전송되는 것이다.

- ok.jsp?서버로전송되는값들 (공백주면안된다)
- 형식)
요청페이지(또는 명령어)?변수=값&변수=값&변수=값 ~~
name 값이 노출된 것이다.

(get방식) 하지만 주민번호, 아이디, 비번같은 개인정보가 URL에 노출되면 안된다.
➡️ method=post방식을 사용해야 한다.

get 방식 예시

url에 노출시켜도 되는 검색어 같은 기능은 가능.

2) method="post"

사용자가 요청한 정보가 URL에 노출되지 않고 팩키지화 되어서 서버로 전송
한글 깨짐
예) 비번, 주민번호, 카드번호 등

한글은 깨져서 나오고 URL에는 정보가 노출되지 않는다.

post 방식은 한글 인코딩을 반드시 해줘야 한다.

request.setCharacterEncoding("UTF-8"); //조합형
request.setCharacterEncoding("EUC-KR"); //완성형

사용자가 입력 요청한 정보를 개별적으로 가져오기

<% 
//사용자가 입력 요청한 정보를 개별적으로 가져오기
	String uname=request.getParameter("uname");
	int kor=Integer.parseInt(request.getParameter("kor").trim());
	int eng=Integer.parseInt(request.getParameter("eng").trim());
	int mat=Integer.parseInt(request.getParameter("mat").trim());
	int aver=(kor+eng+mat)/3;
%>

성적 결과 테이블에 출력

method="post" 인코딩, 요청 정보 가져온 후 웹 브라우저 최종 결과

테이블로 결과가 나온다.

bootstrap으로 꾸미기

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

07_calc.jsp

계산기 연습

한글 인코딩

request.setCharacterEncoding("UTF-8");

10/5 이거 집에서 작성하고 bootstrap도 적용해보기!

08_다양한컨트롤요소.jsp

결과페이지 08_ok.jsp 파일 생성

method="post" 이기 때문에 한글 인코딩을 반드시 먼저 해준뒤, 요청값 형변환 시켜준다.

내용 칸에 엔터 기능 넣어주기

//<textarea>값은 엔터를 <br> 치환해서 출력
content=content.replace("\n", "<br>");
out.print(content + "<hr>");

name 동일한 값 request객체에서 가져오기

08_다양한컨트롤요소.jsp
08_ok.jsp

웹브라우저 결과

08_다양한컨트롤요소.jsp
08_ok.jsp

성별 선택

08_다양한컨트롤요소.jsp
08_ok.jsp

웹브라우저 결과

08_다양한컨트롤요소.jsp
08_ok.jsp

약관동의

08_다양한컨트롤요소.jsp

08_ok.jsp

웹브라우저 결과

08_다양한컨트롤요소.jsp

08_ok.jsp

체크하지 않으면?

null 값이 나온다.

체크하지 않았을 때 노출될 문구 코딩하기

08_다양한컨트롤요소.jsp

checkbox에 value값을 주지않았을 때

08_다양한컨트롤요소.jsp
08_ok.jsp
08_다양한컨트롤요소.jsp
08_ok.jsp

통신회사

08_다양한컨트롤요소.jsp

08_ok.jsp

08_다양한컨트롤요소.jsp
08_ok.jsp

폼컨트롤요소이지만 본문에 출력은 안되는 요소

08_다양한컨트롤요소.jsp

08_ok.jsp

08_다양한컨트롤요소.jsp

08_ok.jsp

첨부파일

파일을 첨부해서 서버에 전송하려면
<form enctype="multipart/form-data"> 속성을 추가해야 함.

08_다양한컨트롤요소.jsp

08_ok.jsp

08_다양한컨트롤요소.jsp

08_ok.jsp

↳ 단순히 전송하면 첨부파일이 전송된 것이 아니라 첨부파일의 string 값이 출력된 것이다.

첨부된 파일을 가져오려면 다른 방식으로 request객체에 접근해야 한다.
request.getParameter("attach")는 실제 파일을 가지고 있는 것이 아니라 단순 파일명이 출력됐을 뿐이다.

09_request내부객체.jsp

request 내부 객체의 다양한 메소드

09_request내부객체.jsp

09_ok.jsp

09_request내부객체.jsp

09_ok.jsp

요청한 사용자의 다양한 정보

getRemoteAddr() 사용자PC의 IP주소
getRemoteHost()
getRemotePort()

ip주소......
09_request내부객체.jsp

09_ok.jsp

09_request내부객체.jsp

09_ok.jsp

톰캣 IPv4 지정

ip주소 6자리 → 4자리 변경

Run -> Run Configurations -> Tomcat Server -> (x)=Arguments -> VM arguemnts에 아래와 같이 추가 -> 공백1칸 주고 -Djava.net.preferIPv4Stack=true
-> Apply

톰캣 IPv4 지정 후 이클립스 재시작.

09_request내부객체.jsp 다시 열어보기

↳ ip 주소가 바뀌어 있다.

getContextPath()

해당 프로젝트 이름이 노출된다.

09_ok.jsp
09_ok.jsp

getRequestURL()

getRequestURI()

getRequestURL() 사용자가 요청한 전체 경로의 페이지명 또는 명령어

getRequestURI() 사용자가 요청한 페이지명 또는 명령어

↳ 사용자가 어떤 페이지를 요청했는지 찾을 수 있다.

09_ok.jsp
09_ok.jsp

request.getRealPath() - 비추천

application.getRealPath() - 추천

내 컴퓨터 입장에서 /images 폴더의 실제 물리적 경로. 파일의 실제경로

09_ok.jsp

09_ok.jsp

↳ 똑같은 결과가 나오지만 밑에 있는 application.getRealPath()으로 사용하길 권장함.

내부변수

request.setAttribute("변수명", 값)
request.getAttribute("변수명")

09_ok.jsp

↳ getAttribute는 리턴값이 Object이기 때문에 Object변수에 넣어주어야 한다.
↳ Object는 단군.. 조상이므로
String str=(String)obj; 은 부모가 자식에 대입되는 형태가 되어 다형성이라는 것을 알 수 있다.

09_ok.jsp

오늘 꼭 외워야할 기능

request.getParameter("page")
request 요청한정보를 . get 가져와라
과제..
이거 공부해오기
10/6일 수업 진도..

kangsun

코딩 공부 💻

이전 포스트

[20221004] JSP 설치, 환경세팅, 기초

다음 포스트

[20221005] JSP

JSP

JSP

서버 실행 방법

04_함수.jsp

CSS파일, js 파일 링크 걸고 폴더 안에 넣기

css reset파일 경로

js jquery-3.6.1.min.js파일 경로

파일 복사해서 이클립스 css, js 폴더 안에 넣기

JSP 사용자 정의 함수

선언 영역

함수 작성 영역

페이지소스

✍️ 함수 분석

form

05_내부객체.jsp

[JSP페이지 실행과정]

JSP 내부객체

반드시 알아야 할 JSP 내부객체의 종류

★ 1) out

★ 2) request

★ 3) response

4) session

5) application

6) pageContext

06_form.jsp

<form>과 관련된 다양한 속성들

name

id

method

action

enctype

06_ok.jsp

request 내부객체

request.getParameter("") 메소드

06_form.jsp 실행하기

1) method="get"

get 방식 예시

2) method="post"

post 방식은 한글 인코딩을 반드시 해줘야 한다.

사용자가 입력 요청한 정보를 개별적으로 가져오기

성적 결과 테이블에 출력

method="post" 인코딩, 요청 정보 가져온 후 웹 브라우저 최종 결과

bootstrap으로 꾸미기

07_calc.jsp

계산기 연습

한글 인코딩

08_다양한컨트롤요소.jsp

내용 칸에 엔터 기능 넣어주기

name 동일한 값 request객체에서 가져오기

웹브라우저 결과

성별 선택

웹브라우저 결과

약관동의

웹브라우저 결과

체크하지 않으면?

체크하지 않았을 때 노출될 문구 코딩하기

checkbox에 value값을 주지않았을 때

통신회사

폼컨트롤요소이지만 본문에 출력은 안되는 요소

첨부파일

09_request내부객체.jsp

request 내부 객체의 다양한 메소드

요청한 사용자의 다양한 정보

톰캣 IPv4 지정

톰캣 IPv4 지정 후 이클립스 재시작.

getContextPath()

getRequestURL()

getRequestURI()

request.getRealPath() - 비추천

application.getRealPath() - 추천

내부변수

[20221004] JSP 설치, 환경세팅, 기초

[20221006] JSP와 DB 연동하기, 성적테이블 CRUD

0개의 댓글

`<form>`과 관련된 다양한 속성들