Anda di halaman 1dari 170

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

JAKARTA STI&K

SKRIPSI

PERANCANGAN SISTEM MANAJEMEN TUGAS DAN LAPORAN


PROYEK PEKERJAAN BERBASIS WEB PADA PT ADIKARA
BANGUN NUSANTARA

Nama : Aditya Pratama Febriono


NPM : 10417136
Program Studi : S1 - Sistem Informasi
Dosen Pembimbing : Dr. Hariyanto

Diajukan untuk Melengkapi Syarat Mencapai Jenjang Strata Satu (S1)

JAKARTA
September 2022

i
LEMBAR PENGESAHAN

Nama : Aditya Pratama Febriono


NPM : 10417136
Program Studi : Sistem Informasi
Dosen Pembimbing : Dr. Hariyanto
Judul Penulisan : Perancangan Sistem Manajemen Tugas Dan Laporan
: Proyek Pekerjaan Berbasis Web Pada PT Adikara
: Bangun Nusantara
Tanggal Sidang : 7 September 2022
Tanggal Lulus : 7 September 2022
Dosen Penguji : 1. Dr. Bheta Agus Wardijono
: 2. Dr. Hariyanto
: 3. Fitri Sjafrina, S.Kom., MMSI.

Disetujui oleh :
Dosen Pembimbing Ka. Subag Sidang

(Dr. Hariyanto) (Fivtatianti Hendajani, S.Kom., MM.)

Ketua Program Studi Sistem Informasi

(Dr. Pipit Dewi Arnesia)

ii
PERNYATAAN ORIGINALITAS DAN PUBLIKASI

Saya yang bertanda tangan dibawah ini,


Nama : Aditya Pratama Febriono
NPM : 10417136
Judul Penulisan : Perancangan Sistem Manajemen Tugas Dan Laporan
: Proyek Pekerjaan Berbasis Web Pada PT Adikara
: Bangun Nusantara
Tanggal Sidang : 7 September 2022
Tanggal Lulus : 7 September 2022

Menyatakan bahwa tulisan ini adalah karya saya sendiri dan dapat dipublikasikan
sepenuhnya oleh STMIK JAKARTA STI&K. Segala kutipan dalam bentuk
apapun telah mengikuti kaidah, etika yang berlaku. Mengenai isi dan tulisan
adalah merupakan tanggung jawab Penulis, bukan STMIK JAKARTA STI&K.

Demikian pernyataan ini dibuat sebenarnya dan dengan penuh kesadaran.

Jakarta

Aditya Pratama Febriono

iii
ABSTRAK

Nama : Aditya Pratama Febriono


NPM : 10417136
Judul Penulisan : Perancangan Sistem Manajemen Tugas Dan Laporan
: Proyek Pekerjaan Berbasis Web Pada PT Adikara
: Bangun Nusantara
Kata Kunci : Aplikasi, Manajemen, Tugas, Proyek, PHP
Jumlah Halaman : (xvii + 129 + Lampiran)
Ringkasan :

Seiring berkembangnya teknologi, diketahui bahwa saat ini teknologi


sangat mempengaruhi kebutuhan untuk menunjang banyak pekerjaan dalam
perusahaan. Salah satunya PT Adikara Bangun Nusantara merupakan perusahaan
yang bergerak dalam penyediaan jasa dalam proyek pembangunan konstruksi.
Pada sebuah proyek pembangunan konstruksi, terdapat banyak macam tugas.
Dalam mengerjakan tugas tersebut terkadang ada yang tidak sesuai dengan tugas
yang diberikan, sehingga menimbulkan risiko yang membuat proyek menjadi
tertunda dan terlambat dari waktu yang sudah ditentukan. Pada aktivitas
pembuatan laporan, masih terjadi kesalahan dalam hal pencatatan dengan cara
menulis laporan pekerjaan pada sebuah buku. Sehingga dengan cara manual
tersebut, membuat proyek pekerjaan tersebut tidak bisa dilaporkan secara
langsung kepada manajer dan klien. Perusahaan ini belum mempunyai sistem
yang dapat memantau sebuah proyek pekerjaan sekaligus membuat daftar tugas
dan laporan secara rapi dan efisien. Tujuan dari penelitian ini merencanakan
aplikasi manajemen tugas dan laporan. Dengan adanya aplikasi tersebut dapat
mempermudah dalam memantau sebuah proyek pekerjaan secara real time,
mempermudah dalam pembagian tugas kepada masing-masing karyawan dan
mudah dalam membuat laporan pada setiap tugas. Metode yang digunakan dalam
pengembangan sistem adalah metode waterfall yang dimodelkan dengan Unified
Modeling Language (UML). Metode pengujian dalam aplikasi tersebut
menggunakan metode black box testing. Bahasa pemrograman yang digunakan
dalam pembuatan aplikasi ini dengan bahasa PHP dan menggunakan database
MySQL. Hasil dari penelitian ini adalah sebuah aplikasi manajemen tugas dan
laporan proyek pekerjaan yang berbasis web.

Dosen Pembimbing : Dr. Hariyanto


Daftar Pustaka : 22, (2003-2022)

iv
ABSTRACT

Name : Aditya Pratama Febriono


NPM : 10417136
Title : Design of Task and Report Management System
: Web Based Job Project at PT Adikara Bangun Nusantara
Keywords : Applications, Management, Task, Project, PHP
Number of Pages : (xvii + 129 + Attachments)
Summary :

As technology develops, it is known that currently technology greatly affects the


need to support many jobs within the company. One of them is PT Adikara
Bangun Nusantara, a company engaged in providing services in construction
projects. In a construction project, there are many kinds of tasks. In doing these
tasks sometimes there are things that are not in accordance with the assigned
tasks, thus creating a risk that the project becomes delayed and late from the
specified time. In reporting activities, errors still occur in terms of recording by
writing work reports in a book. So with the manual method, making the project
work cannot be reported directly to managers and clients. This company does not
yet have a system that can monitor a work project as well as make a list of tasks
and reports in a neat and efficient manner. The purpose of this study is to plan a
task management application and report. With this application, it can make it
easier to monitor a work project in real time, simplify the division of tasks to each
employee and make reports on each task. The method used in system development
is the waterfall method which is modelled with the Unified Modeling Language
(UML). The testing method in the application uses the black box testing method.
The programming language used in making this application is PHP and uses a
MySQL database. The result of this research is a task management application
web based work project report.

Supervisor : Dr. Hariyanto


References : 22, (2003-2022)

v
KATA PENGANTAR

Assalamu'alaikum Warahmatullahi Wabarakatuh.


Alhamdulillah, puji dan syukur senantiasa penulis panjatkan kehadirat
Allah SWT yang telah melimpahkan rahmat, taufik, dan hidayah-nya kepada
penulis sehingga penulis dapat menyelesaikan penulisan ilmiah ini dengan baik.
Penulisan Ilmiah ini disusun untuk memenuhi salah satu persyaratan dalam
menyelesaikan tugas penelitian ilmiah untuk jenjang Strata Satu (S1) Sistem
Informasi di Sekolah Tinggi Manajemen Informatika dan Komputer Jakarta
STI&K.
Dengan segala kerendahan hati, penulis menyadari sepenuhnya bahwa
penulisan ilmiah ini yang berjudul “Perancangan Sistem Manajemen Tugas Dan
Laporan Proyek Pekerjaan Berbasis Web Pada PT Adikara Bangun Nusantara”.
Masih banyak kekurangan dan jauh dari kesempurnaan. Meskipun demikian
penulis berharap semoga penulisan ilmiah ini dapat bermanfaat bagi semua pihak
yang membutuhkan. Penulis menyadari tanpa Dosen Pembimbing dan dorongan
dari semua pihak penulisan ini tidak akan cepat selesai. Oleh karena itu pada
kesempatan ini, izinkanlah penulis menyampaikan ucapan terima kasih yang
sebesar-besarnya diberikan kepada :
1. Ibu Dr. Lusiana ETP. selaku Ketua Sekolah Tinggi Manajemen Informatika
dan Komputer Jakarta STI&K.
2. Ibu Dr. Pipit Dewi Arnesia, selaku Ketua Program Studi Sistem Informasi
Sekolah Tinggi Manajemen Informatika dan Komputer Jakarta STI&K.
3. Ibu Fivtatianti Hendajani, S.Kom., MM., selaku kepala sub bagian sidang.
4. Bapak Dr. Hariyanto. selaku dosen pembimbing yang telah banyak
membantu dan memberikan perhatian, bimbingan, arahan serta saran yang
sangat membantu penulis dalam menyelesaikan penulisan ilmiah ini.
5. Seluruh Bapak dan Ibu dosen yang berada di lingkungan Sekolah Tinggi
Manajemen Informatika dan Komputer Jakarta STI&K yang telah
memberikan ilmu serta motivasi kepada penulis.

vi
6. Kedua Orang Tua tercinta Bapak Mulyono dan Ibu Suratmi, yang selalu
memberikan do’a kepercayaan dukungan kepada penulis dan seluruh
keluarga besar yang selalu memberikan semangat kepada penulis.
7. Teman-teman penulis yang telah banyak memberikan bantuan saran serta
motivasi kepada penulis.
8. Dan semua pihak yang membantu penulis dalam menyelesaikan penulisan
ilmiah ini yang tidak dapat disebutkan satu persatu.
Semoga Allah SWT selalu melimpahkan rahmat-nya kepada semua pihak
yang telah membantu penulis dalam penyelesaian tulisan ini. Akhir kata
diharapkan penulisan ini dapat bermanfaat bagi penulis sendiri khususnya dan
juga bagi para pembaca pada umumnya.
Wassalamualaikum Warahmatullahi Wabarakatuh.

Jakarta, September 2022

Penulis

vii
DAFTAR ISI

LEMBAR JUDUL ................................................................................................... i


LEMBAR PENGESAHAN .................................................................................... ii
PERNYATAAN ORIGINALITAS DAN PUBLIKASI ........................................ iii
ABSTRAK ............................................................................................................. iv
ABSTRACT ............................................................................................................ v
KATA PENGANTAR ........................................................................................... vi
DAFTAR ISI ........................................................................................................ viii
DAFTAR GAMBAR ............................................................................................ xii
DAFTAR TABEL ............................................................................................... xvii
1. PENDAHULUAN ....................................................................................... 1
1.1 Latar Belakang ............................................................................................ 1
1.2 Rumusan Masalah ....................................................................................... 2
1.3 Batasan Masalah .......................................................................................... 2
1.4 Tujuan Penelitian......................................................................................... 3
1.5 Metode Penelitian ........................................................................................ 3
1.5.1 Metode Pengumpulan Data ......................................................................... 3
1.5.2 Metode Pengembangan Sistem ................................................................... 3
1.5.3 Metode Pengujian ........................................................................................ 5
1.6 Sistematika Penulisan .................................................................................. 5
2. LANDASAN TEORI .................................................................................. 7
2.1 Perancangan ................................................................................................ 7
2.2 Sistem .......................................................................................................... 7
2.3 Aplikasi ....................................................................................................... 8
2.4 Manajemen .................................................................................................. 8
2.5 Tugas ........................................................................................................... 9
2.6 Laporan........................................................................................................ 9
2.7 Proyek........................................................................................................ 10
2.8 Manajemen Proyek .................................................................................... 10
2.9 Website ...................................................................................................... 11

viii
2.10 Internet ...................................................................................................... 11
2.11 Unified Modeling Language (UML) ......................................................... 12
2.11.1 Use Case Diagram ..................................................................................... 12
2.11.2 Class Diagram ........................................................................................... 14
2.11.3 Activity Diagram ....................................................................................... 16
2.11.4 Squence Diagram ...................................................................................... 18
2.12 Struktur Navigasi....................................................................................... 20
2.12.1 Struktur Navigasi Linier ............................................................................ 20
2.12.2 Struktur Navigasi Hierarchi ...................................................................... 21
2.12.3 Struktur Navigasi Non-Linier.................................................................... 21
2.12.4 Struktur Navigasi Composite .................................................................... 22
2.13 Browser ..................................................................................................... 22
2.14 XAMPP ..................................................................................................... 23
2.15 Database (Basis Data) ............................................................................... 23
2.15.1 Fungsi Database ........................................................................................ 23
2.16 My Structure Query Language (MySQL) ................................................. 24
2.16.1 Keunggulan MySQL ................................................................................. 24
2.17 Hypertext Markup Language (HTML) ..................................................... 25
2.18 Cascading Style Sheets (CSS) ................................................................... 25
2.19 Hypertext Preprocessor (PHP) .................................................................. 26
2.20 Javascript ................................................................................................... 27
2.21 Bootstrap ................................................................................................... 27
3. ANALISA DAN PEMBAHASAN ........................................................... 29
3.1 Profil Perusahaan ....................................................................................... 29
3.1.1 Visi Perusahaan ......................................................................................... 29
3.1.2 Misi Perusahaan ........................................................................................ 29
3.2 Struktur Organisasi Perusahaan ................................................................ 30
3.3 Proses Bisnis Perusahaan .......................................................................... 32
3.4 Sistem Berjalan ......................................................................................... 33
3.5 Analisa Masalah ........................................................................................ 34
3.6 Permasalahan ............................................................................................. 35

ix
3.7 Pemecahan Masalah .................................................................................. 35
3.8 Usulan Sistem Berjalan ............................................................................. 36
3.9 Analisis Sistem .......................................................................................... 37
3.10 Perancangan Struktur Navigasi ................................................................. 39
3.10.1 Struktur Navigasi Admin .......................................................................... 39
3.10.2 Struktur Navigasi Manajer ........................................................................ 40
3.10.3 Struktur Navigasi Karyawan ..................................................................... 40
3.11 Perancangan Sistem................................................................................... 40
3.11.1 Use Case Diagram ..................................................................................... 41
3.11.2 Class Diagram ........................................................................................... 44
3.11.3 Activity Diagram ....................................................................................... 46
3.11.4 Sequence Diagram ..................................................................................... 68
3.12 Perancangan Database ............................................................................... 84
3.13 Perancangan Tampilan .............................................................................. 87
3.13.1 Perancangan Tampilan Admin .................................................................. 87
3.13.2 Perancangan Tampilan Manajer ................................................................ 92
3.13.3 Perancangan Tampilan Karyawan ............................................................. 97
4. IMPLEMENTASI DAN PENGUJIAN .................................................. 101
4.1.1 Implementasi Database (Basis Data)....................................................... 101
4.1.2 Table Pekerjaan ....................................................................................... 102
4.1.3 Table Pengguna ....................................................................................... 103
4.1.4 Table Tugas ............................................................................................. 104
4.1.5 Table Laporan ......................................................................................... 105
4.2 Implementasi Tampilan ........................................................................... 105
4.2.1 Implementasi Tampilan Admin ............................................................... 106
4.2.2 Implementasi Tampilan Manajer ............................................................ 112
4.2.3 Implementasi Tampilan Karyawan ......................................................... 118
4.3 Pengujian ................................................................................................. 122
4.4 Perangkat ................................................................................................. 125
4.4.1 Perangkat Keras ....................................................................................... 125
4.4.2 Perangkat Lunak ...................................................................................... 125

x
5. PENUTUP ............................................................................................... 126
5.1 Simpulan.................................................................................................. 126
5.2 Saran ........................................................................................................ 126
DAFTAR PUSTAKA ......................................................................................... 127
LAMPIRAN ........................................................................................................ 129

xi
DAFTAR GAMBAR

Gambar 2. 1 Proses Manajemen Proyek ............................................................... 10


Gambar 2. 2 Contoh Use Case Diagram ............................................................... 13
Gambar 2. 3 Contoh Class Diagram ..................................................................... 15
Gambar 2. 4 Contoh Activity Diagram ................................................................. 17
Gambar 2. 5 Contoh Sequence Diagram ............................................................... 18
Gambar 2. 6 Contoh Struktur Navigasi Linier ...................................................... 21
Gambar 2. 7 Contoh Struktur Navigasi Hierarchi ................................................. 21
Gambar 2. 8 Contoh Struktur Navigasi Non-Linier .............................................. 22
Gambar 2. 9 Contoh Struktur Navigasi Composite .............................................. 22
Gambar 3. 1 Struktur Organisasi Perusahaan ....................................................... 30
Gambar 3. 2 Sistem Berjalan ................................................................................ 33
Gambar 3. 3 Usulan Sistem Berjalan .................................................................... 36
Gambar 3. 4 Struktur Navigasi Admin ................................................................. 39
Gambar 3. 5 Struktur Navigasi Manajer ............................................................... 40
Gambar 3. 6 Struktur Navigasi Karyawan ............................................................ 40
Gambar 3. 7 Use Case Diagram ............................................................................ 42
Gambar 3. 8 Class Diagram .................................................................................. 45
Gambar 3. 9 Activity Diagram Login ................................................................... 46
Gambar 3. 10 Activity Diagram Tambah Pekerjaan ............................................ 47
Gambar 3. 11 Activity Diagram Daftar Pekerjaan ................................................ 48
Gambar 3. 12 Activity Diagram Edit Pekerjaan ................................................... 49
Gambar 3. 13 Activity Diagram Hapus Pekerjaan ................................................ 50
Gambar 3. 14 Activity Diagram Detail Pekerjaan ................................................ 51
Gambar 3. 15 Activity Diagram Cetak Detail Pekerjaan ...................................... 52
Gambar 3. 16 Activity Diagram Tambah Tugas ................................................... 53
Gambar 3. 17 Activity Diagram Edit Tugas ......................................................... 54
Gambar 3. 18 Activity Diagram Hapus Tugas ...................................................... 55
Gambar 3. 19 Activity Diagram Lihat Tugas........................................................ 56
Gambar 3. 20 Activity Diagram Tambah Laporan ............................................... 57

xii
Gambar 3. 21 Activity Diagram Edit Laporan ...................................................... 58
Gambar 3. 22 Activity Diagram Hapus Laporan .................................................. 59
Gambar 3. 23 Activity Diagram Tambah Akun Pengguna ................................... 60
Gambar 3. 24 Activity Diagram Daftar Akun Pengguna ...................................... 61
Gambar 3. 25 Activity Diagram Edit Akun Pengguna ......................................... 62
Gambar 3. 26 Activity Diagram Hapus Akun Pengguna ...................................... 63
Gambar 3. 27 Activity Diagram Lihat Akun Pengguna ........................................ 64
Gambar 3. 28 Activity Diagram Rangkuman ....................................................... 65
Gambar 3. 29 Activity Diagram Laporan ............................................................. 66
Gambar 3. 30 Activity Diagram Cetak Laporan ................................................... 67
Gambar 3. 31 Activity Diagram Logout ............................................................... 68
Gambar 3. 32 Sequence Diagram Login ............................................................... 69
Gambar 3. 33 Sequence Diagram Tambah Pekerjaan ........................................... 70
Gambar 3. 34 Sequence Diagram Daftar Pekerjaan.............................................. 70
Gambar 3. 35 Sequence Diagram Edit Pekerjaan ................................................. 71
Gambar 3. 36 Sequence Diagram Hapus Pekerjaan.............................................. 72
Gambar 3. 37 Sequence Diagram Detail Pekerjaan .............................................. 72
Gambar 3. 38 Sequence Diagram Cetak Detail Pekerjaan .................................... 73
Gambar 3. 39 Sequence Diagram Tambah Tugas ................................................. 74
Gambar 3. 40 Sequence Diagram Edit Tugas ....................................................... 74
Gambar 3. 41 Sequence Diagram Hapus Tugas.................................................... 75
Gambar 3. 42 Sequence Diagram Lihat Tugas ..................................................... 76
Gambar 3. 43 Sequence Tambah Laporan ............................................................ 76
Gambar 3. 44 Sequence Diagram Edit Laporan.................................................... 77
Gambar 3. 45 Sequence Diagram Hapus Laporan ................................................ 78
Gambar 3. 46 Sequence Tambah Akun Pengguna ................................................ 78
Gambar 3. 47 Sequence Daftar Akun Pengguna ................................................... 79
Gambar 3. 48 Sequence Diagram Edit Akun Pengguna ....................................... 80
Gambar 3. 49 Sequence Diagram Hapus Akun Pengguna.................................... 81
Gambar 3. 50 Sequence Diagram Lihat Akun Pengguna ..................................... 81
Gambar 3. 51 Sequence Diagram Rangkuman ..................................................... 82

xiii
Gambar 3. 52 Sequence Diagram Laporan ........................................................... 83
Gambar 3. 53 Sequence Diagram Cetak Laporan ................................................. 83
Gambar 3. 54 Sequence Diagram Logout ............................................................. 84
Gambar 3. 55 Perancangan Tampilan Halaman Login Admin ............................. 87
Gambar 3. 56 Perancangan Tampilan Halaman Dashboard Admin ..................... 88
Gambar 3. 57 Perancangan Tampilan Halaman Tambah Pekerjaan Admin ......... 88
Gambar 3. 58 Perancangan Tampilan Halaman Daftar Pekerjaan Admin............ 89
Gambar 3. 59 Perancangan Tampilan Halaman Detail Pekerjaan Admin ............ 89
Gambar 3. 60 Perancangan Tampilan Halaman Rangkuman Admin ................... 90
Gambar 3. 61 Perancangan Tampilan Halaman Laporan Admin ......................... 90
Gambar 3. 62 Perancangan Tampilan Halaman Tambah Pengguna Admin ......... 91
Gambar 3. 63 Perancangan Tampilan Halaman Daftar Pengguna Admin............ 91
Gambar 3. 64 Perancangan Tampilan Halaman Kelola Akun Admin .................. 92
Gambar 3. 65 Perancangan Tampilan Halaman Login Manager .......................... 92
Gambar 3. 66 Perancangan Tampilan Halaman Dashboard Manajer ................... 93
Gambar 3. 67 Perancangan Tampilan Halaman Tambah Pekerjaan Manajer ...... 93
Gambar 3. 68 Perancangan Tampilan Halaman Daftar Pekerjaan Manajer ......... 94
Gambar 3. 69 Perancangan Tampilan Halaman Detail Pekerjaan Manajer .......... 94
Gambar 3. 70 Perancangan Tampilan Halaman Tambah Tugas Manajer ............ 95
Gambar 3. 71 Perancangan Tampilan Halaman Rangkuman Manajer ................. 95
Gambar 3. 72 Perancangan Tampilan Halaman Laporan Manajer ....................... 96
Gambar 3. 73 Perancangan Tampilan Halaman Kelola Akun Manajer ................ 96
Gambar 3. 74 Perancangan Tampilan Halaman Login Karyawan ........................ 97
Gambar 3. 75 Perancangan Tampilan Halaman Dashboard Karyawan ................ 97
Gambar 3. 76 Perancangan Tampilan Halaman Daftar Pekerjaan Karyawan ...... 98
Gambar 3. 77 Perancangan Tampilan Halaman Detail Pekerjaan Karyawan ....... 98
Gambar 3. 78 Perancangan Tampilan Halaman Tambah Laporan Karyawan ...... 99
Gambar 3. 79 Perancangan Tampilan Halaman Rangkuman Karyawan .............. 99
Gambar 3. 80 Perancangan Tampilan Halaman Kelola Akun Karyawan ........... 100
Gambar 4. 1 Implementasi Database .................................................................. 101
Gambar 4. 2 Field Table Pekerjaan ..................................................................... 102

xiv
Gambar 4. 3 Record Table Pekerjaan ................................................................. 102
Gambar 4. 4 Field Table Pengguna ..................................................................... 103
Gambar 4. 5 Record Table Pengguna ................................................................. 103
Gambar 4. 6 Field Table Tugas ........................................................................... 104
Gambar 4. 7 Record Table Tugas ....................................................................... 104
Gambar 4. 8 Field Table Laporan ....................................................................... 105
Gambar 4. 9 Record Table Laporan .................................................................... 105
Gambar 4. 10 Implementasi Tampilan Halaman Login Admin .......................... 106
Gambar 4. 11 Implementasi Tampilan Halaman Dashboard Admin .................. 106
Gambar 4. 12 Implementasi Tampilan Halaman Tambah Pekerjaan Admin ..... 107
Gambar 4. 13 Implementasi Tampilan Halaman Daftar Pekerjaan Admin ........ 107
Gambar 4. 14 Implementasi Tampilan Halaman Detail Pekerjaan Admin ......... 108
Gambar 4. 15 Implementasi Tampilan Halaman Rangkuman Admin ................ 109
Gambar 4. 16 Implementasi Tampilan Halaman Laporan Admin ...................... 109
Gambar 4. 17 Implementasi Tampilan Halaman Cetak Laporan Admin............ 110
Gambar 4. 18 Implementasi Tampilan Halaman Tambah Pengguna Admin ..... 110
Gambar 4. 19 Implementasi Tampilan Halaman Daftar Pengguna Admin ........ 111
Gambar 4. 20 Implementasi Tampilan Halaman Kelola Akun Admin ............... 111
Gambar 4. 21 Implementasi Tampilan Halaman Login Manajer ....................... 112
Gambar 4. 22 Implementasi Tampilan Halaman Dashboard Manajer ................ 112
Gambar 4. 23 Implementasi Tampilan Halaman Tambah Pekerjaan Manajer ... 113
Gambar 4. 24 Implementasi Tampilan Halaman Daftar Pekerjaan Manajer ...... 113
Gambar 4. 25 Implementasi Tampilan Halaman Detail Pekerjaan Manajer ...... 114
Gambar 4. 26 Implementasi Tampilan Halaman Cetak Detail Pekerjaan Manajer
............................................................................................................................. 115
Gambar 4. 27 Implementasi Tampilan Halaman Tambah Tugas Manajer ......... 116
Gambar 4. 28 Implementasi Tampilan Halaman Rangkuman Manajer .............. 116
Gambar 4. 29 Implementasi Tampilan Halaman Laporan Manajer .................... 117
Gambar 4. 30 Implementasi Tampilan Halaman Kelola Akun Manajer ............ 117
Gambar 4. 31 Implementasi Tampilan Halaman Login Karyawan .................... 118
Gambar 4. 32 Implementasi Tampilan Halaman Dashboard Karyawan............. 118

xv
Gambar 4. 33 Implementasi Tampilan Halaman Daftar Pekerjaan Karyawan ... 119
Gambar 4. 34 Implementasi Tampilan Halaman Detail Pekerjaan Karyawan ... 120
Gambar 4. 35 Implementasi Tampilan Halaman Tambah Laporan Karyawan .. 121
Gambar 4. 36 Implementasi Tampilan Halaman Rangkuman Karyawan........... 121
Gambar 4. 37 Implementasi Tampilan Halaman Kelola Akun Karyawan ......... 122

xvi
DAFTAR TABEL

Tabel 2. 1 Simbol Use Case Diagram ................................................................... 13


Tabel 2. 2 Simbol Class Diagram ......................................................................... 15
Tabel 2. 3 Simbol Activity Diagram ..................................................................... 17
Tabel 2. 4 Simbol Sequence Diagram ................................................................... 19
Tabel 3. 1 Perbandingan Analisis Sistem.............................................................. 38
Tabel 3. 2 Penjelasan Aktor Use Case Diagram ................................................... 41
Tabel 3. 3 Penjelasan Use Case Diagram.............................................................. 42
Tabel 3. 4 Perancangan Table Pekerjaan .............................................................. 85
Tabel 3. 5 Perancangan Table Tugas .................................................................... 85
Tabel 3. 6 Perancangan Table Laporan ................................................................. 86
Tabel 3. 7 Perancangan Table Pengguna .............................................................. 86
Tabel 4. 1 Pengujian Menu Pekerjaan................................................................. 122
Tabel 4. 2 Pengujian Menu Pengguna................................................................. 124
Tabel 4. 3 Pengujian Menu Laporan ................................................................... 124
Tabel 4. 4 Pengujian Menu Laporan ................................................................... 124

xvii
1. PENDAHULUAN

1.1 Latar Belakang


Seiring berkembangnya teknologi, diketahui bahwa teknologi sangat
mempengaruhi kebutuhan untuk menunjang banyak pekerjaan. Pada saat ini
banyak teknologi yang semakin maju dan mempunyai peran untuk mempermudah
manusia dalam melakukan kegiatan bekerja sehari-hari. Pada era globalisasi
pelayanan teknologi informasi yang cepat dan akurat serta sesuai dengan
kebutuhan sudah menjadi keharusan untuk tetap bisa bersaing dalam dunia
pekerjaan maupun bisnis. Kemajuan di bidang teknologi informasi sudah banyak
digunakan pada berbagai macam kalangan perusahaan, salah satunya pada
perusahaan yang bergerak dibidang konstruksi.
Menurut Maryati (2008), perusahaan konstruksi merupakan salah satu
usaha dalam sektor ekonomi yang berhubungan dengan suatu perencanaan,
pelaksanaan dan pengawasan suatu kegiatan konstruksi untuk membentuk suatu
bangunan atau bentuk fisik lain yang dalam pelaksanaan penggunaan dan
pemanfaatan bangunan tersebut menyangkut kepentingan dan keselamatan
masyarakat pengguna bangunan tersebut. [1]
PT Adikara Bangun Nusantara adalah sebuah badan usaha yang bergerak
dibidang jasa pembangunan konstruksi, sebagai usaha yang menghasilkan produk
berupa prasarana dan sarana fisik, industri konstruksi mempunyai peran yang
sangat penting bagi pertumbuhan perekonomian, sehingga perlu diperhatikan
berbagai permasalahan yang sering terjadi yang dapat mengakibatkan penurunan
kinerja perusahaan jasa konstruksi. Selama ini PT Adikara Bangun Nusantara
masih menggunakan cara-cara yang manual dalam mencatat, menyusun, dan
menyimpan data-data informasi tugas pada setiap pekerjaan. Seperti mencatat
proses tugas dalam suatu pekerjaan, membuat laporan pekerjaan, dan
mengarsipkan dokumen laporan pekerjaan pada sebuah buku, cara seperti itu
sudah tidak efektif lagi untuk digunakan karena menjadikan pemborosan biaya
dengan adanya penggunaan buku yang lebih banyak.

1
2

Untuk mengembangkan sistem tersebut, diperlukan suatu inovasi dalam


teknologi yang memungkinkan kita bekerja secara mudah dan cepat dalam
melakukan manajemen pengelolaan tugas terkait permasalahan diatas. Dalam
penelitian ini penulis akan membuat sebuah program aplikasi manajemen
pengelolaan tugas proyek untuk PT Adikara Bangun Nusantara sehingga
diharapkan dapat membantu dan mempermudah dalam memantau tugas pada
setiap pekerjaan menjadi lebih cepat, tepat, dan akurat dengan tingkat kesalahan
yang minimal serta menghemat waktu, tenaga, dan biaya.

1.2 Rumusan Masalah


Berdasarkan latar belakang tersebut, maka dapat diidentifikasikan
permasalahan dalam penelitian ini sebagai berikut :
1. Bagaimana cara membuat aplikasi manajemen pengelolaan tugas
dalam suatu pekerjaan proyek yang sistematis yang dapat
mendistribusikan uraian tugas kepada masing-masing karyawan.
2. Bagaimana cara untuk memantau proses pekerjaan proyek secara
berkala tanpa harus melakukan inspeksi ke lapangan.
3. Bagaimana cara membuat laporan tugas pada setiap pekerjaan proyek
secara baik dan rapi.

1.3 Batasan Masalah


Berdasarkan rumusan masalah tersebut, maka dapat dibuatkan batasan
masalah dalam penelitian ini sebagai berikut :
1. Aplikasi yang dibangun hanya meliputi manajemen pengelolaan tugas
pada suatu pekerjaan proyek beserta dengan uraian tugas yang
diberikan oleh manajer yang harus dikerjakan dan dilaporkan oleh
karyawan.
2. Target penggunaan aplikasi ini untuk manajer sebagai kepala
pekerjaan dan karyawan sebagai pelaksana pekerjaan.
3

3. Aplikasi yang dirancang yaitu berbasis web yang bisa diakses


menggunakan jaringan internet, yang digunakan untuk kalangan
pribadi PT Adikara Bangun Nusantara.

1.4 Tujuan Penelitian


Tujuan penelitian ini adalah membuat program aplikasi manajemen
pengelolaan tugas pada pekerjaan proyek, yang diharapkan dengan adanya
program ini dapat menjaga suatu pekerjaan yang sedang diimplementasikan sesuai
dengan perencanaan.

1.5 Metode Penelitian


Metode penelitian ini menggunakan dua jenis metode yaitu :

1.5.1 Metode Pengumpulan Data


Metode pengembangan sistem dilakukan dengan beberapa cara yang
antara lain :
1. Studi Pustaka
Metode studi pustaka yang dilakukan dengan cara membaca sumber-
sumber dari buku referensi, jurnal, dan artikel-artikel yang berkaitan
dengan materi penelitian.
2. Studi Lapangan
Metode studi lapangan yang dilakukan dengan cara observasi yang
merupakan teknik atau pendekatan untuk mendapatkan data primer
dengan cara mengamati langsung objek datanya, dan serta wawancara
sebagai sarana komunikasi dua arah untuk mendapatkan data dari
pengurus perusahaan PT Adikara Bangun Nusantara.

1.5.2 Metode Pengembangan Sistem


Metode yang digunakan dalam pengembangan sistem adalah metode
waterfall. Menurut Rosa dan Shalahuddin (2013), air terjun (waterfall) adalah
model sekuensial linier (sequential linier) atau alur hidup klasik (classic life
4

cycle). Model air terjun menyediakan pendekatan alur hidup perangkat lunak
secara sekuential atau terurut dimulai dari analisis, desain, pengkodean, pengujian
dan tahap pemeliharaan [2]. Metode pengembangan sistem waterfall dilakukan
dengan beberapa tahapan yang antara lain :
1. Analisis Sistem
Pada tahap ini sebelum melakukan perencanaan harus memahami
gambaran umum pada tempat penelitian dan menganalisis sistem yang
sedang berjalan. Kemudian menganalisis permasalahan yang dihadapi
supaya bisa mendapatkan pemecahan masalah pada tempat penelitian
tersebut dan mengetahui kebutuhan sistem yang diinginkan oleh
pengguna.
2. Desain Sistem
Dalam penelitian ini perencanaan desain sistem yang dilakukan
dengan cara menggunakan desain sistem dengan Unfied Modeling
Language (UML) yang diantara lainnya menggunakan use case
diagram, class diagram, activity diagram, dan sequence diagram.
3. Pengkodean
Setelah informasi dan data-data yang dibutuhkan telah terkumpul
maka dilakukan pembuatan program aplikasi. Pada pembuatan
aplikasi ini menggunakan alat bantu seperti teks editor sebagai tempat
pengkodean, browser sebagai media program aplikasi, PHP dan
Javascript sebagai bahasa pengkodean, MySQL sebagai database,
PHPMyAdmin sebagai pengelolaan database, dan dikolaborasikan
dengan kerangka kerja (framework).
4. Pengujian
Setelah pembuatan koding selesai, maka tahap selanjutnya adalah
pengujian yang dilakukan dengan salah satu metode pengujian yaitu
metode black box testing. Pengujian terlebih dahulu dilakukan untuk
mengetahui normal dan tidak normalnya pada kinerja program
aplikasi tersebut, supaya dapat mengetahui kelebihan dan
kekurangannya.
5

5. Pemeliharaan
Pada tahap ini dapat mengulangi proses pengembangan dari analisis
spesifikasi untuk perubahan sistem yang sudah ada, tetapi tidak untuk
membuat sistem baru.

1.5.3 Metode Pengujian


Metode pengujian adalah cara atau teknik untuk menguji perangkat lunak
mempunyai mekanisme untuk menentukan data uji yang dapat menguji perangkat
lunak secara lengkap dan mempunyai kemungkinan tinggi untuk menemukan
kesalahan. Menurut Khan, dalam Mustaqbal, Dkk (2015) Ada beberapa cara
pengujian perangkat lunak, antara lain :
1. Pengujian White Box.
2. Pengujian Black Box. [3]
Black Box Testing berfokus pada spesifikasi fungsional dari perangkat
lunak. Pengujian tersebut dapat mendefinisikan kumpulan kondisi input dan
melakukan pengetesan pada spesifikasi fungsional program. Black box testing
bukanlah solusi alternatif dari white box testing tapi lebih merupakan pelengkap
untuk menguji hal-hal yang tidak dicakup oleh white box testing. Black box
testing cenderung untuk menemukan hal-hal berikut :
1. Fungsi yang tidak benar atau tidak ada.
2. Kesalahan antarmuka (interface errors).
3. Kesalahan pada struktur data dan akses basis data.
4. Kesalahan performansi (performance errors)

1.6 Sistematika Penulisan


Dalam sistematika penulisan ini disusun dengan susunan pendahuluan
yang membahas mengenai latar belakang, masalah serta batasan masalah, tujuan
penelitian, metode penelitian serta sistematika penulisan. Selanjutnya adalah
landasan teori yang sesuai dengan judul yang dibuat dan juga uraian teori
pengertian dari aplikasi, website, dan lain-lain. Berikutnya adalah analisa dan
pembahasan masalah yang menguraikan tentang analisis perancangan dan
6

mengatasi permasalahan yang ada dengan mengimplementasikan pada program


aplikasi berbasis website, kemudian ada implementasi dari program aplikasi
tersebut dengan melampirkan penulisan script coding atau source code beserta
penjelasan. Terakhir adalah kesimpulan yang mengulas secara garis besar poin
pada penelitian ini kepada pembaca atau kepada pihak yang akan melakukan
pengembangan penelitian ini secara lebih lanjut.
2. LANDASAN TEORI

2.1 Perancangan
Menurut Soetam Rizky (2011), perancangan adalah sebuah proses untuk
mendefinisikan sesuatu yang akan dikerjakan dengan menggunakan teknik yang
bervariasi serta didalamnya melibatkan deskripsi mengenai arsitektur serta detail
komponen dan juga keterbatasan yang akan dialami dalam proses pengerjaannya.
[4]
Perancangan merupakan penentuan proses dan data yang diperlukan oleh
sistem baru. Manfaat tahap perancangan sistem ini memberikan gambaran
rancangan bangun yang lengkap sebagai pedoman bagi programmer dalam
mengembangkan aplikasi. Sesuai dengan komponen sistem yang
dikomputerisasikan, maka yang harus didesain dalam tahap ini mencakup
hardware atau software, database dan aplikasi.
Dapat disimpulkan bahwa perancangan adalah tahapan setelah analisis
sistem yang tujuannya untuk menghasilkan rancangan yang memenuhi kebutuhan
yang ditentukan selama tahap analisis.

2.2 Sistem
Menurut Susanto (2017), sistem adalah seperangkat unsur yang saling
terikat dalam suatu antar relasi diantara unsur-unsur tersebut dengan lingkungan.
[5]
Adapun pengertian sistem dan menghasilkan informasi sebagaimana yang
dikemukakan oleh The American National Standards Committee dalam La Midjan
dan Susanto adalah sistem dalam pengolahan data, suatu kumpulan dari manusia,
mesin dan metode yang terorganisir untuk memenuhi seperangkat fungsi. Sistem
terdiri dari tiga unsur yaitu: input (masukan), proses dan output (keluaran). Input
merupakan komponen penggerak atau pemberi tenaga di mana sistem itu
dioperasikan, sedangkan output adalah hasil operasi. Dalam pengertian sederhana
output berarti yang menjadi tujuan sasaran atau target pengoperasian suatu sistem

7
8

sedangkan proses merupakan aktivitas yang dapat mentransformasikan input


menjadi output.

2.3 Aplikasi
Aplikasi adalah software yang dibuat oleh suatu perusahaan komputer
yang digunakan untuk mengerjakan tugas-tugas tertentu, misalnya Microsoft
Office. Aplikasi berasal dari kata application yang artinya penerapan lamaran
penggunaan. Jadi aplikasi merupakan sebuah transformasi dari sebuah
permasalahan atau pekerjaan berupa hal yang sulit dipahami menjadi lebih
sederhana, mudah, dan dapat dimengerti oleh pengguna. Sehingga adanya
aplikasi, sebuah permasalahan akan terbantu lebih cepat dan tepat. [6]
Dapat disimpulkan bawa aplikasi disebut sebagai perangkat lunak,
merupakan program komputer yang isi instruksinya dapat diubah dengan mudah.
Aplikasi pada umumnya digunakan untuk mengontrol perangkat keras untuk
melakukan proses perhitungan, dan berinteraksi dengan aplikasi yang lebih
mendasar lainnya (seperti sistem operasi, dan bahasa pemrograman).

2.4 Manajemen
Manajemen merupakan suatu proses yang terdiri dari perencanaan,
pengarahan, pengorganisasian, dan pengawasan yang dilakukan untuk
menentukan dan mencapai tujuan yang telah ditetapkan dengan menggunakan
manusia atau sumber daya lainnya. [7]
Istilah manajemen berasal dari kata kerja to manage yang berarti
menangani, atau mengatur. Dari pengertian pengelolaan di atas, dapat
disimpulkan bahwa pengertian pengelolan yaitu bukan hanya melaksanakan suatu
kegiatan, yang meliputi fungsi-fungsi manajemen, seperti perencanaan,
pelaksanaan dan pengawasan untuk mencapai tujuan secara efektif dan efisien.
Tujuan manajemen adalah mendapatkan metode atau cara teknis yang
paling baik agar dengan sumber-sumber daya yang terbatas diperoleh hasil
maksimal dalam hal ketepatan, kecepatan, penghematan dan keselamatan kerja
komprehensif.
9

2.5 Tugas
Tugas secara umum merupakan hal-hal yang harus bahkan wajib
dikerjakan oleh seorang anggota organisasi atau pegawai dalam suatu instansi
secara rutin sesuai rutin dengan kemampuan yang dimilikinya untuk
menyelesaikan program yang telah dibuat berdasarkan tujuan, visi dan misi suatu
organisasi.
Adapun definisi lainnya menurut John & Marry Miner dalam Moekjiat
(1998), menyatakan “tugas adalah kegiatan pekerjaan tertentu yang dilakukan
untuk suatu tujuan khusus”. Sedangkan menurut Moekjiat (1998), “tugas adalah
suatu bagian atau satu unsur atau satu komponen dari suatu jabatan. Tugas adalah
gabungan dari dua unsur atau lebih menjadi suatu kegiatan yang lengkap”.
Berdasarkan definisi tugas diatas, dapat kita simpulkan bahwa tugas adalah
kesatuan pekerjaan atau kegiatan yang paling utama dan rutin dilakukan oleh para
pegawai dalam sebuah organisasi yang memberikan gambaran tentang ruang
lingkup atau kompleksitas jabatan atau organisasi demi mencapai tujuan tertentu.

2.6 Laporan
Laporan memegang peranan penting dalam sebuah organisasi, karena
memberikan informasi yang didapat melalui hasil proses mengolah data, hasil
penelitian atau hasil suatu tugas atau pekerjaan.
Menurut Priansa (2017), mengemukakan bahwa laporan adalah setiap
tulisan yang berisi hasil pengolahan data informasi, serta merupakan alat
komunikasi yang di dalamnya terdapat beberapa kesimpulan atau rekomendasi
dari fakta atau keadaan yang telah diselidiki. [8]
Laporan adalah setiap tulisan berisi fakta/hasil pengolahan data yang
berkenaan dengan tanggung jawab pelapor dan berwujud penyampaian
ide/informasi dari satu pihak ke pihak lainnya untuk kepentingan organisasi dalam
mencapai suatu tujuan.
10

2.7 Proyek
Definisi proyek dapat diartikan gabungan dari sumber-sumber daya seperti
manusia, material, peralatan dan modal/biaya yang dihimpun dalam suatu wadah
organisasi sementara untuk mencapai sasaran dan tujuan. [9]
Proyek merupakan usaha sementara untuk membuat produk, layanan dan
hasil yang unik. Sifat sementara proyek menunjukan bahwa proyek memiliki awal
dan akhir. Proyek akan berakhir ketika tujuan proyek tercapai atau tidak ada
kebutuhan lagi dari proyek. Sebuah proyek juga dapat dihentikan jika klien
(pelanggan, sponsor, investor) ingin mengakhiri proyek. Sementara bukan berarti
proyek itu pendek. Hal ini mengacu pada keterlibatan dan umur dari proyek
tersebut.
Jadi dapat disimpulkan bahwa proyek adalah pekerjaan sementara yang
unik, kompleks, dan terhubung dengan aktivitas serta tugas yang mempunyai
tujuan dan harus diselesaikan dengan waktu yang spesifik, dengan anggaran yang
sesuai, dan berdasarkan spesifikasi.

2.8 Manajemen Proyek


Website Manajemen proyek adalah penerapan ilmu pengetahuan, keahlian
dan keterampilan, cara teknis yang terbaik dan dengan sumber daya yang terbatas,
untuk mencapai sasaran dan tujuan yang telah ditentukan agar mendapatkan hasil
yang optimal dalam hal kinerja biaya, mutu dan waktu, serta keselamatan kerja.
[9]

Gambar 2. 1 Proses Manajemen Proyek


Dari gambar 2.1 Dapat diartikan bahwa proses manajemen proyek dimulai
dari kegiatan perencanaan hingga pengendalian yang didasarkan atas input-input
seperti tujuan dan sasaran proyek, informasi dan data yang digunakan, serta
11

penggunaan sumber daya yang benar dan sesuai dengan kebutuhan yang
diperlukan.
Dalam proses sesungguhnya, pemimpin dalam organisasi proyek
mengelola dan mengarahkan segala perangkat dan sumber daya yang ada dengan
kondisi terbatas, tetapi berusaha memperoleh pencapaian paling maksimal yang
sesuai dengan standar kinerja proyek dalam hal biaya, mutu, waktu dan
keselamatan kerja yang telah ditetapkan sebelumnya. [9]

2.9 Website
Website atau web dapat diartikan sebagai kumpulan halaman yang berisi
informasi data digital baik berupa teks, gambar, animasi, suara, dan video atau
gabungan dari semuanya yang disediakan melalui jalur koneksi internet sehingga
dapat diakses dan dilihat oleh semua orang di seluruh dunia. Halaman website
dibuat menggunakan bahasa standar yaitu HTML (Hypertext Markup Language).
Script HTML ini akan diterjemahkan oleh web browser sehingga dapat
ditampilkan dalam bentuk informasi yang dapat dibaca semua orang. [10]
Web dapat diartikan sebagai kumpulan halaman-halaman yang digunakan
untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara dan
atau gabungan dari semuanya itu baik bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing
dihubungkan dengan jaringan-jaringan halaman (hyperlink).

2.10 Internet
Internet adalah salah satu bentuk media komunikasi dan informasi
interaktif. Wujud internet adalah jaringan komputer yang terhubung di seluruh
dunia. Internet digunakan untuk mengirim informasi antar komputer di seluruh
dunia sehingga melalui internet kita bisa mengakses dan bertukar informasi secara
cepat. [11]
Dalam mengatur integrasi dan komunikasi jaringan, digunakan standar
protokol internet yaitu TCP/IP. TCP bertugas untuk memastikan bahwa semua
hubungan bekerja dengan baik, sedangkan IP bertugas untuk mentransmisikan
12

paket data dari satu komputer ke komputer lainnya. Sejarah internet dimulai dari
proyek ARPA yang dibentuk tahun 1969 oleh Departemen Pertahanan Amerika
Serikat. Proyek ini kemudian dikenal dengan ARPANET (Advanced Research
Project Agency Network) yang melakukan riset tentang cara menghubungkan
komputer satu dengan komputer lainnya agar bisa saling berkomunikasi. Pada
tahun 1970, proyek ini berhasil menghubungkan lebih dari 10 komputer dalam
bentuk jaringan dan beberapa tahun kemudian, hasil riset proyek ini
dikembangkan di luar Amerika. Karena jumlah komputer yang terhubung semakin
banyak, maka pada tahun 1980 dibuatlah protokol resmi yang kemudian dikenal
dengan TCP/IP (Transmission Control Protocol Internet Protocol).

2.11 Unified Modeling Language (UML)


Menurut Shalahuddin (2016), UML (Unified Modeling Language) adalah
salah satu standar bahasa yang banyak digunakan di dunia industri untuk
mendefinisikan requirement, membuat analisis & desain, serta menggambarkan
arsitektur dalam pemrograman berorientasi objek. [2]
Unified Modeling Language (UML) adalah satu kumpulan konvensi
permodelan yang digunakan untuk menentukan atau menggambarkan sebuah
sistem perangkat lunak yang terkait dengan objek. UML tidak menentukan sebuah
metode untuk pengembangan sistem, UML hanya sebuah notasi standar dalam
memodelkan objek.
UML memiliki beberapa diagram yang mampu membantu pengembang
mengkomunikasikan sistem yang akan dibuat, diagram-diagram tersebut antara
lain adalah use case diagram, class diagram, class diagram, dan sequence
diagram.

2.11.1 Use Case Diagram


Menurut Shalahuddin (2016), Use case diagram merupakan pemodelan
untuk kelakuan (behavior) sistem informasi yang akan dibuat. Use case diagram
adalah deskripsi dari fungsi sistem dari perspektif eksternal user dan dalam
13

sebuah cara yang dimengerti oleh mereka agar maksud yang diinginkan dapat
digambarkan secara akurat dan menyeluruh tentang proses bisnis atau event.
Use Case direpresentasikan secara grafik dengan sebuah object elips
dengan nama use case di atas atau di bawah objek elips tersebut. Sebuah use case
diagram merepresentasikan satu tujuan dari sistem dan mendeskripsi sebuah
urutan dari aktivitas dan interaksi user untuk mencapai tujuan tersebut. Sebuah
use case itu sendiri tidak dianggap sebagai sebuah kebutuhan fungsional, tapi
sebagai skenario yang menceritakan tentang satu atau lebih kebutuhan sistem. Use
case digunakan untuk secara tekstural menggambarkan sekuensi langkah-langkah
dari setiap interaksi. Pada gambar 2.2 terdapat contoh model use case diagram.

Gambar 2. 2 Contoh Use Case Diagram

Pada tabel 2.1 dibawah ini terdapat penjelasan masing-masing simbol dari
use case diagram sebagai berikut :
Tabel 2. 1 Simbol Use Case Diagram
No Nama Simbol Deskripsi
1 Use Case Fungsionalitas yang disediakan
sistem sebagai unit-unit yang saling
bertukar pesan antar unit atau aktor;
14

No Nama Simbol Deskripsi


biasanya dinyatakan dengan
menggunakan kata kerja di awal
frase nama use case.
2 Actor / Aktor Actor/Aktor adalah pengguna
sistem. Aktor tidak hanya manusia
saja, jika sebuah sistem
berkomunikasi dengan aplikasi lain
dan membutuhkan input atau
memberikan output, maka aplikasi
tersebut juga bisa dianggap sebagai
aktor.
3 Association / Association/Asosiasi digunakan
Asosiasi untuk menghubungkan actor
dengan use case. Association
digambarkan dengan sebuah garis
yang menghubungkan antara actor
dan use case.

2.11.2 Class Diagram


Class diagram adalah sebuah penggambaran visual dari sebuah struktur
objek statik sebuah sistem, yang menampilkan objek kelas-kelas pada sistem yang
terdiri dari hubungan-hubungan antar objek kelas.
Class-class ditentukan/ditemukan dengan cara memeriksa objek-objek
dalam sequence diagram dan collaboration diagram. Sebuah class digambarkan
seperti sebuah bujur sangkar dengan tiga bagian ruangan. Class sebaiknya diberi
nama menggunakan kata benda sesuai dengan domain/bagian/kelompoknya. Class
diagram menggambarkan struktur dan deskripsi class, package dan object serta
hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan lain-lain.
Pada gambar 2.3 terdapat contoh model class diagram.
15

Gambar 2. 3 Contoh Class Diagram

Pada tabel 2.2 dibawah ini terdapat penjelasan masing-masing simbol dari
class diagram sebagai berikut :
Tabel 2. 2 Simbol Class Diagram
No Nama Simbol Deskripsi
1 Class / Kelas Class adalah blok-blok
pembangun pada pemrograman
berorientasi objek. Sebuah kotak
yang terbagi atas tiga bagian.
Bagian atas adalah nama class.
bagian tengah mendefinisikan
properti atribut bagian akhir
mendefinisikan method-method
dari sebuah class.
2 Interface / Sama dengan konsep interface
Antarmuka dalam pemrograman berorientasi
objek.
3 Association / Relasi antar kelas dengan makna
Asosiasi umum, asosiasi biasanya juga
disertai dengan multiplicity.
4 Directed Relasi antar kelas dengan makna
Association / kelas yang satu digunakan oleh
16

No Nama Simbol Deskripsi


Asosiasi kelas yang lain, asosiasi biasanya
Berarah juga disertai dengan multiplicity.
5 Generalization / Relasi antar kelas dengan makna
Generalisasi generalisasi spesialisasi (umum
khusus).
6 Dependency / Relasi antar kelas dengan makna
Kebergantungan kebergantungan antar kelas.
7 Aggregation / Relasi antar kelas dengan makna
Agregasi semua bagian (whole-part).

2.11.3 Activity Diagram


Menurut Shalahuddin (2016), Activity diagram menggambarkan workflow
(aliran kerja) atau aktivitas dari sebuah sistem atau proses bisnis atau menu yang
ada pada perangkat lunak.
Activity diagram adalah teknik untuk mendeskripsikan logika procedural,
proses bisnis, dan aliran kerja dalam banyak kasus activity diagram mempunyai
peran seperti halnya flowchart, akan tetapi perbedaanya dengan flowchart adalah
activity diagram bisa mendukung perilaku paralel sedangkan flowchart tidak bisa.
Diagram ini menggambarkan berbagai alir aktivitas dalam sistem yang sedang
dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi,
dan bagaimana sistem berakhir. Pada gambar 2.4 terdapat contoh model class
diagram.
17

Gambar 2. 4 Contoh Activity Diagram

Pada tabel 2.3 dibawah ini terdapat penjelasan masing-masing simbol dari
activity diagram sebagai berikut :
Tabel 2. 3 Simbol Activity Diagram
No Nama Simbol Deskripsi
1 Initial Node / Status awal aktivitas sistem, sebuah
Status Awal diagram aktivitas memiliki sebuah
status awal.
2 Final Node / Status akhir yang dilakukan sistem,
Status Akhir sebuah diagram aktivitas memiliki
sebuah status akhir.
3 Activity / Aktivitas yang dilakukan sistem,
Aktivitas aktivitas biasanya diawali dengan
kata kerja.
4 Decision / Digunakan untuk menggambarkan
Percabangan suatu keputusan atau tindakan yang
harus diambil pada kondisi tertentu.
5 Connector / Digunakan untuk menghubungkan
18

No Nama Simbol Deskripsi


Konektor satu simbol dengan simbol lainnya.
6 Join / Asosiasi penggabungan dimana
Penggabungan lebih dari satu aktivitas
digabungkan menjadi satu.

2.11.4 Squence Diagram


Menurut Shalahuddin (2016), Sequence diagram menggambarkan
kelakuan objek pada use case dengan mendeskripsikan waktu hidup objek dan
message yang dikirim dan diterima antar objek.
Sequence adalah diagram yang menggambarkan kelakuan objek pada use
case dengan mendefinisikan waktu hidup objek dengan pesan yang dikirimkan
dan diterima antar objek. Oleh karena untuk menggambarkan diagram sequence
maka harus diketahui objek-objek yang terlibat dalam sebuah use case serta
metode-metode yang dimiliki kelas yang di instansikan menjadi objek itu.
Membuat diagram sequence juga dibutuhkan untuk melihat skenario yang
ada pada use case. Banyaknya sequence diagram yang harus digambar adalah
minimal sebanyak pendefinisian use case yang memiliki proses sendiri atau yang
penting semua use case yang telah didefinisikan interaksi jalannya pesan sudah
dicakup pada sequence diagram sehingga semakin banyak use case yang
didefinisikan maka diagram sekuen yang harus dibuat juga semakin banyak. Pada
gambar 2.5 terdapat contoh model sequence diagram.

Gambar 2. 5 Contoh Sequence Diagram


19

Pada tabel 2.4 dibawah ini terdapat penjelasan masing-masing simbol dari
sequence diagram sebagai berikut :
Tabel 2. 4 Simbol Sequence Diagram
No Nama Simbol Deskripsi
1 Actor / Aktor Orang, proses, atau sistem lain
yang berinteraksi dengan sistem
informasi yang akan dibuat diluar
sistem informasi yang akan dibuat
itu sendiri, jadi walaupun simbol
dari aktor adalah gambar orang,
tapi aktor belum tentu merupakan
orang biasanya dinyatakan
menggunakan kata benda di awal
frase nama aktor.
2 Life Line / Menyatakan kehidupan suatu objek.
Garis Hidup

3 Object / Objek Menyatakan objek yang


berinteraksi pesan.
4 Create / Pesan Menyatakan suatu objek membuat
Tipe Create objek yang lain, arah panah
mengarah pada objek yang dibuat.
5 Call / Pesan Menyatakan suatu objek
Tipe Call memanggil operasi/metode yang
ada pada objek lain atau dirinya
sendiri.
6 Send / Pesan Menyatakan bahwa suatu objek
Tipe Send mengirimkan data/masukan/
informasi ke objek lainnya, arah
panah mengarah pada objek yang
20

No Nama Simbol Deskripsi


dikirimi.
7 Destroy / Menyatakan suatu objek
Pesan Tipe mengakhiri hidup objek yang lain,
Destroy arah panah mengarah pada objek
yang diakhiri, sebaiknya jika ada
create maka ada destroy.
8 Return / Pesan Menyatakan bahwa suatu objek
Tipe Return yang telah menjalankan suatu
operasi atau metode menghasilkan
suatu kembalian ke objek tertentu,
arah panah mengarah pada objek
yang menerima kembalian.
9 Time On / Menyatakan objek dalam keadaan
Waktu Aktif aktif dan berinteraksi, semua yang
terhubung dengan waktu aktif ini
adalah sebuah tahapan yang
dilakukan di dalamnya.

2.12 Struktur Navigasi


Menurut Binanto (2010), struktur navigasi adalah gabungan dari struktur
referensi informasi situs web dan mekanisme link yang mendukung pengunjung
untuk melakukan penjelajahan situs. [12]
Struktur navigasi juga dapat disebut juga sebagai rancangan hubungan dan
rantai kerja dari beberapa area yang berbeda dan dapat membantu
mengorganisasikan seluruh elemen pembuatan website.

2.12.1 Struktur Navigasi Linier


Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang
berurut yang menampilkan satu demi satu tampilan layar secara berurut menurut
urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu
21

halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman
sebelumnya atau dua halaman sesudahnya, pengguna akan melakukan navigasi
secara berurutan, dalam frame atau byte informasi satu ke yang lainnya. Pada
gambar 2.6 terdapat contoh model struktur navigasi linier.

Gambar 2. 6 Contoh Struktur Navigasi Linier

2.12.2 Struktur Navigasi Hierarchi


Struktur dasar ini disebut juga struktur navigasi hirarki dengan
percabangan karena pengguna melakukan navigasi di sepanjangan cabang pohon
struktur yang terbentuk oleh logika isi. Pada gambar 2.7 terdapat contoh model
struktur navigasi hirarki.

Gambar 2. 7 Contoh Struktur Navigasi Hierarchi

2.12.3 Struktur Navigasi Non-Linier


Struktur navigasi non-linier merupakan pengembangan dari struktur
navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang.
Percabangan yang dibuat pada struktur non-linier ini walaupun terdapat
percabangan tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu
tidak ada master page dan slave page, pengguna akan melakukan navigasi dengan
bebas melalui isi proyek dengan tidak terkait dengan jalur yang sudah ditentukan
sebelumnya. Pada gambar 2.8 terdapat contoh model struktur navigasi non-linier.
22

Gambar 2. 8 Contoh Struktur Navigasi Non-Linier

2.12.4 Struktur Navigasi Composite


Struktur navigasi composite (campuran) dapat melakukan navigasi dengan
bebas (secara non-linier), tetapi terkadang dibatasi presentasi linier film atau
informasi penting dan pada data yang paling terorganisasi secara logis pada suatu
hirarki. Pada gambar 2.9 terdapat contoh model struktur navigasi campuran.

Gambar 2. 9 Contoh Struktur Navigasi Composite

2.13 Browser
Browser adalah aplikasi yang kita gunakan untuk mengakses halaman
suatu website dan menjelajahi isi dari website tersebut. Tanpa web browser kita
tidak dapat menjelajahi situs-situs yang ada di seluruh dunia. Browser bisa
dikatakan sebagai perangkat lunak pelengkap dalam berhubungan internet.
Browser adalah program komputer yang dapat digunakan oleh pengunjung untuk
menjelajahi atau mengunjungi sebuah website dan menampilkan halaman website
tersebut. Browser pertama dikembangkan oleh Netscape. [13]
23

2.14 XAMPP
XAMPP merupakan paket aplikasi yang memudahkan dalam menginstal
modul, PHP, Apache Web Server, dan MySQL Database. Selain itu XAMPP
dilengkapi oleh berbagai jenis fasilitas lain yang akan memberikan kemudahan
dalam mengembangkan situs web berbasis PHP. XAMPP merupakan aplikasi
gratis dan tersedia untuk platform Linux, Windows, MacOS dan Solaris. Aplikasi
ini dikembangkan oleh Kay Vogelgeang, Carsten Wiedman dan Kai “Oswand”
Saidler dibawah lisensi GNU (General Public License). [14]

2.15 Database (Basis Data)


Menurut Kadir.A (2003), database (basis data) merupakan kumpulan data
yang saling berhubungan. Hubungan antar data dapat ditunjukan dengan adanya
field/kolom kunci dari tiap file/tabel yang ada. Dalam satu file atau table terdapat
record–record yang sejenis, sama besar, sama bentuk, yang merupakan satu
kumpulan entitas yang seragam. Satu record (umumnya digambarkan sebagai
baris data) terdiri dari field yang saling berhubungan menunjukan bahwa field
tersebut dalam satu pengertian yang lengkap dan disimpan dalam satu record. [15]

2.15.1 Fungsi Database


Database memiliki fungsi dalam segala penyimpanan, adapun fungsi dari
database sebagai berikut :
1. Mengelompokan data, database bertujuan untuk mengelompokan data
agar mudah dipahami.
2. Menghindari terjadinya duplikasi atau inkonsistensi data.
3. Menjamin kualitas data dan informasi yang diakses sesuai dengan
yang dimasukan (integritas data).
4. Menjadi solusi dalam proses penyimpanan sebuah data, terutama data
yang besar.
5. Menunjang kinerja aplikasi yang membutuhkan sebuah penyimpanan
data.
24

2.16 My Structure Query Language (MySQL)


Menurut Sidik (2005), MySQL merupakan software sistem manajemen
database (Database Management System/DBMS) yang sangat populer dikalangan
pemrograman web, terutama di lingkungan Linux dengan menggunakan script
PHP dan Perl. [16]
My Structure Query Language (MySQL) adalah salah satu jenis database
server yang digunakan untuk membangun aplikasi web yang menggunakan
database sebagai sumber dan pengelolaan datanya. MySQL juga digunakan
sebagai bahasa dasar untuk mengakses database sehingga mudah digunakan,
kinerja query cepat, dan mencukupi untuk kebutuhan database perusahaan-
perusahaan skala menengah sampai terkecil. MySQL bersifat open source dan
free pada berbagai platform (kecuali windows, yang bersifat shareware).
MySQL merupakan database yang pertama kali didukung oleh bahasa
pemrograman script untuk internet (PHP dan Perl). MySQL dan PHP dianggap
seperti pasangan software pengembang aplikasi web yang ideal. MySQL lebih
sering digunakan untuk membangun aplikasi berbasis web, umumnya
pengembangan aplikasi menggunakan pemrograman script PHP. [17]

2.16.1 Keunggulan MySQL


MySQL memiliki keunggulan diantara pengelola database lainnya, yaitu
sebagai berikut :
1. Cepat, handal dan mudah dalam penggunaannya. MySQL lebih cepat
tiga sampai empat kali dari pada database server komersial yang
beredar saat ini, mudah diatur dan tidak memerlukan seseorang yang
ahli untuk mengatur administrasi pemasangan MySQL.
2. Didukung oleh beberapa bahasa, database server MySQL dapat
memberikan pesan error dalam beberapa bahasa seperti Belanda,
Portugis, Spanyol, Inggris, Perancis, Jerman, dan Italia.
3. Mampu membuat tabel berukuran sangat besar, 24 ukuran maksimal
dari tabel yang dapat dibuat dengan MySQL adalah 4 GB sampai
25

dengan ukuran file yang dapat ditangani oleh sistem operasi yang
dipakai.

2.17 Hypertext Markup Language (HTML)


HTML merupakan singkatan dari HyperText Markup Language, adalah
suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang
untuk digunakan tanpa ketergantungan pada suatu platform tertentu. Dokumen
HTML adalah suatu dokumen teks biasa, dan disebut markup language karena
mengandung tag tertentu yang digunakan untuk menentukan tampilan suatu teks
dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada dokumen
HTML yang termasuk sistem hypertext, kita tidak harus membaca dokumen
tersebut secara urut dari atas ke bawah atau sebaliknya, tetapi kita dapat menuju
topik tertentu secara langsung dengan menggunakan teks penghubung yang akan
membawa anda ke suatu topik atau dokumen lain secara langsung. [18]

2.18 Cascading Style Sheets (CSS)


Menurut Didik Setiawan (2017). CSS merupakan singkatan dari
Cascading Style Sheet adalah aturan dalam pembuatan web untuk mengatur
komponen yang ada sehingga akan lebih terstruktur. Dengan CSS dapat mengatur
semua komponen yang ada misalnya warna, posisi komponen, jarak antar
komponen dan lainnya. [19]
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman
yang sama dengan format yang berbeda. CSS merupakan aturan untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam, namun CSS bukan merupakan bahasa pemrograman.
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML CSS berguna untuk mengatur style,
misalnya heading, body text, footer, images dan style lainnya untuk dapat
digunakan bersama-sama dalam beberapa berkas dan dapat mengendalikan
ukuran, gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, spasi
26

antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah dan parameter
lainnya

2.19 Hypertext Preprocessor (PHP)


PHP (Hypertext Preprocessor) adalah bahasa script yang dapat
ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk membuat
program situs web dinamis. PHP sering juga digunakan untuk membangun sebuah
CMS. PHP adalah bahasa pemrograman script server-side yang didesain untuk
pengembangan web. Disebut bahasa pemrograman server-side karena PHP
diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa
pemrograman client-side seperti JavaScript yang diproses pada web browser
(client). PHP dapat digunakan dengan gratis (free) dan bersifat open source. PHP
dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General
Public License (GPL) yang biasa digunakan untuk proyek open source.
Kemudahan dan kepopulerannya PHP sudah menjadi standar bagi programer web
di seluruh dunia. [20]
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995, yang pada
saat itu PHP masih bernama Form Interpreted (FI) yang wujudnya berupa
sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Pada
November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah 10
diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-
modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Juga
ditambahkan fasilitas untuk form HTML dan koneksi MySQL.
Tidak lama setelah versi 2.0 rilis, kemudian meluncurlah versi 3.0 dan
versi 4.0 dan seterusnya yang membawa begitu banyak perubahan besar.
Terutama pada kemampuannya untuk membangun aplikasi web kompleks tetapi
tetap memiliki kecepatan dan stabilitas yang tinggi. Karena PHP merupakan
scripting server-side maka jenis bahasa pemrograman ini nantinya script/program
tersebut akan dijalankan oleh server. Berbeda dengan javascript yang client-side.
PHP adalah bahasa pemrograman umum yang berarti PHP dapat disematkan ke
27

dalam kode HTML, atau dapat digunakan dalam kombinasi dengan berbagai
sistem template web, sistem manajemen konten web, dan kerangka kerja web.

2.20 Javascript
Javascript adalah bahasa script yang berjalan pada web browser (sebagai
client server programming) dan digunakan untuk menyediakan akses script untuk
objek yang dimasukan (embedded) di aplikasi lain. Javascript merupakan nama
implementasi dari Netscape Communications Corporation untuk ECMA script
standard, yaitu suatu bahasa script yang didasarkan pada konsep pemrograman
berbasis prototipe. [21]
Javascript bergantung kepada browser yang memanggil halaman web yang
berisi script-script. Javascript juga tidak memerlukan kompilator atau penterjemah
khusus untuk menjalankan karena pada kenyataannya kompilator Javascript
sendiri sudah termasuk di dalam browser tersebut. Lain halnya dengan bahasa
“Java” (di mana Javascript selalu dibanding-bandingkan) yang memerlukan
kompilator khusus untuk menterjemahkannya di sisi user/client. Javascript hanya
memiliki sedikit hubungan dengan bahasa pemrograman Java, dengan kesamaan
utamanya adalah penggunaan sintaks C. secara garis besar Javascript memiliki
lebih banyak kesamaan dengan bahasa pemrograman self.

2.21 Bootstrap
Bootstrap adalah paket aplikasi siap pakai untuk membuat front-end
sebuah website. Dapat dikatakan bootstrap adalah template desain web dengan
fitur plus. Bootstrap diciptakan untuk mempermudah proses desain web bagi
berbagai tingkat pengguna. Paket Bootstrap berisi sekumpulan file CSS, font, dan
Javascript yang diintegrasikan ke sebuah dokumen HTML menggunakan kaidah-
kaidah tertentu. Dokumen HTML yang dihasilkan pun secara dinamis akan tampil
dalam layout yang disesuaikan dengan ukuran layar piranti pengunjung.
Bootstrap merupakan proyek open source dan tentunya pemakaiannya
bersifat gratis. Saat ini, Bootstrap menjadi aplikasi paling populer di situs layanan
hosting software open source github.com. Jutaan website telah menggunakan
28

Bootstrap sebagai framework desainnya. Situs pemantau teknologi web


builtwith.com mencatat, lebih dari 6 juta website aktif menggunakan bootstrap.
[22]
3. ANALISA DAN PEMBAHASAN

3.1 Profil Perusahaan


PT Adikara Bangun Nusantara merupakan sebuah perusahaan swasta
berbentuk badan usaha Perseroan Terbatas (PT) yang berkedudukan di kota
Tangerang provinsi Banten. Bergerak dalam usaha jasa pekerjaan kontraktor
pembangunan umum berklasifikasi menengah dengan lingkup pekerjaan dibidang
sipil, bidang arsitektur dan penyediaan barang.
Dengan komitmen dan motivasi yang tinggi untuk senantiasa mampu
memberikan yang terbaik untuk pelanggan dalam dunia kontraktor pembangunan
umum dengan didukung oleh tenaga ahli terampil dan berpengalaman yang
berasal dari berbagai disiplin ilmu dengan penerapan sistem manajemen yang
sudah terstandarisasi nasional.
Fokus pekerjaan yang dilakukan kontraktor pembangunan umum adalah
menghasilkan jasa untuk pembangunan maupun perbaikan untuk rumah, kantor,
gedung, gudang, jalan, jembatan, maupun jasa layanan pekerjaan lainnya dan
selain itu jasa yang ditawarkan juga dalam berbentuk pengadaan barang untuk
kebutuhan pembangunan maupun perbaikan dalam skala kecil maupun besar.
Dalam perjalanan dan kiprah karirnya hingga saat ini PT Adikara Bangun
Nusantara telah mampu dan mendapat kepercayaan penuh dari berbagai macam
mitra usaha yang terdiri dari pemerintah, perusahaan swasta, dan kelompok
individu yang telah percaya untuk bekerjasama dalam bidang kontraktor
pembangunan umum maupun penyediaan barang.

3.1.1 Visi Perusahaan


Mitra pembangunan yang unggul, handal, dan terpercaya.

3.1.2 Misi Perusahaan


1. Meningkatkan peran dalam jasa pembangunan yang unggul melalui
sektor jasa pekerjaan konstruksi pembangunan umum.

29
30

2. Membangun perusahaan dengan kompetensi yang efektif, inovatif,


dan berorientasi kepada kualitas dengan cara bekerja secara handal.
3. Memberikan pelayanan yang baik secara tepat guna, tepat waktu dan
tepat kualitas untuk menjaga kepercayaan.

3.2 Struktur Organisasi Perusahaan

Gambar 3. 1 Struktur Organisasi Perusahaan


Berdasarkan struktur manajemen perusahaan PT Adikara Bangun
Nusantara, masing-masing jabatan mempunyai tugas dan tanggung jawab yang
diuraikan sebagai berikut :
1. Komisaris
Jabatan yang ditunjuk sebagai pengawas dalam seluruh kegiatan
perusahaan, yang berkaitan dengan kebijakan dan pengelolaan
perusahaan kepada direktur utama.
2. Direktur Utama
Jabatan yang berwenang untuk merumuskan dan menetapkan suatu
kebijakan dan program kerja perusahaan sesuai dengan batasan-
batasan wewenang.
31

3. Keuangan
Jabatan yang mempunyai tugas untuk pengelolaan keuangan secara
keseluruhan dalam perusahaan, untuk mendukung pelaksanaan
program perusahaan dan bertanggung jawab kepada direktur utama.
4. Manajer Administrasi
Jabatan yang bertugas sebagai pengatur dan mengelola seluruh dari
sub bagian umum dan sub bagian logistik, dan bertanggung jawab
langsung kepada direktur utama.
5. Umum
Sub bagian yang melaksanakan administrasi berkas seluruh pekerjaan,
meliputi surat-menyurat, pembukuan, agenda pekerjaan dan lain-
lainnya.
6. Logistik
Sub bagian yang melaksanakan pengelolaan dan pengadaan peralatan
pekerjaan dan penyiapan bahan-bahan untuk pekerjaan.
7. Manajer Pekerjaan
Jabatan yang bertugas sebagai pengatur dan mengelola seluruh dari
sub bagian operasional, sub bagian pengawas, dan lapangan, serta
bertanggung jawab langsung kepada direktur utama.
8. Operasional
Sub bagian yang menjalankan kegiatan proyek dilapangan, mulai dari
pemenuhan izin, pekerja lapangan, peralatan, serta bahan-bahan
pekerjaan.
9. Pengawas
Sub bagian yang menjalankan tugas untuk memonitoring pekerjaan
proyek, supaya mencapai target baik waktu maupun kualitas hasil dari
pekerjaaan.
10. Lapangan
Sub bagian yang menjalankan tugas sebagai pekerja dari proyek yang
dijalankan dari perusahaan, yang melaksanakan seluruh pekerjaan.
32

11. Manajer Keahlian


Jabatan yang bertugas sebagai pengatur dan mengelola seluruh dari
sub bagian umum dan sub bagian logistik, dan bertanggung jawab
langsung kepada direktur utama.
12. Tenaga Ahli Sipil
Sub bagian yang bertugas sebagai perancang proyek pembangunan,
yang meliputi dari manajemen konstruksi, struktur bangunan dan lain-
lainnya
13. Tenaga Ahli Arsitek
Sub bagian yang bertugas sebagai perancang proyek pembangunan
yang meliputi dari kaidah bentuk dari sebuah bangunan maupun
infrastruktur.

3.3 Proses Bisnis Perusahaan


PT Adikara Bangun Nusantara merupakan perusahaan yang bergerak di
bidang usaha jasa pekerjaan kontraktor pembangunan umum dan penyediaan
barang. Adapun proses kerja perusahaan yang dapat diuraikan dalam studi kasus
sebagai berikut :
Proses kerja diawali dari klien yang memiliki permintaan untuk
pembangunan konstruksi sebuah rumah kepada perusahaan melalui manajer
proyek pekerjaan dan disetujui oleh direktur. Proyek pekerjaan pembangunan
rumah ini disetujui oleh perusahaan apabila kriteria jasa pekerjaan ini cocok
dengan kriteria kebijakan perusahaan. Setelah persetujuan oleh direktur maka
proyek pekerjaan pembangunan rumah ini akan diberikan kepada manajer proyek,
yang selanjutnya manajer proyek akan memberikan daftar tugas kepada karyawan
sebagai pekerja lapangan
Setelah pemberian tugas oleh manajer proyek, kemudian karyawan
mengerjakan tugas-tugas sesuai dengan urutannya secara detail dengan spesifikasi
yang telah ditentukan. Setelah selesai dalam menyelesaikan tugasnya, selanjutnya
karyawan harus membuat laporan tugas pekerjaan serta memberikan catatan
dalam proses pengerjaan tugas tersebut.
33

Setelah karyawan menyelesaikan beberapa tahap tugas dan membuat


laporan, selanjutnya laporan akan diberikan kepada manajer proyek. Kemudian
manajer proyek akan mengecek kembali hasil dari tugas yang dikerjakan oleh
karyawan secara langsung dilapangan untuk memastikan kesesuaian spesifikasi
tugas tersebut dengan apa yang dikerjakan dan dilaporkan. Setelah manajer
proyek mengecek hasil pekerjaan jika terdapat tugas yang tidak sesuai dengan
spesifikasi, maka ada perlu perbaikan dan apabila tugas tersebut sudah sesuai
dengan spesifikasi yang diharapkan maka akan dilaporkan kepada direktur dan
klien sebagai laporan proses pekerjaan.

3.4 Sistem Berjalan


Berdasarkan analisis sistem yang sudah berjalan di perusahaan PT Adikara
Bangun Nusantara, maka dapat digambarkan sistem kerja yang telah berjalan.
Berikut sistem berjalan yang terdapat pada gambar 3.2 sebagai berikut :

Gambar 3. 2 Sistem Berjalan


Berdasarkan dari gambar sistem berjalan, maka alur sistem yang akan
dijelaskan yaitu sebagai berikut :
1. Permintaan jasa proyek pekerjaan dari klien kepada perusahaan.
2. Manajer melakukan rapat bersama klien untuk perencanaan sebuah
proyek pekerjaan, yang menghasilkan sebuah data yang akan
dibutuhkan.
34

3. Manajer mendapatkan informasi pekerjaan, yang akan disusun


sedemikian rupa sesuai dengan tugas pokok dan fungsi nya kepada
karyawan, dan membuat timeline proyek pekerjaan.
4. Karyawan mendapat daftar tugas pokok dan fungsi untuk
menyelesaikan tugas pekerjaan yang diberikan oleh manajer. Setelah
selesai dalam tugas tersebut karyawan diharuskan menulis laporan
pekerjaan secara manual di dalam buku catatan.
5. Karyawan melaporkan catatan laporan pekerjaan kepada manajer.
Dalam laporan tersebut manajer perlu merapikan laporan dengan
diketik ulang dan akan dilaporkan kepada direktur dan klien sebagai
laporan harian pekerjaan.

3.5 Analisa Masalah


Manajemen pengelolaan tugas dan laporan dalam suatu proyek pekerjaan
pada perusahaan PT Adikara Bangun Nusantara masih menggunakan cara-cara
yang manual. Sering terjadi kesalahan pekerjaan pada saat di lapangan dalam
mengimplementasikan pekerjaannya, seperti tidak sesuainya rencana tugas dan
tidak tepat sasaran dalam tugasnya. Sehingga berdampak pada menurunnya
kualitas maupun waktu pada sebuah proyek pekerjaan.
Manajer proyek pekerjaan terkadang mengalami kesulitan dalam
memantau atau memonitoring proses pekerjaan dilapangan. Laporan pekerjaan
yang diberikan oleh karyawan masih menggunakan cara yang manual yaitu
dengan cara mencatat seluruh proses pekerjaanya di buku laporan. Buku laporan
ini akan diberikan kepada manajer setelah selesai tugas dalam pekerjaan proyek,
sehingga bersifat tidak efisien.
Dalam pembuatan laporan pekerjaan sering terjadi kelalaian pada
pencatatan baik proses pekerjaan, waktu, dan detail perkembangan pekerjaan
sebagai bahan laporan. Selain dari itu laporan pekerjaan ini juga akan dilaporkan
kepada klien, sebagai tanggung jawab dalam proyek pekerjaan.
35

3.6 Permasalahan
Berdasarkan analisa masalah tersebut, maka dapat di identifikasikan
permasalahan dalam penelitian ini sebagai berikut :
1. Sulit memantau dan memonitoring pada proses perkembangan sebuah
pekerjaan secara terkini.
2. Terjadi kelalaian dalam hal pelaporan proses perkembangan sebuah
pekerjaan karena masih bersifat manual.
3. Penyajian laporan memerlukan waktu yang lama, karena laporan tugas
yang diberikan hanya berupa tulisan tangan dibuku sehingga perlu
disalin dengan cara mengetik ulang sebagai laporan pekerjaan yang
baik dan rapi.

3.7 Pemecahan Masalah


Berdasarkan permasalah tersebut, maka dapat ditemukan pemecahan
masalah dalam penelitian ini sebagai berikut :
1. Dalam pemecahan masalah ini dengan cara membuat aplikasi
manajemen pengelolaan tugas dan laporan yang terintegrasi sesuai
dengan tugasnya.
2. Pada perancangan aplikasi ini mempunyai kemudahan untuk
karyawan dalam membuat laporan tugas secara langsung dalam
proyek pekerjaan serta menghindari kelalaian.
3. Pada perancangan aplikasi ini dapat membantu untuk menyajikan
laporan tugas pada sebuah proyek pekerjaan secara cepat, rapi dan
dapat meminimalisir kesalahan.
36

3.8 Usulan Sistem Berjalan


Berdasarkan pemecahan masalah tersebut, maka dapat di temukan cara
menyelesaikan permasalahan dengan adanya usulan untuk penerapan
pengembangan pada aplikasi pengelolaan tugas dan laporan yang akan
diimplementasikan di PT Adikara Bangun Nusantara. Berikut usulan sistem yang
terdapat pada gambar 3.3 sebagai berikut :

Gambar 3. 3 Usulan Sistem Berjalan


Berdasarkan dari gambar usulan sistem berjalan, maka alur sistem yang
akan diajukan untuk menyelesaikan permasalahan ini yaitu sebagai berikut :
1. Permintaan jasa proyek pekerjaan dari klien kepada perusahaan.
2. Manajer melakukan rapat perencanaan sebuah proyek pekerjaan, yang
menghasilkan sebuah data yang akan dibutuhkan.
3. Admin akan diberikan dokumen proyek dari manajer, yang di dalam
dokumen tersebut meliputi nama proyek pekerjaan, klien, harga, dan
tim yang bersangkutan.
37

4. Manajer mendapatkan daftar proyek pekerjaan yang sebelumnya


diajukan, yang kemudian dilakukan menambah daftar tugas dalam
proyek pekerjaan.
5. Karyawan mendapatkan tugas-tugas yang diberikan oleh manajer,
yang diharuskan untuk diselesaikan sebelum tanggal jatuh tempo
proyek pekerjaan tersebut selesai.
6. Setelah menyelesaikan tugas, karyawan diharuskan untuk membuat
laporan pada tugas-tugas yang diberikan kepada manajer.
7. Manajer setelah menerima laporan pekerjaan dari karyawan, untuk
segera mengecek hasil tugasnya, apabila laporan yang diberikan
tersebut sesuai dengan tugas, maka manajer untuk melakukan validasi
status tugas karyawan tersebut menjadi selesai.
8. Manajer bisa mencetak laporan per proyek pekerjaan yang terdiri dari
daftar tugas dan laporan, untuk dilaporkan kepada direktur maupun
klien.
9. Admin bisa mencetak seluruh proyek perkembangan pekerjaan yang
dilakukan pada perusahaan tersebut.
10. Manajer melaporkan hasil perkembangan proyek pekerjaan kepada
direktur dan klien.

3.9 Analisis Sistem


Pada tahap analisis sistem ini yang bertujuan untuk mencari hasil yang
optimal dari aplikasi yang akan dibangun dengan mempertimbangkan dari
berbagai faktor permasalahan dan kebutuhan yang ada dalam sistem. Pada tapa ini
akan dilakukan investigasi terhadap proses kerja dari bisnis perusahaan yang
sudah berjalan.
Analisis sistem diperoleh dari proses kerja perusahaan yang berjalan pada
perusahaan, akan tetapi proses kerja tersebut memiliki kekurangan dalam
penyampaian informasi serta alur kinerja bisnis perusahaan yang kurang efektif,
seperti tidak adanya pemanfaatan teknologi yang terkomputerisasi, tidak adanya
penyimpanan data yang aman, tidak tersusun rapi dalam pemberkasan sehingga
38

sistem yang ada hanya terdokumentasi dalam bentuk buku. Terdapat


perbandingan antara sistem yang berjalan dengan sistem yang akan diusulkan
untuk mencapai hasil yang lebih optimal, yang akan disajikan dalam bentuk tabel
3.1 sebagai berikut :
Tabel 3. 1 Perbandingan Analisis Sistem
Hasil Dari
Sistem Berjalan Usulan Sistem Berjalan
Sistem Diusulkan
Pendataan proyek Pendataan pekerjaan Data pekerjaan akan
pekerjaan melalui aplikasi, tersusun rapi, aman
menggunakan proses sehingga data pekerjaan karena tersimpan dalam
pembukuan terlebih masuk ke dalam bentuk data di dalam
dahulu kemudian di aplikasi tanpa harus database sehingga dapat
input ke dalam pendataan melalui dilihat kapanpun dan
komputer pembukuan dahulu dimanapun
Pencatatan tugas oleh Proses pencatatan tugas Tugas yang tercatat
manajer proyek masih melalui aplikasi dan dalam aplikasi akan
menggunakan proses data tersimpan dalam terdata dengan rapi dan
pembukuan dengan database aman sehingga bisa
cara mencatat laporan dilihat karyawan secara
secara manual fleksibel
Pencatatan laporan oleh Pembuatan laporan Laporan yang tercatat
karyawan masih melalui aplikasi dan dalam aplikasi akan
menggunakan proses data tersimpan dalam terdata dengan rapi dan
pembukuan dengan database aman sehingga bisa
cara mencatat laporan dilihat manajer proyek
secara manual secara fleksibel
Pencarian tugas yang Aplikasi dapat Pencarian tugas yang
belum selesai mengetahui mana tugas belum terselesaikan
dikerjakan dengan cara yang sudah selesai dan terasa lebih mudah
membuka buku catatan mana tugas yang belum dengan menggunakan
pekerjaan selesai aplikasi
39

Hasil Dari
Sistem Berjalan Usulan Sistem Berjalan
Sistem Diusulkan
Pembuatan laporan Pada aplikasi tersedia Data laporan dalam
dengan mengumpulkan menu laporan yang aplikasi sudah tersusun
data tugas dan laporan, berisi seluruh data rapi dan aman dan
lalu di input ke dalam tugas dan laporan dapat di cetak atau di
komputer untuk disusun download untuk
menjadi dokumen menghasilkan dokumen

3.10 Perancangan Struktur Navigasi


Dalam tahapan pembuatan aplikasi ini, terdapat beberapa proses untuk
perancangan struktur navigasi yang akan digunakan untuk menggambarkan,
merencanakan dan membuat konsep aplikasi yang akan di bangun. Hal ini
dilakukan agar nantinya penggunaan aplikasi dapat dipakai secara mudah oleh
para penggunanya. Berikut ini terdapat perancangan struktur navigasi aplikasi
yang telah ditentukan untuk masing-masing user.

3.10.1 Struktur Navigasi Admin

Gambar 3. 4 Struktur Navigasi Admin


40

3.10.2 Struktur Navigasi Manajer

Gambar 3. 5 Struktur Navigasi Manajer

3.10.3 Struktur Navigasi Karyawan

Gambar 3. 6 Struktur Navigasi Karyawan

3.11 Perancangan Sistem


Pada tahap perancangan sistem akan dijelaskan bagaimana merancang
sistem aplikasi yang akan direpresentasikan dengan bentuk diagram unified
modeling language (UML) yang terdapat use case diagram, class diagram,
activity diagram, dan sequence diagram dengan penjelasan masing-masing
sebagai berikut
41

3.11.1 Use Case Diagram


Use case diagram mendeskripsikan hubungan antara pengguna
sistem/user dengan aktivitas-aktivitas atau proses pada aplikasi manajemen
pengelolaan tugas dan laporan proyek pekerjaan.
Untuk membuat use case diagram diperlukannya membuat identifikasi
masing-masing pengguna sistem atau aktor yang dijelaskan pada tabel 3.2 yaitu
sebagai berikut :
Tabel 3. 2 Penjelasan Aktor Use Case Diagram
No Actor / Aktor Deskripsi
1 Administrator Administrator, merupakan orang yang bertanggung
jawab terhadap pengelolaan operasional sistem di
dalam perusahaan.
2 Manajer Manajer, merupakan orang yang ditugaskan oleh
direktur untuk mengendalikan sebuah proyek
pekerjaan. Bertanggung jawab untuk bertemu dengan
klien, membuat daftar tugas, membuat timeline,
memvalidasi pekerjaan karyawan, dan memastikan
menutup proyek sebelum tanggal jatuh tempo.
3 Karyawan Karyawan, merupakan orang yang bertanggung
jawab untuk menyelesaikan seluruh tugas-tugas pada
proyek pekerjaan sebelum tanggal jatuh tempo

Hasil dari identifikasi aktor di atas, maka use case diagram yang
digambarkan pada gambar 3.7 sebagai berikut :
42

Gambar 3. 7 Use Case Diagram


Setelah membuat use case diagram, selanjutnya adalah membuat
identifikasi use case diagram pada aplikasi, yang dijelaskan pada tabel 3.3 yaitu
sebagai berikut :
Tabel 3. 3 Penjelasan Use Case Diagram
No Use Case Deskripsi Actor / Aktor
1 Login Use case ini menggambarkan Admin
langkah sebelum mengelola tugas Manajer
dan laporan dalam aplikasi, Karyawan
pengguna diharuskan login ke
dalam aplikasi terlebih dahulu.
2 Tambah Use case ini menggambarkan Admin
Pekerjaan kegiatan aktor untuk menambah Manajer
pekerjaan yang akan dilakukan.
3 Daftar Pekerjaan Use case ini menggambarkan Admin
43

No Use Case Deskripsi Actor / Aktor


kegiatan aktor untuk menampilkan Manajer
seluruh daftar pekerjaan, baik Karyawan
pekerjaan yang sudah selesai
maupun belum selesai.
4 Lihat Pekerjaan Use case ini menggambarkan Admin
kegiatan aktor untuk melihat detail Manajer
suatu pekerjaan, yang berisi Karyawan
informasi detail, tugas, dan laporan
dalam suatu pekerjaan.
5 Tambah Use case ini menggambarkan Admin
Pengguna kegiatan aktor untuk menambah
pengguna dalam aplikasi.
6 Daftar Pengguna Use case ini menggambarkan Admin
kegiatan aktor untuk menampilkan
seluruh daftar pengguna aplikasi
7 Cetak Laporan Use case ini menggambarkan Admin
kegiatan aktor untuk menampilkan Manajer
dan serta mencetak dari daftar
pekerjaan.
8 Lihat Rangkuman Use case ini menggambarkan Admin
kegiatan aktor untuk melihat Manajer
seluruh daftar pekerjaan, tugas, dan Karyawan
perkembangannya.
9 Tambah Tugas Use case ini menggambarkan Admin
kegiatan aktor untuk menambah Manajer
rincian tugas-tugas yang akan
dilakukan dalam suatu pekerjaan.
10 Validasi Status Use case ini menggambarkan Admin
Tugas kegiatan aktor untuk memvalidasi Manajer
44

No Use Case Deskripsi Actor / Aktor


status tugas yang diberikan oleh
karyawan, apakah tugas tersebut
sudah selesai ataukah belum selesai
dalam pengerjaannya.
11 Cetak Laporan Use case ini menggambarkan Admin
Pekerjaan kegiatan aktor untuk menampilkan Manajer
dan serta mencetak dari detail suatu
pekerjaan.
12 Tambah Laporan Use case ini menggambarkan Karyawan
Tugas kegiatan aktor untuk menambahkan
laporan dari tugas yang diberikan,
yang berisi detail laporan, waktu,
dan tanggal pengerjaan tugas.

3.11.2 Class Diagram


Class diagram menggambarkan struktur objek sistem. Diagram ini
menunjukan kelas objek yang menyusun sistem dan juga hubungan antar kelas
diantara lainnya kelas admin, pekerjaan, manajer, tugas, karyawan, laporan. Maka
class diagram yang digambarkan pada gambar 3.8 sebagai berikut :
45

Gambar 3. 8 Class Diagram


46

3.11.3 Activity Diagram


Activity diagram merupakan suatu bentuk flow diagram yang memodelkan
alur kerja (workflow) sebuah urutan aktivitas sebuah proses pada aplikasi
manajemen tugas dan laporan proyek pekerjaan. Maka activity diagram yang
digambarkan sebagai berikut :
1. Activity Diagram Login

Gambar 3. 9 Activity Diagram Login


Activity diagram login pada gambar 3.9 dilakukan oleh tiga aktor,
yaitu admin, karyawan dan manajer. Proses awal dalam melakukan
login adalah aktor membuka aplikasi sistem manajemen tugas dan
laporan proyek pekerjaan. Kemudian sistem akan menampilkan
halaman login, setelah login tampil, aktor dapat memasukan email dan
password yang sesuai dengan jabatan mereka masing-masing. Jika
email dan password yang dimasukan tidak sesuai, sistem akan
menampilkan peringatan dan jika benar aktor akan masuk ke halaman
dashboard dari sesuai level masing-masing yang ditampilkan sistem.
47

2. Activity Diagram Tambah Pekerjaan

Gambar 3. 10 Activity Diagram Tambah Pekerjaan


Activity diagram tambah pekerjaan pada gambar 3.10 dilakukan oleh
dua aktor, yaitu admin dan manajer. Proses awal dalam melakukan
menambahkan pekerjaan yang akan di proses di dalam aplikasi adalah
aktor masuk ke dalam menu tambah pekerjaan. Kemudian sistem
menampilkan halaman tambah pekerjaan, aktor dapat menambahkan
data pekerjaan baru yang sesuai dengan form tambah pekerjaan. Jika
pengisian form telah lengkap maka aktor untuk menyimpan data
tersebut dengan memilih tombol simpan. Sistem akan menyimpan
data tersebut dan akan mengalihkan aktor ke halaman daftar
pekerjaan.
48

3. Activity Diagram Daftar Pekerjaan

Gambar 3. 11 Activity Diagram Daftar Pekerjaan


Activity diagram daftar pekerjaan pada gambar 3.11 dilakukan oleh
tiga aktor, yaitu admin, karyawan dan manajer. Proses awal untuk
melihat daftar pekerjaan adalah dengan cara masuk ke dalam menu
daftar pekerjaan. Kemudian sistem akan menampilkan seluruh data
pekerjaan yang sebelumnya sudah dimasukkan terlebih dahulu. Dalam
halaman tersebut terdapat beberapa aksi perintah yang digunakan
aktor untuk mengelola data pekerjaan.
49

4. Activity Diagram Edit Pekerjaan

Gambar 3. 12 Activity Diagram Edit Pekerjaan


Activity diagram edit pekerjaan pada gambar 3.10 dilakukan oleh dua
aktor, yaitu admin dan manajer. Untuk melakukan edit data pekerjaan,
terlebih dahulu aktor masuk ke dalam halaman daftar pekerjaan, kemudian
pilih salah satu pekerjaan, pilih menu aksi edit. Kemudian sistem akan
menampilkan halaman edit pekerjaan, lakukan pengeditan data pekerjaan
lalu dilanjutkan untuk memilih tombol simpan lalu sistem akan
menyimpan data terbaru dan sistem mengalihkan aktor ke halaman daftar
pekerjaan.
50

5. Activity Diagram Hapus Pekerjaan

Gambar 3. 13 Activity Diagram Hapus Pekerjaan


Activity diagram hapus pekerjaan pada gambar 3.13 dilakukan oleh dua
aktor, yaitu admin dan manajer. Untuk melakukan hapus data pekerjaan,
terlebih dahulu aktor masuk ke dalam halaman daftar pekerjaan, kemudian
pilih salah satu pekerjaan yang akan dilakukan penghapusan, pilih menu
aksi hapus. Kemudian sistem akan menampilkan pop up konfirmasi hapus,
jika memilih tidak maka data tidak terhapus dan jika memilih ya maka
data akan terhapus oleh sistem dan sistem mengalihkan aktor ke halaman
daftar pekerjaan.
51

6. Activity Diagram Detail Pekerjaan

Gambar 3. 14 Activity Diagram Detail Pekerjaan


Activity diagram detail pekerjaan pada gambar 3.14 dilakukan oleh
tugas aktor, yaitu admin, manajer dan karyawan. Proses awal dalam
melakukan lihat detail data pekerjaan dengan cara terlebih dahulu
aktor masuk ke dalam halaman daftar pekerjaan, kemudian pilih salah
satu pekerjaan yang akan dilakukan penglihatan, pilih menu aksi lihat.
Kemudian sistem akan menampilkan halaman detail pekerjaan. Pada
halaman detail pekerjaan terdiri dari detail pekerjaan, daftar tugas
yang akan dilakukan, daftar laporan setelah melakukan penyelesaian
tugas.
52

7. Activity Diagram Cetak Detail Pekerjaan

Gambar 3. 15 Activity Diagram Cetak Detail Pekerjaan


Activity diagram cetak detail pekerjaan pada gambar 3.15 dilakukan
oleh satu aktor, yaitu manajer. Untuk mencetak detail data pekerjaan,
terlebih dahulu aktor masuk ke halaman daftar pekerjaan, kemudian
pilih salah satu pekerjaan yang akan dicetak, pilih menu aksi lihat.
Kemudian sistem akan menampilkan halaman detail pekerjaan. Pada
halaman detail pekerjaan terdapat tombol aksi cetak lalu pilih tombol
cetak maka muncul pop up penyimpanan hasil cetak dokumen. Hasil
cetak tersebut adalah dokumen detail pekerjaan berformat pdf.
53

8. Activity Diagram Tambah Tugas

Gambar 3. 16 Activity Diagram Tambah Tugas


Activity diagram tambah tugas pada gambar 3.16 dilakukan oleh dua
aktor, yaitu admin dan manajer. Proses awal dalam melakukan tambah
tugas dengan cara aktor masuk ke dalam halaman daftar pekerjaan,
kemudian pilih salah satu pekerjaan yang akan dilakukan penambahan
tugas, pilih menu aksi lihat. Kemudian sistem akan menampilkan
halaman detail pekerjaan. Pada halaman detail pekerjaan terdiri dari
detail pekerjaan, terdapat tombol tambah tugas yang kemudian ketika
54

dipilih tombol tersebut sistem akan menampilkan pop up tambah


tugas. Kemudian aktor memasukan tugas-tugas yang berkaitan dengan
pekerjaan tersebut, lalu pilih tombol simpan. Sistem akan menyimpan
data tugas tersebut dan sistem akan mengalihkan aktor ke halaman
detail pekerjaan.

9. Activity Diagram Edit Tugas

Gambar 3. 17 Activity Diagram Edit Tugas


Activity diagram edit tugas pada gambar 3.17 dilakukan oleh dua
aktor, yaitu admin dan manajer. Untuk melakukan edit tugas dengan
cara terlebih dahulu aktor masuk ke halaman daftar pekerjaan,
kemudian pilih salah satu pekerjaan yang akan di edit tugasnya, pilih
55

menu aksi lihat. Kemudian sistem akan menampilkan halaman detail


pekerjaan. Pada halaman detail pekerjaan terdapat menu aksi edit
tugas yang kemudian ketika dipilih tombol tersebut sistem akan
menampilkan pop up edit tugas. Kemudian aktor mengedit tugas
tersebut, lalu pilih tombol simpan. Sistem akan menyimpan data tugas
tersebut dan sistem akan mengalihkan aktor ke halaman detail
pekerjaan.

10. Activity Diagram Hapus Tugas

Gambar 3. 18 Activity Diagram Hapus Tugas


Activity diagram hapus tugas pada gambar 3.18 dilakukan oleh dua
aktor, yaitu admin dan manajer. Proses awal dalam melakukan hapus
tugas dengan cara terlebih dahulu aktor masuk ke dalam halaman
daftar pekerjaan, kemudian pilih salah satu pekerjaan yang akan
dilakukan penghapusan tugas, pilih menu aksi lihat. Kemudian sistem
56

akan menampilkan halaman detail pekerjaan. Pada halaman detail


pekerjaan terdapat menu aksi hapus tugas yang kemudian ketika
dipilih tombol tersebut sistem akan menampilkan pop up konfirmasi
penghapusan. Kemudian pilih tombol ya, sistem akan menghapus data
tugas tersebut dan sistem akan mengalihkan aktor ke halaman detail
pekerjaan.

11. Activity Diagram Lihat Tugas

Gambar 3. 19 Activity Diagram Lihat Tugas


Activity diagram lihat tugas pada gambar 3.19 dilakukan oleh tiga
aktor, yaitu admin, manajer dan karyawan. Untuk melakukan lihat
tugas dengan cara terlebih dahulu aktor masuk ke halaman daftar
pekerjaan, kemudian pilih salah satu pekerjaan yang akan dilihat
tugasnya, pilih menu aksi lihat. Kemudian sistem akan menampilkan
halaman detail pekerjaan. Pada halaman detail pekerjaan terdapat
menu aksi lihat tugas yang kemudian ketika dipilih tombol tersebut
sistem akan menampilkan pop up detail tugas.
57

12. Activity Diagram Tambah Laporan

Gambar 3. 20 Activity Diagram Tambah Laporan


Activity diagram tambah tugas pada gambar 3.20 dilakukan oleh satu
aktor, yaitu karyawan. Proses awal dalam melakukan tambah laporan
tugas dengan cara terlebih dahulu aktor masuk ke dalam halaman
daftar pekerjaan, kemudian pilih salah satu pekerjaan yang akan
dilakukan penambahan laporan, pilih menu aksi lihat. Kemudian
sistem akan menampilkan halaman detail pekerjaan. Pada halaman
detail pekerjaan terdiri dari detail pekerjaan, terdapat tombol tambah
58

laporan yang kemudian ketika dipilih tombol tersebut sistem akan


menampilkan pop up tambah laporan. aktor harus memasukan data
laporan tugas yang sebelumnya sudah menyelesaikan tugasnya di
lapangan. Lalu pilih tombol simpan. Sistem akan menyimpan data
laporan tersebut dan sistem akan mengalihkan aktor ke halaman detail
pekerjaan.

13. Activity Diagram Edit Laporan

Gambar 3. 21 Activity Diagram Edit Laporan


Activity diagram edit laporan pada gambar 3.21 dilakukan oleh satu
aktor, yaitu karyawan. Proses awal dalam melakukan edit laporan
dengan cara terlebih dahulu aktor masuk ke dalam halaman daftar
pekerjaan, kemudian pilih salah satu pekerjaan yang akan dilakukan
59

pengeditan laporan, pilih menu aksi lihat. Kemudian sistem akan


menampilkan halaman detail pekerjaan. Pada halaman detail
pekerjaan terdapat menu aksi edit laporan yang kemudian ketika
dipilih tombol tersebut sistem akan menampilkan pop up edit laporan.
Kemudian aktor mengedit laporan, lalu pilih tombol simpan. Sistem
akan menyimpan data tugas tersebut dan sistem akan mengalihkan
aktor ke halaman detail pekerjaan.

14. Activity Diagram Hapus Laporan

Gambar 3. 22 Activity Diagram Hapus Laporan


Activity diagram hapus laporan pada gambar 3.22 dilakukan oleh satu
aktor, yaitu karyawan. Proses awal dalam melakukan hapus laporan
dengan cara terlebih dahulu aktor masuk ke dalam halaman daftar
pekerjaan, kemudian pilih salah satu pekerjaan yang akan dilakukan
penghapusan laporan, pilih menu aksi lihat. Kemudian sistem akan
60

menampilkan halaman detail pekerjaan. Pada halaman detail


pekerjaan pilih menu aksi hapus laporan pada salah satu laporan, lalu
sistem akan menampilkan pop up konfirmasi penghapusan. Kemudian
pilih tombol ya, sistem akan menghapus data tugas tersebut dan sistem
akan mengalihkan aktor ke halaman detail pekerjaan.

15. Activity Diagram Tambah Akun Pengguna

Gambar 3. 23 Activity Diagram Tambah Akun Pengguna


Activity diagram tambah akun pengguna pada gambar 3.23 dilakukan
oleh satu aktor, yaitu admin. Proses awal dalam melakukan
menambahkan akun pengguna adalah aktor masuk ke dalam menu
tambah pengguna. Kemudian sistem menampilkan halaman tambah
pengguna, aktor dapat menambahkan data pengguna baru yang sesuai
dengan form tambah pengguna. Jika pengisian form telah lengkap
maka aktor untuk menyimpan data tersebut dengan memilih tombol
61

simpan. Sistem akan menyimpan data tersebut dan akan mengalihkan


aktor ke halaman daftar pengguna.

16. Activity Diagram Daftar Akun Pengguna

Gambar 3. 24 Activity Diagram Daftar Akun Pengguna


Activity diagram daftar pengguna pada gambar 3.24 dilakukan oleh
satu aktor, yaitu admin. Proses awal aktor untuk melihat daftar akun
pengguna, dengan cara masuk ke halaman menu daftar pengguna.
Kemudian sistem akan menampilkan seluruh data pengguna, dalam
halaman tersebut terdapat beberapa aksi perintah yang digunakan
aktor untuk mengelola data akun pengguna.
62

17. Activity Diagram Edit Akun Pengguna

Gambar 3. 25 Activity Diagram Edit Akun Pengguna


Activity diagram edit pekerjaan pada gambar 3.25 dilakukan oleh tiga
aktor, yaitu admin, manajer, dan karyawan. Proses awal dalam
melakukan edit data pekerjaan dengan cara terlebih dahulu masuk ke
dalam menu akun, kemudian sistem menampilkan pilihan kelola akun.
Pilih kelola akun yang akan dilakukan pengeditan. kemudian sistem
akan menampilkan halaman edit akun, setelah melakukan pengeditan
data akun pengguna, dilanjutkan pilih tombol simpan. Sistem akan
menyimpan data terbaru tersebut dan sistem akan mengalihkan aktor
kembali ke dalam halaman daftar dashboard.
63

18. Activity Diagram Hapus Akun Pengguna

Gambar 3. 26 Activity Diagram Hapus Akun Pengguna


Activity diagram hapus pengguna pada gambar 3.26 dilakukan oleh
satu aktor, yaitu admin. Proses awal dalam melakukan hapus akun
pengguna dengan cara terlebih dahulu masuk ke halaman daftar
pengguna, kemudian pilih salah satu pekerjaan yang akan dilakukan
penghapusan, pilih menu aksi hapus. Kemudian sistem akan
menampilkan pop up konfirmasi hapus, jika aktor memilih tidak maka
data tidak akan terhapus tetapi jika aktor memilih ya maka data
pekerjaan tersebut akan terhapus oleh sistem. Kemudian sistem akan
mengalihkan aktor kembali ke dalam halaman daftar pengguna.
64

19. Activity Diagram Lihat Akun Pengguna

Gambar 3. 27 Activity Diagram Lihat Akun Pengguna


Activity diagram lihat akun pengguna pada gambar 3.27 dilakukan
oleh satu aktor, yaitu admin. Proses awal dalam melakukan lihat akun
pengguna dengan cara terlebih dahulu aktor masuk ke dalam halaman
daftar pengguna, kemudian pilih salah satu pengguna yang akan
dilakukan penglihatan detail, pilih menu aksi lihat. Kemudian sistem
akan menampilkan halaman detail akun pengguna. Pada halaman
detail pekerjaan terdiri dari detail akun pengguna.
65

20. Activity Diagram Rangkuman

Gambar 3. 28 Activity Diagram Rangkuman


Activity diagram rangkuman pada gambar 3.28 dilakukan oleh tiga
aktor, yaitu admin, manajer dan karyawan. Proses awal aktor untuk
melihat rangkuman, dengan cara aktor masuk ke dalam halaman menu
rangkuman. Kemudian sistem akan menampilkan seluruh data tugas
dan pekerjaan didalam halaman rangkuman, dalam halaman tersebut
terdapat beberapa aksi perintah yang digunakan aktor untuk
menambah laporan pada setiap tugas.
66

21. Activity Diagram Laporan

Gambar 3. 29 Activity Diagram Laporan


Activity diagram laporan pada gambar 3.29 dilakukan oleh dua aktor,
yaitu admin dan manajer. Proses awal aktor untuk melihat laporan
pekerjaan, dengan cara aktor masuk ke dalam halaman menu laporan.
Kemudian sistem akan menampilkan seluruh data pekerjaan di dalam
halaman laporan.
67

22. Activity Diagram Cetak Laporan

Gambar 3. 30 Activity Diagram Cetak Laporan


Activity diagram cetak laporan pada gambar 3.30 dilakukan oleh dua
aktor, yaitu admin dan manajer. Proses awal aktor untuk melihat
laporan pekerjaan, dengan cara aktor masuk ke dalam halaman menu
laporan. Kemudian sistem akan menampilkan halaman laporan, yang
didalam nya terdapat menu cetak, ketika aktor ingin mencetak sistem
akan menampilkan pop up untuk menentukan lokasi penyimpanan
dokumen tersebut dan dokumen yang dihasilkan adalah dokumen
laporan pekerjaan yang berbentuk pdf.
68

23. Activity Diagram Logout

Gambar 3. 31 Activity Diagram Logout


Activity diagram logout pada gambar 3.31 dilakukan oleh tiga aktor,
yaitu admin, karyawan dan manajer. Proses awal dalam melakukan
logout adalah aktor membuka menu akun. Kemudian sistem akan
menampilkan menu logout, aktor dapat memilih menu logout. Sistem
akan membawa aktor keluar dari halaman aplikasi ke halaman login
aplikasi.

3.11.4 Sequence Diagram


Sequence diagram ini menjelaskan secara detail dari urutan proses yang
akan dilakukan dalam sistem untuk mencapai tujuan dari use case diagram. Maka
sequence diagram yang digambarkan sebagai berikut :
69

1. Sequence Diagram Login

Gambar 3. 32 Sequence Diagram Login


Sequence diagram login pada gambar 3.32 dilakukan oleh tiga aktor,
yaitu admin, manajer, karyawan. Sequence ini menggambarkan aliran
pesan aktor untuk akses aplikasi dengan melakukan login. Untuk
login, aktor harus mengisi email dan password pada form di halaman
login. Kemudian sistem akan mengecek kesesuaian data dengan
proses query database pada tabel pengguna, jika data tidak sesuai lalu
diberikan peringatan berupa pesan yang berisikan login gagal dan jika
data yang diberikan sesuai dengan database maka aktor akan masuk
ke halaman dashboard.
70

2. Sequence Diagram Tambah Pekerjaan

Gambar 3. 33 Sequence Diagram Tambah Pekerjaan


Sequence diagram tambah pekerjaan pada gambar 3.33 dilakukan oleh
dua aktor, yaitu admin dan manajer. Sequence ini menggambarkan
aliran pesan aktor untuk menambah daftar pekerjaan yang ingin
dilakukan. Untuk menambah pekerjaan, aktor harus memasukan data
pekerjaan yang ingin diberikan dalam form tambah pekerjaan.
Kemudian sistem akan menyimpan data dengan proses query database
pada tabel pekerjaan, jika data sesuai lalu muncul di halaman daftar
pekerjaan, berisikan seluruh pekerjaan yang akan dilakukan untuk
diproses di dalam aplikasi.

3. Sequence Diagram Daftar Pekerjaan

Gambar 3. 34 Sequence Diagram Daftar Pekerjaan


Sequence diagram tambah pekerjaan pada gambar 3.34 dilakukan oleh
tiga aktor, yaitu admin, karyawan dan manajer. Sequence ini
menggambarkan aliran pesan aktor untuk melakukan melihat seluruh
71

daftar pekerjaan yang sedang di lakukan di aplikasi tersebut. Untuk


melihat daftar pekerjaan, aktor perlu masuk dalam menu daftar
pekerjaan. Kemudian sistem akan menampilkan data dengan proses
query database pada tabel pekerjaan. Jika data sesuai, akan muncul di
halaman daftar pekerjaan.

4. Sequence Diagram Edit Pekerjaan

Gambar 3. 35 Sequence Diagram Edit Pekerjaan


Sequence diagram edit pekerjaan pada gambar 3.35 dilakukan oleh
dua aktor, yaitu admin dan manajer. Sequence ini menggambarkan
aliran pesan aktor untuk mengedit data pekerjaan. Untuk mengedit
pekerjaan, aktor harus merubah data pekerjaan yang ingin diberikan
dalam form edit pekerjaan. Kemudian sistem akan menyimpan data
dengan proses query database pada tabel pekerjaan. Data pekerjaan
yang telah di edit muncul di halaman daftar pekerjaan.
72

5. Sequence Diagram Hapus Pekerjaan

Gambar 3. 36 Sequence Diagram Hapus Pekerjaan


Sequence diagram hapus pekerjaan pada gambar 3.36 dilakukan oleh
dua aktor, yaitu admin dan manajer. Sequence ini menggambarkan
aliran pesan aktor untuk menghapus pekerjaan. Untuk menghapus
pekerjaan, aktor harus memilih salah satu pekerjaan yang ingin
dihapus, lalu aktor pilih aksi hapus. Kemudian sistem akan
menghapus data dengan proses query database pada tabel pekerjaan,
dan sistem akan mengalihkan aktor ke halaman daftar pekerjaan.

6. Sequence Diagram Detail Pekerjaan

Gambar 3. 37 Sequence Diagram Detail Pekerjaan


Sequence diagram detail pekerjaan pada gambar 3.26 dilakukan oleh
tiga aktor, yaitu admin, karyawan dan manajer. Sequence ini
73

menggambarkan aliran pesan aktor untuk melakukan melihat seluruh


detail pekerjaan, daftar tugas, dan daftar laporan dalam suatu
pekerjaan. Untuk melihat detail pekerjaan, aktor perlu masuk dalam
menu daftar pekerjaan, kemudian pilih menu aksi lihat pekerjaan.
Selanjutnya sistem akan menampilkan data dengan proses query
database pada tabel pekerjaan, tugas dan laporan. Jika data sesuai lalu
muncul di halaman detail pekerjaan, yang berisikan seluruh detail
pekerjaan, daftar tugas, dan daftar laporan pada suatu pekerjaan yang
akan dilakukan untuk diproses di aplikasi.

7. Sequence Diagram Cetak Detail Pekerjaan

Gambar 3. 38 Sequence Diagram Cetak Detail Pekerjaan


Sequence diagram cetak detail pekerjaan pada gambar 3.27 dilakukan
oleh dua aktor, yaitu admin dan manajer. Sequence ini
menggambarkan aliran pesan aktor untuk melakukan cetak detail
pekerjaan dari suatu pekerjaan. Untuk mencetak detail pekerjaan,
aktor perlu masuk ke halaman detail pekerjaan. Kemudian sistem akan
menampilkan data dengan proses query database pada tabel
pekerjaan. Jika data sesuai lalu muncul di halaman detail pekerjaan.
Lalu pilih aksi cetak pada halaman detail pekerjaan, kemudian hasil
dari cetak tersebut adalah dokumen yang berformat pdf.
74

8. Sequence Diagram Tambah Tugas

Gambar 3. 39 Sequence Diagram Tambah Tugas


Sequence diagram tambah tugas pada gambar 3.28 dilakukan oleh dua
aktor, yaitu admin dan manajer. Sequence ini menggambarkan aliran
pesan aktor untuk menambah tugas di dalam suatu pekerjaan. Untuk
menambah tugas, aktor harus memasukan data tugas yang ingin
diberikan dalam form tambah tugas. Kemudian sistem akan
menyimpan data dengan proses query database pada tabel tugas. data
akan muncul di halaman detail pekerjaan dan halaman rangkuman.

9. Sequence Diagram Edit Tugas

Gambar 3. 40 Sequence Diagram Edit Tugas


Sequence diagram edit tugas pada gambar 3.40 dilakukan oleh dua
aktor, yaitu admin dan manajer. Sequence ini menggambarkan aliran
75

pesan aktor untuk mengedit data tugas. Untuk mengedit tugas, aktor
harus masuk ke halaman detail salah satu pekerjaan lalu pilih salah
satu tugas yang ingin di edit lalu pilih menu aksi edit kemudian edit
dan pilih simpan. Kemudian sistem akan menyimpan data dengan
proses query database pada tabel tugas. Data yang telah di edit akan
muncul di halaman detail pekerjaan.

10. Sequence Diagram Hapus Tugas

Gambar 3. 41 Sequence Diagram Hapus Tugas


Sequence diagram hapus tugas pada gambar 3.41 dilakukan oleh dua
aktor, yaitu admin dan manajer. Sequence ini menggambarkan aliran
pesan aktor untuk menghapus tugas. Untuk menghapus tugas, aktor
harus memilih salah satu tugas yang ingin dihapus, lalu aktor memilih
menu aksi hapus. Kemudian sistem akan menghapus data dengan
proses query database pada tabel tugas, dan sistem akan mengalihkan
aktor ke halaman daftar pekerjaan.
76

11. Sequence Diagram Lihat Tugas

Gambar 3. 42 Sequence Diagram Lihat Tugas


Sequence diagram lihat tugas pada gambar 3.42 dilakukan oleh tiga
aktor, yaitu admin, manajer dan karyawan. Sequence ini
menggambarkan aliran pesan aktor untuk melihat data tugas. Untuk
melihat tugas, aktor harus masuk ke halaman detail salah satu
pekerjaan lalu pilih salah satu tugas yang ingin di lihat secara detail
lalu pilih menu aksi lihat. Kemudian sistem akan menampilkan data
dengan proses query database pada tabel tugas, dan data akan muncul
pop up detail tugas.

12. Sequence Diagram Tambah Laporan

Gambar 3. 43 Sequence Tambah Laporan


Sequence diagram tambah laporan pada gambar 3.29 dilakukan oleh
satu aktor, yaitu karyawan. Sequence ini menggambarkan aliran pesan
aktor untuk menambah laporan setelah menyelesaikan tugas di dalam
77

suatu pekerjaan. Untuk menambah laporan, aktor harus memasukan


data laporan yang ingin diberikan dalam form tambah laporan.
Kemudian sistem akan menyimpan data dengan proses query database
pada tabel laporan. Data akan muncul di halaman detail pekerjaan.

13. Sequence Diagram Edit Laporan

Gambar 3. 44 Sequence Diagram Edit Laporan


Sequence diagram edit laporan pada gambar 3.44 dilakukan oleh satu
aktor, yaitu karyawan. Sequence ini menggambarkan aliran pesan
aktor untuk mengedit data laporan. Untuk mengedit laporan, aktor
harus masuk ke halaman detail salah satu pekerjaan lalu pilih salah
satu laporan yang ingin di edit lalu pilih menu aksi edit kemudian
ubah data sesuai yang diinginkan dan pilih simpan. Kemudian sistem
akan menyimpan data dengan proses query database pada tabel
laporan, jika data yang telah di edit yang telah tersimpan akan muncul
di halaman detail pekerjaan.
78

14. Sequence Diagram Hapus Laporan

Gambar 3. 45 Sequence Diagram Hapus Laporan


Sequence diagram hapus laporan pada gambar 3.45 dilakukan oleh
satu aktor, yaitu karyawan. Sequence ini menggambarkan aliran pesan
aktor untuk menghapus laporan. Untuk menghapus laporan, aktor
harus memilih salah satu laporan yang ingin dihapus, lalu aktor
memilih menu aksi hapus. Kemudian sistem akan menghapus data
dengan proses query database pada tabel laporan, dan sistem akan
mengalihkan aktor ke halaman daftar pekerjaan.

15. Sequence Diagram Tambah Akun Pengguna

Gambar 3. 46 Sequence Tambah Akun Pengguna


Sequence diagram tambah pengguna pada gambar 3.46 dilakukan oleh
satu aktor, yaitu admin. Sequence ini menggambarkan aliran pesan
79

aktor untuk melakukan menambah akun pengguna dalam aplikasi.


Untuk menambah pengguna aplikasi, aktor perlu masuk dalam menu
tambah pengguna, kemudian memasukan data pengguna yang
dibutuhkan dalam form tambah pengguna. Kemudian sistem akan
menyimpan data dengan proses query database pada tabel pengguna.
Jika data sukses tersimpan lalu muncul di halaman daftar pengguna,
yang berisikan seluruh daftar pengguna aplikasi yang terdiri dari tiga
jabatan yaitu admin, manajer, dan karyawan.

16. Sequence Diagram Daftar Akun Pengguna

Gambar 3. 47 Sequence Daftar Akun Pengguna


Sequence diagram tambah pekerjaan pada gambar 3.47 dilakukan oleh
satu aktor, yaitu admin. Sequence ini menggambarkan aliran pesan
aktor untuk melakukan melihat seluruh daftar pengguna aplikasi.
Untuk melihat daftar pengguna, aktor perlu masuk dalam menu daftar
pengguna. Kemudian sistem akan menampilkan data dengan proses
query database pada tabel pengguna. Jika data sesuai lalu muncul di
halaman daftar pengguna, yang berisikan seluruh pengguna dalam
mengakses aplikasi sesuai dengan masing-masing jabatannya.
80

17. Sequence Diagram Edit Akun Pengguna

Gambar 3. 48 Sequence Diagram Edit Akun Pengguna


Sequence diagram edit akun pengguna pada gambar 3.48 dilakukan
oleh tiga aktor, yaitu admin, karyawan dan manajer. Sequence ini
menggambarkan aliran pesan aktor untuk mengedit akun pengguna.
Untuk mengedit, aktor harus masuk ke dalam menu kelola akun.
Kemudian sistem menampilkan pop up edit akun pengguna. Setelah
aktor melakukan edit data lalu klik simpan. Data disimpan dengan
proses query database di tabel pengguna dan sistem akan
mengalihkan aktor ke halaman daftar dashboard.
81

18. Sequence Diagram Hapus Akun Pengguna

Gambar 3. 49 Sequence Diagram Hapus Akun Pengguna


Sequence diagram hapus akun pengguna pada gambar 3.49 dilakukan
oleh satu aktor, yaitu admin. Sequence ini menggambarkan aliran
pesan aktor untuk menghapus akun pengguna. Untuk menghapus
akun, aktor harus memilih salah satu akun yang ingin dihapus pada
halaman daftar pengguna, pilih aksi hapus. Sistem akan menghapus
data dengan proses query database pada tabel pengguna, dan sistem
akan mengalihkan aktor ke halaman daftar pengguna.

19. Sequence Diagram Lihat Akun Pengguna

Gambar 3. 50 Sequence Diagram Lihat Akun Pengguna


Sequence diagram lihat akun pengguna pada gambar 3.50 dilakukan
oleh satu aktor, yaitu admin. Sequence ini menggambarkan aliran
82

pesan aktor untuk melihat data akun. Untuk melihat akun, aktor harus
masuk ke halaman daftar pengguna lalu pilih salah satu akun yang
ingin di lihat secara detail lalu pilih menu aksi lihat. Kemudian sistem
akan menampilkan data dengan proses query database pada tabel
pengguna, dan data akan muncul pop up detail akun pengguna.

20. Sequence Diagram Rangkuman

Gambar 3. 51 Sequence Diagram Rangkuman


Sequence diagram rangkuman pada gambar 3.51 dilakukan oleh tiga
aktor, yaitu admin, karyawan dan manajer. Sequence ini
menggambarkan aliran pesan aktor untuk melihat daftar tugas dari
masing-masing pekerjaan. Untuk melihat rangkuman pekerjaan, aktor
harus masuk kedalam menu rangkuman. Kemudian sistem akan
menampilkan data dengan proses query database pada tabel pekerjaan
dan tabel tugas. Jika data sesuai lalu muncul di halaman rangkuman,
yang berisikan seluruh tugas dari masing-masing pekerjaan yang
diproses di dalam aplikasi.
83

21. Sequence Diagram Laporan

Gambar 3. 52 Sequence Diagram Laporan


Sequence diagram laporan pada gambar 3.52 dilakukan oleh dua
aktor, yaitu admin dan manajer. Sequence ini menggambarkan aliran
pesan aktor untuk melihat daftar laporan seluruh pekerjaan. Untuk
melihat laporan pekerjaan, aktor harus masuk kedalam menu laporan.
Kemudian sistem akan menampilkan data dengan proses query
database pada tabel pekerjaan dan tabel tugas. Jika data sesuai lalu
muncul di halaman laporan.

22. Sequence Diagram Cetak Laporan

Gambar 3. 53 Sequence Diagram Cetak Laporan


Sequence diagram tambah pekerjaan pada gambar 3.53 dilakukan oleh
dua aktor, yaitu admin dan manajer. Sequence ini menggambarkan
aliran pesan aktor untuk melakukan cetak laporan dari seluruh
pekerjaan. Untuk mencetak laporan, aktor perlu masuk dalam menu
laporan. Kemudian sistem akan menampilkan data dengan proses
84

query database pada tabel pekerjaan. Jika data sesuai lalu muncul di
halaman laporan, yang berisikan seluruh daftar pekerjaan. Jika ingin
mencetak laporan, maka aktor perlu melakukan aksi cetak didalam
sebuah halaman laporan, kemudian hasil dari cetak tersebut adalah
dokumen yang berformat pdf.

23. Sequence Diagram Logout

Gambar 3. 54 Sequence Diagram Logout


Sequence diagram logout pada gambar 3.54 dilakukan oleh tiga aktor,
yaitu admin, manajer, karyawan. Sequence ini menggambarkan aliran
pesan yang memungkinkan aktor untuk keluar dari aplikasi. Untuk
memulai logout, aktor memilih menu logout. Kemudian sistem akan
mengarahkan aktor ke halaman login setelah aktor melakukan perintah
logout di dalam aplikasi.

3.12 Perancangan Database


Setelah menganalisis relasi dari masing-masing diagram dalam berbagai
unified modeling language (UML) diagram, berikut ini adalah perancangan
database sebagai berikut :
1. Table Pekerjaan
Nama : pekerjaan
Deskripsi : tabel yang berisi atribut pekerjaan
Primary Key : id_pekerjaan
85

Foreign Key :-
Tabel 3. 4 Perancangan Table Pekerjaan
No Field Tipe Data Batas Keterangan
1 id_pekerjaan Varchar 3 Primary key
2 nama_pekerjaan Varchar 20 Nama pekerjaan
3 deskripsi Text 50 Deskripsi
pekerjaan
4 klien Varchar 20 Klien
5 harga Decimal 20 Harga pekerjaan
6 status Tinyint 15 Status pekerjaan
7 waktu_mulai Date Waktu mulai
8 waktu_selesai Date Waktu selesai

2. Table Tugas
Nama : tugas
Deskripsi : tabel yang berisi atribut tugas
Primary Key : id_tugas
Foreign Key : id_pekerjaan
Tabel 3. 5 Perancangan Table Tugas
No Field Tipe Data Batas Keterangan
1 id_tugas Varchar 3 Primary key
2 id_pekerjaan Varchar 3 Foreign key
3 nama_tugas Varchar 20 Nama tugas
4 deskripsi Text 50 Deskripsi tugas
5 status Tinyint 15 Status tugas

3. Table Laporan
Nama : laporan
Deskripsi : tabel yang berisi atribut laporan
Primary Key : id_laporan
Foreign Key : id_ tugas
86

Tabel 3. 6 Perancangan Table Laporan


No Field Tipe Data Batas Keterangan
1 id_laporan Varchar 2 Primary key
2 id_tugas Varchar 2 Foreign key
3 nama_laporan Text 20 Nama laporan
4 deskripsi Text 50 Deskripsi laporan
5 status Tinyint 15 Status
6 tanggal_mulai Date Tanggal mulai
6 tanggal_selesai Date Tanggal selesai
8 waktu_mulai Time Waktu mulai
9 waktu_selesai Time Waktu selesai

4. Table Pengguna
Nama : pengguna
Deskripsi : tabel yang berisi atribut pengguna
Primary Key : id_pengguna
Foreign Key :-
Tabel 3. 7 Perancangan Table Pengguna
No Field Tipe Data Batas Keterangan
1 id_pengguna Varchar 2 Pk pekerjaan
2 nama_depan Varchar 15 Nama depan
3 nama_belakang Varchar 15 Nama belakang
4 email Varchar 15 Email
5 password Text 15 Password
6 jabatan Tinyint 10 Jabatan
7 foto Text 1 Foto
87

3.13 Perancangan Tampilan


Setelah membuat database, kemudian membuat perancangan tampilan
yang akan dibuat berdasarkan aktor-aktor pada unified modeling language (UML)
diagram, berikut ini adalah hasil dari perancangan tampilan sebagai berikut :

3.13.1 Perancangan Tampilan Admin


1. Perancangan Tampilan Halaman Login Admin

Gambar 3. 55 Perancangan Tampilan Halaman Login Admin


88

2. Perancangan Tampilan Halaman Dashboard Admin

Gambar 3. 56 Perancangan Tampilan Halaman Dashboard Admin

3. Perancangan Tampilan Halaman Tambah Pekerjaan Admin

Gambar 3. 57 Perancangan Tampilan Halaman Tambah Pekerjaan Admin


89

4. Perancangan Tampilan Halaman Daftar Pekerjaan Admin

Gambar 3. 58 Perancangan Tampilan Halaman Daftar Pekerjaan Admin

5. Perancangan Tampilan Halaman Detail Pekerjaan Admin

Gambar 3. 59 Perancangan Tampilan Halaman Detail Pekerjaan Admin


90

6. Perancangan Tampilan Halaman Rangkuman Admin

Gambar 3. 60 Perancangan Tampilan Halaman Rangkuman Admin

7. Perancangan Tampilan Halaman Laporan Admin

Gambar 3. 61 Perancangan Tampilan Halaman Laporan Admin


91

8. Perancangan Tampilan Halaman Tambah Pengguna Admin

Gambar 3. 62 Perancangan Tampilan Halaman Tambah Pengguna Admin

9. Perancangan Tampilan Halaman Daftar Pengguna Admin

Gambar 3. 63 Perancangan Tampilan Halaman Daftar Pengguna Admin


92

10. Perancangan Tampilan Halaman Kelola Akun Admin

Gambar 3. 64 Perancangan Tampilan Halaman Kelola Akun Admin

3.13.2 Perancangan Tampilan Manajer


1. Perancangan Tampilan Halaman Login Manajer

Gambar 3. 65 Perancangan Tampilan Halaman Login Manager


93

2. Perancangan Tampilan Halaman Dashboard Manajer

Gambar 3. 66 Perancangan Tampilan Halaman Dashboard Manajer

3. Perancangan Tampilan Halaman Tambah Pekerjaan Manajer

Gambar 3. 67 Perancangan Tampilan Halaman Tambah Pekerjaan Manajer


94

4. Perancangan Tampilan Halaman Daftar Pekerjaan Manajer

Gambar 3. 68 Perancangan Tampilan Halaman Daftar Pekerjaan Manajer

5. Perancangan Tampilan Halaman Detail Pekerjaan Manajer

Gambar 3. 69 Perancangan Tampilan Halaman Detail Pekerjaan Manajer


95

6. Perancangan Tampilan Halaman Tambah Tugas Manajer

Gambar 3. 70 Perancangan Tampilan Halaman Tambah Tugas Manajer

7. Perancangan Tampilan Halaman Rangkuman Manajer

Gambar 3. 71 Perancangan Tampilan Halaman Rangkuman Manajer


96

8. Perancangan Tampilan Halaman Laporan Manajer

Gambar 3. 72 Perancangan Tampilan Halaman Laporan Manajer

9. Perancangan Tampilan Halaman Kelola Akun Manajer

Gambar 3. 73 Perancangan Tampilan Halaman Kelola Akun Manajer


97

3.13.3 Perancangan Tampilan Karyawan


1. Perancangan Tampilan Halaman Login Karyawan

Gambar 3. 74 Perancangan Tampilan Halaman Login Karyawan

2. Perancangan Tampilan Halaman Dashboard Karyawan

Gambar 3. 75 Perancangan Tampilan Halaman Dashboard Karyawan


98

3. Perancangan Tampilan Halaman Daftar Pekerjaan Karyawan

Gambar 3. 76 Perancangan Tampilan Halaman Daftar Pekerjaan Karyawan

4. Perancangan Tampilan Halaman Detail Pekerjaan Karyawan

Gambar 3. 77 Perancangan Tampilan Halaman Detail Pekerjaan Karyawan


99

5. Perancangan Tampilan Halaman Tambah Laporan Karyawan

Gambar 3. 78 Perancangan Tampilan Halaman Tambah Laporan Karyawan

6. Perancangan Tampilan Halaman Rangkuman Karyawan

Gambar 3. 79 Perancangan Tampilan Halaman Rangkuman Karyawan


100

7. Perancangan Tampilan Halaman Kelola Akun Karyawan

Gambar 3. 80 Perancangan Tampilan Halaman Kelola Akun Karyawan


4. IMPLEMENTASI DAN PENGUJIAN

4.1.1 Implementasi Database (Basis Data)


Setelah membuat perancangan tampilan aplikasi, kemudian
mengimplementasikan dengan cara membuat aplikasi sesuai dengan perancangan
sebelumnya. Sebelum membuat aplikasi, terlebih dahulu membuat database yang
digunakan untuk penyimpanan dari sebuah data di dalam aplikasi. Dibuat dengan
cara teknik pengkodean maupun dengan antarmuka di dalam aplikasi MySQL.
Berikut ini adalah tampilan antarmuka hasil dari implementasi database pada
gambar 4.1 sebagai berikut :

Gambar 4. 1 Implementasi Database


Dibawah ini adalah penjelasan dari table yang terdiri dari field dan record
dalam masing-masing table dari database, yang diantara lainnya terdiri sebagai
berikut :

101
102

4.1.2 Table Pekerjaan


1. Field Table Pekerjaan

Gambar 4. 2 Field Table Pekerjaan

2. Record Table Pekerjaan

Gambar 4. 3 Record Table Pekerjaan


103

4.1.3 Table Pengguna


1. Field Table Pengguna

Gambar 4. 4 Field Table Pengguna

2. Record Table Pengguna

Gambar 4. 5 Record Table Pengguna


104

4.1.4 Table Tugas


1. Field Table Tugas

Gambar 4. 6 Field Table Tugas

2. Record Table Tugas

Gambar 4. 7 Record Table Tugas


105

4.1.5 Table Laporan


1. Field Table Laporan

Gambar 4. 8 Field Table Laporan

2. Record Table Laporan

Gambar 4. 9 Record Table Laporan

4.2 Implementasi Tampilan


Setelah membuat perancangan tampilan, kemudian mengimplementasikan
dengan cara membuat aplikasi sesuai dengan perancangan dari unified modeling
language (UML) diagram, perancangan database, dan perancangan tampilan
aplikasi untuk menjadi aplikasi yang nyata, dibuat dengan cara teknik
pengkodean. Berikut ini adalah tampilan antarmuka hasil dari implementasi
aplikasi yang dibuat sebagai berikut :
106

4.2.1 Implementasi Tampilan Admin


1. Implementasi Tampilan Halaman Login Admin

Gambar 4. 10 Implementasi Tampilan Halaman Login Admin

2. Implementasi Tampilan Halaman Dashboard Admin

Gambar 4. 11 Implementasi Tampilan Halaman Dashboard Admin


107

3. Implementasi Tampilan Halaman Tambah Pekerjaan Admin

Gambar 4. 12 Implementasi Tampilan Halaman Tambah Pekerjaan Admin

4. Implementasi Tampilan Halaman Daftar Pekerjaan Admin

Gambar 4. 13 Implementasi Tampilan Halaman Daftar Pekerjaan Admin


108

5. Implementasi Tampilan Halaman Detail Pekerjaan Admin

Gambar 4. 14 Implementasi Tampilan Halaman Detail Pekerjaan Admin


109

6. Implementasi Tampilan Halaman Rangkuman Admin

Gambar 4. 15 Implementasi Tampilan Halaman Rangkuman Admin

7. Implementasi Tampilan Halaman Laporan Admin

Gambar 4. 16 Implementasi Tampilan Halaman Laporan Admin


110

8. Implementasi Tampilan Halaman Cetak Laporan Admin

Gambar 4. 17 Implementasi Tampilan Halaman Cetak Laporan Admin

9. Implementasi Tampilan Halaman Tambah Pengguna Admin

Gambar 4. 18 Implementasi Tampilan Halaman Tambah Pengguna Admin


111

10. Implementasi Tampilan Halaman Daftar Pengguna Admin

Gambar 4. 19 Implementasi Tampilan Halaman Daftar Pengguna Admin

11. Implementasi Tampilan Halaman Kelola Akun Admin

Gambar 4. 20 Implementasi Tampilan Halaman Kelola Akun Admin


112

4.2.2 Implementasi Tampilan Manajer


1. Implementasi Tampilan Halaman Login Manajer

Gambar 4. 21 Implementasi Tampilan Halaman Login Manajer

2. Implementasi Tampilan Halaman Dashboard Manajer

Gambar 4. 22 Implementasi Tampilan Halaman Dashboard Manajer


113

3. Implementasi Tampilan Halaman Tambah Pekerjaan Manajer

Gambar 4. 23 Implementasi Tampilan Halaman Tambah Pekerjaan Manajer

4. Implementasi Tampilan Halaman Daftar Pekerjaan Manajer

Gambar 4. 24 Implementasi Tampilan Halaman Daftar Pekerjaan Manajer


114

5. Implementasi Tampilan Halaman Detail Pekerjaan Manajer

Gambar 4. 25 Implementasi Tampilan Halaman Detail Pekerjaan Manajer


115

6. Implementasi Tampilan Halaman Cetak Detail Pekerjaan Manajer

Gambar 4. 26 Implementasi Tampilan Halaman Cetak Detail Pekerjaan


Manajer
116

7. Implementasi Tampilan Halaman Tambah Tugas Manajer

Gambar 4. 27 Implementasi Tampilan Halaman Tambah Tugas Manajer

8. Implementasi Tampilan Halaman Rangkuman Manajer

Gambar 4. 28 Implementasi Tampilan Halaman Rangkuman Manajer


117

9. Implementasi Tampilan Halaman Laporan Manajer

Gambar 4. 29 Implementasi Tampilan Halaman Laporan Manajer

10. Implementasi Tampilan Halaman Kelola Akun Manajer

Gambar 4. 30 Implementasi Tampilan Halaman Kelola Akun Manajer


118

4.2.3 Implementasi Tampilan Karyawan


1. Implementasi Tampilan Halaman Login Karyawan

Gambar 4. 31 Implementasi Tampilan Halaman Login Karyawan

2. Implementasi Tampilan Halaman Dashboard Karyawan

Gambar 4. 32 Implementasi Tampilan Halaman Dashboard Karyawan


119

3. Implementasi Tampilan Halaman Daftar Pekerjaan Karyawan

Gambar 4. 33 Implementasi Tampilan Halaman Daftar Pekerjaan Karyawan


120

4. Implementasi Tampilan Halaman Detail Pekerjaan Karyawan

Gambar 4. 34 Implementasi Tampilan Halaman Detail Pekerjaan Karyawan


121

5. Implementasi Tampilan Halaman Tambah Laporan Karyawan

Gambar 4. 35 Implementasi Tampilan Halaman Tambah Laporan Karyawan

6. Implementasi Tampilan Halaman Rangkuman Karyawan

Gambar 4. 36 Implementasi Tampilan Halaman Rangkuman Karyawan


122

7. Implementasi Tampilan Halaman Kelola Akun Karyawan

Gambar 4. 37 Implementasi Tampilan Halaman Kelola Akun Karyawan

4.3 Pengujian
Pengujian pada aplikasi merupakan proses pengeksekusi sistem perangkat
lunak untuk menentukan apakah aplikasi tersebut sesuai dengan spesifikasi dan
berjalan seperti yang diinginkan. Pengujian sering dengan pencarian bug,
ketidaksempurnaan aplikasi, kesalahan pada aplikasi yang menyebabkan
kegagalan eksekusi sistem pada aplikasi.
Pengujian dilakukan dengan menguji setiap proses dan menemukan
kesalahan yang terjadi untuk setiap proses. Adapun metode yang digunakan dalam
pengujian ini adalah dengan metode black box testing atau yang biasa disebut
dengan pengujian struktural dengan melibatkan pengetahuan teknis terperinci dari
sistem pada aplikasi. Berikut ini adalah hasil dari pengujian aplikasi dengan
menggunakan metode black box testing sebagai berikut :
1. Pengujian Menu Pekerjaan
Tabel 4. 1 Pengujian Menu Pekerjaan
No Aktor Aksi Hasil Aksi Hasil Uji
1 Admin Membuat Data pekerjaan [√] Sukses
Manajer pekerjaan tersimpan [√] Gagal
2 Admin Melihat daftar Tampil seluruh [√] Sukses
Manajer pekerjaan data pekerjaan [√] Gagal
123

No Aktor Aksi Hasil Aksi Hasil Uji


Karyawan
3 Admin Menghapus data Data pekerjaan [√] Sukses
Manajer pekerjaan terhapus [√] Gagal
4 Admin Mengedit data Data pekerjaan [√] Sukses
Manajer pekerjaan teredit [√] Gagal
5 Admin Melihat detail Menampilkan [√] Sukses
Manajer salah satu detail salah satu [√] Gagal
Karyawan pekerjaan pekerjaan yang
dipilih
6 Manajer Cetak detail Detail pekerjaan [√] Sukses
pekerjaan tercetak menjadi [√] Gagal
dokumen
berformat pdf
7 Manajer Membuat tugas Data tugas [√] Sukses
dalam suatu tersimpan sesuai [√] Gagal
pekerjaan dengan pekerjaan
8 Manajer Menghapus data Data tugas [√] Sukses
tugas terhapus [√] Gagal
9 Manajer Mengedit data Data tugas teredit [√] Sukses
tugas [√] Gagal
10 Karyawan Membuat laporan Data laporan [√] Sukses
dalam suatu tugas tersimpan sesuai [√] Gagal
dengan tugas
11 Karyawan Menghapus data Data laporan [√] Sukses
laporan terhapus [√] Gagal
12 karyawan Mengedit data Data laporan [√] Sukses
laporan teredit [√] Gagal
124

2. Pengujian Pengguna Menu Pengguna


Tabel 4. 2 Pengujian Menu Pengguna
No Aktor Aksi Hasil Aksi Hasil Uji
1 Admin Membuat akun Data akun [√] Sukses
pengguna pengguna [√] Gagal
tersimpan
2 Admin Melihat daftar Menampilkan [√] Sukses
pengguna seluruh data [√] Gagal
pengguna
3 Admin Menghapus akun Data akun [√] Sukses
pengguna pengguna terhapus [√] Gagal
4 Admin Mengedit akun Data akun [√] Sukses
Manajer pengguna pengguna teredit [√] Gagal
Karyawan

3. Pengujian Menu Laporan


Tabel 4. 3 Pengujian Menu Laporan
No Aktor Aksi Hasil Aksi Hasil Uji
1 Admin Melihat laporan Menampilkan [√] Sukses
Manajer pekerjaan seluruh laporan [√] Gagal
pekerjaan
2 Admin Mencetak laporan Laporan pekerjaan [√] Sukses
pekerjaan tercetak menjadi [√] Gagal
dokumen
berformat pdf

4. Pengujian Menu Rangkuman


Tabel 4. 4 Pengujian Menu Laporan
No Aktor Aksi Hasil Aksi Hasil Uji
1 Admin Melihat Menampilkan [√] Sukses
Manajer rangkuman tugas seluruh tugas [√] Gagal
125

No Aktor Aksi Hasil Aksi Hasil Uji


Karyawan pekerjaan
2 Karyawan Membuat laporan Laporan pekerjaan [√] Sukses
telah tercetak [√] Gagal
menjadi dokumen
berformat pdf

4.4 Perangkat
Sistem manajemen pengelola tugas dan laporan proyek pekerjaan ini
dibangun menggunakan perangkat keras (hardware) dan perangkat lunak
(software) dengan rincian spesifikasi yang akan dijelaskan sebagai berikut :

4.4.1 Perangkat Keras


Perangkat keras (hardware) yang digunakan dalam perancangan dan
pembuatan sistem ini adalah :
1. Perangkat : Laptop ASUS VivoBook K513EA
2. Processor : Intel(R) Core (TM) i3-1115G3 3.00Ghz
3. RAM : 4 Gigabyte
4. SSD : 500 Gigabyte

4.4.2 Perangkat Lunak


Perangkat lunak (software) yang digunakan dalam perancangan dan
pembuatan sistem ini adalah :
1. Sistem Operasi : Windows 10 Home Single Language 64-bit
2. Text Editor : Microsoft Visual Studio Code
3. Browser : Google Chrome
4. Pengolah Kata : Microsoft Office
5. Pengolah Gambar : Figma
6. Pengolah Diagram : https://app.diagrams.net
7. Web Server Lokal : XAMPP
5. PENUTUP

5.1 Simpulan
Berdasarkan hasil uji coba dan implementasi bahwa aplikasi tersebut telah
berhasil dijalankan sesuai dengan rancangannya. Sehingga sistem ini mampu
menunjang kebutuhan dari sebuah pekerjaan yang memerlukan pencatatan tugas
dan laporan proyek pekerjaan. Berikut terdapat beberapa hal dari hasil yang
diuraikan bahwa :
1. Karyawan dapat melihat daftar tugas yang diberikan berikut dengan
spesifikasi dan mempermudah dalam pembuatan laporan melalui
aplikasi, sehingga tanpa harus menulis catatan laporan dalam buku
catatan tugas.
2. Manajer dan direktur mudah dalam memonitor proyek pekerjaan,
karena dapat melihat tugas-tugas apa saja yang telah selesai sesuai
dengan rencana ataupun tugas yang belum selesai karena tidak sesuai
dengan rencana.
3. Manajer mudah dalam merekapitulasi tugas dan laporan proyek
pekerjaan yang akan digunakan sebagai laporan kepada klien.

5.2 Saran
Saran yang dapat diajukan untuk pengembangan aplikasi yang lebih lanjut,
antara lain :
1. Aplikasi ini dapat dikembangkan menjadi lebih luas terkait dengan
pembobotan proyek pekerjaan seperti keuangan, dan persuratan.
2. Aplikasi ini dapat dikembangkan dengan memberikan notifikasi
peringatan kepada akun manajer dan karyawan ketika ada tugas di
dalam sebuah proyek pekerjaan yang sudah mendekati waktu batas
jatuh tempo di dalam aplikasi tersebut.
3. Sebaiknya aplikasi dapat dikembangkan menjadi aplikasi berbasis
device mobile agar memudahkan dalam mengakses aplikasi tanpa
harus masuk ke dalam browser terlebih dahulu.

126
DAFTAR PUSTAKA

[1] Maryati, Manajemen Perkantoran Efektif, Edisi Pertama, UPP STIM


YKPN, Yogyakarta, 2008.
[2] Rosa A. S & M. Shalahuddin, Rekayasa Perangkat Lunak Terstruktur dan
Berorientasi Objek, Informatika, Bandung, 2016.
[3] Mustaqbal, M.S.M., Firdaus, R.F.F., dan Rahmadi, H.R. Pengujian
Aplikasi Menggunakan Black Box Testing Boundary Value Analysis (Studi
Kasus Aplikasi Prediksi Kelulusan SNMPTN). Jurnal Ilmiah Teknologi
Terapan (JITTER), 2015.
[4] Rizky, Soetam, Konsep Dasar Rekayasa Perangkat Lunak, Prestasi
Pustaka, Jakarta, 2011.
[5] La Midjan & Susanto, A., Sistem Informasi Akuntansi Konsep dan
Pengembangannya, Lingga Jaya, Bandung, 2013.
[6] Sanjaya Wina, Kurikulum dan Pembelajaran (Teori dan Praktik
Perkembangan Kurikulum Tingkat Satuan Pendidikan), Prenada Media
Group, Jakarta, 2015.
[7] Anoraga P, Pengantar Bisnis : Pengelolaan Bisnis dalam Era Globalisasi,
PT Rineka Cipta, Jakarta, 2007.
[8] Donni Juni Priansa, Komunikasi Pemasaran Terpadu Pada Era Media
Sosial, CV Pustaka Setia, Bandung, 2017.
[9] Abrar Husen, Manajemen Proyek : Perencanaan Penjadwalan dan
Pengendalian Proyek, Andi, Yogyakarta, 2009.
[10] Rohi Abdulloh, 7 in 1 Pemrograman Web, PT Elex Media Komputindo,
Jakarta, 2018.
[11] Andy Krisianto, Internet untuk Pemula, PT Elex Media Komputindo,
Jakarta, 2014.
[12] Binanto & Iwan, Multimedia Dasar Teori + Pengembangannya, Andi
Offset, Yogyakarta, 2010.
[13] Abdul Kadir, Dasar Pemrograman Web dengan ASP, Andi Offset,
Yogyakarta, 2010.

127
128

[14] Wibowo, Dwi Putro, Pembuatan Aplikasi dengan XAMPP, Komputindo,


Jakarta, 2006.
[15] Abdul Kadir, Pengenalan Sistem Informasi, Andi Offset, Yogyakarta,
2003.
[16] Sidik B, MySQL untuk Pengguna Administrator dan Pengembangan
Aplikasi Web, Informatika, Bandung,2005.
[17] MySQL, “What is MySQL?”,
https://dev.mysql.com/doc/refman/5.7/en/what-is-mysql.html, 1 Juni 2022
[18] Setiawan, Foni Agus, Pemrograman Internet, Graha Ilmu, Yogyakarta,
2012.
[19] Setiawan, Didik, Buku Sakti Pemrograman Web : HTML CSS PHP
MySQL & JavaScript, PT Anak Hebat Indonesia, Yogyakarta, 2017.
[20] Madcoms, Pemrograman PHP dan MySQL untuk Pemula, Andi Offset,
Yogyakarta, 2016.
[21] Madcoms, JavaScript Untuk Membangun Website Profesional, Andi
Offset, Yogyakarta, 2012.
[22] Zaenal A Rozi & SmitDev, Bootstrap Design Framework, PT Elex Media
Komputerindo, Jakarta, 2015.
LAMPIRAN

1. Database
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";

-- Struktur dari tabel `laporan`--


CREATE TABLE `laporan` (
`id_laporan` int(3) NOT NULL,
`id_tugas` int(3) NOT NULL,
`nama_tugas` varchar(20) NOT NULL,
`deskripsi` text NOT NULL,
`tanggal_mulai` date NOT NULL,
`tanggal_selesai` date NOT NULL,
`waktu_mulai` time NOT NULL,
`waktu_selesai` time NOT NULL,
`status_laporan` tinyint(2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `laporan`--


INSERT INTO `laporan` (`id_laporan`, `id_tugas`, `nama_tugas`,
`deskripsi`, `tanggal_mulai`, `tanggal_selesai`, `waktu_mulai`,
`waktu_selesai`, `status_laporan`) VALUES
(1, 0, 'Kusen & Pintur K. Ti', 'Ukuran Daun Pintu Tidak Sesuai Dengan
Kusen', '2022-06-01', '2022-06-02', '17:40:42', '24:59:30', 2),
(2, 0, 'Pagar Proyek', 'Pemasangan Pagar Proyek Sesuai SOP', '2022-06-
02', '2022-06-03', '12:59:36', '12:59:39', 1),
(3, 0, 'Kolom Praktis K2', 'Pembuatan Kolom Praktis K2', '2022-06-08',
'2022-06-08', '13:01:34', '13:01:31', 1),

129
(4, 0, 'Stik Kolom', 'Pembuatan Stik Kolom', '2022-06-02', '2022-06-10',
'13:02:32', '13:01:30', 2),
(5, 0, 'Penyediaan Air Kerja', 'Air Untuk Kebutuhan Pekerjaan', '2022-06-
08', '2022-06-22', '13:02:55', '13:02:55', 1),
(6, 0, 'Pengukuran', 'Pengukuran Pondasi Setempat', '2022-06-23', '2022-
06-30', '13:02:55', '13:06:56', 1),
(7, 0, 'Bouwplank', 'Pemasangan Bouwplank Pondasi Setempat', '2022-06-
08', '2022-06-22', '13:02:55', '13:01:31', 1);

-- Struktur dari tabel `pekerjaan`--


CREATE TABLE `pekerjaan` (
`id_pekerjaan` int(3) NOT NULL,
`id_pengguna` int(3) NOT NULL,
`id_tugas` int(3) NOT NULL,
`id_laporan` int(3) NOT NULL,
`nama_pekerjaan` varchar(20) NOT NULL,
`deskripsi` text NOT NULL,
`klien` varchar(20) NOT NULL,
`harga` varchar(30) NOT NULL,
`tanggal_mulai` date NOT NULL,
`tanggal_selesai` date NOT NULL,
`status_pekerjaan` tinyint(4) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `pekerjaan`--


INSERT INTO `pekerjaan` (`id_pekerjaan`, `id_pengguna`, `id_tugas`,
`id_laporan`, `nama_pekerjaan`, `deskripsi`, `klien`, `harga`,
`tanggal_mulai`, `tanggal_selesai`, `status_pekerjaan`) VALUES
(1, 0, 0, 0, 'Pembangunan Rumah', '', 'Aditya Pratama', '800000000', '2022-
06-22', '2022-09-30', 1);
-- Struktur dari tabel `pengguna`--
CREATE TABLE `pengguna` (
`id_pengguna` int(3) NOT NULL,
`nama_depan` varchar(10) NOT NULL,
`nama_belakang` varchar(10) NOT NULL,
`jabatan` tinyint(3) NOT NULL,
`email` varchar(10) NOT NULL,
`password` text NOT NULL,
`foto` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `pengguna`--


INSERT INTO `pengguna` (`id_pengguna`, `nama_depan`,
`nama_belakang`, `jabatan`, `email`, `password`, `foto`) VALUES
(1, 'admin', ' ', 1, 'admin@abn.', 'admin', ''),
(3, 'manajer', '1', 2, 'manajer1@a', 'admin', ''),
(5, 'karyawan', '1', 3, 'karyawan1@', 'admin', '');

-- Struktur dari tabel `tugas`--


CREATE TABLE `tugas` (
`id_tugas` int(3) NOT NULL,
`nama_tugas` varchar(20) NOT NULL,
`deskripsi` text NOT NULL,
`status_tugas` tinyint(2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `tugas`--


INSERT INTO `tugas` (`id_tugas`, `nama_tugas`, `deskripsi`,
`status_tugas`) VALUES
(1, 'Stik Kolom', '20/40', 1),
(2, 'Plafon', 'gipsum', 1),
(3, 'Penyediaan Air Kerja', 'penyediaan air untuk kebutuhan pekerjaan', 1),
(4, 'Pengukuran', 'pengukuran pondasi setempat', 1),
(5, 'Pagar Proyek', 'pemasangan pagar proyek pada sekitar pada area
setempat', 1),
(6, 'Kusen & Pintur K. Ti', 'pintu satu daun', 1),
(7, 'Kusen & Pintu Belaka', 'pintu jalusi kayu', 1),
(8, 'Kolom Praktis K2', '15/15 M3', 1),
(9, 'Bouwplank', 'pemasangan bouwplank pada pondasi setempat', 1),
(10, 'Bata Dinding', '1:4 M3', 1);

-- Indeks untuk tabel `laporan`--


ALTER TABLE `laporan`
ADD PRIMARY KEY (`id_laporan`);

-- Indeks untuk tabel `pekerjaan`--


ALTER TABLE `pekerjaan`
ADD PRIMARY KEY (`id_pekerjaan`,`id_laporan`);

-- Indeks untuk tabel `pengguna`--


ALTER TABLE `pengguna`
ADD PRIMARY KEY (`id_pengguna`);

-- Indeks untuk tabel `tugas`--


ALTER TABLE `tugas`
ADD PRIMARY KEY (`id_tugas`);

-- AUTO_INCREMENT untuk tabel `laporan`--


ALTER TABLE `laporan`
MODIFY `id_laporan` int(3) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=8;
-- AUTO_INCREMENT untuk tabel `pekerjaan`--
ALTER TABLE `pekerjaan`
MODIFY `id_pekerjaan` int(3) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=3;

-- AUTO_INCREMENT untuk tabel `pengguna`--


ALTER TABLE `pengguna`
MODIFY `id_pengguna` int(3) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=7;

-- AUTO_INCREMENT untuk tabel `tugas`--


ALTER TABLE `tugas`
MODIFY `id_tugas` int(3) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=11;
COMMIT;

2. Aplikasi
2.1 db_connect.php
<?php
$conn= new mysqli('localhost','root','','tms_db')or die("Could not
connect to mysql".mysqli_error($con));
?>

2.2 admin_class.php
<?php
session_start();
ini_set('display_errors', 1);
Class Action {
private $db;
public function __construct() {
ob_start();
include 'db_connect.php';
$this->db = $conn;
}
function __destruct() {
$this->db->close();
ob_end_flush();
}
function login(){
extract($_POST);
$qry = $this->db->query("SELECT *,concat(firstname,' ',lastname)
as name FROM users where email = '".$email."' and password =
'".md5($password)."' ");
if($qry->num_rows > 0){
foreach ($qry->fetch_array() as $key => $value) {
if($key != 'password' && !is_numeric($key))
$_SESSION['login_'.$key] = $value;
}
return 1;
}else{
return 2;
}
}
function logout(){
session_destroy();
foreach ($_SESSION as $key => $value) {
unset($_SESSION[$key]);
}
header("location:login.php");
}
function login2(){
extract($_POST);
$qry = $this->db->query("SELECT *,concat(lastname,',
',firstname,' ',middlename) as name FROM students where
student_code = '".$student_code."' ");
if($qry->num_rows > 0){
foreach ($qry->fetch_array() as $key => $value) {
if($key != 'password' && !is_numeric($key))
$_SESSION['rs_'.$key] = $value;
}
return 1;
}else{
return 3;
}
}
function save_user(){
extract($_POST);
$data = "";
foreach($_POST as $k => $v){
if(!in_array($k, array('id','cpass','password')) &&
!is_numeric($k)){
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
if(!empty($password)){
$data .= ", password=md5('$password') ";
}
$check = $this->db->query("SELECT * FROM users where email
='$email' ".(!empty($id) ? " and id != {$id} " : ''))->num_rows;
if($check > 0){
return 2;
exit;
}
if(isset($_FILES['img']) && $_FILES['img']['tmp_name']
!= ''){
$fname = strtotime(date('y-m-d H:i')).'_'.$_FILES['img']['name'];
$move=
move_uploaded_file($_FILES['img']['tmp_name'],'assets/uploads/'.
$fname);
$data .= ", avatar = '$fname' ";
}
if(empty($id)){
$save = $this->db->query("INSERT INTO users set $data");
}else{
$save = $this->db->query("UPDATE users set $data where id =
$id");
}
if($save){
return 1;
}
}
function signup(){
extract($_POST);
$data = "";
foreach($_POST as $k => $v){
if(!in_array($k, array('id','cpass')) && !is_numeric($k)){
if($k =='password'){
if(empty($v))
continue;
$v = md5($v);
}
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
$check = $this->db->query("SELECT * FROM users where email
='$email' ".(!empty($id) ? " and id != {$id} " : ''))->num_rows;
if($check > 0){
return 2;
exit;
}
if(isset($_FILES['img']) && $_FILES['img']['tmp_name'] != ''){
$fname = strtotime(date('y-m-d H:i')).'_'.$_FILES['img']['name'];
$move =
move_uploaded_file($_FILES['img']['tmp_name'],'assets/uploads/'.
$fname);
$data .= ", avatar = '$fname' ";
}
if(empty($id)){
$save = $this->db->query("INSERT INTO users set $data");
}else{
$save = $this->db->query("UPDATE users set $data where id =
$id");
}
if($save){
if(empty($id))
$id = $this->db->insert_id;
foreach ($_POST as $key => $value) {
if(!in_array($key,
array('id','cpass','password')) && !is_numeric($key))
$_SESSION['login_'.$key] = $value;
}
$_SESSION['login_id'] = $id;
if(isset($_FILES['img']) && !empty($_FILES['img']['tmp_name']))
$_SESSION['login_avatar'] = $fname;
return 1;
}
}
function update_user(){
extract($_POST);
$data = "";
foreach($_POST as $k => $v){
if(!in_array($k, array('id','cpass','table','password'))
&& !is_numeric($k)){
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
$check = $this->db->query("SELECT * FROM users where email
='$email' ".(!empty($id) ? " and id != {$id} " : ''))->num_rows;
if($check > 0){
return 2;
exit;
}
if(isset($_FILES['img']) && $_FILES['img']['tmp_name'] != ''){
$fname = strtotime(date('y-m-d H:i')).'_'.$_FILES['img']['name'];
$move =
move_uploaded_file($_FILES['img']['tmp_name'],'assets/uploads/'.
$fname);
$data .= ", avatar = '$fname' ";
}
if(!empty($password))
$data .= " ,password=md5('$password') ";
if(empty($id)){
$save = $this->db->query("INSERT INTO users set $data");
}else{
$save = $this->db->query("UPDATE users set $data where id =
$id");
}
if($save){
foreach ($_POST as $key => $value) {
if($key != 'password' && !is_numeric($key))
$_SESSION['login_'.$key] = $value;
}
if(isset($_FILES['img']) && !empty($_FILES['img']['tmp_name']))
$_SESSION['login_avatar'] = $fname;
return 1;
}
}
function delete_user(){
extract($_POST);
$delete = $this->db->query("DELETE FROM users where id =
".$id);
if($delete)
return 1;
}
function save_system_settings(){
extract($_POST);
$data = '';
foreach($_POST as $k => $v){
if(!is_numeric($k)){
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
if($_FILES['cover']['tmp_name'] != ''){
$fname = strtotime(date('y-m-d H:i')).'_'.$_FILES['cover']['name'];
$move =
move_uploaded_file($_FILES['cover']['tmp_name'],'../assets/uploa
ds/'. $fname);
$data .= ", cover_img = '$fname' ";
}
$chk = $this->db->query("SELECT * FROM system_settings");
if($chk->num_rows > 0){
$save = $this->db->query("UPDATE system_settings set $data
where id =".$chk->fetch_array()['id']);
}else{
$save = $this->db->query("INSERT INTO system_settings set
$data");
}
if($save){
foreach($_POST as $k => $v){
if(!is_numeric($k)){
$_SESSION['system'][$k] = $v;
}
}
if($_FILES['cover']['tmp_name'] != ''){
$_SESSION['system']['cover_img'] =
$fname;
}
return 1;
}
}
function save_image(){
extract($_FILES['file']);
if(!empty($tmp_name)){
$fname = strtotime(date("Y-m-d H:i"))."_".(str_replace(" ","-
",$name));
$move = move_uploaded_file($tmp_name,'assets/uploads/'.
$fname);
$protocol =
strtolower(substr($_SERVER["SERVER_PROTOCOL"],0,5))=='h
ttps'?'https':'http';
$hostName = $_SERVER['HTTP_HOST'];
$path =explode('/',$_SERVER['PHP_SELF']);
$currentPath = '/'.$path[1];
if($move){
return
$protocol.'://'.$hostName.$currentPath.'/assets/uploads/'.$fname;
}
}
}
function save_project(){
extract($_POST);
$data = "";
foreach($_POST as $k => $v){
if(!in_array($k, array('id','user_ids')) && !is_numeric($k)){
if($k == 'description')
$v = htmlentities(str_replace("'","&#x2019;",$v));
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
if(isset($user_ids)){
$data .= ", user_ids='".implode(',',$user_ids)."' ";
}
// echo $data;exit;
if(empty($id)){
$save = $this->db->query("INSERT INTO project_list set $data");
}else{
$save = $this->db->query("UPDATE project_list set $data where
id = $id");
}
if($save){
return 1;
}
}
function delete_project(){
extract($_POST);
$delete = $this->db->query("DELETE FROM project_list where id
= $id");
if($delete){
return 1;
}
}
function save_task(){
extract($_POST);
$data = "";
foreach($_POST as $k => $v){
if(!in_array($k, array('id')) && !is_numeric($k)){
if($k == 'description')
$v = htmlentities(str_replace("'","&#x2019;",$v));
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
if(empty($id)){
$save = $this->db->query("INSERT INTO task_list set $data");
}else{
$save = $this->db->query("UPDATE task_list set $data where id =
$id");
}
if($save){
return 1;
}
}
function delete_task(){
extract($_POST);
$delete = $this->db->query("DELETE FROM task_list where id =
$id");
if($delete){
return 1;
}
}
function save_progress(){
extract($_POST);
$data = "";
foreach($_POST as $k => $v){
if(!in_array($k, array('id')) && !is_numeric($k)){
if($k == 'comment')
$v = htmlentities(str_replace("'","&#x2019;",$v));
if(empty($data)){
$data .= " $k='$v' ";
}else{
$data .= ", $k='$v' ";
}
}
}
$dur = abs(strtotime("2020-01-01 ".$end_time)) -
abs(strtotime("2020-01-01 ".$start_time));
$dur = $dur / (60 * 60);
$data .= ", time_rendered='$dur' ";
// echo "INSERT INTO user_productivity set $data"; exit;
if(empty($id)){
$data .= ", user_id={$_SESSION['login_id']} ";
$save = $this->db->query("INSERT INTO user_productivity set
$data");
}else{
$save = $this->db->query("UPDATE user_productivity set $data
where id = $id");
}
if($save){
return 1;
}
}
function delete_progress(){
extract($_POST);
$delete = $this->db->query("DELETE FROM user_productivity
where id = $id");
if($delete){
return 1;
}
}
function get_report(){
extract($_POST);
$data = array();
$get = $this->db->query("SELECT t.*,p.name as ticket_for FROM
ticket_list t inner join pricing p on p.id = t.pricing_id where
date(t.date_created) between '$date_from' and '$date_to' order by
unix_timestamp(t.date_created) desc ");
while($row= $get->fetch_assoc()){
$row['date_created'] = date("M d,
Y",strtotime($row['date_created']));
$row['name'] = ucwords($row['name']);
$row['adult_price'] = number_format($row['adult_price'],2);
$row['child_price'] = number_format($row['child_price'],2);
$row['amount'] = number_format($row['amount'],2);
$data[]=$row;
}
return json_encode($data)
}
}
2.3 ajax.php
<?php
ob_start();
date_default_timezone_set("Asia/Jakarta");
$action = $_GET['action'];
include 'admin_class.php';
$crud = new Action();
if ($action == 'login') {
$login = $crud->login();
if ($login)
echo $login;
}
if ($action == 'login2') {
$login = $crud->login2();
if ($login)
echo $login;
}
if ($action == 'logout') {
$logout = $crud->logout();
if ($logout)
echo $logout;
}
if ($action == 'logout2') {
$logout = $crud->logout2();
if ($logout)
echo $logout;
}
if ($action == 'signup') {
$save = $crud->signup();
if ($save)
echo $save;
}
if ($action == 'save_user') {
$save = $crud->save_user();
if ($save)
echo $save;
}
if ($action == 'update_user') {
$save = $crud->update_user();
if ($save)
echo $save;
}
if ($action == 'delete_user') {
$save = $crud->delete_user();
if ($save)
echo $save;
}
if ($action == 'save_project') {
$save = $crud->save_project();
if ($save)
echo $save;
}
if ($action == 'delete_project') {
$save = $crud->delete_project();
if ($save)
echo $save;
}
if ($action == 'save_task') {
$save = $crud->save_task();
if ($save)
echo $save;
}
if ($action == 'delete_task') {
$save = $crud->delete_task();
if ($save)
echo $save;
}
if ($action == 'save_progress') {
$save = $crud->save_progress();
if ($save)
echo $save;
}
if ($action == 'delete_progress') {
$save = $crud->delete_progress();
if ($save)
echo $save;
}
if ($action == 'get_report') {
$get = $crud->get_report();
if ($get)
echo $get;
}
ob_end_flush();

2.4 index.php
<!DOCTYPE html>
<html lang="en">
<?php session_start() ?>
<?php
if (!isset($_SESSION['login_id']))
header('location:login.php');
include 'db_connect.php';
ob_start();
if (!isset($_SESSION['system'])) {

$system = $conn->query("SELECT * FROM system_settings")-


>fetch_array();
foreach ($system as $k => $v) {
$_SESSION['system'][$k] = $v;
}
}
ob_end_flush();

include 'header.php'
?>
<body class="hold-transition sidebar-mini layout-fixed layout-
navbar-fixed layout-footer-fixed">
<div class="wrapper">
<?php include 'topbar.php' ?>
<?php include 'sidebar.php' ?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<div class="toast" id="alert_toast" role="alert" aria-
live="assertive" aria-atomic="true">
<div class="toast-body text-white">
</div>
</div>
<div id="toastsContainerTopRight" class="toasts-top-right
fixed"></div>
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h5 class="m-0"><b><?php echo $title ?></b></h5>
</div><!-- /.col -->
</div><!-- /.row -->
<hr class="border-primary">
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<?php
$page = isset($_GET['page']) ? $_GET['page'] : 'home';
if (!file_exists($page . ".php")) {
include '404.html';
} else {
include $page . '.php';
}
?>
</div>
<!--/. container-fluid -->
</section>
<!-- /.content -->
<div class="modal fade" id="confirm_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Konfirmasi</h5>
</div>
<div class="modal-body">
<div id="delete_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
id='confirm' onclick="">Ya</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Tidak</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uni_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='submit'
onclick="$('#uni_modal form').submit()">Simpan</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Batal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uni_modal_right" role='dialog'>
<div class="modal-dialog modal-full-height modal-md"
role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span class="fa fa-arrow-right"></span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="modal fade" id="viewer_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-
dismiss="modal"><span class="fa fa-times"></span></button>
<img src="" alt="">
</div>
</div>
</div>
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
Copyright &copy; 2021
<div class="float-right d-none d-sm-inline-block">
<b>PT ADIKARA BANGUN NUSANTARA</b>
</div>
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<!-- Bootstrap -->
<?php include 'footer.php' ?>
</body>
</html>

Anda mungkin juga menyukai