CRUD in ADF Web Application

Kali ini akan saya bahas bagaimana caranya membuat ( Create, Read, Update, Delete ) di ADF Web Application.

Persiapkan ini semua :

Jdeveloper  : Oracle Jdeveloper 11.1.1.6.0
Oracle DB Express : Oracle DB Express 11g ( Only for Windows and linux )
Unlock sample HR Oracle DB : Unlock


Step by Step.

Step 1

• Buka Jdeveloper dan Pilih New Application lalu pilih " Fusion Web Application "
• Setelah selesai membuat new aplication, show tab ( Application Resources )

• Klik kanan pada folder ( Connection ) lalu buat New Connection. dan pilih ( Database )
• Lalu akan tampil screen, ( Create Database Connection )

• Isi ( Connection Name ), dan untuk ( username dan password ) , gunakan username dan password yang anda buat setelah selesai instal oracle db express
• Jika sudah lalu Test Connection jika sukses , lanjutkan dan klik OK

Step 2

• Selanjutnya membuat Entity Object, View Object, dan Application Module
• Pada Folder Model klik kanan , dan pilih new lalu akan tampil screen New Gallery
• Search Entity Object, lalu pilih " Entity Object ( ADF Business Components ) "

• Selanjutnya akan tampil screen Intiliaze Business Components Project

• pada Drop Down Connection pilih koneksi yang sudah anda buat di awal step 1 dan klik OK.
• Selengkapnya step by step dalam membuat EO, VO, dan AM 
• Setelah selesai membuat EO, VO, dan AM lanjut ke Step 3

Preview Step 2:

Step 3

•  Buka Task Flow ( adfc-config.xml ) lalu drag and drop component " View(ADF Task Flow.Components " kedalam taskflow tersebut dan klik 2x pada view lalu buat page ( jspx ), page ini akan kita jadikan sebagai index si aplikasi tersebut.

• buka page karyawanView.jspx dan drag and drop 4 component button " Button(ADF Faces.Common Components) " kedalam page tersebut.
• lalu buka tab data controls, drag and drop VOkaryawan kedalam page tersebut. pilih table -> ADF Read Only Table

• lalu centang ( Single Row ) dan klik OK.

Step 4

• Pada Task Flow ( adfc-config.xml ), drag and drop component " View(ADF Task Flow.Components " kedalam taskflow tersebut dan klik 2x pada view tersebut. page tersebut saya beri nama ( karyawanForm ) page ini saya jadikan untuk " create data baru dan update data ".
• Buka karyawanForm.jspx dan drag and drop VOkaryawan dari data control kedalam page tersebut. pilih Form -> ADF Form

• Centang Include Submit button dan klik OK

• Drag and Drop Component " Button( ADF Faces.Common Component ) dan beri value ( cancel ) lalu pada properties immidiate kondisi menjadi ( true )

Step 5

• Pada Task Flow ( adfc-config.xml ), drag and drop component " View(ADF Task Flow.Components " kedalam taskflow tersebut dan klik 2x pada view tersebut. page tersebut saya beri nama ( karyawanDetails ) page ini saya jadikan untuk " page untuk melihat details data karyawan ".
• Buka karyawanDetails.jspx dan drag and drop VOkaryawan dari data control kedalam page tersebut. pilih Form -> ADF Read Only Form

• Tidak perlu centang apapun, cukup klik OK.

• Drag and Drop Component " Button( ADF Faces.Common Component ) dan beri value ( back )

Step 6

• Kembali ke Task Flow , dan buka tab data control.
• lalu expands VOkaryawan, dan buka folder Operation didalam VO tersebut.

• Lalu drag and drop operation ( createInsert dan delete ) ke dalam taskflow.
• Selanjutnya buka folder Operation diluar VO tersebut. dan drag and drop operation ( commit dan rollback ) kedalam Task Flow.

Step 7

• Desain Task Flow Seperti ini

• Terakhir pada properties Button, Beri Action pada Button sesuai variable yang sudah dibuat pada control flow

Page karyawanView.jspx

1. Button Create Action ( create )
2. Button View Action ( view )
3. Button Edit Action ( edit )
4. Button Delete Action ( delete )

Page karyawanView.jspx

1. Button Back Action ( back )

Page karyawanForm.jspx

1. Button Submit Action ( save )
2. Button Cancel Action ( cancel )

• Run ( karyawanView.jspx )

Preview

Sample Aplikasi ( Download )

Silakan dikembangkan.
Terima kasih.