ANALISIS DAN PERANCANGAN SISTEM
III.2 Perancangan Sistem
III.2.2 Perancangan Antar Muka (Interface Design)
Desain AntarMuka merupakan form atau halaman yang digunakan untuk
memasukkan dan mengeluarkan data-data ke dan dari sistem. Pada sistem informasi
adminitrasi ini, rancangan sistem AntarMuka yang akan dibuat dari awal sampai
Login User
NIP Password
Login Ulang
Selamat Datang di Sistem Informasi Administrasi P T Agung Christal Abadi, silahkan login terlebih dahulu, setelah selesai jangan lupa logout
Petunjuk Umum
Gambar 3.13. Form Login
Gambar di atas adalah gambar yang pertama kali muncul saat user akan
masuk ke sistem. User diharuskan untuk login terlebih dahulu agar dapat masuk ke
sistem, jika login usernya salah maka akan muncul tampilan seperti dibawah ini:
Gambar 3.14. Pesan Kesalahan login salah
Jika login usernya benar/valid maka selanjutnya akan masuk ke sistem
50
Gambar 3.15. Halaman Utama untuk User bagian Umum
Bila user telah selesai menggunakan sistem informasi ini maka user tersebut
diharuskan untuk logout dengan mengklik tombol/link logout. Setelah logout maka
akan kembali pada halaman login. Untuk pengolahan data pegawai caranya adalah
menekan tombol pegawai pada bagian kiri atas header, maka user akan masuk ke
Gambar 3.16. Halaman Pengolahan Data Pegawai
Pada halaman pengolaan data pegawai, ada fasilitas untuk menambah data
pegawai, mengupdate data pegawai, memberhentikan pegawai, dan melihat data
pegawai. Untuk menambah data pegawai user dapat menekan tombol Tambah
Pegawai, tampilannya akan menjadi seperti di bawah ini:
52
Setelah data pegawai diisi lalu user menekan tombol Simpan dan kemudian
akan masuk ke dalah form konfirmasi input data pegawai, form ini digunakan untuk
memberikan kesempatan kepada user untuk mengecek data-data yang sudah diisi
sekaligus mendeteksi error/kesalahan yang mungkin terjadi misalnya tanggal lahir
diisi dengan huruf. Tampilannya adalah seperti di bawah ini:
Gambar 3.18. Form Konfirmasi Input Data Pegawai
Bila ada kesalahan yang terdeteksi maka tombol Simpan ke database akan
di-disabledan field data yang salah akan berwarna merah sehingga user tahu field mana
yang perlu diperbaiki. Selanjutnya untuk mengubah data pegawai user dapat menekan
tombol Update Pegawai, dan akan muncul tampilan seperti di bawah ini:
Pada field foto user dapat menambah atau mengupdate foto dengan cara
mengklik link “Belum”, ini berarti foto pegawai tersebut belum ada. Form untuk
input/update foto tersebut akan terlihat seperti di bawah ini:
Gambar 3.20. Form Update Foto Pegawai
Untuk mengupdate data pegawai, pada gambar diatas klik link Edit
kemudian akan muncul tampilan seperti ini:
54
Setelah data selesai diupdate user menekan tombol Simpan dan kemudian
akan masuk ke form konfirmasi update data pegawai, tampilannya sangat mirip
dengan form konfirmasi input data pegawai. Selanjutnya untuk memberhentikan
pegawai user dapat menekan tombol PHK Pegawai, kemudian akan muncul tampilan
seperti di bawah ini:
Gambar 3.22. Halaman PHK Pegawai
Pada field Aksi klik link PHK lalu kemudian akan masuk ke form PHK
pegawai, tampilannya seperti di bawah ini:
Selanjutnya untuk melihat data pegawai secara detail, user dapat menekan
tombol Lihat Pegawai, maka akan muncuk tampilan seperti ini:
Gambar 3.24. Halaman Lihat Data Pegawai
Pada field Aksi klik link detail untuk melihat data pegawai secara detail,
kemudian tampilannya adalah seperti ini:
Gambar 3.25. Data Pegawai
Selanjutnya untuk melakukan pengolahan data mitra user dapat menekan
tombol Mitra pada seperti tertera pada gambar di atas, kemudian akan muncul
56
Gambar 3.26. Halaman Pengolahan Data Mitra
Untuk menambah data mitra user dapat menekan tombol Tambah Mitra
pada menu navigator di sebelah kiri pada gambar di atas, setelah ditekan akan muncul
tampilan seperti di bawah ini:
Gambar 3.27. Form Input Data Mitra
Setelah data diisi tekan tombol Simpan kemudian kita akan masuk ke dalam
Gambar 3.28. Form Konfirmasi Input Data Mitra
Selanjutnya adalah form update data mitra, user dapat menekan tombol
Update Mitra, tampilannya adalah seperti di bawah ini:
Gambar 3.29. Halaman Update Data Mitra
Untuk mengupdate data mitra klik link Update pada field Aksi diatas
kemudian user akan masuk ke dalam form update data mitra. Tampilannya adalah
sepeerti di bawah ini
:
58
Setelah data selesai diupdate dan menekan tombol Simpan maka kemudian
akann masuk ke dalam form konfirmasi update data mitra, tampilannya sangat mirip
dengan form konfirmasi input data mitra
Selanjutnya adalah pengolahan data proyek, untuk masuk ke halaman tersebut
user dapat menekan tombol Proyek pada header, kemudian akan muncul halaman
seperti di bawah ini:
Gambar 3.31. Halaman Pengolahan Data Proyek
Selanjutnya untuk menambah data proyek baru user dapat menekan tombol
Tambah Proyek pada navigator sebelah kiri, kemudian akan muncul tampilan form
Gambar 3.32. Form Input Data Proyek
Setelah data proyek diisi dan menekan tombol Simpan maka akan muncul
form konfirmasi input data proyek, tampilannya adalah seperti di bawah ini:
Gambar 3.33. Form Konfirmasi Input Data Proyek
Untuk mengupdate data proyek user dapat menekan tombol Update Proyek,
60
Gambar 3.34. Halaman Update Data Proyek dan Penugasan Pegawai Proyek
Pada field Aksi terdapat dua buah link, link Pelaksana dan link Update. Link
Pelaksana digunakan untuk memilih pegawai lapangan yang akan menjadi pelaksana
proyek. Bila link tersebut diklik akan muncul halaman seperti di bawah ini:
Gambar 3.35. Halaman Penugasan Pegawai proyek
Setelah pegawai lapangan dipilih dengan mengklik checkbox pada field pilih
kemudian selanjutanya akan masuk ke dalam form penugasan pegawai proyek,
Gambar 3.36. Form Penugasan Pegawai proyek
Untuk mengupdate data proyek user dapat menekan link update pada field
Aksi, kemudian akan muncul tampilan seperti di bawah ini:
Gambar 3.37. Form Update Data proyek
Setelah data diupdate kemudian user menekan tombol simpan dan selanjutnya
62
dengan form konfirmasi input data mitra. Kemudian user dapat mengupdate status
pekerjaan proyek bila pengerjaan proyek telah selesai dengan cara menekan tombol
Update Status Proyek, kemudian akan muncul tampilan seperti di bawah ini:
Gambar 3.38. Halaman Update Data proyek
Untuk masuk ke form update status pekerjaan proyek, klik link update pada
field Aksi diatas, kemudian akan muncul tampilan seperti di bawah ini:
Selanjutnya user dapat melihat data proyek secara detail dengan menekan
tombol Lihat Proyek. Kemudian akan muncul tampilan seperti di bawah ini:
Gambar 3.40. Halaman Lihat Data Proyek
Untuk melihat data detailnya klik link detail pada field aksi. Tampilan yang
akan muncul adalah seperti di bawah ini:
64
Untuk user bagian administrasi setelah login akan muncul halaman seperti di
bawah ini:
Gambar 3.42. Halaman Utama Bagian Administrasi
Untuk pengolahan data transaksi user dapat menekan tombol Transaksi pada
Gambar 3.43. Halaman Pengolahan Data Transaksi
Untuk menambah data transaksi proyek user dapat menekan tombol Tambah
Transaksi, kemudian akan muncul tampilan seperti gambar di bawah ini:
66
Setelah data diisi dan menekan tombol Simpan maka selanjutnya data akan
menuju ke form konfirmasi input data transaksi, tampilannya seperti gambar di
bawah ini:
Gambar 3.45. Form Konfirmasi Data Transaksi
Bila ada kesalahan dalam penulisan nominal transaksi user dapat menekan
tombol Jurnal Penyesuaian untuk mengkoreksi transaksi, tampilan yang akan muncul
seperti gambar di bawah ini:
Setelah link “Koreksi” diklik, maka akan muncul tampilan seperti di bawah
ini:
Gambar 3.47. Form Input Jurnal Penyesuaian
Setelah data diisi kemudian selanjutnya akan masuk ke form konfirmasi input
jurnal penyesuaian, tampilannya seperti gambar di bawah ini:
Form Konfirmasi Input Jurnal Penyesuaian
Simpan Ulang Kode Proyek 120601 Tgl Penyesuaian Akun yg didebet Akun yg dikredit Nominal Keterangan 09/07/2006 KAS PIUTANG USAHA Rp.1.000.000
68
Untuk melihat jurnal tekan tombol Jurnal dan akan muncul tampilan seperti
gambar di bawah ini:
Gambar 3.49. Jurnal
Selanjutnya user dapat melihat rincian transaksi tiap proyek (buku pembantu
proyek) dengan menekan tombol Rincian Transaksi kemudian akan muncul tampilan
seperti gambar di bawah ini:
Gambar 3.50. Halaman Rincian Transaksi
Setelah itu klik link Detail pada field Aksi dan akan muncul tampilan seperti
Gambar 3.51. Buku Pembantu Proyek
Selanjutnya user dapat melihat laporan. Ada beberapa jenis laporan, yang
pertama adalah laporan laba rugi. Caranya adalah tekan tombol laporan dan klik link
70
Gambar 3.52. Laporan laba Rugi
Selanjutnya user dapat melihat laporan laba-laba/rugi bulanan beserta
grafiknya dengan menekan link Laporan Grafik Bulanan, tampilannya adalah seperti
gambar di bawah ini:
Selanjutnya adalah kasbon pegawai, untuk menambah transaksi kasbon
pegawai, user dapat menekan tombol tambah kasbon, setelah itu akan muncul
halaman untuk memilih proyek tertentu, kemudian akan muncul tampilan seperti di
bawah ini:
Gambar 3.54. Form Input Data Kasbon Pegawai
Selanjutnya user dapat melihat siapa saja pegawai lapangan yang kasbon
kepada perusahaan, user dapat menekan tombol Kasbon Pegawai dan akan muncul
halaman seperti di bawah ini:
72
Pada gambar diatas pada field nota bila datanya tertampil “BELUM” maka
berarti kasbonnya belum dipertanggungjawabkan dan itu merupakan link ke Form
Pertanggungjawaban Kasbon, bila datanya tertampil “SUDAH” maka kasbonnya
sudah dipertanggungjwabkan dan untuk keterangan detail dapat mengklik angka pada
field kasbon. Tampilan dari Form Pertanggungjawaban Kasbon adalah sebagai
berikut:
Gambar 3.56 Form Pertanggungjawaban kasbon
Setelah jumlah notanya diisi (misal diisi dengan angka 2) dan user menekan
tombol “Lanjut >>” maka akan muncul tampilan sebagai berikut:
Selanjutnya adalah buku besar, user dapat menekan tombol buku besar pada
header dan akan muncul tampilan seperti di bawah ini:
Gambar 3.58. Halaman Buku Besar
User dapat memilih jenis akun pada menu drop down di atas. Bila user
menekan tombol cari maka tampilannya adalah sebagai berikut:
74
Selanjutnya adalah laporan daftar saldo, laporan daftar saldo adalah laporan
rekap saldo akun terkini. Tampilannya adalah seperti gambar di bawah ini:
Gambar 3.60. Laporan Daftar Saldo
Pada halaman laporan daftar saldo di atas terdapat dua buah tombol yaitu
“Lihat rekap >>” dan “Tutup Buku”. Tombol “Lihat Rekap >>” digunakan untuk
melihat rekap tiap akun, perbedaannya dengan laporan pada gambar 3.58 di atas
adalah field saldo pada gambar di atas sudah tidak ada, saldo tersebut sudah dipindah
ke field debet/kredit. Jadi misalkan akun kas, debet = 5000, kredit = 3000,
saldo=2000 (D), kemudian pada rekap akun menjadi debet = 2000, kredit = 0.
Sedangkan pada tombol “Tutup Buku” digunakan untuk menutup buku besar yang
hanya bisa dilakukan pada tanggal 31 Desember tahun berjalan. Setelah tombol
Gambar 3.61. Jurnal Penutup
Selanjutnya adalah laporan daftar proyek yang pengerjaannya telah selesai
namun pembayarannya belum lunas. Tampilannya adalah seperti gambar di atas,
kemudian ada juga laporan daftar proyek yang pengerjaannya belum selesai tetapi
sudah melewati deadline tampilannya juga sama seperti gambar di atas. Selanjutnya
adalah halaman utama untuk user bagian manager. Tampilannya adalah seperti
76
Gambar 3.62. Halaman Utama Manager
Manajer dapat melihat data-data perusahaan seperti data pegawai, mitra, dll
dengan cara menekan tombol Data Perusahaan, kemudian akan muncul tampilan
seperti gambar di bawah ini:
Dalam submenu laporan manajer dapat melihat daftar proyek mana saja yang
pengerjaannya belum selesai namun sudah melewati tanggal deadline dan daftar
proyek mana saja yang pengerjaannya telah selesai namun pembayaran proyeknya
belum lunas. Berikut adalah tampilan dari daftar proyek yang belum selesai namun
sudah melewati deadline:
Gambar 3.64. Daftar Proyek Belum Selesai tapi Sudah Melewati Deadline
Untuk tampilan daftar proyek yang sudah selesai pengerjaannya namun
pembayarannya belum lunas adalah sebagai berikut:
78
Untuk halaman buku besar tampilannya sama seperti pada bagian
administrasi yang ditunjukkan pada gambar 3.57 di atas.