티스토리 뷰
EX1 ) testForm.jsp 파일에 입력 받고 testPro.jsp 파일에서 출력하기
• form태그 & input태그의 name 속성에 속성값 주기.
• request객체의 getParameter() 메서드를 이용하여 데이터를 가져오고 저장하여 출력.
• 문자열 데이터를 Integer.parseInt() 메서드를 이용하여 숫자로 만들기.
<body> <h1>testForm1.jsp</h1> <fieldset> <form action="testPro1.jsp" method="get"> 좋아하는 숫자 : <input type="text" name="number"> 내 이름 : <input type="text" name="name"> <hr> <input type="submit" value="전송"> </form> </fieldset> </body>
→ 한 눈에 들어오게끔 fieldset태그로 form태그를 하나로 묶어주고, input태그로 입력받고자 하는 정보를 작성해줌.
→ 액션 태그에 "testPro1.jsp" 파일을 넣었으므로, 전송 버튼을 누르면 "testPro1.jsp" 파일로 이동함.
→ form태그와 input태그에는 반드시 name 속성을 주고 name값을 줘야함.
⇒ 그래야 해당 데이터가 파라미터로 전달되어 "testPro1.jsp" 파일에서 데이터를 불러올 수 있음.
→ method는 기본적으로 get방식으로 설정되어 있으므로, post방식이 아니라면 생략해도 됨.
✓ 실행 결과
— 입력 받을 페이지 완성!
이제 출력할 페이지를 만들어야 하므로 "testPro1.jsp" 파일을 새로 생성하고,
"testForm1.jsp" 에서 받은 입력값들을 "testPro1.jsp" 에서 어떻게 출력할지 적어보겠음.
<% request.getParameter("number"); %>
→ Java코드를 사용해야하므로 스크립틀릿을 사용함.
→ request객체의 getParameter() 메서드를 사용하여 input태그의 name값이 'number'인 데이터를 가져옴.
→ 이건 말그대로 '가져오기만 한 것', 화면에 출력하기 위해 먼저 변수를 만들어 해당 데이터를 저장시켜줌.
<% String number = request.getParameter("number"); %>
→ form태그로부터 전송된 데이터를 모두 파라미터로 전달되며, 파라미터 데이터는 항상 String 타입!
→ 이제 변수에 저장한 데이터를 표현식을 사용하여 화면에 출력해보겠음.
전달된 숫자 : <%=number %> <br>
✓ 실행 결과


— '좋아하는 숫자' 부분을 출력했으니 이제 '내 이름' 부분도 출력해보겠음.
<!-- 내 이름 출력하기 --> <% String name = request.getParameter("name"); %> 내 이름은 : <%=name %>
→ 스크립틀릿을 열어 input태그의 name값이 'name'인 데이터를 변수 name에 저장함.
→ 표현식을 사용하여 출력문 완성.
✓ 실행 결과
— 그럼 여기서 드는 의문점 하나.
파라미터로 전달받은 데이터가 무조건 String타입이라면, 내가 숫자데이터를 넘겨받아도 결국 문자열이 된다는 뜻임.
숫자데이터를 넘겨 받아 연산을 하고 싶을 땐 어떡해야 할까?
전달된 숫자 + 100 : <%=Integer.parseInt(number)+100 %> <br>
→ Integer 클래스의 static 함수인 ParseInt 함수를 사용하면 문자열을 숫자로 만들어줌.
→ 진짜 숫자로 변경되는지 알아보기 위해 뒤에 +100 연산을 함.
✓ 실행 결과

EX2 ) testForm2.jsp 입력 / testPro2.jsp 출력
• form태그의 onsubmint속성 사용하기
• post방식에서 한글 인코딩 오류 처리하기
• 입력받은 데이터가 조건에 맞는지 판별하기
<body> <h1>testForm2.jsp</h1> <fieldset> <form action="testPro2.jsp" name="fr" method="post" onsubmit="return check();"> 이름 : <input type="text" name="name" > <br> 나이 : <input type="text" name="age"> <br> <input type="submit" value="입력"> <br> </form> </fieldset> </body>
→ input type="number"는 HTML5에서만 지원하므로, 혹시 모르니 어디에서나 적용되는 text type으로 작성
→ form태그와 input태그에 name값을 부여하고, submit '입력' 버튼을 눌렀을 때 return check() 메서드가 실행되도록 함.
✓ 실행 결과
— 사용자로부터 이름과 나이 정보를 입력받아 testPro2.jsp에 정보를 전달하고,
사용자가 성인인지 미성년자인지 판별해보기.
<body> <h1>testPro2.jsp</h1> <!-- 파라미터로 전달받은 데이터를 변수에 저장 --> <% String name = request.getParameter("name"); String age = request.getParameter("age"); int age2 = Integer.parseInt(age); // parseInt도 사용해봄 %> <!--출력문 작성--> 이름 : <%=name %>, 나이 : <%=age%>,<%=age2 %> <br> </body>
✓ 실행 결과


⚠️ 한글 인코딩 오류 ⚠️
– form태그의 method가 'get방식'일때는 한글이름이 잘 전달됐는데, post방식으로 바꾸었더니 한글이 깨짐 (인코딩 오류)
→ get방식은 주소창에 그대로 나타나는데에 비해 post 방식은 body영역으로 들어가기 때문에 body에서 한글이 깨짐.
✓ 오류 해결
<% request.setCharacterEncoding("UTF-8"); %>
→ request객체의 setCharacterEncoding 메서드를 이용하여 인코딩 오류 해결!
→ Form페이지에서 Pro로 페이지로 넘어갈때, Pro페이지에서 제일 먼저 하는 일이 파라미터 데이터 저장하기이므로,
파라미터를 전달받기 전의 위치에 있어야 인코딩이 먼저 실행되어 한글이 안깨짐.
<body> <h1>testPro2.jsp</h1> <% request.setCharacterEncoding("UTF-8"); // 한글 인코딩 String name = request.getParameter("name"); // 변수에 넘어온 데이터 저장 String age = request.getParameter("age"); // 변수에 넘어온 데이터 저장 int age2 = Integer.parseInt(age); // parseInt도 사용해봄 %> <!--출력문 작성--> 이름 : <%=name %>, 나이 : <%=age%>,<%=age2 %> <br> </body>
→ 앞으로는 post방식으로 데이터를 보낼 때 마다 매번 한글 처리하는 코드를 써 줘야 함.
물론 귀찮으니까 필터를 가지고 나중에는 자동으로 설정되게끔 할 수 있으며 뒤에가서 배울 것!
✓ 실행 결과

— 이제 입력받은 나이가 성인인지 아닌지 판별해보겠음.
1 ) 자바코드 나누어 html코드에서 표현식사용하여 출력하기
2 ) 자바 코드 블럭에서 out.print로 출력하기
<% if(age2 >= 20){ out.print(name+"님은 성인 입니다.<br>"); %> <%=name %>님은 성인 입니다. <% }else{ out.print(name+"님은 미성년자 입니다!<br>"); } %>
→ if문을 사용하여 20살 이상일 경우는 성인, 그 아래로는 미성년자임을 알리는 문구를 출력함.
→ if문에서는 자바코드를 나누어 출력문을 표현식으로 사용함.
→ else문에서는 자바코드로 out.print문을 사용하여 출력함.
✓ 실행 결과


EX3 ) testForm3.jsp 입력 / testPro3.jsp 출력
• <textarea>태그에서 작성한 메시지에 줄바꿈 적용시키기.
• 넘어온 여러 데이터를 String [ ] 배열에다 한 번에 저장하여 출력하기.
<body> <h1>testForm3.jsp</h1> <fieldset> <form action="testPro3.jsp" name="fr" method="post"> 이름 : <input type="text" name="name"> <hr> 하고싶은말 : <textarea rows="3" cols="25" name="msg"></textarea> <hr> 성별 : <input type="radio" name="gender" value="남"> 남 <input type="radio" name="gender" value="여"> 여 <hr> 취미 : <input type="checkbox" name="hobby" value="요리"> 요리 <input type="checkbox" name="hobby" value="운동"> 운동 <input type="checkbox" name="hobby" value="게임"> 게임 <hr> 강의장 : <select name="room"> <option>강의장을 선택하세요. </option> <option value="1"> 1강 </option> <option value="2"> 2강 </option> <option value="3"> 3강 </option> </select> <hr> <input type="submit" value="제출"> </form> </fieldset> </body>
→ action 속성으로 '전송' 버튼을 누르면 'testPro3.jsp'로 이동하게끔 설정하고, post방식임.
→ '하고싶은말'에는 textarea태그를 사용하여, 여러줄로 글을 작성할 수 있게끔 함. rows와 cols로 크기 지정함.
참고로 textarea태그는 코드가 길어서 엔터를 치고 싶으면 속성 사이에서 쳐야 공백값이 출력안됨!
→ 성별 표시는 radio버튼으로 설정하고, name 속성을 같은 값으로 줘서 둘 중에 하나만 선택되게끔 함.
→ 취미는 checkbox로 설정하고, name 속성을 같은 값으로 주었지만 checkbox 특성상 다중 선택이 가능함.
→ select – option태그로 목록을 만들어 저장함.
select태그에 name값을 주고 필요하다면 multiple 속성이나 size값을 줄 수 있음.
option태그에는 value값을 입력함.
→ submit은 항상 form태그 안에 만들어져있어야 함.
✓ 실행 결과
— 넘어온 데이터를 저장하고 출력하기.
<% request.setCharacterEncoding("UTF-8"); // 한글 처리 // 파라미터로 전달받은 데이터 정보 저장 String name = request.getParameter("name"); String msg = request.getParameter("msg"); String gender = request.getParameter("gender"); String[] hobbys = request.getParameterValues("hobby"); %>
→ 파라미터로 전달받은 데이터 정보를 저장하기 '전에', post방식이므로 한글 처리해주는 코드 작성함.
→ 변수에 전달받은 데이터를 저장함.
→ form태그에 취미로 적었던 checkbox 데이터들은 다중 선택이 되어 값이 여러개이므로 배열에 저장함.
— 화면에 출력하기
이름 : <%=name %> <br> 하고싶은 말1 : <%=msg %> <br> <!-- 줄바꿈 적용X --> 하고싶은 말2 : <textarea rows="" cols=""><%=msg %></textarea> <br> <!-- 줄바꿈 적용O --> 성별 : <%=gender %> <br> <!--배열에 저장된 hobby 출력하기--> <% if(hobbys != null){ for(int i=0; i<hobbys.length; i++){ %> 취미<%=i+1 %> : <%=hobbys[i] %> <br> <!-- i=0부터 시작하니까 +1 --> <% } } %> <!-- 강의실 부분 출력해보기 --> <% String room = request.getParameter("room"); %> 강의장 : <%=room %>강
→ textarea태그의 데이터(입력한 문장들)는 내가 작성할때 엔터를 쳤음에도 불구하고 줄바꿈이 적용 안됨.
System.out.println()으로 출력하면 console창에 엔터키가 적용되지만, 화면에 출력하는 표현식으로는 적용 안됨.
여기서는 HTML코드다 보니 <br>이 줄바꿈 기능임. 뭐 다른 방법이 있긴 한데 그건 뒤에가서 배우고!
지금 '하고싶은말2' 처럼 코드를 작성해주면 줄바꿈이 적용되어 출력됨.
→ 배열에 저장된 'hobby'를 출력할 때는 스크립틀릿으로 Java영역과 표현식을 작성할 HTML영역으로 나눔.
→ if문으로 hobby != null일 때, 즉 취미를 뭐라도 선택하긴 했을 때! 표현식으로 작성한 코드가 출력되고,
아무것도 선택하지 않아서 값이 null일 때는 아무것도 출력되지 않음.
→ 다음 순서인 '강의실' 부분도 파라미터로 전달된 값을 변수에 저장하고, 표현식을 사용하여 출력함.
✓ 실행 결과


'JSP' 카테고리의 다른 글
액션 태그 (forward / include / 템플릿 페이지 작성) (0) | 2023.02.23 |
---|---|
내장 객체 (영역 객체(Scope) / 속성(Attribute)) (0) | 2023.02.23 |
내장 객체 (javax.servlet 패키지 / java.lang 패키지) (0) | 2023.02.22 |
JSP 기본 요소 (주석 / 지시어(Directive) / 스크립트 요소) (0) | 2023.02.21 |
JSP 입문 (웹 어플리케이션의 개요 / JSP와 Servlet) (0) | 2023.02.21 |
- Total
- Today
- Yesterday
- jsp
- DB
- Dao
- 원격저장소
- 문자형
- Java
- 단일행함수
- 데이터타입
- github
- Method
- gitbash
- JSTL
- javascript
- Object
- 매개변수
- null
- 숫자형
- 업캐스팅
- 오버라이딩
- 주석문
- model2
- 논리형
- Git
- 로컬저장소
- 제어문
- 출력문
- mysql
- 내장객체
- 다형성
- 인자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |