Membuat aplikasi enkripsi caesar untuk android dengan html dan javascript mengunakan phone gap
Membuat Form Input Dengan HTML Region Pada Oracle APEX 42
-
Upload
bobysiswanto -
Category
Documents
-
view
279 -
download
6
description
Transcript of Membuat Form Input Dengan HTML Region Pada Oracle APEX 42
-
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.