BAB IV

RANCANGAN SISTEM USULAN

4.1. Tahapan Perancangan Sistem

4.1.1. Analisa Kebutuhan

Dengan sistem penggajian ini, dimana admin dan user dapat mengelola data

penggajian dengan mudah dan akurat. Berikut ini merupakan spesifikasi kebutuhan dari

sistem Penggajian pada Koperasi Karyawan Bukopin.

1. Halaman Admin

1) Admin dapat melakukan login

2) Admin dapat mengelola data pegawai

3) Admin dapat mengelola data jabatan

4) Admin dapat mengelola data absensi

5) Admin dapat mengelola setting potongan gaji

6) Admin dapat mengelola data gaji

7) Admin dapat mencetak laporan gaji

8) Admin dapat mencetak laporan absensi

9) Admin dapat mencetak laporan slip gaji

10) Admin dapat mengubah password

11) Admin dapat melakukan logout

2. Halaman User

1) User dapat melakukan login

2) User dapat menampilkan data gaji

3) User dapat mencetak slip gaji

34
 35

4) User dapat mengubah password

5) User dapat melakukan logout

4.1.2. Rancangan Use Case Diagram

Gambar IV. 1
Use Case Diagram
 36

Tabel IV. I
Deskripsi Use Case Diagram Admin

Use Case Name Admin

Requirements 1

Goals Admin dapat menampilkan halaman

dashboard, dapat mengelola data pegawai,
dapat mengelola data jabatan, dapat
mengelola data absensi, dapat mengelola
setting potongan gaji, dapat mengelola data
gaji, dapat mencetak laporan gaji, dapat
mencetak laporan absensi, dapat mencetak
laporan slip gaji dan dapat mengubah
password

Pre-Conditions Admin memasukan username & password

untuk melakukan login

Admin dapat menampilkan halaman

dashboard, dapat mengelola data pegawai,
Post-Conditions
dapat mengelola data jabatan, dapat
mengelola data absensi, dapat mengelola
setting potongan gaji, dapat mengelola data
gaji, dapat mencetak laporan gaji, dapat
mencetak laporan absensi, dapat mencetak
laporan slip gaji dan dan dapat mengubah
password

Failed end Conditions Admin gagal melakukan login

Actors Admin

Main Flow/Basic Path Admin dapat melakukan login

1. Sistem menampilkan dashboard
2. Admin dapat mengelola data pegawai
3. Admin dapat mengelola data jabatan
4. Admin dapat mengelola data absensi
5. Admin dapat mengelola setting potongan
gaji
6. Admin dapat mengelola data gaji
7. Admin dapat mencetak laporan gaji
8. Admin dapat mencetak laporan absensi
9. Admin dapat mencetak laporan slip gaji
 37

Invariant A 1. Admin dapat menambahkan data

pegawai,data jabatan, data absensi dan data
setting potongan gaji
2. Admin dapat mengelola passsword user

Tabel IV. II
Deskripsi Use Case Diagram User

Use Case Name User

Requirements 2
User dapat melakukan login, dapat
menampilkan halaman dashboard,
Goal dapat menampilkan data gaji, dapat
mencetak slip gaji dan dapat mengubah
password
user melakukan login dengan
Pre-Conditions
memasukan username dan pasword
User dapat melakukan login, dapat
menampilkan halaman dashboard,
Post –Conditions dapat menampilkan data gaji, dapat
mencetak slip gaji dan dapat mengubah
password
Failed end Conditions User gagal melakukan login
Actors user
1) User memasukan username dan
password untuk melakukan login
2) Sistem menampilkan halaman
Main Flow/Basic Path dashboard
3) User dapat menampilkan data gaji
4) User dapat mencetak slip gaji
5) User dapat mengubah password
Invariant A 1. Sistem memvalidasi data login
 38

4.1.3. Rancangan Activity Diagram

4.1.4. Rancangan Dokumen Pengembangan Sistem

A. Spesifikasi Bentuk Dokumen Masukan

1. Nama Dokumen : Data Pegawai

Fungsi : Sebagai Pendaftaran Akun

Sumber : Administrasi

Tujuan : Sistem

Media : File

Jumlah :1

Frekuensi : Setiap Mendaftarkan Akun

Bentuk : Lampiran C1

2. Nama Dokumen : Data Absensi Karyawan

Fungsi : Untuk Mengelola Penggajian

Sumber : Administrasi

Tujuan : Sistem

Media : File

Jumlah Rekap :1

Bentuk : Lampiran C2

3. Nama Dokumen : Data Penggajian Karyawan

Fungsi : Untuk Mengelola Penggajian

Sumber : Administrasi

Tujuan : Sistem

Media : File

Jumlah Rekap :1

Bentuk : Lampiran C3
 39

B. Spesifikasi Bentuk Dokumen Keluaran

1. Nama Dokumen : Daftar Gaji Karyawan

Fungsi : Sebagai Laporan Daftar Gaji Karyawan

Sumber : Sistem

Tujuan : Administrasi

Media : Kertas

Jumlah :1

Frekuensi : Setiap Permintaan Laporan Daftar Gaji

Bentuk : Lampiran D1

2. Nama Dokumen : Laporan Penggajian Karyawan

Fungsi : Sebagai Laporan Penggajian Karyawan

Sumber : Sistem

Tujuan : Administrasi

Media : Kertas

Jumlah :1

Frekuensi : Setiap Bulan

Bentuk : Lampiran D2

3. Nama Dokumen : Laporan Absensi Karyawan

Fungsi : Sebagai Laporan Absensi Karyawan

Sumber : Sistem

Tujuan : Administrasi

Media : Kertas

Jumlah :1

Frekuensi : Setiap Permintaan Laporan Absensi Karyawan

Bentuk : Lampiran D3
 40

4. Nama Dokumen : Slip Gaji Karyawan

Fungsi : Sebagai Slip Gaji Karyawan

Sumber : Sistem

Tujuan : Karyawan

Media : Kertas

Jumlah :1

Frekuensi : Setiap Bulan

Bentuk : Lampiran D4

4.2. Perancangan Prototype

Perancangan lunak ini difokuskan pada enam atribut, yaitu ERD, LRS,

Spesifikasi File, Class Diagram, Sequence Diagram, dan Spesifikasi Hardware

serta Software.

4.2.1. Entity Relationship Diagram (ERD)

Gambar IV. 2
Entity Relationship Diagram
 41

4.2.2. Logical Record Stucture

Gambar IV. 3
Logical Record Structure
4.2.3. Spesifikasi File
1. Spesifikasi file Hak Akses

Nama Database : penggajian

Nama File : hak_akses

Fungsi : Untuk mengelola akun

Tipe File : Master

Media File : Harddisk

Akses File : Random

Organisasi File : Index Sequential

Panjang Record : 72 Karakter

Field Key : id

Software : MySQL
 42

Tabel IV. III

Spesifikasi File hak_akses

No Elemen Data Nama Field Type Size keterangan

1 Id Id int 11 Primary

Key

2 keterangan Keterangan Varchar 50

3 hak_ases hak_ases int 11

2. Spesifikasi file Data Pegawai

Nama Database : penggajian

Nama File : data_pegawai

Fungsi : Untuk menyimpan data pegawai

Tipe File : Master

Media File : Harddisk

Akses File : Random

Organisasi File : Index Sequential

Panjang Record : 505 Karakter

Field Key : id_pegawai

Software : MySQL

Tabel IV. IV
Spesifikasi File Data Pegawai

No Elemen Data Nama Field Type Size keterangan

 43

1 Id_pegawai Id_pegawai Int 11 Primary Key

2 nik Nik Varchar 16

3 Nama_pegawai Nama_pegawai Varchar 100

4 username Username Varchar 120

5 password Password Varchar 32

6 Jenis_kelamin Jenis_kelamin Varchar 15

7 jabatan Jabatan Varchar 50

8 Tanggal_masuk Tanggal_masuk date

9 status Status Varchar 100

10 photo Photo Varchar 50

11 Hak_akses Hak_akses int 11

3. Spesifikasi file Data jabatan

Nama Database : penggajian

Nama File : data_jabatan

Fungsi : Untuk menyimpan data

Tipe File : Master

Media File : Harddisk

Akses File : Random

Organisasi File : Index Sequential

 44

Panjang Record : 181 Karakter

Field Key : id_jabatan

Software : MySQL

Tabel IV. V
Spesifikasi File Data Jabatan

No Elemen Data Nama Field Type Size keterangan

1 Id_jabatan Id_jabatan Int 11 Primary Key

2 Nama_jabatan Nama_jabatan Int 120

3 Gaji_pokok Gaji_pokok Varchar 50

4. Spesifikasi file Data Kehadiran

Nama Database : penggajian

Nama File : data_kehadiran

Fungsi : Untuk menyimpan data kehadiram

Tipe File : Master

Media File : Harddisk

Akses File : Random

Organisasi File : Index Sequential

Panjang Record : 245 Karakter

Field Key : id_kehadiran

Software : MySQL

Tabel IV. VI
Spesifikasi File Data Kehadiran

No Elemen Data Nama Field Type Size Keterangan

 45

1 Id_kehadiran Id_kehadiran Int 11 Primary Key

2 bulan bulan Varchar 15

3 nik nik Varchar 16

4 Nama_pegawai Nama_pegawai Varchar 100

5 Jenis_kelamin Jenis_kelamin Varchar 20

6 Nama_jabatan Nama_jabatan Varchar 50

7 Hadir Hadir Int 11

8 Sakit Sakit Int 11

9 alpha alpha Int 11

5. Spesifikasi file Potongan Gaji

Nama Database : penggajian

Nama File : potongan_gaji

Fungsi : Untuk menyimpan data potongan gaji

Tipe File : Master

Media File : Harddisk

Akses File : Random

Organisasi File : Index Sequential

Panjang Record : 142 Karakter

Field Key : id
 46

Software : MySQL

Tabel IV. VII

Spesifikasi File Potongan Gaji

No Elemen Data Nama Field Type Size Keterangan

1 Id id Int 11 Primary Key

2 Potongan Potongan Varchar 120

3 Jml_potongan Jml_potongan Int 11

4.2.4. Class Model/ Class Diagram

Gambar IV. 4
Class diagram
 47

4.2.5. Sequence Diagram

Gambar IV. 5
Sequence Diagram Data Gaji
 48

4.2.6. Rancangan Antarmuka

1. User Interface Halaman Home

Gambar IV. 6
User Interface Home
 49

2. User Interface Halaman Login

Gambar IV. 7
User Interface Login
3. User Interface Dashboard

Gambar IV. 8
User Interface Dashboard
 50

4. User Interface Data Pegawai

Gambar IV. 9
User Interface Data Pegawai
5. User Interface Tambah Data Pegawai

Gambar IV. 10
User Interface Tambah Data Pegawai
 51

6. User Interface Update Data Pegawai

Gambar IV. 11
User Interface Update Data Pegawai

7. User Interface Data Pegawai Berhasil Diperbaharui

Gambar IV. 12
User Interface Data Pegawai Berhasil Diperbaharui
 52

8. User Interface Data Pegawai Berhasil Dihapus

Gambar IV. 13
User Interface Data Pegawai Berhasil Dihapus
9. User Interface Data Jabatan

Gambar IV. 14
User Interface Data Jabatan
 53

10. User Interface Tambah Data Jabatan

Gambar IV. 15
User Interface Tambah Data Jabatan

11. User Interface Update Data Jabatan

Gambar IV. 16
User Interface Update Data Jabatan
 54

12. User Interface Data Jabatan Berhasil Diperbaharui

Gambar IV. 17

User Interface Data Jabatan Berhasil Diperbaharui

13. User Interface Data Jabatan Berhasil Dihapus

Gambar IV. 18
User Interface Data Jabatan Berhasil Dihapus
 55

14. User Interface Data Absensi

Gambar IV. 19
User Interface Data Absensi

15. User Interface Proses Menampilkan Data Absensi

Gambar IV. 20
User Interface Proses Menampilkan Data Absensi
 56

16. User Interface Proses Input Data Absensi

Gambar IV. 21
User Interface Proses Input Data Absensi

17. User Interface Proses Input Data Absensi

Gambar IV. 22
User Interface Proses Input Data Absensi
 57

18. User Interface Proses Berhasil Menyimpan Data Absensi

Gambar IV. 23
User Interface Proses Berhasil Menyimpan Data Absensi

19. User Interface Setting Potongan Gaji

Gambar IV. 24
User Interface Setting Potongan Gaji
 58

20. User Interface Tambah Potongan Gaji

Gambar IV. 25
User Interface Tambah Potongan Gaji

21. User Interface Update Potongan Gaji

Gambar IV. 26
User Interface Update Potongan Gaji
 59

22. User Interface Hapus Potongan Gaji

Gambar IV. 27
User Interface Hapus Potongan Gaji

23. User Interface Data Gaji

Gambar IV. 28
User Interface Data Gaji
 60

24. User Interface Proses Menampilkan Data Gaji

Gambar IV. 29
User Interface Proses Menampilkan Data Gaji

25. User Interface Tampilan Cetak Data Gaji

Gambar IV. 30
 61

User Interface Tampilan Cetak Data Gaji

Gambar IV. 31
User Interface Laporan Gaji

26. User Interface Cetak Laporan Gaji

Gambar IV. 32
User Interface Cetak Laporan Gaji
 62

27. User Interface Laporan Absensi

Gambar IV. 33
User Interface Laporan Absensi

28. User Interface Cetak Laporan Absensi

Gambar IV. 34
User Interface Cetak Laporan Absensi
 63

29. User Interface Slip Gaji

Gambar IV. 35
User Interface Slip Gaji

30. User Interface Cetak Slip Gaji

Gambar IV. 36
User Interface Cetak Slip Gaji
 64

31. User interface Form Ubah Password

Gambar IV. 37
User Interface Form Ubah Password

32. User Interface Halaman Dashboard User

Gambar IV. 38
User Interface Dashboard User
 65

33. User Interface Data Gaji User

Gambar IV. 39
User Interface Data gaji user

34. User Interface Cetak Slip Gaji User

Gambar IV. 40
User Interface Cetak Slip Gaji User
 66

35. User Interface Form Ganti Passsword User

Gambar IV. 41
User Interface Ganti Passsword User
 67

4.2.7. Spesifikasi Hardware dan Software

1. Spesifikasi Hardware

A. Server

1. CPU

a. Processor pentium core 2 core

b. RAM DDR 4GB

c. Hard disk 500GB

2. Mouse

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768

5. koneksi internet dengan kecepatan 2Mbps

2. Spesifikasi Software

1. Server

a. sistem operasi yang umum digunakan yaitu microsoft OS

2. Aplikasi bundle web server xampp yang terdiri dari beberapa komponen diantaranya:

a. Aplikasi Apache server v2

b. Aplikasi PHPnServer v5

c. Aplikasi MySQL Server v5

d. Aplikasi PHPMyAdmin v5

3. Aplikasi Web seperti Google Chrome dan yang lainnya.

B. Konsumen

1. Sistem operasi yang umum digunakan seperti Microsoft Windows OS, Aplikasi web

seperti Google Chrome dan yang lainnya.

 68

4.3. Pengujian Antarmuka

1. Pengujian Front-end
Pengujian antarmuka pada front-end dilakukan oleh calon user front-end. Dalam

pengujian ini dilakukan oleh user.abel IV. VIII Hasil Pengujian Antarmuka Front-

Tabel IV. IX

Hasil Pengujian Antarmuka Front-end

Partisipan Home Logi Dashboar Akses Akses Akses Mengubah

n d Master Transaksi Laporan Password

Data

1 √ √ √ √ √ √ √

2 √ √ √ √ √ √ √

Sukses 2 2 2 2 2 2 2

Nilai 100% 100% 100% 100% 100% 100% 100%

Kesuksesan
 69

2. Pengujian Back-end
Pengujian antarmuka pada back-end dilakukan oleh calon user back-end. ini
dilakukan oleh calon administrator web.ack-end

Tabel IV. X
Hasil Pengujian Antarmuka Back-end

Partisipan Home Logi Dashboar Akses Akses Akses Mengubah

n d Master Transaksi Laporan Password

Data

1 √ √ √ √ √ √ √

2 √ √ √ √ √ √ √

Sukses 2 2 2 2 2 2 2

Nilai 100% 100% 100% 100% 100% 100% 100%

Kesuksesan
 70

4.4. Jadwal Implementasiabel IV. XI Jadwal Implementasi

Tabel IV. XII

Jadwal Implementasi

WAKTU
No KEGIATAN BULAN I BULAN II BULAN III
1 2 3 4 1 2 3 4 1 2 3 4
1 Persiapan data awal
2 Analisa
3 Desain Sistem
4 Desain Perangkat Lunak
Pembuatan & Tes
5 Program
6 Tes Sistem
7 Pelatihan
Pembuatan Buku
8 Petunjuk
9 Evaluasi & Operasional