UI Navigation
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 Jurnal yang dimiliki
perusahaan
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 :
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
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 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
ter-generate oleh sistem dengan mengurutkan ID secara Ascending, selanjutnyoa user harus
mengisi field – field yang tersedia yang telah disesuaikan dengan format pengisian dalam
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
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 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
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
Ditujukan Untuk Eng / HK
Kebutuhan 20 char Ruangan Lt 99 Nama Tenant 20 char
Work Description Tgl Selesai Tgl Dimulai Tgl Pemeriksaan
Kelebihan
Waktu Harga 50 char dd/mm/yyyy dd/mm/yyyy dd/mm/yyyy 99 Hari Rp. 999.999,00
20 char Penanggung jawab 20 char Dibuat Oleh : Tanggal : dd/mm/yyyy Disetujui Oleh : 20 char Work Order No Work Order
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
men-generate 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
No Invoice ID Customer CU-15001 Nama 20 char No Kontrak / No WO Keterangan Harga Kontrak /Harga WO Jatuh Tempo Nominal Tagihan KO-15001 50 char Rp. 999.999,00 dd/mm/yyyy Rp. 999.999,00
Tanggal : dd/mm/yyyy
Dibuat Oleh : Disetujui Oleh :
20 char 20 char
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
men-generate 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
ID Customer / ID Tenant CU-15001
Nama 20 char
No. Invoice Tgl Invoice No. Kontrak /
No. WO
Harga Kontrak /
Harga WO Jatuh Tempo
Nominal
Penagihan Status
IN-15001 dd/mm/yyyy KO-15001 Rp. 999.999,00 dd/mm/yyyy Rp. 999.999,00 Tertagih
ID Customer / ID Tenant TN-15002
Nama 20 char
No. Invoice Tgl Invoice No. Kontrak /
No. WO
Harga Kontrak /
Harga WO Jatuh Tempo
Nominal
Penagihan Status
IN-15002 dd/mm/yyyy WO-15001 Rp. 999.999,00 dd/mm/yyyy Rp. 999.999,00 Belum Tertagih
20 char 20 char
Dibuat Oleh : Disetujui Oleh :
Laporan Piutang Tanggal cetak : dd/mm/yyyy
Periode : dd/mm/yyyy s/d dd/mm/yyyy
Gambar 4.72 Rancangan Laporan Piutang
1.3.1.13
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
ID Customer / ID Tenant CU-15001
Nama 20 char
No. Pembayaran
Tgl
Pembayaran No. Invoice Jatuh Tempo Metode Bayar
Harga Kontrak / Harga WO
Nominal
Pembayaran Status
PE-15001 dd/mm/yyyy IN-15001 dd/mm/yyyy Transfer Rp. 999.999,00 Rp. 999.999,00 Belum Lunas
ID Customer / ID Tenant TN-15002
Nama 20 char
No. Pembayaran
Tgl
Pembayaran No. Invoice Jatuh Tempo Metode Bayar
Harga Kontrak / Harga WO
Nominal
Pembayaran Status
PE-15002 dd/mm/yyyy IN-15002 dd/mm/yyyy Cek / Giro Rp. 999.999,00 Rp. 999.999,00 Lunas
20 char 20 char
Laporan Penerimaan Kas Tanggal cetak : dd/mm/yyyy
Periode : dd/mm/yyyy s/d dd/mm/yyyy
Dibuat Oleh : Disetujui Oleh :
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
No. Voucher Tgl Voucher No. Transaksi Keterangan Debit Kredit
Account Receivable (PT ABC) RP. 22.000.000,00
Unearned CS Revenue RP. 20.000.000,00 PPn Keluaran RP. 2.000.000,00 RP. 5.500.000,00 Service Revenue RP. 5.000.000,00 PPn Keluaran RP. 500.000,00 RP. 5.500.000,00
Account Receivable(PT XYZ) RP. 5.500.000,00
Perbaikan Ruang (Lt 12, PT XYZ) WO-15001 Dibuat Oleh : dd/mm/yyyy VO-15002 VO-15003 20 char
Tanggal cetak : dd/mm/yyyy Laporan Jurnal
Periode : dd/mm/yyyy s/d dd/mm/yyyy
dd/mm/yyyy PE-15001 Pembayaran PT XYZ
Account Receivable (PT XYZ)
Cash / Bank Disetujui Oleh : 20 char Nama Jurnal Kontrak PT ABC KO-15001 dd/mm/yyyy VO-15001
