Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

PENDAHULUAN

Web Datawindow merupakan fitur terbaru dari EAStudio 3.0 yang memungkinkan datawindow
powerbuilder bisa dipasang di web, keuntungan dari fitur ini adalah sepenuhnya menggunakan
solusi thin-client dan tidak lagi memerlukan plug-ins dan install file deployment pada komputer
client.
Pada artikel ini anda akan dipandu dalam membuat dan mendeploy aplikasi Web DataWindow
sederhana. Dalam pembuatan Web Datawindow anda akan mempergunakan beberapa tools
yang terdapat di EAStudio seperti: PowerBuilder 7.0, Adaptive Server Anywhere 6.0, Powersite
7.0, PowerDynamo 3.0 dan Jaguar CTS 3.0. (Pada artikel ini tidak di bahas tentang PowerJ)

Tahapan pembuatan Web DataWindow :

1. Membuat
Datawindow sederhana dengan menggunakan PowerBuilder 7.0
2. Menjalankan
dan melakukan konfigurasi Jaguar Server
3. Menyiapkan
website database dengan mengunakan PowerDynamo
4. Membuat Web
Page yang didalamnya ada Datawindow dengan mengunakan
PowerSite dan
mendeploy-nya kedalam PowerDynamo Web
site database
5. Melihat hasil
Web Datawindow dengan menggunakan browser (ie,netscape atau yg
lainya)

PERSIAPAN SEBELUM MULAI.

Software yang perlu di instal di PC anda :

-

Win NT 4.0
(SP3+)
PowerBuilder
7.0 (di-install dengan database Demo)
Adaptive
Server Anywhere 6.0
PowerSite 7.0
(lihat catatan di bawah)

1 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

- PowerDynamo
3.0
- Jaguar CTS 3.0
- Browser
(Netscape Navigator 4.X, Microsoft Internet Explorer 4.X atau 5.X)

Catatan : Sebelum menginstall Powersite, anda harus terlebih dahulu install IE 4.X atau 5.X. IE
4.X sudah ada didalam CD EAStudio didalam directory /support.

Tahap I

: Pembuatan DataWindow

Tahap II

: Seting Jaguar Server

Tahap III

: Menyiapkan Web Site Database dengan Menggunakan PowerDynamo

Tahap IV

: Membuat dan
deploy
men- Web Site dengan Menggunakan Powersite (32 menit)

2 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Pembuatan Data Window

Latihan :
1. Pelajari Web
DW development Cycle Task and Diagram
2. Jalankan
PowerBuilder 7.0.
"dari task bar : Start pilih Program>Sybase>PowerBuilder
7.0>PowerBuilder
3. Buat sebuah
library baru dengan nama test_htmldw.pbl
Jika anda pertamakali menggunakan PowerBuilder 7.0, anda akan melihat
window
'PowerBuilder requiers an application'. Pada tombol 'New' click
pada icon application.
ketikan nama applikasi dengan test_htmldw didalam
test_htmldw.pbl dan click tombol Finish.
4. Lakukan
koneksi ke database EASDemo DB V3
Pilih window > Database Profile atau klik pada tombol 'Database
Profile' pada
toolbar
Dari list instlled "Database Interfaces', klik pada ODBC, jika EAS
DEMO DB V3
tidak ada tanda check pada database icon kemudian pilih EAS
DEMO DB V3 lalu pilih ombol
Connect, jika tanda check ada pada datbase
icon tersebut maka anda sudah connect.
5. Pada
PowerBuilder, buat sebuah datawindow baru dengan mengunakan Tabular
presentation dan Quick select SQL.
Pilih File>New>DataWindow>Tabular dan Klik OK, Pilih Quick select
dan tekan
tombol Next. Pilih table 'customer' dan pilih 3 atau 5 kolom.
Lalu klik OK, selanjutnya tekan
tombol next dua window berikutnya
Setelah anda ada di DataWindow Painter, tambahkan dua tombol di footer :
namakan keduanya dengan Next Page dan Previous Page. Definisikan actionnya
dengan
PageNext dan PagePrior (untuk mendiinisikan action kedua tombol
tersebut ada di General
Tab pada Property)
Untuk melihat/memunculkan properties klik pada datawindownya
Di tab General dari properties datawindow, check pada 'HTML DataWindow'
Option 'HTML DataWindow' gunanya untuk membuat datawindow menjadi HTML
presentation ketika anda preview datawindow
Pilih Design>HTML Preview
Klik di icon panah kanan untuk menggulung tab kearah kanan pada property
datawindow. Di tab 'HTML Generation' property set 'Rows per Page' menjadi
5

3 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Pilih Design>HTML Preview untuk melihat datawindow yang di convert ke

HTML.
Tombol navigation anda akan terlihat (Next & Previous) tapi
tidak akan berfungsi.
Simpan datawindow anda dengan nama d_namaanda_htmldw di test_htmldw.pbl.
Lalu keluar dari PowerBuilder.

Catatan : Didalam PowerSite dan PowerJ terdapat tool DataWindow Builder, tool tersebut
sama dengan datawindow painternya PowerBuilder. Anda bisa menggunakan DataWindow
Builder tersebut untuk meng-edit atau membuat datawindow.

Kunci dari fitur baru Web DataWindow ini adalah komponen yang di install di PB Runtime
selama melakukan proses instalasi Jaguar CTS 3.0. Komponen ini disebut dengan HTML
(DataWindow) Generator. Metod dari komponen HTML Generator ini adalah merubah
DataWindow PowerBuilder (termasuk didalamnya : retrieve data dan format DataWindow)
menjadi HTML.

Ketika kita menggunakan semua komponen EAStudio dalam mengimplementasikan fitur baru
Web Datawindow ini, programer sama sekali tidak melakukan apa-apa disisi PowerBuildernya.
Tetapi yang harus kita perhatikan adalah PBL atau PBD yang didalamnya terdapat datawindow
yang akan kita gunakan di EAStudio harus dikenal oleh Jaguar. Perhatikan apakah direktori pbl
tersebut sudah ada didalam path sistemnya Jaguar Server !.

Fitur-Fitur DataWindow yang Suport Maupun Tidak

4 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Hampir semua presentation style DataWindow bisa digunakan, kecuali Graph, RichText, OLE
dan Composite.

Beberapa fitur yang tidak suport adalah : Graph, sliding, autosize hight tau width, edit mask,
resizable atau moveable object, OLE, richtext, dan nested report. Jika anda mengunakan
fitur-fitur yang tidak support diatas akan diabaikan.

Preview Datawindow ke HTML

Pada tab General dalam properties datawindow terdapat property checkbox 'HTML
DataWindow'. Perubahan setting pada property ini menandakan datawindow anda bisa di
preview sebagai Web DataWindow sewaktu anda memilih menu Design>HTML Preview.
Secara otomatis browser default anda akan membuka layout datawindow anda.

Setting Jaguar Server

Latihan :
1. Jalankan

Jaguar Server.

Dari Start, pilih Program>Sybase>Jaguar CTS 3.0>Jaguar Server

Anda akan melihat window DOS dengan judul 'Jaguar CTS'. Jika anda melihat
'Accepting Connections' pada akhir text, menandakan Jaguar Server jalan
dan siap
menunggu.

5 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Anda bisa mengecilkan window DOS tersebut (Minimize), dan pada task bar
terlihat 'Jaguar CTS'

akan

Ketika anda meng-install Jaguar, ada piliah 'install it as an NT service'.

Jika anda
memilih option ini, sewaktu menjalankan Jaguar dari Start akan
muncul error 'cannot open
port', error ini muncul karena Jaguar telah
jalan. Jaguar jalan secara otomatis jika memilih
sebagai service NT. Anda
bisa merubahnya dengan cara masuk ke Control Panel>Service
dan rubah
jaguar menjadi 'manual'.
2. Kemudian, anda
harus menjalankan Jaguar Manager untuk melakukan setting pada
Jaguar
Server.
Dari Start, pilih Program>Sybase>Jaguar CTS 3.0>Jaguar Manager.
Menjalankan Jaguar Manager akan membuka dua buah icon di task bar anda:
Jaguar Manager dan Sybase Central. Jaguar Manager berupa DOS window.
Sybase Central
merupakan aplikasi yang dugunakan untuk mengkonfigurasi
Jaguar Server anda.
Sybase Central mempunyai 2 'plug-ins': Jaguar Manager dan Security
Manager.
Pada latihan ini anda hanya menggunakan Jaguar Manager.
" Pertama, anda harus mendefinisikan terlebih dahulu jaguar Server
yang akan
anda manage.
* Pilih Tools>Connect>Jaguar Manager
* Didalam window login, isi User Name = jagadmin, tidak ada password, Host
Name
= localhost dan port = 9000. (ini merupakan konfigurasi default dari
Jaguar server) kemudian
klik Connect.
Jika anda meng expand 'Jaguar Manager' di treeview, anda akan melihat
beberapa
folder. Folder-folder tersebut merupakan properties dan configuration
setting dari Jaguar
Server yang anda connect.
Buka pre-installed komponen HTML Generator di bawah DataWindow Package
* Klik pada folder 'Package'. Anda akan melihat beberapa pre-installed
packages.
Kemudian
expand Package DataWindow, anda akan melihat
komponen 'HTML
Generator', jika anda klik pada komponen tersebut, anda
akan melihat beberapa method
untuk komponen tersebut pada 'Details' view
Package merupakan kumpulan dari beberapa komponen
Selanjutnya melangkah ke setting 'Connection Cache' untuk jaguar Server

anda

Connection Cache hampir sama dengan Database Profile pada PowerBuilder.

Disini anda melakukan definisi parameter yang dibutuhkan oleh Jaguar untuk
melakukan
koneksi ke database yang nantinya digunakan oleh Web DataWindow.
* Di bawah Folder 'Server', expand Item jaguar Server. cari dan Expand
folder
'Installed Connection Cache', disana anda akan melihat ada beberapa
connection cache

6 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

yang telah terinstall, hal tersebut disebabkan oleh

DatWindow melakukan retrieve pada
database EAS Demo V3, Jaguar memerlukan
connection cache pada database yang sama.
* RMB (Right Mouse Button) pada folder 'Install Connection Caches'.
* Klik pada 'Create and Install a New Connection Cache' button.
* Berinama cache tersebut dengan namaanda_jag_cache_to_easdemo. Klik pada
Create New Connection Cache'.
* Pada Tab 'General' dari window 'Connection Cache Properties'

Description :

optional

Server Name :

EAS Demo DB V3 (harus sama dengan nama ODBC DSN)

User Name :

tidak diperlukan ( jika sudah diisi di ODBC DSN)

Password :

tidak diperlukan ( jika sudah diisi di ODBC DSN)

7 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

1. *) Selain yang ditulis diatas, biarkan settingnya secara

default

* Di tab Driver, pilih ODBC dan tulis DLL name: ODBC32.DLL

- Untuk ODBC connections. Server Name harus sama dengan Data Source Name
yang ada di ODBC administrator.

Ada tombol 'Ping' pada tab 'General' untuk mengetest koneksi ke atabase, tetapi sebelumnya anda har

1.

* Simpan Connection Cache dengan menekan tombol OK

* Disconnect Jaguar Manajernya:
Tools>Disconnect>Jaguar manager. Klik 'Yes' jika keluar pesan 'Are

'Close'.

* ShutDown Jaguar Servernya, RMB icon 'Jaguar CTS' pada task bar anda lalu

* Restart Jaguar Server:

Start>Programs>Sybase>Jaguar CTS 3.0>Jaguar Server, lalu
windownya.

diatas)

Yous sure ...'

pilih

minimize

*Koneksi ulang Jaguar Manajernya:

Tools>Connect>Jaguar Manager> (gunakan user dan nama servernya

seperti yang

* Expand folder 'Connection Caches' -nya, dan ddouble klik pada

namaanda_jag_cache_to_easdemo untuk membuka propertiesnya.
* Klik tombol 'Ping' untuk mengecek koneksinya, Anda akan melihat pesan

"Ping of

8 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

xxxx suceeded". Klik OK, pada window 'Connection caches

Properties OK lagi.

Catatan : Jika anda tidak bisa melakukan koneksi.

- Coba 'Ping' EASDemo' connection cache, jika ada koneksi, pastikan anda
parameter connection cache namaanda_jag_cache_to_easdemo sama dengan
parameter
connection cache 'EASDemo'
- Cek ODBC Administratordari Control Panel apakah ada 'EAS Demo DB V3'
pada
System Data Source' -nya.
- Cek kembali apakah server name pada cache properties yang anda tulis
sudah
sama dengan source name pada ODBC
- Test koneksi di ODBC administrator

RMB = = Right Mouse Button

Seting Web Site Database dg Pdynamo

Latihan :
1. Jalankan
PowerDynamo
Dari Start bar:
Programs>Sybase>PowerDynamo 3.0>Manage PoweDynamo
* Ini akan menjalankan Sybase Central lain.
- Pada Sybase centra ini akan ada dua Plug-ins : Adaptive Server Anywhere
dan
PowerDynamo 3.0
- Jaguar berada di Sybase Central yang lain, karena Jaguar berbasis Java
2. PowerDynamo
digunakan untun mengatur repository database anda yang akan di
gunakan di
Web Site. Sebagai contoh, rata - rata demo atau contoh applikasi
menggunakan database EASDemo baik sebagai repository data atau repository
Web site.
Pertama, anda harus membuat sebuah database dan data source ODBC baru.

9 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

" Dengan menggunakan Sybase Central, Expand folder 'Adaptive Server

Anywhere'
dan klik folder 'Utilities'.
* Double klik pada 'Create Database' Wizard
Pilih path dan beri nama databasenya dg namaanda_website_db.db
Klik next sampai 5 kali, pada window 'Select a Page Size' pilih 2048
bytes. Trus klik
sampai selesai.
Selanjutnya, Klik pada folder 'Utilities' di folder 'PowerDynamo 3.0' atau
folder
'Adaptive Server Anywhere' double klik pada 'ODBC Administrator'
wizard.
* Pada tab 'System DSN' pilih 'Add'
* Pilih Adapative Server Anywhere 6.0' driver dan klik 'Finish'
* Seanjutnya pada window 'ODBC Configuration for Adaptive Server
Anywhere'.
lakukan setting dibawah ini:
- Tab ODBC : isi nama data source dengan namaanda_website_db
- Tab Login : UserID = dbs, Password = sql
- Tab Database :

Server name

: tidak perlu di isi

Start line

: tidak perlu di isi

10 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Database Name

: Optional (bisa disi bisa tidak)

Database file

: Pilih (gunakan tombol browse) file yang tadi telah dibuat

1. - Tab Network : tidak ada perubahan

- Tab Advance : tidak ada perubahan
* Kembali ke tab 'ODBC' dan klik pada tombol 'Test Connection' untuk test
apakah
koneksi ke database sudah bisa. Kemudian klik OK
* Pada window 'ODBC 'Configuration for...' klik OK
* Pada window 'ODBC 'Data Source Administrator' klik OK
2. Sekarang
database dan ODBC Data source telah selesai dibuat, selanjutnya anda
bisa
membuat Connection Profile dengan PowerDynamo ( sama dengan database
profile
di PowerBuilder)
Dari Sybase Central pilih:
Tools>Connection Profiles. Window Connection Profile akan muncul.
Klik New, kemudian isi nama untuk 'Connection Profile' dengan
namaanda_website_profile dan pilih 'PowerDynamo 3.0' dari list yang ada,
kemudian klik
OK.
Pda window 'Connection Profile', pilih connection type dengn 'ODBC'. Pilih
ODBC
Data Source yang telah anda buat tadi (namaanda)website_db). UserID
dan Password tidak
perlu diisi, kemudian Klik OK untuk membuat profilenya.
Klik Close pada window 'Connection Profiles'
3. Selanjutnya
anda harus membuat mapping ke database. Mapping berupa address
URL yang
akan link ke database.

11 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Di Sybase Central, expand pada PowerDynamo di treview, pada Utlities,

expand
'Configuration' cari 'Mappings'. Pada sebelah kanan view, doble
klik 'Add Maping'
* Untuk 'URL prefix', isi /namaanda_website
* Type of site - nya 'database site'
* Pilih site dengan profile yang telah anda buat (namaanda_website_profile)
* Klik OK
* Klik OK
- Sekarang, mapping yang telah anda buat (/namaanda_website/apapun.html),
akan membuat
namaanda_website_profile
melakukan koneksi dengan
namaanda_website_db
untuk menyiapkan data pada
apapun.html
Web page pada browser.

Yang terakhir, anda harus malakukan koneksi pada database untuk melakukan konfigurasi
pada Web site.
Untuk menggunakan connection profile yang telah anda buat, dengan menggunakan Sybase
Central pilih :
Tools>Connection Profiles, kemudian pilih nama profile yang anda buat tadi dan tekan
Connect.
Pada waktu pertamakali anda melakukan koneksi, akan muncul window dengan pesan 'There
is no web Site stored with this Userid and Data Source. Do you want to create a web site on this
connection?" ini bukan error, kemudian tekan tombol Yes.
- Pertama kali anda melakukan koneksi dengan database Web site system akan meng-install
beberapa table yang dibutuhkan (dengan nama depan 'Web'). Hal ini sama dengan
PowerBuilder sewaktu kita melakukan koneksi pertama kali ke database.
Selanjutnya anda akan melihat window dengan judul 'Web Site Setup'. Window ini
menanyakan Root folder pada Web site anda, nama defaultnya adalah 'Site', berinama secara
default lalu tekan OK.
Setelah PowerDynamo selesai membuat file-file yang dibuthkan, anda akan meliah beberapa
item pada treeview di bawah PowerDynamo yang sama namanya dengan Web site anda. Jika
anda meng-expandnya, maka anda akan melihat folder 'Site', Ini folder utama anda untuk
menyimpan file-file Web page anda.
Minimize PowerDynamo 3.0 - Sybase Central.

12 / 13

Tutorial Cara Mudah Membuat Web Data Window pada powerbuilder 7

Sumber : http://www.Indopb.com/training/webdatawindow/index.html

13 / 13