BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · sebagai syarat untuk penggajian Pre-conditions...
34
42 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software Sistem yang akan dibuat tujuan untuk mempermudah dalam pemengolahan data absensi dan penggajian karyawan yang selama ini masih dilakukkan secara manual yang membutuhkan waktu yang lebih lama dan prosesnya kurang efektif. Sistem ini juga akan memperbaiki proses absens dan perhitungan penggajian yang selama ini menggunakan form tertulis, yang sewaktu – waktu bisa hilang atau rusak, jika menggunakan sistem database maka masalah ini dapat ditangani karena sistem database dapat diduplikasi sehingga mengurangi resiko kehilangan dan kesalahan pada data. 1. Use Case Diagram A. Use Case Diagram
Transcript of BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · sebagai syarat untuk penggajian Pre-conditions...
42
BAB IV
RANCANGAN SISTEM DAN PROGRAM USULAN
4.1. Analisa Kebutuhan Software
Sistem yang akan dibuat tujuan untuk mempermudah dalam
pemengolahan data absensi dan penggajian karyawan yang selama ini masih
dilakukkan secara manual yang membutuhkan waktu yang lebih lama dan
prosesnya kurang efektif. Sistem ini juga akan memperbaiki proses absens dan
perhitungan penggajian yang selama ini menggunakan form tertulis, yang sewaktu
– waktu bisa hilang atau rusak, jika menggunakan sistem database maka masalah
ini dapat ditangani karena sistem database dapat diduplikasi sehingga mengurangi
resiko kehilangan dan kesalahan pada data.
1. Use Case Diagram
A. Use Case Diagram
43
Sumber : Dokumen pribadi penulis
Gambar IV.1. Use Case Karyawan
Tabel IV.1. Deskripsi Use Case Karyawan
Use Case Name Permintaan
Requirements A,B,C,D
Goal Karyawan dapat melakukan absensi
sebagai syarat untuk penggajian
Pre-conditions Karyawan harus mengetahui alamat
web dan telah mempunyai akun
Post-conditions
Failed end conditions
Karyawan melakukan absensi,
pengajuan permohonan tidak masuk
kerja dan cuti melalui web
Karyawan tidak bisa melakukan
absensi, pengajuan permohonan
tidak masuk kerja, dan cuti
Primary actors Karyawan
Main flow /Basic Path 1. Karyawan mendapatkan akun
untuk dapat melakukan absensi
2. Karyawan dapat melakukan
absensi
3. Karyawan dapat mengajukan
ijin tidak masuk kerja dan cuti
4. Karyawan menerima slip gaji
B. Use Case Diagram Admin
Deskripsi Use Case Diagram Admin
Tabel IV.2. Deskripsi Use Case Diagram Admin
Use Case Name Admin
Requirements F,G,H,I,J,K,L,M
Goal Admin dapat megelola dan memproses
data absensi karyawan untuk
penggajian dan pembuatan laporan.
Pre-conditions Admin telah login
Post-conditions
Data absensi dan data tidak masuk kerja
karyawan dapat diproses dan di simpan.
44
Failed end conditions Tidak dapat memproses data asbensi
karyawan, dan data penggajian
karyawan serta pembuatan laporan.
Primary actors HRD
Main flow /Baisc Path 1. Admin membuat akun untuk
Karyawan . 2. Admin memproses data tidak masuk
kerja karyawan 3. Admin memproses data cuti
karyawan 4. Admin memproses data absensi
karyawan
5. Admin memproses gaji karyawan 6. Admin membuat slip gaji
7. Admin membuat laporan absensi
karyawan 8. Admin membuat laporan penggajian
karyawan
2. Activity Diagram Sistem Usulan
Activity Diagram dalam sistem usulan ini hanya mencakup proses absensi
karyawan (user), dan proses penghitungan penggajian karyawan oleh HRD
(admin).
a. Activity Diagram Absensi karyawan
Karyawan Sistem Aplikasi
Start
Pegawai datang / pegawai pulangTampilkan Form
Absensi Karyawan
Melakukan Absensi datang /
pulang
Simpan data absensi
masuk / pulang
karyawan
End
45
Sumber : Dokumen pribadi penulis
Gambar IV.2. Activity Diagram Absensi Karyawan
b. Activity Diagram proses penggajian karyawan
Sumber : Dokumen pribadi penulis
Gambar IV.3. Activity Diagram Penggajian Karyawan
4.2 Desain
Pada tahapan ini penulis akan menjelaskan tentang desain database, desain
software architecture dan desain interface dari sistem usulan yang sedang dibuat.
46
4.2.1. Database
Dalam spesifikasi file yang terdapat pada sistem usulan sistem absensi
dan penggajian karyawan pada Dhennys Collection, yang menjelaskan beberapa
spesifikasi yang digunakan dan berkaitan dengan sistem usulan yang dibuat ini
sebagai berikut:
1. Entity Relationship Diagram
Sumber : Dokumen pribadi penulis
Gambar IV.4. Entity Relationship Diagram
47
2. Logical Relationship Structure (LRS)
tbl_divisi
kode_divisi
nama_divisi
tbl_karyawan
nik
no_ktp
no_npwp
nama
tempat_lahir
tanggal_lahir
jenis_kelamin
agama
alamat
nomor_telpon
pendidikan
status_pernikahan
nama_istri_suami
jumlah_anak
kode_divisi
kode_jabatan
gaji_pokok
tunjangan
lain_lain
uang_lembur
potongan_tidak_masuk_kerja
foto
qr_code
no_rekening
tanggal_bekerja
password
hak_akses
jumlah_cuti
aktif
dibuat_oleh
tanggal_dibuat
diubah_oleh
tanggal_diubah
kode_divisi
tbl_jabatan
kode_jabatan
nama_jabatan
kode_jabatan
tbl_absensi
kode_absensi
tanggal_absensi
nik
jam_masuk
jam_keluar
ket_masuk
ket_pulang
status
keterangan_absensi
keterangan_lembur
nik
tbl_pengajuan_tidak_masuk_kerja
kode_pengajuan
tanggal_pengajuan
nik
dari_tanggal
sampai_tanggal
keterangan
alasan
dokumen
status
dibuat_oleh
tanggal_dibuat
diproses_oleh
tbl_penggajian
kode_penggajian
bulan
tahun
tanggal_penggajian
nik
jumlah_hari_kerja
jumlah_masuk_kerja
ijin_diterima
ijin_ditolak
sakit
cuti
lembur
terlambat
potongan
total_gaji
status_cetak
nik
Sumber : Dokumen pribadi penulis
Gambar IV.5. Logical Relationship Structure (LRS)
3. Spesifikasi File
a. Spesifikasi Tabel tbl_divisi
Nama Database : absensidanpenggajian
Nama File : tabel tbl_divisi
Akronim : tbl_divisi.myd
Kunci Field : kode_divisi
48
Tabel IV.3. Spesifikasi Tabel tbl_divisi
No
.
Elemen Data Nama Field Tipe Size Keterangan
1. kode_divisi kode_divisi varchar 7 Primary Key
2. nama_divisi nama_divisi varchar 50
b. Spesifikasi Tabel tbl_jabatan
Nama Database : absensidanpenggajian
Nama File : tabel tbl_jabatan
Akronim : tbl_jabatan.myd
Kunci Field : kode_jabatan
Tabel IV.4. Spesifikasi Tabel tbl_jabatan
No
.
Elemen Data Nama Field Tipe Size Keterangan
1. kode_jabatan Kode_jabatan integer 7 Primary Key
2. nama Jabatan nama_jabatan varchar 50
c. Spesifikasi Tabel tbl_karyawan
Nama Database : absensidanpenggajian
Nama File : tabel tbl_karyawan
Akronim : tbl_karyawan.myd
Kunci Field : nik
49
Tabel IV.5. Spesifikasi Tabel tbl_karyawan
No
.
Elemen Data Nama Field Tipe Size Keterangan
1. NIK Nik varchar 15 Primary Key
2. No_KTP no_ktp varchar 20
3. No_NPWP no_npwp varchar 20
4. Nama Nama varchar 50
5. Tempat_lahir tempat_lahir varchar 50
6. Tanggal_lahir tanggal_lahir date 10
7. Jenis_kelamin jenis_kelamin varchar 10
8. agama Agama varchar 10
9. Alamat Alamat text
10. Nomor_telpon nomor_telpon varchar 12
11. Pendidikan Pendidikan varchar 15
12. Status_pernikaha
n
status_pernikahan varchar 20
13. Nama_istri_suam
i
nama_istri_suami varchar 50
14. Jumlah_anak jumlah_anak int 2
15. Kode_divis kode_divisi varchar 7
16. Email Email varchar 50
17. Gaji_pokok gaji_pokok double 8
18. Tunjangan Tunjangan double 8
50
19. Lain_lain lain_lain double 8
20. Uang_lembur uang_lembur double 8
21. Potongan_tidak_
masuk_kerja
potongan_tidak_
masuk_kerja
double 6
22. Foto Foto varchar 20
23. Qr_code qr_code varchar 100
24. No_rekening no_rekening varchar 20
25. Tanggal_bekerja tanggal_bekerja date 10
26. Password Password text
27. Hak_akses hak_akses varchar 10
28. Jumlah_cuti jumlah_cuti int 2
29. Aktif Aktif varchar 1
30. Dibuat_oleh dibuat_oleh varchar 15
31. Tanggal_dibuat tanggal_dibuat datetime 20
32. diubah_oleh diubah_oleh varchar 15
33. Tanggal_diubah tanggal_diubah datetime 20
d. Spesifikasi Tabel tbl_absensi
Nama Database : absensidanpenggajian
Nama File : tabel tbl_absensi
Akronim : tbl_absensi.myd
Kunci Field : kode_absensi
51
Tabel IV.6. Spesifikasi Tabel tbl_absensi
No
.
Elemen Data Nama Field Tipe Size Keterangan
1. Kode_absensi kode_absensi varchar 10 Primary Key
2. Tanggal_absensi tanggal_absensi date 10
3. Nik Nik varcahr 15
4. Jam_masuk jam_masuk time 10
5. Jam_keluar jam_keluar time 10
6. Ket_masuk ket_masuk varchar 100
7. Ket_pulang ket_pulang varchar 100
8. Status Status varchar 50
9. Keterangan_abse
nsi
keterangan_absen
si
varchar 30
10. Keterangan_lemb
ur
keterangan_lemb
ur
varchar 20
e. Spesifikasi Tabel tbl_pengajuan_tidak_masuk_kerja
Nama Database : absensidanpenggajian
Nama File : tabel tbl_pengajuan_tidak_masuk_kerja
Akronim : tbl_pengajuan_tidak_masuk_kerja.myd
Kunci Field : kode_pengajuan
52
Tabel IV.7. Spesifikasi Tabel tbl_pengajuan_tidak_masuk_kerja
No
.
Elemen Data Nama Field Tipe Size Keterangan
1. Kode_pengajuan kode_pengajuan varchar 10 Primary Key
2. Tanggal_pengajua
n
tanggal_pengaju
an
date 10
3. Nik Nik varchar 15
4. Dari_tanggal dari_tanggal date 10
5. Sampai_tanggal sampai_tanggal date 10
6. Keterangan Keterangan varchar 50
7. Alas an Alas an text
8. Dokumen Dokumen varchar 100
9. Status Status varchar 1
10. Dibuat_oleh dibuat_oleh varchar 15
11. Tanggal_dibuat tanggal_dibuat datetime 20
12. Diproses_oleh diproses_oleh varchar 15
13. Tanggal_diproses tanggal_diproses datetime 20
f. Spesifikasi Tabel tbl_penggajian
Nama Database : absensidanpenggajian
Nama File : table tbl_penggajian
Akronim : tbl_penggajian.myd
Kunci Field : kode_penggajian
53
Tabel IV.8. Spesifikasi Tabel tbl_penggajian
No
.
Elemen Data Nama Field Tipe Size Keterangan
1. Kode_penggajian kode_penggajian varchar 20 Primary
Key
2. bulan Bulan varchar 20
3. tahun Tahun integer 4
4. Tanggal_penggajian tanggal_penggajia
n
date 10
5. nik Nik varchar 15
6. Jumlah_hari_kerja jumlah_hari_kerja integer 3
7. Jumlah_masuk_kerj
a
jumlah_masuk_ker
ja
integer 3
8. Ijin_diterima ijin_diterima integer 2
9. Ijin_ditolak ijin_ditolak integer 3
10. Sakit Sakit integer 2
11. Cuti Cuti integer 2
12. Lembur Lembur time 10
13. Terlambat Terlambat time 10
14. Potongan Potongan double 6
15. Total_gaji total_gaji double 8
16. Status_cetak status_cetak varchar 1
54
4.2.2 Software Architecture
Component Diagram dalam sistem usulan ini menggambarkan bagaimana
sistem absensi dan penggajian karyawan ini dapat di petakan secara fisik. Berikut
gambar dari component diagram sistem usulan Aplikasi absensi dan penggajian
karyawan Pada Dhennys Collection .
Page Web Server
com + component environment
Component1business logic
MySQL Database
Gambar IV.6. Component Diagram
4.2.3 User Interface
Sebuah website yang dinamis biasanya memiliki dua jenis tampilan
website yaitu halam frontend dan halaman backend. Halaman frontend adalah
halaman utama website yang dapat diakses oleh banyak pengunjung. Sedangkan
halaman backend adalah sebagai halaman control yang mengatur conten dari
halaman utama yang dapat diakses oleh siapa saja yang sudah di beri izin. Berikut
ini desain program website sistem absensi dan penggajian karyawan pada
Dhennys Collection.
55
1. Halama Login Admistrator dan User
Halaman Login Admistrator dan User memerluka hak akses berupa
Username dan Password yang sudah terdaftar di dalamnya
Sumber : Dokumen pribadi penulis
Gambar IV.7. Tampilan Halaman Login Admin dan User
2. Halaman Beranda Admin
Pada halaman beranda admin ini, admin bisa mengelola data untuk proses
absensi dan penggajian karyawan, seperti master divisi, master jabatan,
master karyawan, pengajuan tidak masuk, pengajuan cuti karyawan,
penggajian karyawan, dan laporan.
56
Sumber : Dokumen pribadi penulis
Gambar IV.8. Tampilan Halaman Beranda Admin
3. Halaman Beranda User
Pada Halaman ini user dapat melakukan proses pengajuan tidak masuk kerja
seperti ijin tidak masuk atau ijin sakit, tanpa harus memberitahukan kepada
atasan atau bagian HRD.
57
Sumber : Dokumen pribadi penulis
Gambar 4.9. Tampilan Halaman Beranda User
4.3 Code Generation
Halaman Login <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<title>DHENNYS COLLECTION</title>
<!-- Favicon-->
<link rel="icon" href="http://localhost/absen/assets/template/images/icon.png" type="image/x-
icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext"
rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"
type="text/css">
<!-- Materialize Css -->
<link href="http://localhost/absen/assets/template/plugins/materialize/css/materialize.min.css"
rel="stylesheet">
<link href="http://localhost/absen/assets/template/plugins/materialize/css/materializecss-icon.css"
rel="stylesheet">
</head>
<body class="indigo">
<div class="section"></div>
<main>
<center>
<div class="section"></div>
<div class="section"></div>
<div class="container">
<div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px
48px; border: 1px solid #EEE; ">
<form class="col s12" method="post" name="myForm" id="myForm" onsubmit="return
validateForm()" action="http://localhost/absen/cLogin/Login" >
<div class="row">
<div class="input-field col s12 center">
<img src="http://localhost/absen/assets/template/images/icon_login.png " alt=""
class="responsive-img valign profile-image-login" >
<p class="center login-form-text">Login</p>
</div>
</div>
<div class='row'>
<div class='input-field col s12'>
<i class="mdi-social-person-outline prefix"></i>
<input class='validate' type='text' name='nik' id='nik' />
<label for='nik'>NIK</label>
</div>
58
</div>
<div class='row'>
<div class='input-field col s12'>
<i class="mdi-action-lock-outline prefix"></i>
<input class='validate' type='password' name='password' id='password' />
<label for='password'>Password</label>
</div>
</div>
<center>
<div class='row'>
<button type='submit' name='btn_login' class='col s12 btn btn-large waves-effect blue darken-
4'>Login</button>
</div>
</center>
<br />
</form>
</div>
</div>
<div class="section"></div>
<div class="section"></div>
</center>
</main>
<script src="http://localhost/absen/assets/template/plugins/jquery/jquery-2.2.3.min.js"></script>
<script
src="http://localhost/absen/assets/template/plugins/materialize/js/materialize.min.js"></script>
<script type="text/javascript">
function validateForm() {
var url;
var x = document.forms["myForm"]["nik"].value;
var y = document.forms["myForm"]["password"].value;
if (x == "") {
alert("Nik Harus Diisi");
return false;
}
if (y == "") {
alert("Password Harus Diisi");
return false;
}
}
</script>
</body>
</html>
Menu Utama <!DOCTYPE html>
<html>
<!--Akses Menu Untuk Admin-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
59
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<title>DHENNYS COLLECTION</title>
<!-- Favicon-->
<link rel="icon" href="http://localhost/absen/assets/template/images/icon.png" type="image/x-
icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext"
rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"
type="text/css">
<!-- Bootstrap Core Css -->
<link href="http://localhost/absen/assets/template/plugins/bootstrap/css/bootstrap.css"
rel="stylesheet">
<!-- Waves Effect Css -->
<link href="http://localhost/absen/assets/template/plugins/node-waves/waves.css" rel="stylesheet"
/>
<!-- Animation Css -->
<link href="http://localhost/absen/assets/template/plugins/animate-css/animate.css"
rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="http://localhost/absen/assets/template/plugins/morrisjs/morris.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="http://localhost/absen/assets/template/css/style.css" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="http://localhost/absen/assets/template/css/themes/all-themes.css" rel="stylesheet" />
</head>
<body class="theme-indigo">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
60
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="javascript:void(0);" class="bars"></a>
<a class="navbar-brand" href="">DHENNYS COLLECTION</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Call Search -->
<li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-
icons">search</i></a></li>
<!-- #END# Call Search -->
</ul>
</div>
</div>
</nav>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="user-info">
<div class="image">
<img src="http://localhost/absen/upload/karyawan/123456789.jpg" width="48" height="48"
alt="User" />
</div>
<div class="info-container">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">BUDI</div>
<div class="email">[email protected]</div>
<div class="btn-group user-helper-dropdown">
<i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="true">keyboard_arrow_down</i>
<ul class="dropdown-menu pull-right">
<li><a href="http://localhost/absen/cLogin/logout"><i class="material-icons">input</i>Sign
Out</a></li>
</ul>
</div>
</div>
</div>
<!-- #User Info -->
<!-- Menu -->
<div class="menu">
<ul class="list">
61
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="http://localhost/absen/cDashboard">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">widgets</i>
<span>Master</span>
</a>
<ul class="ml-menu">
<li>
<a href="http://localhost/absen/cMasterDivisi">Divisi</a>
</li>
<li>
<a href="http://localhost/absen/cMasterJabatan">Jabatan</a>
</li>
<li>
<a href="http://localhost/absen/cMasterKaryawan">Karyawan</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">swap_calls</i>
<span>Absensi</span>
</a>
<ul class="ml-menu">
<li>
<a href="http://localhost/absen/cDataAbsensiTidakSesuaiJadwal">Data Absensi Telat / Pulang
Awal</a>
</li>
<li>
<a href="http://localhost/absen/cDataLemburKaryawan">Data Lembur Karyawan</a>
</li>
<li>
<a href="http://localhost/absen/cDataPengajuanTidakMasukKerja">Pengajuan Tidak Masuk
Kerja</a>
</li>
<li>
<a href="http://localhost/absen/cDataPengajuanCuti">Pengajuan Cuti Kerja</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">assignment</i>
<span>Penggajian</span>
</a>
<ul class="ml-menu">
<li>
<a href="http://localhost/absen/cPenggajianKaryawan">Penggajian Karyawan</a>
</li>
</ul>
62
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">view_list</i>
<span>Laporan</span>
</a>
<ul class="ml-menu">
<li>
<a href="http://localhost/absen/cLaporanAbsensi">Laporan Absensi</a>
</li>
<li>
<a href="http://localhost/absen/cLaporanPenggajian">Laporan Penggajian</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->
<!-- Footer -->
<div class="legal">
<div class="copyright">
© 2018.
</div>
<div class="version">
<a>DHENNYS COLLECTION</a>
</div>
</div>
<!-- #Footer -->
</aside>
<!-- #END# Left Sidebar -->
</section>
<section class="content">
<div class="container-fluid">
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><h1>SISTEM INFORMASI ABSENSI DAN PENGGAJIAN</h1></center>
<center><h1>PADA</h1></center>
<center><h1>DHENNYS COLLECTION</h1></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
63
<br>
</div>
</div>
</div>
</div>
<!-- #END# Basic Examples -->
</div>
</section>
<!-- Jquery Core Js -->
<script src="http://localhost/absen/assets/template/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="http://localhost/absen/assets/template/plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/bootstrap-select/js/bootstrap-
select.js"></script>
<!-- Slimscroll Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/jquery-
slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/jquery-
countto/jquery.countTo.js"></script>
<!-- Morris Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/raphael/raphael.min.js"></script>
<script src="http://localhost/absen/assets/template/plugins/morrisjs/morris.js"></script>
<!-- ChartJs -->
<script src="http://localhost/absen/assets/template/plugins/chartjs/Chart.bundle.js"></script>
<!-- Flot Charts Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/flot-charts/jquery.flot.js"></script>
<script src="http://localhost/absen/assets/template/plugins/flot-
charts/jquery.flot.resize.js"></script>
<script src="http://localhost/absen/assets/template/plugins/flot-charts/jquery.flot.pie.js"></script>
<script src="http://localhost/absen/assets/template/plugins/flot-
charts/jquery.flot.categories.js"></script>
<script src="http://localhost/absen/assets/template/plugins/flot-charts/jquery.flot.time.js"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/jquery-
sparkline/jquery.sparkline.js"></script>
<!-- Custom Js -->
<script src="http://localhost/absen/assets/template/js/admin.js"></script>
<script src="http://localhost/absen/assets/template/js/pages/index.js"></script>
<!-- Demo Js -->
<script src="http://localhost/absen/assets/template/js/demo.js"></script>
</body>
64
</html> <!--Akses Menu Untuk USER-->
</html>
Absensi Karyawan <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Title-->
<title>DHENNYS COLLECTION</title>
<!-- Waves Effect Css -->
<link href="http://localhost/absen/assets/template/plugins/node-waves/waves.css" rel="stylesheet"
/>
<link href="http://localhost/absen/assets/template/plugins/qr-scanner/boostrap-
4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/absen/assets/template/plugins/qr-scanner/boostrap-
4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/absen/assets/template/plugins/qr-scanner/css/style.css"
rel="stylesheet">
</head>
<body onload="submit()">
<div class="container" id="QR-Code">
<div class="card" style="">
<div class="card-header" style="background-color:#3f51b5; ">
<center>
<span style="color:White; font-family:arial; font-family:Times New Roman; font-size:150%;
">ABSENSI KARYAWAN</span>
</br>
<span style="color:White; font-family:arial; font-family:Times New Roman; font-
size:130%;">DHENNYS COLLECTION</span>
</center>
</div>
<div class="card-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<center>
<label style="color:black; font-family:arial; font-family:Times New Roman; font-size:150%;"
id="Tanggal"></label>
<div class="well" style="position: relative;display: inline-block;">
<canvas width="320px" height="540px" id="webcodecam-canvas"></canvas>
<div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
</div>
<label style="color:black; font-family:arial; font-family:Times New Roman; font-size:150%;"
id="Jam"></label>
</center>
</div>
<div class="col-xs-6 col-sm-4">
65
<label class="control-label">FOTO</label>
<img id="x" src="upload/ImageDefault.png" class="img-thumbnail">
</div>
<div class="col-xs-6 col-sm-4">
<form action="#" id="form" name="form" class="form-horizontal" method="POST">
<label class="control-label">NIK</label>
<div class="form-group">
<input type="text" id="NIK" name="NIK" class="form-control" placeholder="NIK"
readonly="readonly"></input>
<span class="help-block"></span>
</div>
<label class="control-label">NAMA</label>
<div class="form-group">
<input type="text" name="Nama" class="form-control" placeholder="Nama Karyawan"
readonly="readonly"></input>
<span class="help-block"></span>
</div>
<label class="control-label">DIVISI</label>
<select name="Divisi" id="divisi" class="form-control" disabled="disabled">
<option value="">Divisi</option>
<option value='DIV-001'>PRODUKSI</option><option value='DIV-
002'>FINISHING</option><option value='DIV-003'>CETAK</option> </select>
<label class="control-label">EMAIL</label>
<div class="form-group">
<input type="text" name="Email" class="form-control" placeholder="Email"
readonly="readonly"></input>
<span class="help-block"></span>
</div>
</form>
</div>
</div>
</div>
<div class="card-footer" style="background-color:#3f51b5; padding-bottom:-0px;">
<div class="form-group" id="submitForm" >
<img width="40" height="40" id="scanned-img" src="" style="padding-top:-0px;">
<span id="scanned-QR" onchange="gTriger()"></span>
<select class="form-control" id="camera-select" ></select>
<button title="Decode Image" type="button" class="btn btn-default waves-effect" id="decode-
img">
<span class="glyphicon glyphicon-search"></span>Upload
</button>
<button title="Image shoot" type="button" class="btn btn-info waves-effect" id="grab-img" >
<span class="glyphicon glyphicon-search"></span>Image
</button>
<button title="Play" type="button" class="btn btn-success waves-effect" id="play">
<span class="glyphicon glyphicon-search"></span>Play
</button>
<button title="Pause" type="button" class="btn btn-warning waves-effect" id="pause" >
<span class="glyphicon glyphicon-search"></span>Pause
</button>
<button style="float: right" type="button" class="btn btn-primary waves-effect" id="stop"
onclick="window.history.go(-1);" >
<span class="glyphicon glyphicon-search"></span>BACK
</button>
</div>
</div>
</div>
</div>
66
<!-- Using jquery version: -->
<script src="http://localhost/absen/assets/template/plugins/qr-scanner/js/qrcodelib.js"></script>
<script src="http://localhost/absen/assets/template/plugins/qr-
scanner/js/webcodecamjs.js"></script>
<script src="http://localhost/absen/assets/template/plugins/qr-scanner/js/main.js"></script>
<!-- Jquery Core Js -->
<script src="http://localhost/absen/assets/template/plugins/jquery/jquery-2.2.3.min.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="http://localhost/absen/assets/template/plugins/node-waves/waves.js"></script>
</body>
<script >
var txt = '';
var res = '';
function submit()
{
document.getElementById("webcodecam-canvas").style.height = "215px";
document.getElementById("webcodecam-canvas").style.width = "300px";
document.getElementById("x").style.height = "265px";
document.getElementById("x").style.width = "330px";
document.getElementById('camera-select').style.visibility = 'hidden';
document.getElementById('submitForm').style.visibility = 'hidden';
document.getElementById('stop').style.visibility = 'visible';
document.getElementById("play").click();
showTime();
Tanggal();
}
function chkSpan(span){
if(span.timer)clearInterval(span.timer);
txt=span.innerHTML;
span.timer=setInterval
(
function()
{
if(span.innerHTML!=txt)gTriger()
}
,100
)
}
function gTriger(){
chkSpan(document.getElementById('scanned-QR'))
if(txt != "Scanning ..." && txt != "Stopped")
{
var str = txt;
res = str.replace("QR Code: ", "");
data_karyawan(res);
}
}
chkSpan(document.getElementById('scanned-QR'))
67
function showTime()
{
var a_p = "";
var today = new Date();
var curr_hour = today.getHours();
var curr_minute = today.getMinutes();
var curr_second = today.getSeconds();
if (curr_hour < 12) {
a_p = "AM";
} else {
a_p = "PM";
}
if (curr_hour == 0) {
curr_hour = 12;
}
if (curr_hour > 12) {
curr_hour = curr_hour - 12;
}
curr_hour = checkTime(curr_hour);
curr_minute = checkTime(curr_minute);
curr_second = checkTime(curr_second);
document.getElementById('Jam').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second
+ " " + a_p;
}
function checkTime(i)
{
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(showTime, 500);
function Tanggal()
{
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September',
'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.getElementById("Tanggal").innerHTML = thisDay + ', ' + day + ' ' + months[month] + '
' + year;
}
function data_karyawan(id)
{
$.ajax({
url : "http://localhost/absen/cAbsensiKaryawan/ajax_get_karyawan/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
68
document.getElementById("NIK").value = res;
$('[name="Nama"]').val(data.nama);
$('[name="Divisi"]').val(data.kode_divisi);
$('[name="Divisi"]').trigger('change');
$('[name="Email"]').val(data.email);
if(data.foto)
{
document.getElementById("x").src="upload/karyawan/"+data.foto
}
else
{
document.getElementById("x").src="upload/ImageDefault.png"
}
save();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Data Tidak Ditemukan !!');
}
});
}
function save()
{
var url;
url = "http://localhost/absen/cAbsensiKaryawan/absen";
var formData = new FormData(document.getElementById("form"));
$.ajax({
url : url,
type: "POST",
data : formData,
contentType: false,
processData: false,
dataType: "JSON",
success: function(data)
{
//alert(data);
if(data.status == true)
{
alert("Absensi Berhasil");
location.reload();
}
else
{
alert("Sudah Melakukan Absensi Pulang");
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
</script>
</html>
69
4.4 Testing
Pada bab ini penulis akan menerangkan tentang sistem yang terjadi dalam
website sistem absensi dan penggajian karyawan pada Dhennys Collection,
dengan menggunakan Black Box Testing.
1. Black Box Testing Form Login
Table IV.9. Black Box Testing Form Login
N
o
Sekenario
pengujian Test case
Hasil yang
diharapkan
Hasil
pengujia
n
Kesimp
ulan
1. Login user
dengan
mengosong
semua
kolom dan
menekan
tombol
“Login”
Nik : (kosong)
Password:
(kosong)
Sistem akan
menolak dengan
menampilkan “nik
harus di isi !
password harus di
isi!”
Sesuai
harapan
Valid
2 Login user
dengan
mengosong
Nik kolom
dan
menekan
tombol
“Login”
Nik : (Kosong)
Password :
(1234)
Sistem akan
menolak dengan
menampilkan
“Nik harus di isi !
Sesuai
harapan
Valid
3 Login user
dengan
mengosong
Password
kolom dan
menekan
tombol
“Login”
Username :
(User)
Password :
(Kosong)
Sistem akan
menolak dengan
menampilkan
“Password harus
di isi !
Sesuai
harapan
Valid
70
4 Login user
dengan
memasukan
Nik atau
password
salah
“Login”
Nik :
(1111510001)
Password: (123)
Sistem akan
menolak dengan
menampilkan
“Nik atau
Password yang
anda masukkan
Salah”
Sesuai
harapan
Valid
5 Mengosong
kan
sebagian
atau semua
kolom
pengajuan
tidak masuk
kerja lalu
menekan
“submit”
Tanggal
pengajuan :
(kosong)
Sistem akan
menolak dengan
menampilkan
”Tanggal
Pengajuan Harus
Diisi!”
Sesuai
harapan
Valid
6 Menscan
barcode
yang tidak
terdaftar
untuk
melakukan
absensi
Scan barcode :
2B65C48
Sistem akan
menolak dengan
menampilkan
”Data tidak
ditemukan”
Sesuai
harapan
Valid
71
2. Black Box Testing Form Login Admin
Table IV.10. Black Box Testing Form Login Admin
N
o
Sekenario
pengujian Test case
Hasil yang
diharapkan
Hasil
penguji
an
Kesimp
ulan
1. Login
admin
dengan
mengosong
kan salah
satu atau
semua
kolom
“Login”
NIK : (kosong)
Password: (kosong)
Sistem akan
menolak
dengan
menampilkan
“nik harus di
isi & password
harus di isi!”
Sesuai
harapan
Valid
2 Login
Admin
dengan
mengosong
nik kolom
dan
menekan
tombol
“Login”
Nik : (Kosong)
Password : (1234)
Sistem akan
menolak
dengan
menampilkan
“Nik harus di
isi !
Sesuai
harapan
Valid
3 Login
Admin
dengan
mengosong
Password
kolom dan
menekan
tombol
“Login”
Nik : (Admin)
Password : (Kosong)
Sistem akan
menolak
dengan
menampilkan
“Password
harus di isi !
Sesuai
harapan
Valid
72
4 Login
Admin
dengan
memasukan
Nik atau
password
salah dan
menekan
tombol
“Login”
Usernamae :
(1111510051)
Password: (12354)
Sistem akan
menolak
dengan
menampilkan
“Nik atau
Password yang
anda
masukkan
Salah”
Sesuai
harapan
Valid
2. Menghitung
gaji
karyawan
tanpa
memilih
bulan dan
tahun
penggajian
terlebih
dahulu lalu
menekan
“Proccess”
bulan : (kosong)
tahun : (kosong)
Sistem akan
menolak
dengan
menampilkan
“Bulan belum
dipilh dan
tahun belum
dipilih ”
Sesuai
harapan
Valid
3. Mengkoson
gkan jumlah
hari efektif
kerja pada
saat
perhitungan
penggajian
lalu
menekan
“Hitung
Gaji
Karyawan”
Jumlah hari efektif
kerja : -Pilih-
Sisem akan
memproses
pesanan
dengan
melampilkan
“Silahkan
Masukkan
Hari Efektif
kerja terlebih
dahulu”
Sesuai
harapan
Valid
73
4.5 Support
4.5.1 Spesifikasi Hardware dan Software
Didalam mengimplementasikan perancangan dan pembuatan situs web
yang penulis jadikan sebagai penulisan skripsi tentunya membutuhkan sarana-
sarana pendukung atau tools, yaitu yang terdiri dari perangkat keras dan perangkat
lunak. Berikut gambaran umum setruktur hubungan antara komponen dari sistem
keseluruhan secara fisik.
Table IV.11. Spesifikasi Hardware dan Software
Kebutuhan Keterangan
Sistem Operasi Windows 10 Professional
Processor Intel Inside CORE I3
RAM 4 GB
Hardisk 500GB
Monitor Acer 14”
Web Browser Google Chrome, Mozilla Firefox
Bahasa Pemrograman PHP
WEB Editor Notepad ++
Server Module PhP Myadmin
Web Server XAMPP 1.8.2
Database My SQL
Editor gambar Photoshop CC 2014
74
4.6 Spesifikasi Dokumen Sistem Usulan
Spesifikasi sistem usulan merupakan pembahasan mengenai bentuk dari
dokumen-dokumen sistem usulan yang diusulkan dengan tujuan untuk
meningkatkan dalam Sistem Absensi dan Penggajian Karyawan pada Dhennys
Collection.
1. Nama dokumen : Laporan Absensi Karyawan
Fungsi : Laporan kehadiran karyawan
Sumber : Sistem
Tujuan : Admin
Media : Kertas
Jumlah : 1 Lembar
Frekuensi : Khusus HRD
Bentuk : Lampiran B-1
2. Nama dokumen : Laporan Penggajian Karyawan
Fungsi : Laporan pengeluaran gaji karyawan selama satu periode
Sumber : Sistem
Tujuan : Admin
Media : Kertas
Jumlah : 1 Lembar
Frekuensi : Untuk HRD Payroll
Bentuk : Lampiran B-2
75
3. Nama dokumen : Slip Gaji Karyawan
Fungsi : Bukti jumlah gaji yang diterima karyawan
Sumber : Sistem
Tujuan : Karyawan
Media : Form
Jumlah : Rangkap 2
Frekuensi : Untuk karyawan yang bersangkutan
Bentuk : Lampiran B-3
