Membuat Program Biodata Karyawan Part 6

Pada bagian sebelumnya (Tutorial Membuat Program BiodataKaryawan Part 5) kita telah selesai membuat window w_user sebagai sarana untuk menginput atau mengedit data user yang akan menggunakan program ini, tentunya window w_user hanya bisa diakses oleh user dengan level administrator, untuk pencegahan user dengan level bukan administrator mengakses window w_user, kita telah menuliskan kode yang akan menyembunyikan menu Master dan menu User jika user yang login bukanlah user dengan level Administrator (lihat pada bagian ketiga: Tutorial Membuat Program Biodata Karyawan Part 3).

Window w_user yang telah kita buat, tentunya masih dapat anda kembangkan agar menjadi lebih baik lagi, misalnya pada bagian code untuk menyimpan data, disana aturannya hanya pengecekan jumlah karakter yang diinput pada beberapa kolom, anda bisa kembangkan lebih lanjut lagi, misalnya dengan menambahkan code yang mencegah user menginput data dengan string yang karakternya sama semua (misalnya AAA, BBBB, CCCCC, 00000, 11111 dan seterusnya).

Pada tutorial bagian keenam ini, kita akan membuat window w_karyawan untuk dapat digunakan sebagai sarana menambah atau mengedit data karyawan. Untuk menu ini, semua User dapat mengaksesnya, karena pada dasarnya menu inilah yang menjadi menu utama dalam tutorial ini.

Untuk  window w_karyawan ini, akan kita buat dengan datawindow yang berjenis Freeform, hal ini karena pada window w_user kita telah membuat datawindow dengan jenis Tabular, dan menurut saya pribadi program akan terasa “monoton”, jika window w_karyawan dibuat dengan jenis Tabular juga, makanya untuk datawindow kali ini akan kita buat dengan jenis Freeform, selain karena hal yang baru saja saya sebutkan, untuk data karyawan ini, akan saya buat ada inputan foto karyawan. Namun inputan foto ini hanyalah berupa path dari file foto, dan bukan file fotonya yang dimasukkan kedalam database, pertimbangan saya, selain akan “membesarkan” ukuran databasenya, juga nantinya akan “sedikit” menambah kode/script untuk memanggil/melihat foto karyawan jika file fotonya yang dimasukkan kedalam databasenya.

Sebelum kita membuka dan meneruskan langkah pembuatan datawindow karyawan, ada baiknya kita buat terlebih dahulu folder tempat menyimpan file foto dari karyawan. Ini karena nantinya file asli dari foto karyawan akan disalin kedalam folder tersebut dan akan kita namai ulang sesuai dengan NIK (Nomor Induk Karyawan).

Untuk langkah pembuatan folder ini adalah sebagai berikut:

• Buka direktori workspace biokaryawan, kalau disaya direktorinya adalah E:\Sample
• Buat folder baru dengan nama Photos dalam direktori tersebut, lihat gambar dibawah ini sebagai ilustrasi hasil dari yang saya lakukan:

Tutorial 1 - Struktur Folder Photos

• Buat lagi sebuah file jpg, dengan nama default lalu letakan file tersebut dalam folder yang sama dengan file workspace biokaryawan, file ini akan kita gunakan sebagai default picture (gambar default) dari datawindownya. File ini jika anda tidak mau membuatnya, anda bisa cari di google, sebisa mungkin resolusinya tidak melebihi 600x800 pixel, hal ini untuk menghindari loading yang lama jika file gambarnya terlalu besar, kalau disaya, saya buat menggunakan Photoshop dengan resolusi 240x320 pixels, seperti ini:

Tutorial 1 - Gambar Default

• Sehingga struktur dalam folder direktori biokaryawan akan seperti ini:

Tutorial 1 - Struktur File Dan Folder

Langkah selanjutnya adalah membuat database karyawannya, silahkan buat table baru dalam PostgreSQL pada schema karyawan dengan struktur seperti ini:

Nama Tabel: tbl_karyawan

Nama Kolom	Tipe Data	Keterangan
nik_karyawan*	character varying(9)	2 digit Tahun dan bulan serta nomor urut, misalnya 140900001
nama_karyawan*	character varying(30)	Nama lengkap karyawan
jenis_kelamin*	character varying(9)	Laki-Laki atau Perempuan
tempat_lahir	character varying(20)	Nama Kota tempat lahir
tanggal_lahir	date	Tanggal lahir karyawan
status_nikah	character varying(15)	Status pernikahan: Belum Menikah, Menikah, Janda atau Duda
pendidikan	character varying(50)	Pendidikan terakhir
alamat_lengkap	character varying(100)	Alamat lengkap karyawan
nomor_telepon	character varying(15)	Nomor telepon rumah
nomor_handphone	character varying(30)	Nomor handphone karyawan
alamat_email	character varying(30)	Alamat email karyawan
nama_bagian*	character varying(30)	Nama departemen/ bagian
nama_jabatan*	character varying(30)	Nama jabatan pekerjaan karyawan
status_kerja	character varying(10)	Tetap atau Kontrak
tanggal_masuk*	date	Tanggal masuk kerja
file_foto*	character varying(13)	path file foto (NIK + .JPG)

Untuk tabel ini kolom Primary Key adalah kolom nik_karyawan. Anda juga bisa menambahkan kolom yang lainnya sesuai dengan kebutuhan anda, atau anda juga bisa mengurangi kolom-kolom yang tidak anda butuhkan diatas, namun kolom yang wajib ada adalah kolom dengan tanda *.

Sekarang jalankan PowerBuilder Classic 12, lalu buka kembali workspace biokaryawan.

• Buat datawindow baru dengan cara klik File->New->pilih tab Datawindow lalu pilih Freeform dan klik OK.
• Pilih Quick Select lalu klik Next
• Disebelah kiri pilih tabel karyawan.tbl_karyawan
• Klik Add All lalu klik OK.
• Pada jendela berikutnya, atur sesuai dengan keinginan anda lalu klik Next dan klik Finish untuk membuat datawindownya.
• Simpan datawindow ini dengan nama d_karyawan

Atur properti datawindownya seperti berikut ini:
Tandai kotak Show Backcolor On XP (di tab General)
Background Color: Sky

Nama Kolom	Properti	Keterangan
nik_karyawan	Background	Color: Yellow
jenis_kelamin	Edit Style	DropDownListBox, Code Table: Laki-Laki dan Perempuan
tanggal_lahir	Edit Style	Edit Mask, Date, dd/mm/yyyy, Drop-down calendar
status_nikah	Edit Style	DropDownListBox, Code Table: Belum Menikah, Menikah, Duda, Janda
status_kerja	Edit Style	DropDownListBox, Code Table: Tetap dan Kontrak
tanggal_masuk	Edit Style	Edit Mask, Date, dd/mm/yyyy, Drop-down calendar

• Atur properti Protect untuk semua kolom dengan nilai 1
• Pindahkan kolom tanggal_masuk kebawah kolom nik_karyawan
• Atur Tab Order nik_karyawan menjadi 0 dan kolom tanggal_masuk menjadi 1 atau 10
• Masukkan 1 buah Picture Object, piilh file Default.JPG dan ganti nama Picture Objectnya menjadi p_foto, dalam Properti p_foto, dalam kotak File Name, ubah namanya menjadi hanya "Default.jpg" (tanpa tanda kutip). Ini agar ketika dirunning dalam folder yang berbeda atau dirunning dikomputer client, file Default.jpg akan tetap bisa terbaca.
• Masukkan 1 buah Command Button dan ganti namanya menjadi b_foto dengan Text: Pilih Foto
• (Opsional) Tambahkan 1 buah Static Text pada Header, beri teks: DETAIL DATA KARYAWAN, Border: Raised, Background Color: Maroon, Font Color: Yellow

Atur tata letak/layout dari datawindownya sesuai dengan keinginan anda, kalau saya hasilnya seperti ini layoutnya:

Tutorial 1 - Layout Datawindow dw_karyawan

Sampai disini, kita telah selesai membuat datawindow untuk keperluan menginput dan mengedit data karyawan.

Langkah berikutnya adalah sebagai berikut:
Buka window w_karyawan, dan masukkan control-control seperti dalam window w_user, bahkan propertinya pun sama, disini saya tidak akan terlalu menjelaskan lebih detail mengenai caranya, namun jika anda lupa atau ingin memastikan lagi, silahkan dilihat di bagian keempat dan kelima tutorial ini, silahkan klik Tutorial Membuat Program BiodataKaryawan Part 4 dan Tutorial Membuat Program Biodata Karyawan Part 5. Untuk datawindownya ganti namanya menjadi dw_karyawan dan DataObjectnya adalah d_karyawan.

Masukkan 4 Picture Button dengan detail seperti berikut ini:

Name	PictureName	DisabledName	PowerTipText
pb_pertama	VCRFirst!	Custom043!	Data Pertama
pb_sebelum	VCRPrior!	Custom043!	Sebelumnya
pb_berikut	VCRNext!	Custom043!	Berikutnya
pb_terakhir	VCRLast!	Custom043!	Data Terakhis

Atur letaknya sesuai keinginan anda, kalau saya, layoutnya seperti ini:

Simpan perubahan pada w_karyawan.

Untuk sementara bagian keenam ini saya cukupkan sampai disini dulu, untuk coding/scriptnya akan saya lanjutkan dibagian ketujuh, silahkan klik Tutorial Membuat Program Biodata Karyawan Part 7.

Akhir kata, semoga sukses untuk semua yang sedang dan akan anda lakukan.
Download tutorial ini dalam format pdf: 

Baca Selengkapnya »

Membuat Program Biodata Karyawan Part 5

Pada tutorial bagian kelima ini, kita akan menyempurnakan window w_user untuk dapat digunakan menambah atau mengedit data user yang menggunakan program ini.

Sebelumnya, silahkan klik Tutorial Membuat Program Biodata Karyawan Part 4 terlebih dahulu, jika anda baru mengikuti tutorial ini.

Sebelum melangkah lebih jauh lagi, pastikan terlebih dahulu, desain window w_user sudah seperti ini:

Tutorial 1 - Layout Jendela w_user

Jika window w_user sudah seperti gambar diatas, berikut adalah langkah-langkah menyempurnakan window w_user:

Buka jendela editor window w_user

Buka Event Open dari Window w_user, lalu masukkan script berikut ini dibawah script This.Move(5,5):

dw_user.SetTransObject(SQLCA)

dw_user.Retrieve()

dw_user.SetRowFocusIndicator(Hand!)

dan ketikkan script berikut ini di event retrieveend dari dw_user

IF rowcount = 0 THEN cb_edit.Enabled = False

Gunanya adalah jika belum ada data dalam table tbl_user, maka tombol edit akan didisable.

Simpan perubahan ini.

Jika dirunning maka kurang lebih hasilnya akan seperti ini:

Tutorial 1 - Jendela w_user saat dirunning

Untuk langkah berikutnya dalam bagian kelima ini, kita atur terlebih dahulu properti Protect dan Text Case untuk semua kolom dalam datawindow dw_user dengan nilai 1 dan Uppercase, caranya:

Buka jendela editor datawindow dw_user

Pilih semua kolom

Pada tab General, dibagian Protect, klik tombol Build Expression (disebelah kanan kotaknya) lalu masukkan angka 1, contohnya lihat gambar dibawah ini:

Tutorial 1 - Jendela pengaturan expression properti Protect

Sekarang pilih hanya kolom-kolom berikut ini: user_name, user_password dan user_full_name

Pada tab Edit, atur Case menjadi Upper (1)

Simpan perubahan untuk dw_user

Lanjut lagi, sekarang deklarasikan variabel Integer pada Instance Variables window w_user berikut ini:

Integer ii_mode

(ini adalah integer yang mengindikasikan proses yang sedang dilakukan oleh user, dimana jika user sedang melakukan proses tambah data maka nilai ii_mode akan kita set menjadi 0, sedangkan jika user sedang melakukan proses pengeditan data maka nilai ii_mode akan kita set menjadi 1). Hal ini diperlukan untuk menentukan action pada saat menyimpan data.

Masukkan script berikut ini pada event Clicked dari cb_tambah

ii_mode = 0

// buat baris baru dan jaga-jaga jika baris baru tidak terlihat karena ada dibawah jendela datawindownya

dw_user.ScrollToRow(dw_user.InsertRow(0))

// mengaktifkan kolom Nama User

dw_user.SetColumn("user_name")

// mengaktifkan dw_user

dw_user.SetFocus()

// mengatur nilai level dan status secara otomatis

dw_user.SetItem(dw_user.GetRow(), "user_level", 0)

dw_user.SetItem(dw_user.GetRow(), "user_status", 1)

// pengaturan properti enabled command button

This.Enabled = False

cb_edit.Enabled = False

cb_simpan.Enabled = True

cb_batal.Enabled = True

cb_refresh.Enabled = False

// pengaturan Protect kolom dalam dw_user

// If(IsRowNew(),0,1) berarti jika baris merupakan baris baru, maka kolom bisa diakses, jika bukan kolom tidak bisa diakses

dw_user.Modify("user_name.Protect ='1~tIf(IsRowNew(),0,1)'")

dw_user.Modify("user_password.Protect ='1~tIf(IsRowNew(),0,1)'")

dw_user.Modify("user_full_name.Protect ='1~tIf(IsRowNew(),0,1)'")

dw_user.Modify("user_level.Protect ='1~tIf(IsRowNew(),0,1)'")

dw_user.Modify("user_status.Protect ='1~tIf(IsRowNew(),0,1)'")

Masukkan script berikut ini pada event Clicked dari cb_edit

Long ll_row

ii_mode = 1

ll_row = dw_user.GetRow()

// pengaturan Protect kolom dalam dw_user

// If(GetRow() = " + String(ll_row) + ",0,1) berarti jika baris merupakan baris yang aktif saat tombol edit ditekan, maka kolom bisa diakses, jika bukan kolom tidak bisa diakses

dw_user.Modify("user_name.Protect =1")

dw_user.Modify("user_password.Protect ='1~tIf(GetRow() = " + String(ll_row) + ",0,1)'")

dw_user.Modify("user_full_name.Protect ='1~tIf(GetRow() = " + String(ll_row) + ",0,1)'")

dw_user.Modify("user_level.Protect ='1~tIf(GetRow() = " + String(ll_row) + ",0,1)'")

dw_user.Modify("user_status.Protect ='1~tIf(GetRow() = " + String(ll_row) + ",0,1)'")

// mengaktifkan kolom password

dw_user.SetColumn("user_password")

// mengaktifkan dw_user

dw_user.SetFocus()

// pengaturan properti enabled command button

This.Enabled = False

cb_tambah.Enabled = False

cb_simpan.Enabled = True

cb_batal.Enabled = True

cb_refresh.Enabled = False

Masukkan script berikut ini pada event Clicked dari cb_simpan:

String ls_nama, ls_password, ls_nama_lengkap

String ls_valid1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"

String ls_valid2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ "

Char lc_karakter

Integer li_loop, li_valid = 0

Long ll_user_id, ll_count

// cek data yang dimasukkan oleh user

dw_user.AcceptText()

ls_nama = dw_user.GetItemString(dw_user.GetRow(), "user_name")

ls_password = dw_user.GetItemString(dw_user.GetRow(), "user_password")

ls_nama_lengkap = dw_user.GetItemString(dw_user.GetRow(), "user_full_name")

// cek null atau string kosong

IF IsNull(ls_nama) OR TRIM(ls_nama, True) = "" THEN

MessageBox("Warning", "Nama user tidak boleh kosong.", Exclamation!)

dw_user.SetColumn("user_name")

dw_user.SetFocus()

Return

ELSEIF IsNull(ls_password) OR TRIM(ls_password, True) = "" THEN

     MessageBox("Warning", "Password tidak boleh kosong.", Exclamation!)

     dw_user.SetColumn("user_password")

     dw_user.SetFocus()

     Return

ELSEIF IsNull(ls_nama_lengkap) OR TRIM(ls_nama_lengkap, True) = "" THEN

MessageBox("Warning", "Nama lengkap user tidak boleh kosong.", Exclamation!)

dw_user.SetColumn("user_full_name")

dw_user.SetFocus()

Return

END IF

// cek karakter yang diinput pada Nama, Password dan Nama Lengkap

// cek pada nama user

FOR li_loop = 1 TO LenA(ls_nama)

lc_karakter = Char(MidA(ls_nama, li_loop, 1))

IF PosA(ls_valid1, lc_karakter) = 0 THEN

li_valid ++

MessageBox("Warning", "Nama User hanya boleh diisi dengan karakter AlfaNumeric.", Exclamation!)

Exit

END IF

NEXT

IF li_valid > 0 THEN Return

li_valid = 0

// cek pada password

FOR li_loop = 1 TO LenA(ls_password)

lc_karakter = Char(MidA(ls_password, li_loop, 1))

IF PosA(ls_valid1, lc_karakter) = 0 THEN

       li_valid ++

       MessageBox("Warning", "Password hanya boleh diisi dengan karakter AlfaNumeric.", Exclamation!)

       Exit

END IF

NEXT

IF li_valid > 0 THEN Return

li_valid = 0

// cek pada nama lengkap

FOR li_loop = 1 TO LenA(ls_nama_lengkap)

lc_karakter = Char(MidA(ls_nama_lengkap, li_loop, 1))

IF PosA(ls_valid2, lc_karakter) = 0 THEN

       li_valid ++

MessageBox("Warning", "Nama lengkap user hanya boleh berupa karakter Huruf dan Spasi.", Exclamation!)

       Exit

END IF

NEXT

IF li_valid > 0 THEN Return

// cek panjang karakter yang diinput

IF LenA(ls_nama) < 3 THEN

MessageBox("Warning", "Nama user minimal 3 karakter.", Exclamation!)

dw_user.SetColumn("user_name")

dw_user.SetFocus()

Return

ELSEIF LenA(ls_password) < 5 THEN

Messagebox("Warning", "Password minimal 5 karakter.", Exclamation!)

dw_user.SetColumn("user_password")

dw_user.SetFocus()

Return

ELSEIF LenA(Trim(ls_nama_lengkap, True)) < 4 THEN

MessageBox("Warning", "Nama lengkap user minimal 4 karakter.", Exclamation!)

dw_user.SetColumn("user_full_name")

dw_user.SetFocus()

Return

END IF

// jika ini merupakan proses tambah user, cek apakah nama user yang dimasukkan sudah ada atau belum

// jika belum ada, lanjutkan dengan memasukkan user ID

IF ii_mode = 0 THEN

SELECT COUNT(*)

INTO :ll_count

FROM karyawan.tbl_user

WHERE user_name = :ls_nama

USING SQLCA;

IF IsNull(ll_count) THEN ll_count = 0

IF ll_count > 0 THEN

       MessageBox("Warning", "Nama user yang anda masukkan sudah ada..", Exclamation!)

       dw_user.SetColumn("user_name")

       dw_user.SetFocus()

       Return

END IF

SELECT MAX(user_id)

INTO :ll_user_id

FROM karyawan.tbl_user

USING SQLCA;

IF IsNull(ll_user_id) THEN ll_user_id = 0

ll_user_id ++

dw_user.SetItem(dw_user.GetRow(), "user_id", ll_user_id)

END IF

// data yang dimasukkan user tidak ada masalah, lanjutkan dengan mengupdate database

IF dw_user.Update() = 1 THEN // sukses

Commit;

MessageBox("Sukses", "Data user berhasil disimpan/diupdate.", Information!)

ELSE // gagal

Rollback;

MessageBox("Gagal", "Gagal menyimpan/mengupdate data.", StopSign!)

Return

END IF

// atur properti command button

This.Enabled = False

cb_tambah.Enabled = True

cb_edit.Enabled = True

cb_batal.Enabled = False

cb_refresh.Enabled = True

// atur properti Protect kolom datawindow

dw_user.Modify("user_name.Protect = 1")

dw_user.Modify("user_password.Protect = 1")

dw_user.Modify("user_full_name.Protect = 1")

dw_user.Modify("user_level.Protect = 1")

dw_user.Modify("user_status.Protect = 1")

Masukkan script berikut pada event Clicked dari cb_batal

IF MessageBox("Konfirmasi", "Batalkan semua perubahan ?", Question!, YesNo!, 2) = 2 THEN Return

Rollback;

dw_user.Retrieve()

// atur properti command button

This.Enabled = False

cb_tambah.Enabled = True

cb_edit.Enabled = True

cb_simpan.Enabled = False

cb_refresh.Enabled = True

//atur properti Protect kolom dw_user

dw_user.Modify("user_name.Protect = 1")

dw_user.Modify("user_password.Protect = 1")

dw_user.Modify("user_full_name.Protect = 1")

dw_user.Modify("user_level.Protect = 1")

dw_user.Modify("user_status.Protect = 1")

Untuk event Clicked dari cb_refresh, masukkan script berikut:

dw_user.Retrieve()

Sedangkan untuk event Clicked dari cb_tutup, masukkan script ini:

Close(Parent)

Simpan perubahannya, dan coba jalankan program, lalu masukkan data-datanya, coba juga dengan menginput data yang “tidak sesuai” dengan flownya.

Sampai disini kita telah menyelesaikan window w_user untuk keperluan menginput atau mengedit data user pengguna program.

Untuk sementara, bagian kelima ini cukup sampai disini dulu, nanti kita lanjutkan pada Tutorial Membuat Program Biodata Part 6.

Akhir kata, semoga sukses untuk semua yang sedang dan akan anda lakukan.
Download tutorial ini dalam format pdf: 

Baca Selengkapnya »

Membuat Program Biodata Karyawan Part 4

Sebelum anda mengikuti tutorial keempat ini, mungkin anda ingin melihat tutorial yang sebelumnya, silahkan klik Tutorial Membuat Program Biodata Karyawan Part 3.

Untuk bagian keempat dari tutorial Membuat Program Biodata Karyawan ini, kita akan membuat datawindow untuk w_user dan mengatur layout dalam w_user. Window w_user ini digunakan sebagai sarana bagi user dengan level Administrator untuk menambah user baru atau mengedit data user yang telah ada.

Flow dari window w_user adalah:

A. Input User Baru

• Untuk Kolom User ID akan diprotect, untuk nilainya akan kita berikan secara otomatis dengan bantuan Function (itulah sebabnya pada saat pembuatan tabel tbl_user saya minta kolom user_id jangan dibuat autonumber/counter).
• Semua data wajib diisi, untuk Nama User, Password dan Nama lengkap user ada jumlah minimal karakter yang wajib dipenuhi. Berikut adalah aturan penginputannya:

Kolom	Jumlah Karakter	Keterangan
Nama User	3 - 20	Hanya karakter AlfaNumerik dan tidak boleh ada spasi
Password	5 - 20	Hanya karakter AlfaNumerik dan tidak boleh ada spasi
Nama Lengkap User	4 - 50	Hanya karakter Huruf dan boleh ada spasi

• Untuk kolom Nama User, harus unik dan tidak boleh sama dengan Nama User yang telah diinput sebelumnya.

B. Edit data User yang telah ada

• Kolom ID User dan Nama User tidak dapat diubah, untuk keperluan ini nanti akan kita Protect kolom tersebut.
• Untuk flow lainnya sama dengan flow input data baru.

Untuk langkah-langkah pembuatan datawindownya adalah sebagai berikut:

Buat datawindow dari tabel tbl_user dengan jenis Tabular, langkah-langkahnya adalah sebagai berikut:

Klik File->New, lalu pilih tab datawindow dan pilih Tabular seperti gambar dibawah ini  lalu klik OK:

Setelah anda klik OK maka akan tampil jendela pemilihan sumber datanya, pilih yang Quick Select seperti gambar ini:

Klik Next, lalu disebelah kiri pilih tabel tbl_user (disaya namanya karyawan.tbl_user) lalu klik Add All, seperti gambat ini:

Klik OK, maka akan tampil jendela pengaturan warna, atur sesuai dengan yang anda mau, kalau saya, saya biarkan default terlebih dahulu seperti gambar ini:

Klik Next, dan akan tampil jendela terakhir dari wizard pembuatan datawindow seperti ini:

Klik Finish untuk membuat datawindownya.

Atur sedemikian rupa layoutnya, kalau saya menjadi seperti ini:

Detail Pengaturan datawindownya:

Jenis Font: Times New Roman, Size: 10 Bold

Border: Box(2), untuk kolom user_status bordernya: NoBorder(0)

Untuk Static Text yang berada pada header Backgroundnya: sky, untuk kolom pada detail backgroundnya: White

Untuk kolom user_level, ganti Style Type menjadi DropDownListBox dengan ketentuan:

• Sorted dan Always Show Arrow ditandai, dan pada code table, masukkan:

Display Value	Data Value
Administrator	1
User	0

Untuk kolom user_status, ganti Style Type menjadi CheckBox, dengan ketentuan:

• 3-D Look dan Scale ditandai, dan ketikkan "Aktif" (tanpa tanda kutip) di kotak Text
• Masukkan 1 pada kotak Data Value for On, dan 0 pada Data Value for Off.

Atur Alignmentnya, untuk user_id: Center, dan kolom yang lainnya: Left

Untuk kolom user_password, beri tanda pada kotak Password di tab Edit pada propertiesnya.

Simpan datawindow ini dengan nama d_user

Buka window w_user dan masukkan beberapa control dengan detail berikut ini:

• 1 datawindow dengan nama dw_user dan Data Objectnya: d_user
• 6 Command Button dengan detail:

Nama	Text	Enabled
cb_tambah	Tambah	Ya
cb_edit	Edit	Ya
cb_simpan	Simpan	Tidak
cb_batal	Batal	Tidak
cb_refresh	Refresh	Ya
cb_tutup	Tutup	Ya

Untuk window w_user yang saya buat akan seperti ini:

Simpan perubahan untuk window w_user, jika diperlukan silahkan dijalankan programnya dengan mngklik toolbar Run.

Biar anda tidak terlalu pusing, bagian keempat ini saya sudahi dulu sampai disini, kita akan lanjutkan dibagian kelima Tutorial Membuat Program Biodata Karyawan Part 5, dimana kita akan sempurnakan window w_user ini agar bisa digunakan untuk menginput atau mengedit data user.

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

Download tutorial ini dalam format pdf: 

Baca Selengkapnya »

Membuat Program Biodata Karyawan Part 3

Membuat Window Yang Dibutuhkan

Tutorial ketiga ini merupakan lanjutan dari tutorial sebelumnya, jika anda ingin melihat tutorial sebelumnya silahkan buka Tutorial Membuat Program Biodata Karyawan Part 2.

Untuk bagian ketiga ini, kita akan membuat window-window sebagai target dari menu m_utama, untuk itu maka kita akan membutuhkan 5 window. Langsung saja ke langkah-langkahnya, buat 5 window dengan detail seperti ini:

Nama Window	Title	WindowType
w_user	Data User	main!
w_karyawan	Data Karyawan	main!
w_laporan	Laporan Data Karyawan	main!
w_password	Ganti Password	main!
w_about	Tentang Program	response!

Selain w_about, masukkan script This.Move(5,5) pada masing-masing Event Open windownya. Hal ini bertujuan agar saat window tersebut dibuka, posisinya akan berada disebelah kiri atas, namun jika anda tidak menginginkannya, silahkan lewati langkah ini.

Untuk sementara biarkan window-window tersebut apa adanya, kita beralih ke penulisan script pada menu m_utama, agar jika diklik submenunya akan membuka window yang sesuai.

Memberikan script untuk masing-masing menu pada menu m_utama

Untuk langkah ini, kita wajib menggunakan script OpenSheet, untuk lebih jelasnya mengenai script ini, silahkan anda buka menu Help dari PowerBuilder, sekarang kita akan langsung saja ya untuk memberikan perintah/menuliskan script pada menu m_utama.

Buka m_utama dengan cara klik dua kali pada m_utama di jendela sebelah kiri.

Setelah jendela m_utama terbuka, pada masing-masing submenu, masukkan script berikut ini:

Nama Menu	Event	Script
m_master.m_user	Clicked	OpenSheet(w_user, ParentWindow, 5, Original!)
m_inputdaneditdatakaryawan	Clicked	OpenSheet(w_karyawan, ParentWindow, 5, Original!)
m_laporan.m_datakaryawan	Clicked	OpenSheet(w_laporan, ParentWindow, 5, Original!)
m_pengaturan.m_gantipassword	Clicked	OpenSheet(w_password, ParentWindow, 5, Original!)
m_window.m_about	Clicked	Open(w_about)
m_exit	Clicked	Close(ParentWindow)

Langkah berikutnya adalah membuat script untuk mengkonfirmasi jika user menekan menu m_exit, karena menu m_exit telah kita berikan script untuk menutup window tempat menu tersebut berada, dalam hal ini berarti keluar dari Program. Untuk itu saya rasa perlu adanya pesan konfirmasi, apakah user benar-benar akan keluar dari program atau tidak (bisa aja ada ketidaksengajaan menekan menu Exit tersebut).
Langkahnya adalah sebagai berikut:
Buka window w_utama
Pada tab Event List, klik dua kali pada event closequery()
Masukkan script berikut ini:
IF MessageBox("Konfirmasi", "Anda yakin mau keluar dari program ini ?", Question!, YesNo!, 2) = 2 THEN Return 1

Simpan perubahannya

Ket:
Event closequery akan dieksekusi sebelum event close, dan memiliki nilai return 0 dan 1, dimana 0 berarti mengijinkan window tersebut untuk ditutup, dan 1 berarti mencegah/membatalkan penutupan window tersebut.
Script diatas akan bernilai True jika dalam pesan konfirmasi, user menekan tombol No (Yes = 1, No = 2).

Lalu apa yang akan terjadi jika user menekan tombol Yes, sedangkan sampai saat ini, kita belum memberikan script untuk memutuskan koneksi ke databasenya ?, untuk jawaban ini saya juga masih belum tahu pasti, cuma logikanya diserver databasenya, koneksinya bakalan masih aktif.
Nah untuk memutuskan koneksi ke databasenya, lakukan langkah-langkah berikut ini:
Buka Object Application biokaryawan
Pada tab Event List, klik dua kali pada event close() lalu ketikkan script Disconnect;
Dan simpan perubahannya

Sampai disini, program kita sudah dapat berjalan menggunakan database dan menu-menunya sudah memiliki action masing-masing.

Menyembunyikan Menu User
Langkah ini adalah untuk menyembunyikan menu User jika yang login dalam program bukan merupakan user dengan level Administrator. Dalam pembuatan tabel user sebelumnya, saya sudah jelaskan bahwa penentuan seorang user itu termasuk level Administrator adalah pada kolom user_level, dimana 1 berarti user tersebut memiliki level Administrator, selain 1 maka user tersebut levelnya adalah user biasa.
Langsung saja ke langkah-langkahnya:
Buka kembali window w_utama
Lalu aktifkan/buka event activate() dan ketikkan script berikut ini:
IF gi_level <> 1 THEN
m_utama.m_master.Visible = False
m_utama.m_master.m_user.Visible = False
END IF

Lalu simpan perubahannya

Ket:
gi_level sudah kita deklarasikan sebelumnya, dan sudah terset nilainya pada window w_login
jadi disini kita cuma mengecek, apakah nilai gi_level itu 1 atau bukan.
Untuk dapat melihat hasilnya, maka anda perlu menambahkan data user pada tabel tbl_user dengan user_level = 0.

Untuk Part 3 ini saya cukupkan dulu sampai disin, nanti akan kita lanjutkan dibagian keempat, silahkan klik Tutorial Membuat Program Biodata Karyawan Part 4.

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

Download tutorial ini dalam format pdf: 

Baca Selengkapnya »

Membuat Program Biodata Karyawan Part 2

Untuk bagian ini, kita akan "menyempurnakan" window login yang telah kita buat pada bagian sebelumnya, jika anda baru mengikuti tutorial ini atau ingin melihat kembali bagian pertama tutorial ini, silahkan klik Tutorial Membuat Program Biodata Karyawan Part 1.

Namun sebelum "menyempurnakan" window login, yang harus kita lakukan adalah membuat databasenya terlebih dahulu. Seperti yang telah saya katakan sebelumnya, untuk tutorial ini database yang saya gunakan adalah PostgreSQL versi 9.3, jika anda menggunakan database yang lain, silahkan buat tabel baru dengan struktur berikut ini:

---

Nama Tabel: tbl_user

Kolom/Field yang harus dibuat:

user_id, Tipe Data: integer, Primary Key

user_name, Tipe Data: String/Text dengan maksimal panjang karakter: 20

user_password, Tipe Data: String/Text dengan maksimal panjang karakter: 20

user_full_name, Tipe Data: String/Text dengan maksimal panjang karakter: 50

user_level, Tipe Data: integer

user_status, Tipe Data: integer

---

Sedangkan jika anda menggunakan database yang sama dengan yang saya gunakan, silahkan ikuti langkah-langkah berikut ini:

Jalankan pgAdmin III, lalu klik dua kali pada nama servernya lalu masukkan passwordnya, biasanya kalau saat instal anda biarkan dengan nilai defaultnya, maka nama servernya adalah PostgreSQL 9.3 (localhost:5432)

1. Expand PostgreSQL 9.3 (localhost:5432) -> Databases -> postgres -> Schemas
2. Buat skema baru dengan nama karyawan dan owner postgres lalu klik OK
3. Expand skema karyawan, lalu buat tabel baru dengan cara klik kanan di skema karyawan lalu pilih New Object dan pilih New Table
4. Pada jendela pembuatan tabel masukkan nama tbl_user pada kotak Name, Owner: postgres
5. Pada tab Columns, buat kolom-kolom berikut ini:

• user_id, Tipe Data: integer, pada tab Definition, beri tanda pada kotak Not NULL
• user_name, Tipe Data: character varying, Length: 20
• user_password, Tipe Data: character varying, Length: 20
• user_full_name, Tipe Data: character varying, Length: 50
• user_level, Tipe Data: integer
• user_status, Tipe Data: integer

6. Pada tab Constraint, buat Primary Key, dengan cara klik Add, lalu masukkan namanya (bebas) disini saya beri nama tbl_user_pk
7. Pada tab Columns (jendela New Primary Key), pilih user_id dikotak pilihan Column lalu klik Add, setelah itu klik OK dan klik OK lagi untuk menyelesaikan pembuatan tabel user.

Ket:

Untuk kolom/field user_id jangan dibuat autonumber/counter (nanti anda akan tahu sebabnya).

Untuk maksimal panjang karakter bisa anda sesuaikan dengan kebutuhan anda.

Untuk kolom/field user_level, nantinya hanya akan bernilai 0 atau 1, dimana 0 berarti user tersebut berada pada level pengguna, sedangkan 1 berarti user tersebut berada pada level administrator.

Untuk kolom/field user_status juga sama, hanya akan bernilai 0 atau 1, dimana 0 berarti user tersebut statusnya sudah tidak aktif atau tidak berhak menjalankan program, sedangkan 1 berarti user tersebut statusnya aktif dan berhak menjalankan program.

Setelah membuat tabel diatas, masukkan data-data berikut ini:

user_id = 1

user_name = ADMIN

user_password = 123456

user_full_name = ADMINISTRATOR

user_level = 1

user_status = 1

Sampai disini kita telah selesai membuat database dan tabel user untuk keperluan login pada program.

Sekarang buka PowerBuilder 12 Classic dan buka workspace yang telah kita buat sebelumnya yang bernama biokaryawan (atau dengan nama workspace milik anda). Sebelumnya pastikan dahulu anda telah membuat koneksi databasenya pada ODBC, jika anda belum membuatnya silahkan lihat disini terlebih dahulu: Persiapan Tutorial.

Kembali lagi ke PowerBuilder 12 Classic, klik menu Tools->Database Painter untuk membuka jendela database dan membuat profile databasenya.

Expand dan klik kanan pada bagian ODBC lalu pilih New Profile, atur konfigurasinya seperti berikut ini:

• Profile Name: Data Karyawan
• Data Source: PostgreSQL 93
• User ID: postgres
• Password: sample
• Hilangkan tanda pada kotak Commit on Disconnect

Pada tab Preview klik Copy, dan klik Test Connection, hasilnya harus Connection Succesfull.

Klik Apply lalu klik OK untuk menyimpan profile tersebut.

Klik kanan pada profile Data Karyawan lalu pilih Connect

Sampai disini kita telah selesai membuat koneksi databasenya dalam PowerBuilder, langkah diatas diperlukan agar kita bisa mempreview data yang ada dalam database, jadi bukan untuk koneksi program yang kita buat ke databasenya, karena untuk hal tersebut ada langkah lain (itulah mengapa saya suruh anda untuk klik Copy pada tab preview diatas.

Membuat Custom Class

Custom Class yang akan kita buat adalah untuk keperluan koneksi dan membuka program, sebenarnya langkah ini bersifat opsional, karena kita juga bisa membuatnya langsung di Object Applicationnya, namun kalau menurut saya pribadi, dengan membuat Custom Class ini, akan sedikit menaikan level Programming kita hehehehe.

Lanjut lagi ke tutorialnya, tutup Database Painter, lalu klik File->New->Pilih tab PB Object, lalu pilih Custom Class dan klik OK

Pada tab Function List, klik kanan di area kosong lalu pilih Add, atur seperti dibawah ini:

• Access: Public
• Return Type: boolean
• Function Name: of_logon

Function ini tidak membutuhkan Parameter, jadi hapus parameter default yang otomatis ada, dengan cara klik kanan dikotak Argument Name dan pilih Delete Parameter

Klik kanan pada area script lalu pilih Paste untuk mempaste syntax yang telah kita Copy sebelumnya, sehingga diarea script akan menjadi seperti ini:

---

// Profile Data Karyawan

SQLCA.DBMS = "ODBC"

SQLCA.AutoCommit = False

SQLCA.DBParm = "ConnectString='DSN=PostgreSQL 93;UID=postgres;PWD=<******>',CommitOnDisconnect='No'"

Ganti karakter <******> dengan password untuk konek ke databasenya, dalam hal ini saya ganti dengan "sample" (tanpa tanda kutip), sehingga menjadi seperti ini:

// Profile Data Karyawan

SQLCA.DBMS = "ODBC"

SQLCA.AutoCommit = False

SQLCA.DBParm = "ConnectString='DSN=PostgreSQL 93;UID=postgres;PWD=sample',CommitOnDisconnect='No'"

Tambahkan script berikut ini dibawahnya:

Connect;

IF SQLCA.SQLCode <> 0 THEN

MessageBox("Error", SQLCA.SQLErrText, StopSign!)

Return False

END IF

Return True

Sehingga scriptnya akan menjadi seperti ini:

// Profile Data Karyawan

SQLCA.DBMS = "ODBC"

SQLCA.AutoCommit = False

SQLCA.DBParm = "ConnectString='DSN=PostgreSQL 93;UID=postgres;PWD=sample',CommitOnDisconnect='No'"

Connect;

IF SQLCA.SQLCode <> 0 THEN

MessageBox("Error", SQLCA.SQLErrText, StopSign!)

Return False

END IF

Return True

Buka lagi tab Function List dan tambahkan Function baru dengan parameter berikut ini:

• Access: Public
• Return Type: boolean
• Function Name: of_open

Function ini juga tidak membutuhkan parameter, jadi hapus kembali parameter yang otomatis ada.

Masukkan script berikut ini pada area scriptnya:

Integer li_ret

IF Not This.of_logon() THEN Return False

Open(w_login)

li_ret = Message.DoubleParm

IF li_ret <> 1 THEN Return False

Return True

Simpan dengan nama: nvo_apps

Sampai disini kita telah selesai membuat Custom Class untuk keperluan koneksi database dan membuka programnya.

Tutup jendela Custom Class nvo_apps, lalu buka Object Application, dengan cara klik dua kali pada Object biokaryawan.

Pada Event Open, hapus script yang telah kita buat sebelumnya lalu masukkan script berikut ini:

nvo_apps lnvo_apps

lnvo_apps = Create Using "nvo_apps"

IF Not lnvo_apps.of_open() THEN

Halt

ELSE

Open(w_utama)

END IF

Klik toolbar Save untuk menyimpan perubahannya, lalu tutup jendela Object Application.

Langkah selanjutnya adalah mengganti semua script pada window w_login, untuk itu buka window w_login.

lalu buka tab Declare Instance Variables, masukkan deklarasi variabel berikut ini:

integer ii_ret

Ganti Instance Variables menjadi Global Variables (dibagian atas area script), lalu deklarasikan variabel-variabel berikut ini:

String gs_nama_user, gs_nama_lengkap

Integer gi_level

Long gl_user_id

Buka Event Open w_login, dan masukkan script ini:

ii_ret = 0

Buka Event Close w_login, dan masukkan script ini:

IF ii_ret = 1 THEN Return

ii_ret = 0

CloseWithReturn(This, ii_ret)

Buka Event Clicked cb_batal, hapus script yang telah ada dan masukkan script ini:

ii_ret = 0

CloseWithReturn(Parent, ii_ret)

Buka Event Clicked cb_ok, hapus script yang telah ada sebelumnya dan masukkan script berikut ini:

String ls_password

Integer li_status

// check null atau string kosong pada sle_nama dan sle_password

IF IsNull(sle_nama.Text) OR Trim(sle_nama.Text, True) = "" THEN

MessageBox("Login", "Masukkan Nama User anda.", Exclamation!)

sle_nama.SetFocus()

Return

ELSEIF IsNull(sle_password.Text) OR Trim(sle_password.Text, True) = "" THEN

MessageBox("Login", "Masukkan password anda.", Exclamation!)

sle_password.SetFocus()

Return

END IF

// set variabel gs_nama_user berdasarkan teks dalam sle_nama

gs_nama_user = sle_nama.Text

// cek data dalam database berdasarkan nama user yang dimasukkan di sle_nama

SELECT user_id, user_password, user_full_name, user_level, user_status

INTO :gl_user_id, :ls_password, :gs_nama_lengkap, :gi_level, :li_status

FROM karyawan.tbl_user

WHERE user_name = :gs_nama_user

USING SQLCA;

// nama user yang dimasukkan tidak ada dalam database

IF SQLCA.SQLCode = 100 THEN

MessageBox("Login", "Nama User tidak ada dalam database.", Exclamation!)

sle_nama.SetFocus()

Return

END IF

// Database error

IF SQLCA.SQLCode <> 0 THEN

MessageBox("Error", "Database error, coba lagi atau hubungi administrator.", StopSign!)

Return

END IF

// data ada dan database tidak error

// cek password yang dimasukkan dalam sle_password

// password tidak sama dengan database

IF UPPER(ls_password) <> sle_password.Text THEN

MessageBox("Login", "Password yang anda masukkan salah.", Exclamation!)

sle_password.SetFocus()

Return

END IF

// password sesuai dengan database, sekarang cek status user, 1 = Aktif, selain 1 maka dianggap tidak aktif

// status user bukan 1 atau tidak aktif

IF li_status <> 1 THEN

MessageBox("Login", "Status user sudah tidak aktif, hubungi administrator.", Exclamation!)

sle_nama.SetFocus()

Return

END IF

// semua data ok

ii_ret = 1

CloseWithReturn(Parent, ii_ret)

Atur TextCase untuk sle_nama dan sle_password menjadi upper!

Tandai kotak Password untuk sle_password

Atur cb_ok menjadi Default, dengan menandai kotak Default di Propertiesnya, setelah itu simpan perubahannya.

Sekarang coba jalankan dengan mengklik toolbar Run, dan coba login dengan benar ataupun dicoba dengan yang salah, misalnya nama usernya diganti atau salah memasukkan passwordnya. Jika memungkinkan coba juga diubah didatabasenya: statusnya diganti dengan 0, lalu coba login dengan user yang statusnya diganti menjadi 0.

Selesailah tutorial membuat program biodata karyawan part 2 ini, nanti akan kita lanjutkan di bagian ketiga, silahkan klik Membuat Program Biodata Karyawan Part 3.

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

Download tutorial ini dalam format pdf: 

Baca Selengkapnya »