2.1.1 User Interface 2.1.1.1 Standarisasi Tombol dan Konfirmasi Tombol yang digunakan dalam aplikasi dibuat berbentuk gambar sebagai simbol action yang akan dilakukan. Keterangan tombol yang sudah dibuat adalah sebagai berikut : Tabel 4.22 Keterangan Standarisasi Tombol No Tombol Keterangan 1 Add data 2 Edit data 3 Hapus data 4 Cari data (Search) 5 Add detail, menambah data ke dalam tabel 6 Delete detail, menghapus data dalam tabel 7 Clear, digunakan untuk membersihkan data di field dan lainnya 9 Print dokumen 10 Save data Pada saat user menekan tombol save, maka akan muncul message box seperti pada gambar 4.56 yang akan memperlihatkan konfirmasi apakah user akan benar-benar menyimpan data, jika tombol yes dipilih maka akan muncul message box baru seperti pada gambar 4.57. Jika tombol no dipilih maka message box akan hilang.
Gambar 4.56 Message Box Konfirmasi Save Gambar 4.57 Message Box Penyimpanan Berhasil Pada saat menekan tombol delete, maka akan muncul message box seperti pada gambar 4.58 yang akan memperlihatkan konfirmasi apakah user akan benar-benar menghapus data, jika tombol yes dipilih maka akan muncul message box baru seperti pada gambar 4.59. Jika tombol no dipilih maka message box akan hilang. Gambar 4.58 Message Box Konfirmasi Delete
Gambar 4.59 Message Box Penghapusan Berhasil 2.1.1.2 Rancangan User Interface Gambar 4.60 Form Login Pada Form Login user mengisi textfield Username dan Password sesuai dengan username dan password yang dimilikinya. Setelah itu user menekan tombol OK untuk masuk ke form utama dan jika user menekan tombol cancel maka aplikasi akan tertutup. Jika Username dan Password yang diisi salah maka akan tampil gambar 4.61 untuk memberitahu bahwa username dan password yang diisi salah.
Gambar 4.61 Message Box Konfirmasi Error Login Gambar 4.62 Form Alokasi Nilai Proyek Pada Form Alokasi Nilai Proyek user harus menekan tombol add agar dapat mengisi form Alokasi Nilai Proyek. Ketika tombol add ditekan, maka textfield No.ANP akan tampil secara otomatis dan tombol search pada Kode Proyek dapat digunakan. Setelah memilih Kode Proyek maka textfield Kode Klien dan Nama Klien akan tampil secara otomatis. User dapat memilih tanggal Alokasi Nilai Proyek dibuat dan mengisi Nilai Alokasi yang diterima. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem atau menekan tombol clear untuk menghapus textfield yang sudah diisi.
Gambar 4.63 Form Surat Perintah Kerja Pada Form Surat Perintah Kerja user harus menekan tombol add agar dapat mengisi form Surat Perintah Kerja. Ketika tombol add ditekan, maka textfield No.SPK akan tampil secara otomatis dan tombol search pada No.ANP dapat digunakan. Setelah memilih No.ANP maka textfield Kode Proyek dan Nama Proyek akan tampil secara otomatis. User dapat memilih tanggal Surat Perintah Kerja dibuat dan mengisi Keterangan mengenai Surat Perintah Kerja. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem atau menekan tombol clear untuk menghapus textfield yang sudah diisi. User dapat menekan tombol print untuk mencetak Surat Perintah Kerja.
Gambar 4.64 Form Status Karyawan Pada form Status Karyawan user dapat mengurutkan karyawan berdasarkan Kode Karyawan atau Nama Karyawan. Setelah user memilih salah satu karyawan, Kode Karyawan dan Nama akan tampil secara otomatis. User dapat mengisi pekerjaan yang sedang dijalankan atau yang akan dijalankan oleh karyawan dalam textfield Job. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem. Gambar 4.65 Form Surat Pembagian Kerja Pada Form Surat Pembagian Kerja user harus menekan tombol add agar dapat mengisi form Surat Pembagian Kerja. Ketika tombol add ditekan, maka textfield No.SPKJ akan tampil secara otomatis dan tombol search pada No.SPK dapat digunakan. Setelah memilih No.SPK maka
textfield Kode Proyek dan Nama Proyek akan tampil secara otomatis. User dapat memilih tanggal pembuatan Surat Pembagian Kerja. User dapat melihat status pekerjaan karyawan pada tabel Status Karyawan dan memilih salah satu karyawan dari tabel tersebut. Fungsi dari tabel tersebut adalah untuk melihat karyawan mana saja yang sedang mempunyai pekerjaan yang sedang berlangsung. Setelah salah satu karyawan dipilih, maka textfield Kode Karyawan dan Nama akan tampil secara otomatis. User dapat mengisi Keterangan untuk mendeskripsikan pekerjaan karyawan tersebut untuk proyek ini. Setelah selesai mengisi Detail Pembagian Kerja, user dapat menekan tombol add detail dan data yang sudah diisi akan muncul di tabel. User dapat menghapus data pada tabel dengan cara memilih salah satu data pada tabel dan menekan tombol delete detail. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem atau menekan tombol clear untuk menghapus textfield yang sudah diisi. User dapat menekan tombol print untuk mencetak Surat Pembagian Kerja. Gambar 4.66 Form Estimasi Produksi Pada Form Production Estimate user harus menekan tombol add agar dapat mengisi form Production Estimate. Ketika tombol add ditekan, maka textfield Kode PE akan tampil secara otomatis dan tombol search pada
No.ANP dapat digunakan. Setelah memilih No.ANP user dapat mengisi Kode Event dan memilih tanggal pembuatan Production Estimate. Status dapat dipilih menjadi not approved karena belum disetujui. Setelah itu, user dapat mengisi Detail Production Estimate yang terdiri dari Kode Supplier, Tipe Supplier, Barang, Quantity, dan Harga. Setelah selesai mengisi Detail Production Estimate, user dapat menekan tombol add detail dan data yang sudah diisi akan muncul di tabel. User dapat menghapus data pada tabel dengan cara memilih salah satu data pada tabel dan menekan tombol delete detail. Textfield Total Production Estimate akan tampil secara otomatis dengan cara menjumlahkan Total Harga yang ada pada tabel Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol print untuk mencetak Production Estimate. Jika user ingin mencetak Cost Log, maka user dapat menekan tombol Print Cost Log untuk membuka Form View Production Estimate. Gambar 4.67 Form View Production Estimate Pada form View Production Estimate user dapat mengklasifikasikan Production Estimate berdasarkan No PE atau Kode Event. Jika user ingin melihat Production Estimate secara rinci, maka user dapat menekan salah satu data pada tabel untuk membuka form Production Estimate. User dapat menekan tombol print untuk mencetak Cost Log.
Gambar 4.68 Form Anggaran Pendapatan Pada Form Anggaran Pendapatan user harus menekan tombol add agar dapat mengisi form Anggaran Pendapatan. Ketika tombol add ditekan, maka textfield Kode AP akan tampil secara otomatis dan tombol search pada No.ANP dan Kode PE dapat digunakan. Setelah memilih No.ANP dan Kode PE user dapat mengisi jumlah alokasi yang diterima dan Production Estimate akan otomatis ditampilkan di tabel. Setelah itu textfield Total Production Estimate akan menampilkan secara otomatis jumlah Production Estimate yang ada pada tabel tersebut. Textfield Profit menampilkan keuntungan yang didapat dengan cara mengurangi jumlah alokasi dengan total Production Estimate. Setelah itu user dapat mengisi persentase dalam bentuk persen untuk alokasi pendapatan sesuai dengan kebutuhannya masing-masing. Setelah persentase diisi, maka textfield Kesejahteraan Karyawan, Fasilitas Kerja, dan Target Keuntungan akan ditampilkan secara otomatis. Status dapat dipilih menjadi not approved karena belum disetujui. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem, user dapat menekan tombol print untuk mencetak Anggaran Pendapatan, dan user juga dapat menekan tombol clear untuk menghapus semua data pada textfield.
Gambar 4.69 Form View Anggaran Pendapatan Pada Form View Anggaran Pendapatan jika user ingin melihat Anggaran Pendapatan secara rinci, maka user dapat menekan salah satu data pada tabel untuk membuka form Anggaran Pendapatan. User dapat menekan tombol print untuk mencetak Anggaran Pendapatan.
Gambar 4.70 Form Faktur Penagihan Pada Form Faktur Penagihan user harus menekan tombol add agar dapat mengisi form Faktur Penaghian. Ketika tombol add ditekan, maka textfield No. Billing akan tampil secara otomatis dan tombol search pada Kode Proyek dapat digunakan. Setelah memilih Kode Proyek maka textfield No.ANP dan Kode Klien akan tampil secara otomatis. User dapat memilih tanggal Billing dibuat. Setelah itu user dapat mengisi detail pembayaran yang berisi Jumlah, Tanggal, dan Status. User harus memilih salah satu tab (DP, Pembayaran 1, Pembayaran 2) dari detail pembayaran tersebut sesuai dengan tahapan pembayarannya. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem, user dapat menekan tombol print untuk mencetak Billing, dan user juga dapat menekan tombol clear untuk menghapus semua data pada textfield. Gambar 4.71 Form Daftar Faktur Penagihan Pada Form Daftar Faktur Penagihan jika user ingin melihat Biling secara rinci, maka user dapat menekan salah satu data pada tabel untuk membuka form Billing. User dapat menekan tombol print untuk mencetak Billing.
Gambar 4.72 Form Penerimaan Kas Pada Form Penerimaan Kas user harus menekan tombol add agar dapat mengisi form Penerimaan Kas. Ketika tombol add ditekan, maka textfield No.PK akan tampil secara otomatis dan tombol search pada No.Billing dapat digunakan. User dapat memilih tanggal Penerimaan Kas dibuat dan tanggal pembayaran diterima. Setelah itu, user dapat mengisi detail penerimaan kas yang terdiri dari nama Bank, No.Bukti Setor, nama Penyetor, No.Rekening, dan Jumlah Setoran. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem.
Gambar 4.73 Form Permintaan Pembelian Pada Form Permintaan Pembelian user harus menekan tombol add agar dapat mengisi form Permintaan Pembelian. Ketika tombol add ditekan, maka textfield No.PO akan tampil secara otomatis dan tombol search pada Kode Event dan Kode Supplier dapat digunakan. Setelah memilih Kode Supplier, textfield Nama Supplier akan tampil secara otomatis. Setelah itu user dapat memilih tanggal pembuatan Purchase Order. Setelah itu, user dapat mengisi Detail Purchase Order yang terdiri dari Jenis Barang, Quantity, dan Harga Satuan. Setelah selesai mengisi Detail Purchase Order, user dapat menekan tombol add detail dan data yang sudah diisi akan muncul di tabel. User dapat menghapus data pada tabel dengan cara memilih salah satu data pada tabel dan menekan tombol delete detail. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol print untuk mencetak Purchase Order. User dapat menekan tombol clear untuk menghapus semua data pada textfield. Gambar 4.74 Form Faktur Pembelian
Pada Form Faktur Pembelian user harus menekan tombol add agar dapat mengisi form Faktur Pembelian. Ketika tombol add ditekan, maka textfield No.Invoice akan tampil secara otomatis dan tombol search pada No.PO dapat digunakan. Setelah memilih No.ANP user dapat memilih tanggal pembuatan Invoice dan memilih Status dari Invoice. Status dapat dipilih menjadi Belum Lunas karena Invoice belum dibayar. Setelah itu, user dapat mengisi Detail Invoice yang terdiri dari Jenis Barang, Harga Satuan, Quantity. Setelah selesai mengisi Detail Invoice, user dapat menekan tombol add detail dan data yang sudah diisi akan muncul di tabel. User dapat menghapus data pada tabel dengan cara memilih salah satu data pada tabel dan menekan tombol delete detail. Textfield Total Tagihan akan tampil secara otomatis dengan cara menjumlahkan Total yang ada pada tabel. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol print untuk mencetak Invoice. Jika user ingin mencetak Invoice, maka user dapat menekan tombol print untuk membuka. User dapat menekan tombol clear untuk menghapus semua data pada textfield. Gambar 4.75 Form Pelunasan Vendor
Pada Form Pelunasan Vendor user harus menekan tombol add agar dapat mengisi form Pelunasan Supplier. Ketika tombol add ditekan, maka textfield No.PS akan tampil secara otomatis dan tombol search pada No.Invoice dapat digunakan. User dapat memilih tanggal Pelunasan Supplier dibuat dan tanggal pelunasan dilakukan. Setelah itu, user dapat mengisi detail pelunasan yang terdiri dari nama Bank, No.Bukti Transfer, nama Penyetor, No.Rekening Supplier, dan Jumlah Transfer. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem. Gambar 4.76 Form Proyek Pada Form Proyek user harus menekan tombol add agar dapat mengisi form Proyek. Ketika tombol add ditekan, maka textfield Kode Proyek akan tampil secara otomatis. Setelah itu, user dapat mengisi nama proyek, memilih jenis proyek, memilih tanggal proyek dibuat, dan mengisi lokasi tempat proyek diadakan. User juga dapat memilih proyek dari tabel list proyek. Untuk merubah data proyek, user harus menekan tombol edit pada salah satu data yang ada pada tabel tersebut. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol delete untuk menghapus data proyek yang ada pada sistem.
Gambar 4.77 Form Acara Pada Form Acara user harus menekan tombol add agar dapat mengisi form Event. Ketika tombol add ditekan, maka textfield Kode Event akan tampil secara otomatis. Setelah itu, user dapat mengisi nama event, memilih tanggal event dibuat, dan mengisi lokasi tempat event diadakan. User juga dapat memilih event dari tabel list event. Untuk memilih event yang ada pada tabel, user dapat menekan salah satu radio button (Kode Proyek atau Kode PE) agar data dalam tabel dapat diurutkan sesuai dengan tombol yang ditekan. Untuk merubah data event, user harus menekan tombol edit pada salah satu data yang ada pada tabel tersebut. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol delete untuk menghapus data event yang ada pada sistem. Gambar 4.78 Form Master Klien
Pada Form Master Klien user harus menekan tombol add agar dapat mengisi form Master Klien. Ketika tombol add ditekan, maka textfield Kode Klien akan tampil secara otomatis. Setelah itu, user dapat mengisi nama Klien, alamat Klien, nama contact person dari Klien, nomor telepon contact person Klien, dan e-mail contact person Klien. User juga dapat memilih Klien dari tabel list Klien. Untuk merubah data Klien, user harus menekan tombol edit pada salah satu data yang ada pada tabel tersebut. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol delete untuk menghapus data Klien yang ada pada sistem. Gambar 4.79 Form Master Karyawan Pada Form Master Karyawan user harus menekan tombol add agar dapat mengisi form Master Karyawan. Ketika tombol add ditekan, maka textfield Kode Karyawan akan tampil secara otomatis. Setelah itu, user dapat mengisi nama karyawan, jabatan karyawan, alamat karyawan, kota tempat lahir karyawan, tanggal lahir karyawan, e-mail karyawan, nomor telepon rumah karyawan, nomor handphone karyawan, username karyawan dan password karyawan. User juga dapat memilih karyawan dari tabel list karyawan. Untuk merubah data karyawan, user harus menekan tombol edit pada salah satu data yang ada pada tabel tersebut. Setelah selesai mengisi form, user dapat menekan tombol save untuk
menyimpan data ke sistem dan user dapat menekan tombol delete untuk menghapus data karyawan yang ada pada sistem. Gambar 4.80 Form Master Vendor Pada Form Master Vendor user harus menekan tombol add agar dapat mengisi form Master vendor. Ketika tombol add ditekan, maka textfield Kode Supplier akan tampil secara otomatis. Setelah itu, user dapat mengisi nama supplier, tipe supplier, alamat supplier, nama contact person dari supplier, nomor telepon contact person supplier, dan e-mail contact person supplier. User juga dapat memilih supplier dari tabel list supplier. Untuk merubah data supplier, user harus menekan tombol edit pada salah satu data yang ada pada tabel tersebut. Setelah selesai mengisi form, user dapat menekan tombol save untuk menyimpan data ke sistem dan user dapat menekan tombol delete untuk menghapus data supplier yang ada pada sistem.
Gambar 4.81 Form Laporan Pertanggungjawaban Pada Form Laporan Pertanggungjawaban ini user dapat memlih periode yang diinginkan untuk mencetak laporan. Setelah user memilih periode yang diinginkan, maka data-data dari Pengeluaran Kas dan Cost Log akan tampil secara otomatis dalam tabelnya masing-masing. Jika user ingin mencetak laporan, user dapat menekan tombol print. Gambar 4.82 Form Laporan Hutang
Gambar 4.81 Form Laporan Piutang Gambar 4.82 Form Laporan Pengeluaran Kas
Gambar 4.83 Form Laporan Penerimaan Kas Pada Form Laporan Piutang, Laporan Hutang, Laporan Pengeluaran Kas, dan Laporan Penerimaan Kas, semuanya mempunyai cara kerja yang sama. User dapat memilih periode yang diinginkan dalam mencetak laporan. Setelah itu user dapat menekan tombol print untuk mencetak laporan. Gambar 4.84 Form Jurnal
Pada Form Jurnal ini user dapat memlih periode yang diinginkan untuk mencatat jurnal. Setelah user memilih periode yang diinginkan, maka datadata jurnal yang terdapat pada periode tersebut akan tampil secara otomatis pada textfield yang tersedia. Setelah user selesai mengisi form, user ingin mencetak jurnal, user dapat menekan tombol print.