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

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

Copyright © 2020, Oracle and/or its affiliates | Confidential: Internal/Restricted/Highly Restricted
2
http://taewan.kim/apex-workshop/01.beginner_ws/
M01, M02 모듈 오픈
필수 항목입니다

3
- APT 인스턴스를 개별적으로 만들어 진행해 주십시요.
- APEX Workshop 실습 인스턴스 위치
- Region: Seoul
- Compartment: PROJECT >> apexws
- ATP 인스턴스 크기
- 1 OCPU / 1 TB
실습 화경 구성

4
- 해상도 높이기: 가능한 최고 해상도로 설정하고 시청하시기 바랍니다.
동영상 시청 팁

5
- 화면 키우기: Youtube 로고를 클릭하여 youtube 페이지로 이동 후 화면 키우기
동영상 시청 팁

6
질문 및 문의: Slack #kr_apex_users

7
- 금요일 10:00 : M03 모듈 오픈
- 월요일 10:00 : M04 모듈 오픈
- 수요일 10:00 ; APEX Zoom 세션
- 수요일 18:00 : 과제 제출
- 제출: 김태완, taewan.kim@oracle.com
- APEX Application 접속 정보
향후 일정

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

9

M01. 실습 환경 준비 : APEX 개발 환경 구성 ( https://bit.ly/37QmBIB )
ATP 인스턴스 생성
§ Region : Seoul
§ Compartment : PROJECT > APEXWS
§ Resource : 1 OCPU / 1 TB
§ Workload : Transaction Processing
APEX Workspace
§ Workspace Name : APEXWS
§ Password : Welcome123456!
§ Database user : APEXWS

11
M01-1. ATP 생성 (1/6)
1
Seoul 리전, Compartment : apexws 선택
2
3 DemoATP
4

12
M01-1. ATP 생성 (2/6)
5

13
M01-1. ATP 생성 (3/6)
6 Password 기억!!!
*** APEX 로그인 때 사용***
7

14
M01-1. ATP 생성 (4/6)
8
9

15
M01-1. ATP 생성 (5/6)

M01-1. ATP 생성 (6/6)
APEX로 가는 방법 2가지
1 2

M01-2. APEX Workspace 생성과 로그인 (1/5)
ADW 생성시 사용한
Password !!!
APEX 로그인 때 사용***

18

DB유저,
Workspace 이름 기억!!!

20
1
APEX 유저로 로그인하기
위해 클릭

2

22

M01-3. APEX Workspace의 사용자(User) 등록 (1/10)
v 인증 정보를 변경 하자!!
Database user 정보 사용
à APEX user 정보 사용 (by user 등록)

§ Database user 정보 사용시 보안적, 운영적 측면에서 문제
발생가능성 있음
§ 따라서, APEX사용자를 개발자, 일반 사용자로 분류하여
별도 등록하여 사용함
1
2

1

2

3

28
4

29
5
6

30
1

31
2
3
§ 개발자, 일반사용자의 차이 확인!

32

33

34
M02.1-1. 로그인
§ APEX 개발자로 로그인

35
M02.1-2. 앱 생성 (1/6)
1
2

36
M02.1-2. 앱 생성 (2/6)
3

37
M02.1-2. 앱 생성 (3/6)
4 5
9
§ 이번 실습에는 Feature 없이!

38
M02.1-2. 앱 생성 (4/6)
6
7
8

39
M02. 1-2. 앱 생성 (5/6)

40
M02.1-2. 앱 생성 (6/6)

41
M02.1-3. DB 테이블 생성
§ 리소스 파일 다운로드
https://taewanmerepo.github.io/2021/08/
apex/apexws_res.zip
§ DDL 파일 위치 : /sqls/base_table.sql
§ SQL Workshop > SQL Script를 통해 7개
테이블을 생성함

42
M02.1-3. DB 테이블 생성 : SQL Workshop > SQL Scripts (1/8)
1

43
2
3

44
4

45
5

46
6

47
7

48
§ SQL script내용상 error 9개 발생

49
§ 7개 테이블과 데이터가 Loading 완료
8
9

50
M02.1-4. LOV 컴포넌트 생성, List of Values (1/12)
1

51
2

52
3

53
4

54
§ JOB TYPES
업무 유형: 의사, 간호사
§ EMP TYPES
(1, ‘교수’)
(2, ‘펠로우’)
(3, ‘레시던트’)
(4, ‘인턴’)
(5, ‘본과실습생’)
(6, ‘간호사’)
(7, ‘주임간호사’)
(8, ‘수간호사’)
(9, ‘간호부장’)
§ Teams
(1, 소아과)
(2, 산부인과)
(3, 간담췌외과)
(4, 신경외과)
(5, 응급의학과)
§ Gender Types
남성: M
여성: F
!"#"$%&'()*+,&-!&./&'()*0-1"&-!&,&2.(1&345*6789:
select type_id as r, type_name as d from USER_TYPES
select team_full_name as d, team_id as r from TEAMS

55

56
§ Dynamic LOV : SQL 쿼리 사용

57

58

59
§ Static LOV : 테이블 사용

60

61

62

63
M02.2. 결과물 미리 보기 : Interactive Report with Form
Interactive Report
Form – modal dialog
Vita sidebar

64
[참고] Employees 테이블 설명

65
M02.2-1. Interactive Report with Form 생성과 데이터 소스 연결(1/8)
1

66
2

67
3

68
4

69

70

71
5

72
6

73
M02.2-1. Interactive Report with Form 생성 결과

74
§ Form으로 이동
§ Form에 입력된
데이터 없음

75
§ 한줄에 한 item씩
§ 모두 영문 출력
§ 한글화 및 item 위치 변경
필요함(우측 결과물처럼)

76
[참고] Page 지우기

77
[참고] Navigation Menu의 목록 지우기(1/2)
§ 페이지 삭제해도 ‘직원정보
관리’삭제되지 않으므로 삭제 필요함
§ 위치 : Shared component / List / List
details à 검색창: Desktop Navi Munu
에 있음

78
[참고] Navigation Menu의 목록 지우기(2/2)

79
M02.2-2. 직원 정보 관리 Form 수정
1

80
M02.2.Form 페이지 작업 내용
Page Item 명 설정 내용 설정 위치
EMP_PW
CRE_DATE
TEMP_PW
• Form에서 보이지 않도록 • Identification –Type: Hidden
EMP_ID § Form에서 보이도록 설정
• Identification –Type: Text field
모든 항목 이름 • 한글화 • Label – Label : 한글 이름 입력
JOB_ID
TYPE_ID
TEAM_ID
• LOV 설정
• Identification –Type: Select list à LOV : shared component – 해당 아이템 선택
GENDER • LOV 설정 • Identification –Type: Radio group à LOV : shared component – 해당 아이템 선택
TYPE_ID
• 업무 유형(JOB_ID: 의사)에 따
른 직급 리스트(TYPE_ID: 교수,
펠로우 등) 가 나오도록 의존성
설정
• (1) TYPE_ID의 LOV : shared component 를 SQL Query로 변경
• (2) 부모 item을 설정(Cascading LOV : parent item : JOB_ID 선정)
Form CSS • 사진 크기 줄이기 § Form Page의 CSS 항목에서 In line에 SQL 쿼리 입력

81
M02.2-2. 직원 정보 관리 Form 수정 – 아이템 Hidden
1
§ EMP_PW 아래로
이동, 3개 아이템
선택 후 Hidden
처리
2
3

82
M02.2-2. 직원 정보 관리 Form 수정 – PK=null 수정 (1/3)
§ 필수 항목 입력 후에 Error 발생
§ Employee_ID 가 현재 null 인 것을
수정해야 함

83
1
1

84
§ New( Emp_ID : (PK) 임의 데이터
및 필수 항목 입력시 form 생성
완료
§ Report의 1개 Row 생성 완료됨

85
M02.2-2. 직원 정보 관리 Form 수정 – Item 한글화 (1/2)
1
2

86
M02.2-2. 직원 정보 관리 Form 수정 – Item 한글화 (2/2)
1
2
3
§ Identification : File Browse
확인

87
M02.2-2. 직원 정보 관리 Form 수정 – Item 추가 및 type 변경 (1/2)
1

88
M02.2-2. 직원 정보 관리 Form 수정 – Item 추가 및 type 변경 (2/2)
3
§ Identification :
Display Image로 변경
2

89
M02.2-2. 직원 정보 관리 Form 수정 – Item 줄 바꾸기 수정
4
§ 위치를 윗줄로 올릴때 :
Layout - Start new Row
비활성화

90
M02.2. Form 중간 결과물

M02.2-2. 직원 정보 관리 Form 수정 – Select List 출력 (1/3)
1
2
3
§ Type: Number field
à Select List 로 변경
§ List of Values :
Shared component /
Job Types

1
2
3
§ List of Values :
Shared component /
emp Types

1
2
3
§ List of Values :
Shared component /
Teams

M02.2-2. 직원 정보 관리 Form 수정 – Radio Group 출력
1
2
§ Type: Number field
à Radio Group 으로
변경
3
§ List of Values :
Shared component /
Gender Types
4
§ 한줄에 남성, 여성 나오도록 :
Setting – Number of
columns: 2

setting
§ 업무유형(의사, 간호사) 에
따라 직급이 분류되어 나올
필요 있음

M02.2-2. 직원 정보 관리 Form 수정 – LOV 의존성 설정 (1/4)
1
!"#"$%&%'(")*+,"-&%'(")./&012,&3456)78954&:;"1"&<2=)./&
>&?9@@)ABC)DE&21/"1&='&%'(")./&
§ SQL Query로 지정

!"#"$%&%'(")*+,"-&%'(")./&012,&3456)78954&:;"1"&<2=)./&>&
?9@@)ABC)DE&21/"1&='&%'(")./&

§ Cascading
LOV에서 부모
아이템 설정

M02.2. Form 중간 결과물 - LOV 의존성 설정

§ 사진 크기 줄일 필요 있음

M02.2-2. 직원 정보 관리 Form 수정 – 사진 크기 줄임
1
2
.,F&G&:./%;?&@HH(IJ&;".F;%?&@HH(IJ&K

M02.2. Form 중간 결과물 – 사진 크기

M02.2-2. 직원 정보 관리 Form 페이지 전체 – Modal Dialog
2
§ Appearance /
Template
options에서 모달
다이아로그로 변경
1

M02.2. Form 중간 결과물 – Modal Dialog

직원 정보 관리 Report 작업 절차 (1/3)

110
M02.3.Form 페이지 작업 내용
Page Item 명 설정 내용 설정 위치
Employee_ID • 보이게 변경(text field 타입)
• PK의 변경되지 않도록
• Identification –Type: Text field
• Read Only – Type : Item is not null, Item : P22_EMPLOYEE_ID
Email • Validation • Create Validation (좌, Rendering)
• 세부Validation à (우) Validation – Type: Item matches Regular Expression, 정규식
입력(SQL) à(우) Error message
Emp_name • Validation • 상동
Cell-Phone • Validation • 상동
Job_ID • LOV • Identification - Type : Select List
à List of Values : Shared component, Job Types, Display extra value /Null 초록색
Type_ID • LOV
• 업무 유형에 종속되도록 설정
• Identification - Type : Select List
àList of Values : SQL Query, SQL 쿼리 입력, Display extra value/null 초록색
• Cascading List of Values : Parent item : P22_JOB_ID
Team_ID • LOV (Job ID) 상동
Gender • LOV Identification - Type : Radio Group
(Job ID) 상동, Display extra value/Null 비활성화(회색)
Birth_day • Validation • 상동
Emp_Pic • 복제 (Duplicate) • Emp_Pic : Identification - File Browse
• Emp_Pic 1: Identification - Display Image
Cre_date 숨김 처리 Identification : Type : Hidden
공통 • 한글화
• 줄 바꿈 (윗줄로 이동)
• YYYY-MM-DD
• Label – 한글로 입력
• Layout : Start new Row 비활성화
• Appearance : Format Mask

M02.3-1. 직원 정보 관리 Form 수정 - PK 변경 불가 (1/3)
1
2
§ Read-only : Type
– Item is not
NULL 선택

1

113
§ Flower 입력된 후,
read only
설정으로 이제
변경이 안됨

M02.3-1. 직원 정보 관리 Form 수정 – 날짜 포맷 (Format Mask)
1
3
2
§ Birth_day :
Appearanceà
Format mask 의
새창에서 포맷 선택

M02.3-1. 직원 정보 관리 Form 수정 – 생성일 Default 설정 (2/1)
1
2
3
§ Cre_date :
Default : Type:
expression,
PL/SQL : sysdate

M02.3-1. 직원 정보 관리 Form 수정 – 생성일 Default 설정 (2/2)
§ Cre_date : form을
작성하면(좌)
오늘날짜로
credate가 자동
default로 설정됨

M02.3-1. 직원 정보 관리 Form 수정 – Validation (1/8)
1
§ P22_EMAIL
우클릭하여
validation 생성

118
§ Validation의 ID를
mail validation으로
변경
2
3
§ Validation, Error
부분 설정

4
5
6
§ 정규 표현식
(Regular expression)
입력식- 뒷장 참조

121
§ Email
error message: Mail 포멧이 아닙니다. 메일 형식이어야 합니다.
(정규 표현식 – Regular expression)
^[A-Za-z]+[A-Za-z0-9.]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$
§ 핸드폰 번호
Error message: 핸드폰 전화번호 형식이 아닙니다. (예 010-1234-1234)
(정규 표현식 – Regular expression) ^d{3}-d{3,4}-d{4}$
§ 생년월일
Error message: 생일은 오늘 이전이어야 합니다.
(표현식 - Expression) sysdate > to_date(:P22_BIRTH_DAY, 'YYYY-MM-DD')

1
2

M02.3-2. 직원 정보 관리 Report 수정

M02.3-2. 직원 정보 관리 Report 수정 – PK 컬럼 출력
2
1
3
4
§ Hidden 컬럼 à
Plain Text로 변경

127
M02.3-2. 직원 정보 관리 Report 수정 – Hidden 컬럼화
§ CTRL 키 누르고
선택

128
M02.3-2. 직원 정보 관리 Report 수정 – 컬럼 한글화
Employee_ID : 직원 ID
Email : 이메일
Emp_name : 이름
Cell_Phone : 전화번호
Job_ID : 업무 유형
Type_ID : 직급
Team_ID : 팀명
Gender : 성별
Cre_date : 등록일

M02.3-2. 직원 정보 관리 Report 수정 – 날짜 포맷
1
2

130
M02.3-2. 직원 정보 관리 Report 수정 – LOV Value 대체(look up) (1/6)
Value(숫자, text)를 대체값(의사,
교수, 응급의학과, 남성 등)으로
변경

1
2
§ Plain text based
on List of values

3
§ LOV : Job_types
선택

1
2
§ Plain text based
on List of values
3

136
M02.3-2. 직원 정보 관리 Report 수정 – 리포트 꾸미기(Hero) (1/5)
§ 아이콘, 제목, 설명 추가

§ Content body
우클릭해서 create
region (리전 생성)
1
2
§ 새로운 Region
(NEW)를 올려서
report1 위에 놓음

1
2

1
§ Appearance >
template : Hero로
변경

2
§ Icon 선택 > 새로운
창에서 fa-users 아이콘
선택
3 4

M02.4-1. 직원 정보 검색 (1/14)
§ 검색 부분 추가

M02.4-1. 직원 정보 검색 (2/14)
content body 우클릭하여
Create region 클릭
1
2 New 자동 생성되면 위치
변경

M02.4-1. 직원 정보 검색 (3/14)
4
3
Identification의 Title :
Search로 변경

M02.4-1. 직원 정보 검색 (4/14)
Search 우클릭하여
Page item 2개 (검색부분)
Button 1개 (검색버튼) 생성
5

M02.4-1. 직원 정보 검색 (5/14)
6
P21_SEARCH_TEAMS
정확하게!!
*** 뒤에 SQL문에 쓰임

147
M02.4-1. 직원 정보 검색 (6/14)
7
P21_SEARCH_GENDERS
정확하게!!
*** 뒤에 SQL문에 쓰임

M02.4-1. 직원 정보 검색 (7/14)
8

M02.4-1. 직원 정보 검색 (8/14)
Search 를 없애고
버튼을 파란색으로 변경

M02.4-1. 직원 정보 검색 (9/14)
9

M02.4-1. 직원 정보 검색 (10/14)
10

M02.4-1. 직원 정보 검색 (11/14)

153
M02.4-1. 직원 정보 검색 (12/14)
< Report 조회 조건 >
where
InStr(':'||:P21_SEARCH_TEAMS||':',
':'||TEAM_ID||':') > 0
and TEAM_ID IS NOT NULL
and
InStr(':'||:P21_SEARCH_GENDERS||':',
':'||GENDER||':') > 0
and GENDER IS NOT NULL
P21_SEARCH_TEAMS,
P21_SEARCH_GENDERS의 Key 값을
받아서 검색하는데 사용함
à 이를 위해 Report의 SQL 쿼리에 위의
조회조건을 추가함

154
M02.4-1. 직원 정보 검색 (13/14)
11
12
Source > SQL 쿼리의 우측 새창
아이콘을 클릭해서 앞서 복사한
where 절 추가

M02.4-1. 직원 정보 검색 (14/14)
13

M02.4-1. 직원 정보 검색 – default value 설정 (1/6)
Page 들어 갔을 때 데이터가 보이도록
설정하고 싶음
(default 로 팀명, 성별의 모든 값을
선택하는 설정 추가)
(이때 check box 선택이 없는 상태에서
시작하자. )

157
1

158
SQL Query returning
colon delimited list
2

159
< Default 값 지정 >
P21_SEARCH_TEAMS 칼럼에
대해서
select team_id from TEAMS
3

160
4

이제, Page 들어가면 기본으로 값이 모두 선택되어 있음.
따라서, 아래 리포트 내용이 모두 출력됨

M02.4-2. 직원 정보 Dynamic Search (1/10)
DYNAMIC SEARCH 란?
page item(팀명, 성별) 의 값(소아과, 남성 등)이 변경될
때마다 아래 report가 바뀌는 event를 실행하여
동적 검색이 되는 것
** page item, report 설정 필요

163
1

164
2
P21_SEARCH_TEAMS가 변화할 때
Dynamic actions이 발생함

165
3
P21_SEARCH_TEAMS가 변화= True
일 때 action = Refresh

166
4
action = Refresh 인 곳은
Region 중 Report1 임

167
5
P21_SEARCH_GENDERS가 변화할 때
Dynamic actions이 발생함
우클릭해서 Dynamic
actions 생성

168
6
7
P21_SEARCH_GENDERS가
변화= True 일 때
action = Refresh 인 곳은
Region 중 Report1 임

169
8
Dynamic action 이벤트
발생하면 Report1의
변화부분을 설정
9
Source > Page items to
submit을 누른 후
P21_SEARCH_TEAMS,
P21_SEARCH_GENDERS
각각 클릭

170
2개 item이 들어가 있음.
2개 submit 하면 다이내믹 액션
실행(change item à report refresh)

171
8
버튼 불필요하므로
지움

172
M02.4-2. Dynamic 검색 실행 결과

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

More Related Content

What's hot (20)

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

More from Taewan Kim (10)

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