Hướng dẫn cách cài đặt và sử dụng wak
Mục lục
|
Trang này hướng dẫn bạn cài đặt và sử dụng wak cho người mới.Nếu bạn đã cài đặt và đang sử dụng wak thì bạn có thể bỏ qua hướng dẫn này.
Hướng dẫn cách sử dụng wak cho người mới.
Download wak package:
Vào trang http://wak.vn/ click vào Download như hình vẽ dưới đây


Tạo dự án mới với wak
- Sau khi download file ftl-wak-bundle-1.0.zip, cần giải nén và nhúng file vào thư mục dự án vừa tạo.Kết quả sau khi giải nén file như sau:

- Chạy ứng dụng bằng cách click vào run.bat

- Mở trình duyệt truy cập vào trang https://localhost/ .Thực hiện các bước theo hình dưới đây


- Sau đó website sẽ cung cấp tên đăng nhập và mật khẩu, viết đúng chúng vào form đăng nhập như hình vẽ

Tạo CRUD đơn giản với wak:
Bước 1: Tạo bảng
- Vào Tiện ích CSDL -> Thực hiện nhiều câu lệnh SQL.Thực hiện tạo mới 1 bảng với tên SINGER như hình vẽ.

- Copy đoạn code cho vào bảng như hình vẽ dưới đây
create table SINGER (
SINGER_ID NUMBER(10) not null,
STORY VARCHAR2(1024 CHAR),
NAME VARCHAR2(1024 CHAR),
CREATED TIMESTAMP default SYSDATE not null,
CREATOR VARCHAR2(50 CHAR) not null,
MODIFIED TIMESTAMP,
MODIFIER VARCHAR2(50 CHAR),
constraint PK_SINGER primary key (SINGER_ID)
);
comment on table SINGER is
'Ca sỹ';
comment on column SINGER.SINGER_ID is
'ID';
comment on column SINGER.STORY is
'Tiểu sử';
comment on column SINGER.NAME is
'Tên';
comment on column SINGER.CREATED is
'Giờ tạo';
comment on column SINGER.CREATOR is
'Người tạo';
comment on column SINGER.MODIFIED is
'Giờ cập nhật';
comment on column SINGER.MODIFIER is
'Người cập nhật';

Bước 2: Kiểm tra bảng đã được tạo
- Sau đó, vào Tiện ích CSDL -> Danh sách bảng dữ liệu để kiểm tra đã tạo được bảng SINGER như hình sau.


Bước 3: Tạo chức năng với wak
- Sau khi tạo bảng dữ liệu thành công. Chọn Hệ thống -> Lập trình chức năng wak như hình dưới đây


Bước 4: Tạo đường dẫn cho dự án
- Tạo đường dẫn url mới có chứa tính năng tương ứng như hình sau


- Sau khi save, lỗi HTTP error 404 sẽ được thay thế bằng cách tạo chức năng mới như hình dưới đây.

Bước 5: Phân quyền chức năng cho dự án
- Thực hiện thao tác như hình để phân quyền chức năng.


- Cần chú ý khi chọn loại chức năng và loại nhóm chức năng.
- Dưới đây là cách thức thực hiện khi chọn loại chức năng.


- Còn đây là cách thức khi chọn loại nhóm chức năng.


Bước 6: Viết code trên đường dẫn để tạo chức năng hoàn chỉnh
- Như vậy, khi quay trở lại đường dẫn url ở bước 4, bạn thấy trang như hình sau.

- Bạn có thể lấy code bên dưới để tạo trang list đơn giản.
Logic
# Uncomment to enable options below
# ListAllItem
# ExcludeLayout
# HideActionColumn
HideDetailButton
# HideCopyButton
# HideModifyButton
# HideRemoveButton
# HideSelectionColumn
# DisableHeaderSort
# KeyField==
# NameField==
# Format==json
FirstFocus==KEYWORD
KeyField==SINGER_ID
NameField==NAME
SearchField==KEYWORD
SearchFieldCombination==SINGER_ID,NAME
Field
Text==KEYWORD
Trim
Text==SINGER_ID
Trim
Type==number
Text==STORY
Trim
MaxLength==1024
Text==NAME
Trim
MaxLength==1024
DateRange==CREATED
Trim
TimePicker==true
Text==CREATOR
Trim
MaxLength==50
DateRange==MODIFIED
Trim
TimePicker==true
Text==MODIFIER
Trim
MaxLength==50
Submit==GEN_HTML
Submit==GEN_EXCEL
Button==ADD
Extra==!"onclick=\\"create" + action.getId() + "(this);\\""
Button==IMPORT
Extra==!"onclick=\\"import" + action.getId() + "(this);\\""
Button==REMOVE_SELECTED
Extra==!"onclick=\\"removeSelected" + action.getId() + "(this);\\""
Popup
Width==440
Height==172
# CreateWidth==720
# CreateHeight==560
# EditWidth==720
# EditHeight==560
Layout==Simple
Panel
Layout==Simple
Control==KEYWORD
Panel
Layout==DropDown
Control==SINGER_ID
Control==STORY
Control==NAME
Control==CREATED
Control==CREATOR
Control==MODIFIED
Control==MODIFIER
Control==GEN_HTML
Control==GEN_EXCEL
Control==ADD
Control==IMPORT
Control==REMOVE_SELECTED
Query
TableName==SINGER
FieldList
SINGER_ID==SINGER_ID
Format==#
STORY==STORY
NAME==NAME
OpenHtml==<a href='detail.jsp?pk=$SINGER_ID$'>
CloseHtml==</a>
CREATED==CREATED
CREATOR==CREATOR
MODIFIED==MODIFIED
MODIFIER==MODIFIER
Condition
SINGER_ID==SINGER_ID
Format==SINGER_ID=safe_to_number(?)
STORY==STORY
Format==UPPER(STORY) LIKE UPPER('%'||?||'%')
NAME==NAME
Format==UPPER(NAME) LIKE UPPER('%'||?||'%')
CREATED==CREATED_FROM
Format==CREATED >= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
CREATED==CREATED_TO
Format==CREATED <= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
CREATOR==CREATOR
Format==UPPER(CREATOR) LIKE UPPER('%'||?||'%')
MODIFIED==MODIFIED_FROM
Format==MODIFIED >= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
MODIFIED==MODIFIED_TO
Format==MODIFIED <= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
MODIFIER==MODIFIER
Format==UPPER(MODIFIER) LIKE UPPER('%'||?||'%')
DefaultOrderField==CREATED
DefaultOrderType==DESC
#Html
# MaximumRowFetched==20
#Json
# MaximumRowFetched==20
#reference /resource/com/ftl/wak/LiveValidationEN.dic
#reference /resource/com/ftl/wak/CommonEN.dic
Title==Danh mục ca sỹ
Caption==DANH MỤC CA SỸ
SINGER_ID==ID
Title==ID
STORY==Tiểu sử
Title==Tiểu sử
NAME==Tên
Title==Tên
CREATED==Giờ tạo
Title==Giờ tạo
CREATOR==Người tạo
Title==Người tạo
MODIFIED==Giờ cập nhật
Title==Giờ cập nhật
MODIFIER==Người cập nhật
Title==Người cập nhật
Message
Remove==Bạn có thực sự muốn xóa ca sỹ '<%p>' không?
RemoveSelected==Bạn có thực sự muốn xóa những ca sỹ đã chọn không?
- Sau khi thêm code, chọn save chương trình sẽ chạy và hiển thị như hình sau.

- Lặp lại bước 4 tạo đường dẫn url với chức năng create, edit, detail tương ứng.
- Chú ý bước 5 chỉ làm 1 lần vì ngay từ khi phân quyền bạn đã tạo đầy đủ chức năng CRUD đơn giản rồi.
- Sau đây là code của chức năng create.
Logic
# Uncomment to enable options below
# ImmediateProcess
# NoLog
# LogParameter
# IgnoreAuthenticate
# IgnorePrivilegeCheck
# ExcludeLayout
FirstFocus==STORY
Field
File==DATA_FILE
Extra==required
Text==STORY
Trim
MaxLength==1024
Text==NAME
Trim
MaxLength==1024
Submit==SAVE
Submit==APPLY
Button==CLOSE
Import
StartRowIndex==0
RowExtractionScript=:
:{
var params = action.getParameters();
params.put("STORY",row.get(0));
params.put("NAME",row.get(1));
:}
Screen
Layout==Table
Label==DATA_FILE
Control==DATA_FILE
BREAK
Panel
w==2
Extra==align="center"
Layout==Table
Control==SAVE
Control==CLOSE
Layout==Table
Label==STORY
Control==STORY
LayoutExtra==width="260px"
BREAK
Label==NAME
Control==NAME
BREAK
Panel
w==4
Extra==align="center"
Layout==Table
Control==APPLY
Control==SAVE
Control==CLOSE
FetchProcess
Fetch
TableName==SINGER
PrimaryKey
SINGER_ID==pk
Column
STORY==STORY
NAME==NAME
SaveProcess
Validation
Parameter
Insert
TableName==SINGER
PrimaryKey
SINGER_ID==pk
Automatic==SEQ_SINGER.nextval
Retrieve
Column
STORY==STORY
NAME==NAME
CREATED
Automatic==current_timestamp
CREATOR
Automatic==!"'" + action.getParameters().get("session.userName") + "'"
MODIFIED
Automatic==current_timestamp
MODIFIER
Automatic==!"'" + action.getParameters().get("session.userName") + "'"
#reference /resource/com/ftl/wak/LiveValidationEN.dic
#reference /resource/com/ftl/wak/CommonEN.dic
Title==Tạo mới ca sỹ
Caption==TẠO MỚI CA SỸ
STORY==Tiểu sử
Title==Tiểu sử
NAME==Tên
Title==Tên
SaveCompletedSuccessfully==Thông tin ca sỹ '$NAME$' đã được thêm vào CSDL.
- Code của chức năng edit.
Logic
# Uncomment to enable options below
# ImmediateProcess
# NoLog
# LogParameter
# IgnoreAuthenticate
# IgnorePrivilegeCheck
# ExcludeLayout
FirstFocus==STORY
Field
File==DATA_FILE
Extra==required
Text==STORY
Trim
MaxLength==1024
Text==NAME
Trim
MaxLength==1024
Submit==SAVE
Button==CLOSE
Import
StartRowIndex==0
RowExtractionScript=:
:{
var params = action.getParameters();
params.put("STORY",row.get(0));
params.put("NAME",row.get(1));
:}
Screen
Layout==Table
Label==DATA_FILE
Control==DATA_FILE
BREAK
Panel
w==2
Extra==align="center"
Layout==Table
Control==SAVE
Control==CLOSE
Layout==Table
Label==STORY
Control==STORY
LayoutExtra==width="260px"
BREAK
Label==NAME
Control==NAME
BREAK
Panel
w==4
Extra==align="center"
Layout==Table
Control==SAVE
Control==CLOSE
FetchProcess
Fetch
TableName==SINGER
PrimaryKey
SINGER_ID==pk
Column
STORY==STORY
NAME==NAME
SaveProcess
Validation
Parameter
Update
TableName==SINGER
PrimaryKey
SINGER_ID==pk
Column
STORY==STORY
NAME==NAME
MODIFIED
Automatic==current_timestamp
MODIFIER
Automatic==!"'" + action.getParameters().get("session.userName") + "'"
#reference /resource/com/ftl/wak/LiveValidationEN.dic
#reference /resource/com/ftl/wak/CommonEN.dic
Title==Sửa thông tin ca sỹ
Caption==SỬA THÔNG TIN CA SỸ
STORY==Tiểu sử
Title==Tiểu sử
NAME==Tên
Title==Tên
SaveCompletedSuccessfully==Thông tin ca sỹ '$NAME$' đã được cập nhật vào CSDL.
- Code của chức năng detail.
View==/include/master_detail.jsp
Logic
AttmType==SINGER
NoteType==SINGER
Field
Label==SINGER_ID
Label==STORY
Label==NAME
Label==CREATED
Label==CREATOR
Label==MODIFIED
Label==MODIFIER
Child
FK_S_SG==list_song.jsp
LinkParameter==SINGER_ID
Popup
Width==440
Height==172
CssClass==data_table
Layout==Table
Label==SINGER_ID
Control==SINGER_ID
BREAK
Label==STORY
Control==STORY
BREAK
Label==NAME
Control==NAME
BREAK
Label==CREATED
Control==CREATED
BREAK
Label==CREATOR
Control==CREATOR
BREAK
Label==MODIFIED
Control==MODIFIED
BREAK
Label==MODIFIER
Control==MODIFIER
BREAK
FetchProcess
Fetch
TableName==SINGER
PrimaryKey
SINGER_ID==pk
Column
SINGER_ID==SINGER_ID
STORY==STORY
NAME==NAME
CREATED==TO_CHAR(CREATED,'DD/MM/YYYY HH24:MI:SS')
CREATOR==CREATOR
MODIFIED==TO_CHAR(MODIFIED,'DD/MM/YYYY HH24:MI:SS')
MODIFIER==MODIFIER
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
Title==Thông tin ca sỹ
BREADCRUMB=:
:{
!"<li><a href='list.jsp'>Quản lý ca sỹ</a></li>" +
"<li><a>" + com.ftl.util.StringEscapeUtil.escapeHtml(action.getParameters().get("NAME")) + "</a></li>"
:}
SINGER_ID==ID
Title==ID
STORY==Tiểu sử
Title==Tiểu sử
NAME==Tên
Title==Tên
CREATED==Giờ tạo
Title==Giờ tạo
CREATOR==Người tạo
Title==Người tạo
MODIFIED==Giờ cập nhật
Title==Giờ cập nhật
MODIFIER==Người cập nhật
Title==Người cập nhật
FK_S_SG==Bài hát
Message
Remove==Bạn có thực sự muốn xóa ca sỹ '<%p>' không?
Bước 7: Tạo chức năng remove bằng Sublime Text 3
- Đối với chức năng remove, ta phải thêm file remove.dic và removeVN.dic bằng tay. Mở file bằng Sublime Text 3 như hình sau.


Bước 8: Viết code và lưu trên Sublime Text 3
- Thêm lần lượt 2 đoạn code sau vào 2 file remove.dic và removeVN.dic
SaveProcess
Fetch
TableName==SINGER
PrimaryKey
SINGER_ID==pk
Column
NAME==NAME
Delete
TableName==SINGER
PrimaryKey
SINGER_ID==pk
# DetailData
# SONG==FK_S_SG
# ForeignKey
# SINGER_ID==pk
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
SaveCompletedSuccessfully==Đã xóa thông tin ca sỹ '$NAME$'.
Như vậy, bạn đã hoàn thành xong tạo chức năng CRUD đơn giản với wak.
Nếu có thắc mắc hay khó khăn gì thì hãy comment bên dưới.
Xin cảm ơn!