1.

Rancangan Antar Muka Index Admin

LOGO Beranda Master Data Penggajian Selamat Datang Admin FOTO

Data Karyawan Baru

No Master Data Jumlah Aksi No NIP Karyawan Nama Divisi Jabatan

999 xxxxxxxxx 999 Lihat Data 999 99999999999999999 xxxxxx xxxxx xxxxx

Gambar III.3

Rancangan Antar Muka Index Admin

Ada beberapa bagian yang terdapat pada halaman index admin,diantaranya adalah

a. Beranda : untuk menampilkan halaman index admin

b. Master Data : untuk menampilkan isi dari master data

c. Penggajian : untuk menampilkan halaman data penggajian

d. Lihat Data : untuk mengelolah data divisi

e. Foto : untuk mengelolah akun admin

 31

2. Rancangan Antar Muka Data Divisi Admin

LOGO Beranda Master Data Penggajian Selamat

Datang Admin FOTO

Data Divisi Tambah

Show 999 entries Search

ID Divisi Nama Divisi Aksi

9999 xxxxxxxxxx Lihat Data

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.4

Rancangan Antar Muka Data Divisi Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Penggajian : untuk menampilkan halaman data penggajian.

d. Tambah : untuk menambahkan data divisi.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Pilih Aksi : untuk mengelolah data divisi(ubah,hapus)

h. Foto : untuk mengelolah akun admin

 32

3. Rancangan Antar Muka Data Jabatan Admin.

LOGO Beranda Master Data Penggajian Selamat

Datang Admin FOTO

Data Jabatan Tambah

Show 999 entries Search

ID Jabatan Nama Jabatan Gaji Pokok Tunjangan Lembur(per jam) Aksi

9999 xxxxxxxxx 9999999 9999999 9999 Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.5

Rancangan Antar Muka Data Jabatan Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Penggajian : untuk menampilkan halaman data penggajian.

d. Tambah : untuk menambahkan data jabatan.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Pilih aksi : untuk mengelolah data jabatan(ubah,hapus)

h. Foto : untuk mengelolah akun admin

 33

4. Rancangan Antar Muka Data Karyawan Admin.

LOGO Beranda Master Data Penggajian Selamat Datang Admin FOTO

Data Karyawan Tambah

Show 999 entries Search

NIP Karyawan Nama Jenis Karyawan Status Agama Alamat Aksi

9999 xxxxxxxxx xxxxxxx xxxxx xxxxx xxxxxxxxx Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.6

Rancangan Antar Muka Data Karyawan Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Penggajian : untuk menampilkan halaman data penggajian.

d. Tambah : untuk menambahkan data karyawan.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Pilih aksi : untuk mengelolah data karyawan(rinci,ubah,hapus)

h. Foto : untuk mengelolah akun admin

 34

5. Rancangan Antar Muka Data Pinjaman Admin.

LOGO Beranda Master Data Penggajian Selamat

Datang Admin FOTO

Data Pinjaman Tambah

Show 999 entries Search

ID Pinjaman Peminjam Tanggal Besar Pinjaman Status Keterangan Aksi

9999 xxxxxxxxx xxxxxxx xxxxx xxxxx xxxxxxxxx Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.7

Rancangan Antar Muka Data Pinjaman Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Penggajian : untuk menampilkan halaman data penggajian.

d. Tambah : untuk menambahkan data pinjaman.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Pilih aksi : untuk mengelolah data pinjaman(ubah,hapus)

h. Foto : untuk mengelolah akun admin

 35

6. Rancangan Antar Muka Data LemburAdmin.

LOGO Beranda Master Data Penggajian Selamat Datang Admin

FOTO

Data Lembur

Show 999 entries Search

ID Lembur Karyawan Tanggal Lama Lembur Keterangan Aksi

9999 99999999(xxxxxxxx) xxxxxxx xxxxx xxxxxxxxx Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.8

Rancangan Antar Muka Data Lembur Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Penggajian : untuk menampilkan halaman data penggajian.

d. Previous : untuk menampilkan halaman sebelumnya.

e. Next : untuk menampilkan halaman selanjutnya.

f. Pilih aksi : untuk mengelolah data lembur(ubah,hapus)

g. Foto : untuk mengelolah akun admin

 36

7. Rancangan Antar Muka Data Absensi Admin.

LOGO Beranda Master Data

Penggajian Selamat Datang Admin FOTO

Data Absensi Tambah

Show 999 entries Search

ID Absebsi NIP Karyawan(Nama) Tanggal Status Jam Masuk Jam Keluar Aksi

9999 99999999(xxxxxxxx) xxxxxxx xxxxx 99999999 99999999 Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.9

Rancangan Antar Muka Data Absensi Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Penggajian : untuk menampilkan halaman data penggajian.

d. Tambah : untuk menambahkan data penggajian.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Pilih aksi : untuk mengelolah data penggajian(ubah,hapus)

h. Foto : untuk mengelolah akun admin

 37

8. Rancangan Antar Muka Data Penggajian Admin

LOGO Beranda Master Data

Penggajian Selamat Datang Admin FOTO

Data Penggajian Tambah

Show 999 entries Search

ID Penggajian Karyawan Tanggal Periode Gaji Bersih Aksi

9999 99999999(xxxxxxxx) xxxxxxx Xxxx 99999999 Pilih Aksi || Slip Gaji

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.10

Rancangan Antar Muka Data Penggajian Admin

a. Beranda : untuk menampilkan halaman index admin.

b. Master Data : untuk menampilkan isi dari master data.

c. Tambah : untuk mengolah data absensi.

d. Penggajian : untuk menampilkan halaman data penggajian.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Foto : untuk mengelolah akun admin

h. Slip Gaji : untuk melihat atau mencetak gaji

 38

9. Rancangan Antar Muka Login Direktur

LOGO PENGGAJIAN KARYAWAN

Nama Pengguna

Kata Sandi

Masuk

Gambar III.11

Rancangan Antar Muka Login Direktur

Ada beberapa bagian yang terdapat pada halaman Login direktur, diantaranya

adalah:

a. Nama Pengguna : untuk mengisi nama pengguna.

b. Kata sandi : untuk mengisi kata sandi dari nama pengguna tersebut.

c. Masuk : untuk login ke halaman index direktur.

 39

10. Rancangan Antar Muka Index Direktur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Data Karyawan Baru

No Master Data Jumlah No NIP Karyawan Nama Divisi Jabatan

999 xxxxxxxxx 999 999 99999999999999999 xxxxxx xxxxx xxxxx

Gambar III.12

Rancangan Antar Muka Index Direktur

Ada beberapa bagian yang terdapat pada halaman index direktur ,diantaranya

adalah :

a. Beranda : untuk menampilkan halaman index direktur

b. Foto : untuk mengelolah akun admin

c. Rekap Data : untuk melihat/mencetak rekap data

 40

11. Rancangan Antar Muka Rekap DivisiDirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Divisi Pilih Aksi

Show 999 entries Search

ID Divisi Nama Divisi

9999 xxxxxxxx

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.13

Rancangan Antar Muka Rekap Divisi Direktur

a. Pilih Aksi : untuk mencetak dan merubah pdf rekap divisi.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

 41

12. Rancangan Antar Muka Rekap JabatanDirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Jabatan Pilih Aksi

Show 999 entries Search

ID Jabatan Nama Jabatan Gaji Pokok Tunjangan Lembur (per jam )

9999 xxxxxxxxxx 999999999999 999999999999 9999999999

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.14

Rancangan Antar Muka Rekap Jabatan Direktur

a. Pilih Aksi : untuk mencetak dan merubah pdf rekap jabatan.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

 42

13. Rancangan Antar Muka Rekap KaryawanDirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Karyawan Pilih Aksi

transportasi Semua
Divisi : Jabatan :

Show 999 entries Search

NIP Karyawan Nama Karyawan Jenis Karyawan Divisi Jabatan Gaji Pokok TunjanganLembur (per jam ) Aksi

9999999999 xxxxxxxxxx xxxxxxxxxx xxxxxx xxxxxxxxxx 99999999999 9999999999 9999999999 Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.15

Rancangan Antar Muka Rekap karyawan

a. Pilih Aksi : untuk mencetak dan melihat pdf semua rekap karyawan.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya.

g. Pilih Aksi : untuk mencetak dan melihat pdf setiap rekap karyawan

h. Transportasi : untuk melihat setiap bagian divisi

i. Semua : untk melihat jabatan dalam sebuah divisinya

 43

14. Rancangan Antar Muka Rekap Absensidirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Absensi Pilih Aksi

Semua
Bulan : Tahun : Semua Status : Semua

Show 999 entries Search

ID Absensi NIP Karyawan(Nama) Tanggal Status Jam Masuk Jam Keluar Keterangan

9999 9999999(xxxxxxxxxx) xxxxxxxxxx xxxxxx 99999999 99999999999

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.16

Rancangan Antar Muka Rekap Absensi Direktur

a. Pilih Aksi : untuk mencetak dan merubah pdf rekap absensi.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya

g. Semua(bulan) : untuk melihat data waktu(bulan).

h. Semua(tahun) : untuk melihatdata waktu(tahun).

i. Semua(Status) : untuk melihat status kehadiran karyawan

 44

15. Rancangan Antar Muka Rekap PinjamanDirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Pinjaman Pilih Aksi

Semua
Bulan : Tahun : Semua

Show 999 entries Search

ID Peminjam Peminjam Tanggal Besar Pinjaman Status Keterangan

9999 9999999(xxxxxxxxxx) xxxxxxxxxx 99999999 99999999999

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.17

Rancangan Antar Muka Rekap Pinjaman Direktur

a. Pilih Aksi : untuk mencetak dan merubah pdf rekap pinjaman.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya

g. Semua(bulan) : untuk melihat data waktu(bulan).

h. Semua(tahun) : untuk melihatdata waktu(tahun).

 45

15. Rancangan Antar Muka Rekap LemburDirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Lembur Pilih Aksi

Semua
Bulan : Tahun : Semua

Show 999 entries Search

ID Lembur Karyawan Tanggal Lama Lembur Keterangan

9999 9999999(xxxxxxxxxx) xxxxxxxxxx 99999999 xxxxxxxxxxx

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.18
Rancangan Antar Muka Rekap Lembur Direktur

a. Pilih Aksi : untuk mencetak dan merubah pdf rekap lembur.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya

g. Semua(bulan) : untuk melihat data waktu(bulan).

h. Semua(tahun) : untuk melihat data waktu(tahun).

 46

16. Rancangan Antar Muka Rekap GajiDirektur

LOGO Beranda Rekap Data Selamat Datang Manajer FOTO

Rekap Gaji Pilih Aksi

Semua
Bulan : Tahun : Semua

Show 99 entries Search

ID Penggajian Karyawan Tanggal Periode Gaji Bersih Slip Gaji

999 9999999(xxxxxxxxxx) xxxxxxxxxx xxxxxxxxxx 99999999 Pilih Aksi

Showing 1 to 10 of 10 entries Previous 1 Next

Gambar III.19

Rancangan Antar Muka Rekap Gaji Direktur

a. Pilih Aksi : untuk mencetak dan merubah pdf rekap gaji.

b. Beranda : untuk menampilkan halaman index direktur

c. Foto : untuk mengelolah akun direktur.

d. Rekap Data : melihat menu menu rekap data.

e. Previous : untuk menampilkan halaman sebelumnya.

f. Next : untuk menampilkan halaman selanjutnya

g. Semua(bulan) : untuk melihat data waktu(bulan).

h. Semua(tahun) : untuk melihat data waktu(tahun).

i. Pilih Aksi(aksi) : untuk mencetak atau melihat pdf gaji setiap karyawan
 47

17. Rancangan Antar Muka Login Karyawan.

Dibawah ini merupakan rancangan halaman Login karyawan pada

halaman direktur . Berikut rancangan halaman login karyawan.

LOGO PENGGAJIAN KARYAWAN

Nama Pengguna

Kata Sandi

Masuk

Gambar III.20

Rancangan Antar Muka Login Karyawan

Ada beberapa bagian yang terdapat pada halaman Login karyawan, diantaranya

adalah:

a. Nama Pengguna : untuk mengisi nama pengguna.

b. Kata sandi : untuk mengisi kata sandi dari nama pengguna tersebut.

c. Masuk : untuk login ke halaman karyawan.

 48

18. Rancangan Antar Muka IndexKaryawan

LOGO Beranda Informasi Data Selamat

Datang xxxx FOTO

Karyawan Baru Absensi

Xxxxxx xxxx 99 9999 99:99:99 Masuk

No Keterangan Jumlah
Jam Masuk Jam Keluar

- -

999 xxxxxxxxxxxxxx 99999999

Gambar III.21

Rancangan Antar Muka Index Karyawan

Ada beberapa bagian yang terdapat pada halaman index direktur ,diantaranya

adalah :

a. Beranda : untuk menampilkan halaman index karyawan

b. Foto : untuk mengelolah akun karyawan.

c. Informasi Data : untuk melihat informasi data karyawan

 49

19. Rancangan Antar Muka AbsensiKaryawan

LOGO Beranda Informasi Data Selamat Datang xxxx FOTO

Absensiku

Show 99 entries Search

Tanggal Status Jam Masuk Jam Keluar

999 xxxxxxx 99:99:99 99:99:99

Showing 1 to 1 of 1 entries Previous 1 Next

Gambar III.22

Rancangan Antar Muka Absensi Karyawan

a. Beranda : untuk menampilkan halaman index karyawan

b. Foto : untuk mengelolah akun karyawan.

c. Informasi Data : untuk melihat informasi data karyawan

d. Previous : untuk menampilkan halaman sebelumnya.

e. Next : untuk menampilkan halaman selanjutnya

 50

20. Rancangan Antar Muka PinjamanKaryawan

LOGO Beranda Informasi Data Selamat Datang xxxx FOTO

Pinjamanku

Show 99 entries Search

Tanggal Besar Pinjaman Status Keterangan

99 xxxx 9999 xxxxxxx xxxxxxxxx xxxxxxxxx

Showing 1 to 1 of 1 entries Previous 1 Next

Gambar III.23

Rancangan Antar Muka Pinjaman Karyawan

a. Beranda : untuk menampilkan halaman index karyawan

b. Foto : untuk mengelolah akun karyawan.

c. Informasi Data : untuk melihat informasi data karyawan

d. Previous : untuk menampilkan halaman sebelumnya.

e. Next : untuk menampilkan halaman selanjutnya

 51

21. Rancangan Antar Muka LemburKaryawan

LOGO Beranda Informasi Data Selamat Datang xxxx FOTO

Lemburku

Show 99 entries Search

Tanggal Lama Lembur Keterangan

99 xxxx 9999 xxxxxxx xxxxxxxxx

Showing 1 to 1 of 1 entries Previous 1 Next

Gambar III.24

Rancangan Antar Muka Lembur Karyawan

a. Beranda : untuk menampilkan halaman index karyawan

b. Foto : untuk mengelolah akun karyawan.

c. Informasi Data : untuk melihat informasi data karyawan

d. Previous : untuk menampilkan halaman sebelumnya.

e. Next : untuk menampilkan halaman selanjutnya

 52

22. Rancangan Antar Muka Gaji Karyawan

LOGO Beranda Informasi Data Selamat Datang xxxx FOTO

Gajiku

Show 99 entries Search

Tanggal Periode Gaji Bersih Aksi

99 xxxx 9999 Xxxx xxxx 9999999999 Slip Gaji

Showing 1 to 1 of 1 entries Previous 1 Next

Gambar III.25

Rancangan Antar Muka Gaji Karyawan

a. Beranda : untuk menampilkan halaman index karyawan

b. Foto : untuk mengelolah akun karyawan.

c. Informasi Data : untuk melihat informasi data karyawan

d. Previous : untuk menampilkan halaman sebelumnya.

e. Next : untuk menampilkan halaman selanjutnya

f. Pilih Aksi : untuk melihat dan mencetak slip gaji karyawan

 53

3.3.2. Basis Data

Perancangan basis data menghasilkan pemetaantabel-tabel yang digambarkan

dengan Entity Relationship Diagram(ERD) dan Logical Record Structure (LRS) :

A. Entity Relationship Diagram.

Id_pengguna
Nip_karyawan
Nama_pengguna
Pengguna Nama_karyawan
Sandi_pengguna
1
Foto_pengguna Jk_karyawan
mengelolah
Level_pengguna Kota_lhr_karyawan
M
memiliki Tgl_lhr_karyawan
Id_divisi
1
M
divisi Agama_karyawan
Nama_divisi karyawan
M
Mempunyai Status_karyawan
1
Gaji_pokok Alamat_karyawan
1

lembur Pendidikan_karyawan
jabatan
melakukan
Id_jabatan
1

1 1 Foto_karyawan

nama Tgl_masuk_karyawan

tunjangan Id_divisi
M
melakukan Id_jabatan
Id_lembur mendapat melakukan
Id_pengguna
lembur
Tgl_lembur

M
Lama_lembur M
Id_penggajian
Id_absensi
Keterangan_lembur absensi
Bulan_penggajian
1 penggajian Status_Absensi
Nip_karyawan
Tgl_penggajian
Keterangan_Absensi
Tahun_penggajian
Tgl_absensi
pinjaman
Id_pinjaman Nip_karyawan
lembur
Besar_pinjaman Jam_masuk_absensi
pinjaman
Gaji_kotor
Tgli_pinjaman
Jam_keluar_Absensi
pph
Status_pinjaman
Bpjs_ketenagakerjaan
Keterangan_pinjam
Gaji_bersih

Nip_karyawan Nip_karyawan

Gambar III.26

ERD Sistem Informasi Penggajian Karyawan

B. Logical Record Structure ( LRS )

 54

karyawan pinjaman
Absensi
PK 1 PK id_pinjaman
nip_
PK id_absensi
karyawan
besar_pinjaman
status_absensi nama_karyawan tgl_pinjaman
keterangan_absensi
jk_karyawan status_pinjaman
tgl_absensi kota_lhr_karyawan keterangan_pinjam
jam_masuk_absensi
tgl_lhr_karyawan nip_karyawan
jam_keluar_absensi
agama_karyawan
nip_karyawan status_karyawan
alamat_karyawan divisi
pendidikan_karyawan

foto_karyawan
PK id_divisi
tgl_masuk_karyawan 1 nama_divisi

jenis_karyawan
id_divisi
lembur id_jabatan
1 id_pengguna
PK
id_l
embur

penggajian
tgl_lembur 1
lama_lembur PK id_penggajian
keterangan_lembur

nip_karyawan 1 jabatan bulan_penggajian

tahun_penggajian
PK id_jabatan
tgl_penggajian
pengguna pinjaman
nama_jabatan lembur
PK id_pengguna gaji_pokok gaji_kotor
tunjangan pph
nama_pengguna
sandi_pengguna lembur 1 bpjs_ketenagakerjaan
foto_pengguna gaji_bersih
level_pengguna nip_karyawan

Gambar III.27

LRS Sistem Informasi Penggajian Karyawan

C. Spesifikasi File
 55

Berikut ini adalah spesifikasi file atau tabel yang terbentuk dari transformasi

ERD. File-file ini tersimpan pada “ indah_subur_Sejati.sql ” dengan parameter-

parameter sebagai berikut :

1. Spesifikasi file Divisi

Nama file : Divisi

Akronim : Divisi.myd

Fungsi : Tempat menyimpan data divisi

Tipe file : File master

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 33 karakter

Kunci Field : id_divisi

Software : Mysql

Tabel III.1

Spesifikasi File Divisi

No Elemen Data Nama Field Tipe Size Ket Extra

1 Identitas divisi Id_divisi integer 3 Primary key Auto_Increment

2 Nama divisi Nama_divisi char 30

2. Spesifikasi file Absensi

 56

Nama file : Absensi

Akronim : Absensi.myd

Fungsi : Tempat menyimpan data Absensi

Tipe file : File transaksi

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 39 karakter

Kunci Field : id_absensi

Software : Mysql

Tabel III.2

Spesifikasi File Absensi

No Elemen Data Nama Field Tipe Size Ket Extra

1 Identitas absensi Id_divisi integer 3 Primary key Auto_Increment

2 Nama divisi Nama_divisi char 30

3 Keterangan absensi Keterangan_absensi text

4 Tanggal absensi Tgl_absensi date

5 Jam masuk absensi Jam_masuk_absensi time

6 Jam keluar absensi Jam time

_keluar_Absensin
7 Nip karyawan Nip_karyawan Char(18) Foreign key

3. Spesifikasi file jabatan

 57

Nama file : Jabatan

Akronim : jabatan.myd

Fungsi : Tempat menyimpan data jabatan

Tipe file : File master

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 33 karakter

Kunci Field : id_jabatan

Software : Mysql

Tabel III.3

Spesifikasi File Jabatan

No Elemen Data Nama Field Tipe Size Ket Extra

1 Identitas Jabatan Id_jabatan integer 3 Primary key Auto_Increment

2 Nama jabatan Nama_jabatan char 30

3 Gaji pokok Gaji_pokok float

4 tunjangan Tunjangan Float

5 Lembur Lembur Float

4. Spesifikasi file karyawan

 58

Nama file : karyawan

Akronim : karyawan.myd

Fungsi : Tempat menyimpan data karyawan

Tipe file : File master

Organisasi file : Sequential

Akses file : Random

Panjang Record : 165 karakter

Kunci Field : id_karyawan

Software : Mysql

Tabel III.4

Spesifikasi File karyawan

No Elemen Data Nama Field Tipe Size Ket Extra

1 No induk karyawan Nip_karyawan char 18 Primary key

2 Nama karyawan Nama_karyawan char 30

3 Jenis kelamin karyawan Jk_karyawan char 10

4 Kota lahir karyawan Kota_lhr_karyawan char 30

5 Tanggal lahir karyawan Tgl_lhr_karyawan date

6 Agama karyawan Agama_karyawan char 10

7 Status karyawan Status_karyawan char 11

8 Alamat karyawan Alamat_karyawan text

9 Pendidikan karyawan Pendidikan_karyawan chat 30

10 Foto karyawan Foto_karyawan text

11 Tanggal masuk karyawan Tgl_masuk_karyawan date

12 Jenis karyawan Jenis_karyawan char 9

 59

13 Identitas divisi Id_divisi integer 3

14 Identitas jabatan Id_jabatan integer 3

15 Identitas pengguna Id_pengguna integer 11

5. Spesifikasi file lembur

Nama file : lembur

Akronim : lembur.myd

Fungsi : Tempat menyimpan data lembur

Tipe file : File transaksi

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 29 karakter

Kunci Field : id_lembur

Software : Mysql

Tabel III.5

Spesifikasi File lembur

No Elemen Data Nama Field Tipe Size Ket Extra

1 Identitas lembur Id_lembur integer 11 Primary key Auto_Increment

2 Tanggal lembur Tgl_lembur date

3 Lama lembur Lama_lembur float

4 Keterangan lembur Keterangan_lembur text

5 Nip karyawan Nip_karyawan char 18 Foreign key

 60

6. Spesifikasi file penggajian

Nama file : penggajian

Akronim : penggajian.myd

Fungsi : Tempat menyimpan data penggajian

Tipe file : File transaksi

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 35 karakter

Kunci Field : id_penggajian

Software : Mysql

Tabel III.6

Spesifikasi File penggajian

No Elemen Data Nama Field Tipe Siz Ket Extra

e
1 Identitas penggajian Id_penggajian Int 11 Primary key Auto_increnment

2 Bulan penggajian Bulan_penggajian char 2

3 Tahun penggajian Tahun_penggajian Year 4

4 Tanggal penggajian Tgl_penggajian Date

5 pinjaman Pinjaman Float

6 lembur Lembur Float

7 Gaji kotor Gaji_kotor Float

8 pph Pph Float

9 Bpjs ketenagakerjaan Bpjs_ketenagakerjaan Float

10 Gaji bersih Gaji_bersih Float

 61

11 Nip karyawan Nip_karyawan char 18 Foreign key

7. Spesifikasi file pengguna

Nama file : pengguna

Akronim : pengguna.myd

Fungsi : Tempat menyimpan data pengguna

Tipe file : File master

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 22 karakter

Kunci Field : id_pengguna

Software : Mysql

Tabel III.7

Spesifikasi Filepengguna

No Elemen Data Nama Field Tipe Size Ket Extra

1 Identitas pengguna Id_pengguna integer 3 Primary key Auto_Increment

2 Nama pengguna Nama_pengguna Varchar 18

3 Sandi pengguna Sandi_pengguna Text

4 Foto pengguna Foto_pengguna text

5 Level pengguna Level_pengguna char 11

 62

8. Spesifikasi file pinjaman

Nama file : pinjaman

Akronim : pinjaman.myd

Fungsi : Tempat menyimpan data pinjaman

Tipe file : File transaksi

Organisasi file : Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 34 karakter

Kunci Field : id_pinjaman

Software : Mysql

Tabel III.8

Spesifikasi Filepinjaman

No Elemen Data Nama Field Tipe Size Ket Extra

1 Identitas pinjaman Id_pinjaman Integer 5 Primary key Auto_Increment

2 Besar pinjaman Besar_pinjaman Float

3 tanggal pinjaman Tgl_pinjaman Date

4 Status pinjaman Status_pinjaman char 11

5 Keterangan pinjaman Keterangan_pinjaman text

6 Nip karyawan Nip_karyawan char 18 Foreign key

 63

3.3.3. Rancangan Struktur Navigasi

Struktur navigasi website Penggajian ini adalah struktur navigasi

campuran ( composite ). Melalui struktur navigasi ini terlihat bagaimana isi dan

susunan dari website secara menyeluruh.

1. Rancangan Struktur Navigasi Untuk Admin

Login Admin

Beranda Tambah

Data Pengguna Hapus

Tambah
Data Divisi Ubah

Hapus

Tambah

Data Jabatan Ubah

Master Data
Hapus
Halaman Admin

Tambah
Data Karyawan Rinci

Ubah

Hapus

Tambah

Ubah
Penggajian
Hapus

Slip gaji

Tambah

Data Absensi Ubah

Hapus

Tambah
Data Pinjaman Ubah
Hapus

Ubah
Data Lembur
Hapus

Profil Saya
Foto

Keluar

Gambar III.28

Struktur Navigasi Untuk Admin PT.Indah Subur Sejati

2. Rancangan Struktur Navigasi untuk Karyawan

 64

Login Karyawan

Beranda

Absensiku

Pinjamanku

Informasi
Data Lemburku
Halaman
Karyawan

Gajiku Slip Gaji

Profil Saya
Foto
Ubah Sandi

Keluar

Gambar III.29

Struktur Navigasi Untuk Karyawan PT.Indah Subur Sejati

3. Rancangan Struktur Navigasi Untuk Direktur

 65

Login Admin

Beranda

cetak
Rekap Divisi
pdf

cetak
Rekap Jabatan
pdf
Master Data

Halaman Admin

Rekap cetak
Karyawan pdf

cetak
Rekap Absensi
pdf

cetak
Rekap Pinjaman
pdf

cetak
Rekap Lembur
pdf

cetak
Rekap Gaji
pdf

Profil Saya
Foto

Keluar

Gambar III.30

Struktur Navigasi untuk Direktur PT.Indah Subur Sejati

3.4. Implementasi dan Pengujian Unit