e. Setelah installasi selesai dan sukses, selanjutnya eclipse di-restart.
Sampai disini, proses installasi selesai dilakukan.
4. Menyiapkan Server Runtime Adapun sebelum melakukan deploy aplikasi, perlu dilakukan installasi
sebuah Web server seperti Tomcat dan melakukan penyetingan pada eclipse. Berikut adalah implementasi penyetingan Web server Apache
Tomcat v6.0 pada eclipse.
a. Dari menu bar, Windows Preferences
… dipilih.
b. Server Runtime Environtment dipilih, kemudian tombol Add
di-klik.
c. Pilihan Apache Apache Tomcat v6.0 dipilih dan klik Next
d. Melakukan browse terhadap direktori root tempat installasi Apache Tomcat v6.0 diinstall dalam komputer. Sebagai contoh root
direktori ada di
C:\Program Files\Apache Software Foundation\Tomcat 6.0
e. Memilih Finish
4.1.2. Pembuatan Database-driven Aplikasi
Contoh pembangunan sebuah modul Package Type:
1. Model Berikut dijelaskan mengenai pembuatan skema database dan POJO
plain old java object dari modul terkait. a. Skema Database
Field Type
id int11
description longtext
name varchar30
minhours int11
b. Plain Old Java Object
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
Entity Table
name = packtype
public class
Packtype
implements
java.io.Serializable {
private Integer
id ;
private String
name ;
private
String description
;
private Integer
minhours ;
Id GeneratedValue
strategy = IDENTITY
Column name =
ID , unique =
true , nullable =
false public
Integer getId {
return this
. id
; }
public void
setIdInteger id {
this .
id = id;
} Column
name = NAME
, length = 30
public String getName {
return this
. name
;
21 22
23 24
25 26
27 28
29 30
31 32
33 34
35 36
37 38
39 40
41 42
43 44
45 46
47 48
49 50
51 52
53 54
55 56
}
public void
setNameString name {
this
. name
= name; }
Column name =
MINHOURS
public
Integer getMinhours {
return minhours
; }
public void
setMinhoursInteger minhours {
this .
minhours = minhours;
} Column
name = DESCRIPTION
, length = 65535
public String getDescription {
return this
. description
; }
public void
setDescriptionString description {
this
. description
= description; }
OneToMany mappedBy =
packtype
public
SetPackageproduct getPackageproducts {
return this
. packageproducts
; }
public void
setPackageproducts SetPackageproduct packageproducts {
this .
packageproducts = packageproducts;
} OneToMany
mappedBy = packtype
public
SetReservation getReservations {
return this
. reservations
; }
public void
setReservations SetReservation reservations {
this .
reservations = reservations;
} }
2. View
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
21 22
23 24
25 26
27 28
29 30
31 32
33 34
35 36
37 38
39 40
41 42
43 44
45 46
47 48
49 50
51 52
53 54
55 56
57 58
59 60
? page
id=packType title =Pack Types cacheable=true language=xulhtml zscriptLanguage=Java
contentType=texthtml;charset=UTF-8 ?
zk ?
init class=org.zkoss.zkplus.databind.AnnotateDataBinderInit
? window
id =
win1 border
= none
mode =
embedded closable
= false
sizable =
false apply
= org.reservation.action.PackageTypeAction
position =
right,top separator
div align
= center
label value
= Package Type
style =
font-size: 20px; color:008BB6; font-weight:bold; font-family: Verdana;
div separator
grid sclass
= GridLayoutNoBorder
columns column
column columns
rows row
align =
center groupbox
mold =
3d id
= gbxListMain
width =
800px caption
label =
Package Type Field caption
panel panelchildren
listbox id
= listbox
mold =
paging pageSize
= 5
sclass =
z listhead
listheader align
= center
label =
Name width
= 150px
listheader align
= center
label =
Min Hours width
= 75px
listheader align
= center
label =
Description width
= 400px
listheader align
= center
label =
Action width
= 100
listhead listbox
panelchildren panel
groupbox row
row align
= center
groupbox id
= gbxFormMain
mold =
3d width
= 400px
caption label
= Input Form
caption panel
panelchildren grid
id =
MAIN_GRID sclass
= gridLayoutNoBorder
columns column
width =
110px column
width =
columns rows
row align
= left
label value
= Name
label textbox
id =
txtName width
= 180px
value =
{wincomposer.selectedMain.name} constraint
= no empty
row
61 62
63 64
65 66
67 68
69 70
71 72
73 74
75 77
76 78
79 80
81 82
83 84
85 86
87 88
89 90
91 92
93 94
95 96
97 98
row align
= left
label value
= Minimum Hour
hbox align
= center
intbox id
= intMinhours
width =
30px value
= {wincomposer.selectedMain.minhours }
label value
= hours
label hbox
row row
valign =
top align
= left
label value
= Description
label textbox
id =
txtDescription rows
= 3
width =
180px value
= {wincomposer.selectedMain.description}
constraint =
no empty row
row align
= center
spans =
2 div
button label
= Submit
onClick =
id =
btnSubmit button
label =
Update onClick
= id
= btnUpdate
button label
= Reset
onClick =
id =
btnReset div
row rows
grid panelchildren
panel groupbox
row row
id =
button align
= center
spans =
2 div
button label
= Add
onClick =
id =
btnAdd button
label =
Cancel onClick
= id
= btnCancel
div row
rows grid
window zk
Source-code di atas adalah bentuk source-code dari ZK berfungsi
untuk mengatur layer presentasi aplikasi.
3. Controller
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
21 22
23 24
25 26
27 28
29 30
31 32
33 34
35 36
public class
PackageTypeAction
extends
Security{ ListPacktype
allMain =
new ArrayListPacktype;
Packtype selectedMain
; Intbox
intMinhours ;
Listbox listbox
; Button
btnSubmit ,
btnUpdate ,
btnReset ,
btnAdd ,
btnCancel ;
Groupbox gbxFormMain
; Textbox
txtName ,
txtDescription ;
AnnotateDataBinder binder
; Override
public void
doAfterComposeComponent comp throws
Exception{
super .doAfterComposecomp;
binder =
new
AnnotateDataBindercomp; Session session = HibernateUtil.currentSession;
System. out
.println DoAfterComposeAction
; btnAdd
.setImage imgadd.png
; btnCancel
.setImage imgcancel.png
; btnReset
.setImage imgreset1.png
; btnSubmit
.setImage imgsave.png
; btnUpdate
.setImage imgupdate.png
; modeGbClose;
modeOpen true
; modeClosable
false ;
onSearch
null
; }
} end class PackageTypeAction
Source-code di atas merupakan inisialisasi awal dari Controller yang
nantinya akan menjalankan fungsi logika aplikasi.
1 2
3 4
5 6
7 8
9 10
11 12
======== ROW RENDERER METHOD ===================================
public void
onSearchEvent event{ SimpleListModel model =
new
SimpleListModelgetallMain; listbox
.setModelmodel; listbox
.setItemRenderer
new
ListitemRenderer { Override
public void
render final
Listitem item, Object data
throws
Exception {
TODO Auto-generated method stub
final Packtype packtypeData = Packtype data;
13 14
15 16
17 18
19 20
21 22
23 24
25 26
27 28
29 30
31 32
33 34
35 36
new Listcell
+packtypeData.getName.setParentitem;
new
Listcell +packtypeData.getMinhours.setParentitem;
new
Listcell +packtypeData.getDescription.setParentitem;
Listcell cellAction =
new
Listcell; Button tombol =
new
Button; tombol.setLabel
Edit ;
tombol.setImage imgedit.png
; tombol.addEventListener
onClick ,
new
EventListener { Override
public void
onEventEvent event
throws
Exception {
TODO Auto-generated method stub
selectedMain = packtypeData;
listbox .setSelectedItemitem;
txtName .setValuepacktypeData.getName;
intMinhours .setValuepacktypeData.getMinhours;
txtDescription .setValuepacktypeData.getDescription;
modeEdit
true
; modeGbOpen;
modeClosable true
; }
}; tombol.setParentcellAction;
cellAction.setParentitem; tombol =
new Button;
tombol.setLabel Delete
; tombol.setImage
imgdrop.png ;
tombol.addEventListener onClick
, new
EventListener { Override
public void
onEventEvent event
throws
Exception {
TODO Auto-generated method stub
Messagebox.show Are you really want to delete this
data? ,
Question , Messagebox.
OK |Messagebox.
CANCEL ,
Messagebox. QUESTION
,
new
EventListener { Override
public void
onEventEvent event throws
Exception {
TODO
Auto-generated method stub
int
i =
new
Integerevent.getData.toString;
if i==Messagebox.
CANCEL
return
;
else
{
try {
selectedMain = packtypeData;
Session session = HibernateUtil.currentSession; session.deletepacktypeData;
modeSubmit true
; modeGbClose;
binder .loadAll;
onSearch null
; Messagebox.show
Delete data successfully. ;
} end try
catch Exception e{
Messagebox.show Sorry, the data cannot be Deleted. The
data is used by another relation tables. +
Please Delete the data on the relation first ;
} end catch
} end else
} end onEvent
}; }
}; tombol.setParentcellAction;
cellAction.setParentitem; }
}; listbox
.renderAll; }
end void onSearch
Source code di atas berfungsi untuk menampilkan data yang di-render pada listbox. Data akan ditampilkan setelah dimasukkan, diubah, atau
dihapus.
4.2. Fase Perencanaan Syarat-Syarat