RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH

(1)

RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH

SKRIPSI

Joti Anggoro Pratama 00000026684

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2022

(2)

i

Rancang Bangun Sistem Informasi Berbasis Web Pada Loyal Photobooth, Joti Anggoro Pratama, Universitas Multimedia Nusantara

RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH

SKRIPSI

Diajukan sebagai salah satu syarat untuk memperoleh Gelar Sarjana Sistem Informasi

Joti Anggoro Pratama 00000026684

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2022

(3)

ii

HALAMAN PERNYATAAN TIDAK PLAGIAT

Dengan ini saya,

Nama : Joti Anggoro Pratama

Nomor Induk Mahasiswa : 00000026684

Program studi : Sistem Informasi

Skripsi dengan judul:

Rancang Bangun Sistem Informasi Berbasis Web pada Loyal Photobooth merupakan hasil karya saya sendiri bukan plagiat dari karya ilmiah yang ditulis oleh orang lain, dan semua sumber baik yang dikutip maupun dirujuk telah saya nyatakan dengan benar serta dicantumkan di Daftar Pustaka.

Jika di kemudian hari terbukti ditemukan kecurangan/ penyimpangan, baik dalam pelaksanaan skripsi maupun dalam penulisan laporan skripsi, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk Tugas akhir yang telah saya tempuh.

Tangerang, 3 Januari 2022

*materai 10.000,-

(Joti Anggoro Pratama)

(4)

iii

HALAMAN PERSETUJUAN

Skripsi dengan judul

RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH

Oleh

NIM : 00000026684

Program Studi : Sistem Informasi Fakultas : Teknik dan Informatika

Telah disetujui untuk diajukan pada

Sidang Ujian Skripsi Universitas Multimedia Nusantara Tangerang, 3 Januari 2022

Ketua Program Studi

Ririn Ikana Desanti, S.Kom., M.Kom.

Pembimbing

(5)

iv

HALAMAN PENGESAHAN

Skripsi dengan judul

“RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH”

Oleh

NIM : 00000026684

Telah diujikan pada hari Rabu, 18 Januari 2022 Pukul 15:00 s/d 17:00 dan dinyatakan

LULUS

Dengan susunan penguji sebagai berikut.

Ketua Sidang

Ir. Raymond Sunardi Oetama, MCIS.

328046803/023897

Penguji

Wira Munggana, S.Si,. M.Sc.

023860 Pembimbing

0313058001 Ketua Sistem Informasi

(6)

v

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademik Universitas Multimedia Nusantara, saya yang bertandatangan di bawah ini:

NIM : 00000026684

JenisKarya : Tesis/Skripsi/Laporan Magang

Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara Hak Bebas Royalti Nonekslusif (Non-exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul:

“RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH”

Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Non eksklusif ini Universitas Multimedia Nusantara berhak menyimpan, mengalih media / format-kan, mengelola dalam bentuk pangkalan data (database), merawat, dan mempublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis / pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya buat dengan sebenarnya.

Tangerang, 3 Januari 2022 Yang menyatakan,

(Joti Anggoro Pratama)

(7)

vi

KATA PENGANTAR

Puji dan Syukur kepada Tuhan Yang Maha Esa atas segala rahmat-nya sehingga skripsi yang berjudul “Rancang Bangun Sistem Informasi Berbasis Web Pada Loyal Photobooth” dapat diselesaikan dengan tepat waktu. Skripsi ini penulis ajukan untuk memenuhi salah satu syarat untuk mencapai gelar Strata 1, Program Studi Sistem Informasi Pada Fakultas Teknik dan Informatika, Universitas Multimedia Nusantara. Saya menyadari bahwa, tanpa bantuan dan bimbingan dari berbagai pihak, dari masa perkuliahan sampai pada penyusunan tugas akhir ini, sangatlah sulit bagi saya untuk menyelesaikan tugas akhir ini. Oleh karena itu, saya mengucapkan terima kasih sebesar-besarnya kepada:

1. Dr. Ninok Leksono selaku Rektor Universitas Multimedia Nusantara.

2. Dr. Friska Natalia, S.kom., M.T. selaku Dekan Fakultas Universitas Multimedia Nusantara.

3. Ririn Ikana Desanti, S.Kom., M.Kom. selaku Ketua Program Studi Universitas Multimedia Nusantara.

4. Ririn Ikana Desanti, S.Kom., M.Kom. sebagai Pembimbing pertama yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya tugas akhir ini.

5. Kedua Orang Tua saya yang telah memberikan semangat yang sangat besar kepada saya atas terselesainya tugas akhir ini.

6. Kepada Bapak Indra selaku pemilik Loyal Photobooth, Gracia Amalia selaku admin dan para karyawan lainnya untuk mendukung sebagai objek tugas akhir ini.

7. Sahabat terkasih yaitu Irena Krisanti, Fadjriani Anwar, Krizia Gidion, Savero Ramadhan, Dita Amalia, Flavius Ryass dan kawan lainnya yang tidak dapat disebutkan satu persatu.

(8)

vii

RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA LOYAL PHOTOBOOTH

ABSTRAK

Sistem informasi adalah sistem dalam organisasi yang merangkum persyaratan pemrosesan transaksi sehari-hari yang mendukung kemampuan operasional organisasi manajemen dan kegiatan strategis organisasi untuk menyediakan informasi yang diperlukan untuk pengambilan keputusan. Loyal Photobooth merupakan suatu usaha yang bergerak di bidang jasa foto dan cetak.

Dimana dalam proses bisnisnya yang dilakukan masih belum terkomputerisasi, terintegrasi dan tingkat akurasi yang kurang baik, seperti pencatatan penjadwalan yang masiih diketik manual, media informasinya masih menggunakan aplikasi line, absensi yang dilakukan masih manual, laporan event yang dilakukan masih menggunakan kertas dan pencatatan laporan gaji dilakukan secara mandiri.

Akibatnya kendala yang dihadapi sering terjadi dan hal tersebut mengurangi hasil kinerja dari Loyal Photobooth.

Dari permasalahan yang terjadi dalam proses bisnisnya, guna meningkatkan kinerja dari Loyal Photobooth, maka dikembakanglah sebuah sistem informasi terkait penjadwalan, absensi dan laporan gaji berbasis web. Rapid Application Development digunakan sebagai metode pengembangan sistemnya karena dirasa paling cocok untuk kebutuhan yang dapat berubah-ubah dan dengan waktu yang singkat.

Sistem informasi berbasis web telah berhasil dirancang dan dibangun pada Loyal Photobooth dengan menggunakan PHP untuk bahasa pemogramannya, serta laravel untuk frameworknya dan MySQL untuk databasenya. Sistem yang dibuat telah memiliki fitur yang dapat mengatasi permasalahan pada proses bisnis. Dengan menggunakan sistem tersebut proses bisnis akan menjadi lebih sistematis, terkomputerisasi serta terintegrasi.

Kata kunci: Absensi, Pengelolaan Gaji, Rapid Application Development, Sistem Informasi, Website.

(9)

viii

DESIGN A WEB-BASED INFORMATION SYSTEM ON A LOYAL PHOTOBOOTH

ABSTRACT

An information system is an in-organization system that summarizes the day-to-day transaction processing requirements that support an organization's operational capabilities and the organization's strategic activities to provide the information necessary for decision making. Loyal Photobooth is a business engaged in photo and print services. Where in the business process that is still not computerized, integrated and the level of accuracy is not good, such as recording scheduling that is still typed manually, the information media still uses the line application, the absence is still manual, the event report is done still using paper and the recording of salary reports is done independently. As a result, the obstacles faced often occur and it reduces the performance results of Loyal Photobooth.

From the problems that occur in the business process, in order to improve the performance of Loyal Photobooth, then a system of information related to scheduling, absenteeism and web-based salary reports. Rapid Application Development is used as a method of system development because it is considered the most suitable for needs that can be changed and with a short time.

Web-based information systems have been successfully designed and built on Loyal Photobooth by using PHP for its programming language, as well as laravel for its framework and MySQL for its databases. The system created already has features that can overcome problems in business processes. By using these systems business processes will become more systematic, computerized and integrated.

Keywords: Attendance, Information systems, Rapid Application Development, Salary Management, Website.

(10)

ix

DAFTAR ISI

HALAMAN PERNYATAAN TIDAK PLAGIAT ... ii

HALAMAN PERSETUJUAN ... iii

HALAMAN PENGESAHAN ... iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... v

KATA PENGANTAR ... vi

ABSTRAK ... vii

ABSTRACT ... viii

DAFTAR ISI ... ix

DAFTAR TABEL ... xii

DAFTAR GAMBAR ... xiii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 3

1.3 Batasan Masalah ... 4

1.4 Tujuan dan Manfaat Penelitian ... 4

1.4.1 Tujuan Penelitian ...4

1.4.2 Manfaat Penelitian ...4

1.5 Sistematika Penulisan ... 5

BAB II LANDASAN TEORI ... 6

2.1 Tinjauan Teori ... 6

2.2 Landasan Teori ... 12

2.3 Definisi Sistem Informasi ... 12

2.4 Konsep Dasar Sistem ... 13

2.4.1 Karakteristik Sistem ...16

2.4.2 Klasifikasi Sistem ...18

2.5. Definisi Informasi ... 19

2.6 Konsep Dasar UML ... 19

2.6.1 Pengertian UML ...19

2.6.2 Use Case Diagram ...20

(11)

x

2.6.3 Activity Diagram ...21

2.6.4 Sequence Diagram ...23

2.6.5 Deployment Diagram ...24

2.6.6 Class Diagram ...26

2.7 Basis Data ... 22

2.8 Rapid Application Development (RAD) ... 23

2.9 Website ... 26

2.10 PHP ... 27

2.11 Laravel ... 27

2.12 MySQL ... 28

2.13 BlackBox Testing ... 29

BAB III METODOLOGI PENELITIAN ... 30

3.1 Gambaran Umum Objek Penelitian ... 30

3.2 Metode Penelitian ... 31

3.3 Variable Penelitian ... 33

3.4 Teknik Pengumpulan Data ... 34

3.4.1 Observasi ...34

3.4.2 Wawancara ...34

3.4.3 Studi Pustaka ...34

3.5 Perancangan Sistem ... 35

3.6 Implementasi Sistem ... 35

3.7 Evaluasi Sistem ... 35

BAB IV ANALISIS DAN HASIL PENELITIAN ... 36

4.1 Hasil Analisis Data ... 36

4.1.1 Hasil Wawancara ...36

4.1.2 Hasil Kuesioner ...37

4.2 Analisa Masalah dan Kebutuhan Penelitian ... 41

4.2.1 Proses Bisnis...41

4.2.2 Kebutuhan Sistem...45

4.3 Perancangan Sistem ... 49

4.3.1 Perancangan Unified Modelling Language (UML) ...49

4.3.2 Perancangan Database ...77

(12)

xi

4.3.3 Perancangan User Interface (UI) ...83

4.4 Pembangunan coding/scripting ... 97

4.5 Development ... 98

4.5.1 Admin...99

4.5.2 Crew & Koorlap ...105

4.5.3 Finance ...108

4.6 Black Box Testing ... 110

4.7 Release ... 118

4.8 Hasil Analisa ... 119

BAB V SIMPULAN DAN SARAN ... 121

5.1 Simpulan ... 121

5.2 Saran ... 122

DAFTAR PUSTAKA ... 123

LAMPIRAN ... 126

(13)

xii

DAFTAR TABEL

Tabel 2.1 Penelitian Terdahulu ... 6

Tabel 2.2 Simbol Use Case Diagram ... 20

Tabel 2.3 Simbol Activity Diagram ... 22

Tabel 2 4 Simbol Sequence Diagram ... 23

Tabel 2 5 Simbol Deployment Diagram ... 25

Tabel 2.6 Simbol Class Diagram ... 22

Tabel 2.7 Perbandingan Metode Pengembangan Perangkat Lunak ... 24

Tabel 3.1 Kelebihan dan Kekurangan RAD ... 32

Tabel 4.1 Kebutuhan Fungsional ... 47

Tabel 4.2 Kebutuhan Non-Fungsional ... 48

Tabel 4.3 Users ... 77

Tabel 4.4 Event ... 77

Tabel 4.5 Event Crew ... 78

Tabel 4.6 Jenis Order ... 79

Tabel 4.7 Event Overhour ... 79

Tabel 4. 8 Penggajian ... 80

Tabel 4.9 Penggajian Crew ... 80

Tabel 4.10 Frame ... 81

Tabel 4.11 Backdrop ... 81

Tabel 4.12 Event Report Koorlap ... 82

Tabel 4.13 Event Report Koorlap ... 82

Tabel 4.14 Pengujian Blackbox Testing ... 110

Tabel 4.15 Hasil Analisa ... 119

(14)

xiii

DAFTAR GAMBAR

Gambar 2.1 Elemen – Elemen Sistem ... 14

Gambar 2.2 Siklus RAD ... 23

Gambar 3.1 Logo Loyal Photobooth ... 31

Gambar 4.1 Hasil Kuesioner Jenis Kelamin ... 38

Gambar 4.2 Hasil Kuesioner Jabatan ... 39

Gambar 4 3 Hasil Kuesioner Pengelolaan Data ... 39

Gambar 4.4 Hasil Kuesioner Human Error ... 39

Gambar 4.5 Hasil Kuesioner Proses Bisnis ... 40

Gambar 4.6 Hasil Kuesioner Kemudahan Absensi ... 40

Gambar 4.7 Hasil Kuesioner Sistem Komputerisasi ... 40

Gambar 4.8 Activity Diagram Proses Bisnis ... 42

Gambar 4.9 Activity Diagram Proses Bisnis Kebutuhan Sistem ... 44

Gambar 4.10 Use Case Diagram Sistem Usulan ... 49

Gambar 4.11 Activity Diagram Kelola Data User ... 50

Gambar 4.12 Activity Diagram Kelola Jenis Order ... 51

Gambar 4.13 Activity Diagram Kelola Backdrop... 52

Gambar 4.14 Activity Diagram Kelola Frame ... 53

Gambar 4.15 Activity Diagram Kelola Data Event ... 54

Gambar 4.16 Activity Diagram Setting Gaji... 55

Gambar 4.17 Activity Diagram Lihat Event ... 56

Gambar 4.18 Activity Diagram Lihat History Absen ... 57

Gambar 4.19 Activity Diagram Melakukan Check-in ... 58

Gambar 4.20 Activity Diagram Melakukan Check Out... 59

Gambar 4.21 Activity Diagram Lihat History Penggajian ... 60

Gambar 4.22 Activity Diagram Lihat Event ... 60

Gambar 4.23 Activity Diagram Lihat Absen Karyawan ... 61

Gambar 4.24 Activity Diagram Lihat Penggajian... 62

Gambar 4.25 Sequence Diagram Kelola Data User ... 63

(15)

xiv

Gambar 4.26 Sequence Diagram Kelola Jenis Order ... 64

Gambar 4.27 Sequence Diagram Kelola Jenis Backdrop ... 65

Gambar 4.28 Sequence Diagram Kelola Jenis Frame ... 66

Gambar 4.29 Sequence Diagram Kelola Event ... 67

Gambar 4.30 Sequence Diagram Kelola Setting Gaji ... 68

Gambar 4.31 Sequence Diagram Lihat Event ... 69

Gambar 4.32 Sequence Diagram Lihat History Absen ... 70

Gambar 4.33 Sequence Diagram Melakukan Check In ... 71

Gambar 4.34 Sequence Diagram Melakukan Check Out ... 71

Gambar 4.35 Sequence Diagram Lihat History Penggajian ... 72

Gambar 4.36 Sequence Diagram Lihat Laporan Event ... 73

Gambar 4.37 Sequence Diagram Lihat Absensi ... 74

Gambar 4.38 Sequence Diagram Lihat Penggajian ... 75

Gambar 4.39 Class Diagram Sistem Usulan ... 76

Gambar 4 40 Perancangan User Interface Login ... 83

Gambar 4.41 Perancangan UI Dashboard Admin ... 84

Gambar 4.42 Perancangan UI Kelola data User ... 84

Gambar 4.43 Perancangan UI Tambah Data User ... 85

Gambar 4.44 Perancngan UI Edit Data User ... 85

Gambar 4.45 Perancangan UI Kelola Jenis Order ... 86

Gambar 4.46 Perancangan UI Tambah Jenis Order ... 86

Gambar 4.47 Perancangan UI Edit Jenis Order ... 87

Gambar 4.48 Perancangan UI Kelola Backdrop ... 87

Gambar 4.49 Perancangan UI Tambah Backdrop ... 88

Gambar 4.50 Perancangan UI Edit Backdrop ... 88

Gambar 4.51 Perancangan UI Kelola Frame ... 89

Gambar 4.52 Perancangan UI Tambah Frame ... 89

Gambar 4.53 Perancangan UI Edit Frame ... 90

Gambar 4.54 Perancangan UI Kelola Event ... 90

Gambar 4.55 Perancangan UI Tambah Event ... 91

(16)

xv

Gambar 4.56 Perancangan UI Setting Gaji ... 91

Gambar 4.57 Perancangan UI Dashboard Crew & Kolap ... 92

Gambar 4.58 Perancangan UI Event ... 93

Gambar 4.59 Perancangan UI History Absen ... 93

Gambar 4.60 Perancangan History Penggajian ... 94

Gambar 4.61 Perancangan UI Detail Penggajian ... 94

Gambar 4 62 Perancangan UI Dashboard Finance ... 95

Gambar 4.63 Perancangan UI Event ... 95

Gambar 4.64 Perancangan UI Absen Karyawan... 96

Gambar 4.65 Perancangan UI Penggajian ... 96

Gambar 4.66 Perancangan UI Detail Pengajian ... 97

Gambar 4.67 Implementasi UI Login ... 98

Gambar 4.68 Implementasi UI Dashboard Admin ... 99

Gambar 4.69 Implementasi UI Kelola User ... 99

Gambar 4.70 Implementasi UI Tambah User ... 100

Gambar 4.71 Implementasi UI Edit User ... 100

Gambar 4.72 Implementasi UI Kelola Jenis Order ... 101

Gambar 4.73 Implementasi UI Tambah Jenis Order ... 101

Gambar 4.74 Implementasi UI Edit Jenis Order ... 101

Gambar 4 75 Implementasi UI Kelola Backdrop ... 102

Gambar 4 76 Implementasi UI Tambah Backdrop ... 102

Gambar 4 77 Implementasi UI Edit Backdrop ... 102

Gambar 4 78 Implementasi UI Kelola Frame ... 103

Gambar 4 79 Implementasi UI Tambah Frame... 103

Gambar 4 80 Edit Frame ... 103

Gambar 4.81 Implementasi UI Kelola Event ... 104

Gambar 4.82 Implementasi UI Tambah Event ... 104

Gambar 4.83 Implementasi UI Setting Gaji ... 105

Gambar 4.84 Implementasi UI Setting Gaji ... 105

Gambar 4.85 Implementasi UI Event Saya ... 106

(17)

xvi

Gambar 4.86 Implementasi UI History Absen ... 106

Gambar 4.87 Implementasi UI History Penggajian ... 107

Gambar 4,88 Implementasi UI Detail Penggajian ... 107

Gambar 4.89 Implementasi UI Dashboard Finance ... 108

Gambar 4.90 Implementasi UI Event... 108

Gambar 4.91 Implementasi UI Absen Karyawan ... 109

Gambar 4.92 Implementasi UI Penggajian ... 109

Gambar 4.93 Implementasi UI Detail Penggajian ... 110