• Tidak ada hasil yang ditemukan

BAB IV HASIL DAN PEMBAHASAN

4.5 Perancangan Sistem

Perancangan sistem sangat penting dalam membangun sebuah aplikasi karena proses ini menggambarkan bagaimana suatu sistem dibentuk mulai dari penggambaran perencanaan sampai pada tahapan pembuatan fungsi yang berguna bagi jalannya sebuah aplikasi. Perancangan sistem bertujuan untuk mengetahui apakah sistem yang akan dibangun dapat memenuhi kebutuhan pengguna. Pada penelitian ini, perancangan sistem menggunakan diagram UML (Unified Modeling Language) meliputi use

case diagram, activity diagram, class diagram dan sequence diagram.

Pengguna Sistem Keterangan

Admin

Administrator merupakan

user yang menggunakan

halaman administrator dari aplikasi web ini, yang memiliki hak akses penuh untuk mengakses semua layanan menu Website.

Karyawan

Karyawan merupakan user yang mengakses halaman karyawan dari web aplikasi ini dan mempunyai

kewenangan untuk

melakukan pencetakan slip gaji.

4.5.1 Perancangan Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang

diharapkan dari sebuah sistem. Sebuah sistem mempresentasikan sebuah interaksi antara aktor dengan sistem. Pada tahap ini akan dijelaskan interaksi yang dilakukan oleh aktor-aktor yang terdapat pada sistem yang dirancang.

Use case diagram pada aplikasi ini terdiri dari dua aktor

yaitu, administrator, dan user. Setiap aktor memiliki peran yang berbeda pada penggunaan aplikasi ini. Use case diagram ditunjukkan pada Gambar

Gambar 4.3: Use Case Diagram Admin Berikut tabel skenario Use Case Diagram Admin:

Nama Use Case Use Case Admin

Aktor Utama Admin

Deskripsi Use case ini mendiskripsikan tentang apasaja yang dapat dilakukan oleh admin yang mengelola website penggajian knk koffee resources ini.

Kondisi Awal Admin diharuskan untuk mengisikan username dan password untuk login ke beranda admin.

Urutan langkah kegiatan admin.

Aksi Aktor Respon Sistem

login ke sistem. atas username dan password yang

dimasukkan oleh Admin berdasarkan database. Jika username dan password tidak cocok, maka akan muncul peringatan untuk login kembali.

3. Jika username dan password cocok, maka sistem akan memproses menampilkan beranda admin.

4. Kemudian sistem menampilkan menu – menu yang ada didalam halaman Admin.. 5. Jika admin memilih

form input master kartap.

6. Sistem akan menampilkan form input master kartap.

7. Jika admin memilih form input absensi kartap.

8. Sistem akan menampilkan form input absensi kartap.

9. Jika admin memilih form input pinjaman.

10. Sistem akan menampilkan form input pinjaman. 11. Jika admin memilih

form input gaji kartap.

12. Sistem akan menampilkan form input gaji kartap. 13. Jika admin memilih

form input THR kartap.

14. Sistem akan menampilkan form input THR kartap.

15. Jika admin memilih form input master magang.

16. Sistem akan menampilkan form input master kartap.

17. Jika admin memilih form input absensi magang.

18. Sistem akan menampilkan form input absensi

magang. 19. Jika admin memilih

form input gaji magang.

20. Sistem akan menampilkan form input gaji magang.

21. Jika admin memilih laporan.

22. Sistem akan menampilkan laporan karyawan.

Langkah Alternatif Setiap admin melakukan kesalahan maka akan ada pesan peringatan dan menampilkan pesan error.

Gambar 4.4 Use Case Diagram Kartap Berikut tabel skenario Use Case Diagram Kartap:

Nama Use Case Use Case Kartap

Aktor Utama Kartap

Deskripsi Use case ini mendiskripsikan tentang apasaja yang dapat dilakukan oleh kartap sebagai user website penggajian knk koffee resources.

Kondisi Awal Kartap diharuskan untuk mengisikan username dan password untuk login ke beranda kartap.

Urutan langkah kegiatan kartap.

Aksi Aktor Respon Sistem

1. Kartap melakukan login ke sistem.

2. Sistem melakukan validasi atas username dan

password yang dimasukkan oleh kartap berdasarkan database. Jika username dan password tidak cocok, maka akan muncul

peringatan untuk login kembali.

3. Jika username dan password cocok, maka sistem akan memproses menampilkan beranda kartap.

4. Kemudian sistem

menampilkan menu – menu yang ada didalam beranda kartap.

5. Jika kartap masuk ke form slip gaji.

6. Sistem akan menampilkan form slip gaji.

7. Jika kartap masuk ke form slip gaji

kemudian klik tampilkan pdf.

8. Sistem akan menampilkan slip gaji kartap.

Langkah Alternatif Setiap kartap melakukan kesalahan maka akan ada pesan peringatan dan menampilkan dimana letak kesalahan terjadi.

Gambar 4.5 Use Case Diagram Magang Berikut tabel skenario Use Case Diagram Magang:

Nama Use Case Use Case Magang

Aktor Utama Magang

Deskripsi

Use case ini mendiskripsikan tentang apasaja yang dapat dilakukan oleh magang sebagai user website penggajian knk koffee resources.

Kondisi Awal

Magang diharuskan untuk mengisikan username dan password untuk login ke beranda kartap.

Urutan langkah kegiatan magang.

Aksi Aktor Respon Sistem

1. Magang melakukan login ke sistem.

2. Sistem melakukan validasi atas username dan

password yang dimasukkan oleh magang berdasarkan database. Jika username dan password tidak cocok, maka akan muncul peringatan untuk login kembali. 3. Jika username dan

password cocok, maka sistem akan memproses menampilkan beranda magang.

menampilkan menu – menu yang ada didalam beranda magang.

5. Jika magang masuk ke form slip gaji.

6. Sistem akan menampilkan form slip gaji.

7. Jika magang masuk ke form slip gaji kemudian klik tampilkan pdf.

8. Sistem akan menampilkan slip gaji magang.

Langkah Alternatif Setiap magang melakukan kesalahan maka akan ada pesan peringatan dan menampilkan dimana letak kesalahan terjadi.

4.5.2 Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas

dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir.

Activity diagram juga dapat menggambarkan proses paralel

yang mungkin terjadi pada beberapa eksekusi. Activity diagram merupakan pengembangan dari use case diagram. Activity diagram menunjukkan alur kerja dari aktivitas atau kegiatan yang dilakukan didalam use case diagram.

Activity diagram ini terdapat swimline yang berfungsi sebagai

garis pembatas antara aktivitas satu dengan aktivitas lainnya. Berkaitan dengan use case diagram diatas, beberapa activity diagram yang dapat digambarkan antara lain:

a. Activity Diagram Login Admin

Gambar 4.6 Activity Diagram Login Admin

b. Activity Diagram Input Master Kartap

c. Activity Diagram Input Absensi Kartap

Gambar 4.8 Activity Diagram Input Absensi Kartap

d. Activity Diagram Input Pinjaman Kartap

e. Activity Diagram Input Gaji Kartap

Gambar 4.10 Activity Diagram Input Gaji Kartap

f. Activity Diagram Input THR Kartap

g. Activity Diagram Input Master Magang

Gambar 4.12 Activity Diagram Input Master Magang

h. Activity Diagram Input Absensi Magang

i. Activity Diagram Input Gaji Magang

Gambar 4.14 Activity Diagram Input Gaji Magang

j. Activity Diagram Laporan

k. Activity Diagram Login Kartap

Gambar 4.16 Activity Diagram Login Kartap

l. Activity Diagram Cetak Slip Gaji Kartap

m. Activity Diagram Login Magang

Gambar 4.18 Activity Diagram Login Magang

n. Activity Diagram Cetak Slip Gaji Magang

4.5.3 Sequence Diagram

Sequence diagram adalah diagram yang menunjukkan

aliran kerja secara terperinci dari aktivitas diagram yang dilakukan sesuai dengan urutan waktu yang terjadi pertama kali dan kejadian yang terjadi selanjutnya. Dalam diagram ini tidak terlepas kemungkinan akan bertambahnya jumlah class yang ada. Sequence diagram memperlihatkan tahap demi tahap apa yang seharusnya terjadi untuk menghasilkan sesuatu didalam use case. Proses-proses yang terjadi didalamnya dijabarkan sebagai berikut:

a. Sequence Diagram Login Admin

b. Sequence Diagram Input Master Kartap

c. Sequence Diagram Input Absensi Kartap

d. Sequence Diagram Input Pinjaman Kartap

e. Sequence Diagram Input Gaji Kartap

f. Sequence Diagram Input THR Kartap

g. Sequence Diagram Input Master Magang

Gambar 4.26 Sequence Diagram Input Master Magang

h. Sequence Diagram Input Absensi Magang

i. Sequence Diagram Input Gaji Magang

j. Sequence Diagram Laporan

k. Sequence Diagram Login Kartap

l. Sequence Diagram Cetak Slip Gaji Kartap

m. Sequence Diagram Login Magang

n. Sequence Diagram Login Magang

Gambar 4.33 Sequence Diagram Cetak Slip Gaji Magang

4.5.4 Perancangan Class Diagram

Class diagram didapat berdasarkan pengembangan dari sequence diagram. Class diagram merupakan diagram yang

digunakan untuk menampilkan kelas-kelas yang ada dalam sistem yang berupa objek yang sedang dikembangkan dan dari kelas yang satu ke kelas yang lain yang mempunyai relasi. Class diagram terdiri dari nama kelas, atribut dan operasi dari kelas tersebut. Berikut ini Class Diagramnya yang dapat dilihat pada gambar berikut:

Gambar 4.34 Class Diagram

4.6 Perancangan Basis Data

Dokumen terkait