MembuatFormInputDatadenganHTMLRegionPadaOracleAPEX4.2

Disusunoleh:

BobySiswanto,ST

boby@cisku.com

Pagei

DaftarIsi

DaftarIsi.........................................................................................................................................................i

DaftarGambar..............................................................................................................................................ii

PembuatanPageBaru...................................................................................................................................1

PembuatanHTMLRegion.............................................................................................................................5

PenambahanItempadaHTMLRegion.........................................................................................................7

PenambahanButtonpadaHTMLRegion....................................................................................................12

PembuatanProcesses.................................................................................................................................16

PengujianFormInputCoba........................................................................................................................21

Kesimpulan..................................................................................................................................................23

Pageii

DaftarGambar

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

Pageiii

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

Page1of23

Pendahuluan

Oracle APEX mampu membuat form input dengan relatif mudah. Bagi yang terbiasa dengan HTML,berikutinicarapembuatanforminputdatadenganmenggunakanOracleAPEX.VersiOracleAPEXyangdigunakanadalah4.2,bagiyangmenggunakanversilainakanterdapatbeberapaperbedaandalamalurpembuatannya. Pembuatan Form Input dengan HTML terbagi menjadi 4 tahapan yaitu pembuatanRegion,penambahanItem,penambahanButtondanterakhirpembuatanProcesses.Berikutinilangkahlangkahyangharusdilakukan:

PembuatanPageBaru

Sebuahpage/halamanharusditambahanuntukmemulaipembuatanforminput.Berikutinilangkahlangkahpembuatanpagebaru:

1. BuatlahsebuahtabeldengannamaCOBAyangmemiliki2buahatribut.Atributtersebutadalah IDdengantipedataNUMBERdanKETdengantipedataVARCHAR2(32).AtributIDmerupakanatributkunci(PrimaryKey).

Gambar1StrukturTabelCoba

2. LoginkeOracleAPEXlalumasukkemenuApplicationBuilder.Masuk/Editaplikasiyangsudahada

(Percobaan)

Page2of23

Gambar2ApplicationBuilderHome

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

tombolCreatePage

Gambar3CreateNewPage

4. TambahkansebuahhalamankosongdenganmemilihlankPage

Page3of23

Gambar4AddBlankPage

5. Tentukannomorpagedanaliasnya(optional)laluklikNext

Gambar5PageAttributes

6. Tentukannamaform(misal:FormdariHTML)laluklikNext

Gambar6PageName

7. PilihDonotusetabskarenakitatidakakanmembuattabpadahalamanweb,klikNext

Page4of23

Gambar7TabOptions

8. ReviewhalamanConfirm,jikasesuaikliktombolFinish

Gambar8HalamanKonfirmasi

9. Halaman4 telahberhasildibuat.Saat inikitabelumakanmenjalankanPage4 tersebut,klikEdit

Pageuntukmelakukanpenambahanregion,itemdanbutton

Gambar9KonfirmasiBerhasil

Page5of23

10. MelaluihalamanPageDefinition,rubahtampilanmenjadiComponentViewsepertigambarilustrasiberikut

Gambar10PageDefinitionComponentView

PembuatanHTMLRegion

Setelahsebuahpageberhasildibuat,regionharusditambakanpadapagetersebut.JenisRegionyangakanditambahkanadalahHTMLregion.BerikutinilangkahlangkahpembuatanHTMLregion:

1. FokuspadaareaRegion.Tambahkansebuahregiondenganmelakukanklikpadatandaplus(+)

Gambar11AddRegion

2. TambahkansebuahHTMLregion

Page6of23

Gambar12AddHTMLRegion

3. PilihHTMLpadapilihansubregion

Gambar13HTMLSubRegion

4. Tentukannama form (misal:Form InputCoba).Selesaikanpenambahanregiondenganmelakukan

klikpadatombolCreateRegion

Page7of23

Gambar14DisplayAttributes

PenambahanItempadaHTMLRegion

ItemmerupakankomponenyangakandipasangpadaregionHTML.Sebuahregiondapatmemilikisatuataulebihitem.ContohItemadalahtextfield,textareadanselectlist.Berikutinilangkahlangkahpenambahanitempadasebuahregion:

1. Kliktandaplus(+)untukmenambahkanitem

Gambar15AddItems

2. TambahkansebuahTextFielddenganmelakukanklikpadakotakTextField

Page8of23

Gambar16AddTextFieldItem

3. Tentukannamatextfieldtersebut(misal:P4_ID)laluklikNext

Gambar17P4_IDTextFieldPositionandName

4. TentukanlabeldaritextfieldP4_ID(misal:Kode)laluklikNext

Gambar18P4_IDLabel

Page9of23

5. TentukansettingpadaformtersebutsepertigambarilustrasiberikutlaluklikNext

Gambar19P4_IDSettings

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

tombolCreateItem

Gambar20P4_IDSource

7. FokuskembalipadaareaItems.Tambahkanitemkeduadenganmelakukantandaplus(+)

Page10of23

Gambar21Add2ndItem

8. PilihTextField

Gambar22Add2ndTextField

9. Tentukannamaitem(misal:P4_KET)laluklikNext

Gambar23P4_KETPositionandName

Page11of23

10. TentukanlabelP4_KET(misal:Keterangan)laluklikNext

Gambar24P4_KETLabel

11. TentukansettingdariP4_KETsepertigambarilustrasiberikutlaluklikNext

Gambar25P4_KETSettings

12. SelesaikanpenambahanitemP4_KETdenganmelakukanklikpadatombolCreateItem

Page12of23

Gambar26P4_KETSource

13. BerikutiniPageRenderingdengan2buahitem(P4_IDdanP4_KET)

Gambar27DaftarItemyangAda

PenambahanButtonpadaHTMLRegion

Buttondiperlukanuntukmelakukanprosessubmitpadasebuahform.Berikutinilangkahlangkahpembuatanbutton:

1. FokuspadaareaButtonslaluklikpadatandaplus(+)

Page13of23

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

Page14of23

4. Tentukannamabutton(misal:P4_BTN_PROSES)laluklikNext

Gambar31ButtonAttributes

5. TentukanSequence(urutanbutton)misal30.KlikNext

Gambar32DIsplayProperties

6. Tentukanaksibuttonketikadiklik.PilihSubmitPagelaluklikNext

Page15of23

Gambar33ButtonActionWhenClicked

7. SelesaikanpenambahanbuttondenganmelalukanklikpadatombolCreateButton

Gambar34ButtonConditionalDisplay

8. Sebuah button dengan nama Proses telah berhasil di buat. Sebuah button merupakan item

(komponen)HTML juga,oleh karena itu secaraotomatisP4_BTN_PROSES akan tampilpada areaItems.

Page16of23

Gambar35DaftarButtondanItem

PembuatanProcesses

ProcessesmerupakanbagianyangmenyimpanserangkaiankodeuntukmelakukansebuahaksipadahalamanwebyangdibuatdenganOracleAPEX.PadaProcesseskitadapatmelakukaneksekusiakanblokPL/SQLbaikmodularmaupunanonymous.Berikutinilangkahlangkahpembuatanprocess:

1. Misalkitaakanmelakukaneksekusisebuahprocedureketika tombolProsesdiklik.Eksekusibarisprocedure(simpan_data_coba)padagambarilustrasidibawahini.

Page17of23

Gambar36Proceduresimpan_data_coba

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

melakukanklikpadatandaplus(+)

Gambar37AddProcesses

Page18of23

3. PilihPL/SQLkarenakitaakanmelakukaneksekusipadaprocedureyangtelahkitabuatsebelumnya

Gambar38PL/SQLProcessType

4. Tentukannamaprocessestersebut(misal:process_simpan_coba)laluklikNext

Gambar39ProcessAttributes

5. KetikkanbariskodingberikutpadaareaPL/SQLPageProcesslaluklikNext

Page19of23

Gambar40PL/SQLPageProcess

6. Selanjutkankitatentukanpesanketikaprosesberhasilataugagal.KlikNext

Gambar41PenentuanPesanKonfirmasi

Page20of23

7. SelesaikanpembuatanprocessesdenganmelakukanklikpadatombolCreateProcess

Gambar42ProcessConditions

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

sepertigambarilustrasiberikut(handcursor)

Gambar43RunPagedariPageDefinition

Page21of23

PengujianFormInputCoba

Setelahforminputberhasildibuat,selanjutnyalakukanpengujianpadaFormInputCobatersebut.

1. Inputkan username dan password jika diperlukan (username & password sama ketika login keOracleAPEX)

Gambar44FormLoginAplikasi

2. BerikutinitampilanFormInputCoba

Gambar45TampilanFormInputCoba

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

terdapatsebuahrecorddenganID1danKETPercobaanSatu

Page22of23

Gambar46IsiTabelCoba

4. MarikembalikehalamanForm InputCoba. IsikanpadaKodenilai2danKeterangandengannilai

PercobaanDualalukliktombolProses

Gambar47PengisiannilaipadaFormInputCoba

5. PesanProsesInputDataPercobaanDuaBerhasilakantampilmenandakandatadengankode2telah

masukketabel

Gambar48KonfirmasiProsesSimpanBerhasil

Page23of23

6. AmatitabelCOBA,perhatikanbahwabarisdatatelahbertambahmenjadi2sepertigambarilustrasiberikut

Gambar49IsiTabelCobaBertambah

Kesimpulan

ProsespembuatanformpadaOracleAPEXdapatdilakukandenganmenggunakanHTMLRegion.Prinsippembuatan Form dengan HTML Region mirip dengan proses pembuatan Form dengan bahasapemrograman Server Side Scripting (misal : PHP). Terdapat 5 tahap dalam proses pembuatan FormdenganOracleAPEXyaitupembuatanpage,region,item,buttondanprocess.