티스토리 뷰

 

 

 

 

 

 

 

 

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일 때는 아무것도 출력되지 않음.

→   다음 순서인 '강의실' 부분도 파라미터로 전달된 값을 변수에 저장하고,  표현식을 사용하여 출력함.

   실행 결과

더보기
각 항목마다 데이터를 입력하고 '제출'버튼 클릭함.
'하고싶은 말2'에서는 줄바꿈이 적용됨. / 내가 선택한만큼 취미가 출력됨.

 

 

 

 

 

 

 

 

 

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/07   »
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
글 보관함