티스토리 뷰
영화 등록하는 화면은 다음과 같다.
addNewMovie.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<c:url value="/resource/js/jquery-1.12.1.js"/> "></script>
<script type="text/javascript">
$(document).ready( function() {
} );
</script>
</head>
<body>
<h1>영화 등록</h1>
<hr/>
<form id="addNewMovieForm">
영화명 : <input type="text" id="movieTitle" name="movieTitle"/> <br/>
평점 : <input type="text" id="rate" name="rate"/><br/>
상영시간 : <input type="text" id="runningTime" name="runningTime"/><br/>
개봉일 : <input type="date" id="openDate" name="openDate"/><br/>
상영등급 :
<!-- 라디오 버튼은 name이 같아야 그 name이 같은 것들 중에서 단 하나만 선택할 수 있다. -->
<c:forEach items="${gradeList}" var="grade">
<input type="radio" class="grade" name="grade" value="${grade.gradeId}"/> ${grade.gradeTitle}
</c:forEach>
<br/>
감독 :
<select id="directors" name="directors" multiple="multiple">
<c:forEach items="${directorList}" var="director">
<option value="${director.directorId}">${director.directorName}</option>
</c:forEach>
</select>
<span id="directorsName"></span>
<br/>
출연진 :
<select id="actors" name="actors" multiple="multiple">
<c:forEach items="${actorList}" var="actor">
<option value="${actor.actorId}">${actor.actorName}</option>
</c:forEach>
</select>
<br/>
장르 :
<!-- check박스도 이름이 같아야 한다. -->
<c:forEach items="${genreList}" var="genre">
<input type="checkbox" class="genres" name="genres" value="${genre.genreId}"/> ${genre.genreTitle}
</c:forEach>
<br/>
<input type="button" id="addNewMovie" value="영화 등록!"/>
</form>
</body>
</html> |
cs |
실행화면
이제 여기에서 영화등록! 버튼을 눌렀을 때 내부적으로 데이터베이스에 입력받은 내용을 넣어주어야한다.
(1) 영화명, 평점, 상영시간, 개봉일, 상영등급, 감독, 출연진, 장르는 화면에서 필수로 입력해야하는 값이므로 반드시 validation check를 해주어야 한다. validation check를 할 때 굉장히 많은 시간이 걸린다.
먼저 영화명부터 validation check를 해보자. 아래 코드가 가장 기본적인 Validation Check 코드이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
$(document).ready( function() {
$("#addNewMovie").click(function() {
//Validation Check
// input 태그는 반드시 val()을 써준다.
var movieTitle = $("#movieTitle").val();
if( movieTitle == "" ){
alert("영화명을 입력하세요!");
return; // 밑의 내용은 실행이 되지 않는다.
}
}); |
cs |
그런데 위의 코드는 좌 우의 공백들은 처리를 해주지 못한다. 자바에서는 trim 이였지만, 자바스크립트에서는 없다. 그래서 jQuery가 만들었다. 어떻게? 아래와 같이 !!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
$(document).ready( function() {
$("#addNewMovie").click(function() {
//Validation Check
// input 태그는 반드시 val()을 써준다.
var movieTitle = $("#movieTitle").val();
movieTitle = $.trim( movieTitle );
if( movieTitle == "" ){
alert("영화명을 입력하세요!");
return; // 밑의 내용은 실행이 되지 않는다.
}
}); |
cs |
(2) 이제 평점을 Validation check 해보자. 그런데 영화명을 처리해준것처럼 동일하게 하면 안된다. 왜? 만약에 평점에 누군가가 "최고!" "최악" 과 같이 문자를 넣으면 안되기 때문에 먼저 입력한 값이 숫자인지 체크를 해주어야 한다. 자바 스크립트에는 integer하고 float이 구분이 없다. 그냥 number type하나만 있다. 그런데 재밋는 것은 parseInt하면 정수가 된다. parseDouble하면 실수가 된다. 이것은 어떤식으로 표현할 것인가의 문제이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
var rate = $("#rate").val();
rate = $.trim( rate );
if( rate == "" ){
alert("평점을 입력하세요!");
return; // 밑의 내용은 실행이 되지 않는다.
}
// isNaN() : Not a Number
if( isNaN(rate) ){
alert("평점을 올바르게 입력하세요!\n평점은 소수점을 포함한 숫자로 적을 수 있습니다.");
return;
} |
cs |
(3) 이번엔 시간을 유효성검사 해보자.
시간을 체크하는 가장 좋은 방법은 정규표현식을 사용하는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
var runningTime = $("#runningTime").val();
runningTime = $.trim( runningTime );
if( runningTime == "" ){
alert("상영 시간을 입력하세요!");
return;
}
if ( runningTime.length > 5 ){
alert("상영시간을 올바르게 입력하세요!");
return;
}
var regExp = new RegExp("^[0-2][0-9]:[0-5][0-9]$");
var isValidrunningTime = regExp.test(runningTime);
if( isValidrunningTime == false ){
alert("상영시간을 올바르게 입력하세요!");
}
return; |
cs |
(4) 개봉일도 마찬가지로 검사를 해주면 된다.
(5) 상영등급, 감독, 출연진을 모두 검사한다. 상영 등급은 radio button 형식이기 때문에 소스가 조금 다르다.
한 페이지 내에서 똑같은 id 가 있으면 안된다. 중복이 될것 같으면은 id 가 아니라 class를 쓰면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
var grade = $(".grade:checked").val();
grade = $.trim( grade );
if ( grade == "" ) {
alert("등급을 입력하세요!");
$(".grade").fadeOut().fadeIn().fadeOut().fadeIn();
return;
}
var directors = $("#directors option:selected").val();
directors = $.trim( directors );
if( directors == "" ){
alert("감독을 선택하세요!");
$("#directors").fadeOut().fadeIn().fadeOut().fadeIn();
return;
}
var actors = $("#actors option:selected").val();
actors = $.trim( actors );
if( actors == "" ){
alert("출연진을 선택하세요!");
$("#actors").fadeOut().fadeIn().fadeOut().fadeIn();
return;
} |
cs |
(6) 마지막으로, 폼을 addNewMovieAction 서블릿으로 post 방식으로 넘겨준다.
|
1
2
3
4 |
var form = $("#addNewMovieForm");
form.attr("metod", "post");
form.attr("action", "<c:url value="/addNewMovieAction" />");
form.submit(); |
cs |
전체코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<c:url value="/resource/js/jquery-1.12.1.js"/> "></script>
<script type="text/javascript">
$(document).ready( function() {
$("#addNewMovie").click(function() {
//Validation Check
// input 태그는 반드시 val()을 써준다.
var movieTitle = $("#movieTitle").val();
movieTitle = $.trim( movieTitle );
if( movieTitle == "" ){
alert("영화명을 입력하세요!");
$("#movieTitle").focus();
return; // 밑의 내용은 실행이 되지 않는다.
}
var rate = $("#rate").val();
rate = $.trim( rate );
if( rate == "" ){
alert("평점을 입력하세요!");
$("#rate").focus();
return;
}
// == : 데이터가 같은지 본다.
// === : 데이터의 타입까지 같은지 본다.
// isNaN() : Not a Number
if( isNaN(rate) ){
alert("평점을 올바르게 입력하세요!\n평점은 소수점을 포함한 숫자로 적을 수 있습니다.");
$("#rate").focus();
return;
}
var runningTime = $("#runningTime").val();
runningTime = $.trim( runningTime );
if( runningTime == "" ){
alert("상영 시간을 입력하세요!");
$("#runningTime").focus();
return;
}
// 자바스크립트는 한 글자의 length 를 1로 본다. (한글, 영어 무관)
if ( runningTime.length > 5 ){
alert("상영시간을 올바르게 입력하세요!");
$("#runningTime").focus();
return;
}
//^문자열이 시작한다.
//$문자열이 끝난다.
// [부터-까지]{최소반복횟수,최대반복횟수}
var regExp = new RegExp("^[0-2][0-9]:[0-5][0-9]$");
var isValidrunningTime = regExp.test(runningTime);
if( isValidrunningTime == false ){
alert("상영시간을 올바르게 입력하세요!");
$("#runningTime").focus();
return;
}
var openDate = $("#openDate").val();
openDate = $.trim( openDate );
if( openDate == "" ){
alert("개봉일을 입력하세요!");
return;
}
var grade = $(".grade:checked").val();
grade = $.trim( grade );
if ( grade == "" ) {
alert("등급을 입력하세요!");
$(".grade").fadeOut().fadeIn().fadeOut().fadeIn();
return;
}
var directors = $("#directors option:selected").val();
directors = $.trim( directors );
if( directors == "" ){
alert("감독을 선택하세요!");
$("#directors").fadeOut().fadeIn().fadeOut().fadeIn();
return;
}
var actors = $("#actors option:selected").val();
actors = $.trim( actors );
if( actors == "" ){
alert("출연진을 선택하세요!");
$("#actors").fadeOut().fadeIn().fadeOut().fadeIn();
return;
}
var genres = $(".genres:checked").val();
genres = $.trim( genres );
if( genres == "" ){
alert("장르를 선택하세요!");
return;
}
var form = $("#addNewMovieForm");
form.attr("metod", "post");
form.attr("action", "<c:url value="/addNewMovieAction" />");
form.submit();
});
} );
</script>
</head>
<body>
<h1>영화 등록</h1>
<hr/>
<form id="addNewMovieForm">
영화명 : <input type="text" id="movieTitle" name="movieTitle"/> <br/>
평점 : <input type="text" id="rate" name="rate"/><br/>
상영시간 : <input type="text" id="runningTime" name="runningTime"/><br/>
개봉일 : <input type="date" id="openDate" name="openDate"/><br/>
상영등급 :
<!-- 라디오 버튼은 name이 같아야 그 name이 같은 것들 중에서 단 하나만 선택할 수 있다. -->
<c:forEach items="${gradeList}" var="grade">
<input type="radio" class="grade" name="grade" value="${grade.gradeId}"/> ${grade.gradeTitle}
</c:forEach>
<br/>
감독 :
<select id="directors" name="directors" multiple="multiple">
<c:forEach items="${directorList}" var="director">
<option value="${director.directorId}">${director.directorName}</option>
</c:forEach>
</select>
<span id="directorsName"></span>
<br/>
출연진 :
<select id="actors" name="actors" multiple="multiple">
<c:forEach items="${actorList}" var="actor">
<option value="${actor.actorId}">${actor.actorName}</option>
</c:forEach>
</select>
<br/>
장르 :
<!-- check박스도 이름이 같아야 한다. -->
<c:forEach items="${genreList}" var="genre">
<input type="checkbox" class="genres" name="genres" value="${genre.genreId}"/> ${genre.genreTitle}
</c:forEach>
<br/>
<input type="button" id="addNewMovie" value="영화 등록!"/>
</form>
</body>
</html> |
cs |
<tip>
(1) == 과 === 는 다르다.
== : 데이터가 같은지 본다.
=== : 데이터의 타입까지 같은지 본다.
(2) 자바스크립트 정규표현식을 사용하여 더 자세하게 검사할 수 있다.
(3) jQuery는 이벤트가 종료될때마다 실행된다. 그럴 때 이벤트를 반드시 해소시켜주어야 한다. 그러려면 함수로 만들어주는 것이 좋다.
'프로그래밍 > ㄴ실습' 카테고리의 다른 글
| [게시판 만들기] 2. 로그인 화면을 위한 jsp 만들기 (0) | 2016.03.03 |
|---|---|
| [게시판 만들기] 1. ToadForOracle(토드)를 이용해서 테이블 생성하기 (0) | 2016.03.03 |
| [영화정보 웹 만들기] 5. jQuery 문법, jquery를 이용하여 Actor 테이블에 데이터 삽입하기 (0) | 2016.03.01 |
| [영화정보 웹 만들기] 4. jQuery를 STS에 설치하기 (0) | 2016.03.01 |
| [영화정보 웹 만들기] 3. XPath을 이용해서 쿼리를 쉽게 관리하는 방법 (0) | 2016.02.25 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 뒤로가기 버튼
- 예외처리
- aop
- 제이쿼리
- 포스팅하기
- Relative Layout
- er다이어그램
- 메뉴바에 버튼 생성하기
- spring
- 쿼리
- query
- 클래스
- ERD
- 뉴스피드 가져오기
- MVC
- mongo db
- 배열
- mybatis
- 메소드
- Linear Layout
- jQuery
- 글쓰기 버튼
- activity
- 게시판 만들기
- facebook 연동
- sql
- 자바프로그래밍
- Erwin
- JSP
- intent
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
글 보관함