Microsoft PowerPoint - aj-lecture4.ppt [호환 모드]

Size: px

Start display at page:

Download "Microsoft PowerPoint - aj-lecture4.ppt [호환 모드]"

일화 이
5 years ago
Views:

JSP 와자바빈즈 524730-1 2019 년봄학기 4/1/2019 박경신 자바빈즈 자바로작성된소프트웨어컴포넌트 Sun Microsystems 에서 " 자바빈즈는빌더형식의개발도구에서가시적으로조작이가능하고또한재사용이가능한소프트웨어컴포넌트이다.

1 JSP 와자바빈즈 년봄학기 4/1/2019 박경신 자바빈즈 자바로작성된소프트웨어컴포넌트 Sun Microsystems 에서 " 자바빈즈는빌더형식의개발도구에서가시적으로조작이가능하고또한재사용이가능한소프트웨어컴포넌트이다. 로정의 대부분자바통합개발환경 (IDE) 에서사용 자바빈즈는많은유사성이있으나엔터프라이즈자바빈즈 (EJB) 와혼동하지말아야함 JSP 빈즈 JSP와의연동을위해만들어진자바컴포넌트 Bean 액션을통해 JSP에서손쉽게연동 데이터베이스연동이나뷰데이터교환에사용됨 엔터프라이즈자바빈즈 (EJB) J2EE(Java2 Enterprise Edition) 에서의컴포넌트모델 ( 서버측컴포넌트 ) 분산환경을고려함 J2EE 자체는스펙으로여러회사에서제품을구현함 기업형애플리케이션개발에서비즈니스로직및데이터처리를담당함 JSP 빈즈 자바클래스 멤버변수와 getter, setter 메서드로구성됨 특정기능을수행하는별도의메서드를가질수있음. JSP 모델 2에서는뷰컴포넌트로만활용이권장됨 ( 비즈니스로직 X)

2 JSP 빈즈 빈즈클래스작성규칙 자바클래스는 java.io.serializable 인터페이스를구현 기본생성자가있어야함 모든멤버변수는 private 접근지정자로설정 모든멤버변수에대한 getter/setter( ) 메소드가존재해야함 getter( ) 메소드는멤버변수에저장된값을가져올수있는메소드 setter( ) 메소드는멤버변수에값을저장할수있는메소드 JSP 빈즈 빈즈클래스구성예 class PersonBean implements java.io.serializable { // 멤버변수, HTML form 이름, DB 테이블의컬럼명과일치 private String name; private int age; public PersonBean() { // 기본생성자 public PersonBean(String name, int age) {.. // 생성자 // get, set 메서드, 멤버변수와일치 public String getname() { return name; public void setname(string name) { this.name = name; public int getage() { return age; public void setage(int age) { this.age = age; 빈즈클래스 멤버변수 클래스외부에서의접근을막기위해 private 로선언 멤버변수이름, HTML form 이름, DB테이블컬럼명과일치 getter 메서드 멤버변수의값을반환 멤버변수명의첫글자를대문자로해야함 (Bean 액션과연동 ). <jsp:getproperty name= person property= name /> 내부적으로 getname() 메서드를호출 setter 메서드 멤버변수의값을설정 멤버변수명의첫글자를대문자로해야함. <jsp:setproperty name= person property= name value= Park /> 내부적으로 setname(request.getparameter( name )) 과함께호출 usebean 액션 JSP 빈즈사용 usebean 액션태그 <jsp:usebean id= person scope= request class= dto.personbean /> usebean 액션자바코드변환시 PersonBean person = (PersonBean)request.getAttribute( person ); if(person == null) { person = new PersonBean(); request.setattribute( person, person);

3 usebean 액션 JSP 에서빈즈값설정 setproperty 액션형식 속성값으로빈즈클래스의 setxxx (Xxx 는속성이름 ) 메서드와대응할속성값. * 를지정하면모든 setxxx 에자동으로대응. <jsp:setproperty name= person property= name value= Park /> <jsp:setproperty name= person property= age value= 10 /> <jsp:setproperty name= person property= * /> setproperty 액션을스크립트릿으로대체 <% person.setname(request.getparameter( name )); person.setage(request.getparameter( age )); %> usebean 액션 JSP 에서빈즈값가져오기 getproperty 액션형식 속성값으로빈즈클래스의 setxxx (Xxx 는속성이름 ) 메서드와대응할속성값. * 를지정하면모든 setxxx 에자동으로대응. <% 이름 : <jsp:getproperty name= person property= name /> 나이 : <jsp:getproperty name= person property= age /> %> getproperty 액션을표현식으로대체 이름 : <%= person.getname( ) %> 나이 : <%= person.getage( ) %> HTML Form 처리 폼 (form) 사용자가웹브라우저를통해입력된모든데이터를한번에웹서버로전송하는양식 전송한데이터는웹서버가처리하고처리결과에따라다른웹페이지를보여줌 사용자와웹애플리케이션이상호작용하는중요한기술중하나임 사용자가어떤내용을원하는지, 사용자의요구사항이무엇인지파악할때가장많이사용하는웹애플리케이션의필수적인요소임 HTML Form 태그 폼 (form) 을구성하는태그종류 태그 설명 form 폼을정의하는태그로최상위태그 input 사용자가입력할수있는태그 select 항목을선택할수있는태그 textarea 여러줄을입력할수있는태그

4 HTML Form 태그 form 태그 사용자가다양한정보를입력하고서로전달할때사용하는태그 단독으로쓰이지않고사용자가다양한정보를입력하는양식을포함하는최상위태그 속성을이용하여폼데이터를전송할때어디로보낼지, 어떤방식으로보낼지설정 HTML Form 태그 form 태그의속성 form 태그의모든속성은필수가아니라선택적으로사용 <form action= /nameaction.jsp method= post > <input type= text name= name value= K > 속성 action 설명폼데이터를받아처리하는웹페이지의 URL 설정 <form attribute1= value1 [attribute2= value2 ]> // 다양한입력양식태그 <input>, <select>, <textarea> method name target enctype accept-charset 폼데이터가전송되는 HTTP 방식설정폼을식별하기위한이름설정폼처리결과의응답을실행할프레임설정폼을전송하는콘텐츠 MIME 유형설정폼전송에사용할문자인코딩설정 HTML Form 의 Input 태그 Form의 input 태그 사용자가텍스트입력이나선택등을다양하게할수있도록공간을만드는태그 종료태그없이단독으로사용할수있음 input 태그의기본속성 type은 text, button 등다양한입력 name은입력양식을식별하는이름설정 value는입력양식의초기값설정 <input type= text name= firstname value= K > HTML Form 의 Input 태그종류 Form의 input type 종류 <input type="button"> 버튼선택입력 <input type="checkbox"> 체크박스버튼선택입력 <input type="color"> <input type="date"> <input type="datetime-local"> <input type=" "> <input type="file"> 파일전송입력 <input type="hidden"> 보이지않게숨겨서값을전송 <input type="image"> <input type="month"> <input type="number">

5 HTML Form 의 Input 태그종류 Form 의 input type 종류 <input type="password"> 암호입력 <input type="radio"> 라디오버튼선택입력 <input type="range"> <input type="reset"> 폼에입력된값을모두초기화 <input type="search"> <input type="submit"> 폼에입력된값을모두서버에전송 <input type="tel"> <input type="text"> 한줄텍스트입력 <input type="time"> <input type="url"> <input type="week"> HTML Form 의 Select 태그 Form 의 select 태그 여러개의항목이나타나는목록상자에서항목을선택하는태그 시작태그와종료태그가있으며, 리스트박스에여러항목을추가삽입하기위해반드시 option 태그를포함해야함. <select name= itemselect > <option value= item1 > item1 </option> <option value= item2 > item2 </option> <option value= item3 > item3 </option> <option value= item4 > item4 </option> </select> HTML Form 의 Select 태그 select 태그의속성 name은입력양식을식별하는이름설정 size는한번에표시할항목의개수를설정 multiple은다중선택이가능하도록함. CTRL-key를눌러목록상자의항목을다중선택함 option 태그의속성 value는항목의값을설정 selected는해당항목을초기값으로선택 disabled는항목을비활성화 optgroup 태그의속성 Select 태그내에있는 option 태그들을그룹화하는데사용 HTML Form 의 Textarea 태그 Form의 textarea 태그 여러줄의텍스트를입력할수있는태그 기본값은 <textarea> 와 </textarea> 태그사이에설정 입력폼안에사용된태그와띄어쓰기가그대로출력됨 <textarea name= 이름 cols= 너비 rows= 높이 > // 생략 </textarea> 속성 속성값 설명 name 텍스트 텍스트영역의이름설정 cols 숫자 입력할텍스트영역의너비 ( 열크기 ) 설정 rows 숫자 입력할텍스트영역의높이 ( 행크기 ) 설정 wrap off 줄바꿈안함 soft 엔터키를누르지않아도끝에서자동으로행이바뀜 hard soft와비슷하며서버에전송할때캐리지리턴문자를전달

6 HTML Form & Input 태그 HTML Form & Input 태그 <form action= process.jsp name= member method= post > <p> 아이디 : <input type= text name= id > <input type= button value= 아이디중복검사 > <p> 비밀번호 : <input type= password name= passwd > <p> 이름 : <input type= text name= name > <p> 연락처 : <input type= text maxlength= 4 name= phone1 > - <input type= text maxlength= 4 name= phone2 > - <input type= text maxlength= 4 name= phone3 > <p> 성별 : <input type= radio name= gender value= MEN checked> 남성 <input type= radio name= gender value= WOMEN > 여성 <p> 취미 : 독서 <input type= checkbox name= hobby value= 독서 checked> 운동 <input type= checkbox name= hobby value= 운동 > 영화 <input type= checkbox name= hobby value= 영화 > <p><input type= submit value= 가입하기 > <input type= reset value= 다시쓰기 > <form action= process.jsp name= member method= post > // 중간생략.. <p> 이름 : <input type= text name= name > <p> 연락처 : <select name= phone1 > <option value= 010 >010</option> <option value= 011 >011</option> <option value= 016 >016</option> </select> - <input type= text maxlength= 4 name= phone2 > - <input type= text maxlength= 4 name= phone3 > <p> 성별 : <input type= radio name= gender value= MEN checked> 남성 <input type= radio name= gender value= WOMEN > 여성 // 중간생략.. <p><input type= submit value= 가입하기 > <input type= reset value= 다시쓰기 > HTML Form & Input 태그 <form action= process.jsp name= member method= post > // 중간생략.. <p> 성별 : <input type= radio name= gender value= MEN checked> 남성 <input type= radio name= gender value= WOMEN > 여성 <p> 취미 : 독서 <input type= checkbox name= hobby value= 독서 checked> 운동 <input type= checkbox name= hobby value= 운동 > 영화 <input type= checkbox name= hobby value= 영화 > <p><textarea name= comment cols= 30 rows= 3 placeholder= 가입인사를입력해주세요 ></textarea> <p><input type= submit value= 가입하기 > <input type= reset value= 다시쓰기 > 요청파라미터의값받기 request 내장객체는웹브라우저가서버로보낸요청에대한다양한정보를담고있어 getparameter() 메소드를이용하여요청파라미터의값을얻을수있음 String 변수 = request.getparameter( 요청파라미터이름 );

7 요청파라미터의전체값받기 요청파라미터를설정하지않아도모든값을전달받을수있음. 또한텍스트박스, 라디오버튼, 드롭다운박스와같은다양한유형에대해한번에폼데이터를전달받을수있음. 폼데이터의일괄처리메소드 메소드 getparameternames() hasmoreelements() nextelement() 설명 모든입력양식의요청파라미터이름을순서에상관없이 Enumeration 형태로전달받음 Enumeration 요소가있으면 true를반환하고그렇지않으면 false를반환 Enumeration 요소를반환 <% request.setcharacterencoding("utf-8"); <p> 아이디 : <%= request.getparameter("id") %> <p> 비밀번호 : <%= request.getparameter("passwd") %> <p> 이름 : <%= request.getparameter("name") %> <p> 연락처 : <%= request.getparameter("phone1") %> - <%= request.getparameter("phone2") %> - <%= request.getparameter("phone3") %> <p> 성별 : <%= request.getparameter("gender") %> <p> 취미 : <% request.setcharacterencoding("utf-8"); String[] hobby = request.getparametervalues("hobby"); if (hobby!= null) { for (int i = 0; i < hobby.length; i++) { out.println(" " + hobby[i]); %> <p> 가입인사 : <%= request.getparameter("comment") %> <table border="1"> <tr> <th> 요청파라미터이름 </th> <th> 요청파라미터값 </th> </tr> <% request.setcharacterencoding("utf-8"); Enumeration<String> paramnames = request.getparameternames(); while (paramnames.hasmoreelements()) { String paramname = (String) paramnames.nextelement(); out.print("<tr><td>" + paramname + " </td>\n"); String paramvalue = request.getparameter(paramname); out.println("<td> " + paramvalue + "</td></tr>\n"); %> </table>

PowerPoint Template

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