Membuat

Form Input Data

dengan HTML Region
Pada Oracle APEX 4.2

Disusunoleh:

BobySiswanto,ST
boby@cisku.com

Daftar Isi

DaftarIsi.........................................................................................................................................................i
DaftarGambar..............................................................................................................................................ii
PembuatanPageBaru...................................................................................................................................1
PembuatanHTMLRegion.............................................................................................................................5
PenambahanItempadaHTMLRegion.........................................................................................................7
PenambahanButtonpadaHTMLRegion....................................................................................................12
PembuatanProcesses.................................................................................................................................16
PengujianFormInputCoba........................................................................................................................21
Kesimpulan..................................................................................................................................................23

Pagei

Daftar Gambar

Gambar1StrukturTabelCoba.....................................................................................................................1
Gambar2ApplicationBuilderHome............................................................................................................2
Gambar3CreateNewPage..........................................................................................................................2
Gambar4AddBlankPage.............................................................................................................................3
Gambar5PageAttributes.............................................................................................................................3
Gambar6PageName...................................................................................................................................3
Gambar7TabOptions..................................................................................................................................4
Gambar8HalamanKonfirmasi.....................................................................................................................4
Gambar9KonfirmasiBerhasil......................................................................................................................4
Gambar10PageDefinitionComponentView............................................................................................5
Gambar11AddRegion.................................................................................................................................5
Gambar12AddHTMLRegion.......................................................................................................................6
Gambar13HTMLSubRegion.......................................................................................................................6
Gambar14DisplayAttributes.......................................................................................................................7
Gambar15AddItems...................................................................................................................................7
Gambar16AddTextFieldItem....................................................................................................................8
Gambar17P4_IDTextFieldPositionandName..........................................................................................8
Gambar18P4_IDLabel.................................................................................................................................8
Gambar19P4_IDSettings............................................................................................................................9
Gambar20P4_IDSource..............................................................................................................................9
Gambar21Add2ndItem............................................................................................................................10
Gambar22Add2ndTextField...................................................................................................................10
Gambar23P4_KETPositionandName......................................................................................................10
Gambar24P4_KETLabel............................................................................................................................11
Gambar25P4_KETSettings........................................................................................................................11
Gambar26P4_KETSource..........................................................................................................................12
Gambar27DaftarItemyangAda...............................................................................................................12
Gambar28AddButton...............................................................................................................................13
Gambar29PilihButtonRegion...................................................................................................................13
Gambar30TentukanButtonPosition........................................................................................................13
Gambar31ButtonAttributes.....................................................................................................................14
Gambar32DIsplayProperties....................................................................................................................14
Gambar33ButtonActionWhenClicked....................................................................................................15
Gambar34ButtonConditionalDisplay......................................................................................................15
Gambar35DaftarButtondanItem............................................................................................................16
Gambar36Proceduresimpan_data_coba.................................................................................................17
Gambar37AddProcesses..........................................................................................................................17
Gambar38PL/SQLProcessType................................................................................................................18
Gambar39ProcessAttributes....................................................................................................................18
Pageii

Gambar40PL/SQLPageProcess................................................................................................................19
Gambar41PenentuanPesanKonfirmasi...................................................................................................19
Gambar42ProcessConditions...................................................................................................................20
Gambar43RunPagedariPageDefinition..................................................................................................20
Gambar44FormLoginAplikasi..................................................................................................................21
Gambar45TampilanFormInputCoba.......................................................................................................21
Gambar46IsiTabelCoba...........................................................................................................................22
Gambar47PengisiannilaipadaFormInputCoba......................................................................................22
Gambar48KonfirmasiProsesSimpanBerhasil..........................................................................................22
Gambar49IsiTabelCobaBertambah........................................................................................................23

Pageiii

Pendahuluan

Oracle APEX mampu membuat form input dengan relatif mudah. Bagi yang terbiasa dengan HTML,
berikutinicarapembuatanforminputdatadenganmenggunakanOracleAPEX.VersiOracleAPEXyang
digunakanadalah4.2,bagiyangmenggunakanversilainakanterdapatbeberapaperbedaandalamalur
pembuatannya. Pembuatan Form Input dengan HTML terbagi menjadi 4 tahapan yaitu pembuatan
Region,penambahanItem,penambahanButtondanterakhirpembuatanProcesses.Berikutinilangkah
langkahyangharusdilakukan:

Pembuatan Page Baru

Sebuahpage/halamanharusditambahanuntukmemulaipembuatanforminput.Berikutinilangkah
langkahpembuatanpagebaru:
1. BuatlahsebuahtabeldengannamaCOBAyangmemiliki2buahatribut.AtributtersebutadalahID
dengantipedataNUMBERdanKETdengantipedataVARCHAR2(32).AtributIDmerupakanatribut
kunci(PrimaryKey).

Gambar1StrukturTabelCoba

2. LoginkeOracleAPEXlalumasukkemenuApplicationBuilder.Masuk/Editaplikasiyangsudahada
(Percobaan)

Page1of23


Gambar2ApplicationBuilderHome

3. Dari Application Builder, tambahkan sebuah page/halaman baru dengan malakukan klik pada
tombolCreatePage

Gambar3CreateNewPage

4. TambahkansebuahhalamankosongdenganmemilihlankPage
Page2of23


Gambar4AddBlankPage

5. Tentukannomorpagedanaliasnya(optional)laluklikNext

Gambar5PageAttributes

6. Tentukannamaform(misal:FormdariHTML)laluklikNext

Gambar6PageName

7. PilihDonotusetabskarenakitatidakakanmembuattabpadahalamanweb,klikNext
Page3of23


Gambar7TabOptions

8. ReviewhalamanConfirm,jikasesuaikliktombolFinish

Gambar8HalamanKonfirmasi

9. Halaman 4 telah berhasil di buat. Saat ini kita belum akan menjalankan Page 4 tersebut, klik Edit
Pageuntukmelakukanpenambahanregion,itemdanbutton

Gambar9KonfirmasiBerhasil

Page4of23

10. MelaluihalamanPageDefinition,rubahtampilanmenjadiComponentViewsepertigambarilustrasi
berikut

Gambar10PageDefinitionComponentView

Pembuatan HTML Region

Setelahsebuahpageberhasildibuat,regionharusditambakanpadapagetersebut.JenisRegionyang
akanditambahkanadalahHTMLregion.BerikutinilangkahlangkahpembuatanHTMLregion:
1. FokuspadaareaRegion.Tambahkansebuahregiondenganmelakukanklikpadatandaplus(+)

Gambar11AddRegion

2. TambahkansebuahHTMLregion

Page5of23


Gambar12AddHTMLRegion

3. PilihHTMLpadapilihansubregion

Gambar13HTMLSubRegion

4. Tentukannamaform(misal:FormInputCoba).Selesaikanpenambahanregiondenganmelakukan
klikpadatombolCreateRegion

Page6of23


Gambar14DisplayAttributes

Penambahan Item pada HTML Region

ItemmerupakankomponenyangakandipasangpadaregionHTML.Sebuahregiondapatmemilikisatu
ataulebihitem.ContohItemadalahtextfield,textareadanselectlist.Berikutinilangkahlangkah
penambahanitempadasebuahregion:
1. Kliktandaplus(+)untukmenambahkanitem

Gambar15AddItems

2. TambahkansebuahTextFielddenganmelakukanklikpadakotakTextField

Page7of23


Gambar16AddTextFieldItem

3. Tentukannamatextfieldtersebut(misal:P4_ID)laluklikNext

Gambar17P4_IDTextFieldPositionandName

4. TentukanlabeldaritextfieldP4_ID(misal:Kode)laluklikNext

Gambar18P4_IDLabel

Page8of23


5. TentukansettingpadaformtersebutsepertigambarilustrasiberikutlaluklikNext

Gambar19P4_IDSettings

6. Biarkan area source secara default. Selesaikan penambahan item dengan melakukan klik pada
tombolCreateItem

Gambar20P4_IDSource

7. FokuskembalipadaareaItems.Tambahkanitemkeduadenganmelakukantandaplus(+)

Page9of23


Gambar21Add2ndItem

8. PilihTextField

Gambar22Add2ndTextField

9. Tentukannamaitem(misal:P4_KET)laluklikNext

Gambar23P4_KETPositionandName

Page10of23

10. TentukanlabelP4_KET(misal:Keterangan)laluklikNext

Gambar24P4_KETLabel

11. TentukansettingdariP4_KETsepertigambarilustrasiberikutlaluklikNext

Gambar25P4_KETSettings

12. SelesaikanpenambahanitemP4_KETdenganmelakukanklikpadatombolCreateItem

Page11of23


Gambar26P4_KETSource

13. BerikutiniPageRenderingdengan2buahitem(P4_IDdanP4_KET)

Gambar27DaftarItemyangAda

Penambahan Button pada HTML Region

Buttondiperlukanuntukmelakukanprosessubmitpadasebuahform.Berikutinilangkahlangkah
pembuatanbutton:
1. FokuspadaareaButtonslaluklikpadatandaplus(+)
Page12of23


Gambar28AddButton

2. Tentukanregiontujuandimanabuttonakanditempatkan(misal:FormInputCoba)laluklikNext

Gambar29PilihButtonRegion

3. Tentukan posisi button pada form. Misal button akan berada di bawah item maka pilih sesuai
gambarilustrasiberikut

Gambar30TentukanButtonPosition

Page13of23


4. Tentukannamabutton(misal:P4_BTN_PROSES)laluklikNext

Gambar31ButtonAttributes

5. TentukanSequence(urutanbutton)misal30.KlikNext

Gambar32DIsplayProperties

6. Tentukanaksibuttonketikadiklik.PilihSubmitPagelaluklikNext

Page14of23


Gambar33ButtonActionWhenClicked

7. SelesaikanpenambahanbuttondenganmelalukanklikpadatombolCreateButton

Gambar34ButtonConditionalDisplay

8. Sebuah button dengan nama Proses telah berhasil di buat. Sebuah button merupakan item
(komponen) HTML juga, oleh karena itu secara otomatis P4_BTN_PROSES akan tampil pada area
Items.

Page15of23


Gambar35DaftarButtondanItem

Pembuatan Processes

Processesmerupakanbagianyangmenyimpanserangkaiankodeuntukmelakukansebuahaksipada
halamanwebyangdibuatdenganOracleAPEX.PadaProcesseskitadapatmelakukaneksekusiakan
blokPL/SQLbaikmodularmaupunanonymous.Berikutinilangkahlangkahpembuatanprocess:
1. Misal kita akan melakukan eksekusi sebuah procedure ketika tombol Proses di klik. Eksekusi baris
procedure(simpan_data_coba)padagambarilustrasidibawahini.

Page16of23


Gambar36Proceduresimpan_data_coba

2. Sekarang kita fokus pada area Page Processing (kolom tengah). Tambahkan processes dengan
melakukanklikpadatandaplus(+)

Gambar37AddProcesses

Page17of23


3. PilihPL/SQLkarenakitaakanmelakukaneksekusipadaprocedureyangtelahkitabuatsebelumnya

Gambar38PL/SQLProcessType

4. Tentukannamaprocessestersebut(misal:process_simpan_coba)laluklikNext

Gambar39ProcessAttributes

5. KetikkanbariskodingberikutpadaareaPL/SQLPageProcesslaluklikNext

Page18of23


Gambar40PL/SQLPageProcess

6. Selanjutkankitatentukanpesanketikaprosesberhasilataugagal.KlikNext

Gambar41PenentuanPesanKonfirmasi

Page19of23


7. SelesaikanpembuatanprocessesdenganmelakukanklikpadatombolCreateProcess

Gambar42ProcessConditions

8. Seluruh rangkaian pembuatan form telah selesai (region, item, button, process). Klik run page 4
sepertigambarilustrasiberikut(handcursor)

Gambar43RunPagedariPageDefinition

Page20of23

Pengujian Form Input Coba

Setelahforminputberhasildibuat,selanjutnyalakukanpengujianpadaFormInputCobatersebut.
1. Inputkan username dan password jika diperlukan (username & password sama ketika login ke
OracleAPEX)

Gambar44FormLoginAplikasi

2. BerikutinitampilanFormInputCoba

Gambar45TampilanFormInputCoba

3. Sebelum melakukan testing pada Form Input Coba, perhatikan bahwa pada tabel COBA sudah
terdapatsebuahrecorddenganID1danKETPercobaanSatu

Page21of23


Gambar46IsiTabelCoba

4. Mari kembali ke halaman Form Input Coba. Isikan pada Kode nilai 2 dan Keterangan dengan nilai
PercobaanDualalukliktombolProses

Gambar47PengisiannilaipadaFormInputCoba

5. PesanProsesInputDataPercobaanDuaBerhasilakantampilmenandakandatadengankode2telah
masukketabel

Gambar48KonfirmasiProsesSimpanBerhasil

Page22of23

6. AmatitabelCOBA,perhatikanbahwabarisdatatelahbertambahmenjadi2sepertigambarilustrasi
berikut

Gambar49IsiTabelCobaBertambah

Kesimpulan

ProsespembuatanformpadaOracleAPEXdapatdilakukandenganmenggunakanHTMLRegion.Prinsip
pembuatan Form dengan HTML Region mirip dengan proses pembuatan Form dengan bahasa
pemrograman Server Side Scripting (misal : PHP). Terdapat 5 tahap dalam proses pembuatan Form
denganOracleAPEXyaitupembuatanpage,region,item,buttondanprocess.

Page23of23