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
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
 |
| Tutorial 1 - Layout Datawindow dw_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:
Tidak ada komentar:
Posting Komentar
Silahkan berikan komentar anda.