2.3 레코드 입력 양식 문서(BoardWrite.jsp) 작성
2.3.1 레코드 입력양식 문서의 개요
사용자로부터 데이터를 입력 받기 위한 BoardWrite.jsp 문서
//BoardWrite.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8"/>
<LINK REL="stylesheet" type="text/css" herf="../include/style.css"/>
<title>게시글 입력</title>
</head>
<body>
<TABLE WIDTH=620 HEIGHT=40 BORDER=0 CELLSPACING=1 CELLPADDING=1 ALIGN=CENTER>
<TR BGCOLOR=#A0A0A0>
<TD ALIGN=CENTER><FONT SIZe=4><B>게시판(게시글 입력)</B></FONT></TD>
</TR>
</TABLE>
<%
// <% .. %> : 스크립트릿 : 모든 자바 코드를 사용할 수 있는 영역
// <jsp:include> 액션 태그 포함
/* JSP CODE START (세션 속성에 따른 문서 선택) */
String member_id = (String)session.getAttribute("member_id");
// member_id 세션 속성은 로그인이 수행되면 생성됨
if (member_id == null){
%>
<jsp:include page="../memeber/LoginForm.jsp"/>
<%
} else {
%>
<jsp:include page="../member/LoginSatae.jsp"/>
<%
}
/* JSP CODE END */
%>
// submit 발생 -> <FORM> 요소에 입력된 모든 데이터 request 기본 객체를 통해 BoardWriteProc.jsp 문서로 전송
<FORM NAME="BoardWrite" METHOD=POST ACTION="BoardWriteProc.jsp">
<TABLE WIDTH=620 BORDER=1 CELLSPACING=0 CELLPADDING=2 ALIGN=CENTER>
<TR>
<TD WIDTH=120 ALIGN=CENTER><B>이름</B></TD>
<TD WIDTH=500>
// 사용자의 이름을 입력하는 TEXT 입력 양식
// 입력된 이름은 name이라는 변수에 실려 전송됨
// ime-mode 값으로 activate 지정 => 초기 문자 집합 한글 지정 -> 한/영키 선택 안 해도 한글 입력됨
// Korean() 자바스크립트 함수 작성 -> 한글만 입력됨
<INPUT TYPE=TEXT NAME="name" SIZE=20 style="ime-mode:inactive">
</TD>
</TR>
<TR>
<TD WIDTH=120 ALIGN=CENTER><B>전자우편</B></TD>
<TD WIDTH=500>
// 사용자의 전자우편 주소를 입력하는 TEXT 입력 양식
// 입력된 전자우편 주소는 mail이라는 변수에 실려 전송됨
// ime-mode 값 activate 지정 -> 초기 문자 집합 영문 지정
<INPUT TYPE=TEXT NAME="mail" SIZE=60 style="ime-mode:inactive">
</TD>
</TR>
<TR>
<TD WIDTH=120 ALIGN=CENTER><B>제목</B></TD>
<TD WIDTH=500>
// 글의 제목을 입력하는 TEXT 입력 양식
// 입력된 글 제목은 submit이라는 변수에 실려 전송됨
<INPUT TYPE=TEXT NAME="subject" SIZE=70>
</TD>
</TR>
<TR>
<TD WIDTH=120 ALIGN=CENTER><B>내용</B></TD>
<TD WIDTH=500>
// 글의 내용을 입력하는 TEXTAREA 입력양식
// 입력된 글의 내용은 content라는 변수에 실려 전송
<TEXTAREA NAME="content" COLS=70 ROWS=8></TEXTAREA>
</TD>
</TR>
<TR>
<TD WIDTH=120 ALIGN=CENTER><B>파일첨부</B></TD>
<TD WIDTH=500>
// 파일을 선택하는 FILE 입력 양식
<INPUT TYPE=FILE NAME="filename" SIZE=60>
</TD>
</TR>
<TR>
<TD WIDTH=120 ALIGN=CENTER><B>패스워드</B></TD>
<TD WIDTH=500>
// 패스워드가 입력되는 PASSWORD 입력양식
// 입력된 패스워드는 pass라는 변수에 실려 전송
// 입력한 패스워드는 글을 수정하거나 삭제할 때 사용됨
<INPUT TYPE=PASSWORD NAME="pass" SIZE=20>
</TD>
</TR>
</TABLE>
</FORM>
<TABLE WIDTH=620 HEIGHT=50 BORDER=0 CELLSPACING=1 CELLPADDING=1 ALIGN=CENTER>
<TR ALIGN=CENTER>
<TD WIDTH=110 ALIGN=LEFT>
// 자바스크립트 객체인 location 객체의 replace() 메소드를 사용해 BoardList.jsp문서로 이동하는 [목록]버튼 이미지
<IMG SRC="../images/btn_list.gif" onClick="javascript:location.replace('BoardList.jsp')" STYLE=CURSOR:HAND>
</TD>
<TD WIDTH=400 ALIGN=CENTER>
// 입력된 내용을 저장하기 위한 [저장]버튼 이미지
<IMG SRC="../images/btn_save.gif" STYLE=CURSOR:HAND>
// 글쓰기를 취소하기 위한 [취소]버튼 이미지
<IMG SRC="../images/btn_cancle.gif" STYLE=CURSOR:HAND>
</TD>
<TD WIDTH=110 ALIGN=LEFT> </TD>
</TR>
</TABLE>
</body>
</html>2.3.2 데이터의 입력 오류 검사를 위한 자바스크립트 작성
- 입력 오류를 검사하기 위한 3가지 자바스크립트 루틴
- 데이터가 입력되어야 할 입력양식에 데이터가 입력되었는지 조사하는 자바스크립트 입력 양식
- 한글만 입력되도록 하는 자바스크립트 입력 양식
- 전자우편 주소의 형식이 올바른지 조사하는 자바스크립트 루틴
필수 입력 데이터 조사 부분 작성
- 필수 입력 데이터
- 작성자 이름(name), 레코드의 제목(subject), 패스워드(password)
- 필수 입력 데이터 조사 자바스크립트 루틴 삽입
<title>게시글 입력</title>
// <HEAD> 태그에 추가
<SCRIPT type="text/javascript">
// CheckForm 함수 : IF 조건절 사용 -> 입력 확인
function CheckForm(form){
if(!form.name.value){
// alert() : 인자로 지정한 문자열 브라우저에 출력
alert('성명을 입력하세요.');
// 마우스 커서를 오류가 발생한 입력 양식 안으로 이동
form.name.focus();
// 스크립트 종료
return true;
}
if(!form.subject.value){
alert('게시판의 제목을 입력하세요.');
form.subject.focus();
return true;
}
if(!form.pass.value){
alert('패스워드를 입력하세요.');
form.pass.focus();
return true;
}
// 입력 다 잘 되었으면 submit 메소드 수행
// 입력된 데이터가 request 기본객체를 통해 BoardWirteProc.jsp 문서로 전송
form.submit();
}
</SCRIPT>-
[저장] 버튼 이미지 작성
-
레코드 입력 화면에서 [저장] 버튼을 클릭 → CheckForm() 함수 실행
<IMG SRC=*"../images/btn_save.gif"* STYLE=CURSOR:*HAND*> -
위 코드를 아래와 같이 수정
<IMG SRC=*"../images/btn_save.gif"* STYLE=CURSOR:*HAND* **onClick="javascript:CheckForm(BoardWrite)"**> -
입력 양식에 데이터 입력 X [전송] 버튼 클릭 → CheckForm() 함수 수행 → alert() 메소드를 통해 오류 알려줌
-
전자우편주소 형식 조사 루틴 작성
<title>게시글 입력</title>
// <HEAD> 태그에 추가
<SCRIPT type="text/javascript">
// CheckForm 함수 : IF 조건절 사용 -> 입력 확인
function CheckForm(form){
if(!form.name.value){
// alert() : 인자로 지정한 문자열 브라우저에 출력
alert('성명을 입력하세요.');
// 마우스 커서를 오류가 발생한 입력 양식 안으로 이동
form.name.focus();
// 스크립트 종료
return true;
}
if(!form.subject.value){
alert('게시판의 제목을 입력하세요.');
form.subject.focus();
return true;
}
if(!form.pass.value){
alert('패스워드를 입력하세요.');
form.pass.focus();
return true;
}
// 입력 다 잘 되었으면 submit 메소드 수행
// 입력된 데이터가 request 기본객체를 통해 BoardWirteProc.jsp 문서로 전송
form.submit();
}
</SCRIPT>- isCorrectEmail()함수의 호출
- 이 함수는 사용자가 email 주소를 입력했을 때만 실행되어야 함
- 전자우편 주소의 형식을 조사하는 isCorrectEmail()함수 호출하는 부분은
- CheckForm 함수의 ‘이름’과 ‘제목’을 조사하는 if 구문 사이에 삽입<SCRIPT type="text/javascript"> function CheckForm(form){ if(!form.name.value){ alert('성명을 입력하세요.'); form.name.focus(); return true; } // email 주소가 입력된 경우에만 isCorrectEmail 함수 호출 // 첫 번째 인자 : <FORM> 태그으 이름 : BoardWrite // 두 번째 인자 : email 입력 양식의 이름 : mail if(form.mail.value){ if( !isCorrectEmail('BoardWrite', 'mail')){ alert('전자우편형식이 올바르지 않습니다.'); form.mail.focus(); // 커서 이동 form.mail.select(); // 잘못된 형식의 email 주소 문자열 선택 return; // 스크립트 종료 } } if(!form.subject.value){ alert('게시판의 제목을 입력하세요.'); form.subject.focus(); return true; } if(!form.pass.value){ alert('패스워드를 입력하세요.'); form.pass.focus(); return true; } form.submit(); } </SCRIPT>
한글만 입력 가능한 루틴 작성
- 한글만 입력이 가능한 함수 작성
- 이름 입력란에 한글만 입력될 수 있는 자바스크립트 함수 작성
- event 객체와 키 코드(key code) 그리고 onKeyDown 이벤트 사용
- 영문 이름 입력 허용할 경우 작성 필요 X
- 자바스크립트 함수로 작성함 → 주소 형식 검사 루틴을 작성한 scripts.js 문서 하단에 Korean() 함수 추가 작성
// -------------------- 한글만 입력되는 함수
// IF 조건절에 표현된 event 객체의 속석
// crtlKey : Ctrl키, shiftKey : 오른쪽 Shift 키
// shiftLeft : 왼쪽 ShiftKey키, altKey : Alt 키
function Korean() {
if(event.ctrlKey || event.shiftKey || event.shiftLeft || evebt.altKey){
// returnValue를 false로 지정 -> 조건절에 지정한 4개의 키 중 하나만 입력 되어도 입력 받지 않도록 지정
// Ctrl, Shift, Alt 사용 X
event.returnValue = false;
return false;
}
// 허용 키
if( (event.keyCode == 8 // Back Space 키
|| event.keyCode == 9 // Tab 키
|| event.keyCode == 35 // End 키
|| event.keyCode == 36 // Home 키
|| event.keyCode == 37 // <- 화살표
|| event.keyCode == 39 // -> 화살표
|| event.keyCode == 46)) // Delete
{
event.returnValue = true;
return;
}
// 코드 값이 12592보다 작거나 12687보다 큰 경우 값 받아들이지 X -> 한글만 입력
// 영문숫자의 경우 1 byte 표현 가능, 한글 불가능
// 영무노드 ASCII 코드 표현 가능, 한글 불가능
// 유니코드 12592 ~ 12687 호환 가능한 한글 자음과 모음 나타냄
if ((event.keyCode < 12592 || event.keyCode > 12687)) {
event.returnValue = false;
return false;
}
}- Korean()함수의 적용
- 이름을 입력하는 부분에만 사용됨
- 키보드의 키를 누를 때 실행 → onKeyDown 이벤트 사용
'INPUT TYPE=TEXT NAME="name" SIZE=20 style="ime-mode:inactive">' - 아래와 같이 수정
'INPUT TYPE=TEXT NAME="name" SIZE=20 style="ime-mode:inactive" onKeyDown='javascript:Korean()'
- 궁금증
- Shift키 설정 X → 쌍자음은 어떻게 입력?
- 실험해본 결과
- 쌍자음은 입력 가능
- 영어 대문자 입력 불가능 → 근데 소문자는 가능
- 실험해본 결과
- 영어 소문자는 어떻게 막는지?
- Shift키 설정 X → 쌍자음은 어떻게 입력?
안녕하세요.