Hướng dẫn lập trình Oracle APEX cho người mới bắt đầu (APEX 5.0)

• Cài đặt Oracle APEX 5.0

Nếu bạn sử dụng Oracle 12c, tên của Schema có thể phải bắt đầu bởi ##. Chẳng hạn ##DEV.

• 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

• Desktop Application
• Websheet Application
• 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 có kiểu Database Desktop Application.

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.

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 cho Menu:

• New Navigation Menu Entry: Dept List (2)

Chọn các cột sẽ hiển thị:

Tiếp theo là trang để 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 DEPT_SEQ sequence.

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" và "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:

• Các thực thể của trang, bao gồm các vùng (Regions) các Buttons, nơi xử lý sự kiện liên quan (Processing),...
• 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
• 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ị ở vùng 3.

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.

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 xử 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 (mẫu) có sẵn của Oracle APEX.

Đây là mô hình 2 trang sẽ làm:

• Create Page

Chọn trang trắng (blank page):

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 (region) mới đã được tạo ra:

Nhập các thông tin cho vùng bạn mới tạo ra:

• Title: Dept List
• Type: Interactive Report
• Source SQL Query: Select DEPTNO, DNAME, LOC from DEPT
• 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 bản ghi, như hình minh họa dưới đây:

Chọn Attributes của vùng "Dept List". Và sét đặt các thuộc tính như hình minh họa dưới đây:

Link Column = Link to Single Row View

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.

Link Column = Link to Custom Target

Sử dụng để nhẩy tới một trang tùy biến của bạn, để hiển thị thông tin bản ghi. (Sẽ được đề cập sau).

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 có 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 (field):

• Hidden: DEPTNO
• Text Field: DNAME
• Text Field: LOC

Kéo thả một phần tử 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 để tải dữ liệu và hiển thị trên Form:

Tạo một Process trong:

• Pre-Rendering/After Header

Process (Tiến trình) 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)) để thiết lập tham số truyền 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à "chức năng lưu 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 nút CANCEL:

• Button Name: CANCEL
• Label: Cancel
• Action: Redirect to Page in this Application

• DELETE_IMMEDIATELY

• Button Name: DELETE_IMMEDIATELY
• Label: Delete (Immediately)
• Action: Submit Page
• Database Action: SQL DELETE Action

• Condition Type: Item not null
• Condition Item: P5_DEPTNO

• 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

• Condition Type: Item is NOT NULL
• Condition Item: P5_DEPTNO

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 Name: SAVE_EDIT
• Label: Save (edit)
• Action: Submit Page
• Database Action: SQL UPDATE action

• 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

• 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 Insert).
• Process Row of Dept: Thực thi hành động (Insert, Update hoặc Delete).
• 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 Process 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à sét đặt 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 bạn click vào button DELETE_IMMEDIATELY hoặc DELETE_CONFIRM.

Sau khi 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 xử 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:

• Hướng dẫn sử dụng Tabular Form trong Oracle APEX