[Day 19 | JSP] JSP 폼 데이터 정리

y♡ding·2024년 11월 7일
0

데브코스 TIL

목록 보기
130/163

기본적인 JSP 폼 데이터 처리 과정

  1. HTML 폼 작성: 클라이언트 측에서 데이터를 입력할 수 있는 HTML 폼을 만듭니다.
  2. 폼 데이터 전송: 사용자가 폼을 제출하면 서버로 데이터가 전송됩니다.
  3. JSP에서 데이터 받기: JSP 페이지에서 request.getParameter()를 사용하여 데이터를 가져와 처리합니다.

예제: JSP에서 폼 데이터 처리

  1. HTML 폼 작성 (form.jsp)
    아래는 사용자가 이름과 나이를 입력하고 제출할 수 있는 HTML 폼입니다. 이 폼은 hello.jsp 페이지로 데이터를 전송합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼 데이터 전송</title>
</head>
<body>
    <h2>폼 데이터 전송</h2>
    <form action="hello.jsp" method="post">
        이름: <input type="text" name="username"><br>
        나이: <input type="number" name="age"><br>
        <input type="submit" value="제출">
    </form>
</body>
</html>

2. JSP 페이지에서 데이터 받기 (hello.jsp)

아래는 form.jsp에서 전송된 데이터를 받아 출력하는 hello.jsp 페이지입니다.

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>폼 데이터 처리 결과</title>
</head>
<body>
    <h2>폼 데이터 처리 결과</h2>

    <%
        // 폼 데이터 가져오기
        String username = request.getParameter("username"); // 이름 가져오기
        String age = request.getParameter("age");           // 나이 가져오기
        
        // 폼 데이터가 없는 경우 기본 값 설정
        if (username == null || username.isEmpty()) {
            username = "손님";
        }
        if (age == null || age.isEmpty()) {
            age = "알 수 없음";
        }
    %>

    <p>안녕하세요, <%= username %>님!</p>
    <p>나이: <%= age %>세</p>
</body>
</html>

폼 데이터 처리 시 유의 사항

  1. 빈 값 확인: 사용자가 입력하지 않거나 잘못된 데이터를 입력했을 때 기본값이나 오류 메시지를 출력하는 로직을 추가하는 것이 좋습니다.
  2. 데이터 타입 변환: getParameter() 메서드는 모든 데이터를 문자열로 반환합니다. 숫자와 같은 데이터를 처리할 때는 형변환이 필요합니다. 예를 들어, 나이를 int로 변환하려면 Integer.parseInt(request.getParameter("age"))를 사용할 수 있습니다.
int age = Integer.parseInt(request.getParameter("age"));
  1. POST와 GET 방식 차이: method="post"와 method="get"은 전송 방식이 다릅니다. POST 방식은 데이터가 HTTP 메시지의 본문에 포함되기 때문에 URL에 노출되지 않으며, 주로 로그인이나 개인정보 입력 시 사용됩니다. 반면 GET 방식은 데이터를 URL 쿼리 스트링으로 전송하기 때문에, URL에 노출되며 데이터 전송량이 제한적입니다.
  1. Apache-Tomcat 9 이전 버전 다국어처리 : Tomcat 9 이전 버전에서는 다국어 처리를 위해 서버와 애플리케이션의 문자 인코딩 설정을 수동으로 지정해야 했습니다. Tomcat 10 이후 버전에서는 기본 인코딩 설정이 UTF-8로 개선되어, 다국어 처리 시 인코딩 문제 발생 가능성이 줄어들었습니다. `
request.setCharacterEncoding("utf-8");

참조 사이트

예제코드

데이터 전송 form01.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%-- 사용자 입력 --%>
<form action="form01_ok.jsp" method="get">
    GET <br />
    데이터1 <input type="text" name="data1" />
    데이터2 <input type="text" name="data2" />
    <input type="submit" value="전송">
</form>

<hr />

<form action="form01_ok.jsp" method="post">
    POST <br />
    데이터1 <input type="text" name="data1" />
    데이터2 <input type="text" name="data2" />
    <input type="submit" value="전송">
</form>

<hr />
GET 방식 주소 <br />
<a href="./form01_ok.jsp?data1=값1&data2=값2">전송</a>

</body>
</html>

form01_ok.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%-- form01_ok.jsp--%>
<%
    // apache-tomcat 9 이전버전
    // 다국어 처리 request.setCharacterEncoding("utf-8");
    String data1 = request.getParameter("data1");
    String data2 = request.getParameter("data2");

    out.println(data1 + "<br />");
    out.println(data2 + "<br />");

%>
</body>
</html>

구구단 gugudan.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <form action="gugudan_ok.jsp" method="post">
        구구단 단수 입력 : <input type="text" name="dan" /> <!-- 사용자가 입력할 구구단의 단수 -->
        <input type="submit" value="전송"> <!-- 폼을 제출하는 버튼 -->
    </form>
</head>
<body>

</body>
</html>

gugudan_ok.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>구구단 결과</title>
</head>
<body>
<%
    String strDan = request.getParameter("dan"); // 폼으로부터 "dan" 값(단수)을 받아옴
    int iDan = Integer.parseInt(strDan); // 문자열을 정수로 변환하여 계산에 사용

    StringBuilder sbHtml = new StringBuilder(); // HTML 출력을 위한 StringBuilder 생성
    sbHtml.append("<table border='1' cellspacing='0'>"); // 테이블 시작 태그 추가
    sbHtml.append("<tr>"); // 첫 번째 행 시작

    for (int i = 1; i <= 9; i++) { // 1부터 9까지 반복하여 구구단 결과 생성
        sbHtml.append("<td>" + iDan + "  X " + i + " = " + (iDan * i) + "</td>"); // 곱셈 결과를 테이블 셀로 추가
    }

    sbHtml.append("</tr>"); // 행 종료
    sbHtml.append("</table>"); // 테이블 종료
%>
<%= sbHtml.toString() %> <!-- StringBuilder에 저장된 HTML을 출력 -->
</body>
</html>

구구단 시작-끝단

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>구구단 범위 설정</title>
    <script type="text/javascript">
        // 폼 입력값을 확인하는 함수
        const checkFrm = function() {
            if (document.frm.startDan.value == '') { // 시작단 입력 확인
                alert('시작단을 입력하세요'); // 시작단이 비어 있으면 경고 메시지
                return false;
            }
            if (document.frm.endDan.value == '') { // 끝단 입력 확인
                alert('끝단을 입력하세요'); // 끝단이 비어 있으면 경고 메시지
                return false;
            }
            document.frm.submit(); // 입력이 정상적이면 폼 제출
        }
    </script>
</head>
<body>
<%--  gugudan1.jsp  --%>
<form action="./gugudan1_ok.jsp" method="post" name="frm">
    시작단 : <input type="text" name="startDan" maxlength="2" placeholder="시작단 입력"> <!-- 시작단 입력 필드 -->
    ~ 끝단 : <input type="text" name="endDan" maxlength="2" placeholder="끝단 입력"> <!-- 끝단 입력 필드 -->
    <input type="button" value="구구단 출력" onclick="checkFrm()"> <!-- 버튼 클릭 시 checkFrm 함수 호출 -->
</form>
</body>
</html>

gugudan1_ok.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    // 클라이언트로부터 시작단과 끝단 값을 받아옴
    String startDan = request.getParameter("startDan");
    String endDan = request.getParameter("endDan");
    System.out.println(startDan + " : " + endDan); // 서버 콘솔에 시작단과 끝단 출력 (디버깅용)

    // 시작단과 끝단을 정수형으로 변환
    int iStartDan = Integer.parseInt(startDan);
    int iEndDan = Integer.parseInt(endDan);
%>
<html>
<head>
    <title>구구단 출력</title>
</head>
<body>
<%--  gugudan1_ok.jsp  --%>
<%
    StringBuilder sbHtml = new StringBuilder(); // HTML 출력을 위한 StringBuilder 생성

    sbHtml.append("<table border='1' cellspacing='0' width='800px'>"); // 구구단을 출력할 테이블 시작 태그
    for (int i = iStartDan; i <= iEndDan; i++) { // 시작단부터 끝단까지 반복
        sbHtml.append("<tr>"); // 각 단을 새로운 행으로 시작
        for (int j = 1; j <= 9; j++) { // 1부터 9까지 곱셈 반복
            sbHtml.append("<td>" + i + " * " + j + " = " + (i * j) + "</td>"); // 곱셈 결과를 테이블 셀에 추가
        }
        sbHtml.append("</tr>"); // 행 종료
    }
    sbHtml.append("</table>"); // 테이블 종료
%>
<%= sbHtml.toString() %> <!-- StringBuilder에 저장된 HTML을 출력 -->
</body>
</html>

체크 박스 예제

<%-- form02.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<form action="form02_ok.jsp" method="post">
    <%-- 단일 체크박스 --%>
    <input type="checkbox" name="cb1" value="사과">사과<br />
    <input type="checkbox" name="cb2" value="딸기">딸기<br />
    <input type="checkbox" name="cb3" value="오렌지">오렌지<br />
    <input type="checkbox" name="cb4" value="포도">포도<br />
    <hr />

    <%-- 다중 체크박스 --%>
    <input type="checkbox" name="cb" value="사과">사과<br />
    <input type="checkbox" name="cb" value="딸기">딸기<br />
    <input type="checkbox" name="cb" value="오렌지">오렌지<br />
    <input type="checkbox" name="cb" value="포도">포도<br />

    <input type="submit" value="전송">

</form>
</body>
</html>
<%-- form02_ok.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    // 단일 체크박스
    String cb1 = request.getParameter("cb1");
    String cb2 = request.getParameter("cb2");
    String cb3 = request.getParameter("cb3");
    String cb4 = request.getParameter("cb4");

    out.println("cb1 : " + cb1 + "<br />");
    out.println("cb2 : " + cb2 + "<br />");
    out.println("cb3 : " + cb3 + "<br />");
    out.println("cb4 : " + cb4 + "<br />");

    out.println("<hr />");

    // 다중 체크박스
    String[] cbArr = request.getParameterValues("cb");
    if(cbArr == null) {
        out.println("선택한 과일이 없습니다.");
    } else {
        for(String cb : cbArr) {
            out.println("cb : " + cb + "<br />");
    }
%>
</body>
</html>

라디오 버튼, 옵션 선택 예제

<%-- form03.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<form action="form03_ok.jsp" method="post">
    <%-- 단일 라디오 버튼 --%>
    <input type="radio" name="rb" value="사과">사과<br />
    <input type="radio" name="rb" value="딸기" checked>딸기<br /> 
    <input type="radio" name="rb" value="오렌지">오렌지<br />
    <input type="radio" name="rb" value="포도">포도<br />

    <hr />
   
    <%-- 선택 옵션 --%>
    <select name="sel">
        <option value="사과">사과</option>
        <option value="딸기">딸기</option>
        <option value="오렌지">오렌지</option>
        <option value="포도">포도</option>
    </select>

    <hr />

    <%-- 색상 선택 --%>
    <input type="color" name="color">

    <input type="submit" value="전송">
</form>
</body>
</html>
<%-- form03_ok.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    // 단일 라디오 버튼 확인
    String rb = request.getParameter("rb");
    out.println("라디어 버튼 : " + rb + "<br />");

    // 선택 옵션 확인
    String sel = request.getParameter("sel");
    out.println("옵션 : " + sel + "<br />");

    // 색상 선택 확인
    String color = request.getParameter("color");
    out.println("색상 : " + color + "<br />");
%>
</body>
</html>

달력


<%-- calendar1.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="calendar1_ok.jsp" method="post">
        년도 :
        <select name="year">
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
        </select>

        월 :
        <select name="month">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <input type="submit" value="달력 보기">
    </form>
</body>
</html>
  • calendar1_ok.jsp : 폼 입력을 받았을 때 달력을 출력할 수 있도록 만들어주세요
profile
y♡ding
이전 포스트

[Day 19 | JSP] JSP 내장 객체

다음 포스트

[Day 20 | JSP] JSP - 데이터 소스 설정(context.xml)

0개의 댓글

관련 채용 정보