index.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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
|
<%@ 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">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>강의평가 웹 사이트</title>
<!-- 부트스트랩 CSS 추가 -->
<!-- 커스텀 CSS 추가 -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown" data-toggle="dropdown">
회원관리
</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" href="#">로그인</a>
<a class="dropdown-item" href="#">회원가입</a>
<a class="dropdown-item" href="#">로그아웃</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="내용을 입력하세요" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">검색</button>
</form>
</div>
</nav>
<section class="container"> <!-- 검색창 -->
<form method="get" action="./index.jsp" class="form-inline mt-3"> <!-- get 방식으로 어떠한 내용을 서버로 전달 'mt-3'는 위쪽으로 3만큼 마진 -->
<select name ="lectureDivide" class="form-control mx=1 mt-2"> <!-- select를 이용해 강의 구분을 서버로 전달 -->
<option value="전체">전체</option> <!-- option으로 서버로 내용 전달 -->
<option value="전공">전공</option>
<option value="교양">교양</option>
<option value="기타">기타</option>
</select>
<input type="text" name="search" class="form-control mx-1 mt-2" placeholder="Search"> <!-- input을 이용해 사용자가 실질적으로 입력하도록 -->
<button type="submit" class="btn btn-primary mx-1 mt-2">검색</button>
<a class="btn btn-primary mx-1 mt-2" data-toggle="modal" href="#registerModal">등록하기</a> <!-- modal은 웹페이지 위에 나오는 것 -->
<a class="btn btn-danger mx-1 mt-2" data-toggle="modal" href="#reportModal">신고</a>
</form>
<div class="card bg-light mt-3">
<div class="card-header bg-light">
<div class="row">
<div class="col-8 text-left">컴퓨터개론 <small>한승표</small></div>
<div class="col-4 text-right">
종합 <span style="color: red;">A</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">
좋은 강의에요. <small>(2018년 가을학기)</small>
</h5>
<p class="card-text">강의가 몰입도가 있고, 교수님도 열정적이고 재치가 있습니다.</p>
<div class="row">
<div class="col-9 text-left">
성적<span style="color: red;">A</span>
널널<span style="color: red;">A</span>
강의<span style="color: red;">B</span>
<span style="color: green;">(추천: 15)</span>
</div>
<div class="col-3 text-right">
</div>
</div>
</div>
<div class="card bg-light mt-3">
<div class="card-header bg-light">
<div class="row">
<div class="col-8 text-left">축구학 <small>손흥민</small></div>
<div class="col-4 text-right">
종합 <span style="color: red;">A</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">
유익하고 재밌습니다. <small>(2018년 가을학기)</small>
</h5>
<p class="card-text">다양한 실전 기술을 배울 수 있습니다</p>
<div class="row">
<div class="col-9 text-left">
성적<span style="color: red;">A</span>
널널<span style="color: red;">A</span>
강의<span style="color: red;">B</span>
<span style="color: green;">(추천: 151)</span>
</div>
<div class="col-3 text-right">
</div>
</div>
</div>
<div class="card bg-light mt-3">
<div class="card-header bg-light">
<div class="row">
<div class="col-8 text-left">정치개론 <small>홍길동</small></div>
<div class="col-4 text-right">
종합 <span style="color: red;">c</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">
유익한 강의에요. <small>(2018년 가을학기)</small>
</h5>
<p class="card-text">정치에 관심이 생겼습니다.</p>
<div class="row">
<div class="col-9 text-left">
성적<span style="color: red;">A</span>
널널<span style="color: red;">A</span>
강의<span style="color: red;">B</span>
<span style="color: green;">(추천: 7)</span>
</div>
<div class="col-3 text-right">
</div>
</div>
</div>
</section>
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"> <!-- modal 양식 modal fade를 사용하는 게 일반적 -->
<div class="modal-dialog"> <!-- modal-dialog를 이용해 모달창임을 알려주는 것 -->
<div class="modal-content">
<div class="modal-header"> <!-- 모달창 제목 -->
<h5 class="modal-title" id="modal">평가등록</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <!-- 닫기 버튼 -->
<span aria-hidden="true">×</span> <!-- 닫기 아이콘 -->
</button>
</div>
<div class="modal-body">
<div class="form-row"> <!-- 사용자가 입력할 수 있는 내용을 한줄씩 들어가도록 만든다. row는 하나의 행을 여러개의 열로 나눌 때 사용 -->
<div class="form-group col-sm-6">
<label>강의명</label>
<input type="text" name="LectureName" class="form-control" maxlength="20"> <!-- 강의명 최대 20자 -->
</div>
<div class="form-group col-sm-6"> <!-- 일반적으로 한개의 행은 12열이 배당된다. 여기선 위 아래로 반반씩 나누었다 -->
<label>교수명</label>
<input type="text" name="professorName" class="form-control" maxlength="20"> <!-- 강의명 최대 20자 -->
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label>수강연도</label>
<select name="lectureYear" class="form-control">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018" selected>2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</div>
<div class="form-group col-sm-4">
<label>수강학기</label>
<select name="semesterDivide" class="form-control">
<option value="1학기" selected>1학기</option>
<option value="여름학기">여름학기</option>
<option value="2학기">2학기</option>
<option value="겨울학기">겨울학기</option>
</select>
</div>
<div class="form-group col-sm-4">
<label>강의구분</label>
<select name="lectureDivide" class="form-control">
<option value="전공"selected>전공</option>
<option value="교양">교양</option>
<option value="기타">기타</option>
</select>
</div>
</div>
<div class="form-group">
<label>제목</label>
<input type="text" name="evaluationTime" class="form-control" maxlength="30">
</div>
<div class="form-group">
<label>내용</label>
<textarea name="evaluationContent" class="form-control" maxlength="2048" style="height: 180px;"></textarea>
</div>
<div class="form-row"><!-- 하나의 행을 나눌 때 사용 -->
<div class="form-group col-sm-3">
<label>종합</label>
<select name="totalScore" class="form-control">
<option value="A" selected>A</option>
<option value="B" >B</option>
<option value="C" >C</option>
<option value="D" >D</option>
<option value="E" >E</option>
<option value="F" >F</option>
</select>
</div>
<div class="form-group col-sm-3">
<label>강의</label>
<select name="letureScore" class="form-control">
<option value="A" selected>A</option>
<option value="B" >B</option>
<option value="C" >C</option>
<option value="D" >D</option>
<option value="E" >E</option>
<option value="F" >F</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="submit" class="btn btn-primary">등록하기</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"> <!-- modal 양식 modal fade를 사용하는 게 일반적 -->
<div class="modal-dialog"> <!-- modal-dialog를 이용해 모달창임을 알려주는 것 -->
<div class="modal-content">
<div class="modal-header"> <!-- 모달창 제목 -->
<h5 class="modal-title" id="modal">신고하기</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <!-- 닫기 버튼 -->
<span aria-hidden="true">×</span> <!-- 닫기 아이콘 -->
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>신고 제목</label>
<input type="text" name="reportTitle" class="form-control" maxlength="30">
</div>
<div class="form-group">
<label>신고 내용</label>
<textarea name="reportContent" class="form-control" maxlength="2048" style="height: 180px;"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="submit" class="btn btn-danger">신고하기</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer class="bg-dark mt-4 p-5 text-center" style="color: #FFFFFF;">
Copyright © 2020 한승표 ALL RIGHT Reserved.
</footer>
<!-- 제이쿼리 자바스크립트 추가 -->
<!-- 파퍼 자바스크립트 추가 -->
<!-- 부트스트랩 자바스크립트 추가 -->
</body>
</html>
|
다시한번 정리
클래스, 객체, 인스턴스 개념 및 차이
Class :
- 객체를 위한 청사진 혹은 틀
- 연관되어 있는 변수와 메서드의 집합.
Object :
- 소프트웨어 세계에 구현할 대상
- 클래스에 선언된 모양 그대로 생성된 실체
특징
- 클래스의 인스턴스(instance)라고도 부른다.
- 객체는 모든 인스턴스를 대표하는 포괄적인 의미
- oop의 관점에서 클래스의 타입으로 선언되었을 때 '객체'라고 부른다.
Instance :
- 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체
- 객체를 실체화 하면 그것을 '인스턴스'라고 부른다
- 실체화된 인스턴스는 메모리에 할당된다.
특징
- 인스턴스는 객체에 포함된다.
- oop의 관점에서 객체가 메모리에 할당되어 실제 사용될 때 '인스턴스'라고 부른다.
- 추상적인 개념과 구체적인 객체 사이의 관계에 초점을 맞출 경우에 사용한다.
- '~의 인스턴스'의 형태로 사용된다.
- 객체는 클래스의 인스턴스다.
- 객체 간의 링크는 클래스 간의 연관 관계의 인스턴스다.
- 실행 프로세스는 프로그램의 인스턴스다.
- 인스턴스라는 용어는 클래스와 객체 사의 관계로 한정지을 필요는 없다.
- 인스턴스는 어떤 원본(추상적인 개념)으로부터 '생성된 복제본'을 의미한다.
예시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* 클래스 */
public class Animal {
...
}
/* 객체와 인스턴스 */
public class Main {
public static void main(String[] args) {
Animal cat, dog; // '객체'
// 인스턴스화
cat = new Animal(); // cat은 Animal 클래스의 '인스턴스'(객체를 메모리에 할당)
dog = new Animal(); // dog은 Animal 클래스의 '인스턴스'(객체를 메모리에 할당)
}
}
|
cs |
클래스, 객체, 인스턴스의 차이
클래스(Class) VS 객체(Object)
- 클래스는 ‘설계도’, 객체는 ‘설계도로 구현한 모든 대상’을 의미한다.
객체(Object) VS 인스턴스(Instance)
- 클래스의 타입으로 선언되었을 때 객체라고 부르고, 그 객체가 메모리에 할당되어 실제 사용될 때 인스턴스라고 부른다.
- 객체는 현실 세계에 가깝고, 인스턴스는 소프트웨어 세계에 가깝다.
- 객체는 ‘실체’, 인스턴스는 ‘관계’에 초점을 맞춘다.
- 객체를 ‘클래스의 인스턴스’라고도 부른다.
- ‘방금 인스턴스화하여 레퍼런스를 할당한’ 객체를 인스턴스라고 말하지만, 이는 원본(추상적인 개념)으로부터 생성되었다는 것에 의미를 부여하는 것일 뿐 엄격하게 객체와 인스턴스를 나누긴 어렵다.
참고
추상화 기법
분류(Classification)
객체 -> 클래스
실재하는 객체들을 공통적인 속성을 공유하는 범부 또는 추상적인 개념으로 묶는 것
인스턴스화(Instantiation)
클래스 -> 인스턴스
분류의 반대 개념. 범주나 개념으로부터 실재하는 객체를 만드는 과정
구체적으로 클래스 내의 객체에 대해 특정한 변형을 정의하고, 이름을 붙인 다음, 그것을 물리적인 어떤 장소에 위치시키는 등의 작업을 통해 인스턴스를 만드는 것을 말한다.
‘예시(Exemplification)’라고도 부른다.
Reference : https://gmlwjd9405.github.io/2018/09/17/class-object-instance.html
'JAVA > JSP' 카테고리의 다른 글
| JSP 강의평가 웹사이트 - 데이터베이스 구축 (0) | 2020.05.03 |
|---|---|
| JSP 강의평가 웹사이트 - 로그인 및 회원가입 화면 (0) | 2020.05.03 |
| JSP 강의평가 웹사이트 - 웹디자인 틀 잡기 (프레임워크) (0) | 2020.05.02 |
| JSP 강의평가 웹사이트 - JSP Mysql 연동 (0) | 2020.05.01 |
| JSP 강의평가 웹사이트 - 개발 환경 구축 (0) | 2020.04.29 |