UI Navigation
Gambar 4.47 UI Navigation Menu File
Gambar 4.481 UI Navigation Menu Master
Gambar 4.492 UI Navigation Menu Transaksi
Gambar 4.50 UI Navigation Menu Laporan
Design the User Interface User Interface Windows Menu Utama
Gambar 4.51 User Interface Windows Menu Utama
Saat aplikasi dijalankan, Windows yang pertama kali muncul adalah Menu Utama. Menu Utama ini terdiri dari beberapa menu item, yaitu : 1. Menu File, yang terdiri dari Form Login, Logout dan pilihan Exit untuk keluar dari aplikasi. 2. Menu Master, yang terdiri dari Master Customer, Master Karyawan, Master Ruangan. Master Tenant. 3. Menu Transaksi yang terdiri dari : Form Work Order, Form Kontrak, Form Invoice, Form Pembayaran, Form Perpanjangan Kontrak, Form Voucher. 4. Menu Laporan, yang terdiri dari : Laporan Piutang, Laporan Penerimaan Kas, Laporan Jurnal.
Gambar 4.52 User Interface Windows Menu File
Saat menu File di klik, akan muncul beberapa sub menu, antara lain sebagai berikut : 1. Login, berrguna untuk menentukan hak akses, dimana User dapat menentukan Form – Form apa saja yang dapat diakses berdasarkan username yang dimasukkan. 2. Logout, berguna untuk menutup semua Form – Form dan melindungi hak akses sebelum keluar dari aplikasi. 3. Exit, digunakan untuk mengakhiri penggunaan apliaksi.
Gambar 4.53 User Interface Windows Menu Master
Saat menu Master di klik, akan muncul beberapa sub menu, antara lain sebagai berikut :
1. Customer, digunakan untuk mengakses data – data Customer yang dimiliki perusahaan 2. Karyawan, digunakan untuk mengakses data – data dari karyawan yang terkait dengan sistem didalam perusahaan. 3. Ruangan, digunakan untuk mengakses data – data ruangan yang dimiliki perusahaan 4. Tenant, digunakan untuk mengakses data – data Tenant / Penyewa Ruangan yang dimiliki perusahaan
Gambar 4.54 User Interface Windows Menu Transaksi
Saat menu Transaksi di klik, akan muncul beberapa sub menu, antara lain sebagai berikut : 1. Work Order, digunakan untuk mengakses data – data dari transaksi Work Order yang dimiliki perusahaan 2. Kontrak, digunakan untuk mengakses data – data dari transaksi Kontrak yang dimiliki perusahaan 3. Invoice, digunakan untuk mengakses data – data dari transaksi Penagihan yang dimiliki perusahaan 4. Pembayaran, digunakan untuk mengakses data – data dari transaksi Penerimaan Kas yang dimiliki perusahaan 5. Perpanjangan Kontrak, digunakan untuk mengakses data – data dari transaksi Perpanjangan Kontrak yang dimiliki perusahaan
6. Voucher, digunakan untuk mengakses data – data dari transaksi Pencatatan Jurnal yang dimiliki perusahaan
Gambar 4.55 User Interface Windows Menu Laporan
Saat menu Laporan di klik, akan muncul beberapa sub menu, antara lain sebagai berikut : 1. Laporan Piutang, digunakan untuk menampilkan Laporan Piutang yang dimiliki perusahaan 2. Laporan Penerimaan Kas, digunakan untuk menampilkan Laporan Penerimaan Kas yang dimiliki perusahaan 3. Laporan Jurnal, digunakan untuk menampilkan Laporan perusahaan
Jurnal
yang dimiliki
1.3.1.1 User Interface Windows Form Login
Gambar 4.56 User Interface Form Login
Form Login digunakan ketika user mulai menggunakan sistem. Untuk dapat menggunakan sistem, user harus terlebih dahulu memasukkan Kode Karyawan dan Password. Jika user salah dalam memasukkan Kode Karyawan atau password, maka sistem akan menampilkan messagebox seperti berikut :
Gambar 4.57 Messagebox Salah dalam Memasukkan Kode Karyawan dan Password
Sebaliknya, Jika user benar dalam memasukkan Kode Karyawan atau password, maka sistem akan menampilkan messagebox seperti berikut :
Gambar 4.58 Messagebox berhasil Memasukkan Kode Karyawan dan Password
1.3.1.2 User Interface Form Master Customer
Gambar 4.59 User Interface Form Master Customer
Form Master Customer dapat diakses oleh Marketing. yang digunakan sebagai dasar untuk membuat kontrak. Di dalam form ini terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data customer atau untuk menambahkan dan mengubah data customer. Saat user hanya ingin melihat isi data dalam tabel, User hanya perlu meng-klik salah satu baris dalam tabel, sehingga data dalam tabel akan terlihat secara rinci dalam field – field yang tersedia. Saat melakukan penambahan data customer, ID customer akan secara otomatis tergenerate oleh sistem dengan mengurutkan ID secara Ascending, selanjutnyoa user harus mengisi field – field yang tersedia yang telah disesuaikan dengan format pengisian dalam database. Saat melakukan pengubahan data customer, user harus meng-klik data customer yang ingin diubah didalam list table terlebih dahulu untuk memastikan bahwa data yang diubah adalah benar, Selanjutnya sistem akan membaca informasi dalam list table dan terlihat didalam field – field, sehingga user hanya perlu untuk mengubah informasi yang ingin diubah saja.
1.3.1.3 User Interface Form Master Tenant
Gambar 4.60 User Interface Form Master Tenant
Form Master Tenant dapat diakses oleh Tenanacy. yang digunakan sebagai dasar untuk membuat Work Order. Di dalam form ini terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data Tenant atau untuk menambahkan dan mengubah data Tenant.
Saat user hanya ingin melihat isi data dalam tabel, User hanya perlu meng-klik salah satu baris dalam tabel, sehingga data dalam tabel akan terlihat secara rinci dalam field – field yang tersedia. Saat melakukan penambahan data tenant, ID tenant akan secara otomatis tergenerate oleh sistem dengan mengurutkan ID secara Ascending, selanjutnyoa user harus mengisi field – field yang tersedia yang telah disesuaikan dengan format pengisian dalam database.
Saat melakukan pengubahan data tenant, user harus meng-klik data tenant yang ingin diubah didalam list table terlebih dahulu untuk memastikan bahwa data yang diubah adalah benar, Selanjutnya sistem akan membaca informasi dalam list table dan terlihat didalam field – field, sehingga user hanya perlu untuk mengubah informasi yang ingin diubah saja. 1.3.1.4 User Interface Form Master Karyawan
Gambar 4.61 User Interface Form Master Karyawan
Form Master Karyawan berisi informasi – informasi dari setiap karyawan, terutama untuk karyawan yang dapat malukan hak akses terhadap sistem ini. Di dalam form ini terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data karyawan atau untuk menambahkan dan mengubah data karyawan. Saat user hanya ingin melihat isi data dalam tabel, User hanya perlu meng-klik salah satu baris dalam tabel, sehingga data dalam tabel akan terlihat secara rinci dalam field – field yang tersedia. Saat melakukan penambahan data karyawan, ID karyawan akan secara otomatis ter-generate oleh sistem dengan mengurutkan ID secara Ascending, selanjutnyoa user
harus mengisi field – field yang tersedia yang telah disesuaikan dengan format pengisian dalam database. Saat melakukan pengubahan data karyawan, user harus meng-klik data karyawan yang ingin diubah didalam list table terlebih dahulu untuk memastikan bahwa data yang diubah adalah benar, Selanjutnya sistem akan membaca informasi dalam list table dan terlihat didalam field – field, sehingga user hanya perlu untuk mengubah informasi yang ingin diubah saja.
1.3.1.5 User Interface Form Master Ruangan
Gambar 4.62 User Interface Form Master Ruangan
Form Master Ruangan dapat diakses oleh Tenancy sebagai dasar dalam membuat Work Order, dengan menentukan ruangan mana yang nantinya akan dilakukan perbaikan. Di dalam form ini terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data ruangan atau untuk menambahkan dan mengubah data ruangan.
Saat user hanya ingin melihat isi data dalam tabel, User hanya perlu meng-klik salah satu baris dalam tabel, sehingga data dalam tabel akan terlihat secara rinci dalam field – field yang tersedia. Saat melakukan penambahan data ruangan, ID ruangan akan secara otomatis tergenerate oleh sistem dengan mengurutkan ID secara Ascending, selanjutnyoa user harus mengisi field – field yang tersedia yang telah disesuaikan dengan format pengisian dalam database. Saat melakukan pengubahan data ruangan, user harus meng-klik data ruangan yang ingin diubah didalam list table terlebih dahulu untuk memastikan bahwa data yang diubah adalah benar, Selanjutnya sistem akan membaca informasi dalam list table dan terlihat didalam field – field, sehingga user hanya perlu untuk mengubah informasi yang ingin diubah saja.
1.3.1.6 User Interface Form Work Order
Gambar 4.63 User Interface Form Work Orde
Form WO dibuat oleh Tenancy yang ditunjukkan kepada divisi Engineering atau divisi Housekeeping untuk menentukan informasi pengerjaan perbaikan. Di dalam form ini
terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data WO atau untuk menambahkan dan mengubah data WO. Ketika user menambah data WO baru, sistem akan secara otomatis men-generate Nomor WO, kemudian user dapat langsung menginput data WO, seperti Tanggal WO, ID dan Nama Customer, Ditunjukkan Untuk, Penanggung jawab, dan Kebutuhan ke dalam field yang tersedia. Sedangkan jika ingin mengubah data WO, maka user harus memilih data WO yang ingin diubah di dalam list table terlebih dahulu. Jika data sudah dipilih, maka data WO tersebut akan terlihat di dalam field-field yang tersedia. Selain itu didalam Form WO, terdapat detail dari WO yang berisi informasi deskripsi pengerjaan, waktu pengerjaan selesai, waktu pengerjaan dimulai, waktu pemeriksaan, kelebihan waktu pengerjaan, dan harga, yang diisi setelah pengerjaan perbaikan telah selesai dikerjakan. Selanjutnya WO ini akan di cetak dalam 2 tahap, 1. Tahap pertama dicetak dengan estimasi waktu pengerjaan dimulai dan waktu pengerjaan selesai, tanpa memberitahu pengecekan pengerjaan, kelebihan waktu dan harga, yang akan diberikan kepada divisi Engineering atau divisi Housekeeping. 2. Tahap kedua dicetak dengan data yang lengkap termasuk rincian harga, yang akan diberikan kepada customer sebagai dasar untuk melakukan pembayaran atas pengerjaan perbaikan, dan diberikan kepada Finance sebagai dasar untuk melakukan penagihan atas pengerjaan perbaikan
PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta 10220 Telp 570-1246
Work Order
Tanggal : dd/mm/yyyy
No Work Order Ditujukan Untuk Penanggung jawab
Eng / HK 20 char
Kebutuhan Ruangan Nama Tenant
20 char Lt 99 20 char
Work Description
Tgl Selesai
Tgl Dimulai
50 char
dd/mm/yyyy
dd/mm/yyyy
Tgl Pemeriksaan dd/mm/yyyy
Kelebihan Waktu 99 Hari
Harga Rp. 999.999,00
Dibuat Oleh :
Disetujui Oleh :
20 char
20 char
Gambar 4.64 Rancangan Formulir Work Order
1.3.1.7 User Interface Form Kontrak
Gambar 4.653 User Interface Form Kontrak
Form Kontrak dibuat oleh Marketing yang digunakan untuk menginput informasi – informasi penting dalam Kontrak yang berfungsi untuk memudahkan dalam pengelolaan
data saat dibutuhkan oleh manajemen dalam pengambilan keputusan. Di dalam form ini terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data Kontrak atau untuk menambahkan dan mengubah data Kontrak. Ketika user menambah data Kontrak baru, sistem akan secara otomatis mengenerate Nomor Kontrak, kemudian user dapat langsung menginput data Kontrak, seperti Tanggal Kontrak, ID dan Nama Customer, Periode Mulai, Periode Akhir, dan Harga Kontrak ke dalam field yang tersedia. Sedangkan jika ingin mengubah data Kontrak, maka user harus memilih data Kontrak yang ingin diubah di dalam list table terlebih dahulu. Jika data sudah dipilih, maka data Kontrak tersebut akan terlihat di dalam field-field yang tersedia. Dalam field Status, jika pembayaran telah Lunas, maka Status akan secara otomatis berisi tidak aktif. Field Status dan Field Addendum akan kembali aktif dan bertambah setelah dilakukannya perpanjangan oleh customer yang bersangkutan.
1.3.1.8 User Interface Form Invoice
Gambar 4.664 User Interface Form Invoice
Form Invoice dibuat oleh bagian Finance untuk melakukan penagihan kepada customer atas jasa yang diberikan baik untuk jasa perbaikan ruangan yang ditagih berdasarkan Form Work Order dan jasa Cleaning Service yang ditagih berdasarkan Form Kontrak. Dalam Form Invoice ini akan terlihat data Kontrak dan data WO yang harus segera ditagih dengan ditampilkan dalam list table Kontrak dan list table WO. Data yang ditampilkan adalah data – data yang harus ditagih pada tanggal tersebut sampai dua minggu ke depan. Dengan begitu, bagian Finance dapat segera malakukan penagihan sesuai dengan tanggal penagihan dan dapat terus melakukan penagihan sampai waktu jatuh tempo penagihan berakhir. User bisa mengakses form ini baik hanya untuk melihat data Invoice atau untuk menambahkan dan mengubah data Invoice. Ketika user menambah data Invoice baru, sistem akan secara otomatis men-generate Nomor Invoice, kemudian user dapat langsung menginput data Invoice, seperti Tanggal Invoice, Periode Jatuh Tempo, ID dan Nama
Customer, Nomor Transaksi (Nomor Kontrak atau Nomor WO), dan Nominal Penagihan ke dalam field yang tersedia. Sedangkan jika ingin mengubah data Invoice, maka user harus memilih data Invoice yang ingin diubah di dalam list table terlebih dahulu. Jika data sudah dipilih, maka data Invoice tersebut akan terlihat di dalam field-field yang tersedia. Selanjutnya user dapat mencetak form Invoice ini untuk diberikan kepada customer sebagai bukti penagihan.
PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta 10220 Telp 570-1246
INVOICE
Tanggal : dd/mm/yyyy
No Invoice ID Customer Nama
CU-15001 20 char
No Kontrak / No WO KO-15001
Keterangan 50 char
Harga Kontrak / Harga WO Rp. 999.999,00
Jatuh Tempo
Nominal Tagihan
dd/mm/yyyy
Rp. 999.999,00
Dibuat Oleh :
Disetujui Oleh :
20 char
20 char
Gambar 4.67 Rancangan Formulir Invoice
1.3.1.9
User Interface Form Pembayaran
Gambar 4.68 User Interface Form Pembayaran
Form Pembayaran dibuat oleh bagian Finance untuk mencatat penerimaan dari customer berdasarkan Invoice yang ditagihkan Dalam User bisa mengakses form ini baik hanya untuk melihat data pembayaran atau untuk menambahkan dan mengubah data Pembayaran. Ketika user menambah data pembayaran baru, sistem akan secara otomatis men-generate Nomor pembayaran, kemudian user dapat langsung menginput data pembayaran, seperti Nomor Invoice, metode pembayaran, dan Nominal pembayaran ke dalam field yang tersedia. Sedangkan jika ingin mengubah data pembayaran, maka user harus memilih data pembayaran yang ingin diubah di dalam list table terlebih dahulu. Jika data sudah dipilih, maka data pembayaran tersebut akan terlihat di dalam field-field yang tersedia.
1.3.1.10 User Interface Form Perpanjangan Kontrak
Gambar 4.69 User Interface Form Perpanjangan Kontrak
Form Perpanjangan Kontrak dibuat oleh Marketing untuk melakukan perpanjangan kontrak dari kontrak yang sudah tidak aktif atau periode kontrak yang telah berakhir. Di dalam form ini terdapat list table yang terhubung langsung dengan database. Dalam form ini user hanya dapat melihat data kontrak yang sudah tidak aktif saja karena kontrak hanya dapat dipepanjang saat periode kontrak telah berakhir atau telah berstatus tidak aktif. Dalam melakukan pepanjangan kontrak, user harus memilih terlebih dahulu data kontrak yang ingin diperpanjang di dalam list table yang ada, selanjutnya sistem akan menampilkan rincian data ke dalam field yang tersedia. Ketika user yakin bahwa data kontrak yang akan dipepanjang adalah benar, user hanya perlu meng-klik tombol perpanjang. Setelah meng-klik perpanjang, user perlu untuk meng-klik tombol save, atau jika tidak ingin memperpanjang, user masih bisa untuk membatalkannya dengan meng-klik tombol batal. Saat melakukan save, maka Status akan secara otomatis akan kembali aktif dan dalam kolom Addendu / perpanjangan akan bertambah satu.
1.3.1.11 User Interface Form Voucher
Gambar 4.70 User Interface Form Voucher
Form Voucher atau Form Perintah Pembukuan dibuat oleh Accounting untuk melakukan pencatatan pembukuan dari transaksi – transaksi keuangan yang terjadi di dalam perusahaan. Di dalam form ini terdapat list table yang terhubung langsung dengan database. User bisa mengakses form ini baik hanya untuk melihat data Voucher atau untuk menambahkan dan mengubah data Voucher. Ketika user menambah data Voucher baru, sistem akan secara otomatis mengenerate Nomor Voucher, kemudian user dapat langsung menginput data Voucher, seperti Tanggal Voucher, Keterangan Pencatatan Voucher, dan No Transaksi, ke dalam field yang tersedia. Saat melakukan penambahan data Voucher, user juga harus mengisi data dalam detail Voucher yang berisi jurnal dari transaksi tersebut, yang berisi : Sisi Debit (No Akun, Keterangan, Jumlah) dan Sisi Kredit (No Akun, Keterangan, Jumlah)
Sedangkan jika ingin mengubah data Voucher, maka user harus memilih data Voucher yang ingin diubah di dalam list table terlebih dahulu. Jika data sudah dipilih, maka data Voucher tersebut akan terlihat di dalam field-field yang tersedia.
1.3.1.12 User Interface Form Laporan Piutang
Gambar 4.71 User Interface Form Laporan Piutang
Form Laporan Piutang dibuat oleh bagian Accounting yang digunakan untuk membuat laporan piutang yang dibutuhkan oleh manajemen dalam pengambilan keputusan, Dalam form ini laporan yang dihasilkan dapat lebih fleksibel, user dapat menentukan periode awal dan periode akhir untuk menampilkan transaksi – transaksi piutang yang diinginkan, yaitu dengan mengisi field periode awal dan field periode akhir. Selanjutnya user dapat mencetak laporan sesuai format tanggal yang diminta oleh manajemen.
PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta 10220 Telp 570-1246
Laporan Piutang
Tanggal cetak : dd/mm/yyyy
Periode : dd/mm/yyyy s/d dd/mm/yyyy ID Customer / ID Tenant Nama No. Invoice
Tgl Invoice
IN-15001
dd/mm/yyyy
ID Customer / ID Tenant Nama No. Invoice
Tgl Invoice
IN-15002
dd/mm/yyyy
CU-15001 20 char No. Kontrak / No. WO KO-15001
Harga Kontrak / Harga WO Rp. 999.999,00
Jatuh Tempo dd/mm/yyyy
Nominal Penagihan Rp. 999.999,00
Tertagih
Nominal Penagihan Rp. 999.999,00
Belum Tertagih
Status
TN-15002 20 char No. Kontrak / No. WO WO-15001
Harga Kontrak / Harga WO Rp. 999.999,00
Jatuh Tempo dd/mm/yyyy
Status
Dibuat Oleh :
Disetujui Oleh :
20 char
20 char
Gambar 4.72 Rancangan Laporan Piutang
1.3.1.13 User Interface Form Laporan Penerimaan Kas
Gambar 4.73 User Interface Form Laporan Penerimaan Kas
Form Laporan Penerimaan Kas dibuat oleh bagian Accounting yang digunakan untuk menampilkan laporan penerimaan kas dari transaksi – transaksi penerimaan yang dimiliki oleh perusahaan, baik yang menggunakan metode pembayaran cash, transfer, atau cek dan bilyet giro Dalam form ini laporan yang dihasilkan dapat lebih fleksibel, user dapat menentukan periode awal dan periode akhir untuk menampilkan transaksi – transaksi penerimaan kas yang diinginkan, yaitu dengan mengisi field periode awal dan field periode akhir. Selanjutnya user dapat mencetak laporan sesuai format tanggal yang diminta oleh manajemen. PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta 10220 Telp 570-1246
Laporan Penerimaan Kas
Tanggal cetak : dd/mm/yyyy
Periode : dd/mm/yyyy s/d dd/mm/yyyy ID Customer / ID Tenant Nama No. Pembayaran PE-15001
Tgl Nominal Harga Kontrak / No. Invoice Jatuh Tempo Metode Bayar Pembayaran Harga WO Pembayaran dd/mm/yyyy IN-15001 dd/mm/yyyy Transfer Rp. 999.999,00 Rp. 999.999,00
ID Customer / ID Tenant Nama No. Pembayaran PE-15002
CU-15001 20 char Status Belum Lunas
TN-15002 20 char
Tgl Harga Kontrak / Nominal No. Invoice Jatuh Tempo Metode Bayar Pembayaran Harga WO Pembayaran dd/mm/yyyy IN-15002 dd/mm/yyyy Cek / Giro Rp. 999.999,00 Rp. 999.999,00
Status Lunas
Dibuat Oleh :
Disetujui Oleh :
20 char
20 char
Gambar 4.74 Rancangan Laporan Penerimaan Kas
1.3.1.14 User Interface Form Laporan Jurnal
Gambar 4.75 User Interface Form Laporan Jurnal
Form Laporan Jurnal dibuat oleh bagian Accounting yang digunakan untuk menampilkan laporan jurnal dari form Voucher atas pembukuan jurnal – jurnal akuntansi dari setiap transaksi, Dalam form ini laporan yang dihasilkan dapat lebih fleksibel, user dapat menentukan periode awal dan periode akhir untuk menampilkan transaksi – transaksi piutang yang diinginkan, yaitu dengan mengisi field periode awal dan field periode akhir. Selanjutnya user dapat mencetak laporan sesuai format tanggal yang diminta oleh manajemen. PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta 10220 Telp 570-1246
Laporan Jurnal
Tanggal cetak : dd/mm/yyyy
Periode : dd/mm/yyyy s/d dd/mm/yyyy
No. Voucher
Tgl Voucher No. Transaksi
VO-15001
dd/mm/yyyy
KO-15001
VO-15002
dd/mm/yyyy
WO-15001
VO-15003
dd/mm/yyyy
PE-15001
Keterangan
Nama Jurnal
Account Receivable (PT ABC) Unearned CS Revenue PPn Keluaran Account Receivable (PT XYZ) Perbaikan Ruang Service Revenue (Lt 12, PT XYZ) PPn Keluaran Pembayaran PT Cash / Bank Account Receivable(PT XYZ) XYZ
Debit
Kredit
RP. 22.000.000,00
Kontrak PT ABC
RP. 20.000.000,00 RP. 2.000.000,00 RP. 5.500.000,00 RP. 5.000.000,00 RP. 500.000,00 RP. 5.500.000,00 RP. 5.500.000,00
Dibuat Oleh :
Disetujui Oleh :
20 char
20 char
Gambar 4.76 Rancangan Laporan Jurnal
