수업 시간 때 교재의 중간 확인 문제에서 결과 화면을 사진으로 보여주고 해당 결과 화면을 똑같이 만드는 코딩을 하였습니다. 결과 화면만 보여주고 코드는 그 전 시간에 배웠던것 + 제가 약간씩 응용하여서 해보았습니다.
기능은 회원 가입 정보를 입력 받고 유효성 체크를 하고 입력한 내용을 확인하는 코드입니다.
코드
jsp 코드
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() { //유효성 체크
if (document.frm.name.value == "") { //document ==> 우리가 만든 윈도우 창을 가르키는 객체
alert("이름을 입력해주세요");
document.frm.name.focus(); //해당 함수에 포커스를 넣는다.
return false;
} else if (document.frm.jumin.value == "") { //document ==> 우리가 만든 윈도우 창을 가르키는 객체
alert("주민번호를 입력해주세요.");
document.frm.jumin.focus(); //해당 함수에 포커스를 넣는다.
return false;
} else if (document.frm.juminpwd.value == "") { //document ==> 우리가 만든 윈도우 창을 가르키는 객체
alert("주민번호 뒷자리를 입력해주세요.");
document.frm.juminpwd.focus(); //해당 함수에 포커스를 넣는다.
return false;
} else if (isNaN(document.frm.jumin.value)) {
alert("주민번호 앞 자리를 숫자로 입력해주세요.");
document.frm.jumin.value = "";
document.frm.jumin.focus();
return false;
} else if (isNaN(document.frm.juminpwd.value)) {
alert("주민번호 뒷 자리를 숫자로 입력해주세요.");
document.frm.juminpwd.value = "";
document.frm.juminpwd.focus();
return false;
} else if (document.frm.id.value == "") {
alert("아이디를 입력해주세요.");
document.frm.id.focus();
return false;
} else if (document.frm.pwd.value == "") {
alert("비밀번호를 입력해주세요.");
document.frm.pwd.focus();
return false;
} else if (document.frm.checkpwd.value == "") {
alert("비밀번호 확인란을 입력해주세요.");
document.frm.checkpwd.focus();
return false;
} else if (document.frm.checkpwd.value != document.frm.pwd.value) {
alert("비밀번호와 비밀번호 확인란이 일치하지 않습니다. 다시 입력해주세요.");
document.frm.checkpwd.value = "";
document.frm.checkpwd.focus();
return false;
} else if (document.frm.email.value == "") {
alert("이메일을 입력해주세요.");
document.frm.email.focus();
return false;
}
else if (document.frm.email2.value == "") {
alert("도메인을 입력해주세요.");
document.frm.email2.focus();
return false;
} else if (document.frm.zipcode.value == "") {
alert("우편번호를 입력해주세요.");
document.frm.zipcode.focus();
return false;
} else if (document.frm.addr.value == "") {
alert("주소를 입력해주세요.");
document.frm.addr.focus();
return false;
} else if (document.frm.addr2.value == "") {
alert("상세 주소를 입력해주세요.");
document.frm.addr2.focus();
return false;
} else if (document.frm.phone.value == "") {
alert("핸드폰번호를 입력해주세요.");
document.frm.phone.focus();
return false;
} else if (document.frm.work.value == "") {
alert("직업을 선택해주세요.");
document.frm.work.focus();
return false;
} else if (document.frm.phone.value == "") {
alert("핸드폰번호를 입력해주세요.");
document.frm.phone.focus();
return false;
}
return true;
}
function checkEmail() { //도메인 자동 선택
if (document.frm.emailList.value != "") {
document.frm.email2.value = document.frm.emailList.value;
} else {
document.frm.email2.value = "";
document.frm.email2.focus();
}
}
</script>
<style type="text/css">
label {
width: 140px;
float: left;
}
input {
margin: 1px;
}
</style>
</head>
<body>
<div class="login">
<form method="get" action="loginFormServlet" name="frm">
<label for="username"> 이름 </label>
<input type="text" name="name" id="username"><br>
<label for="userjumin"> 주민번호</label>
<input type="text" name="jumin" id="userjumin"> - 
<input type="password" name="juminpwd" id="userjuminpwd"><br>
<label for="userid"> 아이디 </label>
<input type="text" name="id" id="userid"><br> <label for="userpwd"> 비밀번호 </label>
<input type="password" name="pwd" id="userpwd"><br>
<label for="usercheckpwd"> 비밀번호 확인 </label>
<input type="password" name="checkpwd" id="usercheckpwd"><br>
<label for="useremail"> 이메일 </label>
<input type="text" name="email" id="useremail"> @ 
<input type="text" name="email2" id="useremail">
<select name="emailList" size='1' onchange="return checkEmail()">
<option value="">직접 입력</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
<option value="nate.com">nate.com</option>
</select> <br>
<label for="userzipcode"> 우편번호 </label>
<input type="text" name="zipcode" id="userzipcode"><br>
<label for="useraddr"> 주소 </label>
<input type="text" name="addr" id="useraddr">
<input type="text" name="addr2" id="useraddr"> <br>
<label for="userphone"> 핸드폰번호 </label>
<input type="text" name="phone" id="userphone"><br>
<label for="work">직업</label>
<select id="interest" name="work" size='4'>
<option value="학생">학생</option>
<option value="컴퓨터/인터넷">컴퓨터/인터넷</option>
<option value="언론">언론</option>
<option value="공무원">공무원</option>
<option value="백수">백수</option>
<option value="취준생">취준생</option>
<option value="프로그래머">프로그래머</option>
</select> <br>
<label for="checkSms"> 메일/SMS정보 수신 </label>
<input type="radio" id="checkSms" name="checkSms" value="수신" checked>수신
<input type="radio" id="checkSms" name="checkSms" value="수신 거부"> 수신 거부 <br>
<label for="checkbox"> 관심분야 </label>
<input type="checkbox" name="item" value="생두"> 생두
<input type="checkbox" name="item" value="원두"> 원두
<input type="checkbox" name="item" value="로스팅"> 로스팅
<input type="checkbox" name="item" value="핸드드립"> 핸드드립
<input type="checkbox" name="item" value="에스프레소"> 에스프레소
<input type="checkbox" name="item" value="창업"> 창업<br> <br>
</div>
<div style="text-align: center;">
<input type="submit" value="회원가입" onclick="return check()">
<input type="reset">
</div>
</form>
</body>
</html>Servlet 코드
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 loginFormServlet
*/
@WebServlet("/loginFormServlet")
public class loginFormServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public loginFormServlet() {
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
String name = request.getParameter("name");
String jumin = request.getParameter("jumin");
String juminpwd = request.getParameter("juminpwd");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String checkpwd = request.getParameter("checkpwd");
String email = request.getParameter("email");
String email2 = request.getParameter("email2");
String emailList = request.getParameter("emailList");
String zipcode = request.getParameter("zipcode");
String addr = request.getParameter("addr");
String addr2 = request.getParameter("addr2");
String phone = request.getParameter("phone");
String work = request.getParameter("work");
String checkSms = request.getParameter("checkSms");
String items[] = request.getParameterValues("item");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.println("이름 : <b>");
out.print(name);
out.println("</b><br>주민번호 : <b>");
out.println(jumin + "-" + juminpwd + "</b>");
out.println("<br>아 이 디 : <b>");
out.print(id);
out.println("</b><br>비밀번호 : <b>");
out.print(pwd);
out.println("</b><br>이 메 일 : <b>");
out.print(email + "@" + email2);
out.println("</b><br>우편번호 : <b>");
out.print(zipcode);
out.println("</b><br>주소 : <b>");
out.print(addr + addr2);
out.println("</b><br>핸드폰번호 : <b>");
out.print(phone);
out.println("</b><br>직업 : <b>");
out.print(work);
out.println("</b><br>관심분야 : <b>");
if (items == null) {
out.print("선택한 항목이 없습니다.");
} else {
for (String item : items) {
out.print(item + " ");
}
}
out.println("</b><br>정보 수신 여부 : <b>");
out.print(checkSms);
out.println("<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);
}
}
코드 흐름
jsp파일로 데이터를 입력 받고 jsp파일 내에서 js를 통해 유효성 검사를 했습니다. 또한 css를 간단하게 적용해서 입력 칸을 통일되게 맞춰주었고 입력된 정보를 servlet을 통해 확인하여 화면에 띄웠습니다.
웹페이지 사진
웹페이지 첫 화면
유효성 검사(회원가입 버튼을 누르면 유효성 검사 실시.)
JSP 결과
기능들
css같은 경우는 라벨에 width를 140px을 줘서 이름 주민번호 같은 단어들의 공간을 140px로 한정하고 float을 통해 왼쪽으로 붙여줬습니다. 이렇게 하면 글자가 쭉 적히고 140px까지는 빈 공간이 확보되며 140px 이후 부분에 바로 input창들이 가지런하게 놓이게 됩니다. width를 너무 좁게하면 비밀번호 확인같은 부분의 공간이 부족하여
"비밀번" 하고 다음 줄에
"호 학인" 이 쳐지는 현상을 볼 수 있었습니다. 다른 사람들의 코드를 보면 table 방식을 사용하는 방법도 있는듯합니다.
또한 input창에 margin을 줘서 각 input창 끼리 1px씩 띄워주어서 가독성 측면의 효과를 올렸습니다.
js에서는 회원가입 버튼을 누르면 유효성 검사를 통해 input에 값이 입력되었는지 확인하고 입력되지 않았다면 입력 받으라는 alert창을 띄워주었고 주민번호 같은 경우에는 숫자만 입력받게 하였습니다. 만약 숫자 이외의 값(한글, 영어 등)이 입력되면 alert창을 띄워주고 입력된 값을 리셋 시켜주었습니다.
비밀번호 확인에서는 비밀번호와 비밀번호 확인의 값이 일치하지 않으면 경고창을 띄워주고 비밀번호 확인 값을 리셋 해줬습니다.
이메일 입력에서는 사용자가 직접 도메인 체크 박스에서는 체크 박스를 클릭할 경우 onchange 속성을 통해 값이 변하는 것을 확인하여 js 안의 메서드를 불러와서 자동으로 도메인 입력 칸에 입력되도록 하였습니다.
직업 드롭 다운 메뉴에서는 아무것도 클릭하지 않으면 유효성 검사를 통해 클릭 하라는 알림창을 띄워줬습니다.
마지막으로 회원 가입 버튼을 누르면 유효성 검사를 통해 위의 기능들을 확인하고 원래대로 버튼을 누르면 reset 타입을 사용하여 모든 input 값들을 리셋하였습니다.
입력 후에는 servlet을 통해 클라이언트로부터 입력받은 데이터를 출력, 확인해주었습니다.
또한 다시 버튼을 누르면 전 페이지로 넘어가게 하였습니다.
느낀 점
아직 제대로된 서버를 구현하지도 못 했지만 그래도 뭔가 배운걸 기반으로 작성하여서 재미있었습니다.
출처 : 국비 교육 내용 + JSP&Servlet(성윤정)
프로그래밍 공부 중!