UI Navigation. Gambar 4.47 UI Navigation Menu File

Transkripsi

1 UI Navigation Gambar 4.47 UI Navigation Menu File

2 Gambar UI Navigation Menu Master

3 Gambar UI Navigation Menu Transaksi

4 Gambar 4.50 UI Navigation Menu Laporan

5 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.

6 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 berikut : Saat menu Master di klik, akan muncul beberapa sub menu, antara lain sebagai

7 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

8 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

9 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

10 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.

11 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.

12 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 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

13 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 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.

14 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 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

15 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

16 PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta Telp Ditujukan Untuk Eng / HK Penanggung 20 char jawab Work Order No Work Order Tanggal : dd/mm/yyyy Kebutuhan 20 char Ruangan Lt 99 Nama Tenant 20 char Tgl Kelebihan Work Description Tgl Selesai Tgl Dimulai Harga Pemeriksaan Waktu 50 char dd/mm/yyyy dd/mm/yyyy dd/mm/yyyy 99 Hari Rp ,00 Dibuat Oleh : Disetujui Oleh : 20 char 20 char Gambar 4.64 Rancangan Formulir Work Order User Interface Form Kontrak Gambar User Interface Form Kontrak Form Kontrak dibuat oleh Marketing yang digunakan untuk menginput informasi informasi penting dalam Kontrak yang berfungsi untuk memudahkan dalam pengelolaan

17 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.

18 User Interface Form Invoice Gambar 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

19 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 Telp ID Customer CU Nama 20 char INVOICE No Invoice Tanggal : dd/mm/yyyy No Kontrak / No WO Keterangan Harga Kontrak / Harga WO Jatuh Tempo Nominal Tagihan KO char Rp ,00 dd/mm/yyyy Rp ,00 Dibuat Oleh : Disetujui Oleh : 20 char 20 char Gambar 4.67 Rancangan Formulir Invoice

20 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.

21 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.

22 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)

23 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 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.

24 PT SWADHARMA GRIYASATYA Gd BNI Lt 25, JL. Jend. Sudirman Kav. 1 Jakarta Telp Laporan Piutang Periode : dd/mm/yyyy s/d dd/mm/yyyy Tanggal cetak : dd/mm/yyyy ID Customer / ID Tenant Nama CU char No. Kontrak / Harga Kontrak / Nominal No. Invoice Tgl Invoice Jatuh Tempo Status No. WO Harga WO Penagihan IN dd/mm/yyyy KO Rp ,00 dd/mm/yyyy Rp ,00 Tertagih ID Customer / ID Tenant Nama TN char No. Kontrak / Harga Kontrak / Nominal No. Invoice Tgl Invoice Jatuh Tempo Status No. WO Harga WO Penagihan IN dd/mm/yyyy WO Rp ,00 dd/mm/yyyy Rp ,00 Belum Tertagih Dibuat Oleh : Disetujui Oleh : 20 char 20 char Gambar 4.72 Rancangan Laporan Piutang User Interface Form Laporan Penerimaan Kas Gambar 4.73 User Interface Form Laporan Penerimaan Kas

25 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 Telp Laporan Penerimaan Kas Periode : dd/mm/yyyy s/d dd/mm/yyyy Tanggal cetak : dd/mm/yyyy ID Customer / ID Tenant Nama No. Pembayaran CU char Tgl Pembayaran No. Invoice Jatuh Tempo Metode Bayar Harga Kontrak / Harga WO Nominal Pembayaran Status PE dd/mm/yyyy IN dd/mm/yyyy Transfer Rp ,00 Rp ,00 Belum Lunas ID Customer / ID Tenant Nama TN char No. Pembayaran Tgl Pembayaran No. Invoice Jatuh Tempo Metode Bayar Harga Kontrak / Harga WO Nominal Pembayaran Status PE dd/mm/yyyy IN dd/mm/yyyy Cek / Giro Rp ,00 Rp ,00 Lunas Dibuat Oleh : Disetujui Oleh : 20 char 20 char Gambar 4.74 Rancangan Laporan Penerimaan Kas

26 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 Telp Laporan Jurnal Periode : dd/mm/yyyy s/d dd/mm/yyyy Tanggal cetak : dd/mm/yyyy No. Voucher Tgl Voucher No. Transaksi Keterangan Nama Jurnal Debit Kredit VO VO VO dd/mm/yyyy dd/mm/yyyy dd/mm/yyyy KO WO PE Kontrak PT ABC Perbaikan Ruang (Lt 12, PT XYZ) Pembayaran PT XYZ Account Receivable (PT ABC) RP ,00 Unearned CS Revenue RP ,00 PPn Keluaran RP ,00 Account Receivable (PT XYZ) RP ,00 Service Revenue RP ,00 PPn Keluaran RP ,00 Cash / Bank RP ,00 Account Receivable(PT XYZ) RP ,00 Dibuat Oleh : Disetujui Oleh : 20 char 20 char Gambar 4.76 Rancangan Laporan Jurnal