23.03.27 / jsp 파일 경로 연결 (폼 데이터 서버로 보내기)

[ 언어 설정 ]

• jsp 파일이나 html 파일에서 폼 태그에 입력한 값을 서버에 post 방식으로 전송할 때 값이 한글일 경우 깨지지 않게 전송하기 위해서 사용한다.

request.setCharacterEncoding("euc-kr");
request.setCharacterEncoding("UTF-8");

 

• get 방식으로 한글을 전송할 때에는 톰캣에 UTF-8가 기본 적용 되어있기 때문에 자동으로 처리해준다.
• 기본 적용이 안 돼 있으면 설정해줘야 한다. (enc-kr 사용하는 경우)
• Servers - tomcat 폴더 - server.xml - source

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

위 코드를 찾아 URIEncoding="euc-kr" 추가해준다.

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="euc-kr" />

 

 

[ 사용자가 입력한 데이터 가져오기 - input 타입 submit 사용]

<input type="text" name="uid">
<input type="submit" value="회원가입버튼">
// 사용자가 uid라는 name 값을 입력하도록 했을 때

request.getParameter("uid");
// form 태그에서 서버로 값을 전달하는 버튼을 input type에서 submit으로 설정했을 때
// name으로 설정해준 uid를 입력해서 받을 수 있다. (사용자가 입력한 값 넣는 거 아님)

String uid = request.getParameter("uid");
// String 데이터 타입을 갖고 있는 uid를 받아오기 위해서 String 사용해서 uid라는 변수 선언
// 사용자가 입력한 값을 저장해준다.

 

[ post 방식  &  get 방식 ]

주는 방법을 다르지만 받는 방법은 동일하다.

[get 방식]

• URL에 폼 데이터를 추가하여 서버로 전달
• 브라우저에 의해 캐시되어(cached) 저장
• 보통 쿼리 문자열(query string)에 포함되어 전송되어 길이의 제한

[post 방식]

• 폼 데이터를 별도로 첨부하여 서버로 전달
• 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.
• 쿼리 문자열과는 별도로 전송되어 데이터의 길이에 대한 제한 없음
• get 방식보다 보안성이 높다.

 = > get 방식은 보안상 취약점이 존재하므로, 중요한 데이터는 post 방식을 사용하도록 한다.

// 주는 방법
<form action="<%= request.getContextPath() %>/EX2/action.jsp" method="post">
<a href="<%= request.getContextPath() %>/EX2/getAction.jsp">post 방식</a>

<form action="<%= request.getContextPath() %>/EX2/action.jsp" method="get">
<a href="<%= request.getContextPath() %>/EX2/getAction.jsp?uid=<%= uid %>&upw=<%= upw %>&ulevel=<%= ulevel %>&uname=<%= uname %>&umail=<%= umail %>">get 방식</a>
// ?변수1=값1&변수2=값2&변수3=값3&변수4=값4&변수5=값5

//입력한 값을 버튼을 누르는 동시에 다음 페이지의 텍스트 폼에 입력된 상태로 불러오는 방법
<a href="<%= request.getContextPath() %>/user/user_update_form.jsp?uid=<%= uid %>&upw=<%= upw %>&ulevel=<%= ulevel %>&uname=<%= uname %>&umail=<%= umail %>">수정확인</a>

// 받는 방법 동일
<%
String uid = request.getParameter("uid");

out.println("출력방법1:" + uid);
%>

출력방법2 : <%= uid %>

 

[ 폼 데이터 값 출력 ]

받는 코드를 넣어줄 때 <% %> 를 반드시 써 준다. (자바와 html의 태그 구분해줘야 함)

<%
request.setCharacterEncoding("euc-kr");

String uid = request.getParameter("uid");
String upw = request.getParameter("upw");
String ulevel = request.getParameter("ulevel");
String uname = request.getParameter("uname");
String umail = request.getParameter("umail");

%>

<td><%= uid %></td>
<td><%= upw %></td>
<td><%= ulevel %></td>
<td><%= uname %></td>
<td><%= umail %></td>

 

 

[ button과 input의 차이점? ]

• <input type="submit"> 과 <input type="button"> 은 폼 데이터를 전송하는 기능은 동일하다.
• 기본적으로 button 요소는 type 속성을 명시하지 않으면 defualt 값으로 submit 기능을 수행한다.

button 태그의 속성 값
type="submit" : 폼 데이터 전송. (값을 지정해주지 않았을 때 defualt 값)
type="reset" : 폼 안에 작성된 데이터 초기화 (모두 지우기)
type="button" : 주로 자바스크립트에서 사용 (click 이벤트와 연결해서 사용)

그렇다면 button을 사용하는 이유는 ? -> 디자인적인 관점에서 input 요소와 달리 매우 자유롭기 때문
input은 스스로 닫는 태그이기 때문에 다로 닫는 태그를 써주지 않는다.
때문에 버튼에 배경화면을 넣는 등의 스타일을 주고 싶으면 css를 이용해야한다.
반면, button은 스스로 닫지않는 태그이기 때문에 닫는 태그를 써줘야 한다.
때문에 여는 태그와 닫는 태그 사이에 이미지 등 다른 태그를 삽입할 수 있다.
(그럼 그냥 input 쓰고 css 연결해서 써도 되지 않나? - > 이미지의 경우 img 태그를 사용해야 검색엔진 최적화등에 도움이 된다.)

//셋이 같은 기능을 한다.

<input type = "submit" value = "회원 가입">

<button type = "submit">회원 가입</button>
<button>회원 가입</button>

 

[ 형변환 ]

• 문자열에서 숫자로 (String -> int)
  int typeChange = Integer.parseInt(변수);
• 숫자에서 문자열로 (int -> String)
  String typeChange = Integer.toString(변수);

 

[ 홈페이지 진짜 처럼 구성하기 완성 파일 - 상품 제외 ]

layoutLink.war

0.01MB

 

 

[ 두 수 입력 받아 합계 구해 출력하기 완성 파일 ]

plus.war

0.00MB

 

[ 두 수 입력 받아 합계 구해 출력하기 연습 파일 ]

plus_try.war

0.00MB