Data Provisioning Services for mobile clients

Size: px

Start display at page:

Download "Data Provisioning Services for mobile clients"

은정 감
5 years ago
Views:

1 7 장. Form 처리와파일업로드 제 7 장

2 HTML <form> 태그 1. 폼 (Form) 태그소개 사용자에게정보를요청하고적당한대답을얻어낼수있는텍스트박스나체크박스등을제공한다. 사용자로부터의정보를서버에게전달할수있는 submit( 전달 ) 버튼을제공한다. submit 버튼은새페이지 (JSP 에의해생성되는동적페이지 ) 를열기위해사용된다. 2/33 제 1 장

3 <form> 태그형식 1. 폼 (Form) 태그소개 <form action="target JSP Page" method="get post" enctype=" "> <input [type=text(default) password checkbox radio hidden submit reset] name="name" [value="value"] [size="n"] [maxlength="n"]> <select name="name" [size="n"] [multiple]> <option [selected]>value </select> <textarea name="name" [rows="n"] [cols="n"]>... </textare> </form> 는그양쪽의것들중하나만을선택하라는의미, [ ] 는선택사항 action: submit 버튼을누를때서버쪽에서실행가능한프로그램의 URL method: get 또는 post enctype: method가 post일때만적용 사용자입력데이터에대한인코딩 (encoding) 방법 3/33 기본인코딩 : application/x-www-form-urlencoded 제7장

get 전달방식 1. 폼 (Form) 태그소개 사용자의입력값들은 URL 뒷부분의물음표 (?) 다음에다음과같이쿼리스트링 (Querystring) 으로서저장되어넘겨진다. http://www.abc.com/abc.jsp?

4 get 전달방식 1. 폼 (Form) 태그소개 사용자의입력값들은 URL 뒷부분의물음표 (?) 다음에다음과같이쿼리스트링 (Querystring) 으로서저장되어넘겨진다. 보통입력값들이많지않은경우나공개적으로 URL 에붙는파라미터로넘겨도무방한경우에사용된다. get 전달방식의다른방법 form 없이직접브라우저에주소작성후실행 4/33 제 7 장

5 post 전달방식 1. 폼 (Form) 태그소개 HTTP 요청헤더뒤에입력스트림을통해서정보를전달하는방식 입력스트림은운영체제상에서일종의표준입력 (Standard Input, stdin) 과같은방식으로 JSP 또는 Servlet 내에전달 전달데이터의양에제한이없다. 브라우저에서전달되는데이터들의모습을사용자가전혀볼수가없다 로그인정보, 즉비밀번호전달에사용됨 post 방식때사용하는 enctype 속성 Enctype 은폼의내용이코드화되는방법을나타내는속성이다. post 방식으로전달되는데이터를클라이언트와서버간에상호정의되어있는방식으로인코딩한다음서버로전달 기본값 : application/x-www-form-urlencoded 여러파일을업로드할때 : multipart/form-data (7.3 절 ) 5/33 제 7 장

6 1. 폼 (Form) 태그소개 get 과 post 방식정리 get 방식 ( 기본방식 ) post 방식 - 데이터는 URL 뒤에쿼리스트링으로 특징 장점 추가되어전달 - 입력값들이많지않은경우나공개 적으로 URL 에붙여넘겨도무방한경 우에사용 - 간단한데이터를빠르게처리할수 있다. - URL과별도로전송 - HTTP 헤더뒤에입력스트림데이터로전달 - GET방식보다많은데이터를전송할수있다. ( 데이터양에제한이없다.) - 최소한의보안유지에효과가있다. - 데이터양에제한이있다. - 같은데이터양이면 get 방식보다처단점 (URL 전체데이터사이즈는 2048바이리속도가느리다. 트로제한된다.) 6/33 제7장

7 1. 폼 (Form) 태그소개 <input> 태그의 Type 속성종류 Type 간단한이름설명모습 text password checkbox 글입력상자 암호입력상자 체크박스 일반적인텍스트입력, 즉사용자의 ID 및주소, 주민등록번호등을입력받을때이용된다. 입력된문자가암호형식즉, 애스테리스크 (*) 로표시되게하기위한것으로서사용자의비밀번호등을입력받는데사용된다. On/Off 형식의선택으로네모난상자에 표시를하여항목선택을할수있다. radio 라디오단추 2 개이상의항목들중하나만을택하기위해사용된다. submit 전송버튼 입력된내용을 Action 이지정하는 JSP 파일에전달하기위한것으로버튼모양으로되어있다. reset 취소버튼 입력된내용을초기화시키기위한것으로역시버튼모양으로되어있다. 브라우저에는아무모양이나오지않지만, Action 이지정하 hidden 숨김 는 JSP 파일에전달할값이있을경우 Value 를이용하여값을 모양없음 지정해줄수있다. 7/33 제 7 장

8 1. 폼 (Form) 태그소개 <select> 와 <textarea> 태그 태그종류 HTML 코드 모습 <select name="select"> <option selected>item1</option> <option>item2</option> <option>item3</option> <Select> 태그 </select> <select name="select2" size="3"> <option selected>item1</option> <option>item2</option> <option>item3</option> </select> <Textarea> 태그 <textarea name="textfield"></textarea> 8/33 제7장

$2. 폼 (Form) 을사용한사용자정보처리 <input> 의 text 와 password 및 <textarea> 로부터정보가져오기 [ 예제 7.1-1] jspbook\ch07\textform.$

9 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 text 와 password 및 <textarea> 로부터정보가져오기 [ 예제 7.1-1] jspbook\ch07\textform.html <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>textform</title> </head> <body> 가입할 ID 와 Password 및자기소개를입력하세요. <form action="textform.jsp" method="post" name="textform"> //submit 버튼을누르면 textform.jsp으로내용전달 ID : <input type="text" name="id"><br/> Password : <input type="password" name="pw"><br/> 자기소개 <br/> <textarea name="desc" cols="50" rows="4"></textarea><br> <center> <input type="submit" value=" 전송 " name="submitbtn"> <input type="reset" value=" 초기화 " name="resetbtn"> </center> </form> </body> </html> 9/33 제 7 장

$2. 폼 (Form) 을사용한사용자정보처리 <input> 의 text 와 password 및 <textarea> 로부터정보가져오기 [ 예제 7.1-2] jspbook\ch07\textform.$

10 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 text 와 password 및 <textarea> 로부터정보가져오기 [ 예제 7.1-2] jspbook\ch07\textform.jsp <%@ page contenttype="text/html; charset=utf-8" %> <% request.setcharacterencoding("utf-8"); // 한글처리를위한구문 %> <html> <head><title>textform 처리 </title></head> <body> 당신이입력한정보입니다.<br/> <b>id</b> : <%= request.getparameter("id") %><br/> // ID 정보가져오기 <b>password</b> : <%= request.getparameter("pw")%><br/> // password 정보가져오기 <b> 자기소개 </b><br/> <%= request.getparameter("desc") %> <br/> // 자기소개가져오기 </body> </html> 10/33 제 7 장

11 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 text 와 password 및 <textarea> 로부터정보가져오기 textform.jsp 에서가장중요한 jsp 코드 <%= request.getparameter("id") %> <%= request.getparameter("pw") %> <%= request.getparameter("desc") %> request 객체는웹브라우저에서웹서버로요청을전달하는것과관련된모든정보 ( 파라미터 ) 를담고있는 Jsp/Servlet 기본객체 request 객체의가장기본적인메소드 public java.lang.string getparameter( java.lang.string name) name 파라미터값 : HTML 문서의각각의 <input> 태그에서사용한 name 속성 11/33 제 7 장

12 2. 폼 (Form) 을사용한사용자정보처리 [note] get 방식과 post 방식의한글처리 get 방식으로전달되는파라미터한글처리를위한설정 server.xml 파일내용중일부를다음과같이수정 <Connector port="8080" protocol="http/1.1" connectiontimeout="20000" redirectport="8443" URIEncoding="utf-8"/> post 방식으로전달되는파라미터한글처리방법 request 객체의 setcharacterencoding("utf-8") 을호출한뒤한글입력내용을가져옴. 12/33 제 7 장

13 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.2-1] jspbook\ch07\rcform.html <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>rcform</title> </head> <body> <form action="rcform.jsp" method="post" name="textform"> 08 <table border=1> // 화면을일정하게배열하기위해 <table> 태그를사용 <tr> <td> 관심분야 </td> <td> <input type="checkbox" name="cp" value=" 엔터테인먼트 "> 엔터테인먼트 <br/> <input type="checkbox" name="cp" value=" 컴퓨터 / 인터넷 " checked> 컴퓨터 / 인터넷 <br/> <input type="checkbox" name="cp" value=" 경제 / 비지니스 "> 경제 / 비지니스 <br/> <input type="checkbox" name="cp" value=" 스포츠 / 건강 "> 스포츠 / 건강 <br/> <input type="checkbox" name="cp" value=" 여행 / 관광 "> 여행 / 관광 <br/> </td> </tr> 13/33 제7장

$2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.2-1] jspbook\ch07\rcform.$

14 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.2-1] jspbook\ch07\rcform.html <tr> <td> 결혼여부 </td> <td> <input type="radio" name="m_status" value=" 미혼 " checked> 미혼 <input type="radio" name="m_status" value=" 기혼 "> 기혼 </td> </tr> </table> <p> <input type="submit" value=" 전송 " name="submitbtn"> <input type="reset" value=" 초기화 " name="resetbtn"> </form> </body> </html> 14/33 제 7 장

$2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.2-2] jspbook\ch07\rcform.$

15 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.2-2] jspbook\ch07\rcform.jsp <%@ page contenttype="text/html;charset=utf-8" %> <% request.setcharacterencoding("utf-8"); // 한글처리구문 %> <html> <head><title>reform_jsp</title></head> <body> 당신의관심분야와결혼여부는다음과같습니다.<br/> <% String[] interest = request.getparametervalues("cp"); // 복수개의 cp 값받아오기 for (int i = 0; i < interest.length-1; i++) { %> <b><%=interest[i]%></b>, // 마지막바로이전까지 "," 와함께출력 <%}%> <b><%=interest[interest.length-1]%></b> 과 // 마지막항목출력 <b><%=request.getparameter("m_status")%></b> // 결혼여부출력 </body> </html> 15/33 제 7 장

$2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.3-1] jspbook\ch07\checkboxform.$

16 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.3-1] jspbook\ch07\checkboxform.html 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 04 <title>checkboxform</title> 05 </head> 06 <body> 07 <form name="myform" action="checkboxform.jsp" method="get"> 08 <br/> 09 <input type="checkbox" name="option1" value="milk">milk<br/> 10 <input type="checkbox" name="option2" value="butter" checked>butter<br/> 11 <input type="checkbox" name="option3" value="cheese" checked>cheese<br/> 12 <br/> 13 <input type="submit" value=" 전송 " name="submitbtn"> 14 <input type="reset" value=" 초기화 " name="resetbtn"> 15 </form> 16 </body> 17 </html> 16/33 제7장

$2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.3-2] jspbook\ch07\checkboxform.$

17 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 [ 예제 7.3-2] jspbook\ch07\checkboxform.jsp <%@ page contenttype="text/html;charset=utf-8" %> <%@ page import="java.util.enumeration" %> // java.util.enumeration 클래스사용하기위한 import <% request.setcharacterencoding("utf-8"); // get방식으로전달될때엔꼭적을필요없음 %> <html><head><title>checkboxform_jsp</title></head> <body> 당신이체크한것은아래와같습니다. <br/><br/> <% Enumeration enums = request.getparameternames(); // 모든 name 속성이름을 Enumeration 객체로얻어오기 while (enums.hasmoreelements()) { String name = (String)enums.nextElement(); if (name.startswith("option")) { String value = request.getparameter(name); // option으로시작하는 name 속성의실제값얻어오기 out.println(value + "<br/>"); } } %> </body> </html> 17/33 제 7 장

18 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 getparameternames() 의동작모습 18/33 제 7 장

19 2. 폼 (Form) 을사용한사용자정보처리 <input> 의 checkbox 및 radio 로부터정보가져오기 Enumeration 객체 enum 에대한메소드호출시의동작모습 19/33 제 7 장

20 2. 폼 (Form) 을사용한사용자정보처리 <select> 로부터정보가져오기 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 04 <title>selectform</title> 05 </head> 06 <body> 07 <form action="selectform.jsp" method="get" name="textform"> 08 <table border=1> 09 <tr><td> 학력 </td> 10 <td> 11 <select name="edu"> 12 <option selected> 재학생 </option> 13 <option> 학사 </option> 14 <option> 석사 </option> 15 <option> 박사 </option> 16 </select> 17 </td> 18 </tr> 19 <tr><td> 소속국가 </td> [ 예제 7.4-1] jspbook\ch07\selectform.html 20/33 제 7 장

2. 폼 (Form) 을사용한사용자정보처리 <select> 로부터정보가져오기 20 <td> 21 <select name="na" size="3"> 22 <option selected>korea</option> 23 <option>usa</option> 24 <option>japan</option> 25 </select></td> 26 </tr> 27

21 2. 폼 (Form) 을사용한사용자정보처리 <select> 로부터정보가져오기 20 <td> 21 <select name="na" size="3"> 22 <option selected>korea</option> 23 <option>usa</option> 24 <option>japan</option> 25 </select></td> 26 </tr> 27 <tr><td> 관심분야 </td> 28 <td> 29 <select name="like" size="4" multiple> 30 <option> 광고 / 미디어 </option> 31 <option selected> 프로듀서 </option> 32 <option selected> 컨설팅 </option> 33 <option> 그래픽디자이너 </option> 34 </select> 35 </td> 36 </tr> 37 </table> 38 <input type="submit" value=" 전송 " name="submitbtn"> 39 <input type="reset" value=" 초기화 " name="resetbtn"> 40 </form> 41 21/33 제 7 장 42 </body> </html> [ 예제 7.4-1] jspbook\ch07\selectform.html

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 2. 폼 (Form) 을사용한사용자정보처리 <select> 로부터정보가져오기 <%@page contenttype="text/html;charset=utf-8" %> <% request.

22 폼 (Form) 을사용한사용자정보처리 <select> 로부터정보가져오기 contenttype="text/html;charset=utf-8" %> <% request.setcharacterencoding("utf-8"); String edu = request.getparameter("edu"); String na = request.getparameter("na"); String[] like = request.getparametervalues("like"); %> <html> <body> 당신의학력, 소속국가및관심분야는다음과같습니다.<br/> <b><%=edu %></b> 과 <b><%=na %></b><br/> <b><% if (like!= null) { for (int i=0;i<like.length;i++) { out.println(like[i]); } } %></b> [ 예제 7.4-2] jspbook\ch07\selectform.jsp // 사용자입력정보를 JSP 변수인 edu, na 에할당 // 관심분야리스트에서선택된여러개의값을 like 배열에할당 19 </body> 22/33 제7장 20 </html>

23 3. 파일업로드와 MultipartRequest post 방식의 multipart/form-data 인코딩 post 방식의인코딩종류 application/x-www-form-urlencoded ( 기본방식 ) <form action="..." method="post">... </form> multipart/form-data <form action="..." method="post" enctype="multipart/form-data">... </form> 23/33 제 7 장

24 3. 파일업로드와 MultipartRequest post 방식의 multipart/form-data 인코딩 [ 예제 7.5-1] jspbook\ch07\encoding.html <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title> 인코딩방식의차이점 </title> </head> // enctype의디폴트값은 "application/x-www-form-urlencoded" <body> <h2> 인코딩방식 : application/x-www-form-urlencoded</h2> <form action="upload.jsp" method="post"> // 파일업로드를위한 <input> 태그 Name: <input type="text" name="name"> <br> Age: <input type="text" name="age"> <br> File: <input type="file" name="file"> <br> <input type="submit" value="submit"> </form> <hr/> 24/33 제 7 장

17 18 19 20 21 22 23 24 25 3. 파일업로드와 MultipartRequest post 방식의 multipart/form-data 인코딩 <h2> 인코딩방식 : multipart/form-data</h2> <form action="upload.

25 파일업로드와 MultipartRequest post 방식의 multipart/form-data 인코딩 <h2> 인코딩방식 : multipart/form-data</h2> <form action="upload.jsp" method="post" enctype="multipart/form-data"> // enctype 속성을 "multipart/formdata" 로지정 Name: <input type="text" name="name"> <br> Age: <input type="text" name="age"> <br> File: <input type="file" name="file"> <br> <input type="submit" value="submit"> </form> </body> </html> [ 예제 7.5-1] jspbook\ch07\encoding.html // 파일업로드를위한 <input> 태그 25/33 제 7 장

3. 파일업로드와 MultipartRequest 01 02 03 04 05 06 07 08 09 10 11 post 방식의 multipart/form-data 인코딩 <%@ page contenttype="text/html;charset=utf-8" %> <%@ page import = "java.io.*" %> <% out.

26 3. 파일업로드와 MultipartRequest post 방식의 multipart/form-data 인코딩 page contenttype="text/html;charset=utf-8" %> page import = "java.io.*" %> <% out.print("<h2>" + request.getcontenttype() + "</h2>"); InputStream ins = request.getinputstream(); int data = -1; while ( (data = ins.read())!= -1 ) { out.print((char)data); } %> [ 예제 7.5-2] jspbook\ch07\upload.jsp 26/33 제 7 장

27 3. 파일업로드와 MultipartRequest post 방식의 multipart/form-data 인코딩 multipart/form-data 인코딩방식의입력스트림데이터 27/33 제 7 장

28 파일업로드구현 사용할라이브러리 3. 파일업로드와 MultipartRequest oreilly 회사에서개발한 cos 라이브러리 다운로드할라이브러리주소 라이브러리설치하기 다운받아야할파일 cos-26dec2008.zip 압축푼이후이용해야할파일 cos.jar cos.jar 를저장해두어야하는위치 Tomcat 어플리케이션기본폴더밑의 lib 폴더에복사 jspbook 어플리케이션뿐만아니라 Tomcat 어플리케이션밑의모든웹어플리케이션에서이라이브러리를활용가능 28/33 제 7 장

29 3. 파일업로드와 MultipartRequest 파일업로드구현 [ 예제 7.6-1] jspbook\ch07\fileup.html <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>file-upload</title> </head> <body> <form action="up.jsp" enctype="multipart/form-data" method="post"> 이름 : <input type="text" name="username"> <BR> 파일 : <input type="file" name="upfile"> <input type="submit" value="upload"> </form> </body> </html> 29/33 제 7 장

30 파일업로드구현 3. 파일업로드와 MultipartRequest 파일업로드를위하여이미지 bird.jpg 를선택하는화면 30/33 제 7 장

31 3. 파일업로드와 MultipartRequest 파일업로드구현 page contenttype="text/html;charset=utf-8" %> page import="com.oreilly.servlet.multipartrequest, com.oreilly.servlet.multipart.defaultfilerenamepolicy, java.io.file" %> page import="thinkonweb.util.*" %> <html> <body> <% String savepath=application.getrealpath("/ch07"); // 업로드파일을저장할폴더지정 int sizelimit = 5 * 1024 * 1024 ; // 5메가까지제한넘어서면예외발생 MultipartRequest multi = new MultipartRequest(request, savepath, sizelimit, "utf-8", new DefaultFileRenamePolicy()); // 파일업로드는이시점에이루어짐 File file = multi.getfile("upfile"); // 파일의이름얻어옴 [ 예제 7.6-2] jspbook\ch07\up.jsp 31/33 제 7 장

3. 파일업로드와 MultipartRequest 16 17 18 19 20 21 22 23 24 25 26 27 28 파일업로드구현 String filename=file.getname(); long filesize=file.length(); if(filename == null) { // 파일이업로드되지않았을때 out.

32 3. 파일업로드와 MultipartRequest 파일업로드구현 String filename=file.getname(); long filesize=file.length(); if(filename == null) { // 파일이업로드되지않았을때 out.print(" 파일업로드되지않았음 ( 이유 : 파일사이즈초과등 )"); } else { out.print("user Name : " + multi.getparameter("username") + "<br>"); out.print("file Name : " + filename + "<br>"); out.print("file Size : " + filesize + "<br>"); } %> </body> </html> [ 예제 7.6-2] jspbook\ch07\up.jsp 32/33 제 7 장

파일업로드구현 3. 파일업로드와 MultipartRequest MultipartRequest 객체에호출할수있는메소드에대한설명 http://www.servlets.

33 파일업로드구현 3. 파일업로드와 MultipartRequest MultipartRequest 객체에호출할수있는메소드에대한설명 File 객체에호출할수있는메소드에대한설명 업로드된파일화일 업로드되어진 bird.jpg 파일이 ch07 폴더에저장된모습 33/33 제7장

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것