Dari menu bar, Windows Preferences Server Runtime Environtment dipilih, kemudian tombol Add Pilihan Apache Apache Tomcat v6.0 dipilih dan klik Next Memilih Finish

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