Perancangan user interface merupakan implementasi dari bentuk aplikasi rancang bangun sistem informasi penjualan kredit sepeda motor yang digunakan untuk menginputkan data penjualan sepeda motor secara kredit. Dalam pembuatan user interface ini penulis menggunakan bahasa pemrograman PHP. Adapun tampilan aplikasi rancang bangun Sistem Informasi Akutansi Penjualan Kredit
78
Sepeda Motor Pada PT. Bersama Makmur Raharza yang penulis rancang terdiri dari :
1. Tampilan Login
Dalam desain halaman login yang menjadi inputan adalah user name dan password. Adapun desain halaman login dapat dilihat pada gambar III.32
Gambar III.32. Tampilan Login 2. Tampilan Home
Desain menu home pada aplikasi ini adalah desain yang pertama kali muncul ketika pertama kali sistem dijalankan. desain menu home dapat dilihat pada Gambar III.33
Gambar III.33. Tampilan Home 3. Tampilan Dealer
Desain halaman data dealer pada aplikasi ini adalah halaman untuk menampilkan data dealer . Rancangan desain halaman data dealer dapat dilihat pada Gambar III.34
Gambar III.34. Tampilan Dealer 4. Tampilan Input Dealer
Desain tampilan input data dealer untuk menginput data dealer sepeda motor PT. Bersama Makmur Raharza, adapun tampilan desain input data dealer dapat dilihat pada gambar III.35
Gambar III.35. Tampilan Input Dealer
5. Tampilan Edit Dealer
80
Desain tampilan edit data dealer untuk mengedit data dealer sepeda motor PT.
Bersama Makmur Raharza, adapun tampilan edit data dealer dapat dilihat pada gambar III.36
Gambar III.36. Tampilan Edit Dealer 6. Tampilan Unit
Desain halaman data unit pada aplikasi ini adalah halaman untuk menampilkan data unit sepeda motor pada PT. Bersama Makmur Raharza.
Rancangan desain halaman data unit dapat dilihat pada Gambar III.37
Gambar III.37. Tampilan Desain Unit
7. Tampilan Input Unit
Desain tampilan input data unit untuk menginput data unit sepeda motor PT.
Bersama Makmur Raharza, adapun tampilan desain input data unit dapat dilihat pada gambar III.38
Gambar III.38. Tampilan Input Unit 8. Tampilan Edit Unit
Desain tampilan edit data unit untuk mengedit data unit sepeda motor PT.
Bersama Makmur Raharza, adapun tampilan edit data unit dapat dilihat pada gambar III.39
82
Gambar III.39. Tampilan Edit Unit
9. Tampilan Desain Customer
Desain halaman data customer pada aplikasi ini adalah halaman untuk menampilkan data customer pada PT. Bersama Makmur Raharza. Rancangan desain halaman data customer dapat dilihat pada Gambar III.40
Gambar III.40. Tampilan Desain Customer
10. Tampilan Input Customer
Desain tampilan input data customer untuk menginput data customer PT.
Bersama Makmur Raharza, adapun tampilan desain input data customer dapat dilihat pada gambar III.41
Gambar III.41. Tampilan Input Customer 11. Tampilan Edit Customer
Desain tampilan edit data customer untuk mengedit data customer PT.
Bersama Makmur Raharza, adapun tampilan edit data customer dapat dilihat pada gambar III.42
84
Gambar III.42. Tampilan Edit Customer 12. Tampilan Desain Penjualan
Desain halaman data penjualan kredit sepeda motor pada aplikasi ini adalah halaman untuk menampilkan data penjualan kredit sepeda motor pada PT.
Bersama Makmur Raharza. Rancangan desain halaman data penjualan dapat dilihat pada Gambar III.43
Gambar III.43. Tampilan Penjualan
13. Tampilan Input Penjualan
Desain tampilan input data penjualan kredit sepeda motor untuk menginput data penjualan kredit sepeda motor pada PT. Bersama Makmur Raharza, adapun tampilan desain input data penjualan dapat dilihat pada gambar III.44
Gambar III.44. Tampilan Input Penjualan
14. Tampilan Edit Penjualan
Desain tampilan edit data penjualan untuk mengedit data penjualan PT.
Bersama Makmur Raharza, adapun tampilan edit data penjualan dapat dilihat pada gambar III.45
86
Gambar III.45. Tampilan Edit Penjualan 15. Tampilan Desain Pembayaran
Desain halaman data pembayaran kredit sepeda motor pada aplikasi ini adalah halaman untuk menampilkan data pembayaran kredit sepeda motor pada PT.
Bersama Makmur Raharza. Rancangan desain halaman data pembayaran dapat dilihat pada Gambar III.46
Gambar III.46. Tampilan Pembayaran
16. Tampilan Input Pembayaran
Desain tampilan input data pembayaran kredit sepeda motor untuk menginput data pembayaran kredit sepeda motor pada PT. Bersama Makmur Raharza, adapun tampilan desain input data penjualan dapat dilihat pada gambar III.47
Gambar III.47. Tampilan Input Pembayaran
17. Tampilan Edit Pembayaran
Desain tampilan edit data pembayaran untuk mengedit data pembayaran PT.
Bersama Makmur Raharza, adapun tampilan edit data pembayaran dapat dilihat pada gambar III.48
88
Gambar III.48. Tampilan Edit Pembayaran 18. Tampilan Beban
Desain halaman data beban pada aplikasi ini adalah halaman untuk menampilkan data beban pada PT. Bersama Makmur Raharza. Rancangan desain halaman data beban dapat dilihat pada Gambar III.49
Gambar III.49. Tampilan Beban
19. Tampilan Input Beban
Desain tampilan input data beban untuk menginput data beban pada PT.
Bersama Makmur Raharza, adapun tampilan desain input data beban dapat dilihat pada gambar III.50
Gambar III.50. Tampilan Input Beban 20. Tampilan Edit Beban
Desain tampilan edit data beban untuk mengedit data beban PT. Bersama Makmur Raharza, adapun tampilan edit data beban dapat dilihat pada gambar III.51
Gambar III.51. Tampilan Edit Beban
90
21. Tampilan Neraca
Desain halaman data neraca pada aplikasi ini adalah halaman untuk menampilkan data neraca pada PT. Bersama Makmur Raharza. Rancangan desain halaman data neraca dapat dilihat pada Gambar III.52
Gambar III.52. Tampilan Neraca 22. Tampilan Input Neraca
Desain tampilan input data neraca untuk menginput data neraca pada PT.
Bersama Makmur Raharza, adapun tampilan desain input data neraca dapat dilihat pada gambar III.53
Gambar III.53. Tampilan Input Neraca
23. Tampilan Edit Neraca
Desain tampilan edit data neraca untuk mengedit data neraca PT. Bersama Makmur Raharza, adapun tampilan edit data neraca dapat dilihat pada gambar III.54
Gambar III.54. Tampilan Edit Neraca
24. Tampilan Desain Laporan Pembayaran
Desain tampilan laporan pembayaran pada aplikasi ini adalah halaman menampilkan laporan pembayaran. Desain tampilan laporan pembayaran dapat dilihat pada Gambar III.55
Gambar III.55. Tampilan Desain Laporan Pembayaran
92
Hasil inputan periode berdasarkan bulan dengan menekan tombol cari maka tampilan hasil laporan pembayaran dapat dilihat pada gambar III.56
Gambar III.56. Tampilan Desain Output Laporan Pembayaran
25. Tampilan Desain Laporan Penjualan
Desain tampilan laporan penjualan pada aplikasi ini adalah halaman menampilkan laporan penjualan. Desain tampilan laporan penjualan dapat dilihat pada Gambar III.57
Gambar III.57. Tampilan Desain Laporan Penjualan
Hasil inputan periode berdasarkan bulan dengan menekan tombol cari maka tampilan hasil laporan penjualan dapat dilihat pada gambar III.58
Gambar III.58. Tampilan Desain Output Laporan Penjualan
26. Tampilan Desain Laporan Laba / Rugi
Desain tampilan laporan laba rugi pada aplikasi ini adalah halaman menampilkan laporan laba rugi. Desain tampilan laporan laba rugi dapat dilihat pada Gambar III.59
Gambar III.59. Tampilan Desain Laporan Laba /Rugi
Hasil inputan periode berdasarkan bulan dengan menekan tombol cari maka tampilan hasil laporan laba rugi dapat dilihat pada gambar III.60
94
Gambar III.60. Tampilan Desain Output Laporan Laba /Rugi
27. Tampilan Desain Laporan Neraca
Desain tampilan laporan neraca pada aplikasi ini adalah halaman menampilkan laporan neraca. Desain tampilan laporan neraca dapat dilihat pada Gambar III.61
Gambar III.61. Tampilan Desain Laporan Neraca
Hasil inputan periode berdasarkan bulan dengan menekan tombol cari maka tampilan hasil laporan neraca dapat dilihat pada gambar III.62
Gambar III.62. Tampilan Desain Output Laporan Neraca
28. Tampilan Desain Laporan Jurnal Umum
Desain tampilan laporan jurnal umum pada aplikasi ini adalah halaman menampilkan laporan jurnal umum. Desain tampilan laporan jurnal umum dapat dilihat pada Gambar III.63
Gambar III.63. Tampilan Desain Laporan Jurnal Umum
96
Hasil inputan periode berdasarkan bulan dengan menekan tombol cari maka tampilan hasil laporan neraca dapat dilihat pada gambar III.64
Gambar III.64. Tampilan Desain Output Laporan Jurnal Umum