블로거 워누입니다!
오늘은 Java를 html과 융합하여 JSP와 Servlet(서블릿)이라는 것들을 이용하여 웹 페이지를 만들어 보았는데요! 코드가 조금 기니까 자세히 보셔야 해요ㅎㅎ 총 세개의 파일로 구성되어 있구요!하나는 JSP, 하나는 서블릿, 하나는 자바스크립트 파일입니다!
아래 코드와 결과를 같이 봐주세요!
1) 11_testpage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebTest Page</title>
<script type="text/javascript" src="testScript.js"></script>
</head>
<body>
<form method="get" action="testServlet" name="frm">
<h2> 회원 가입 페이지 </h2>
<label for="userName"> 이름 </label><span style="color:blue;"> * </span>
<input type="text" id="userName" name="userName"> <br>
<label> 주민등록번호 </label><span style="color:blue;"> * </span>
<input type="text" id="userNoBir" name="userNoBir"> -
<input type="password" id="userNoSec" name="userNoSec"> <br>
<label for="userID"> 아이디 </label><span style="color:blue;"> * </span>
<input type="text" id="userID" name="userID"> <br>
<label for="userPwd"> 비밀번호 </label><span style="color:blue;"> * </span>
<input type="password" id="userPwd" name="userPwd"> <br>
<label for="userPwdchk"> 비밀번호확인 </label><span style="color:blue;"> * </span>
<input type="password" id="userPwdchk" name="userPwdchk"> <br>
<label for="userEmail"> 이메일 </label><span style="color:blue;"> * </span>
<input type="text" name="userEmail" id="userEmail"> @
<input type="text" name="Emailaddr" id="Emailaddr">
<label for="EmailSelect" style="float: left;"> </label>
<select id="EmailSelect" name="EmailSelect" size="1">
<option value="직접입력">직접입력 </option>
<option value="naver.com"> naver.com </option>
<option value="nate.com"> nate.com </option>
<option value="hanmail.net"> hanmail.net </option>
<option value="gmail.com"> gmail.com </option>
</select>
<br>
<label for="userHomeNo"> 우편번호 </label>
<input type="text" id="userHomeNo" name="userHomeNo"> <br>
<label for="userAddr1"> 주소 </label>
<input type="text" id="userAddr1" name="userAddr1">
<input type="text" id="userAddr2" name="userAddr2"> <br>
<label for="userHP"> 전화번호 </label>
<input type="text" name="userHP"> <br>
<label for="job" style="float: left;"> 직업 </label>
<select id="job" name="job" size="1">
<option value="학생"> 학생 </option>
<option value="공무원"> 공무원 </option>
<option value="언론"> 언론 </option>
<option value="컴퓨터/인터넷"> 컴퓨터/인터넷 </option>
</select>
<br>
<label for="chkMailSMS"> 메일/SMS 정보 수신 여부 </label>
<input type="radio" id="chkMailSMS" name="chkMailSMS" value="yes" checked> 수신
<input type="radio" id="chkMailSMS" name="chkMailSMS" value="no"> 거부 <br><br>
<label for="pl"> 개발언어 관심 분야 </label> <br>
<input type="checkbox" name="pl" value="C"> C
<input type="checkbox" name="pl" value="C++"> C++
<input type="checkbox" name="pl" value="Java"> Java <br>
<input type="checkbox" name="pl" value="C#"> C#
<input type="checkbox" name="pl" value="JavaScript"> JavaScript
<input type="checkbox" name="pl" value="python"> python <br>
<br><br>
<input type="submit" value="회원가입" style="float: center;" onclick="return check()">
<input type="reset" value="취소" style="float: center;margin-right:50px">
</form>
</body>
</html>
2) testServlet.java <- 얘가 서블릿이에요!
package unit11;
import java.io.IOException;
import java.io.PrintWriter;
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 testServlet
*/
@WebServlet("/testServlet")
public class testServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public testServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html; charset=UTF-8");
String userName = request.getParameter("userName");
int userNoBir = Integer.parseInt(request.getParameter("userNoBir"));
int userNoSec = Integer.parseInt(request.getParameter("userNoSec"));
String userID = request.getParameter("userID");
String userPwd = request.getParameter("userPwd");
String userPwdchk = request.getParameter("userPwdchk");
String userEmail = request.getParameter("userEmail");
String Emailaddr = request.getParameter("Emailaddr");
String EmailSelect = request.getParameter("EmailSelect");
int userHomeNo = Integer.parseInt(request.getParameter("userHomeNo"));
String userAddr1 = request.getParameter("userAddr1");
String userAddr2 = request.getParameter("userAddr2");
String userHP = request.getParameter("userHP");
String Job = request.getParameter("job");
String chkMailSMS = request.getParameter("chkMailSMS");
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.print("<h1> 회원 정보 <h1> <br><hr>");
out.println("이름 : <b>" + userName);
out.print("<br>");
out.println("</b>주민등록번호 : <b>" + userNoBir + "-" + userNoSec);
out.print("<br>");
out.println("</b>아이디 : <b>" + userID);
out.print("<br>");
out.println("</b>비밀번호 : <b>" + userPwd);
out.print("<br>");
if (Emailaddr.trim() == "")
out.println("</b>이메일 : <b>" + userEmail + "@" + EmailSelect);
else
out.println("</b>이메일 : <b>" + userEmail + "@" + Emailaddr);
out.print("<br>");
out.println("</b>우편번호 : <b>" + userHomeNo);
out.print("<br>");
out.println("</b>주소 : <b>" + userAddr1);
out.print(userAddr2);
out.print("<br>");
out.println("</b>핸드폰번호 : <b>" + userHP);
out.print("<br>");
out.println("</b>직업 : <b>" + Job);
out.print("<br>");
out.println("</b>메일/문자 수신 여부 : <b>" + chkMailSMS);
out.print("<br>");
String pls[] = request.getParameterValues("pl");
if (pls == null) {
out.print("</b>선택한 항목이 없습니다. <b>");
} else {
out.println("</b>관심분야 : <b>");
for (String pl : pls)
out.print(pl + " ");
}
out.print("</b><br>");
out.println("</b><br><br><a href='javascript:history.go(-1)'>다시</a>");
out.print("</body></html>");
out.close();
}
/**
*
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
3) testScript.js
/**
*
* 입력된 값에 대하여 유효성을 검사하는 자바스크립트입니다.
*
*/
function check() {
if (document.frm.userName.value == "") {
alert("이름을 입력해주세요.");
document.frm.userName.focus();
return false;
} else if (document.frm.userNoBir.value == "") {
alert("주민번호 앞자리를 입력해주세요.");
document.frm.userNoBir.focus();
return false;
} else if (isNaN(document.frm.userNoBir.value)) {
alert("숫자로 입력해주세요.");
document.frm.userNoBir.focus();
return false;
} else if (document.frm.userNoBir.length == 6) {
alert("주민번호 앞자리는 6자리여야 합니다. 다시 입력해주세요.");
document.frm.userNoBir.focus();
return false;
} else if (document.frm.userNoSec.value == "") {
alert("주민번호 뒷자리를 입력해주세요.");
document.frm.userNoSec.focus();
return false;
} else if (document.frm.userNoSec.length == 7) {
alert("주민번호 앞자리는 7자리여야 합니다. 다시 입력해주세요.");
document.frm.userNoSec.focus();
return false;
} else if (isNaN(document.frm.userNoSec.value)) {
alert("숫자로 입력해주세요.");
document.frm.userNoSec.focus();
return false;
} else if (document.frm.userID.value == "") {
alert("아이디를 입력해주세요.");
document.frm.userID.focus();
return false;
} else if (document.frm.userID.length < 4) {
alert("아이디는 최소 4자리 이상이어야 합니다.");
document.frm.userID.focus();
return false;
} else if (document.frm.userPwd.value == "") {
alert("비밀번호를 입력해주세요.")
document.frm.userPwd.focus();
return false;
} else if (document.frm.userPwdchk.value == "") {
alert("비밀번호 확인란에 비밀번호를 재입력해주세요.");
document.frm.userPwdchk.focus();
return false;
} else if (document.frm.userPwd.length < 6) {
alert("비밀번호는 최소 6자리 이상이어야 합니다.");
document.frm.userPwd.focus();
return false;
} else if (document.frm.userPwd.value != document.frm.userPwdchk.value) {
alert("비밀번호가 일치하지 않습니다. 다시 확인해주세요.");
document.frm.userPwd.focus();
return false;
} else if (document.frm.userEmail.value == "") {
alert("이메일 계정을 입력해주세요.");
document.frm.userEmail.focus();
return false;
} else
return true;
}---------------------------------------------------------------------------------------------
뭔가 좀 많죠..? ㅎㅎ 그럼 바로 아래 결과를 보겠습니다.
1. 출력 화면
.
.
2. 정보 입력
.
.
3. 결과 확인
.
.
나름 괜찮나요? 만약 이름이나 비밀번호 등 * 표시 된것들 중에서 하나 빼고 확인 누르거나 취소 버튼 눌러보거나 하는 액션을 취해주시면 흥미로운 결과도 발견됩니다. 확인해 보시고 이상이 있거나, 지적할 사항, 보충해야 되는 부분들 확인해 주시면 감사하겠습니다 ㅎㅎ
아직 데이터베이스를 구축하지 않아 저장은 되지 않네요 ㅎㅎ 앞으로 데이터베이스를 빨리 익혀서 회원 정보를 구축하는 법도 익혀야겠어요! 그러면 하나의 웹 페이지를 제작할 수 있는 능력이 생기겠죠?? 얼른 제대로 된 웹개발자가 되어야 겠습니다! 그 전까지 같이 공부하고 응원합시다!
밤이 늦었으니 전 이만 자러 가볼께요! 다음 포스팅에서 봅시다!! 안녕!!