Hyogi's Notebook

JSP 예제로 공부하기 ①

by 효기’s

주의 사항

JSP 파일은 webapp 하위폴더에 생성해야 정상적으로 실행이 가능하다.

 

Sevlet을 사용하여 시간을 출력하기

hello.jsp

<!-- jsp 페이지 속성을 지정합니다. -->
<!-- 페이지의 콘텐츠 유형이 텍스트 형식이며 문자 인코딩은 EUC-KR로 설정 -->
<%@ page language="java" contentType="text/html; charset=EUC-KR" 
    pageEncoding="EUC-KR"%>
    <!-- jsp 페이지가 java 언어로 작성되어 있음을 나타냅니다. -->
    <%@page import="java.util.Calendar" %>
    
<!DOCTYPE html>
<html>
<head>
<%
Calendar c = Calendar.getInstance(); // 클래스 인스턴스 생성
int hour = c.get(Calendar.HOUR_OF_DAY); // 현재 시간에서 시간을 가져옴
int minute = c.get(Calendar.MINUTE); // 분을 가져옴
int second = c.get(Calendar.SECOND); // 초를 가져옴
%>

<!-- html 문서 내에 제목과 함께 출력할 내용 -->
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Servlet Test</title>
</head>
<body>
	<h1>현재 시간은 <%=hour %>시 <%=minute %>분 <%=second %>초 입니다.</h1>
</body>
</html>

SevletTest.java

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Calendar;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class SevletTest
 */
@WebServlet("/Batman")
public class SevletTest extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public SevletTest() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response) 웹 통신을 GET방식으로 처리
	 */
	@Override
	// 웹 통신을 Get방식으로 처리
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("euc-kr"); // 힌글
		Calendar c = Calendar.getInstance();
		int hour = c.get(Calendar.HOUR_OF_DAY);
		int minute = c.get(Calendar.MINUTE);
		int second = c.get(Calendar.SECOND);

		PrintWriter out = response.getWriter();
		out.write("<HTML><HEAD><TITLE>ServletTest</TITLE></HEAD>");
		out.write("<BODY><H1>");
		out.write("현재 시각은 ");
		out.write(Integer.toString(hour));
		out.write("시 ");
		out.write(Integer.toString(minute));
		out.write("분 ");
		out.write(Integer.toString(second));
		out.write("초입니다.");
		out.write("</H1></BODY></HTML>");
		out.close();

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response) 웹 통신을 POST방식으로 처리
	 */
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	}

}

계산기 출력하기

Calc.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
  <h3>덧셈 계산기</h3>
  <HR>
  <!-- Calc으로 지정된 action 속성값 지정하고 POST 방식으로 데이터를 전송 -->
  <form name=form1 action=./Calc method=post>
	  <input type="text" NAME="num1" width=200 size="5">
	  <select NAME="operator">
	    <option selected>+</option>
	    <option>-</option>
	    <option>*</option>
	    <option>/</option>
	    <option>%</option>
	  </select>
	  <input type="text" NAME="num2" width=200 size="5">
	  <input type="submit" value="계산" name="B1">
	  <input type="reset" value="다시입력" name="B2">

  </form>
</body>
</html>

※ Calc.java, CalcServlet.java 두개의 클래스를 src/main/java 하위폴더인 calc 패키지 안에 넣어야한다. 

 

Calc.java

package calc;

public class Calc {
	private int num1;
	private int num2;
	private String operator;

	public Calc(int num1, int num2, String operator) {
		this.num1 = num1;
		this.num2 = num2;
		this.operator = operator;
	}

	public int getResult() {
		if (operator.equals("+")) {
			return num1 + num2;
		} else if (operator.equals("-")) {
			return num1 - num2;
		} else if (operator.equals("*")) {
			return num1 * num2;
		} else if (operator.equals("/")) {
			return num1 / num2;
		}

		return 0; // 연산자가 잘못된 경우 0을 반환
	}
}

CalcServlet.java

package calc;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class SevletTest
 */
//@WebServlet("/Batman")
public class CalcServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public CalcServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response) 웹 통신을 GET방식으로 처리
	 */
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response) 웹 통신을 POST방식으로 처리
	 */
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 변수선언
		int num1, num2;
		int result;
		String op;

		// 클라이언트 응답시 전달될 컨텐츠에 대한 mime type과 캐릭터셋 지정
		response.setContentType("text/html; charset=euc-kr");

		// 클라이언트 응당을 위한 출력 스트림 확보
		PrintWriter out = response.getWriter();

		// HTML form 을 통해 전달된 num1, num2 패러미터 값을 변수에 할당
		// 이때 getParameter() 메서드는 문자열을 리턴하므로 숫자형 데이터의 경우 integer.parseInt()을 통해 int로 변환함
		num1 = Integer.parseInt(request.getParameter("num1"));
		num2 = Integer.parseInt(request.getParameter("num2"));
		op = request.getParameter("operator");

		// calc() 메서드 호출로 결과 받아옴
		// result = calc(num1, num2, op);
		Calc calc = new Calc(num1, num2, op);
		result = calc.getResult();

		// 출력 스트림을 통해 화면 구성
		out.println("<HTML>");
		out.println("<HEAD><TITLE>계산기</TITLE></HEAD>");
		out.println("<BODY><center>");
		out.println("<H2>계산결과</H2>");
		out.println("<HR>");
		out.println(num1 + " " + op + " " + num2 + " = " + result);
		out.println("</BODY></HTML>");
	}

	// 실제 계산 기능을 수행하는 메서드
	public int calc(int num1, int num2, String op) {
		int result = 0;

		if (op.equals("+")) {
			result = num1 + num2;
		} else if (op.equals("-")) {
			result = num1 - num2;
		} else if (op.equals("*")) {
			result = num1 * num2;
		} else if (op.equals("/")) {
			result = num1 / num2;
		}

		return result; // 연산자가 잘못된 경우 0을 반환하도록 설정

	}

}

Calc.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
  <h3>덧셈 계산기</h3>
  <HR>
  <!-- Calc으로 지정된 action 속성값 지정하고 POST 방식으로 데이터를 전송 -->
  <form name=form1 action=./calc method=POST>
	  <input type="text" NAME="num1" width=200 size="5">
	  <select NAME="operator">
	    <option selected>+</option>
	    <option>-</option>
	    <option>*</option>
	    <option>/</option>
	    <option>%</option>
	  </select>
	  <input type="text" NAME="num2" width=200 size="5">
	  <input type="submit" value="계산" name="B1">
	  <input type="reset" value="다시입력" name="B2">

  </form>
</body>
</html>

 

회원가입 페이지 정보 가져오기

members.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 페이지</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
      border-color: #baebff;
    }
  </style>
</head>
<body>
  <script src="script.js"></script>
  <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
  
  <form action=./Signup method=post onsubmit="return isThatRight();">
    <table width="650" height="500" border="1" align="center" name="table">
      <tr>
        <td align="center" bgcolor="#baebff" colspan="2">회원 기본 정보</b></td>
      </tr>
      <tr>
        <td align="center"><b>아이디:</b> </td>
        <td><input type="text" NAME="id" id="id" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
      </tr>
      <tr>
        <td align="center"><b>비밀번호: </b></td>
        <td><input type="password" NAME="pw" id="pw" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
      </tr>
      <tr>
        <td align="center"><b>비밀번호 확인: </b></td>
        <td><input type="password" NAME="pwCheck" id="pwCheck"></td>
      </tr>
      <tr>
        <td align="center"><b>메일주소: </b></td>
        <td><input type="email" NAME="email" id="email"> 예) id@domain.com</td>
      </tr>
      <tr>
        <td align="center"><b>이름: </b></td>
        <td><input type="text" NAME="name" id="name"></td>
      </tr>
      <tr>
        <td align="center"><b>주소: </b></td>
        <td>
          <input type="text" NAME="zip-code" id="zip-code" placeholder="우편번호" readonly>
          <input type="button" onclick="execDaumPostcode()" value="주소찾기"><br>
          <input type="text" NAME="address-1" id="address-1" placeholder="도로명주소" size="30" readonly>
          <input type="text" NAME="address-1-1" id="address-1-1" placeholder="지번주소" size="30" readonly><br>
          <input type="text" NAME="address-2" id="address-2" placeholder="상세주소" size="30">
        </td>
      </tr>

      <tr>
        <td align="center" bgcolor="#baebff" colspan="2">개인 신상 정보</td>
      </tr>
      <tr>
        <td align="center"><b>주민등록번호: </b></td>
        <td><input type="text" NAME="RRN" id="RRN"> 예) 1234561234567</td>
      </tr>
      <tr>
        <td align="center"><b>생일: </b></td>
        <td>
          <input type="text" size="4" NAME="year" id="year">년
          <select type="month" NAME="month" id="month">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>
          월
          <select id="day" NAME="day">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
          </select>
          일
        </td>
      </tr>
      <tr>
        <td align="center"><b>관심분야: </b></td>
        <td>
          <input type="checkbox"  name="관심분야" value="컴퓨터">컴퓨터
          <input type="checkbox" name="관심분야" value="인터넷">인터넷
          <input type="checkbox" name="관심분야" value="여행">여행
          <input type="checkbox" name="관심분야" value="영화감상">영화감상
          <input type="checkbox" name="관심분야" value="음악감상">음악감상
        </td>
      </tr>
      <tr>
        <td align="center" height="300"><b>자기소개: </b></td>
        <td><textarea id="intro" NAME="intro" name="intro" rows="10" cols="50"></textarea></td>
      </tr>
    </table>
    <br>
    <div align="center">
      <input type="submit" value="회원가입">
      <input type="reset" value="다시입력" align="center">
    </div>
  </form>
</body>
</html>

script.js

//  유효성 검사를 함수로 정의

function isValidId(id) {
  // 아이디의 길이가 4에서 12 사이인지 확인
  if (id.length < 4 || id.length > 12) { // 아이디 길이가 4 이하거나 12 이상일때 false
    return false;
  }

  // 모든 문자가 알파벳 대소문자 또는 숫자인지 확인
  for (let i = 0; i < id.length; i++) {
    let char = id[i]; // 인덱스 i에 해당하는 문자를 char에 할당하고
    if (!(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char >= '0' && char <= '9')) {
      // 대소문자, 숫자가 아니면 false를 합니다.
      return false;
    }
  }

  // 위의 조건들을 모두 만족하면 유효한 아이디로 판단
  return true;
}

function isValidPw(pw) {
  // 같은 방식으로 아이디의 길이가 4에서 12 사이인지 확인
  if (pw.length < 4 || pw.length > 12) {
    return false;
  }

  // 모든 문자가 알파벳 대소문자 또는 숫자인지 확인
  for (let i = 0; i < pw.length; i++) {
    let char = pw[i];
    if (!(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char >= '0' && char <= '9')) {
      return false;
    }
  }

  // 위의 조건들을 모두 만족하면 유효한 아이디로 판단
  return true;
}

function isValidName(name) {
  // 이름의 길이가 2에서 4 사이인지 확인
  if (name.length < 2 || name.length > 4) {
    return false;
  }

  // 모든 문자가 한글인지 확인
  for (let i = 0; i < name.length; i++) {
    let charCode = name.charCodeAt(i); // name에 있는 문자의 유니코드 값을 charCode 변수에 넣습니다.
    if (!(charCode >= 0xAC00 && charCode <= 0xD7A3)) { // '가'와 '힣'의 유니코드 범위를통해 문자가 한글인지 확인합니다.
      return false;
    }
  }

  // 위의 조건들을 모두 만족하면 유효한 이름으로 판단
  return true;
}

function isValidEmail(email) {
  // '@' 기호를 기준으로 분리해서 parts 변수에 넣습니다.
  let parts = email.split('@');

  // '@'가 하나만 있는지, 그리고 아이디와 도메인 부분이 존재하는지 확인
  // parts[0]부분이 아이디부분이고 parts[1]부분이 도메인 부분입니다.
  if (parts.length !== 2 || parts[0] === '' || parts[1] === '') {
    return false;
  }

  // 도메인 부분을 '.'으로 분리
  let domainParts = parts[1].split('.');

  // '.'가 적어도 하나 있으며, 마지막 도메인 부분이 비어있지 않은지 확인
  if (domainParts.length < 2 || domainParts[domainParts.length - 1] === '') {
    return false;
  }

  // 위의 조건들을 모두 만족하면 유효한 이메일로 판단
  return true;
}




function isThatRight() {
  //id 유효성 검사
  const inputId = document.getElementById("id"); // 아이디를 가져와서 inputId 변수에 넣고

  if (inputId.value == "") { // id 텍스트가 비어있으면 
    alert(("아이디를 입력하세요.")); // 아이디 입력 경고창 팝업
    inputId.focus();
    return false;
  } else if (!isValidId(inputId.value)) { // 아이디 유효성 검사 함수가 아닌경우
    alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!"); // 경고창 팝업
    inputId.value = ""; // 텍스트 비움
    inputId.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }


  //pw 유효성 검사
  const inputPw = document.getElementById("pw"); // pw 아이디를 가져와서 inputpw 변수에 넣고

  if (inputPw.value == "") { // 비밀번호가 비어있을경우
    alert("비밀번호를 입력하세요."); // 경고창 팝업
    inputPw.focus();
    return false;
  } else if (!isValidPw(inputPw.value)) { // 비밀번호 유효성 검사 함수가 아닌경우 
    alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!"); // 경고창 팝업
    inputPw.value = ""; // 텍스트 비움
    inputPw.focus();  // 입력 필드에 자동으로 포커스 이동
    return false;
  }

  if (inputId.value === inputPw.value) { // 텍스트에 아이디와 비밀번호가 같은경우
    alert("아이디와 비밀번호가 같을 수 없습니다."); // 경고창 팝업
    inputPw.value = ""; // 텍스트 비움
    inputPw.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }


  //pwCheck 유효성 검사
  const inputPwCheck = document.getElementById("pwCheck"); // pwCheck 아이디로 내용을 가져와서 inputPwcheck 변수에 넣습니다.

  if (inputPw.value !== inputPwCheck.value) { // 일치여부를 확인하고 경고창을 띄웁니다.
    alert("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
    inputPwCheck.value = ""; // 일치하지 않으면 비밀번호 확인 내용을 지웁니다.
    inputPwCheck.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }

  //이메일 유효성 검사
  const inputEmail = document.getElementById("email"); // email 아이디로 내용을 가져와서 inputEmail 변수에 넣습니다.

  if (inputEmail.value == "") { // 이메일 칸에 비어 있을 경우 
    alert("이메일을 입력하세요."); // 경고창 팝업
    inputEmail.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  } else if (!isValidEmail(inputEmail.value)) { // 이메일 유효성 검사에서 아닌경우
    alert("이메일이 올바르지 않습니다."); // 경고창 팝업
    inputEmail.value = ""; // 텍스트 비움
    inputEmail.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }
  //이름 유효성 검사
  const inputName = document.getElementById("name"); // name 아이디로 내용을 가져와서 inputName 변수에 넣습니다.

  if (inputName.value == "") { // 이름 칸에 비어 있을 경우 
    alert("이름을 입력하세요."); // 경고창 팝업
    inputName.value = ""; // 텍스트 비움
    inputName.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  } else if (!isValidName(inputName.value)) { // 이름 유효성 검사에서 아닌경우
    alert("이름이 올바르지 않습니다."); // 경고창 팝업
    inputName.value = ""; // 텍스트 비움
    inputName.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }


  const inputAdress1 = document.getElementById("zip-code"); // zip-code 아이디로 내용을 가져와서 inputAdress1 변수에 넣습니다.

  if (inputAdress1.value == "") { // 우편변호 칸에 비어 있을 경우
    alert("우편번호를 입력하세요."); // 경고창 팝업
    inputAdress1.value = ""; // 텍스트 비움
    inputAdress1.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }

  const inputAdress2 = document.getElementById("address-2"); // address-2 아이디로 내용을 가져와서 inputAdress2 변수에 넣습니다.

  if (inputAdress2.value == "") { // 상세주소 칸에 비어 있을 경우
    alert("상세주소를 입력하세요."); // 경고창 팝업
    inputAdress2.value = ""; // 텍스트 비움
    inputAdress2.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }


  // 주민등록번호
  const userInfo = document.getElementById("RRN");  // RRN 아이디로 내용을 가져와서 userInfo 변수에 넣습니다.


  if (userInfo.value == "") { // 아무것도 입력하지 않았을때
    alert("주민번호를 입력하세요."); // 경고창 팝업
    userInfo.focus();
    return false; // 입력 필드에 자동으로 포커스 이동
  };

  // 주민번호 13자리인지 확인한다.
  if (userInfo.value.length != 13) {
    alert("주민번호가 올바르지 않습니다."); // 경고창 팝업
    return false;
  }

  let sum = 0;
  const weights = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5]; // weights 변수에 값을 입력
  // 마지막 자리 제외하고 반복
  for (let i = 0; i < userInfo.value.length - 1; i++) {
    // 숫자인지 확인
    if (userInfo.value.charAt(i) < '0' || userInfo.value.charAt(i) > '9') {
      alert("주민번호가 올바르지 않습니다."); // 경고창 팝업
      return false;
    }

    // 각 자리수에 가중치 weights를 각각 곱해서 합산
    sum += parseInt(userInfo.value.charAt(i)) * weights[i];
  }

  sum = (11 - (sum % 11)) % 10; // 합을 11로 나눈 나머지값에 11을빼고 10나머지로 한자리수 체크 디지트를 만듬

  // 체크디지트랑 주민번호 끝자리랑 비교
  if (sum !== parseInt(userInfo.value.charAt(12))) {
    alert("주민번호가 올바르지 않습니다."); // 경고창 팝업
    return false;
  }

  // 생년월일 검사 및 자동입력
  // 각각 년 월 일별로 아이디를 가져옵니다.
  const yearcheck = document.getElementById("year");
  const monthcheck = document.getElementById("month");
  const daycheck = document.getElementById("day");

  // 19년도는 남자가 1, 여자가2이고 20년도에는 2보다 이상입니다.
  let birthYearPrefix = "19";
  if (parseInt(userInfo.value.charAt(6)) > 2) {
    birthYearPrefix = "20";
  }

  // birthYearPrefix와 문자열 처음 두글자를 합쳐서 yearcheck 값으로 설정
  yearcheck.value = birthYearPrefix + userInfo.value.substring(0, 2);

  // userInfo의 세번째 글자가 0이면
  if (userInfo.value.charAt(2) === '0') {
    monthcheck.value = userInfo.value.charAt(3); // 4번째 글자를 가져와서 monthcheck에 설정
  }
  else { // 아닐경우
    monthcheck.value = userInfo.value.substring(2, 4); // 3번째와 4번째 글자를 가져와서 설정한다.
  }
  // 일도 같은 방식으로 설정한다.
  if (userInfo.value.charAt(4) === '0') { // 5번째 글자가 0이면
    daycheck.value = userInfo.value.charAt(5); // 6번째 글자를 가져와서 day에 설정
  }
  else { // 또는
    daycheck.value = userInfo.value.substring(4, 6); // 5번째와 6번째 글자를 가져와서 설정.
  }


  // 관심분야라는 이름을 가진 체크박스 요소를 선택한다.
  let checkboxes = document.querySelectorAll('input[type="checkbox"][name="관심분야"]');
  // 선택된 체크박스 중 최소 하나 이상 선택되어 있는지 확인
  let checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

  if (!checkedOne) { // 최소 하나 이상 선택되어있지 않다면
    alert("적어도 하나 이상의 관심 분야를 선택해주세요."); // 경고창 팝업
    return false;
  }

  //자기소개 유효성 검사
  const inputIntro = document.getElementById("intro"); // intro 아이디를 가져와서 inputIntro 변수에 설정한다.

  if (inputIntro.value == "") { // 비어있을경우
    alert("자기소개를 입력하세요."); // 경고창 팝업
    inputIntro.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
    // 10 이상 300 이하로 입력이 되지 않았을때
  } else if (!(inputIntro.value.length >= 10 && inputIntro.value.length <= 300)) {
    alert("자기소개는 10자 이상 300자 이하로 입력해야 합니다."); // 경고창 팝업
    inputIntro.focus(); // 입력 필드에 자동으로 포커스 이동
    return false;
  }

  alert("회원가입이 완료되었습니다."); // 마무리 경고창
}

// 주소
function execDaumPostcode() {
  new daum.Postcode({
    oncomplete: function (data) {
      document.getElementById('zip-code').value = data.zonecode;
      document.getElementById('address-1').value = data.address;
      document.getElementById('address-1-1').value = data.jibunAddress;
      document.getElementById('address-2').focus();
    }
  }).open();
}

MemberServlet.java

package member;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class SevletTest
 */
//@WebServlet("/Batman")
public class MemberServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public MemberServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response) 웹 통신을 GET방식으로 처리
	 */
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response) 웹 통신을 POST방식으로 처리
	 */
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		// 변수선언
		String id, pw, email, name, address1, address2, address11;
		String RRN, year, month, day, intro;
		String[] interest;
		// 클라이언트 응답시 전달될 컨텐츠에 대한 mime type과 캐릭터셋 지정
		response.setContentType("text/html; charset=euc-kr");

		// 클라이언트 응당을 위한 출력 스트림 확보
		PrintWriter out = response.getWriter();

		// HTML form 을 통해 전달된 num1, num2 패러미터 값을 변수에 할당
		// 이때 getParameter() 메서드는 문자열을 리턴하므로 숫자형 데이터의 경우 integer.parseInt()을 통해 int로 변환함
		id = request.getParameter("id");
		pw = request.getParameter("pw");
		email = request.getParameter("email");
		name = request.getParameter("name");
		address1 = request.getParameter("address-1");
		address11 = request.getParameter("address-1-1");
		address2 = request.getParameter("address-2");
		RRN = request.getParameter("RRN");
		year = request.getParameter("year");
		month = request.getParameter("month");
		day = request.getParameter("day");
		interest = request.getParameterValues("관심분야");

		intro = request.getParameter("intro");
		// calc() 메서드 호출로 결과 받아옴
		// result = calc(num1, num2, op);

		// CSS 추가: 테이블 스타일 지정
		String cssTag = "<style>" + ".info-table { width: 50%; margin-top: 20px; border-collapse: collapse; }"
				+ ".info-table th { border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2; color: black;} "
				+ ".info-table td { border: 1px solid #ddd; padding: 8px;} " + "</style>";

		out.println("<HTML>");
		out.println("<HEAD><TITLE>회원가입 정보</TITLE>" + cssTag + "</HEAD>");
		out.println("<BODY><center>");

		// 이름 크게 출력
		out.println("<H2>" + name + "님의 회원가입 정보" + "</H2>");

		// 테이블 형식으로 데이터 출력
		out.println("<table class='info-table'>" + "<tr><th>ID</th><td>" + id + "</td></tr>" + "<tr><th>PW</th><td>"
				+ pw + "</td></tr>" + "<tr><th>Email</th><td>" + email + "</td></tr>" + "<tr><th>이름</th><td>" + name
				+ "</td></tr>" + "<tr><th>주소</th><td>" + address1 + " " + address11 + " " + address2 + "</td></tr>"
				+ "<tr><th>주민등록번호</th><td>" + RRN + "</td></tr>" + "<tr><th>생일</th><td>" + year + "년" + month + "월"
				+ day + "일 " + "</td></tr>" + "<tr><th>자기소개</th><td>" + intro + "</td></tr>");

		out.println("<tr><th>관심분야</th><td>");
		for (int i = 0; i < interest.length; i++) {
			out.print(interest[i]);
			if (i < interest.length - 1) {
				out.print(", ");
			}
		}
		out.println("</td></tr>");

		out.println("</table></center></BODY></HTML>");
	}

}

블로그의 정보

감성 개발자 효기

효기’s

활동하기