Upload
bobysiswanto
View
278
Download
6
Embed Size (px)
DESCRIPTION
Membuat Form Input Dengan HTML Region Pada Oracle APEX 42
Citation preview
MembuatFormInputDatadenganHTMLRegionPadaOracleAPEX4.2
Disusunoleh:
BobySiswanto,ST
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.