39
34 BAB IV PERANCANGAN SISTEM USULAN 4.1. Tahap Perancangan Sistem 4.1.1. Analisis Kebutuhan A. Kebutuhan Pengguna Dalam menganalisa kebutuhan, maka penulis melakukan analisa terhadap sistem yang berjalan. Selama ini penggajian karyawan pada PT. INDO NUTRISI JAYA masih menggunakan sistem manual sehingga membutuhkan banyak waktu dan rentan terjadinya kesalahan serta integritas data tidak terjaga . Oleh karena itu, penulis membuat rancangan sistem berbasis web untuk membantu mengatasi permasalahan. Adapun analisa kebutuhan sistem pada PT. INDO NUTRISI JAYA yang di usulkan sebagai berikut : A1. Kebutuhan Admin 1) Dapat Melakukan login 2) Dapat Mengelola data Penggajian 3) Dapat Melihat data Penggajian 4) Dapat Melakukan Perhitungan Gaji 5) Dapat Menginput laporan Penggajian 6) Dapat Mencetak Laporan Penggajian A2. Kebutuhan Karyawan 1) Dapat melakukan login 2) Dapat melakukan Absen 3) Dapat Mencetak Slip Gaji

BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

34

BAB IV

PERANCANGAN SISTEM USULAN

4.1. Tahap Perancangan Sistem

4.1.1. Analisis Kebutuhan

A. Kebutuhan Pengguna

Dalam menganalisa kebutuhan, maka penulis melakukan analisa terhadap

sistem yang berjalan. Selama ini penggajian karyawan pada PT. INDO NUTRISI

JAYA masih menggunakan sistem manual sehingga membutuhkan banyak waktu

dan rentan terjadinya kesalahan serta integritas data tidak terjaga .

Oleh karena itu, penulis membuat rancangan sistem berbasis web untuk

membantu mengatasi permasalahan. Adapun analisa kebutuhan sistem pada PT.

INDO NUTRISI JAYA yang di usulkan sebagai berikut :

A1. Kebutuhan Admin

1) Dapat Melakukan login

2) Dapat Mengelola data Penggajian

3) Dapat Melihat data Penggajian

4) Dapat Melakukan Perhitungan Gaji

5) Dapat Menginput laporan Penggajian

6) Dapat Mencetak Laporan Penggajian

A2. Kebutuhan Karyawan

1) Dapat melakukan login

2) Dapat melakukan Absen

3) Dapat Mencetak Slip Gaji

Page 2: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

35

A3. Skenario Kebutuhan Direktur

a) Melihat laporan penggajian

b) Menerima laporan penggajian

c) Menyetujui laporan penggajian

4.1.2. Rancangan Diagram use case

Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar pengguna

dengan sebuah sistem melalui sebuah cerita bagaimana sistem tersebut dipakai.

1. Use Case Diagram Penggajian

Admin

Logout

Login

Data Admin

Data Jabatan

Data Golongan

Data Karyawan

Data Kahadiran

Karyawan

Data Penggajian

Laporan

Menampilkan Data

Admin

Menampilkan Data

Jabatan

Menampilkan Data

Golongan

Menampilkan Data

Karyawan

Menampilkan Data

Kehadiran Karyawan

Menampilkan Data

Penggajian Karyawan

Laporan Kehadiran

Laporan Lembur

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

Melihat Laporan

Direktur

Karyawan

Melakukan absen

Gambar IV.1 Use case Diagram Penggajian

Page 3: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

36

Tabel IV.1 Deskripsi Gambar Use Case Diagram Penggajian

Use Case Narative Penggajian

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu

yang tersedia untuk diproses

Skenario Utama

Aktor Admin, karyawan, direktur

Kondisi Awal Aktor telah akses masuk menu Login

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol Data Admin

2. Aktor memilih

tombol Data Jabatan

3. Aktor memilih

tombol Data Golongan

4. Aktor memilih

tombol Data Karyawan

5. Aktor memilih

tombol Data Kehadiran

Karyawan

6. Aktor memilih

tombol Data Gaji

Karyawan

7. Aktor memilih

tombol Laporan

8.Aktor memilih

tombol Logout

9. Aktor memilih

tombol absen

Sistem akan menampilkan sub menu Data Admin

Sistem akan menampilkan sub menu Data Jabatan

Sistem akan menampilkan sub menu Data Golongan

Sistem akan menampilkan sub menu Data Karyawan

Sistem akan menampilkan sub menu Data Kehadiran

Karyawan

Sistem akan menampilkan sub menu Data Gaji Karyawan

Sistem akan menampilkan sub menu Laporan

Sistem akan mengeluarkan aktor dari sistem dan kembali

ke menu Login

Sistem akan menampilkan data kehadiran karyawan

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada menu utama dan aktor

dapat melakukan aktivitas didalam sistem

Page 4: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

37

2. Use Case Diagram Menu Data Admin yang diakses oleh Admin

Admin

Data Admin

<<include>>

Menambahkan Data

Admin

Mengedit Data

Admin

<<include>>

<<include>>

Menghapus Data

Admin

<<include>>

Gambar IV.2 Use case Menu Data Admin

Tabel IV.2 Deskripsi Gambar Use Case Menu Data Admin

Use Case Narative Menu Data Admin

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu

yang tersedia untuk diproses

Skenario Utama

Aktor Admin

Kondisi Awal Aktor telah akses menu utama dan memilih Data Admin

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol tambah Data

Admin

2. Aktor memilih

tombol Edit Data

Admin

3. Aktor memilih

tombol Hapus Data

Admin

Sistem akan menampilkan form untuk menginput Data

Admin baru

Sistem akan menampilkan form untuk mengedit data

admin yang dipilih aktor

Sistem akan menghapus data admin yang dipilih aktor

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada sub menu data admin

dan aktor dapat melakukan aktivitas didalam sistem

Page 5: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

38

3. Use Case Diagram Menu Data Jabatan yang diakses oleh Admin

Admin

Data Jabatan

<<include>>

Menambahkan Data

Jabatan

Mengedit Data

Jabatan

<<include>>

<<include>>

Menghapus Data

Jabatan

<<include>><<include>>

Mencetak Laporan

Jabatan

Gambar IV.3 Use case Menu Data Jabatan

Tabel IV.3 Deskripsi Gambar Use Case Menu Data Jabatan

Use Case Narative Menu Data Jabatan

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu

yang tersedia untuk diproses

Skenario Utama

Aktor Admin

Kondisi Awal Aktor telah akses menu utama dan memilih Data Jabatan

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol tambah Data

Jabatan

2. Aktor memilih

tombol Edit Data

Jabatan

3. Aktor memilih

tombol Hapus Data

Jabatan

4.Aktor memilih cetak

Laporan Jabatan

Sistem akan menampilkan form untuk menginput Data

Jabatan

Sistem akan menampilkan form untuk mengedit data

jabatan yang dipilih aktor

Sistem akan menghapus data jabatan yang dipilih aktor

Sistem akan mencetak data jabatan yang dipilih oleh

aktor

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada sub menu data jabatan

dan aktor dapat melakukan aktivitas didalam sistem

Page 6: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

39

4. Use Case Diagram Menu Data Golongan yang diakses oleh Admin

Admin

Data Golongan

<<include>>

Menambahkan Data

Golongan

Mengedit Data

Golongan

<<include>>

<<include>>

Menghapus Data

Golongan

<<include>><<include>>

Mencetak Laporan

Golongan

Gambar IV.4 Use case Menu Data Golongan

Tabel IV.4 Deskripsi Gambar Use Case Menu Data Golongan

Use Case Narative Menu Data Golongan

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu

yang tersedia untuk diproses

Skenario Utama

Aktor Admin

Kondisi Awal Aktor telah akses menu utama dan memilih Data

Golongan

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol tambah Data

Golongan

2. Aktor memilih

tombol Edit Data

Golongan

3. Aktor memilih

tombol Hapus Data

Golongan

4.Aktor memilih cetak

Laporan Golongan

Sistem akan menampilkan form untuk menginput Data

golongan

Sistem akan menampilkan form untuk mengedit data

golongan yang dipilih aktor

Sistem akan menghapus data golongan yang dipilih aktor

Sistem akan mencetak data golongan yang dipilih oleh

aktor

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada sub menu data golongan

dan aktor dapat melakukan aktivitas didalam sistem

Page 7: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

40

5. Use Case Diagram Menu Data Karyawan yang diakses oleh Admin

Admin

Data Karyawan

<<include>>

Menambahkan Data

Karyawan

Mengedit Data

Karyawan

<<include>>

<<include>>

Menghapus Data

Karyawan

<<include>><<include>>

Mencetak Laporan

Karyawan

Gambar IV.5 Use case Menu Data Karyawan

Tabel IV.5 Deskripsi Gambar Use Case Menu Data Karyawan

Use Case Narative Menu Data Karyawan

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu yang

tersedia untuk diproses

Skenario Utama

Aktor Admin

Kondisi Awal Aktor telah akses menu utama dan memilih Data karyawan

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol tambah Data

Karyawan

2. Aktor memilih

tombol Edit Data

Karyawan

3. Aktor memilih

tombol Hapus Data

Karyawan

4.Aktor memilih cetak

Laporan Karyawan

Sistem akan menampilkan form untuk menginput Data

karyawan

Sistem akan menampilkan form untuk mengedit data

karyawan yang dipilih aktor

Sistem akan menghapus data karyawan yang dipilih aktor

Sistem akan mencetak data karyawan yang dipilih oleh

aktor

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada sub menu data karyawan

dan aktor dapat melakukan aktivitas didalam sistem

Page 8: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

41

6. Use Case Diagram Menu Data Kehadiran yang diakses oleh Admin

Admin

Data Kehadiran

<<include>>

Menampilkan Data

Kehadiran

Menginput Data

Kehadiran

<<include>>

<<include>>

Mengubah Data

Kehadiran

<<include>><<include>>

Mencetak Laporan

Kehadiran

Gambar IV.6 Use case Menu Data Kehadiran Karyawan

Tabel IV.6 Deskripsi Gambar Use Case Menu Data Kehadiran Karyawan

Use Case Narative Menu Data Kehadiran Karyawan

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu

yang tersedia untuk diproses

Skenario Utama

Aktor Admin

Kondisi Awal Aktor telah akses menu utama dan memilih Data

kehadiran karyawan

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol menu Data

Kehadiran Karyawan

3. Aktor memilih

tombol Input Data

kehadiran Karyawan

4. Aktor memilih

tombol Ubah Data

kehadiran Karyawan

5.Aktor memilih cetak

laporan kehadiran

karyawan

Sistem akan menampilkan data kehadiran karyawan

Sistem akan menampilkan form untuk menginput data

kehadiran karyawan yang dipilih aktor

Sistem akan menampilkan form untuk merubah data

kehadiran karyawan yang dipilih aktor

Sistem akan mencetak laporan kehadiran karyawan yang

dipilih oleh aktor

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada sub menu data

kehadiran karyawan dan aktor dapat melakukan aktivitas

didalam sistem

Page 9: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

42

7. Use Case Diagram Menu Data Penggajian Karyawan yang diakses Admin

Admin

Data Penggajian

Karyawan

Menampilkan Data

Penggajian

Menambahkan Data

Penggajian

<<include>>

<<include>>

Mencetak Laporan

Daftar gaji

<<include>>

Gambar IV.7 Use case Menu Data Penggajian Karyawan

Tabel IV.7 Deskripsi Gambar Use Case Menu Data Penggajian Karyawan

Use Case Narative Menu Data Penggajian Karyawan

Tujuan Memilih menu yang akan di proses

Deskripsi Sistem ini memungkinkan aktor untuk memilih menu

yang tersedia untuk diproses

Skenario Utama

Aktor Admin

Kondisi Awal Aktor telah akses menu utama dan memilih Data

penggajian karyawan

Aksi Aktor

Reaksi Sistem

1. Aktor memilih

tombol menu Data

Penggajian Karyawan

3. Aktor memilih

tombol tambah Data

Penggajian Karyawan

5.Aktor memilih cetak

laporan Penggajian

Karyawan

Sistem akan menampilkan data penggajian karyawan

Sistem akan menampilkan form untuk menginput data

penggajian karyawan yang dipilih aktor

Sistem akan mencetak laporan penggajian karyawan yang

dipilih oleh aktor

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk merespon

sesuai dengan reaksi sistem pada sub menu data

penggajian karyawan dan aktor dapat melakukan aktivitas

didalam sistem

Page 10: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

43

4.1.3. Rancangan Diagram Aktifitas

Activity diagram menggambarkan berbagai aliran alir aktivitas dalam sistem

yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang

mungkin terjadi dan bagaimana berakhir.

1. Activity Diagram Login

Admin Sistem

Start

Membuka Aplikasi

Melalui BrowserMenampilkan Form Login

Mengisi Username

dan Password

Mengklik Tombol

Login

Username dan

Password Salah

Username dan

Password Benar

Menampilkan

Halaman Utama

Gambar IV.8 Activity Diagram Login Admin

Page 11: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

44

2. Activity Diagram Menu Data Admin

Admin Sistem

Start

Mengklik Menu

Data Admin

Menampilkan Halaman

Data Admin

Klik Tambah Data

Admin

Mengisi Form Data

Admin

Klik Simpan

Menampilkan Data

Admin yang diinput

Menampilkan Form Data

Admin

Gambar IV.9 Activity Diagram Menu Data Admin

Page 12: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

45

3. Activity Diagram Menu Data Jabatan

Admin Sistem

Start

Mengklik Menu

Data Jabatan

Menampilkan Halaman

Data Jabatan

Mengisi Data Jabatan

Memilih Kode Jabatan

Klik Tombol Simpan

Menampilkan Halaman Data

Jabatan yang diinput

Menampikan Nama Jabatan

Gambar IV.10 Activity Diagram Menu Data Jabatan

Page 13: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

46

4. Activity Diagram Menu Data Golongan

Admin Sistem

Start

Mengklik Menu

Data Golongan

Menampilkan Halaman

Data Golongan

Klik Tambah Data

Golongan

Mengisi nama golongan, tunjangan,

uang makan, uang lembur dan askes

Klik Simpan

Menampilkan Halaman Data

Golongan yang diinput

Batal

Gambar IV.11 Activity Diagram Menu Data Golongan

Page 14: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

47

5. Activity Diagram Menu Data Karyawan

Admin Sistem

Start

Mengklik Menu

Karyawan

Menampilkan Halaman

Data Karyawan

Memilih tombol

tambah

Mengisi Form Data

Karyawan

Memilih Tombol

Simpan

Menampilkan Data

Karyawan yang diinput

Menampilkan form

tambah Data Karyawan

kelola

tidak kelola

Gambar IV.12 Activity Diagram Menu Data Karyawan

Page 15: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

48

6. Activity Diagram Menu Data Kehadiran Karyawan

Admin Sistem

Start

Mengklik Menu

Kehadiran Karyawan

Menampilkan Halaman

Data kehadiran karyawan

Memilih bulan dan

tahun

klik Simpan

Memilih Input

Kehadiran Karyawan

Menampilkan Halaman Data

Kehadiran Karyawan yang diinput

Menampikan Data

Kehadiran karyawan

Mengisi Data

Kehadiran karyawan

Memilih edit Data

Kehadiran Karyawan

kelolatidak kelola

Menampilkan form edit

Data Kehadiran

Mengganti Data Kehadiran

klik simpan

Gambar IV.13 Activity Diagram Menu Data Kehadiran Karyawan

Page 16: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

49

7. Activity Diagram Menu Absensi Karyawan

Karyawan Sistem

Start

Memilih Menu AbsenMenampilkan Halaman

absen karyawan

Klik Tombol AbsenMemasukan Data Absen

ke Database

Gambar IV.14 Activity Diagram Menu Absensi Karyawan

8. Activity Diagram Menu Data Gaji Karyawan

Admin Sistem

Start

Memilih Menu

Gaji Karyawan

Menampilkan form gaji

karyawan

Memilih bulan dan

tahun

Mengklik Tombol Cetak

Daftar Gaji Karyawan

Menampilkan Data Gaji

karyawan serta Total Gaji yang

didapatkan

Penggajian Karyawan tsb telah dilakukan

Gambar IV.15 Activity Diagram Menu Gaji Karyawan

Page 17: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

50

9. Activity Diagram Laporan

Direktur Sistem

Start

Memilih Menu

laporan

Menampilkan menu

kategori laporan

Memilih kategori laporan yang

ingin di cetak

Menampilkan Laporan

Penggajian sesuai pilihan bulan

dan tahun

Menampilkan laporan

berdasarkan kategori

Pilih Bulan dan tahun sesuai

kebutuhan

Mengalihkan ke

halaman print laporan

Mengklik tombol cetak

laporan

Gambar IV.16 Activity Diagram Laporan

Page 18: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

51

4.1.4. Rancangan Dokumen Sistem Usulan

Penulis akan menjelaskan tentang rancangan dokumen sistem usulan berupa

bentuk uraian pembuatan aplikasi penggajian yang akan penulis gunakan,

diantaranya adalah:

A. Bentuk Dokumen Masukan

Bentuk dokumen masukan merupakan bentuk dari dokumen-dokumen yang masuk

atau yang di terima pada saat proses berjalan. Dokumen masukan yang digunakan

pada sistem usulan adalah:

1. Nama Dokumen : Data kehadiran karyawan

Fungsi : Sebagai bukti kehadiran karyawan

Sumber : File Input kehadiran karyawan

Tujuan : File Data kehadiran

Frekuensi : Sebelum akhir bulan menginput data kehadiran

Jumlah : 1 (satu)

Bentuk : Lihat lampiran C.1

A. Bentuk Dokumen keluaran

Bentuk dokumen keluaran merupakan bentuk dari dokumen-dokumen yang keluar

atau yang di terima pada saat proses berjalan. Dokumen keluaran yang digunakan

pada sistem usulan adalah:

1. Nama Dokumen : Laporan gaji karyawan

Fungsi : Sebagai data gaji karyawan

Sumber : File Data gaji karyawan

Tujuan : File Cetak daftar gaji karyawan

Frekuensi : Setiap akhir bulan membuat laporan gaji karyawan

Jumlah : 1 (satu)

Bentuk : Lihat lampiran D.1

Page 19: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

52

4.1.5 Rancangan Prototype

1. Rancangan Prototype Menu Login

Gambar IV.17 Prototype Menu Login

2. Rancangan Prototype Menu Halaman Utama

Gambar IV.18 Prototype Menu Halaman Utama

Page 20: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

53

3. Rancangan Prototype Menu Data Admin

Gambar IV.19 Prototype Menu Data Admin

4. Rancangan Prototype Menu Tambah Data Admin

Gambar IV.20 Prototype Menu Tambah Data Admin

Page 21: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

54

5. Rancangan Prototype Menu Edit Data Admin

Gambar IV.21 Prototype Menu Edit Data Admin

6. Rancangan Prototype Menu Data Jabatan

Gambar IV.22 Prototype Menu Data Jabatan

Page 22: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

55

7. Rancangan Prototype Menu Tambah Data Jabatan

Gambar IV.23 Prototype Menu Tambah Data Jabatan

8. Rancangan Prototype Menu Edit Data Jabatan

Gambar IV.24 Prototype Menu Edit Data Jabatan

Page 23: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

56

9. Rancangan Prototype Menu Data Golongan

Gambar IV.25 Prototype Menu Data Golongan

10. Rancangan Prototype Menu Tambah Data Golongan

Gambar IV.26 Prototype Menu Tambah Data Golongan

Page 24: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

57

11. Rancangan Prototype Menu Edit Data Golongan

Gambar IV.27 Prototype Menu Edit Data Golongan

12. Rancangan Prototype Menu Data karyawan

Gambar IV.28 Prototype Menu Data Karyawan

Page 25: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

58

13. Rancangan Prototype Menu Tambah Data karyawan

Gambar IV.29 Prototype Menu Tambah Data Karyawan

14. Rancangan Prototype Menu Edit Data karyawan

Gambar IV.30 Prototype Menu Edit Data Karyawan

Page 26: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

59

15. Rancangan Prototype Menu Utama Kehadiran Karyawan

Gambar IV.31 Prototype Menu Utama Kehadiran Karyawan

16. Rancangan Prototype Menu Data Kehadiran Karyawan

Gambar IV.32 Prototype Menu Data Kehadiran Karyawan

Page 27: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

60

17. Rancangan Prototype Menu Tambah Data Kehadiran Karyawan

Gambar IV.33 Prototype Menu Tambah Data Kehadiran Karyawan

18. Rancangan Prototype Menu Edit Data Kehadiran Karyawan

Gambar IV.34 Prototype Menu Edit Data Kehadiran Karyawan

Page 28: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

61

19. Rancangan Prototype Menu Data Gaji Karyawan

Gambar IV.35 Prototype Menu Data Gaji Karyawan

20. Rancangan Prototype Menu Cetak Daftar Gaji Karyawan

Gambar IV.36 Prototype Menu Cetak Daftar Gaji Karyawan

Page 29: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

62

4.2. Perancangan Perangkat Lunak

4.2.1. Entity Relationship Diagram (ERD)

Gambar IV.37 Entity Relationship Diagram (ERD) Sistem Usulan

Page 30: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

63

4.2.2. Logical Record Structure (LRS)

<<apppenggajian>>

golongan

kode_golongan(PK)

nama_golongan

tunjangan_suami_istri

tunjangan_anak

uang_makan

uang_lembur

bpjs

<<apppenggajian>>

karyawan

nik (PK)

nama_karyawan

kode_jabatan (FK)

kode_golongan (FK)

status

jumlah_anak

<<apppenggajian>>

kehadiran

idabsen(PK)

nik(FK)

<<apppenggajian>>

jabatan

kode_jabatan (PK)

nama_jabatan

gapok

tunjangan_jabatan

<<apppenggajian>>

master_gaji

idgaji(PK)

bulan

nik (FK)

masuk

sakit

izin

alpha

lembur

potongan

1

1

1

1

1

1

1..*

1

Gambar IV.38 Logical Record Structure (LRS) Sistem Usulan

4.2.3. Spesifikasi File

Menjelaskan tentang file atau tabel yang terbentuk dari transformasi ERD

sistem penggajian karyawan, File-file ini tersimpan pada <<apppenggajian>>

dengan parameter-parameter sebagai berikut :

1. Spesifikasi File Admin

Nama File : apppenggajian

Akronim : admin

Tipe File : File akses

Akses File : Random

Page 31: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

64

Panjang Record : 97 Karakter

Kunci Field : idadmin

Software : Mysql

Tabel IV.8.

Spesifikasi File Admin

2. Spesifikasi File Jabatan

Nama File : apppenggajian

Akronim : jabatan

Tipe File : File Data

Akses File : Random

Panjang Record : 63 Karakter

Kunci Field : kode_jabatan

Software : Mysql

No Elemen data Nama Field Tipe Size Ket

1. Idadmin idadmin Int 5 Primary Key

2. Username username Varchar 20

3. Password password Varchar 32

4. Nama lengkap namalengkap Varchar 40

Page 32: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

65

Tabel IV.9.

Spesifikasi File Jabatan

3. Spesifikasi File Golongan

Nama File : apppenggajian

Akronim : golongan

Tipe File : File Data

Akses File : Random

Panjang Record : 63 Karakter

Kunci Field : kode_golongan

Software : Mysql

No Elemen data Nama Field Tipe Size Ket

1. Kode Jabatan kode_jabatan Varchar 3 Primary Key

2. Nama Jabatan nama_jabatan Varchar 40

3. Gaji pokok gapok Int 10

4. Tunjangan jabatan tunjangan_jabatan Int 10

Page 33: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

66

Tabel IV.10.

Spesifikasi File Golongan

4. Spesifikasi File kehadiran

Nama File : apppenggajian

Akronim : kehadiran

Tipe File : File akses

Akses File : Random

Panjang Record : 97 Karakter

Kunci Field : id_absen

Software : Mysql

No Elemen data Nama Field Tipe Size Ket

1. Kode Golongan kode_golongan Varchar 3 Primary Key

2. Nama Golongan nama_golongan Varchar 10

3. Tunjangan suami

istri

tunjangan_suami_

istri

Int 10

4. Tunjangan anak Tunjangan_anak Int 10

5. Uang Makan uang_makan Int 10

6. Uang Lembur uang_lembur Int 10

7. Bpjs bpjs Int 10

Page 34: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

67

Tabel IV.11.

Spesifikasi File Kehadiran

5. Spesifikasi File Karyawan

Nama File : apppenggajian

Akronim : karyawan

Tipe File : File laporan

Akses File : Random

Panjang Record : 61 Karakter

Kunci Field : nik

Software : Mysql

No Elemen data Nama Field Tipe Size Ket

1. Idabsen Id_absen Int 10 Primary Key

2. Nomor Induk

Karyawan

nik Varchar 20

Page 35: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

68

Tabel IV.12.

Spesifikasi File Karyawan

6. Spesifikasi File Master Gaji

Nama File : apppenggajian

Akronim : master_gaji

Tipe File : File Laporan

Akses File : Random

Panjang Record : 75 Karakter

Kunci Field : id_gaji

Software : Mysql

No Elemen data Nama Field Tipe Size Ket

1. Nomor Induk

karyawan

nik Varchar 20 Primary Key

2. Nama karyawan nama_karyawan Varchar 40

3. Kode Jabatan kode_jabatan Varchar 3 Foreign key

4. Kode Golongan kode_golongan Varchar 3 Foreign key

5. Status status Varchar 15

6. Jumlah Anak jumlah_anak int 2

Page 36: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

69

Tabel IV.13.

Spesifikasi File Master Gaji

No Elemen data Nama Field Tipe Size Ket

1. Id Gaji Id_gaji Int 10 Primary key

2. Bulan bulan Varchar 20

3. Nomor Induk

Karyawan

nik Varchar 2

0

4. Masuk masuk Int 5

5. Sakit sakit Int 5

6. Izin izin Int 5

7. Alpha alpha Int 5

8. Lembur lembur Int 5

9. Potongan Pph21 Potonganpph21 Int 10

Page 37: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

70

4.2.4. Class Diagram

Kehadiran

Id_absen int (10)

Nik Varchar (20)

Input()

Cetak()

Jabatan

Kode_Jabatan Varchar(3)

Nama_Jabatan Varchar(40)

Gapok Int(10)

Tunjangan_Jabatan Int(10)

Tambah()

Edit()

Hapus()

Master_Gaji

id_gaji int (10)

Bulan Varchar(20)

Nik Varchar(20)

Masuk Int(5)

Sakit Int(5)

Izin Int(5)

Alpha Int(5)

Lembur Int(5)

Potongan Int(10)

Input()

Cetak()

Karyawan

Nik Varchar(20)

Nama_Karyawan

Varchar(40)

Kode_Jabatan Varchar(3)

Kode_Golongan Varchar(3

Status Varchar(15)

Jumlah_anak Int(2)

Tambah()

Edit()

Hapus()

Golongan

Kode_Golongan Verchar(3)

Nama_Golongan

Varchar(10)

Tunjangan_Suami_Istri

Int(10)

Tunjangan_Anak Int(10)

Uang_Makan Int(10)

Uang_Lembur Int(10)

Bpjs Int(10)

Tambah()

Edit()

Hapus()

1

1

1

M

1

1

1

M

Gambar IV.39 Class Diagram Sistem Usulan

Page 38: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

71

4.2.5. Sequence Diagram

admin

Form login Data BaseHalaman_utamaController

1.menampilkan form login

2. mengisi level username & password

10. kembali ke halaman utama11.logout

6.cek data login

8.tampilan Halaman Utama

7. berhasil login

9.kelola Data Penggajian

5.Ambil Data

3.validasi data

4.Pesan Kesalahan

Gambar IV.40 Sequence Diagram Sistem Usulan

4.2.6. Spesifikasi Hardware dan Software

1. Spesifikasi Hardware

1) CPU

(a) Processor Intel dual core,1.8 Ghz

(b) RAM 2 GB

(c) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Printer laser jet

Page 39: BAB IV PERANCANGAN SISTEM USULAN · Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar ... uang lembur dan askes Klik Simpan Menampilkan Halaman ... Admin Sistem

72

5) Monitor dengan resolusi layar minimum 1024x768

6) Koneksi internet dengan kecepatan 5 Mbps.

2. Spesifikasi Software

1. Sistem operasi yang digunakan Microsoft Windows atau Linux

2. Aplikasi bundle web server Xampp yang terdiri dari beberapa

komponen, diantaranya:

(a) Aplikasi PHP Server v5

(b) Aplikasi MySQL Server v5

(c) Aplikasi phpMyAdmin v3

3. Aplikasi Web lihat Mozilla Firefox, Google Chrome.

4.3. Implementasi

4.3.1. Jadwal Implementasi

Dalam usaha membangun sebuah sistem, diperlukan tahapan-tahapan tepat

agar sistem yang dirancang dapat dibuat dengan semestinya. Adapun rincian

kegiatannya akan diuraikan ke dalam table berikut ini:

Tabel IV.14.

Jadwal Implementasi

No KEGIATAN

WAKTU

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

5 Pembuatan Perancangan

& Tes Aplikasi Program

6 Tes Sistem