Oracle APEX 기초 워크샵 - 실습 가이드 문서: Part 2 (2/2)

2021.09.06
한국오라클
김은희 상무
APEX 입문 워크샵(Beginner Workshop)
- 실습가이드: Part 2

Copyright © 2020, Oracle and/or its affiliates | Confidential: Internal/Restricted/Highly Restricted
3
[참고] Expenses 테이블 설명

4
[참고] 법인카드 영수증 등록 Form – PK 자동 설정
PK 설정 방법
1. PK 직접 입력 : 직원정보 관리 Form
2. PK 자동 설정 : 법인카드 영수증 등록
Form
(1) 법인카드 영수증 등록 Form에서
Insert문 수행 전에 Trigger 작동
(2) Trigger는 Sequence 객체를
시작시켜 일련 번호를 생성하는
프로세스 수행
(3) 생성된 일련번호가 PK로 자동 입력
** Sequence, Trigger 생성 필요 **

5
M03.1-1. Interactive Report with Form 생성과 데이터 소스 연결(1/11)
1

6
2

7
3

8
4

9
5

10
6

11
7

12
8

13

14
9

15

16
M03.1-2. PK 자동 설정 : Sequence 생성 (1/5)
1

17
2

18
3

19
4

20

21
M03.1-2. PK 자동 설정 : Trigger 생성 (1/3)
1

22
트리거 생성
§ APEX Workspace > SQL workshop >
SQL command
§ Expense 테이블의 Insert 문 수행
전에 작동하는 트리거
!"#$%#&'"&"#()$!#&%"*++#"&,-./-01-1234,&
5-678-&
*9:#"%&'9&,-./-01-1,&
;'"&#$!<&"'=&
>#+*9&
*;&?0-@A,-./-01-2BC,&*:&9D))&%<#9&
:#)#!%&,-./-01-21-E,A9#F%G$)&*9%'&
?0-@A,-./-01-2BC,&;"'H&:I:AJD$)K&
#9J&*;K&
#9JK
3
SQL command 입력
2

23
4

24
M03.1-2. PK 자동 설정 : 확인 (1/6)
1
2

25
M03.1-2. PK 자동 설정 : 확인 (2/6)
3

26
M03.1-2. PK 자동 설정 : 확인 (3/6)
4

27
M03.1-2. PK 자동 설정 : 확인 (4/6)
5

28
M03.1-2. PK 자동 설정 : 확인 (5/6)
Form에 입력하면
Expense_ID (PK)가 자동
생성되고
Form 생성 가능

29
M03.1-2. PK 자동 설정 : 확인 (6/6)
Form에 입력하면
Expense_ID (PK)가 자동
생성되고 à Form 생성
à Report 생성 성공!

30
M03.1-3. 새로운 APEX 사용자 등록 (1/4)
1

31
2

32
ID MAIL PW Type
flower demo@gmail.com Welcome123456! Admin
chuchu demo@gmail.com Welcome123456! Admin
새로운 사용자(admin)
2명을 생성함.
M02. 직원 정보 관리
report에서 ‘ID: chuchu’
로 정보 입력 진행
3

33

34
M03.1-4. 대체 문자열 설정 (1/2)
로그인한 사용자가 p32
Form을 create클릭 후
생성할 때,
Employee_ID 칸에
default로 사용자 대체
문자열이 소문자가
들어가도록 설정
lower(:APP_USER)
1
2
modal dialog는 32p :
save à p31 : run 실행!

35
M03.1-4. 대체 문자열 설정 (2/2)
3
default로 사용자의
대체 문자열(소문자) 입력됨
lower(:APP_USER)

36
M03.1-5. 직원 정보 관리 Form 수정 - Hidden

37
M03.1-6. LOV 컴포넌트 생성, List of Values (1/18)
1

38
2

39
3

40
§ EMPLOYEES
§ Expense Types
§ Card Types
§ Receipt Status
!"#"$%&"'(#)*""+,- ./&&"'(+01'" 22&3&43&22&%5%"1'+01'"223/&322%5%"1'+67##+01'" 22383&-&
6.)'&"'(#)*""!&"/&%"1'!&%&
9:"."&"5%"1'+,- ;&%5%"1'+,-
!"#"$%&%*("+,- 1!&./&%*("+01'" 1!&-&6.)'&<=><?@<+AB><@&
).-".&C*&D
Display Return
개인 카드 Pc
법인 카드 Cc
Display Return
분실 M
보관 K

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55
M03.1-7. Expense 영수증 관리 Form 수정 – LOV 적용 (1/6)
Page Item Identification Type List of Values
P32_Employee_ID Select List Shared component / Employees
P32_Type_ID Select List Shared component / Expense Types
P32_Card_Type Radio Group Shared component / Card types
P32_Receipt_status Radio Group Shared component / Receipt status
§ Page Item : List of Values 설정

56
1

57
2

58
3

59
4

60
중간 결과물 – LOV 적용 (6/6)
§ Employee_ID § Type_ID § Card_Type, Receipt_status
Select list
Radio group

61
M03.1-7. Expense 영수증 관리 Form 수정 - 한글화
Page Item Label
P32_Employee_ID 사용자
P32_Type_ID 비용 유형
P32_Payment_Amount 결재금액
P32_Title 제목
P32_Description 설명
P32_Receipt_status 영수증 상태
P32_card_type 카드 유형
P32_receipt_pic 영수증 등록
P32_receipt_pic2 영수증 사진
P32_use_date 사용일

62
M03.1-7. Expense 영수증 관리 Form 수정 – Display Image
Receipt_PIC을
duplicate함

63
M03.1-7. Expense 영수증 관리 Form 수정 – Text field
Text Areaà Text Field로 변경
Text Areaà Rich text editor 로
변경(HTML 입력 가능)

64
중간 결과물

65
M03.1-7. Expense 영수증 관리 Form 수정 – Layout 변경(1/3)

66

67
Column 12칸 중에서 9칸 부터 시작해서
4칸(span)을 차지하도록 변경

68
M03.1-7. Expense 영수증 관리 Form 수정 – Read only
사용자 : employee_ID (dev01) 자동입력 된 후
변경되지 않도록 Read only= always 설정

69
로그인 - flower

70
M03.1-7. Expense 영수증 관리 Form 수정 – CSS 등록
Form 입력하면 사진
크기가 너무 큼

71
M03.1-7. Expense 영수증 관리 Form 수정 – CSS 등록
img {
width: 200px;
height: 300px;
}
1

72
M03.1-7. Expense 영수증 관리 Form 수정 – Format mask
1

74
M03.2-1. Expense 영수증 관리 Form 입력 (1/5)
Flower 로그인 후
Form 5개 입력

75

76
chuchu 로그인 후
Form 5개 입력

77
chuchu 로그인 후
Form 5개 입력

78

79
M03.2-2. Expense Report 수정 -로그인 User만 조회 가능 (1/3)
SQL 쿼리 수정:
조회조건 추가
1

80
리포트 조회 조건
§ 현재 로그인한 사용자만 자신의
영수증 정보를 볼 수 있도록
=<#"#&#H()'I##2*J L&)'=#"M?N//2O1-8P

81

82
M03.2-3. Expense Report 수정 - 불필요 column 삭제

83
M03.2-3. Expense Report 수정 - 불필요 column 삭제

84
M03.2-3. Expense Report 수정 - 컬럼 설정
Column 이름 변경 헤더 이름 변경 설정 변경 설정 기능 위치
P31_Employee_ID • 사용자 • LOV Look up
• ID Type : Plain text based on LOV
• List of Values : Employee
P31_Type_ID • 비용 유형 • LOV Look up
• List of Values : Expense type
P31_Payment_amount • 결재 금액 • 포맷 지정
P31_Title • 제목
P31_Description • 설명 • Html 출력되지 않도록 • ID type : Percent Graph
P31_Receipt_status • 영수증 상태 • LOV Look up
• List of Values : Receipt status
P31_Card_type • 카드 유형 • LOV Look up
• List of Values : card type
P31_receipt_pic • 영수증 사진 • Hidden 처리
P31_use_date • 사용일 • 포맷 설정 YYYY-MM-DD
P31_cre_date • Hidden 처리

85
M03.2-3. Expense Report 수정 - 컬럼 한글화

86
M03.2-3. Expense Report 수정 - 컬럼 포맷

87
M03.2-3. Expense Report 수정 - LOV Value 대체(look up) (1/4)

88

89

90

91
M03.2-3. Expense Report 수정 – HTML 지원 설정

92
중간 결과물

93
M03.2-3. Expense Report 수정 – Hero (1/5)
1

94
2
3
위치 옮김

95
4
5

96

97
Source > Text 에서
<p> </p> 뒤에
(&APP_USER.) 을 추가하면 (Chuchu)
출력됨

98
M03.2-4. Expense Report - 검색 기간 Default 설정 (1/13)

99

100

101

102
Search에서 우클릭 후
Page item 2 개,
Button 1 개
생성함

103
1
2

104
3
4

105
5

106
6
7
SQL쿼리 입력 - 뒷장 참고

107
Default 설정
§ P31_Search_From
§ 영수증 날짜 중에서 가장 과거의
날짜가 기본으로 보이도록 설정
!"#"$%&'()*+!",-.%"/&012'&"34")!"!&
56"1"&"'4#27"",(-&8&#25"1*9:;;,<=>?/
Default 설정
§ P31_Search_To
§ 영수증 날짜 중에서 가장 최근
날짜가 기본으로 보이도록 설정
select max(use_date) from expenses
where employee_id = lower(:APP_USER)

108
8

109
9
10

110
11

111
M03.2-5. Expense Report 수정 – 검색 한글화, 날짜 포맷
12

112
M03.2-5. Expense Report 수정 – 검색 한글화, 날짜 포맷
13

113
중간 결과 물

114
M03.2-6. Expense Report 검색 (1/3)
14

115
검색 where 절 설정
§ Default 날짜 중에서 검색 하도록
56"1"&>@;ABC>>,DE&8&#25"1*9:;;,<=>?/&
.)-&<=>,E:F>&G8&FB,E:F>*9;HI,=>:?JK,L?B@M&NCCCCO@@OEEN/&
.)-&<=>,E:F>&P8&FB,E:F>*9;HI,=>:?JK,FBM&NCCCCO@@OEEN/
Where 교체 !!
(추가 아님)
15

116
16

117
M03.2-7. Expense Report - Dynamic Search (1/11)
1

118
1
2
조건 확인

119
3
4
5

120
6
7
조건 확인

121
8
9
10

122
11
12

123
각각 클릭
13

124
14

125
15

126
16

127
17
메시지가 과도할 경우
Advanced > ignore !

129
[참고] Expense_Reports 테이블 설명

130
M03.3-1. Master Detail 생성과 데이터 소스 연결(1/6)

131

132

133

134

135

136
Master Detail 페이지 생성

137
1
2

138
3

139

140

141

142
M03.3-3. PK 자동 설정 : Process 등록 (1/8)

143
PK가 없으므로 Form 생성되지
않음
Sequence에서 나오는 값을
PK로 insert하는 프로세스
필요

144
1
2

145
3
위치를 맨 처음으로
변경

146
4
Code 입력

147
Process 등록: set pk with seq
declare
V_REPORT_ID number(9);
begin
select EXPENSE_REPORT_SEQ.nextval into
V_REPORT_ID from dual;
:P42_EXPENSE_REPORT_ID := V_REPORT_ID;
end;
5

148
PK가 있으므로 Form 생성
가능, Master detail 생성 가능

149
Form에서 Create 버튼을
클릭할 경우에만 PK 설정되는
프로세스가 실행하도록 설정
6

150
M03.3-4. Form 수정 – Hidden

151
M03.3-4. Form 수정 – LOV Value 대체 (look up)

152
M03.3-4. Form 수정 – 날짜 자동 설정

153
중간 결과물

154
M03.3-4. Form 수정 – 한글화

155

156

158
[참고] Expense_Reports, Expense_Report_Items 테이블 설명

159
작업 대상 – P43. Expense Report Items
Expense ID 부분에
대한 설정
P43

160
M03.4-1. 리포트 아이템 수정 – Hidden

161
M03.4-1. 리포트 아이템 수정 – LOV, SQL 쿼리 적용 (1/4)

162

163
SQL Query로 List of value 만들기
select title||','||payment_amount||'('||use_date||')', expense_id
from expenses
where employee_id=lower(:APP_USER) and
expense_id not in (
select i.expense_id
from expense_reports r, expense_report_items i
where r.EXPENSE_REPORT_ID = i.report_id and r.employee_id =
lower(:APP_USER) )
order by use_date

164
(p41)
+ 기호 수정

165
M03.4-1. 리포트 아이템 수정 – 버튼 수정 (1/3)
1
2

166
M03.4-1. 리포트 아이템 수정 – 버튼 수정 (2/3)
3

167
M03.4-1. 리포트 아이템 수정 – 버튼 수정 (3/3)

168
M03.4-1. 리포트 아이템 수정 – 한글화
3

170
[참고] Expense_Report_Items의 View 설명
기존 Table 대신 View를 참조
à View를 source로 등록 필요

171
[참고] Expense_Report_Items의 View 설명

172
[참고] Expense_report_items_V

173
[참고] Expense_report_items_V

174
M03.5-1. 영수증 목록 개선 – Source : View로 변경 (1/3)
1
2
Table à View로
바꿔도 where절
그대로

175
3

176
REPORT_ID
= :P41_EXPENSE_REPORT_ID
expense_id
4
5

177
M03.5-2. 영수증 Reports items 추가
영수증 추가 누르고
4개 create 합니다

178
M03.5-2. 영수증 Reports items 추가
현재 1개씩 삭제 대신
일괄 삭제 버튼으로
수정

179
M03.5-3. 영수증 Reports items – Select All UI 생성 (1/10)
1
2

180
SQL Query 변경
select
REPORT_ID,
EXPENSE_ID,
EMPLOYEE_ID,
TYPE_ID,
PAYMENT_AMOUNT,
TITLE,
DESCRIPTION,
USE_DATE,
CRE_DATE
from EXPENSE_REPORT_ITEMS_V
where REPORT_ID = :P41_EXPENSE_REPORT_ID
order by expense_id
3

181

182
SQL Query 컬럼 추가
apex_item.checkbox2(1, EXPENSE_ID) selected,
‘Expense_ID의 컬럼을 가져와서
check box HTML로 변환하라’는 함수
4

183
새로운 checkbox HTML
태그가 등록됨

184
맨 위로 위치 옮김
1

185
2

186
새로운 HTML 태그가
UI로 변경, 정렬 필요

187
3

188
Heading
<input type="checkbox" id="selectunselectall">
Selected 칼럼의 헤딩에
checkbox를 만들어라!
ID는
selectunselectall
1
2

189
중간 결과물
Selected 칼럼의
헤딩에 checkbox
생성됨!

190
[참고] 일괄선택 및 일괄해지 기능
상태가 변경되면,
아래 checkbox가 모두 선택 또는
해지되도록 설정
Change event 발생 à
added expenses위치에서 Javascript 실행
(added expenses 생성필요)

191
M03.5-4. 영수증 Reports items – 일괄선택해지 기능 (1/6)
Advanced > Static ID
: added_expenses 설정
added expenses에서
이벤트/자바스크립트
작동되도록
1
2

192
Change 이벤트를 우클릭
dynamic action으로 등록
3
4

193
change selectunselectall
JQuery Selector
#selectunselectall
5
6

194
Dynamic
#added_expenses
7

195
Execute Javascript Code
8
9

196
Execute JavaScript
if ($('#added_expenses #selectunselectall' ).is(':checked') ) {
$('#added_expenses
input[type=checkbox][name=f01]').prop('checked',true);
} else {
$('#added_expenses
input[type=checkbox][name=f01]').prop('checked',false);
}
10

197
M03.5-5. 영수증 Reports items – 삭제 버튼 (1/8)
1

198
여기로 이동
2

199

200
3

201
4
5

202
6

203
영수증 일괄 삭제
FOR i in 1..APEX_APPLICATION.G_F01.COUNT LOOP
delete from EXPENSE_REPORT_ITEMS
where report_id = :P41_EXPENSE_REPORT_ID and
expense_id = APEX_APPLICATION.G_F01(i);
END LOOP;
7

204
8

205
중간 결과물

206
M03.5-6. 영수증 Reports items – LOV 참조키 치환 (1/2)

207
M03.5-6. 영수증 Reports items – LOV 참조키 치환 (2/2)
LOV 참조 키 치환
select title||'('||payment_amount||')', expense_id from expenses

208
M03.5-6. 영수증 Reports items – LOV Value 대체 (look up)

209
M03.5-6. 영수증 Reports items – LOV Value 대체 (look up)

210
M03.5-6. 영수증 Reports items – 금액 포맷

211
M03.5-6. 영수증 Reports items – HTML 지원 설정

212
M03.5-6. 영수증 Reports items – 한글화

213

214

215

216

217

218

219
중간 결과물

220

221
M03.6-1. Master 업데이트
이 부분이 Master table 보이는 곳

222
이 부분이 Master
이 부분이 Master table보이는 곳

223
M03.6-1. Master 업데이트
좌 4개 컬럼은
서버 side 조건이 걸려있으므로
data=null일 경우에는 데이터를
볼 수 없었음

224
M03.6-1. Master 업데이트 – 한글화

225

226

227

228
M03.6-2. Master 업데이트 – Stored Procedure 생성 (1/4)

229
create or replace PROCEDURE update_expense_report( p_report_id IN VARCHAR2 )
IS
v_cc_num NUMBER(3);
v_cc_amount NUMBER(9);
v_pc_num NUMBER(3);
v_pc_amount NUMBER(9);
BEGIN
select count(e.expense_id), nvl(sum(e.PAYMENT_AMOUNT),0)
into v_cc_num, v_cc_amount
from expenses e, expense_report_items i
where e.EXPENSE_ID = i.expense_id
and i.report_id = p_report_id
and card_type = 'cc';
select count(e.expense_id), nvl(sum(e.PAYMENT_AMOUNT),0)
into v_pc_num, v_pc_amount
from expenses e, expense_report_items i
where e.EXPENSE_ID = i.expense_id
and i.report_id = p_report_id
and card_type = 'pc';
UPDATE EXPENSE_REPORTS
SET
COMPANY_CARD_RECEIPT_NUM = v_cc_num,
PRIVATE_CARD_RECEIEPT_NUM = v_pc_num,
COMPANY_CARD_AMOUNT = v_cc_amount,
PRIVATE_CARD_AMOUNT = v_pc_amount
WHERE EXPENSE_REPORT_ID = p_report_id;
END;

230
Stored procedure 복사&붙이기
영수증이 등록(p43), 삭제(p41)될 때 그 정보가
master (report)에 업데이트 되도록!

231

232
M03.6-3. Master 업데이트 – Process 추가 (1/8)
1

233
10번 확인
2
3

234
4

235
P41 – Process 추가
§ Name : update report
§ When : delete
begin
update_expense_report( p_report_id => :P41_EXPENSE_REPORT_ID);
end;
5

236
6

237
2개 프로세스 사이로 위치 변경
7

238
8

239
P43 – Process 추가
§ Name : update report
begin
update_expense_report( p_report_id => :P43_REPORT_ID);
end;
9

240
중간 결과물
1개 Delete à 아래 1개 record
삭제
4개 record 생성되어 보임
1
2

241
중간 결과물
1개 추가 à 아래 1개 record
추가됨
그러나, 위는 변화하지 않음
(dynamic action 수정 필요!)
3
4

242
M03.6-4. Master 업데이트 – Dynamic Action (1/5)
순서 변경

243
1

244
2
3
Expense Reports

245
4
True 액션 생성

246
5
6
Expense Report Items

247
결과물
1개 추가 à 아래 1개 record
추가됨
5개로 변경됨!
(dynamic action 실행)
1
2

248

249
M04.1-1. Login 페이지 변경

250
M04.1-1. Login 페이지 변경
기본 로그인 페이지

251
M04.1-1. Login 페이지 변경 – 이미지 다운 로드

252
M04.1-2. Login 페이지 변경 – Static Application Files (1/5)
1

253
2

254
3

255
4

256
5

257
M04.1-3. Login 페이지 변경 – 페이지 레이아웃 (1/4)
1

258
2
3

259
4

260

261
M04.1-4. Login 페이지 변경 – CSS 변경 (1/2)
5
6

262
M04.1-4. Login 페이지 변경 – CSS 변경 (2/2)
bg.png로 변경
CSS Inline
body{
background-image: url('#APP_IMAGES#base.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Span.t-Login-logo{
background-image : url('#APP_IMAGES#oracle-apex.png');
background-Size :cover;
width :150px;
height :120px;
}

263
결과물

264

265
M04.2-1. APEX 커스텀 인증 – 테이블 패스워드 설정 (1/5)
1

266
Employee_ID, EMP_PW로 인증하는
방식으로 만듬
2

267
3

268
EMP_PW에 WELCOME123456! 로
설정
update employees set EMP_PW = 'WELCOME123456!';
4

269
EMP_PW에 WELCOME123456! 로
설정 확인!
5

270
M04.2-2. APEX 커스텀 인증 – 오라클 Function 생성 (1/3)
Table로 인증하는 방식을 만들기 위해
오라클 Function 생성
Table에 employee_Id, EMP_PW 있는지
확인 후 있으면 success (인증성공)
1
2

271
오라클 Function – APEX 인증 : SQL Workshop > SQL Commands
create or replace function authenticate_user (
p_username in varchar2,
p_password in varchar2
) return boolean
as
v_pw_check varchar2(1);
begin
APEX_UTIL.SET_SESSION_STATE('LOGIN_MESSAGE', '시작');
select 'x'
into v_pw_check
from employees
where upper(employee_id) = upper(p_username) and upper(emp_pw) = upper(p_password);
apex_util.set_authentication_result(0);
APEX_UTIL.SET_SESSION_STATE('LOGIN_MESSAGE', 'Success');
return true;
exception when NO_DATA_FOUND then
apex_util.set_authentication_result(4);
APEX_UTIL.SET_SESSION_STATE('LOGIN_MESSAGE', '오류!! 아이디와 비밀번호가 불일치합니다.');
return false;
end authenticate_user;

272
Login message라는 변수 생성
필요!
3

273
1
M04.2-3. APEX 커스텀 인증 – Application item 등록 (1/5)

274
2
세션 객체에 변수를 등록하는
과정

275
3

276
4
5

277

278
M04.2-4. APEX 커스텀 인증 – Authentication Scheme 생성 (1/6)
1

279
2

280
3

281
4

282
5
6

283

284
M04.2-5. APEX 커스텀 인증 – Login 확인 (1/3)
1

285
2

286
Apex_authentication.login이라는
stored procedure 호출하는데
Function을 생성했으므로
authenticate_user 라는
function에서 인증정보를 가져와서
인증

287
결과물
Flower, WELCOME123456!
입력하면 커스텀 인증으로 로그인 됨

288
오타 수정
http://taewan.kim/apex-
workshop/01.beginner_ws/30.expense/20-
expense_mngt_list/
P31
workshop/01.beginner_ws/20.
m01/10-app-tabes/
레지던
트

289
오타 수정
expense_mngt_list/
오타 수정
# 추가
expense_report_receipts_list/
workshop/01.beginner_ws/40.authentification/20-
authentication/
패스워드

Oracle APEX 기초 워크샵 - 실습 가이드 문서: Part 2 (2/2)

More Related Content

What's hot (20)

More from Taewan Kim (9)

Recently uploaded (20)

Oracle APEX 기초 워크샵 - 실습 가이드 문서: Part 2 (2/2)