[쉽게 배우는 JSP 웹 프로그래밍] 6장 정리

자바를 이용한 웹 폼 처리에 대한 코드 예제를 제공하며, 폼의 개념, 폼 태그 구성 요소의 사용법, 폼 데이터 처리 방법에 대해 설명한다. 코드 예제는 회원 가입 폼을 생성하고, 사용자로부터 입력받은 데이터를 처리하는 과정을 보여준다. 이를 통해 웹 브라우저가 서버로 보낸 요청에 대한 정보를 처리하는 방법을 이해할 수 있다.
Feb 22, 2024
[쉽게 배우는 JSP 웹 프로그래밍] 6장 정리

form01.jsp

<%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>Form Processing</title> </head> <body> <h3>회원 가입</h3> <form action="form01_process02.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> 연락처 : <select name="phone1"> <option value="010">010</option> <option value="011">011</option> <option value="016">016</option> <option value="017">017</option> <option value="019">019</option> </select>-<input type="text" maxlength="4" size="4" name="phone2">-<input type="text" maxlength="4" size="4" name="phone3"> <p> 성별 : <input type="radio" name="sex" value="남성" checked>남성 <input type="radio" name="sex" value="여성">여성 <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="다시 쓰기"> </form> </body> </html>

form01_process.jsp

<%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>Form Processing</title> </head> <body> <% request.setCharacterEncoding("utf-8"); String id = request.getParameter("id"); String passwd = request.getParameter("passwd"); String name = request.getParameter("name"); String phone1 = request.getParameter("phone1"); String phone2 = request.getParameter("phone2"); String phone3 = request.getParameter("phone3"); String sex = request.getParameter("sex"); String[] hobby = request.getParameterValues("hobby"); String comment = request.getParameter("comment"); %> <p> 아이디 : <%=id %> <p> 비밀번호 : <%=passwd %> <p> 이름 : <%=name %> <p> 연락처 : <%=phone1 %>-<%=phone2 %>-<%=phone3 %> <p> 성별 : <%=sex %> <p> 취미 : <% if(hobby !=null){ for(String str : hobby){ out.println(" "+str); } } %> <p> 가입 인사 : <%=comment %> </body> </html>

form02_process.jsp

<%@ page contentType="text/html; charset=utf-8"%> <%@ page import="java.io.*,java.util.*" %> <html> <head> <title>Form Processing</title> </head> <body> <table border="1"> <tr> <th>요청 파라미터 이름</th> <th>요청 파라미터 값</th> </tr> <% request.setCharacterEncoding("utf-8"); Enumeration paraNames = request.getParameterNames(); while(paraNames.hasMoreElements()){ String name = (String) paraNames.nextElement(); out.print("<tr><td>"+name+" </td>\n"); String paramValue = request.getParameter(name); out.println("<td> "+paramValue+"</td></tr>\n"); } %> </table> </body> </html>
 

핵심 키워드

  • 폼은 사용자가 웹브라우저를 통해 입렫괸 모든 데이터를 한 번에 웹 서버로 전송하는 양식이다. 전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여준다.
  • form 태그는 사용자가 다양한 정보를 입력하고 서로 전달할 때 사용하는 태그다. 단독으로 쓰이지 않고 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그다. form 태그의 모든 속성은 필수가 아니라 선택적으로 사용한다.
    • input 태그는 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그다.
      • input 태그는 종료 태그 없이 단독으로 사용할 수 있다.
    • select 태그는 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그다.
      • select 태그에는 시작 태그와 종료 태그가 있으며, 리스트 박스에 여러 항목을 추가 삽입하기 위해 반드시 option 태그를 포함해야 한다.
    • textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 태그다.
      • 기본적으로 textarea 태그의 너비와 높이를 지정하기 위해 cols와 rows 속성을 설정한다.
      • 기본 값은 <textarea> </textarea> 태그 사이에 설정하면 된다.
      • textarea 태그의 가장 큰 특징은 입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력된다는 것이다.
    • request 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 getParameter() 메소드를 이용하여 요청 파라미터의 값을 얻을 수 있다.
      • getParameterNames(), hasMoreElements(), nextElement() 메소드를 이용해서 요청 파라미터의 전체 값을 전달받을 수 있다.
 

결론

해당 코드를 작성하면서 폼의 개념과 특징, 폼 태그 구성 요소의 사용법, 폼 데이터를 처리하는 방법을 이해할 수 있었다.
Share article

More articles

See more posts
RSSPowered by inblog