Hướng dẫn cách cài đặt và sử dụng wak
Wiki » Hướng dẫn cách cài đặt và sử dụng wak

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
homepage_wak.png
wak_bundle.png
download_file.png

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:
unpack_wak.png
  • Chạy ứng dụng bằng cách click vào run.bat
run_wak.png
  • 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
db_used.png
app_config.png
  • 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ẽ
wak_login.png

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ẽ.
wak_sql.png
  • 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';
wak_sql_db.png

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.
wak_list_db.png
wak_db_singer.png

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
wak_code_func.png
wak_table_code_func.png

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
wak_url_singer.png
wak_music_notsave.png
  • 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.
wak_save_music.png

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.
wak_create_func.png
wak_auth_func.png
  • 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.
wak_create_NSD.png
wak_save_NSD.png
  • Còn đây là cách thức khi chọn loại nhóm chức năng.
wak_create_gr_NSD.png
wak_save_gr_NSD.png

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.
wak_list_code.png
  • 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.
wak_singer_list.png
  • 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.
wak_remove_singer.png
wak_remove_sub_singer.png

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!