tutorial power builder 8

242
 © mztolo 2006 PB pemula 1 POWERBUILDER #1 Powerbuilder adalah bahasa pemrograman database visual, dg fitur dan kelebihan- kelebihan antara lain : - termasuk golongan 4GL/bhs pemrograman generasi keempat - memakai metodologi RAD (Rapid Application Development) sehingga  pengerjaan program akan cepat. - client/server (2-tier maupun 3-tier) - oop atau berorientasi object dll. Untuk latihan sample yg anda perlukan adalah : - PowerBuilder product www.sybase.com  - Database dengan mysql product www.mysql.com Mari kita mulai……jalankan PB anda spt ini : Penjelasan gambar di atas adalah : 1. Menu Bar (menu-menu dari PB) 2. Toolbar (icon-icon toolbar PB) 3. Window System Tree (berisi informasi sistem object dan object aplikasi yg lain semacam function, events, window dll.) 4. Window Clip (digunakan untuk menempatkan output ke dlm window clip) 5. Window Output (output informasi spt error message dan pro ses yg lain) 6. Painter (layar editor tempat membuat object) Anda bisa menampilkan atau tidak window yg ada dengan mengaturnya di menu “Window” spt tampak di gambar atas.

Upload: budi-budianto

Post on 08-Oct-2015

657 views

Category:

Documents


122 download

DESCRIPTION

Tutorial Power Builder 8

TRANSCRIPT

  • mztolo 2006 PB pemula 1

    POWERBUILDER #1

    Powerbuilder adalah bahasa pemrograman database visual, dg fitur dan kelebihan-kelebihan antara lain :

    - termasuk golongan 4GL/bhs pemrograman generasi keempat - memakai metodologi RAD (Rapid Application Development) sehingga

    pengerjaan program akan cepat. - client/server (2-tier maupun 3-tier) - oop atau berorientasi object dll.

    Untuk latihan sample yg anda perlukan adalah :

    - PowerBuilder product www.sybase.com - Database dengan mysql product www.mysql.com

    Mari kita mulaijalankan PB anda spt ini :

    Penjelasan gambar di atas adalah :

    1. Menu Bar (menu-menu dari PB) 2. Toolbar (icon-icon toolbar PB) 3. Window System Tree (berisi informasi sistem object dan object aplikasi yg lain

    semacam function, events, window dll.) 4. Window Clip (digunakan untuk menempatkan output ke dlm window clip) 5. Window Output (output informasi spt error message dan proses yg lain) 6. Painter (layar editor tempat membuat object)

    Anda bisa menampilkan atau tidak window yg ada dengan mengaturnya di menu Window spt tampak di gambar atas.

  • mztolo 2006 PB pemula 2

    Selanjutnya untuk memulai pembuatan program klik icon New spt ini :

    Di bahasa pemrograman lain di sebut juga project, di PB di sebut Workspace atau area kerja kita. Tampak modul spt ini :

    Perhatikan di page Workspace pilih icon Workspace dan klik OK

    Ketik nama workspace nya siswa dan saya simpan di folder c:\samplePB

  • mztolo 2006 PB pemula 3

    Klik tombol SAVE Tampak workspace siswa telah tercipta :

    Klik tombol New lagi dan pilih page Target :

    Pilih target type nya, yaitu Application karena kita akan membuat aplikasi. Klik tombol OK

  • mztolo 2006 PB pemula 4

    Ketik nama targetnya misal siswa juga.spt ini :

    Waktu anda klik di entrian bawah selanjutnya akan tampak spt ini.

  • mztolo 2006 PB pemula 5

    Klik tombol FINISH maka target tercipta dan hasilnya akan tampak spt ini :

    Dan kalau anda lihat di direktory samplePB akan tampak spt ini :

    Keterangan : siswa.pbw adalah nama file workspacenya siswa.pbt adalah nama file targetnya siswa.pbl adalah nama file librarynya

  • mztolo 2006 PB pemula 6

    Ok selanjutnya klik tombol New kembali untuk membuat window :

    Pilih page PB Object dan klik Window serta tombol OK

    Tampak window atau form yg anda buat sudah tampak di painter anda..

  • mztolo 2006 PB pemula 7

    Agar view tampak luas anda bisa close terlebih dahulu window clip dan window output, dan hanya menyisakan window system tree serta painter. Selanjutnya mari kita tambahkan text di dalam window itu..

    Klik kontrol command button spt tampak di atassampai tampil spt ini :

    Pilih Static text spt tampak di gambar atas dan klik di area window/form anda spt ini :

  • mztolo 2006 PB pemula 8

    Seperti tampak pada gambar di atas..selanjutnya ganti text/caption none anda misalnya dg tulisan spt ini Latihan 1st ku

    Anda bisa atur font nya spt ini di properties-nya

    Atau bisa anda atur lewat ini

  • mztolo 2006 PB pemula 9

    Selanjutnya tambahkan command button /tombol di window/form itu.caranya klik control command buttonnya dulu dan pilih command button spt ini :

    Selanjutnya klik di area window spt ini dan atur text nya shg menjadi spt di bawah.

    Untuk title/caption window nya sendiri anda klik di area kosong window dan ganti tiltle nya :

  • mztolo 2006 PB pemula 10

    Menjadi spt ini..misalnya

    Selanjutnya double click di tombol Close untuk mengisi click eventnya spt ini :

    Anda ketik close(parent) yg artinya menutup parent dari tombol itu ..parent adalah tempat tombol berada dg arti lain window itu. Untuk kembali ke desain window tadi klik page/tab/frame Layout spt tampak di gambar di bawah.

    Spt ini

  • mztolo 2006 PB pemula 11

    Klik tombol save sampai tampil modul spt ini :

    Ketik nama window-nya w_utama dan klik tombol OK Tampak juga jika anda ingin menambahkan comments/komentar.dan nama library dari window yg anda buat. Hasilnya spt initampak di window system tree anda :

  • mztolo 2006 PB pemula 12

    Anda bisa close window yg anda buat dg klik tombol close spt ini :

    Selanjutnya untuk memanggil form ini pada saat aplikasi jalan pertama kali. Double klik di object aplikasi siswa dan ketik koding spt berikut :

    Anda perhatikan comments/komentar di event di mulai dg tanda // open(w_utama) artinya buka/jalankan window utama ini. Catatan : Dalam koding command button Close di window w_utama bisa anda ganti menjadi close(w_utama) karena nama window itu adalah w_utama Selanjutnya close dan save spt ini :

  • mztolo 2006 PB pemula 13

    Untuk test run program anda klik icon ini dan lihat hasilnya

    Inilah latihan aplikasi 1st anda . J Klik tombol close untuk release/close window/form tersebut.. Oklalu bagaimana membuat file EXE nya ?! Langkah selanjutnya adalah kita harus membuat project nya dg klik tombol New .pilih tab/page Project pilih item Application dan klik tombol OK spt ini :

  • mztolo 2006 PB pemula 14

    Tampak modul spt ini dan isi spt tampak di gambar :

    Perhatikan nama Execute File Name nyaharus komplit termasuk direktorynya Klik tombol close atau klik icon save untuk menyimpan project ini :

  • mztolo 2006 PB pemula 15

    Ketik nama project dan komentar yg di inginkan serta klik tombol OK Hasilnya spt ini

    Selanjutnya klik menu Run di atas serta klik .Full Build Workspace spt ini

    Tampak report build nya di window output :

    Kalo ada error akan tampil juga di window output ini..

  • mztolo 2006 PB pemula 16

    Berikutnya klik menu Run lagi dan pilih Deploy Workspace

    Tampilan di window outputnya spt ini.finish dan sukses !

    Tampak isi direktory samplePB anda spt ini :

    Klik file siswa.exe .yaprunning well J Untuk selanjutnya jika anda mau implementasi atau install di client cukup file siswa.exe, file siswa.pbd dan file2 runtime PB nya yg anda sertakan. Okdengan demikian sample 1st untuk PB cukup sekian dulunantikan sample2 berikutnya yg sudah mulai dg database J Siapkan diri anda dg database mysql, myodbc, mysqlfront tentunya atau interface mysql yg lain. Akhir kata.sukses untuk anda !!

  • mztolo 2006 PB #2 membuat menu 1

    POWERBUILDER #2

    Dalam PB #2 ini anda akan belajar membuat window type mdi! dan cara membuat menu, buka workspace yg pernah anda buat di latihan PB #1 :

    Rancangan aplikasi yg akan di buat nantinya adalah berupa aplikasi dg layar utama dan ada menu untuk menjalankan window/form/modul entri yg ada. Jadi tidak spt waktu latihan 1st di PB #1 yg tampil hanya berupa window tunggal saja. Tipe data window utama untuk aplikasi dan bersifat spt screen, di PB dikenal sebagai type window mdi! (multiple document interface) Sebuah type window mdi!, type window ini sendiri harus memiliki menu Ok sebelum anda tambah bingung..ikuti saja langkah2 berikut. Membuat MENU : Klik tombol New pilih tab PB Object pilih Menu dan klik tombol OK

  • mztolo 2006 PB #2 membuat menu 2

    Tampak di painter anda modul menu paintertempat anda membuat menu

    Klik kanan pada text untitled0 spt ini dan klik Insert Submenu Item

    Ketik &File spt tampak di gambar di bawah ini.

    Tanda & pada nama2 menu di gunakan sbg shortcutsehingga bisa di panggil dengan menekan ALT+F

  • mztolo 2006 PB #2 membuat menu 3

    Tampak juga di propertiesnya spt ini..

    Klik kanan di &File dan klik Insert Submenu Item untuk membuat sub-menunya

    Ketik Entri &Siswa spt tampak di gambar bawah

  • mztolo 2006 PB #2 membuat menu 4

    Ulangi langkah2 di atas untuk membuat sub-menu berikutnyasehingga hasilnya spt ini

    Di layar sebelah kanan tampak layout/display/preview tampilan menu yg telah di buat. Selanjutnya buat menu item lain dg cara klik kanan &File dan klik spt di bawah ini..

    Ketik spt tampak berikut ini.

    Dan buat sub-menu Transaksi serta menu item berikutnya sehingga hasilnya spt ini

  • mztolo 2006 PB #2 membuat menu 5

    Save dan beri nama mn_siswa spt tampak di gambar bawah

    Dengan demikian proses pembuatan menu sudah selesai J Tampak mn_siswa sudah ada di tree system anda :

  • mztolo 2006 PB #2 membuat menu 6

    Ok selanjutnya double click window w_utama .

    Perhatikan : Title =Program Entri Data Siswa WindowType =mdi! WindowState =maximized! Icon =Form! Selanjutnya klik tombol di kanan entrian MenuName

  • mztolo 2006 PB #2 membuat menu 7

    Tampak modul spt ini

    Dan klik tombol OKsehingga tampak di properties spt gambar di bawah ini.

    Save perubahan window w_utama.

    dan coba run aplikasi klik icon

  • mztolo 2006 PB #2 membuat menu 8

    Yap..sukses. J

    Hapus text Latihan 1st ku dan tombol Close..maka jika di run akan spt ini

    Note : Menu-menu di atas belum berisi command/koding, sehingga jika anda klik menu Exit pun window/aplikasi tdk akan Close atau Exit Bagaimana cara mengisinya ? Mari kita lakukan.. Double click di mn_siswa untuk melakukan modifikasi menu tersebut Selanjutnya double click di menu item E&xit agar event click nya aktif.

  • mztolo 2006 PB #2 membuat menu 9

    Ketik koding spt tampak di gambar bawah.

    Perhatikan : if messagebox('Exit','Anda Yakin ?',question!,YesNo!) = 1 then halt end if Note : m_file.m_exit artinya m_exit (E&xit) merupakan sub-menu dari m_file (&File) Pada saat anda klik menu Exit maka akan keluar pertanyaan spt ini

    Jika anda klik tombol Yes maka sistem akan HALT alias berhenti atau close(nilai return valuenya 1, kalo 2 adalah No perhatikan susunan YesNo! yes=1 ..no=2) Perhatikan gambar di atas dan perhatikan koding-nyaanda bisa ambil kesimpulan sendiri.misal question! itu simbol ? spt tampak di gambar.begitu juga text yg lainnya. Untuk koding yg lain akan dibuat sambil jalannantikan sample berikutnya J Sukses untuk anda !!

  • mztolo 2006 PB #3 koneksi data 1

    POWERBUILDER #3

    Untuk latihan berikut ini Anda siapkan database sekolah dengan table tblsiswa di mysql anda, adapun struktur tablenya spt ini :

    1. nis char(8) 2. nama varchar(50) 3. kota varchar(15) 4. tgllhr date 5. jkel char(1) 6. tabungan float(10,0)

    Spt tampak di bawah ini, dg mySQLFront 2.5 :

    Selanjutnya buka workspace yg pernah anda buat di latihan PB sebelumnya :

  • mztolo 2006 PB #3 koneksi data 2

    Setelah database mysql anda create selanjutnya adalah membuat koneksi database dengan cara.klik icon Database

    Klik tombol + di depan ODB ODBC sehingga ter-expand. Klik kanan di ODB ODBC dan klik New Profile.

  • mztolo 2006 PB #3 koneksi data 3

    Tampil modul Database Profile Setup ODBC spt ini

    Isi data/value spt tampak di atas.. Profile Name: =sekolah User ID: =root Isolation Level: =Read Uncommitted Driver-Specific Parameters: = DRIVER={MySQL ODBC 3.51 Driver};DESC=;DATABASE=sekolah; SERVER=guzrud;UID=root;PASSWORD=;PORT=3306;OPTION=3;STMT=; Note : sekolah adalah nama databasenya guzrud adalah nama servernya, sesuaikan dg nama server anda root adalah id standard koneksi ke mysql nya Commit on Disconnect jangan di centang ! Klik tombol Apply

  • mztolo 2006 PB #3 koneksi data 4

    Klik tab Preview sehingga tampak spt ini..

    Klik tombol Copy untuk mengcopy listing profile koneksinya.(perhatikan kalo copy listing tersebut masih dlm kondisi ter-blok spt tampak di gambar atas) Gunanya untuk apa ?! nanti anda tahu J Klik tombol Test Connection untuk memastikan connection successful..

    Yap.sukses. !! Klik tombol OK.. Selanjutnya untuk keluar dari modul profile ini klik tombol OK lagi

  • mztolo 2006 PB #3 koneksi data 5

    Tampak profile koneksi sekolah telah tercipta..

    Klik kanan dan Connect

    Perhatikan tanda centang warna hijau yg menandakan koneksi yg aktif.

  • mztolo 2006 PB #3 koneksi data 6

    Ok selanjutnya double click object application siswa.

    Dalam open event nya di atas command open(w_utama) klik kanan mouse dan paste listing kode profile koneksinya .shg hasilnya spt ini( jadi tahu kan kenapa tadi anda diminta untuk click tombol Copy lihat hal. 4)

    Tambahkan command untuk connect stl listing tersebut sbl open(w_utama) connect; if SQLCA.SQLDBCode0 then messagebox('Koneksi Gagal',SQLCA.SQLErrText,stopsign!) halt close end if Note : connect; adalah perintah untuk konek ke database sesuai listing SQLCA nya jika SQLCA.SQLDBCode bernilai selain 0 (nol) maka koneksi gagaljika koneksi gagal maka sistem close. SQLCA sendiri di PB adalah sebuah object dg type Transaction yg berfungsi menangani koneksi ke database, SQLCA di deklarasikan sbg variable yg bersifat global dan merupakan object standard PB untuk koneksi ke database.

  • mztolo 2006 PB #3 koneksi data 7

    Sehingga menjadi spt ini

    Mmmmm kenapa harus ada 2x koneksi lalu yg di pakai yg mana ? Dua-duanya di pakai.. Koneksi di Database akan kepakai pada saat kita desain datawindow.interface untuk datanya (baik sbg query maupun editing dan report) Sedangkan koneksi di object aplikasi dipakai untuk koneksi pada saat aplikasi itu running Simpan perubahan yg terjadi ini akan terpakai pada saat pembuatan datawindow, ada di sample berikutnya J Dengan demikian proses pembuatan profile koneksi data sudah selesai J Sukses untuk anda !!

  • mztolo 2006 PB #4 datawindow 1

    POWERBUILDER #4

    Sample kali ini adalah membuat modul entry untuk data siswa. Modul ini berupa window dgn beberapa tombol dan datawindow sbg interface datanya. Datawindow sendiri berfungsi sbg display, serta memungkinkan user untuk memanipulasi, update data dan informasi yg lain. Window sendiri dalam hal ini berfungsi sbg tempat datawindow tersebut. Jadi kalo digambarkan akan memiliki urutan sb : Data Datawindow Window Mari kita mulai.Klik tombol New sampai tampil spt ini..

    Pilih tab DataWindow, pilih Freeform dan klik tombol OK

    Klik tombol Next >

  • mztolo 2006 PB #4 datawindow 2

    Klik table tblsiswa dan klik tombol Add All serta diikuti tombol OK, sampai tampil modul spt ini

    Klik tombol Next >

  • mztolo 2006 PB #4 datawindow 3

    Untuk mengakhiri klik tombol Finish datawindow anda sudah jadi

  • mztolo 2006 PB #4 datawindow 4

    Setup/lihat update properties datawindow-nya.klik menu Rows dan klik menu Update Propertiesnyaspt ini

    Perhatikan .setting updatenya sudah benar.klik OK

    Note : Allow Updatesnya sudah di centang Table to Updatenya sudah benar Updateable Columnsnya sudah benar Unique Key Column(s)nya juga sudah benar sesuai primary key mysql sbg databasenya. Begitu juga klausa dan key modifikasinya juga sudah benar.

  • mztolo 2006 PB #4 datawindow 5

    Save datawindow tersebutdg nama dw_entri_siswadan klik OK

    Tampak di system tree anda

    Selanjutnya membuat window sbg tempat kontrol datawindow dw_entri_siswa tersebut Tidak perlu saya jelaskan secara rinci langkah2 nya karena di sample sebelumnya telah ada sample membuat window.

    Perhatikan di window ini ada 9 tombol spt tampak di gambar atas..

  • mztolo 2006 PB #4 datawindow 6

    Perhatikan propertiesnya .anda buat spt contoh ini..

    Klik datawindow dw_entri_siswa yg ada di system tree dan drag ke window.spt ini

  • mztolo 2006 PB #4 datawindow 7

    Rapikan sehingga menjadi spt ini(atur lebar dan tata letakknya)

    Perhatikan properties datawindow dw_entri_siswa.

    Name control datawindow ini adalah dw_1 .nama ini bisa anda ganti sesuai keinginan andasementara kita pakai dw_1 dulu.. Double click di area kosong window untuk mengaktifkan open event nya dan ketik : dw_1.setTransObject(SQLCA) Selanjutnya mari kita isi click event dari masing2 tombolnya.. Kita mulai dari tombol Retrieve.. double click tombol tsb.ketik koding ini : dw_1.retrieve() Note : dw_1 adalah nama dari kontrol datawindownya spt yg dijelaskan di atas setTransObject(SQLCA) berfungsi untuk memberikan sepisifikasi object transaksi yg di pergunakan, dalam hal ini adalah SQLCA. retrieve() adalah perintah untuk SELECT (table/view) atau EXEC (store procedure). Double click tombol Add dan ketik koding berikut.(untuk menambah) dw_1.ScrollToRow(dw_1.insertrow(0)) dw_1.setcolumn(1) dw_1.setfocus()

  • mztolo 2006 PB #4 datawindow 8

    Note : insertrow(0) berfungsi untuk menambahkan data baru scrolltorow() tersendiri berfungsi untuk mengeser pointer ke row baru/kosong tsb. setcolumn(1) aktifkan kolom 1 setfocus() aktifkan kursor Double click tombol Update dan ketik koding berikut(untuk menyimpan) if dw_1.update()=1 then commit; messagebox('Info..','Penyimpanan Sukses !',information!,ok!) else rollback; messagebox('Info..','Penyimpanan Gagal !',information!,ok!) return end if Note : Jka update() sukses, return value =1 maka commit jika tidak akan di rollback atau di kembalikan spt keadaan sbl proses editing. Double click tombol Delete dan ketik koding berikut(untuk hapus data) if messagebox("Hapus Data","Anda Yakin ?",Exclamation!,YesNo!,2)=2 then return -1 if dw_1.rowcount()>0 then dw_1.deleterow(0) dw_1.setfocus() if dw_1.update()=1 then commit; messagebox('Info..','Penghapusan Sukses !',information!,ok!) else rollback; messagebox('Info..','Penghapusan Gagal !',information!,ok!) return -1 end if else return -1 end if Note : deleterow(0) berfungsi untuk menghapus row aktif. Double click tombol Close dan ketik koding berikut(untuk close window) close(parent)

  • mztolo 2006 PB #4 datawindow 9

    Double click tombol dan ketik koding berikut(untuk go bottom) if dw_1.getrow() = dw_1.rowcount() then messagebox(":)","Data terakhir !",Information!,Ok!) else dw_1.scrolltorow(dw_1.rowcount() ) end if Note : scrolltorow(jml row datawindow) artinya sama juga ke row terakhir Ok..koding sudah selesai save window anda dg nama w_entri_siswa

  • mztolo 2006 PB #4 datawindow 10

    Selanjutnya double click menu Entri &Siswa dan ketik koding untuk memanggil window w_entri_siswa spt ini

    Perhatikan koding di m_file.m_entrisiswa : opensheet(w_entri_siswa,w_utama,2,original!) Note : Membuka window w_entri_siswa sbg sheet atau lembar kerja yg bernaung di bawah/di dalam window w_utama. Angka 2 menunjukkan nomor menu item yg diasosiasikan dg sheet yg di buka. original! menandakan window di open sesuai ukuran aslinya. (anda bisa melihat detail penjelasan di help PB.blok command yg ingin dilihat detail helpnya dan tekan tombol Shift + F1) Kenapa dipakai opensheet() bukan open(w_utama) spt contoh sebelumnya ? Kalo anda pakai open(w_utama) maka akan di anggap window terpisah dari window mdi!-nya dan bersifat tdk always on the top atau modeless Save perubahan di menu mn_siswa .. Jalankan aplikasi anda..klik tombol Run klik menu File > Entri Siswa

  • mztolo 2006 PB #4 datawindow 11

    Begitulah tampilan sheet/window entri anda..jika data sudah ada klik tombol Retrieve untuk menampilkan data yg pernah di entri. Klik tombol ADD isi data spt ini dan klik tombol Update

    Yap.data tersimpan dg sukses J klik OK Ok dengan demikian sample datawindow dan window entri sudah selesai J Apakah sample di atas sudah maksimal ?! Jelas belum. Anda masih bisa mempercantik tampilan-nya dan memberikan toolbars sheetnya Akan di bahas di sample berikutnya Sukses untuk anda !!

  • mztolo 2006 PB #5 sheet/window 1

    POWERBUILDER #5

    Perhatikan sheet/window entri yg pernah anda buat sebelumnya Masih lugu dan belom di make-up J

    Dari system tree double click window entri siswa w_entri_siswa shg tampak spt ini Dan rightclick di area datawindow control nya.shg tampak spt berikut

    Untuk modifikasi datawindow nyaklik Modify DataWindow

  • mztolo 2006 PB #5 sheet/window 2

    Sehingga tampak spt di bawah.

    Paling atas adalah design layout dari datawindownyaspt anda pernah buat Bawahnya adalah preview dari datawindownya Sedang yg paling bawah adalah list dari field2 databasenya. Tekan dan tahan tombol control dan klik text keterangan dari field2 yg ada spt ini

  • mztolo 2006 PB #5 sheet/window 3

    Lalu di propertiesnya anda setting border nya spt iniunderline

    Hasilnya spt ini.

    Selanjutnya coba click area kosong dari datawindow anda dan klik lagi text Tgllhr : seperti ini :

  • mztolo 2006 PB #5 sheet/window 4

    Ubah property text Tgllhr : di kolom textnya spt tampak..berikut ini :

    Ganti Text yg ada dg Lahir : saja.shg tampak spt ini dan hasilnya.

    Anda coba ubah Jkel : menjadi Sex : shg tampak spt ini hasil akhirnya.

  • mztolo 2006 PB #5 sheet/window 5

    Tekan dan tahan tombol control lagi serta click semua field yg ada.spt ini :

    Atur property border nyaspt ini :

    Hasilnya spt ini :

  • mztolo 2006 PB #5 sheet/window 6

    Anda juga bisa coba pilihan tampilan border yg lain :

    Selanjutnya rapikan dan rapatkan item2 atau field yg ada di situspt ini :

    Serta rapatkan band detail anda ke atas.klik mouse dan geser ke atas spt ini :

    Okclose painter editing datawindow ini dan jgn lupa save perubahan yg ada.

  • mztolo 2006 PB #5 sheet/window 7

    Perhatikan window anda.spt ini :

    Rapikan datawindow control dan tombol2 yg ada di window/sheet tersebut.spt ini :

    Anda juga bisa atur border/borderstyle datawindow control nya shg menjadi spt ini :

  • mztolo 2006 PB #5 sheet/window 8

    Close dan save perubahan tersebut..lalu jalankan aplikasi dan panggil window/sheet :

    Lebih indah bukan .. J Dengan demikian sample make-up text, control field, window dan datawindow control sudah selesai J Anda bisa coba sendiri dg efek bold, italic dan warna sesuai selera anda . Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #6 event di datawindow 1

    POWERBUILDER #6

    Jalankan aplikasi anda dan buku sheet/window entri data siswa spt ini Klik data di nis dan tekan tombol ENTER ! Apa yg terjadi ?!

    Data akan bergeser/bergerak ke record selanjutnya. Untuk menggeser pointer dari satu field/kolom ke field/kolom lain, misal dari nis ke nama bisa anda pakai tombol tab atau tabulator Bagimana jika kita ingin mengeser pointer antar field/data dg tombol panah atas/bawah atau tombol enter ? Anda harus menambahkan event di datawindow controlnya. Mari kita lakukan J Pada kondisi window painter editing klik datawindow control anda.

    Selanjutnya klik tab Event List yg ada di bawahspt tampak di gambar

  • mztolo 2006 PB #6 event di datawindow 2

    Selanjutnya klik kanan mouse dan pilih Add untuk menambah event baru.

    Pilih powerbuilder object-nya datawindow control yg bernama dw_1

  • mztolo 2006 PB #6 event di datawindow 3

    Ketik di Return Type pilih long dan untuk Event Name ketik ue_tombol Selanjutnya di Event ID: pilih pbm_dwnkey Dan hasilnya akan spt ini..

    Selanjutnya anda bisa mengetik koding di dalam event ue_tombol ini.(ingat nama ini bebas ya.tdk harus ue_tombol, justru yg penting adalah Event ID nya. Anda perhatikan argument type keycode dan namenya key serta keyflags adalah default value yg di punyai pbm_dwnkey jika ini blom keluar/ada biarkan saja, pada saat close event editor ini nantinya jika keluar info untuk Ignore tekan Yes saja.

  • mztolo 2006 PB #6 event di datawindow 4

    Isi koding event-nya spt ini : int li_column_number,li_column_count,first_column boolean lb_enter,lb_dwnrow,lb_uparrow lb_enter =keydown(keyenter!) lb_dwnrow =keydown(keydownarrow!) lb_uparrow =keydown(keyuparrow!) li_column_number =dw_1.getcolumn() li_column_count =integer(dw_1.object.datawindow.column.count) first_column =1 if keyflags=0 then if lb_enter or lb_dwnrow then if li_column_number=integer(dw_1.object.datawindow.column.count) then dw_1.setcolumn(first_column) else dw_1.setcolumn(li_column_number + 1) end if elseif lb_uparrow then if li_column_number=1 then dw_1.setcolumn(integer(dw_1.object.datawindow.column.count)) else dw_1.setcolumn(li_column_number - 1) end if end if elseif keyflags=1 then if lb_uparrow then if li_column_number=integer(dw_1.object.datawindow.column.count) then dw_1.setcolumn(first_column) else dw_1.setcolumn(li_column_number + 1) end if elseif lb_enter or lb_dwnrow then if li_column_number=1 then dw_1.setcolumn(integer(dw_1.object.datawindow.column.count)) else dw_1.setcolumn(li_column_number - 1) end if end if else return 0 end if return 1

  • mztolo 2006 PB #6 event di datawindow 5

    Keterangan : Keyflags = 0 artinya tanpa ada penekanan tombol kombinasi dg tombol function lain. Keyflags = 1 ada penekanan tombol dg Shift Keyflags = 2 ada penekanan tombol dg Ctrl Keyflags = 3 ada penekanan tombol dg Shift + Ctrl Keyflags = 4 ada penekanan tombol dg Alt dst-nya. Keydown berfungsi untuk menentukan tombol apakah yg di tekan user. Keydown(enter!) artinya jika/apakah yg di tekan ENTER.. Anda perhatikan koding berikut ini. li_column_number =dw_1.getcolumn() // getcolumn() untuk mengetahui posisi kolom aktif li_column_count =integer(dw_1.object.datawindow.column.count) // untuk mengetahui jml kolom dlm 1 row/record Selanjutnya.. if lb_enter or lb_dwnrow then // apakah yg di tekan enter atau panah bawah ? if li_column_number=integer(dw_1.object.datawindow.column.count) then // jika posisi kolom aktif = kolom terakhir/jml kolom dw_1.setcolumn(first_column) // posisi pointer kembali ke kolom pertama

    else dw_1.setcolumn(li_column_number + 1) // jika tidak maka jalankan pointer ke kolom berikutnya

    end if elseif lb_uparrow then // jika yg di tekan tombol panah atas

    if li_column_number=1 then // jika di posisi kolom 1 (pertama)

    dw_1.setcolumn(integer(dw_1.object.datawindow.column.count)) // jalankan pointer di kolom terakhir

    else dw_1.setcolumn(li_column_number - 1) // jika tdk di posisi terakhir maka jlnkan pointer ke kolom sblm nya

    end if end if Demikianlah semoga bisa memberikan gambaran event penekanan tombol di datawindow Note : Lalu apakah kita harus membuat event ini di semua datawindow ? Yap benar Tidak efisien dong kalo hrs ketik koding lagi ? Benar sekali Lalu solusinya bagaimana ? Yaitu dg membuat function yg bisa di panggil oleh event ini, jadi cukup koding 1x saja. Nanti anda akan belajar cara membuat function..tunggu aja J

  • mztolo 2006 PB #6 event di datawindow 6

    Coba jalankan aplikasi dan buka sheet entri data siswaspt ini

    Klik di kolom Nama dan coba tekan tombol ENTER atau panah atas/bawah Dan coba juga dikombinasikan dg tombol Shift Dengan demikian sample pembuatan event keydown di datawindow control sudah selesai J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #7 function 1

    POWERBUILDER #7

    Berikut ini cara membuat function Spt biasa dari kondisi workspace aplikasi anda klik tombol New..

    Pilih tab PB Object terus pilih Function dan klik tombol OK Dan ketik spt tampak di gambar bawah

    Return type = integer (0 tdk ada action, 1 ada action) Function name = f_tekantombol (nama functionnya) Argument name = dw_1 dg argument type datawindow Selanjutnya untuk menambah parameter klik kanan mouse dan pilih Add Parameter Tambahkan.. Argument name = keyflags (untuk kontrol tombol kombinasi apa yg di tekan)

  • mztolo 2006 PB #7 function 2

    Lakukan langkah yg sama untuk menambah parameter lagi.spt gambar di bawah

    Selanjutnya copy saja koding ue_tombol ke dalam fungsi ini Perhatikan.. int li_column_number,li_column_count first_column jgn disertakan di dlm koding inisbg ganti kita sudah buat di argument name-nya.

  • mztolo 2006 PB #7 function 3

    Berikut koding komplitnya : int li_column_number,li_column_count boolean lb_enter,lb_dwnrow,lb_uparrow lb_enter =keydown(keyenter!) lb_dwnrow =keydown(keydownarrow!) lb_uparrow =keydown(keyuparrow!) li_column_number =dw_1.getcolumn() li_column_count =integer(dw_1.object.datawindow.column.count) if isnull(first_column) then first_column =1 end if if keyflags=0 then if lb_enter or lb_dwnrow then if li_column_number=integer(dw_1.object.datawindow.column.count) then dw_1.setcolumn(first_column) else dw_1.setcolumn(li_column_number + 1) end if elseif lb_uparrow then if li_column_number=1 then dw_1.setcolumn(integer(dw_1.object.datawindow.column.count)) else dw_1.setcolumn(li_column_number - 1) end if end if elseif keyflags=1 then if lb_uparrow then if li_column_number=integer(dw_1.object.datawindow.column.count) then dw_1.setcolumn(first_column) else dw_1.setcolumn(li_column_number + 1) end if elseif lb_enter or lb_dwnrow then if li_column_number=1 then dw_1.setcolumn(integer(dw_1.object.datawindow.column.count)) else dw_1.setcolumn(li_column_number - 1) end if end if else return 0 end if return 1

  • mztolo 2006 PB #7 function 4

    Simpan function yg baru saja anda buat..

    Tampak di system tree anda.fungsi sudah tercipta.

    Buka event ue_tombol di datawindow control dan ganti dg spt ini

    Anda cukup ketik return f_tekantombol(this,keyflags,1)

  • mztolo 2006 PB #7 function 5

    Note : Anda ingat waktu membuat function f_tekantombol ? Disana ada 3 parameter.dw_1, keyflags dan first_column Oleh karena itu value yg di lewatkan jg berjumlah 3 spt ini : f_tekantombol(this,keyflags,1) this = merujuk datawindow itu sendiri keyflags = keyflags yg di tekan. 1 = merujuk posisi pointer di kolom 1 Close dan save perubahan yg ada di ue_tombol Jalankan aplikasi dan test fungsinyayap berjalan sukses !! Fungsi ini bisa anda pakai untuk datawindow control yg lain. Untuk fungsi yg lain cara pembuatannya sama, tinggal sesuaikan parameter yg ada. Dengan demikian sample pembuatan function sudah selesai J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #8 menu sheet/window 1

    POWERBUILDER #8

    Coba jalankan dan buka sheet entri data siswa anda spt ini.

    Perhatikan modul di atas ada 9 tombol yg di pakai Bagaimana jika kita ingin buat semacam toolbar saja ? Atau di PB istilahnya menu sheet/window.. Langkah2 nya sama dg waktu anda membuat menu yg ada di sample terdahulu Klik New pilih Menu di tab PB Object dan klik tombol OK Selanjutnya buat menu pertama Retrieve dg icon spt tampak di bawah ini :

  • mztolo 2006 PB #8 menu sheet/window 2

    Lanjutkan dg item menu yg lain shg hasilnya spt ini

    Perhatikan picture2 yg ada sudah disediakan oleh PB.. Klik tombol save beri nama mn_sheet dan klik OK

    Untuk koding isinya biarkan kosong dulu.

  • mztolo 2006 PB #8 menu sheet/window 3

    Selanjutnya buka dan modifikasi form entri data siswa.spt ini

    Perhatikan di MenuName isi dg menu sheet nya.dan simpan/save perubahan form ini Pada saat modul sheet entri data siswa di jalankan akan tampak spt ini

    Langkah selanjutnya ? 1. Membuat event untuk retrieve, add, update, delete, close, top, prior, next dan bottom. 2. Mengisi event2 tersebut dg koding spt yg ada di tombol2 itu 3. Delete semua tombol yg adakrn sudah tdk kita pakai lagi 4. Isi koding di menu sheet anda untuk menjalankan koding yg ada di sheet/window Okmari kita lakukan satu per satu J

  • mztolo 2006 PB #8 menu sheet/window 4

    Membuat event di sheet/window : ue_retrive = untuk event retrieve ue_add = untuk event add ue_update = untuk event update ue_delete = untuk event delete ue_close = untuk event close ue_top = untuk event top ue_prior = untuk event prior/previous ue_next = untuk event next ue_bottom = untuk event bottom Double click w_entri_siswa dari system tree anda untuk modifikasi. Klik tab event di bawah dan ..dari modul event itu klik kanan mouse.lalu pilih Add

    Ketik nama event-nya ue_retrieve spt ini..dan isi koding event-nya

  • mztolo 2006 PB #8 menu sheet/window 5

    Klik kanan di event tersebut dan pilih New Event

    Ketik nama event-nya ue_add .

    Lakukan hal yg sama untuk event2 berikutnya. Isi ue_update : if dw_1.update()=1 then commit; messagebox('Info..','Penyimpanan Sukses !',information!,ok!) else rollback; messagebox('Info..','Penyimpanan Gagal !',information!,ok!) return end if

  • mztolo 2006 PB #8 menu sheet/window 6

    Isi ue_delete : if messagebox("Hapus Data","Anda Yakin ?",Exclamation!,YesNo!,2)=2 then return if dw_1.rowcount()>0 then dw_1.deleterow(0) dw_1.setfocus() if dw_1.update()=1 then commit; messagebox('Info..','Penghapusan Sukses !',information!,ok!) else rollback; messagebox('Info..','Penghapusan Gagal !',information!,ok!) return end if else return end if Isi ue_close : close(this) Isi ue_top : if dw_1.getrow() = 1 then messagebox(":)","Data pertama !",Information!,Ok!) else dw_1.scrolltorow(1) end if Isi ue_prior : if dw_1.getrow() = 1 then messagebox(":)","Data pertama !",Information!,Ok!) else dw_1.scrollpriorrow() end if Isi ue_next : if dw_1.getrow() =dw_1.rowcount() then messagebox(":)","Data terakhir !",Information!,Ok!) else dw_1.scrollnextrow() end if Isi ue_bottom : if dw_1.getrow() = dw_1.rowcount() then messagebox(":)","Data terakhir !",Information!,Ok!) else dw_1.scrolltorow(dw_1.rowcount() ) end if

  • mztolo 2006 PB #8 menu sheet/window 7

    Kalo anda perhatikan koding yg di tulis di event2 tersebut ada yg mirip sekali dg koding yg ada di click event tombol dan ada juga yg perlu di sesuaikan. Misal di tombol close dan di event ue_close Yg pertama tertulis close(parent) yg ke dua tertulis close(this) Bagi anda yg sudah memahami bahwa koding mengacu pada object yg ada pasti sudah tahu.ketika di tombol pake parent krn sheet tersebut adalah parent dari tombol, tetapi ketika di event yg notabene ada di sheet tersebut maka cukup pake kata this. Begitu jg return value, krn event ini semua (None) untuk return type/value nya maka, koding yg dulu di tombol ada return -1 cukup kita tuliskan return saja.. Ok..selanjutnya hapus semua tombol yg ada..serta save.

    Dan isi koding di menu sheet nya . Doubleclick mn_sheet untuk modifikasi.kemudian doubleclick item retrieve serta isi koding spt ini

    Lakukan hal yg sama untuk item menu yg lain... Untuk ue_add spt ini parentwindow.triggerevent ("ue_add") dst-nya.

  • mztolo 2006 PB #8 menu sheet/window 8

    Setelah semua di isi dan di simpan/save jalankan aplikasi dan open sheet nya yap

    Atau spt ini.

    Atau spt ini.

  • mztolo 2006 PB #8 menu sheet/window 9

    Anda juga bisa memakai menu text nyaspt ini

    Perlu saya jelaskan juga bahwa logika tombol pada dasarnya sama juga dg apa yg pernah saya berikan samplenya untuk aplikasi developer yg lain Begitu juga koding yg ada masih dpt dikembangkan, semisal untuk data master detail. Ok ..saya harapkan anda tekun dan teliti serta jgn patah semangatitu lah yg akan membawa anda ke level selanjutnya dan level yg tak akan anda duga nantinya J (jgn lupa perbanyak doa dan rasa syukur kepada Nya) Dengan demikian sample pembuatan menu sheet sudah selesai J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #9 sheet/window master detail 1

    POWERBUILDER #9

    Latihan kali ini kita akan mencoba membuat sample untuk entri sheet master detail, atau header detail. Maka di perlukan 2 table lagi spt ini (untuk mySQL saya pake myISAM) : Master tblhujian dg key nis

    Detail tbldujian dg key kode yg merupakan nilai hasil autoincrement

    Sebelum anda membuat datawindownya, pastikan koneksi ke database sekolah masih aktif atau terkoneksi :

  • mztolo 2006 PB #9 sheet/window master detail 2

    Untuk selanjutnya mari kita buat datawindow untuk masternya terlebih dahulu. Klik tombol new di dalam tab DataWindow pilih type datawindow Freeform dan klik tombol OK

    Pilih Quick Select .terus perhatikan Retrieve on Preview tdk usah di centang maksudnya apa.agar pada waktu window tercipta tdk langsung tampil di preview Mengapa ? Jika data kosong no problem tapi kalo data anda jutaan maka anda harus nunggu preview selesai dulu setiap kali anda modifikasi datawindow itu.

    Selanjutnya stl memilih spt di atas klik tombol Next

    Pilih tblhujian pilih semua field/kolomnya dan klik OK

  • mztolo 2006 PB #9 sheet/window master detail 3

    Klik tombol NEXT dan klik FINISH sampai tampil spt ini :

    Rapikan menjadi spt ini :

    Bagaimana jika untuk nis saya ingin tampilkan nama siswa jadi bukan nis nya. Atau dg kata lain dlm bentuk combobox Untuk membuat combobox yg me-refer ke data lain di PB anda harus membuat suatu datawindow baru yg diistilahkan dropdown datawindow Nah krn data nis ini nanti me-refer dari data tblsiswa maka waktu membuat drowdown datawindow kita memakai data dari tblsiswa tersebut. Coba save dulu window yg baru saja anda buat ini dg nama dw_entri_h_ujian Selanjutnya buat window baru, langkahnya sama dg cara di atas hanya anda pilih type window tabular. Dengan sumber data tblsiswa dan di ambil kolom nis dan nama spt ini :

    Anda tarik band header ke atas dg mouse anda, sehingga judul kolom tertutup (atau anda hapus dan tarik band header ke atas jg boleh).

    Tujuannya apa ? Kita tidak mau memakai header/judul kolom tersebut. Selanjutnya klik detail nis dan hapusdg menekan tombol DEL

  • mztolo 2006 PB #9 sheet/window master detail 4

    Kenapa kolom nis disertakan diwaktu awal membuat dropdown datawindow ini jika akhirnya di hapus ? Memang benar data ini di hapus tetapi pada dasarnya hanya di hapus di tampilan saja, sedangkan data nis sebenarnya tetap harus ada dan nantinya dipakai untuk dikirimkan ke datawindow parentnya yaitu dlm hal ini dw_entri_h_ujian Geser kolom nama merapat ke depan..

    Terus percantik dg merubah properti bordernya ..

    Hasilnya spt ini.

    Simpan dg nama dddw_siswa Selanjutnya buka kembali datawindow dw_entri_h_ujian. Klik kolom nis dan tarik perlebar spt ini dg mouse :

  • mztolo 2006 PB #9 sheet/window master detail 5

    Selanjutnya klik tab EDIT di properties datawindow ini. Setting spt tampak di gambar bawah

    Style Type nya : DropDownDW Always Show Arrow di centang H ScrollBar di centang DataWindow isi dg nama dddw_siswa Display Column atau kolom data yg ingin di tampilkan adalah nama Data Column atau data yg ingin disimpankan ke datawindow dw_entri_h_ujian di kolom nis (dengan demikian sewaktu kita memilih nama siswanya, data nis dari dddw_siswa akan dikirim ke nis yg ada di dw_entri_h_ujian)

  • mztolo 2006 PB #9 sheet/window master detail 6

    Tampak hasilnya spt ini :

    Rapikan shg menjadi spt ini.(kasih jarak sedikit di bagian bawah detail)

    Simpan kembali perubahan ini Selanjutnya buat sheet/window master detailnya Mmmmmm.. cara cepatnya adalah buka sheet anda yg sudah jadi w_entri_siswa Save As sebagai w_entri_ujian Hapus datawindow yg ada di situ yg merupakan datawindow w_entri_siswa Selanjutnya ganti dg datawindow dw_entri_h_ujian

    Tampak hasilnya spt di gambar atas. Jangan lupa ganti title sheet nya dg Entri Data Ujian Simpan modifikasi terserbut dan close.

  • mztolo 2006 PB #9 sheet/window master detail 7

    Selanjutnya modifikasi menu mn_siswa dan double click di item &Ujian Susulan serta ketik kodingnya.. spt ini opensheet(w_entri_ujian,w_utama,2,original!)

    Simpan perubahan menu mn_siswa dan coba jalankan aplikasi ini.. Klik menu Transaksi => Ujian Susulan sampai tampil sheetnya..

    Jika ada datanya klik tombol retrieve.jika belum klik tombol new

  • mztolo 2006 PB #9 sheet/window master detail 8

    Klik combobox nya dan pilih nama siswanya sesuai data yg telah di entrikan di modul entri data siswa. Sehingga hasilnya spt ini..

    Ok sementara header/masternya dulu detail akan di lanjutkan di bagian berikutnya Pastikan latihan di atas sukses terlebih dahulushg kita bisa melanjutkan ke bagian detailnya.. J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #9b sheet/window master detail 1

    POWERBUILDER #9 bag. 2

    Selanjutnya mari kita buat detail nya berdasar table tbldujian di bawah :

    Ok. mari kita review prinsip master detail terlebih dahulu J Data master anda secara database tersimpan spt ini. NIS dan PENGAWAS NIS berisi data spt 001, ABC007 dsb-nya sbg nomor induk siswanya PENGAWAS berisi data spt AMIR, KROMO ATEMO yaitu nama2 pengawas Data detail anda secara database tersimpan spt ini. KODE, NIS, PELAJARAN dan NILAI KODE merupakan data auto_increment yg akan diisi otomatis oleh databasenya dan berisi angka 1, 2, 3 dst nya. Data ini jg berfungsi sbg key master/update untuk data detailnya. NIS berisi data 001 dst nya. Kenapa data ini diperlukan di detail ? Yapdiperlukan krn data ini berfungsi dan bersifat sbg data untuk merelasikan data detail ke masternya. Jadi semua data detail dg NIS=001 merupakan data detail dari master dg NIS=001 juga, hal inilah yg di sebut dg konsep one to many. PELAJARAN dan NILAI akan berisi nama pelajaran dg nilai nya. Lalu bagaimana dg cara menampilkan data detailnya ? PELAJARAN dan NILAI adalah data yg perlu disajikan di detailnya. Untuk KODE dan NIS itu tidak perlu ditampilkan, krn kedua data ini hanya di pakai dlm kaitannya dg procedure update dan relasi dg master. User/pemakai aplikasi anda tidak perlu tahu KODE dan NIS yg di replacekannya. Ok selanjutnya buat datawindow type tabular spt ini :

  • mztolo 2006 PB #9b sheet/window master detail 2

    Hapus header dan kolom KODE serta NIS rapikan shg menjadi spt ini :

    Klik menu Rows dan klik Update Properties spt ini.

    Tampak modul specify Update Properties nya :

    Untuk table yg memakai key auto_increment atau key yg tercreate otomatis maka Identity Column: nya harus di isi sesuai kolom-nya.

  • mztolo 2006 PB #9b sheet/window master detail 3

    Karena table tbldujian ini memakai KODE sbg key auto_increment-nya maka isi Identity Column nya spt ini :

    Selanjutnya klik tombol OKdan kembali ke paint datawindow-nya.

    Selanjutnya buat Retrieval Arguments dg klik tombol shg tampli spt ini :

  • mztolo 2006 PB #9b sheet/window master detail 4

    Klik menu Design dan klik Retrieval Arguments spt ini :

    Sampai tampil modul spt ini :

    Ketik spt di bawah ini dan klik OK

  • mztolo 2006 PB #9b sheet/window master detail 5

    Selanjutnya klik tab WHERE dan ketik command spt ini :

    Selanjutnya close dan save dg nama dw_entri_d_ujian.. Datawindow dg retrieval argument jika anda retrieve akan menampilkan modul spt ini :

    Modul ini meminta anda untuk memasukkan value sesuai type data argument-nya. Lalu apakah waktu aplikasi jalan akan selalu tampil modul di atas ? Mengganggu dong ? Modul di atas tidak akan tampil krn sewaktu kita retrieve datawindow tsb kita sertakan langsung value argumentnya spt ini : dw_2.retrieve(001) Note : Kenapa retrieval argument harus di buat ? Yapsekenarionya spt ini.data master detail terdiri atas 2 datawindow. Pertama atau yg di atas (spt yg telah anda buat berdasar artikel #9a) adalah data master. Yg kedua atau yg bawah adalah data detailnya. Asumsinya beginisetiap data master digeser ke data/row untuk siswa yg berbeda maka data detail akan mengikuti/berisi dg data detail yg sesuai dg masternya. Nah untuk memfilter data detail ini agar sesuai dg data masternya di perlukanlah retrieval argument di datawindow detailnya. Jadi retrieval arguments sama dg filter ? Tidak juga krn PB mengenal filter sendiri.

  • mztolo 2006 PB #9b sheet/window master detail 6

    Ok..mari kita lanjutkan.buka sheet master detail (w_entri_ujian) yg telah anda buat sebelumnya :

    Drag n drop datawindow dw_entri_d_ujian dan tambahkan 2 tombol spt ini :

    Jika anda perhatikan di sheet anda sekarang sudah ada 2 datawindow untuk master dg nama dw_1 dan detail dg nama dw_2. Selanjutnya buka event OPEN dan modifikasi kodingnya spt ini : dw_1.setTransObject(SQLCA) dw_2.setTransObject(SQLCA) dw_1.retrieve() dw_2.setrowfocusindicator(hand!) Note : Semua datawindow harus sudah di set transaksi objectnya dg SQLCA Setrowfocusindicator(hand!) untuk menampilkan penunjuk row berbentuk tangan/jari telunjukmmm nanti anda bisa melihatnya sendiri J

  • mztolo 2006 PB #9b sheet/window master detail 7

    Event ue_update anda ganti spt ini : if dw_1.getrow()=0 or dw_1.rowcount()=0 then return dw_1.accepttext() dw_2.accepttext() if dw_1.update()=1 and dw_2.update()=1 then if sqlca.sqlnrows 0 then ls_nis=dw_1.getitemstring(dw_1.getrow(),"nis") end if dw_2.retrieve(ls_nis) Note : Rowfocuschanged diperlukan jika user mengeser row master/header maka detail akan di retrieve sesuai key relasinya. Perhatikan koding dw_2.retrieve(ls_nis) Ls_nis sendiri diambil dari data nis yg ada di dw_1. Perhatikan koding ini ls_nis=dw_1.getitemstring(dw_1.getrow(),"nis") Inilah kenapa di awal tadi kita harus membuat retrieval arguments di datawindow detail. Semoga anda semakin paham dan jelas J

  • mztolo 2006 PB #9b sheet/window master detail 8

    Isi click event tombol Add detail dg ini : if dw_1.rowcount()=0 or dw_1.getrow()=0 then return dw_1.accepttext() string ls_nis ls_nis=dw_1.getitemstring(dw_1.getrow(),'nis') dw_2.scrolltorow(dw_2.insertrow(0)) dw_2.setcolumn(3) dw_2.setfocus() dw_2.setitem(dw_2.getrow(),'nis',ls_nis) Note : Agar setiap data detail yg ditambahkan terelasi dg data masternya maka di datadetail harus di set/simpan data key relasi yaitu berupa data nis Perhatikan koding ini dw_2.setitem(dw_2.getrow(),'nis',ls_nis) dw_2.setcolumn(3) kenapa 3 ? Betul krn kolom pelajaran adalah kolom urutan ke 3 yg ada di tbldujian Isi click event tombol Del detail dg ini : if dw_1.rowcount()=0 or dw_1.getrow()=0 then return if messagebox("Hapus Data","Hapus ?",Exclamation!,YesNo!,2)=1 then dw_2.deleterow(0) parent.triggerevent("ue_update") end if Ok..selanjutnya coba jalankan aplikasi anda .dan buka sheet master detailnya spt ini :

  • mztolo 2006 PB #9b sheet/window master detail 9

    Klik tombol Add detail dan anda isi spt ini :

    ** mmmm ada gambar telunjuk ! itulah setrowfocusindicator(hand!) J Ok form master detail sudah selesai selamat mencoba J Dan nantikan sample berikutnya.. Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #9c sheet/window master detail 1

    POWERBUILDER #9 bag. 3

    Masih seputar sheet master detail, coba anda buka event ue_delete modifikasi koding deletenya dg koding berikut agar detailnya jg ikut terhapus : if dw_1.rowcount()=0 or dw_1.getrow()=0 then return if messagebox("Hapus Data","Anda Yakin ?",Exclamation!,YesNo!,2)=2 then return dw_1.accepttext() string ls_nis ls_nis=dw_1.getitemstring(dw_1.getrow(),'nis') dw_1.deleterow(0) dw_1.setfocus() if dw_1.update()=1 then commit; delete from tbldujian where nis=:ls_nis ; messagebox('Info..','Penghapusan Sukses !',information!,ok!) else rollback; messagebox('Info..','Penghapusan Gagal !',information!,ok!) return end if Note : Perhatikan cara penulisan SQL Command untuk delete nya. delete from tbldujian where nis=:ls_nis ; (ditulis dg memakai : titik dua setelah tanda sama dengan dan setiap perintah SQL ini agar di jalankan selalu diakhiri dg tanda ; titik koma) Ok sekarang coba anda tambahkan di detailnya data yg banyak.spt ini :

    Jml row di detail sebenarnya ada 6, yg tampak 4 row. Agar memudahkan user dlm melihat data yg tersembunyi/dibagian bawah anda bisa menambahkan vertical scrollbar di datawindownya. Bagaimana caranya ?

  • mztolo 2006 PB #9c sheet/window master detail 2

    Klik datawindow detailnya di painter/editor dan centang VscrollBar spt di bawah :

    Simpan kembali perubahan dan coba jalankan J

    Note : Anda jg bisa tambahkan horizontal scrollbar jika datawindow anda lebar. Hal ini jg bisa anda terapkan untuk dropdown datawindow anda.

  • mztolo 2006 PB #9c sheet/window master detail 3

    Untuk dropdown datawindow caranya klik dddw-nya dan centang VscrollBar nya.

    OK mari kita lanjutkan.. Validasi proses penghapusan pada dasarnya bisa anda kembangkan lagi misal jika master akan dihapus akan keluar pesan kalo detail sudah berisi alias transaksi sudah terjadi. Logikanya bagaimana ? Yaitu dg mengecek keberadaan data detail untuk kode master yg akan di hapus. Selain itu anda bisa dg memberikan relasi di databasenya (mis: MsSQL) yg tentunya akan memberikan pesan error atau informasi tentang sudah adanya relasi/transaksi jika ada proses delete/penghapusan data. Berikutnya saya akan memberikan sample yg menarik, coba buka sheet ujian spt ini :

    Dalam kondisi data sudah terisi spt tampak di sheet atas.seharusnya combo untuk nama siswa terproteksi atau disable artinya tdk memberikan kesempatan user untuk merubahnya krn ini menyangkut primary key-nya. Sekarang coba kita bikin suatu kesalahan editing misalnya dg mengganti nama siswa di atas dg nama lain yg sebenarnya data itu jg sudah pernah di entrikan.

  • mztolo 2006 PB #9c sheet/window master detail 4

    Dengan kata lain kita coba bikin error krn primary key yg sudah kita masukkan kita entri kembali spt ini :

    Coba nama Rudy anda ganti menjadi Tini dan save perubahan ituapa yg terjadi ?

    Tampak modul error dari odbc mysql-nya yg menyatakan adanya duplikasi entri J Lalu coba anda lihat lagi apakah data dg nama siswa Rudy tersebut masih ada ? Ternyata sudah tidak ada !! Kenapa ? Close aplikasi anda dan coba modifikasi datawindow dw_entri_h_ujian Setelah itu coba lihat Update Properties nya tampak spt ini :

    Perhatikan di bagian Key Modification nya.. J

  • mztolo 2006 PB #9c sheet/window master detail 5

    Tampak rule proses updatenya adalah Delete dulu baru Insert sehingga jika terjadi kasus spt tadi maka data tblhujian sbg master akan di hapus terlebih dahulu baru dilakukan insert yg ternyata gagal krn primary key terjadi duplikat. Sedangkan proses hapus sudah terjadi..itulah yg menyebabkan data siswa Rudy terhapus. Lalu bagaimana pemecahannya ? Ada 2 cara. J Cara PERTAMA : Dengan menganti rule update di atas dg memilih Use Update di key modificationnya.

    Klik OK dan save kembali datawindow anda dan coba kembali kasus spt di atas tadi. Krn data Rudy sudah terhapus coba input ulang lagi untuk latihan kali ini. Detailnya tdk usah di entri kembali, krn untuk kasus di atas yg terhapus hanya data di masternya alias tblhujian nya. Sekarang coba anda lakukan langkah penggantian nama siswa yg notabene sudah pernah di inputkan spt di hal. 3 dan save. Apa yg terjadi ? Tampak pesan errornya tetapi data siswa Rudy tdk terhapus !!

    Benarkah ? Coba klik tombol Retrieve ..yap data masih spt semula J Semoga anda bisa mengambil kesimpulan dari contoh kasus di atas.amien. Cara KEDUA : Modifikasi datawindow master anda serta klik kolom nis

    Setelah itu di propertiesnya klik icon warna merah di kanan tulisan Protect spt tampak pada gambar di atas.

  • mztolo 2006 PB #9c sheet/window master detail 6

    Tampak modul untuk mengetik koding

    Ketik koding berikut if (isrownew(),0,1) dan klik tombol OK. Tampak ada perubahan di propertiesnya spt ini :

    Note : Properties Protect berfungsi untuk melakukan proteksi terhadap kolom yg ada dengan nilai true/1 atau false/0. Untuk kasus di atas jika row/kolom bukan kolom baru maka kolom tersebut akan di protect/disabled. Dengan kata lain kolom hanya enabled jika pada saat row baru atau pada saat penambahan data baru. Dan tentu saja hal ini bisa anda terapkan untuk datawindow yg lain juga.

  • mztolo 2006 PB #9c sheet/window master detail 7

    Save datawindow krn perubahan tersebut..dan jalankan sheet ujian spt ini :

    Sekarang jika anda klik combo nama siswa tersebut tidak akan bisa dlm kondisi data sudah ada spt tampak di gambar atas J Lain halnya jika anda klik tombol tambah/new/add spt ini :

    Okdengan demikian sampai disini dulu penambahan dari saya J Nantikan sample2 dan kasus2 yg lain dan berbeda selanjutnya Tetaplah kreatif dg selalu memaksimalkan logika anda.dan jangan lupa untuk selalu berdoa dan bersyukur kepada-Nya. Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #10 dberror handle 1

    POWERBUILDER #10

    Coba jalankan aplikasi anda dan buka sheet entri data siswa nya spt ini :

    Tampak disana nis 007 adalah milik Tini Pratiwi

    Coba anda klik tombol/new .dan isi data spt ini (dg nis=007 juga) :

    Terus coba lakukan save/penyimpanan data..apa yg terjadi ?! Tampak informasi error updatenya yg mengatakan adanya duplikasi entry..

    Modul datawindow error ini masih standar dengan informasi sesuai informasi error yg dikeluarkan oleh odbc mysql nya.

  • mztolo 2006 PB #10 dberror handle 2

    Bagaimana jika kita ingin membuat pesan error yg kita definisikan sendiri ? Caranya adalah dengan membuat function untuk itu . J (jika lupa caranya baca2 lagi artikel sebelum2 nya ya ) Klik tombol new dan pilih function di tab PB Object sampai tampil modul untuk membuat fungsi. Isi nama fungsi dan arguments yg dipakai spt ini :

    Anda isi dg koding spt ini : /* mztolo 2006 anda bisa melihat message error mysql yg lain di help mysql nya pesan error ini akan berbeda antara 1 database dg database yg lainnya */ long kodeerror string pesan,judul kodeerror = sqldbcode pesan =sqlerrtext judul =title string ls_pesan,ls_kodeerror ls_kodeerror="("+string(kodeerror)+")" if kodeerror=1062 then ls_pesan=ls_kodeerror+' Data pernah di entri !' messagebox(judul,ls_pesan,Information!,Ok!,1) elseif kodeerror=1048 then ls_pesan=ls_kodeerror+ ' Kode kosong !' messagebox(judul,ls_pesan,Information!,Ok!,1) elseif kodeerror=1027 then ls_pesan=ls_kodeerror+' Data sedang di edit user lain !' messagebox(judul,ls_pesan,Information!,Ok!,1) else ls_pesan=ls_kodeerror+pesan messagebox(judul,ls_pesan,Information!,Ok!,1) end if return 1

  • mztolo 2006 PB #10 dberror handle 3

    Selanjutnya anda save dg nama f_dberror Lalu modifikasi sheet entri data siswa anda w_entri_siswa spt ini :

    Doubleclick di kontrol datawindow-nya..

    Kemudian di method/event dberror anda ketik koding spt ini : return f_dberror (sqldbcode,sqlerrtext,'Master Siswa') Selanjutnya save dan coba jalankan serta buka sheet entri data siswaanda coba kembali entri dg nis yg sama spt di atas (hal. 1)

    Tampak pesan error yg tampil adalah pesan error yg telah anda definisikan di fungsi f_dberror tadi.

  • mztolo 2006 PB #10 dberror handle 4

    Sekarang anda coba add data baru laginis kosongin dan isi data yg lain spt ini :

    Terus anda coba save.apa yg tampak ?!

    Pesan error atau informasi kalo kode/primary key kosong !! Sekarang coba add data baru lagi dan biarkan semua kosong spt ini :

    Terus coba save dan apa yg terjadi ?!

    Tampak informasi proses penyimpanan sukses !! Nah lho ?

  • mztolo 2006 PB #10 dberror handle 5

    Tapi jika anda lihat di database mysql anda jelas tidak ada penambahan data kosong. Artinya apa ? Capture error 1048 untuk primary key tidak terjadi dan jika di cek di message errornya juga tidak keluar pesan apa-apa. Ini sulitnya J jika masih keluar pesan error nomor 10xx maka anda bisa menambahkan message errornya di fungsi f_dberror Nah lalu bagaimana jika pesan yg tampil akan mengatakan kalo data harus di isi semuanya atau tidak boleh kosong ? Anda ubah koding savenya ue_update menjadi spt ini : string ls_nis dw_1.accepttext() if dw_1.update()=1 then ls_nis=dw_1.getitemstring(dw_1.getrow(),'nis') if isnull(ls_nis) then messagebox('Info..','Data tdk boleh kosong !',information!,ok!) return else commit; messagebox('Info..','Penyimpanan Sukses !',information!,ok!) end if else rollback; messagebox('Info..','Penyimpanan Gagal !',information!,ok!) return end if Sample di atas hanya mengecek 1 kolom null atau tidakuntuk kolom2 yg lain silahkan di coba sendiri.. J Sekarang jika data kosong anda save akan keluar pesan spt ini :

    Terapkan juga fungsi f_dberror ini untuk kontrol datawindow yg lain.. Ok cukup ini dulu..silahkan anda kembangkan menjadi lebih bagus lagi J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #11 MDI 1

    POWERBUILDER #11

    Anda pasti ingat waktu pertama kali membuat sample PB ini. Anda membuat suatu aplikasi yg mempunyai sheet yg bersifat MDI (multiple document interface). Lalu apakah sample yg sudah dikerjakan masih bersifat SDI ? Tidak ! Hanya memang menu sheet yg dibuat tidak mendukung MDI (atau bahasa lainnnya kurang memaksimalkan kemampuan MDI nya) Berikut cara memaksimalkannya J Pertama ubah menu utama anda mn_siswa menjadi spt ini :

    Perhatikan ada penambahan item menu Edit , Window dan Help yg penting adalah Edit dan Window dlm kaitannya dg konsep MDI. Untuk Edit tdk perlu ada sub-item menu-nya. Setting visible dan enablenya jgn dicentang alias tidak mau di tampilkan di menu utama.

    Begitu juga untuk menu Window jgn dicentang juga. Kemudian untuk koding click event dari masing2 sub-menu item Window adalah sbb : Clicked event Tile Vertical : w_utama.ArrangeSheets ( Tile! ) Clicked event Tile Horizontal : w_utama.ArrangeSheets ( TileHorizontal! ) Clicked event Layer : w_utama.ArrangeSheets ( Layer! ) Clicked event Cascade : w_utama.ArrangeSheets ( Cascade! )

  • mztolo 2006 PB #11 MDI 2

    Untuk Help dan About biarkan aja dulu J Selanjutnya kita akan membuat menu yg merupakan turunan dari mn_siswa sbg menu sheet yg baru. Caranya klik menu File dan klik Inherit

    Selanjutnya tampil spt ini :

    Pastikan Objects of Type: nya Menus Terus di kolom atasnya pilih menu mn_siswa dan klik tombol OK

  • mztolo 2006 PB #11 MDI 3

    Selanjutnya tampak menu baru yg merupakan inherit dari mn_siswa spt ini :

    Kemudian tambahkan sub-menu item untuk Edit spt ini :

    Dengan koding clicked event yg sama dg menu sheet yg pernah anda buat. Jangan lupa di propertiesnya untuk menu Window dan Edit dicentang visible dan enabled nya.

    Selanjutnya save dg nama mn_sheet2

  • mztolo 2006 PB #11 MDI 4

    Buka sheet w_entri_siswa dan ubah menunya menjadi mn_sheet2

    Lakukan juga untuk sheet w_entri_ujian dan jangan lupa di save perubahan itu. Sekarang coba jalankan aplikasi anda .

    Perhatikan anda bisa membuka sheet lebih dari satu secara bersamaan ( MDI J )

  • mztolo 2006 PB #11 MDI 5

    Pada saat anda aktif atau click sheet entri data siswa maka fungsi toolbar akan berlaku untuk sheet itu, begitu juga sebaliknya jika anda click sheet entri data ujian.

    Anda lihat daftar sheet yg aktif ada di menu Transaksi bagaimana jika kita ingin letakkan di menu Window ? Caranya mudah ubah saja clicked event di menu yg menjalankan masing2 sheet dari koding spt ini : opensheet(w_entri_siswa,w_utama,2,original!) menjadi spt ini.. opensheet(w_entri_siswa,w_utama,5,original!) Perhatikan angka 2 dan angka 5 di atas . Menu Transaksi adalah urutan menu ke 2 pada mn_siswa Sedangkan menu Window ada di urutan ke 5 Mudah bukan ?! Save perubahan dan jalankan aplikasinyaserta buka sheet serta buktikan J

  • mztolo 2006 PB #11 MDI 6

    Anda juga bisa coba susunan window tile/vertical spt ini :

    Atau cascade spt ini :

  • mztolo 2006 PB #11 MDI 7

    Oksampai disini dulu dan nantikan sample berikutnya. Tambahan.. Coba cek di target untuk event open kodingnya spt ini : // mztolo 260106 // Profile sekolah SQLCA.DBMS = "ODBC" SQLCA.Lock = "RU" SQLCA.AutoCommit = False SQLCA.DBParm = "ConnectString='DRIVER={MySQL ODBC 3.51 Driver};DESC=; DATABASE=sekolah;SERVER=guzrud;UID=root;PASSWORD=; PORT=3306;OPTION=3;STMT=;'" connect ; if SQLCA.SQLDBCode0 then messagebox('Koneksi Gagal',SQLCA.SQLErrText,stopsign!) halt close end if open(w_utama) Untuk event close isi koding spt ini : disconnect ; Note : Mungkin anda pernah ketemu penulisan spt ini connect using sqlca ; Kenapa di atas hanya di tulis connect ; saja tanpa statement using sqlca ? Pada dasarnya default transaksi koneksi adalah SQLCA maka penulisan connect ; saja sudah cukup, pemakaian using sqlca jika adanya lebih dari 1 transaksi koneksi. Sehingga kita harus menjelaskan secara detail ke sistem koneksi yg mana yg dipakai. Semoga ini bisa menambah pemahaman anda..amien Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #12 mencetak datawindow 1

    POWERBUILDER #12

    Berikut ini sample mencetak data (datawindow) siswa. J Pertama anda buat datawindow sbg layout cetakkannya.. Mmmmm jadi cetak juga pake datawindow ? Betul sekali. Baik interface entri ataupun layout cetakan datasemua memakai datawindow. Jadi buat data window spt ini :

    Selanjutnya anda tarik band header ke bawah untuk mengetik judul laporan tersebut shg menjadi spt ini :

    Dan blok serta geser ke bawah judul kolom yg tampak masih di atas.mjd spt ini :

    Selanjutnya klik object text spt ini .

  • mztolo 2006 PB #12 mencetak datawindow 2

    Selanjutnya klik di area kosong di atas judul2 kolom spt ini :

    Ganti value text dengan SMA 1 SUNTER dan perhatikan perubahan di detailnya

    Buat lagi text judul yg lain dan rapikan dg menggeser-geser dg mouse sehingga hasilnya akan menjadi spt ini :

  • mztolo 2006 PB #12 mencetak datawindow 3

    Kemudian blok/soroti semua judul kolom dan ubah properti bordernya mjd spt ini :

    Sekarang jika anda klik kanan dan retrieve di previewnya akan tampak spt ini :

    Anda perhatikan nilai tabungan masih polos belum ada pemisah di nilai ribuannya Sekarang mari kita kasih format untuk memberikan tanda pemisah ribuan. Pertama klik kolom tabungan di detail dan ubah propertie nya spt ini :

    Perhatikan di tab Format anda ketik saja spt ini #,###.00

  • mztolo 2006 PB #12 mencetak datawindow 4

    Selanjutnya membuat total dari semua tabungan siswa....caranya klik kolom tabungan

    Dan klik object sum spt ini :

    Simsalabim..summary tercipta spt ini :

    Jangan lupa format display-nya di setting juga agar pemisah ribuan-nya ada

  • mztolo 2006 PB #12 mencetak datawindow 5

    Selanjutnya rapikan tampilan layout cetakan dan atur size kertasnya spt ini :

    Untuk menambahkan tulisan halaman sekian dari total halaman caranya Klik object compute page spt ini :

    Selanjutnya geser ke bawah band footer spt ini : Dan klik di area kosong di bawah total tabungan spt ini.

    Tampak sudah tercipta. J

  • mztolo 2006 PB #12 mencetak datawindow 6

    Selanjutnya save datawindow tersebut dg nama dw_lap_tabungan Kemudian anda buat window untuk preview form cetak tersebut spt ini :

    Dengan title window = Form cetak data tabungan.... Tambahkan 2 tombol : Tombol Print dg click event dw_1.print() Tombol Close dg click event Close(parent) Adapun properti datawindow-nya spt ini :

  • mztolo 2006 PB #12 mencetak datawindow 7

    Isi koding Open event window tersebut spt ini : dw_1.settransobject(sqlca) dw_1.retrieve() dw_1.object.datawindow.print.preview='yes' Note : Tampak di koding itu spt biasa akan di set transaksi object nya. Selanjutnya di retrieve data-nya dan tampilkan data secara print preview Okkemudian save window tersebut dg nama w_lap_tab Di menu untuk menjalankan window tersebut isi dengan koding spt ini :

    opensheet(w_lap_tab,w_utama,5,original!)

  • mztolo 2006 PB #12 mencetak datawindow 8

    Jalankan aplikasi dan buka window/sheet laporang tersebut

    Anda bisa desain window dg lebih lebar agar tampilan bisa penuh..silahkan Dan jika anda klik tombol Print maka data akan tercetak.. J Bagiamana jika ingin mencetak dari kode sekian s/d kode sekian ? Bagaimana jika ingin merubah ukuran kertas dan jenis printer ? Bagaimana jika ingin outputnya ke FILE ? Bagaimana jika ingin mencetak dari halaman sekian s/d halaman sekian ? Bagaimana jika ingin mencetak 2 copies ? Bagaimana jika ingin mencetak dg besar 1 kali dari besar normal ? Mmmmm kelak semua akan saya coba berikan samplenya J Ok cukup dulu ya Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #12(b) properiti lain di cetak datawindow 1

    POWERBUILDER #12 (b)

    Ok mari kita melangkah ke depan lagi J Coba modifikasi window preview cetak anda menjadi spt ini.

    Note : Ada tambahan 5 radio button 1 checkbox 1 tombol preview (jadi sekenarionya nanti kita tdk mau data langsung tampil spt sample sebelumnya, tetapi user hrs klik tombol preview dahulu) Terus ubah lebar window menjadi = 4078 dan tinggi = 2748 Ubah juga lebar datawindow menjadi = 3941 dan tinggi = 1976 Judul dan icon window/sheet silahkan juga kalo mau di ubah J Kemudian hapus koding yg ada di event Open agar datawindow tdk langsung retrieve atau di tampilkan. Coba klik datawindow dw_1 dan hapus dataobject dw_lap_tabungan spt ini :

  • mztolo 2006 PB #12(b) properiti lain di cetak datawindow 2

    Menjadi spt ini..maksudnya apa agar data siswa tdk langsung di tampilkan/preview :

    Dan isi koding di click event tombol Preview spt ini : dw_1.dataobject='dw_lap_tabungan' dw_1.settransobject(sqlca) dw_1.retrieve() dw_1.object.datawindow.print.preview='yes' Note : Perhatikan dw_1 adalah nama kontrol datawindow yg ada di window/sheet Isi dataobject-nya pada saat klik tombol ini dg perintah dw_1.dataobject= . Selanjutnya spt biasa set transaksi objectnya, retrieve dan preview-kan. Isi koding click event radio button 50% dg ini : if dw_1.describe('datawindow.print.preview')='yes' then

    dw_1.Object.DataWindow.print.preview.zoom =50 dw_1.Modify("datawindow.zoom =50 ")

    end if Isi koding click event radio button 85% dg ini : if dw_1.describe('datawindow.print.preview')='yes' then

    dw_1.Object.DataWindow.print.preview.zoom =85 dw_1.Modify("datawindow.zoom =85 ")

    end if dst-nya Note : Perintah2 yg berhubungan dg preview dapat diterapkan/dijalankan jika datawindow ada di posisi preview juga. Untuk mengetahui atau mendapatkan indormasi apakah datawindow dlm kondisi preview dipakai perintah describe Jadi anda tambah perbendaharaan 1 perintah lagi yaitu perintah describe lebih detailnya baca help PB J Selanjutnya preview datawindownya di set zoom dahulu agar tampilan previewnya ikut berubah sesuai besaran angka prosentasenya (100% = ukuran normal) Selanjutnya agar waktu tercetak datawindow besarnya sesuai yg kita inginkan maka lakukan modifikasi di zoom datawindow-nya. Nanti anda bisa buktikan waktu anda cetak di printer. Simsalabimtercetak sesuai besar zoom nya SECARA FISIK !! J

  • mztolo 2006 PB #12(b) properiti lain di cetak datawindow 3

    Isi koding click event checkbox Rulers dg ini : if dw_1.describe('datawindow.print.preview')='yes' then

    if this.checked then dw_1.object.datawindow.print.preview.rulers='yes'

    else dw_1.object.datawindow.print.preview.rulers='no'

    end if end if Perintah ini untuk menampilkan rulers di pinggiran tampilan preview anda. Spt tampak di bawah ini :

    Berikut jika tdk pake rulers :

    Coba juga tampilan zoom 85% nya spt ini :

    Note : Garis biru yg tampak di gambar atas adalah garis pembatas untuk area cetak. Anda bisa menggeser ke arah dalam yg akan menandakan margin kiri dan kanan dari layout cetakan anda.

  • mztolo 2006 PB #12(b) properiti lain di cetak datawindow 4

    Yg ini untuk zoom 150% :

    Selanjutnya mari kita buat range untuk mencetak kode nis sekian s/d sekian. Tambahkan 2 buah SingleLineEdit kontrol spt ini :

    Tujuannya adalah untuk entri kode nis Anda juga bisa mencoba dg membuat datawindow untuk hal tsb di atas, tentunya dg membuat dropdown datawindow-nya. Atau dg memakai kontrol spt combobox..silahkan di kembangkan J Selanjutnya anda ubah koding tombol Preview dg spt ini : string kode1,kode2,dwfilter kode1 =righttrim(sle_1.text) kode2 =righttrim(sle_2.text) dw_1.dataobject='dw_lap_tabungan' dw_1.settransobject(sqlca) if len(kode1)>0 and len(kode2)>0 then dwfilter ="nis >='"+kode1+"' and nis

  • mztolo 2006 PB #12(b) properiti lain di cetak datawindow 5

    Note : Ntuk kasus ini saya berikan sample dg perintah FILTER Anda bisa lihat cara memasukkan data nis ke variable yg ada (kode1 dan kode2), begitu jg cara menyiapkan variablenya. Selain itu perhatikan validasi untuk pengecekan apakah kode1 dan kode2 ada isi-nya. Begitu juga dg cara penulisannya untuk variable setfilter yaitu dwfilter Setelah itu agar filter jalan atau dilakukan maka lakukan setfilter sbg kondisinya dan lakukan filter untuk datawindow tersebutdan retrieve tentunya. Jika setfilter diisi variable yg kosong ( dwfilter= ) maka filter tdk akan berlaku atau berarti data akan ditampilkan semua. Simpan perubahan dan coba tampilkanspt ini :

    Mmmm..ok sampai ini dulu.. Sedikit2 ajabiar anda bisa meresapi koding, kegunaan dan artinya J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 1

    POWERBUILDER #12 (c)

    Ok mari kita melangkah ke depan lagi J Coba tambahkan 3 radio button spt ini :

    Jangan lupa anda tempatkan didalam GroupBox Dan berinama groupbox itu Paper Orientation spt tampak di gambar atas. Paper Orientation berguna untuk mengatur tampilan cetak apakah ingin Portrait potret/berdiri atau Landscape membentang/melintang. Paper Orientation ini mengacu pada properti datawindow di tab Print Specifications :

    Adapun isi koding untuk event click radiobutton Default adalah spt ini : if dw_1.describe('datawindow.print.preview')='yes' then dw_1.Object.DataWindow.Print.orientation = 0 dw_1.Modify(' datawindow.paper.orientation = 0') end if Perhatikan perintah ini jg berlaku jika kondisi datawindow sedang preview

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 2

    Isi click event radiobutton Portrait sbb : if dw_1.describe('datawindow.print.preview')='yes' then dw_1.Object.DataWindow.Print.orientation = 2 dw_1.Modify(' datawindow.paper.orientation = 2') end if Isi click event radiobutton Landscape sbb : if dw_1.describe('datawindow.print.preview')='yes' then dw_1.Object.DataWindow.Print.orientation = 1 dw_1.Modify(' datawindow.paper.orientation = 1') end if Coba jalankan dan coba tampilkan secara Landscape spt ini :

    Dan jika anda cetak maka akan tercetak secara Landscape juga. Note : Jika anda hanya ingin menampilkan secara preview saja maka cukup dg perintah ini : dw_1.Object.DataWindow.Print.orientation = 1 Tetapi jika anda ingin perubahan di preview itu juga agar sama hasilnya di cetakan berupa landscape maka di tambahkan perintah ini : dw_1.Modify(' datawindow.paper.orientation = 1')

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 3

    Selanjutnya tambahkan spt ini 3 radiobutton, 1 SingleLineEdit dan 1 EditMask untuk Copies spt ini :

    Atur properties untuk EditMask Copies spt ini :

    Isi koding click event untuk radiobutton All spt ini : if dw_1.describe('datawindow.print.preview')='yes' then dw_1.Modify(' datawindow.print.page.range =" "') end if sle_3.enabled=false Note : Perhatikan masih sama konsepnya yaitu dg memberikan modify kepada datawindow. Modify ini bisa sekaligus banyak, atau dg kata lain datawindow bisa di modifikasi dg perintah2 secara bersamaan. Sle_3.enabled=false artinya agar SingleLineEdit yg di kanan tulisan Pages dibuat disable agar tdk bisa di entri. Karena memang itu tempat kita mengisi nomor halaman yg akan di cetak, dan jika kita pilih all atau current maka disabled.

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 4

    Isi koding click event untuk radiobutton Current page spt ini : if dw_1.describe('datawindow.print.preview')='yes' then long row string tmp row = dw_1.getrow() tmp = dw_1.describe("evaluate('page()',"+string(row)+")") dw_1.Modify(" datawindow.print.page.range ='"+tmp+"'") end if sle_3.enabled=false Note : Pertama kita akan mengetahui default row dari datawindow preview aktif ini ada dihalaman berapa (tentunya sesuai dg ukuran kertas yg telah di setting). Selanjutnya sama.modify juga. Isi koding click event untuk radiobutton Pages spt ini : if dw_1.describe('datawindow.print.preview')='yes' then string tmp tmp = sle_3.text dw_1.Modify(" datawindow.print.page.range ='"+tmp+"'") end if sle_3.enabled=true Note : Perhatikan datawindow akan dicetak sesuai data nomor halaman yg di entrikan di SingleLineEdit (sle_3.text) Contoh pengisiannya : 5 artinya halaman 5 saja 1-5 artinya halaman 1 s/d 5 1,4 artinya halaman 1 dan 4 saja 1,3,5-12 artinya halaman 1,3 terus 5 s/d 12 Untuk EditMask Copies tdk perlu ada koding ..hanya saja koding di click event tombol Print anda ubah menjadi spt ini : if dw_1.describe('datawindow.print.preview')='yes' then dw_1.Modify(" datawindow.print.copies ='"+em_1.text +"'") dw_1.print() end if Note : Em_1.text adalah nama dari object/control EditMask Copies Oksekarang anda bisa coba cetak dg mencoba-coba kriteria2 di atas J

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 5

    Kemudian kita coba destination dari cetakan itu sendiri.. Mau ke kertas/printer ? Atau ke file Excel ? Atau ke file Text ? Coba tambahkan 3 radiobutton Print To : spt ini :

    Tidak perlu ada koding hanya anda untuk masing2 radiobutton-nya. Anda tambahkan/ubah saja koding di tombol Print nya spt ini : if rb_10.checked=true then if dw_1.describe('datawindow.print.preview')='yes' then dw_1.Modify(" datawindow.print.copies ='"+em_1.text +"'") dw_1.print() end if else string docname, named int value if rb_11.checked=true then value=GetFileSaveName("Save As To File",docname, named, "XLS", "*.XLS,*.XLS") if value = 1 then dw_1.saveAs(docname,Excel!,TRUE) else return end if else value=GetFileSaveName("Save As To File",docname, named, "TXT", "*.TXT,*.TXT") if value = 1 then dw_1.saveAs(docname,Text!,TRUE) else return end if end if messagebox("www.mztolo.com","Proses Selesai !!") end if

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 6

    Note : Anda perhatikan koding berwarna biru yg merupakan tambahannya. Rb_10 = radiobutton untuk print to PAPER. Rb_11 = untuk ke file EXCEL Rb_12 = untuk ke file TEXT. Sebenarnya ini tdk murni cetak/print tetapi SaveAs dg type dari file/hasil yg dipilih. Anda perhatikan bentuk perintah SaveAs dw_1.saveAs(docname,Excel!,TRUE) TRUE berarti header/nama kolom dari data diikutsertakan. FALSE header/nama kolom tdk diikutsertakan, jadi hanya data saja. GetFileSaveName() dipakai untuk menampilkan modul/dialogbox SaveAs :

    Jadi user diberikan kesempatan untuk menulis nama file nya serta lokasi tempat file itu akan di simpan. Hasilnya spt ini :

    Dan ini :

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 7

    Sekarang jika anda tampilkan penuh maka window/sheet cetak anda akan spt ini :

    Note : Untuk kedepannya sebaiknya window preview dibuat 1 khusus dan bisa dipakai untuk semua preview laporan yg ada di aplikasi. Setting print spt paper orientation, page range dll. bisa dibuatkan sheet tersendirijadi tdk menggabung spt itu. Memang langkah2 yg saya berikan berurutan dan satu demi satu agar rekan2 lebih mudah memahami dan mengerti J

  • mztolo 2006 PB #12(c) properiti lain di cetak datawindow 8

    Kedepannya bisa spt contoh berikut ini :

    Dan ini :

    Oksemoga.sample2 ini menambah pengetahuan anda dan membuat anda bahagia juga J Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 1

    POWERBUILDER #12 (d)

    Ok mari kita melangkah ke depan lagi J Selanjutnya mari kita mencoba untuk membuat report dg group Sebagai sample kita pakai data master detail.sehingga nantinya di laporan akan dibuat daftar ujian group per group untuk masing2 siswa. Okmari kita mulai. (langkah ini mungkin bukan langkah yg ideal tetapi saya pakai untuk memudahkan anda memahaminya J)

    Okklik new dan buat datawindow spt ini :

    Klik OK..

    Retrieve on Preview jika tdk anda centang maka datawindow akan ter-create tanpa langsung menampilkan/preview data yg ada. (seandainya data anda ribuan/milyaran dan harus preview maka akan memakan waktu) Selanjutnya klik NEXT Pilih table tbldujian dan pilih kolomnya spt tampak di gambar bawah ini

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 2

    Klik OKtampak spt ini :

    Klik dan tahan pakai mouse kolom nis dan drag ke tempat sebelah kanan spt ini :

    Ini artinya group yg kita pakai adalah berdasar nis Selanjutnya klik tombol NEXT sampai keluar spt ini :

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 3

    Ganti tulisan Tbldujian Report dengan DAFTAR UJIAN SISWA spt ini :

    Untuk membuat baris ke dualetakkan pointer di belakang kata SISWA dan tekan Ctrl+Enter.dan tulis SMA 1 SUNTER spt ini :

    Selanjuntya klik tombol NEXT.. Klik NEXT lagi..dan klik FINISH Tampak hasilnya spt ini :

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 4

    Dan jika anda preview akan tampak spt ini :

    Anda perhatikan total untuk per group dan untuk summary sudah ada dan data ditampilkan group berdasar nis. Selanjutnya jika anda perhatikan data di atas belum informatif.artinya itu nilai ujian untuk siswa bernama siapa ? dengan pengawas siapa ? Lalu caranya bagaimana ? Okmari kita tambahkan nama pengawasnya..

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 5

    Dari painter datawindow klik icon ini . sampai tampak spt ini :

    Klik kanan di area kosong spt ini :

    Dan pilih/klik Select Tables.. sampai keluar modul untuk memilih table yg lain spt ini :

    Pilih tblhujian dan klik tombol OPEN

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 6

    Sampai tampil spt ini :

    Pilih kolom pengawas untuk di tampilkan di datawindow spt ini :

    Tampak kolom pengawas di bagian atas sudah ada.. Selanjutnya coba cek setting join diantara kedua table itu..

    Double klik tanda = spt tampak di gambar atas.sampai tampil spt ini :

    Perhatikan sudah benar J dan klik tombol OK

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 7

    Klik icon RETURN untuk kembali ke datawindow painter..

    Tampak kolom pengawas sudah ditambahkan

    Selanjutnya anda atur dan rapikan spt ini

    Hasilnya akan spt ini..

    Ok selanjutnya kita tambahkan nama siswa dg mengambil kolom dari table tblsiswa.

    Langkahnya sama dg menekan tombol Dan dari datawindow painter anda bisa klik kanan atau menekan icon spt ini :

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 8

    Tampil kolom2 dari table tblsiswa pilih kolom nama dan hasilnya spt ini :

    Tampak datawindow di painternya spt ini :

    Geser menjadi spt ini :

    Sehingga tampak di preview akan menjadi spt ini :

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 9

    Atau anda bisa rapikan spt ini juga .

    Perhatikan judul kolom di pindah di header per-group dan tanggal dipindah ke footer. Untuk centering judul anda bisa lakukan spt ini :

    Klik judul di atas dan pilih Center di properti alignment-nyashg hasilnya spt ini :

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 10

    Anda juga bisa tambahkan computed field spt ini :

    Perhatikan isi Compute Expression nya..dan hasilnya tampak spt ini :

    Selanjuntya coba tambahkan line di atas dan bawah dari total per groupnya spt ini :

    Atur ketebalan line dg Pen Width yg ada di properties-nya. Serta tambahkan text spt tampak di atas.. Rata2 per group dan Rata2 dari seluruh siswa.

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 11

    Upppsss.ada yg salah.. ? Yap. itu rata2 tetapi kok rumusnya SUM bagaimana nih ? Anda tinggal edit di propertisnya menjadi AVG Untuk rata2 per group spt ini avg(nilai for group 1) Untuk rata2 semua ubah menjadi spt ini avg(nilai for all) Jangan lupa format untuk kedua nya pakai ###.00

    Previewnya akan spt ini .

    Ok..simpan datawindow ini dg nama dw_lap_ujian Buka window w_lap_tab dan save as menjadi w_lap_ujian

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 12

    Selanjutnya ubah koding di click event tombol PREVIEW menjadi spt ini : // mztolo 2006 string kode1,kode2,dwfilter kode1 =righttrim(sle_1.text) kode2 =righttrim(sle_2.text) dw_1.dataobject='dw_lap_ujian' dw_1.settransobject(sqlca) if len(kode1)>0 and len(kode2)>0 then dwfilter ="nis >='"+kode1+"' and nis

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 13

    Sekarang coba cetak per group dijalankan..

  • mztolo 2006 PB #12(d) properti lain di cetak datawindow 14

    Dan ini contoh output ke excel-nya.

    Ok. Ini hanyalah sebuah awal. Masih banyak sample datawindow yg lainbaik untuk entri ataupun report. Silahkan terus dicobaterus membacadan terus belajar.. Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB #13 opensheetwithparm() 1

    POWERBUILDER #13

    Setelah membaca sample 12(e) mungkinkah ada timbul pertanyaan dalam benak anda ? Apakah setiap proses cetak harus memerlukan masing2 1 window/sheet cetak. Jadi kalo ada proses cetak 10 maka perlu juga 10 sheet preview ? Sedangkan jika kita lihat semua koding sama dan hanya 1 perbedaan yaitu tentang datawindow object-nya saja. Ok ..benar sekali kenapa kita tidak membuat atau cukup 1 sheet preview saja ? Artinya sheet preview tersebut harus bisa menerima parameter untuk object datawindow yg berbeda. Jika PB bisa.tentunyalalu dg perintah apa ? Untuk membuka sheet biasa anda memakai ini : opensheet(w_lap_tab,w_utama,5,original!) Nah untuk opensheet dg parameter dg perintah ini : OpenSheetWithParm ( sheetrefvar, parameter {, windowtype }, mdiframe{, position {, arrangeopen } } ) Ok sebelum kita melangkah lebih jauh coba buka/modify sheet w_lap_tab dan save as dengan nama w_preview. w_preview inilah yg akan kita pakaiwindow preview yg sudah anda buat biarkan saja sbg dokumentasi anda untuk belajar. Selanjutnya di click event masing2 menu cetak coba anda ganti dg perintah2 ini : Untuk laporan data siswa.. OpenSheetWithParm(w_preview,dw_lap_tabungan,w_utama,5,original!) Untuk laporan per group .. OpenSheetWithParm(w_preview,dw_lap_ujian,w_utama,5,original!) Lalu apakah langsung bisa dijalankan perintah ini dari menu ? Mmmmmsheet w_preview anda harus diberikan perintah untuk menangkap parameter yg disertakan di perintah tersebut di atas. Caranya ? Ok.perlu anda ketahui untuk meng-capture/menangkap/store data parameter itu PB mengenal 3 perintah : Message.DoubleParm Numeric Message.PowerObjectParm PowerObject (PowerBuilder objects, including user-defined structures) Message.StringParm String Anda perhatikanjika yg dilewatkan berupa data numeric dipakai perintah Message.DoubleParm. Jika data string pakai Message.StringParm Dan jika berupa structure, PB object yg lain maka pakai Message.PowerObjectParm. Karena yg dilewatkan berupa data string contoh : dw_lap_ujian

  • mztolo 2006 PB #13 opensheetwithparm() 2

    Maka modify sheet w_preview anda di clickevent tombol PREVIEW dg koding ini : // mztolo 2006 string kode1,kode2,dwfilter string ls_nama_window ls_nama_window = Message.StringParm kode1 =righttrim(sle_1.text) kode2 =righttrim(sle_2.text) dw_1.dataobject=ls_nama_window dw_1.settransobject(sqlca) if len(kode1)>0 and len(kode2)>0 then dwfilter ="nis >='"+kode1+"' and nis

  • mztolo 2006 PB #13 opensheetwithparm() 3

    Pertama anda harus declare variable untuk datanya di Instance Variables spt ini :

    string ls_nama_window Terus capture datanya anda ketik di open event dari sheet tersebut spt ini :

    ls_nama_window = Message.StringParm Sehingga koding di click event PREVIEW bisa ditulis spt ini : // mztolo 2006 string kode1,kode2,dwfilter kode1 =righttrim(sle_1.text) kode2 =righttrim(sle_2.text) dw_1.dataobject=ls_nama_window dw_1.settransobject(sqlca) if len(kode1)>0 and len(kode2)>0 then dwfilter ="nis >='"+kode1+"' and nis

  • mztolo 2006 PB #13 opensheetwithparm() 4

    Note : Cara atau aturan spt ini juga berlaku untuk variable atau parameter lain yg anda mau pakai di seluruh event sheet anda atau object yg ada di sheet anda. Bagaimana jika variable itu kita ingin pakai untuk seluruh aplikasi, artinya bersifat public atau global ? Anda bisa ketikkan di Global Variables spt ini :

    Global Variables ini bisa diakses dari semua lokasi di aplikasi. Sedangkan Instance Variables bisa diakses dalam lingkup object tersebut atau bisa juga disamakan/dianggap sbg property sebuah object. Ok lebih detailnya anda bisa baca di help PB J Mmmm.saya pikir sudah cukup sampai disini J Eiiiittt nanti dulu apakah anda sudah puas ?! Belum ? Mmmm.kenapa ? Okcoba jalankan kembali aplikasi anda.dan jalankan/buka sheet cetak data siswa/tabungan. Previewkan.mmmm sukses !! Sekarang dlm kondisi sheet preview ini aktif coba jalankan sheet cetak data ujian siswa Apa yg terjadi ? Window preview untuk yg kedua kali tdk mau tampil ! Benar sekali krn memang w_preview sudah tampil untuk data tabungan siswa. Hal ini akan sama terjadi jika anda mencetak data ujian dan kemudian dlm kondisi masih preview anda coba cetak juga data tabungan siswa. Lalu bagaimana solusinya ? Anda ketik koding spt ini di click event menu laporan anda : w_preview w_pre1 OpenSheetWithParm(w_pre1,"dw_lap_tabungan",w_utama,5,original!) Dan spt ini. w_preview w_pre2 OpenSheetWithParm(w_pre2,"dw_lap_ujian",w_utama,5,original!) Note : Perintah di atas dipakai untuk membuka 2 window yaitu w_pre1 dan w_pre2 dari type window/sheet yg sama yaitu w_preview Dengan cara di atas barulah di mungkinkan untuk membuka sheet preview secara bersamaan dari 2 atau lebih laporan yg ada.

  • mztolo 2006 PB #13 opensheetwithparm() 5

    Tampak di gambar bawah isi click event menu lap data tabungan siswa :

    Tampak di gambar bawah isi click event menu lap data nilai ujian siswa :

  • mztolo 2006 PB #13 opensheetwithparm() 6

    Buktikan.daninilah hasilnya :

    Tampak sheet preview tampil untuk 2 buah laporan yg ada J Perlu dicatat juga cara ini berlaku jg untuk sheet/window yg lain yg mungkin anda mau tampilkan berulang. Mmmm sekarang anda sudah puas ? Blom juga ? Apa kegunaan opensheetwithparm() yg lain ? Datawindow memungkinkan kejadian spt ini.. Misal ada sebuah tampilan tabular berbentuk row per row ke bawah tentunya. Kemudian anda double click salah satu row..tampilah modul edit untuk atau khusus row/data tersebut. Bagaimana membuka sheet editing ini agar sesuai dg row/data yg di click ? Dengan opensheetwithparm() atau openwithparm() !! Benar sekali J Masih blom puas juga ?! Mmmmm..tetaplah untuk membaca dan belajar. Kembangkan juga sheet preview yg ada sehingga benar2 bisa untuk preview semua bentuk laporan yg ada. Akhir kata..Sukses untuk anda !!

  • mztolo 2006 PB#14 tambahan 1

    PB#14 (tambahan) Sebelum melangkah lebih jauh di pemrograman PB saya ingin menambahkan beberapa hal yg mungkin kelaknya berguna dan memudahkan.. Coba anda buka workspace latihan anda sebelumnya.spt ini :

    Kalo kita perhatikan mungkin ini adalah layout favorite anda..ada system tree nya ada paint untuk datawindow..nama2 kolomnya dan tentunya properties Tapi mungkin karena suatu hal maka.tampilan berantakan spt ini

  • mztolo 2006 PB#14 tambahan 2

    Perhatikan tampilan kolom ada diantara datawindow painter dan properties. Lalu jika kita ingin mengembalikan keposisi semula bagaimana ? Caranya .klik menu spt gambar di bawah :

    Dan anda bisa perhatikan tampilan akan rapi kembali..