BAB IV

PERANCANGAN SISTEM

4.1 Perancangan Sequence Diagram

4.4 Perancangan Class Diagram

Dalam perancangan Class Diagram, menjelaskan struktur dan hubungan

antar kelas yang akan digunakan untuk merepresentasikan berbagai entitas dan

objek dalam sistem. Class Diagram merupakan komponen penting dalam

pemodelan berorientasi objek yang akan memudahkan pemahaman visual tentang

bagaimana kelas-kelas berinteraksi dalam sistem secara keseluruhan.

Berikut ini digambarkan Class Diagram dari program perancangan Sistem

Informasi Penggajian dan Absensi menggunakan QR Code berbasis Framework

CodeIgniter :

Gambar 4.4 Perancangan Class Diagram

4.3 Perancangan Basis Data

Dalam prancangan Sistem Informasi Penggajian dan Absensi

menggunakan QR Code berbasis Framework CodeIgniter, digunakan database

MySQL sebagai sistem manajemen basis data. MySQL memiliki keunggulan

dalam pembuatan query database. Pemilihan database ini dianggap tepat karena

mampu beroperasi pada berbagai sistem informasi. Berikut spesifikasi database :

Jenis Database : MySQL

Nama Database : absensi.sql

4.4 Perancangan Tabel Basis Data

Perancangan tabel basis data yang merupakan bagian penting dalam

pengembangan Sistem Informasi Penggajian dan Absensi dengan QR Code.

Tabel-tabel ini akan menjadi wadah untuk menyimpan data-data penting seperti

informasi karyawan, kehadiran, gaji, dan lainnya. Berikut tabel-tabel yang

digunakan untuk menyimpan data-data pada program perancangan Sistem

Informasi Penggajian dan Absensi menggunakan QR Code berbasis Framework

CodeIgniter.

4.4.1 Tabel Karyawan

Nama Tabel : karyawan

Primary Key : id

Keterangan : Tabel ini berisi data-data karyawan.

Tabel 4.4.1 Tabel Karyawan

No Field Type Size Keterangan

1 id int 11 Primary Key

2 id_karyawan varchar 20

3 nama_karyawan varchar 30
 4 jabatan int 11

5 id_shift int 20

6 lokasi_id int 11

7 foto varchar 250

4.4.2 Tabel Shift

Nama Tabel : shift

Primary Key : id_shift

Keterangan : Tabel ini berisi data shift.

Tabel 4.4.4 Tabel Jabatan

No Field Type Size Keterangan

1 id_shift int 11 Primary Key

2 nama_shift varchar 20

4.4.3 Tabel Jabatan

Nama Tabel : jabatan

Primary Key : id_jabatan

Keterangan : Tabel ini berisi data jabatan.

Tabel 4.4.3 Tabel Jabatan

No Field Type Size Keterangan

1 Id_jabatan int 11 Primary Key

2 nama_jabatan varchar 20

4.4.4 Tabel Gedung

Nama Tabel : lokasi

Primary Key : gedung_id

 Keterangan : Tabel ini berisi data lokasi cabang Agen Perbankan

358 Grup.

Tabel 4.4.4 Tabel Gedung

No Field Type Size Keterangan

1 gedung_id int 11 Primary Key

2 nama_gedung varchar 20

3 alamat varchar 50

4.4.5 Tabel Presensi

Nama Tabel : presensi

Primary Key : id_absen

Keterangan : Tabel ini berisi data-data absensi karyawan.

Tabel 4.4.5 Tabel Karyawan

No Field Type Size Keterangan

1 id_absen int 11 Primary Key

2 id_karyawan varchar 20

3 tgl date -

4 jam_msk Time -

5 jam_klr Time -

6 id_khd int 11

7 ket varchar 50

8 id_status Int 11

4.4.6 Tabel Kehadiran

Nama Tabel : kehadiran

Primary Key : id_khd

 Keterangan : Tabel ini berisi data-data keterangan kehadiran seperti, sakit,

ijin, alpa).

Tabel 4.4.6 Tabel Kehadiran

No Field Type Size Keterangan

1 id_khd int 11 Primary Key

2 nama_khd varchar 20

4.4.7 Tabel Status

Nama Tabel : stts

Primary Key : id_status

Keterangan : Tabel ini berisi data-data status kehadiran seperti masuk,

pulang, tidak hadir.

Tabel 4.4.7 Tabel Status

No Field Type Size Keterangan

1 id_status int 11 Primary Key

2 nama_status varchar 20

4.4.8 Tabel Users

Nama Tabel : users

Primary Key : id_user

Keterangan : Tabel ini berisi data-data user yang digunakan untuk login.

Tabel 4.4.8 Tabel Users

No Field Type Size Keterangan

1 id_user int 11 Primary Key

2 username varchar 100

3 password varchar 255

4 email varchar 254

 5 forgotten_password_selector varchar 255

6 forgotten_password_code varchar 255

7 forgotten_password_time time

8 last_login int 11

9 first_name varchar 50

10 last_name varchar 100

4.4.9 Tabel Group

Nama Tabel : group

Primary Key : id

Keterangan : Tabel ini berisi data level users untuk melakukan login

sesuai hak akses.

Tabel 4.4.9 Tabel Group

No Field Type Size Keterangan

1 id int 11 Primary Key

2 name varchar 20

3 description varchar 100

4.3 Perancangan Struktur Menu

Perancangan struktur menu digunakan untuk memudahkan user dan

sebagai navigasi dalam berinteraksi dengan berbagai fitur sistem, sehingga

memberikan pengalaman user yang efisien dan nyaman dalam mengelola

penggajian dan absensi. Dengan perancangan yang baik, user dapat dengan

mudah mengakses informasi dan menjalankan fungsi pada program Sistem

Informasi Penggajian dan Absensi menggunakan QR Code dengan Framework

CodeIgniter.
 Berikut adalah gambar perancangan struktur menu yang terdapat pada

program Sistem Informasi Penggajian dan Absensi menggunakan QR Code

berbasis Framework CodeIgniter :

Gambar 4.3 Perancangan Struktur Menu Sebagai Admin

Gambar 4.3 Perancangan Struktur Menu Sebagai Owner

Gambar 4.3 Perancangan Struktur Menu Sebagai Karyawan

4.4 Perancangan Antar Muka (Interface)

Layout antar muka memiliki peran penting dalam menghubungkan user

dengan perangkat lunak yang dikembangkan dan berfungsi sebagai perantara

antara user dan perangkat lunak, agar user dapat berinteraksi dengan sistem.

Layout antarmuka mencakup elemen-elemen seperti tata letak elemen UI (User

Interface), ikon, tombol, menu, dan elemen lainnya yang membentuk pengalaman

user secara keseluruhan. Berikut Layout antarmuka pada program Sistem

Informasi Penggajian dan Absensi menggunakan QR Code berbasis Framework

CodeIgniter :

4.4.1 Antarmuka Login

Gambar 4.4.1 Perancangan Antar muka Login

4.4.4 Antarmuka Dashboard

 Gambar 4.4.4 Perancangan Antar muka Dashboard

4.4.3 Perancangan Antarmuka Data Karyawan

Gambar 4.4.3 Perancangan Antar muka Data Karyawan

4.4.4 Perancangan Antarmuka Data Jabatan

Gambar 4.4.4 Perancangan Antar muka Data Jabatan

4.4.5 Perancangan Antarmuka Data Shift

Gambar 4.4.5 Perancangan Antar muka Data Shift

4.4.6 Perancangan Antarmuka Data Lokasi

`Gambar 4.4.6 Perancangan Antar muka Data Lokasi

4.4.7 Perancangan Antarmuka Ambil QR Code

 `Gambar 4.4.7 Perancangan Antar muka Data Lokasi

4.4.8 Perancangan Antarmuka Scan QR Code

Gambar 4.4.8 Perancangan Antar muka Scan QR Code

4.4.9 Perancangan Antarmuka Histori Absensi

 Gambar 4.4.9 Perancangan Antar muka Histori Absensi
4.4.10 Perancangan Antarmuka Rekap Absensi

Gambar 4.4.10 Perancangan Antar muka Rekap Absensi

4.4.10 Perancangan Antarmuka Tambah Data Karyawan

Gambar 4.4.10 Perancangan Antar muka Tambah Data Karyawan

4.4.10 Perancangan Antarmuka Edit Data Karyawan

Gambar 4.4.10 Perancangan Antar muka Edit Data Karyawan

4.4.10 Perancangan Antarmuka Lihat Data Karyawan

Gambar 4.4.10 Perancangan Antar muka Lihat Data Karyawan

4.4.10 Perancangan Antarmuka Hapus Data Karyawan

Gambar 4.4.10 Perancangan Antar muka Hapus Data Karyawan

4.4.11 Perancangan Antarmuka Tambah Data Jabatan

Gambar 4.4.11 Perancangan Antar muka Tambah Data Jabatan

4.4.12 Perancangan Antarmuka Edit Data Jabatan

Gambar 4.4.12 Perancangan Antar muka Edit Data Jabatan

4.4.13 Perancangan Antarmuka Lihat Data Jabatan

Gambar 4.4.13 Perancangan Antar muka Lihat Data Jabatan

4.4.14 Perancangan Antarmuka Hapus Data Jabatan

Gambar 4.4.14 Perancangan Antar muka Hapus Data Jabatan

4.4.15 Perancangan Antarmuka Tambah Data Shift
 Gambar 4.4.15 Perancangan Antar muka Tambah Data Shift
4.4.16 Perancangan Antarmuka Edit Data Shift

Gambar 4.4.16 Perancangan Antar muka Edit Data Shift

4.4.17 Perancangan Antarmuka Lihat Data Shift
 Gambar 4.4.17 Perancangan Antar muka Hapus Data Shift
4.4.18 Perancangan Antarmuka Hapus Data Shift

Gambar 4.4.18 Perancangan Antar muka Hapus Data Shift

4.4.19 Perancangan Antarmuka Tambah Data Lokasi
 Gambar 4.4.19 Perancangan Antar muka Tambah Data Lokasi
4.4.40 Perancangan Antarmuka Edit Data Lokasi

Gambar 4.4.40 Perancangan Antar muka Edit Data Lokasi

4.4.41 Perancangan Antarmuka Lihat Data Lokasi
 Gambar 4.4.41 Perancangan Antar muka Lihat Data Lokasi
4.4.42 Perancangan Antarmuka Hapus Data Lokasi

Gambar 4.4.42 Perancangan Antar muka Hapus Data Lokasi

4.4.43 Perancangan Antar muka Tambah Presensi pada Histori Absensi
Gamabar 4.4.43 Perancangan Antar muka Tambah Presensi pada Histori Absensi
4.4.44 Perancangan Antar muka Edit Presensi pada Histori Absensi

Gamabar 4.4.44 Perancangan Antar muka Edit Presensi pada Histori Absensi