Membuat Program Biodata Karyawan Part 1

Untuk tutorial pertama saya akan memberikan contoh bagaimana membuat program biodata karyawan. Dalam program yang akan kita buat, nantinya akan memiliki detail berikut ini:

1. Tipe MDI
2. Window Login
3. Window Input dan Edit Data Karyawan
4. Window Laporan
5. Window Ganti Password
6. Window About
7. Window Cetak

Penjelasan:

1. Tipe MDI : Kita akan membuat window utama berupa window dengan tipe MDI, dimana nanti anda akan membuat menu untuk window utama.
2. Window Login : Window yang digunakan untuk verifikasi user yang menggunakan.
3. Window Input dan Edit Data Karyawan : Window ini untuk menginput dan mengedit data-data karyawan.
4. Window Laporan : Window untuk mencetak Data Karyawan yang telah diinput.
5. Window Ganti Password : Window untuk mengganti password bagi user yang login.
6. Window About : Window yang menginformasikan Tentang Program.
7. Window Cetak : Window yang digunakan untuk memilih Printer dan jumlah pencetakannya.

Dalam tutorial ini, nantinya anda akan membuat:

• Custom Class
• Structure
• Function

Untuk database yang digunakan adalah PostgreSQL 9.3, jika anda belum memilikinya, anda bisa download di PostgreSQL atau jika anda ingin menggunakan database lain, silahkan, yang penting jika ada perbedaan syntax SQL anda dapat mengconvertnya.

Untuk langkah pertama, buat workspace baru dengan nama biokaryawan atau dengan nama lain yang anda inginkan. Caranya buka PowerBuilder 12 Classic, lalu klik File->New->Pilih tab Workspace, lalu klik Workspace dan klik OK. browse ke directory yang anda inginkan, lalu beri nama biokaryawan atau nama yang sesuai dengan pilihan anda, lalu klik Save.

Langkah kedua adalah membuat targetnya, caranya klik menu File->New->Pilih tab Target, lalu pilih Application dan klik OK, masukkan nama aplikasinya, untuk gampangnya samakan saja dengan nama workspacenya, karena nama workspace yang saya buat itu biokaryawan, maka saya masukan biokaryawan dalam Application Name, sehingga dikotak library dan target akan muncul nama yang sama dengan ekstensi .pbl dan .pbt, seperti ini:

Tutorial 1 - Setting Target Dan Library

Klik Finish untuk membuatnya.

Langkah ketiga adalah membuat Menu untuk window utama, Klik menu File->New->Pilih tab PB Object, pilih/klik Menu lalu klik OK. Maka akan tampil jendela berikut ini:

Tutorial 1 - Membuat Menu

Klik kanan di untitled0 lalu pilih Insert Submenu Item, lalu ketikkan: &Master, dan buat 5 menu lagi:

• &Input Dan Edit Data Karyawan
• &Laporan
• &Pengaturan
• Window
• E&xit

Tips: Untuk mempercepat saat membuat menu, setiap setelah selesai mengetik Teks untuk menunya, tekan tombol Tab untuk langsung membuat menu yang berikutnya, jadi urutan yang anda ketik adalah seperti ini:

&Master (tekan Tab) &Input Dan Edit Data Karyawan (tekan Tab) &Laporan (tekan Tab) &Pengaturan (tekan Tab) Window (tekan Tab) E&xit lalu tekan Enter

Ket: Karakter (&) mengindikasikan shortcut keyboard untuk menunya, jadi nantinya saat dirunning, user bisa menggunakan kombinasi tombol Alt dan karakter setelah karakter (&), misalnya untuk mengakses menu Master, user bisa menekan tombol Alt dan M secara bersamaan.

Buat Submenu untuk Menu Master, caranya klik kanan di menu Master lalu pilih Insert Submenu Item, lalu ketikkan: &User. Lakukan hal yang sama pada menu Laporan, Pengaturan dan Window dan ketikkan:

• Submenu Laporan: &Data Karyawan
• Submenu Pengaturan: &Ganti Password
• Submenu Window: &About

Buat Toolbar untuk beberapa menu:

Klik menu Input Dan Edit Data Karyawan, pada Propertiesnya pilih tab Toolbar, lalu pada ToolbarItemName, pilih icon yang anda inginkan, kalau saya memilih icon gambar orang dengan nama Custom076!, lalu masukkan tooltipnya di kotak ToolbarItemText, misalnya: Input/Edit Data Karyawan.

Lakukan hal yang sama untuk menu Laporan->Data Karyawan, Pengaturan->Ganti Password dan Exit, untuk versi saya, berikut detailnya:

• Laporan->Data Karyawan: ToolbarItemName: Custom092!, ToolbarItemText: Laporan data karyawan
• Pengaturan->Ganti Password: ToolbarItemName: Custom016!, ToolbarItemText: Ganti password
• Exit: ToolbarItemName: Exit!, ToolbarItemText: Keluar dari aplikasi

Berikan separator dengan cara mengubah nilai ToolbarItemSpace menjadi 1 untuk:

• Laporan->Data Karyawan
• Pengaturan->Ganti Password
• Exit

Untuk menu yang saya buat hasilnya seperti ini:

Tutorial 1 - Membuat Menu Dan Toolbar

Simpan Menu yang telah anda buat dengan nama m_utama.

Langkah keempat adalah membuat Window utama, caranya Klik File->New->Pilih tab PB Object, lalu pilih Window lalu klik OK. Akan muncul jendela desain windownya.

• Di jendela Propertiesnya, pada kotak Title ganti Untitled menjadi Program Biodata Karyawan (atau apapun yang anda inginkan).
• Pada bagian WindowType, ganti menjadi mdi!
• Pada bagian MenuName, klik tombol [...] lalu pilih m_utama dan klik OK.
• Pada bagian WindowState ganti menjadi maximized!
• Simpan window ini dengan nama w_utama

Langkah kelima adalah membuat window login, caranya Klik File->New->Pilih tab PB Object, lalu pilih Window lalu klik OK. Akan muncul jendela desain windownya.

• Di jendela Propertiesnya, ganti WindowType menjadi Response, lalu masukkan control-control berikut ini:
• Static text: 2 buah, Teksnya: Nama User: dan Password:
• Single Line Edit: 2 Buah
• Ubah nama sle_1 menjadi sle_nama dan sle_2 menjadi sle_password, cb_1 menjadi cb_ok, cb_2 menjadi cb_batal.
• Untuk Teksnya: sle_nama dan sle_password dikosongkan, untuk cb_ok Teksnya: OK, untuk cb_batal Teksnya: Batal

Atur properties yang lainnya untuk window ini, kalau versi saya pengaturan windownya:

ControlMenu dan TitleBar saya hilangkan tandanya, sehingga windownya akan tampak seperti ini:

Tutorial 1 - Window Login

Untuk sementara (biar hasilnya bisa dilihat), masukkan script berikut ini ke event Clicked() pada cb_ok:

Open(w_utama)

Close(Parent)

dan script berikut ini untuk event Clicked() pada cb_batal:

Halt

Simpan window ini dengan nama w_login

Ket: Parent itu mengindikasikan w_login, karena w_login merupakan Parent dari cb_ok.

Langkah keenam adalah memasukkan script pada event Open di applicationnya, caranya klik dua kali pada applicationnya, kalau disaya namanya biokaryawan (dibawah biokaryawan.pbl), lalu ketikkan script:

Open(w_login)

Lalu klik Save pada menubar.

(Ini untuk sementara dulu, biar kita bisa running aplikasinya.)

Penjelasan:

Script di event Open Application (Open(w_login)) akan dieksekusi pertama kali oleh PowerBuilder, dan dalam alur program yang sedang kita buat, window yang pertama kali tampil/dibuka haruslah window login, jika sukses login barulah window utamanya dibuka/ditampilkan, jadi di event Open Applicationnya harus dimasukkan script Open(w_login) bukan Open(w_utama).

Untuk melihat hasilnya, klik Menu Run->Run biokaryawan atau klik toolbar dengan gambar orang berlari, kira-kira seperti ini gambarnya:

Tutorial 1 - Toolbar Run

Klik tombol OK untuk membuka window utama atau klik tombol Batal untuk menutupnya.

Demikianlah tutorial membuat program biodata karyawan bagian pertama ini, untuk bagian kedua akan saya lanjutkan nanti pada Tutorial Membuat Program Biodata Karyawan Part 2.

Akhir kata, semoga sukses untuk semua yang sedang dan akan anda lakukan.

Download tutorial ini dalam format pdf: