Hướng dẫn lập trình Oracle APEX cho người mới bắt đầu (APEX 5.0)
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- Giới thiệu

Trong tài liệu này tôi sẽ hướng dẫn bạn làm việc với Oracle Application Express (Oracle APEX) 5.x:
Bạn có thể xem tài liệu hướng dẫn cài đặt và cấu hình Oracle APEX tại:

2- Tạo Workspace

Trước hết bạn cần phải đăng nhập vào hệ thống quản trị của Oracle APEX để khai báo một Workspace.  Một Workspace sẽ gắn với 1 SCHEME trong database.  Workspace chứa các Ứng dụng (bao gồm hệ thống form, báo cáo, ..), quản lý các user là các người tham gia lập trình, hoặc các user là sử dụng ứng dụng.
Bạn cần tạo mới một Workspace:
Nhập vào:
  • Workspace Name: DEV_WORKSPACE
  • Workspace ID: 1234567

 
Bạn có thể chọn một SCHEMA có sẵn trong Database, tại đây tôi tạo mới một SCHEMA có tên DEV, password dev123.
Ở bước trước bạn chọn tạo ra một SCHEMA có tên là DEV điều đó có nghĩa là 1 user database sẽ được tạo ra có tên là DEV.
Trong bước này bạn cần khai báo một User quản trị Workspace, nó không phải là một user database, nó là một user quản lý Workspace này, nó có quyền tạo ra các ứng dụng, tạo ra các User khác có vai trò người lập trình, hoặc người sử dụng ứng dụng,...
Workspace của bạn đã được tạo ra. Bạn có thể xem danh sách các Workspace hiện có và sửa đổi nếu muốn.

3- Làm việc với Workspace

Bước trên bạn đã tạo một Workspace có tên DEV_WORKSPACE. Bây giờ chúng ta sẽ đăng nhập và làm việc với Workspace này.
Nhập vào:
  • Workspace: DEV_WORKSPACE
  • User Name: devadmin
  • Password: devadmin123
Trong lần đầu tiên đăng nhập vào Workspace, hệ thống đòi hỏi bạn thay đổi password, bạn có thể giữ nguyên mật khẩu cũ.
Bạn đã đăng nhập vào Workspace DEV_WORKSPACE

4- Quản lý User và Group trong Workspace

Sau khi đã đăng nhập vào Workspace với quyền admin bạn có thể tạo các user và các group cho Workspace.
Nhập vào:
User dev01 đã được tạo ra.
Bây giờ bạn có thể logout ra khỏi hệ thống để đăng nhập vào theo user dev01, bạn đã sẵn sàng cho việc lập trình Oracle APEX.

5- Bảng và dữ liệu Demo

Bạn cần đăng nhập vào với một user có vai trò người lập trình.
Xem các Object trong Schema thông qua Object Browser.
Bước trước bạn đã tạo Schema DEV thông qua Oracle APEX, schema này hiện tại chỉ có các bảng hệ thống và một số bảng DEMO được Oracle APEX tạo sẵn. Và một số Sequence liên quan.

6- Tạo ứng dụng (Application)

Trong Oracle APEX bạn có thể tạo một ứng dụng theo một trong 3 loại:
  1. Desktop Application
  2. Websheet Application
  3. Mobile Application
Với một người mới học Oracle APEX tốt nhất nên làm một ví dụ với Database Desktop Application. Thực tế ứng dụng này vẫn chạy trên nền web nhưng có giao diện khá giống một ứng dụng Desktop thông thường.
Trong tài liệu này tôi sẽ hướng dẫn bạn tạo một ứng dụng Hello World Oracle Apex kiểu Database Desktop Application.

6.1- Tạo Database Desktop Application

Phần này chúng ta sẽ tạo mới một Database Desktop Application:
Nhấn nút Create để tạo mới một ứng dụng:
Nhập vào tên của ứng dụng:
  • Hello Database Desktop Application
Mặc định trang Home sẽ được tạo ra cùng với ứng dụng, bạn có thể thêm các trang vào khác vào ứng dụng bằng cách click "Add Page". Tốt nhất là thêm sau.
Ứng dụng của bạn đã được tạo ra, nó có ID = 115, và có 2 trang Login & Home.
Hiện tại trang Home chưa được thiết kế gì, tuy nhiên bạn có thể nhấn vào biểu tượng để chạy thử trang web.

6.2- Tạo trang đầu tiên của bạn

Tiếp theo chúng ta sẽ thêm một trang hiển thị danh sách các phòng ban (Bảng DEPT) và một trang tạo và sửa thông tin phòng ban. Để đơn giản chúng ta sẽ tạo trang này theo mẫu có sẵn của Oracle APEX, trong phần sau tôi sẽ hướng dẫn bạn tạo mới từ một trang trắng để hiểu rõ vấn đề.
Chọn "Form on a Table with Report". Với Template này Oracle APEX sẽ tạo cho bạn 2 trang một trang danh sách các phòng ban (DEPT) và một form tạo (và sửa thông tin) phòng ban.
Đầu tiên Oracle APEX yêu cầu bạn nhập thông tin cho trang danh sách các phòng ban (DEPT), Page Number là một thuộc tính quan trọng bạn phải nhớ. Trang này tôi đặt Page Number = 2.  (Chú ý:  Trang Home đã có Page Number = 1).
Chọn bảng DEPT:
Nhập thông tin Menu:
  • New Navigation Menu Entry: Dept List (2)
Chọn các cột sẽ hiển thị:
Tiếp theo nhập các thông tin cho trang Form nhập thông tin phòng ban, ở đây tôi đặt Page Number = 3.
  • Page Mode:
    • Normal: Nghĩa là khi bạn nhấn vào tạo mới một phòng ban, trang web sẽ chuyển tới trang mới để nhập thông tin phòng ban.
    • Model Dialog: Nghĩa là khi bạn nhấn vào tạo mới một phòng ban, một Dialog sẽ hiển thị để nhập thông tin.
Chọn cột khóa chính (Primary Key):
Khi tạo mới bản ghi DEPT, cột DEPTNO sẽ có giá trị tự động được gán bởi sequence DEPT_SEQ.
Hai trang đã được tạo ra, trước tiên hãy chạy thử trang web.
OK, mọi thứ đều hoàn hảo. Trở về màn hình thiết kế để khám phá xem Oracle APEX đã tạo ra những gì.
Oracle APEX đã tạo cho bạn 2 trang có kiểu "Interactive Report""DML Form".
Nhấn vào trang "Form on DEPT (3)" để sửa.
Trên hình minh họa phía trên bạn sẽ thấy màn hình thiết kế chia làm 3 phần:
  1. Các thực thể của trang, bao gồm các vùng (Regions) các Buttons, các sử lý sự kiện liên quan (Processing),...
  2. Là giao diện của trang. Một trang thông thường có 6 vùng:
    • PAGE HEADER
    • PAGE NAVIGATION
    • BREADCRUMB BAR
    • CONTENT BODY
    • FOOTER
    • INLINE DIALOGS
  3. Khi bạn chọn một thực thể của trang tại phần 1, các thuộc tính của nó sẽ hiển thị ở phần 3 (Vùng này).
Ví dụ: Bạn nhấn vào thực thể PAGE, và thay đổi thuộc tính Page Mode thành "Model Dialog". Và nhấn save, như hình minh họa dưới đây:
Và chạy lại trang web.
Một Dialog sẽ được mở ra cho phép bạn nhập thông tin phòng ban mới.

6.3- Tạo Trang từ đầu

Ở phần trên tôi đã giới thiệu cho bạn cách tạo nhanh một trang web với các code sử lý được tự động tạo ra bởi Oracle APEX. Để hiểu rõ hơn về về Oracle APEX, ở phần này tôi sẽ tạo lại ví dụ trên hoàn toàn từ đầu, không sử dụng các Template có sẵn của Oracle APEX.
Đây là mô hình 2 trang sẽ làm:
  • Create Page
Chọn trang trắng:
Trang danh sách các phòng ban (DEPT) sẽ được đặt trên Menu.
Một trang trắng đã được tạo ra. Chúng ta sẽ tạo vùng hiển thị danh sách các phòng ban, vùng này sẽ nằm trong "Content Body".
Một vùng mới đã được tạo ra:
Nhập các thông tin cho vùng bạn mới tạo ra:
  1. Title: Dept List
  2. Type: Interactive Report
  3. Source SQL Query: Select DEPTNO, DNAME, LOC from DEPT
  4. SAVE
Bây giờ bạn có thể bấm nút RUN ( ) để chạy thử.
Bạn cần thêm một cột chứa các biểu tượng sửa đổi một record, như hình minh họa dưới đây:
Chọn Node Attributes của vùng "Dept List". Và thay sét đặt các thuộc tính như hình minh họa dưới đây:
Với
  • Link Column = Link to Single Row View
Điều đó có nghĩa là khi bạn click vào biểu tượng xem (sửa) bản ghi, ứng dụng sẽ nhẩy tới một trang mặc định hiển thị thông tin bản ghi.

Nếu bạn muốn nhẩy tới một trang tùy biến của mình bạn có thể sét (sẽ được đề cập sau).
  • Link Column = Link to Custom Target
Chạy lại trang web của bạn:
Trang web sẽ nhẩy tới một trang mặc định, hiển thị thông tin bản ghi mà bạn vừa chọn.

Form

Tiếp theo chúng ta tạo một trang dạng Form, mà khi bạn nhấn nút sửa hoặc tạo một phòng ban, nó sẽ nhẩy sang trang này.
Một trang trắng đã được tạo ra, chúng ta sẽ tạo một vùng chứa form.
Nhập các thông tin cho vùng mới được tạo ra:
  • Title: Form on Dept
  • Type: Static Content
Chú ý: Với kiểu "Region Type = Static Content". Bạn cần phải tạo các Item cho vùng này, và viết các xử lý hiển thị và ghi dữ liệu xuống DB.
Chúng ta sẽ tạo 3 trường:
  • Hidden: DEPTNO
  • Text Field: DNAME
  • Text Field: LOC
Kéo thả một Item Hidden vào vùng ITEMS như hình minh họa dưới đây.
Sét đặt các thuộc tính cho Item:
Tương tự tạo 2 TEXT-FIELD:
Chạy thử:
Khi người dùng chọn một bản ghi trên trang danh sách (Trang 4) để sửa, nó sẽ nhẩy sang trang Form (Trang 5) và truyền theo ID của bản ghi.  Bạn cần viết một Process (Trong Pre-Rendering) trên trang 5 để load dữ liệu và hiển thị trên Form:
Tạo một Process trong:
  • Pre-Rendering/After Header
Tiến trình (Process) này sẽ được gọi trước khi trang hiển thị.
Nhập vào:
  • Name: Fetch/load row From DEPT
  • Type: Automatic Row Fetch
  • Table Name: DEPT
  • Primary Key Column: DEPTNO
  • Primary Key Item: P5_DEPTNO
Quay trở lại trang 4 ( Dept List (4)) để cấu hình truyền tham số từ trang 4 sang trang 5.
Save và chạy thử trang web:
Bước tiếp theo chúng ta thêm các chức năng tạo mới và Save bản ghi như hình minh họa dưới đây.
Trên trang 4:
Tiếp theo nhẩy tới trang 5.
Kéo thả các Button vào các vị trí trên màn hình thiết kế như hình minh họa dưới đây:
Khi nhấn CANCEL trên trang 5, website sẽ chuyển hướng về trang 4.
Sét đặt các thuộc tính cho button CANCEL:
  • Button Name: CANCEL
  • Label: Cancel
  • Action: Redirect to Page in this Application
  • DELETE_IMMEDIATELY

Khi click vào button DELETE_IMMEDIATELY, chương trình sẽ xóa ngay bản ghi mà không cần hỏi. Chúng ta sẽ sét đặt các thuộc tính cho button này:
  • Button Name: DELETE_IMMEDIATELY
  • Label: Delete (Immediately)
  • Action: Submit Page
  • Database Action: SQL DELETE Action
Button này sẽ hiển thị nếu trường P5_DEPTNO không null:
  • Condition Type: Item not null
  • Condition Item: P5_DEPTNO
  • DELETE_CONFIRM

Khi bấm vào nút này, ứng dụng cần hỏi người dùng có chắc chắn muốn xóa bản ghi này không.
Sét đặt các thuộc tính cho button DELETE_CONFIRM:
  • Button Name: DELETE_CONFIRM
  • Label: Delete (confirm)
  • Action: Redirect to URL
  • Target: javascript:apex.confirm('Are you sure?','DELETE_CONFIRM');
  • Database Action: SQL DELETE action
Điều kiện để button này hiển thị trên trang.
  • Condition Type: Item is NOT NULL
  • Condition Item: P5_DEPTNO
Một số chú ý:

apex.confirm(text, BUTTON_NAME)
là một hàm javascript có sẵn trong APEX, nó hiển thị một Dialog đòi hỏi người dùng xác nhận hành động, trước khi thực thi hành động định nghĩa trong BUTTON_NAME.

Button này sẽ hiển thị trên trang web khi P5_DEPTNO khác null.
Bạn cũng có thể định nghĩa một biến javascript và sử dụng nó trong toàn bộ trang web.
// Khai báo một biến có tên htmldb_delete_message
var htmldb_delete_message='Would you like to perform this delete action?';

// Hoặc:
// "DELETE_CONFIRM_MSG" là một hằng số có sẵn trong APEX.
// Nó có giá trị là: Would you like to perform this delete action?

var htmldb_delete_message='"DELETE_CONFIRM_MSG"';


// Sau đó có thể sử dụng biến này trong toàn bộ trang.

apex.confirm(htmldb_delete_message,'DELETE_CONFIRM');
  • SAVE_EDIT

Button này sẽ hiển thị người dùng sửa đổi một bản ghi có sẵn trên DB (tạo ra một lệnh Update trên DB).
  • Button Name: SAVE_EDIT
  • Label: Save (edit)
  • Action: Submit Page
  • Database Action: SQL UPDATE action
Điều kiện để button này hiển thị trên trang.
  • Condition Type: Item is NOT NULL
  • Condition Item: P5_DEPTNO
  • SAVE_CREATE

  • Button Name: SAVE_CREATE
  • Label: Save (create)
  • Action: Submit Page
  • Database Action: SQL INSERT action
  • Condition
    • Type: Item is NULL
    • Item: P5_DEPTNO
  • Process

Tiếp theo, chúng ta thêm vào 3 tiến trình (Process).
  1. Get PK: Kiểm tra xem trường P5_DEPTNO đã được gán giá trị chưa, nếu chưa sẽ gán giá trị cho nó từ DEPT_SEQ (Dùng trong trường hợp Save Insert).
  2. Process Row of Dept: Thực thi hành động (Insert, Update hoặc Delete).
  3. Reset Page: Xóa bỏ các trạng thái.
Tạo mới một Process có tên "Get PK", và nhập vào các giá trị thuộc tính:
  • Name: Get PK
  • Type: PL/SQL Code
  • PL/SQL Code:
begin
    if :P5_DEPTNO is null then
        select DEPT_SEQ.nextval
          into :P5_DEPTNO
          from dual;
    end if;
end;
Tiếp theo tạo một Processer có tên "Process Row of DEPT" với các thuộc tính:
  • Name: Process Row of DEPT
  • Type: Automatic Row Processing (DML)
  • Table Name: DEPT
  • Primary Key Column: DEPTNO
  • Primary Key Item: P5_DEPTNO
  • Support Operations:
    • Insert
    • Update
    • Delete
Tiếp theo tạo Process có tên "Reset Page" và cấu hình thuộc tính cho nó "Chỉ sử dụng cho hành động xóa bản ghi".

Điều kiện để process này được thực thi là request có chứa từ "DELETE", điều đó có nghĩa là nó sẽ được thực thi khi click vào button DELETE_IMMEDIATELY hoặc DELETE_CONFIRM.
 
Sau khi tiến trình (Process) được thực thi (Insert, update, delete) trên trang 5, để nhẩy về trang 4, bạn cần thêm một sử lý trên "After Processing".
Bây giờ bạn có thể SAVE các thay đổi ở màn hình thiết kế và chạy thử ứng dụng:

7- Hướng dẫn lập trình Oracle APEX (Phần tiếp theo)

Bạn có thể xem tiếp tài liệu: