LAPORAN PKL Dania, Syaifudin, Rifaldi

LAPORAN PRAKTIK KERJA LAPANGAN (PKL)
PT CMLABS INDONESIA DIGITAL
PENGEMBANGAN SISTEM INFORMASI MANAJEMEN INTERNSHIP

PROGRAM BERBASIS WEBSITE DI PT CMLABS INDONESIA DIGITAL
DENGAN METODE EXTREME PROGRAMMING
Diajukan untuk memenuhi sebagian persyaratan Kurikulum Sarjana
Disusun oleh:
Dania Lazuardi Husen (175150600111033)

Syaifudin Eka Pradana (175150600111038)
Muhammad Fajar Rifaldi (175150600111039)
PROGRAM STUDI PENDIDIKAN TEKNOLOGI INFORMASI

JURUSAN SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER
UNIVERSITAS BRAWIJAYA
MALANG
2020
LEMBAR PERSETUJUAN
LAPORAN PRAKTIK KERJA LAPANGAN (PKL)
PERUSAHAAN / INDUSTRI
PT CMLABS INDONESIA DIGITAL
PENGEMBANGAN SISTEM INFORMASI MANAJEMEN INTERNSHIP PROGRAM

BERBASIS WEBSITE DI PT CMLABS INDONESIA DIGITAL DENGAN METODE
EXTREME PROGRAMMING
Diajukan untuk memenuhi sebagian persyaratan Kurikulum Sarjana

Program Studi Pendidikan Teknologi Informasi
Disusun Oleh :
Dania Lazuardi Husen

NIM: 175150600111033
Syaifudin Eka Pradana
NIM: 175150600111038
Muhammad Fajar Rifaldi
NIM: 175150600111039
Praktik Kerja Lapangan ini telah dilaksanakan pada

29 Juni sampai 28 Agustus 2020
Telah diperiksa dan disetujui oleh:
Menyetujui,
Dosen Pembimbing PKL
Tri Afirianto, S.T., M.T.

NIK: 201309 851213 1 001
PERNYATAAN ORISINALITAS
Saya menyatakan dengan sebenar-benarnya bahwa sepanjang pengetahuan

saya, di dalam naskah PKL ini tidak terdapat karya ilmiah yang pernah diajukan
oleh orang lain untuk memperoleh gelar akademik di suatu perguruan tinggi,
dan tidak terdapat karya atau pendapat yang pernah ditulis atau diterbitkan oleh
orang lain, kecuali yang secara tertulis disitasi dalam naskah ini dan disebutkan
dalam daftar referensi.
Apabila ternyata di dalam naskah PKL ini dapat dibuktikan terdapat unsur-
unsur plagiasi, saya bersedia PKL ini digugurkan, serta diproses sesuai dengan
peraturan perundang-undangan yang berlaku (UU No. 20 Tahun 2003, Pasal 25
ayat 2 dan Pasal 70).
Malang, 25 September 2020

Penulis 1
Dania Lazuardi Husen

NIM: 175150600111033
Penulis 2
Syaifudin Eka Pradana

NIM: 175150600111038
Penulis 3

NIM: 175150600111039
KATA PENGANTAR
Puji syukur kehadirat Allah SWT yang telah melimpahkan rahmat, taufik, dan
hidayah-Nya sehingga laporan PKL yang berjudul PENGEMBANGAN SISTEM
INFORMASI MANAJEMEN INTERNSHIP PROGRAM BERBASIS WEBSITE DI PT
CMLABS INDONESIA DIGITAL DENGAN METODE EXTREME PROGRAMMING bisa
selesai dengan baik dan lancar.
Penulis menyadari bahwa laporan PKL ini tidak akan berhasil tanpa bantuan
dari beberapa pihak yang membantu dari awal hingga akhir. Untuk itu penulis
ingin menyampaikan terima kasih kepada:
1. Allah SWT atas berkah, hidayah, dan bimbingan-Nya dalam pelaksanaan
praktik kerja lapangan.
2. Bapak Tri Afirianto, S.T., M.T. selaku dosen pembimbing PKL yang telah
menyediakan waktu serta sabar membimbing dan mengarahkan penulis
sehingga dapat menyelesaikan laporan ini.
3. Bapak Admaja Dwi Herlambang, S.Pd., M.Pd. selaku Ketua Program Studi
Pendidikan Teknologi Informasi.
4. Bapak Issa Arwani, S.Kom., M.Sc. selaku Ketua Jurusan Sistem Informasi.
5. Bapak Dwiyana Dini Kurniawan selaku Manajer Operasional PT CMLABS
Indonesia Digital.
6. Saudara/i Ruli Wahyuni, Nifan Fatahillah, Elmanu, dan Nuril Huda selaku
Pembimbing Lapangan.
7. Seluruh teman-teman PKL dari Program Studi Pendidikan Teknologi
Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya dan pegawai
internal PT CMLABS Indonesia Digital yang telah memberikan bantuan
dan dukungan selama menjalani PKL.
8. Seluruh civitas akademika Pendidikan Teknologi Informasi Universitas
Brawijaya yang telah memberi bantuan dan dukungan selama
penyelesaian laporan PKL ini.
Malang, 25 September 2020
Penulis
lazuardidania@student.ub.ac.id
ABSTRAK
PT CMLABS INDONESIA DIGITAL adalah sebuah perusahaan start-up yang

fokus pada jasa SEO, marketing, dan platform pendukung aktifitas SEO. Keunikan
bidang kerja yang ada di CMLABS membuat banyak pencari kerja melamar
pekerjaan di CMLABS. Dibalik banyaknya pelamar kerja, CMLABS juga membuka
lowongan magang untuk mahasiswa dan siswa/i SMK dengan kuota yang cukup
banyak. Dalam satu periode, CMLABS dapat menerima mahasiswa dan siswa/i
magang sebanyak kurang lebih 30 orang. Namun, perusahaan tidak mengimbangi
sistem pengelolaan karyawan magang dengan keberadaan pemagang yang cukup
banyak. CMLABS masih menggunakan bantuan Microsoft Excel dan Spreadsheet
untuk mendata kegiatan dan tugas yang dilakukan oleh mahasiswa magang. Hal
tersebut membuat penanggung jawab perusahaan merasa kebingungan dalam
mendata kegiatan pemagang untuk bahan evaluasi perusahaan.
Berdasarkan permasalahan di atas, dalam kegiatan PKL ini, dibangunlah
sebuah sistem informasi manajemen pemagang berbasis website yang memiliki
fitur utama: pengelolaan data pemagang, nilai pemagang, data instansi, dan
sertifikat pemagang. Tujuan dibangunnya sistem informasi tersebut adalah agar
proses pendataan yang berkaitan dengan kegiatan magang menjadi lebih efektif
dan mudah. Untuk mencapai tujuan tersebut, penelitian ini mengembangkan
sistem informasi menggunakan metode Extreme Programming dengan bahasa
pemrograman HTML, PHP, dan JavaScript. Proses pengujian pada sistem
informasi menggunakan pendekatan whitebox jenis Basis Path dengan
perhitungan Cyclomatic Complexity dan pendekatan blackbox jenis State
Transition Testing. Hasil pengujian dengan kedua pendekatan tersebut
menunjukkan tingkat kebenaran proses pengembangan sebesar 100% dan
tingkat validitas sistem yang mana telah sesuai dengan kebutuhan utama
stakeholder.
Kata kunci: Sistem informasi, website, Extreme Programming, Cyclomatic
Complexity, dan State Transition Testing.
ABSTRACT
PT CMLABS INDONESIA DIGITAL is a start-up company that focuses on SEO

services, marketing, and platforms to support SEO activities. The uniqueness of
the existing work field at CMLABS makes many job seekers apply for jobs at
CMLABS. Behind the large number of job applicants, CMLABS also opens
internship vacancies for college students and vocational high school students
with quite a lot of quota. In one period, CMLABS can accept college students and
vocational high school students of approximately 30 people. However, the
company did not keep up with the apprentice management system with the
presence of quite a number of apprentices. CMLABS still uses Microsoft Excel and
Spreadsheets to record activities and assignments carried out by interns. This
makes the person in charge of the company feel confused in recording intern
activities for company evaluation materials.
Based on the problems above, in this practice field, a website-based intern
management information system was built which has main features: intern data
management, intern value, agency data, and intern certificates. The purpose of
building this information system is to make the data collection process related to
intern activities more effective and easier. To achieve this goal, this study
develops an information system using the Extreme Programming method with
the programming languages HTML, PHP, and JavaScript. The testing process for
the information system uses the Base Path type in whitebox approach with the
calculation of Cyclomatic Complexity and the State Transition Testing in blackbox
approach. The test results with these two approaches show the level of truth of
the development process by 100% and the level of system validity which is in
accordance with the main needs of stakeholders.
Keywords: Information systems, website, Extreme Programming, Cyclomatic
Complexity, and State Transition Testing.
DAFTAR ISI
LAPORAN PRAKTIK KERJA LAPANGAN (PKL).............................................................i

LEMBAR PERSETUJUAN............................................................................................ii
PERNYATAAN ORISINALITAS...................................................................................iii
KATA PENGANTAR...................................................................................................iv
ABSTRAK...................................................................................................................v
ABSTRACT................................................................................................................vi
DAFTAR ISI..............................................................................................................vii
DAFTAR TABEL.........................................................................................................xi
DAFTAR GAMBAR...................................................................................................xv
DAFTAR LAMPIRAN................................................................................................xix
BAB 1 PENDAHULUAN..............................................................................................1
1.1 Latar Belakang........................................................................................1
1.2 Rumusan Masalah..................................................................................2
1.3 Tujuan.....................................................................................................2
1.4 Manfaat..................................................................................................3
1.5 Batasan Masalah.....................................................................................3
1.6 Sistematika Pembahasan........................................................................3
BAB 2 PROFIL OBYEK PKL.........................................................................................5
2.1 Sejarah dan Perkembangan PT CMLABS INDONESIA DIGITAL...............5
2.2 Logo PT CMLABS INDONESIA DIGITAL....................................................5
2.3 Alamat dan Kontak PT CMLABS INDONESIA DIGITAL.............................5
2.4 Visi PT CMLABS INDONESIA DIGITAL......................................................6
2.5 Ruang Lingkup Kerja PT CMLABS INDONESIA DIGITAL...........................6
2.6 Struktur Organisasi PT CMLABS INDONESIA DIGITAL.............................6
2.7 Rantai Bisnis PT CMLABS INDONESIA DIGITAL.......................................7
BAB 3 TINJAUAN PUSTAKA......................................................................................8
3.1 Kajian Pustaka.........................................................................................8
3.2 Pengertian Sistem...................................................................................8
3.3 Pengertian Informasi..............................................................................9
3.4 Pengertian Sistem Informasi...................................................................9
3.5 Website.................................................................................................10
3.5.1 Pengertian Website......................................................................10
3.5.2 Jenis Website................................................................................10
3.6 HTML.....................................................................................................10
3.6.1 Pengertian HTML.........................................................................10
3.6.2 Kegunaan HTML...........................................................................10
3.7 PHP........................................................................................................11
3.7.1 Pengertian PHP............................................................................11
3.7.2 Fungsi PHP....................................................................................11
3.8 JavaScript..............................................................................................11
3.9 MySQL...................................................................................................12
3.10 Extreme Programming........................................................................12
3.10.1 Pengertian Extreme Programming............................................12
3.10.2 Kerangka Kerja Extreme Programming......................................12
3.11 Unified Modeling Language (UML)....................................................14
3.11.1 Use Case Diagram......................................................................15
3.11.2 Use Case Scenario......................................................................16
3.11.3 Activity Diagram........................................................................17
3.11.4 Sequence Diagram.....................................................................19
3.11.5 Class Diagram............................................................................21
3.11.6 Entity Relationship Diagram......................................................22
3.12 Blackbox Testing.................................................................................23
3.13 Whitebox Testing................................................................................25
BAB 4 METODOLOGI PELAKSANAAN PKL..............................................................28
4.1 Diagram Alir Metode Extreme Programming.......................................28
4.2 Spesifikasi Hardware dan Software yang Digunakan...........................28
4.3 Studi Literatur.......................................................................................29
4.4 Perencanaan (Planning)........................................................................29
4.5 Perancangan (Design)...........................................................................29
4.6 Pengkodean (Coding)............................................................................30
4.7 Pengujian (Testing)...............................................................................30
4.8 Penarikan Kesimpulan..........................................................................31
BAB 5 HASIL DAN PEMBAHASAN...........................................................................32
5.1 Perencanaan (Planning)........................................................................32
5.2 Perancangan (Design)...........................................................................35
5.2.1 Penentuan Pengguna Sistem (Aktor)...........................................35
5.2.2 Pemodelan Use Case Diagram.....................................................36
5.2.3 Pemodelan Use Case Scenario.....................................................36
5.2.4 Pemodelan Activity Diagram.......................................................52
5.2.5 Pemodelan Sequence Diagram....................................................59
5.2.6 Pemodelan Class Diagram...........................................................66
5.2.7 Pemodelan Entity Relationship Diagram.....................................66
5.2.8 Rancangan Antar Muka Sistem Informasi (Wireframe)...............67
5.3 Pengkodean (Coding)............................................................................76
5.3.1 Pengkodean Algoritme Pendaftaran Calon Pemagang................77
5.3.2 Pengkodean Algoritme Login Admin...........................................79
5.3.3 Pengkodean Algoritme Dashboard..............................................81
5.3.4 Pengkodean Algoritme Tampilan Utama Data Pemagang..........83
5.3.5 Pengkodean Algoritme Tambah Data Pemagang........................84
5.3.6 Pengkodean Algoritme Ubah Data Pemagang.............................87
5.3.7 Pengkodean Algoritme Hapus Data Pemagang...........................90
5.3.8 Pengkodean Algoritme Tampil Data Pemagang..........................92
5.3.9 Pengkodean Algoritme Tampilan Utama Nilai Pemagang...........93
5.3.10 Pengkodean Algoritme Tambah Nilai Pemagang......................95
5.3.11 Pengkodean Algoritme Ubah Nilai Pemagang...........................96
5.3.12 Pengkodean Algoritme Hapus Nilai Pemagang.........................98
5.3.13 Pengkodean Algoritme Cetak Nilai Pemagang........................100
5.3.14 Pengkodean Algoritme Tampilan Utama Master Data............101
5.3.15 Pengkodean Algoritme Tambah Data Master.........................102
5.3.16 Pengkodean Algoritme Ubah Data Master..............................104
5.3.17 Pengkodean Algoritme Hapus Data Master............................105
5.3.18 Pengkodean Algoritme Cetak Sertifikat...................................107
5.3.19 Pengkodean Algoritme Logout................................................108
5.4 Pengujian (Testing).............................................................................109
5.4.1 Pengujian Whitebox...................................................................109
5.4.2 Pengujian Blackbox....................................................................130
BAB 6 PENUTUP...................................................................................................143
6.1 Kesimpulan.........................................................................................143
6.2 Saran...................................................................................................145
DAFTAR PUSTAKA................................................................................................146
LAMPIRAN............................................................................................................148
DAFTAR TABEL
Tabel 3.1 Simbol dan Deskripsi Pada Use Case Digram.........................................15

Tabel 3.2 Contoh Use Case Scenario Transaksi Penjualan.....................................17
Tabel 3.3 Simbol dan Deskripsi Pada Activity Diagram.........................................18
Tabel 3.4 Simbol dan Deskripsi Pada Sequence Diagram......................................20
Tabel 3.5 Simbol dan Deskripsi Pada Class Diagram.............................................21
Tabel 3.6 Simbol dan Deskripsi Pada Entity Relationship Diagram.......................22
YTabel 5.1 User Stories untuk Formulir Pendaftaran.............................................32
Tabel 5.2 User Stories untuk Fungsi Login dan Logout Admin...............................33
Tabel 5.3 User Stories untuk Data Pemagang........................................................33
Tabel 5.4 User Stories untuk Nilai Pemagang........................................................34
Tabel 5.5 User Stories untuk Master Data.............................................................34
Tabel 5.6 User Stories untuk Cetak Sertifikat.........................................................35
Tabel 5.7 Daftar Pengguna Sistem.........................................................................35
Tabel 5.8 Use Case Scenario Pendaftaran Calon Pemagang..................................37
Tabel 5.9 Use Case Scenario Login.........................................................................38
Tabel 5.10 Use Case Scenario Tampil Data Pemagang..........................................38
Tabel 5.11 Use Case Scenario Tambah Data Pemagang........................................39
Tabel 5.12 Use Case Scenario Ubah Data Pemagang.............................................40
Tabel 5.13 Use Case Scenario Hapus Data Pemagang...........................................42
Tabel 5.14 Use Case Scenario Tambah Nilai Pemagang........................................43
Tabel 5.15 Use Case Scenario Ubah Nilai Pemagang.............................................44
Tabel 5.16 Use Case Scenario Hapus Nilai Pemagang...........................................45
Tabel 5.17 Use Case Scenario Cetak Nilai Pemagang............................................46
Tabel 5.18 Use Case Scenario Tambah Data Master.............................................47
Tabel 5.19 Use Case Scenario Ubah Data Master..................................................48
Tabel 5.20 Use Case Scenario Hapus Data Master................................................50
Tabel 5.21 Use Case Scenario Cetak Sertifikat.......................................................51
Tabel 5.22 Use Case Scenario Logout....................................................................51
Tabel 5.23 Kode Program Tampilan Formulir Pendaftaran...................................13
Tabel 5.24 Kode Program Proses Pendaftaran......................................................15
Tabel 5.25 Kode Program Tampilan Halaman Login..............................................15
Tabel 5.26 Kode Program Proses Login.................................................................16
Tabel 5.27 Kode Program Tampilan Halaman Dashboard.....................................17
Tabel 5.28 Kode Program Tampilan Utama Data Pemagang................................19
Tabel 5.29 Kode Program Tampilan Tambah Data Pemagang..............................20
Tabel 5.30 Kode Program Proses Tambah Data Pemagang...................................22
Tabel 5.31 Kode Program Tampilan Ubah Data Pemagang...................................23
Tabel 5.32 Kode Program Proses Ubah Data Pemagang.......................................26
Tabel 5.33 Kode Program Tampilan Hapus Data Pemagang.................................26
Tabel 5.34 Kode Program Proses Hapus Data Pemagang......................................28
Tabel 5.35 Kode Program Tampil Data Pemagang................................................28
Tabel 5.36 Kode Program Tampilan Utama Nilai Pemagang.................................29
Tabel 5.37 Kode Program Tampilan Tambah Nilai Pemagang...............................31
Tabel 5.38 Kode Program Proses Tambah Nilai Pemagang...................................32
Tabel 5.39 Kode Program Tampilan Ubah Nilai Pemagang...................................33
Tabel 5.40 Kode Program Proses Ubah Nilai Pemagang.......................................34
Tabel 5.41 Kode Program Tampilan Hapus Nilai Pemagang..................................35
Tabel 5.42 Kode Program Proses Hapus Nilai Pemagang......................................36
Tabel 5.43 Kode Program Cetak Nilai Pemagang...................................................36
Tabel 5.44 Kode Program Tampilan Utama Master Data......................................37
Tabel 5.45 Kode Program Tampilan Tambah Data Master....................................38
Tabel 5.46 Kode Program Proses Tambah Data Master........................................39
Tabel 5.47 Kode Program Tampilan Ubah Data Master........................................40
Tabel 5.48 Kode Program Proses Ubah Data Master............................................41
Tabel 5.49 Kode Program Tampilan Hapus Data Master.......................................42
Tabel 5.50 Kode Program Proses Hapus Data Master...........................................43
Tabel 5.51 Kode Program Tampilan Cetak Sertifikat.............................................43
Tabel 5.52 Kode Program Proses Logout...............................................................44
Tabel 5.53 Pseudocode Pendaftaran Pemagang....................................................45
Tabel 5.54 Pseudocode Login.................................................................................47
Tabel 5.55 Pseudocode Dashboard........................................................................48
Tabel 5.56 Pseudocode Tambah Data Pemagang..................................................50
Tabel 5.57 Pseudocode Ubah Data Pemagang......................................................51
Tabel 5.58 Pseudocode Hapus Data Pemagang.....................................................52
Tabel 5.59 Pseudocode Tampil Data Pemagang....................................................54
Tabel 5.60 Pseudocode Tambah Nilai Pemagang..................................................55
Tabel 5.61 Pseudocode Ubah Nilai Pemagang.......................................................56
Tabel 5.62 Pseudocode Hapus Nilai Pemagang.....................................................57
Tabel 5.63 Pseudocode Cetak Nilai Pemagang......................................................59
Tabel 5.64 Pseudocode Tambah Data Master.......................................................60
Tabel 5.65 Pseudocode Ubah Data Master............................................................61
Tabel 5.66 Pseudocode Hapus Data Master..........................................................62
Tabel 5.67 Pseudocode Cetak Sertifikat.................................................................64
Tabel 5.68 Pseudocode Logout..............................................................................65
Tabel 5.69 Tabel Pengujian Pendaftaran Pemagang...............................................0
Tabel 5.70 Tabel Pengujian Login Admin.................................................................0
Tabel 5.71 Tabel Pengujian Menu Data Pemagang.................................................1
Tabel 5.72 Tabel Pengujian Menu Nilai Pemagang.................................................2
Tabel 5.73 Tabel Pengujian Menu Master Data......................................................3
Tabel 5.74 Tabel Pengujian Menu Cetak Sertifikat..................................................5
Tabel 5.75 Tabel Pengujian Logout..........................................................................5
Tabel 5.76 Hasil Pengujian Formulir Pendaftaran...................................................5
Tabel 5.77 Hasil Pengujian Login Admin..................................................................6
Tabel 5.78 Hasil Pengujian Menu Data Pemagang..................................................6
Tabel 5.79 Hasil Pengujian Menu Nilai Pemagang...................................................7
Tabel 5.80 Hasil Pengujian Menu Master Data.......................................................9
Tabel 5.81 Hasil Pengujian Menu Cetak Sertifikat.................................................10
Tabel 5.82 Hasil Pengujian Logout.........................................................................10
Y
DAFTAR GAMBAR
YGambar 2.1 Logo PT CMLABS INDONESIA DIGITAL...............................................5

Gambar 2.2 Bagan Struktur Organisasi PT CMLABS INDONESIA DIGITAL...............6
Gambar 2.3 Rantai Bisnis PT CMLABS INDONESIA DIGITAL.....................................7
YGambar 3.1 Kerangka Kerja Extreme Programming............................................13
Gambar 3.2 Diagram UML.....................................................................................14
Gambar 3.3 Contoh Use Case Diagram Perpustakaan..........................................16
Gambar 3.4 Contoh Activity Diagram Perpustakaan.............................................19
Gambar 3.5 Contoh Sequence Diagram Tambah Barang Belanjaan.....................21
Gambar 3.6 Contoh Class Diagram Perpustakaan.................................................22
Gambar 3.7 Contoh Entity Relationship Diagram Perpustakaan..........................23
Gambar 3.8 Notasi pada Cause-Effect Graph........................................................25
Gambar 3.9 Notasi Flow Graph..............................................................................26
Gambar 3.10 Region dalam Flow Graph................................................................26
Gambar 3.11 Independent Path.............................................................................27
YGambar 4.1 Diagram Alir Metode Extreme Programming..................................28
YGambar 5.1 Use Case Diagram Sistem Informasi................................................36
Gambar 5.2 Activity Diagram Pendaftaran Pemagang..........................................52
Gambar 5.3 Activity Diagram Login Admin............................................................52
Gambar 5.4 Activity Diagram Tampil Data Pemagang..........................................53
Gambar 5.5 Activity Diagram Tambah Data Pemagang........................................53
Gambar 5.6 Activity Diagram Ubah Data Pemagang.............................................54
Gambar 5.7 Activity Diagram Hapus Data Pemagang...........................................54
Gambar 5.8 Activity Diagram Tambah Nilai Pemagang.........................................55
Gambar 5.9 Activity Diagram Ubah Nilai Pemagang.............................................55
Gambar 5.10 Activity Diagram Hapus Nilai Pemagang..........................................56
Gambar 5.11 Activity Diagram Cetak Nilai Pemagang..........................................56
Gambar 5.12 Activity Diagram Tambah Data Master...........................................57
Gambar 5.13 Activity Diagram Ubah Data Master................................................57
Gambar 5.14 Activity Diagram Hapus Data Master..............................................58
Gambar 5.15 Activity Diagram Cetak Sertifikat.....................................................58
Gambar 5.16 Activity Diagram Logout..................................................................59
Gambar 5.17 Sequence Diagram Pendaftaran Pemagang.....................................59
Gambar 5.18 Sequence Diagram Login..................................................................60
Gambar 5.19 Sequence Diagram Tampil Data Pemagang.....................................60
Gambar 5.20 Sequence Diagram Tambah Data Pemagang...................................60
Gambar 5.21 Sequence Diagram Ubah Data Pemagang.......................................61
Gambar 5.22 Sequence Diagram Hapus Data Pemagang......................................61
Gambar 5.23 Sequence Diagram Tambah Nilai Pemagang...................................62
Gambar 5.24 Sequence Diagram Ubah Nilai Pemagang........................................63
Gambar 5.25 Sequence Diagram Hapus Nilai Pemagang......................................64
Gambar 5.26 Sequence Diagram Cetak Nilai Pemagang.......................................64
Gambar 5.27 Sequence Diagram Tambah Data Master........................................64
Gambar 5.28 Sequence Diagram Ubah Data Master.............................................65
Gambar 5.29 Sequence Diagram Hapus Data Master...........................................65
Gambar 5.30 Sequence Diagram Cetak Sertifikat..................................................65
Gambar 5.31 Sequence Diagram Logout...............................................................66
Gambar 5.32 Class Diagram Sistem Informasi......................................................66
Gambar 5.33 Entity Relationship Diagram Sistem Informasi................................67
Gambar 5.34 Wireframe Antar Muka Formulir Pendaftaran Pemagang..............67
Gambar 5.35 Wireframe Antar Muka Login Admin...............................................68
Gambar 5.36 Wireframe Antar Muka Dashboard.................................................68
Gambar 5.37 Wireframe Antar Muka Menu Pada Dashboard..............................69
Gambar 5.38 Wireframe Antar Muka Data Pemagang..........................................69
Gambar 5.39 Wireframe Antar Muka Tambah Data Pemagang............................70
Gambar 5.40 Wireframe Antar Muka Ubah Data Pemagang................................71
Gambar 5.41 Wireframe Antar Muka Hapus Data Pemagang...............................71
Gambar 5.42 Wireframe Antar Muka Tampil Data Pemagang..............................71
Gambar 5.43 Wireframe Antar Muka Nilai Pemagang..........................................72
Gambar 5.44 Wireframe Antar Muka Tambah Nilai Pemagang............................72
Gambar 5.45 Wireframe Antar Muka Ubah Nilai Pemagang................................73
Gambar 5.46 Wireframe Antar Muka Hapus Nilai Pemagang...............................73
Gambar 5.47 Wireframe Antar Muka Cetak Nilai Pemagang................................74
Gambar 5.48 Wireframe Antar Muka Master Data...............................................74
Gambar 5.49 Wireframe Antar Muka Tambah Data Master.................................75
Gambar 5.50 Wireframe Antar Muka Ubah Data Master.....................................75
Gambar 5.51 Wireframe Antar Muka Hapus Data Master....................................75
Gambar 5.52 Wireframe Antar Muka Cetak Sertifikat..........................................76
Gambar 5.53 Wireframe Antar Muka Konfirmasi Cetak Sertifikat........................76
Gambar 5.54 Tampilan Fitur Pendaftaran Pemagang...........................................78
Gambar 5.55 Tampilan Fungsi Login Admin..........................................................80
Gambar 5.56 Tampilan Dashboard........................................................................82
Gambar 5.57 Tampilan Antarmuka Menu Data Pemagang...................................84
Gambar 5.58 Tampilan Antarmuka Tambah Data Pemagang...............................86
Gambar 5.59 Tampilan Antarmuka Ubah Data Pemagang....................................89
Gambar 5.60 Tampilan Antarmuka Hapus Data Pemagang..................................91
Gambar 5.61 Tampilan Antarmuka Tampil Data Pemagang.................................93
Gambar 5.62 Tampilan Antarmuka Menu Nilai Pemagang...................................94
Gambar 5.63 Tampilan Antarmuka Tambah Nilai Pemagang...............................96
Gambar 5.64 Tampilan Antarmuka Ubah Nilai Pemagang....................................98
Gambar 5.65 Tampilan Antarmuka Hapus Nilai Pemagang..................................99
Gambar 5.66 Tampilan Antarmuka Cetak Nilai Pemagang.................................101
Gambar 5.67 Tampilan Antarmuka Menu Master Data......................................102
Gambar 5.68 Tampilan Antarmuka Tambah Data Master..................................103
Gambar 5.69 Tampilan Antarmuka Ubah Data Master.......................................105
Gambar 5.70 Tampilan Antarmuka Hapus Data Master.....................................107
Gambar 5.71 Tampilan Antarmuka Cetak Sertifikat............................................108
Gambar 5.72 Tampilan Antarmuka Logout.........................................................109
Gambar 5.73 Flowgraph Pendaftaran Pemagang................................................110
Gambar 5.74 Flowgraph Login.............................................................................112
Gambar 5.75 Flowgraph Dashboard....................................................................113
Gambar 5.76 Flowgraph Tambah Data Pemagang..............................................114
Gambar 5.77 Flowgraph Ubah Data Pemagang..................................................116
Gambar 5.78 Flowgraph Hapus Data Pemagang.................................................117
Gambar 5.79 Flowgraph Tampil Data Pemagang................................................118
Gambar 5.80 Flowgraph Tambah Nilai Pemagang..............................................119
Gambar 5.81 Flowgraph Ubah Nilai Pemagang...................................................121
Gambar 5.82 Flowgraph Hapus Nilai Pemagang.................................................122
Gambar 5.83 Flowgraph Cetak Nilai Pemagang..................................................123
Gambar 5.84 Flowgraph Tambah Data Master...................................................124
Gambar 5.85 Flowgraph Ubah Data Master........................................................126
Gambar 5.86 Flowgraph Hapus Data Master......................................................127
Gambar 5.87 Flowgraph Cetak Sertifikat.............................................................128
Gambar 5.88 Flowgraph Logout..........................................................................129
Gambar 5.89 State Transitions Diagram Sistem Informasi.................................131
YGambar Lampiran C.1 Kegiatan Pengerjaan Projek PKL....................................154
Gambar Lampiran C.2 Kegiatan Pengerjaan Projek Internal Perusahaan...........154
Gambar Lampiran C.3 Kegiatan Pengerjaan Laporan PKL...................................155
Gambar Lampiran C.4 Kegiatan Presentasi Projek PKL........................................155
Gambar Lampiran C.5 Kegiatan Presentasi Projek PKL (2)..................................156
Gambar Lampiran C.6 Foto Bersama Pembimbing Lapangan PKL......................156
Gambar Lampiran C.7 Foto Dengan Pegawai Inti, Pembimbing Lapangan, dan
Teman-Teman Pemagang....................................................................................157
Y
DAFTAR LAMPIRAN
YLAMPIRAN A TRANSKRIP WAWANCARA............................................................148

LAMPIRAN B LEMBAR PENGUJIAN BLACKBOX....................................................150
LAMPIRAN C FOTO KEGIATAN PKL.......................................................................154
LAMPIRAN D LOGBOOK KEGIATAN......................................................................155
BAB 1 PENDAHULUAN
1.1 Latar Belakang

Kegiatan Praktik Kerja Lapangan (PKL) atau magang adalah sebuah kegiatan
yang harus dilaksanakan oleh setiap mahasiswa pada tahun terakhir
perkuliahannya. Kegiatan PKL atau magang berkaitan dengan sinkronisasi
pendidikan akademik yang diperoleh dari kegiatan pembelajaran kampus dan
penguasaan keahlian hardskill dan softskill mahasiswa dalam bentuk interaksi
langsung dengan masyarakat atau pihak terkait di dunia kerja [ CITATION
Tim18 \l 1033 ]. Pembelajaran di kampus yang telah diperoleh mahasiswa bisa
memiliki dampak yang tidak hanya bisa dirasakan oleh mahasiswa, melainkan
masyarakat luas.
Setiap fakultas dari berbagai universitas memiliki bermacam persyaratan
untuk pelaksanaan kegiatan PKL atau magang. Kegiatan PKL dilakukan oleh
mahasiswa atau sekelompok mahasiswa dalam satu jurusan atau program studi.
Dalam sebuah kelompok PKL boleh terdiri dari mahasiswa yang memiliki
perbedaan keminatan. Namun, umumnya kelompok PKL beranggotakan
mahasiswa yang memiliki keminatan sama. Persamaan atau perbedaan
keminatan ini nantinya berpengaruh pada jumlah dan bentuk laporan hasil akhir
PKL.
Tujuan pelaksanaan PKL untuk setiap mahasiswa adalah melatih
kemampuan dalam mengenali permasalahan nyata masyarakat atau perusahaan
dan memberikan solusi sederhana berdasarkan keilmuan yang didapat selama
pembelajaran di kampus. Mahasiswa akan dilatih untuk mengenal standar etos
kerja, profesionalisme, kreatifitas, dan daya saing untuk mempersiapkan diri
menghadapi dunia kerja yang sesungguhnya. Mahasiswa juga dapat menemukan
permasalahan di lapangan yang dapat dijadikan sebagai topik penelitian skripsi.
Harapannya mahasiswa mendapatkan pengalaman bekerja secara nyata dan
menyeluruh yang tidak didapatkan dan diajarkan dalam pembelajaran kampus
serta meningkatkan kompetensi diri dan keahlian yang relevan dengan bidang
studi yang ditempuh[ CITATION Tim18 \l 1033 ].
Mahasiswa peserta kegiatan PKL dituntut untuk paham dengan bidang kerja
yang ada di PT CMLABS INDONESIA DIGITAL. PT CMLABS INDONESIA DIGITAL
adalah sebuah perusahaan yang fokus pada jasa SEO, marketing, dan platform
pendukung aktifitas SEO. CMLABS atau Content Marketing Labs juga fokus pada
content writing atau penulisan konten atau artikel elektronik yang
disebarluaskan melalui website. Selain berfokus pada SEO dan content writing,
CMLABS juga mengedepankan penggunaan teknologi pendukung kegiatan
perusahaan secara utuh dan bermanfaat bagi semua yang terlibat di dalamnya,
termasuk mahasiswa dan siswa/i peserta kegiatan PKL. Banyak calon pemagang
dari kalangan mahasiswa, siswa/i SMK, dan masyarakat umum melamar
pekerjaan di CMLABS. Pihak CMLABS juga membuka posisi pemagang yang cukup
banyak. Total pemagang yang bisa ditampung sebanyak kurang lebih 30 orang
dengan masa magang yang bervariasi dalam satu tahun. Hal ini diimbangi dengan
kebutuhan sumber daya manusia yang dibutuhkan oleh CMLABS setiap
tahunnya.
Namun, perusahaan tidak mengimbangi sistem pengelolaan karyawan
magang dengan keberadaan pemagang yang cukup banyak. Setelah melakukan
proses wawancara yang dapat dilihat pada dan pengamatan langsung yang
dibantu oleh Manajer Operasional, CMLABS masih menggunakan bantuan
software Microsoft Excel dan Spreadsheet untuk mendata kegiatan dan tugas
yang dilakukan oleh mahasiswa. Tak jarang penanggung jawab akan kesulitan
dan kebingungan dalam menyusun data pelaporan kegiatan pemagang untuk
bahan evaluasi perusahaan. Berdasarkan kebutuhan akan proses pendataan
kegiatan serta tugas mahasiswa magang, maka diperlukan suatu alat bantu
berupa sistem informasi manajemen yang akan dikembangkan dalam laporan ini
yang berjudul “Pengembangan Sistem Informasi Manajemen Internship Program
Berbasis Website di PT CMLABS INDONESIA DIGITAL dengan Metode Extreme
Programming”. Pengembangan sistem informasi dilakukan dengan metode
Extreme Programming disebabkan oleh alur proses metode tersebut cocok
dengan keadaan lapangan yang menuntut bekerja dalam waktu relatif singkat
dengan anggota tim pengembang yang sedikit [CITATION Sur17 \l 1033 ].
Harapannya dengan adanya sistem informasi ini segala prosedur pendataan yang
berkaitan dengan kegiatan magang menjadi lebih efektif dan mudah demi proses
manajemen perusahaan yang lebih baik.
1.2 Rumusan Masalah

Berdasarkan uraian latar belakang di atas, adapun rumusan masalah yang
akan dibahas pada laporan ini adalah sebagai berikut.
1. Bagaimana hasil pengembangan sistem informasi manajemen internship
program berbasis website dapat memudahkan Manajer Operasional
CMLABS dalam mengelola data pemagang?
2. Bagaimana tingkat kompleksitas dan kevalidan fungsi dalam sistem informasi
manajemen internship program berbasis website tersebut?
1.3 Tujuan
Penelitian ini bertujuan untuk membangun sistem informasi manajemen
internship program berbasis website yang akan digunakan oleh PT CMLABS
INDONESIA DIGITAL dalam rangka memudahkan Manajer Operasional
CMLABS dalam mengelola data pemagang.
1.4 Manfaat
Membantu dalam kemudahan proses pengelolaan data pemagang dalam
internship program agar tercapainya peningkatan kinerja perusahaan
terhadap tata kelola data pemagang yang lebih baik.
1.5 Batasan Masalah
Dalam penulisan laporan PKL ini terdapat batasan masalah adalah sebagai
berikut.
1. Pembuatan sistem informasi manajemen internship program menggunakan
bahasa pemrograman HTML, JavaScript, dan PHP.
2. Pengelolaan manajemen basis data menggunakan MySQL.
3. Sistem informasi hanya digunakan untuk internal perusahaan.
1.6 Sistematika Pembahasan

BAB 1 Pendahuluan
Bab ini membahas mengenai latar belakang, rumusan masalah, tujuan, manfaat,
batasan masalah, dan sistematika pembahasan penelitian yang akan dilakukan
oleh penulis.
BAB 2 Profil Objek PKL
Bab ini berisi profil dari objek PKL berupa sejarah instansi, logo instansi, alamat
dan kontak instansi, visi dan misi instansi, tujuan instansi, struktur organisasi
instansi, dan rantai bisnis perusahaan.
BAB 3 Tinjauan Pustaka
Bab ini berisi teori-teori yang berhubungan dengan pengerjaan penelitian yang
meliputi kajian pustaka untuk penelitian terdahulu dan landasan teori.
BAB 4 Metodologi Pelaksanaan PKL
Bab ini membahas tentang metodologi pengembangan sistem informasi
manajemen internship program berbasis website dengan metode Extreme
Programming.
BAB 5 Hasil dan Pembahasan
Bab ini menjelaskan hasil dan pembahasan pengembangan sistem informasi
sesuai dengan metodologi yang telah disusun sebelumnya.
BAB 6 Penutup
Bab ini berisi kesimpulan yang dapat ditarik dari hasil penelitian dan saran bagi
peneliti lain untuk dapat mengembangkan penelitian lebih lanjut.
BAB 2 PROFIL OBYEK PKL
2.1 Sejarah dan Perkembangan PT CMLABS INDONESIA DIGITAL

PT CMLABS INDONESIA DIGITAL adalah sebuah perusahaan yang memiliki
fokus kerja sebagai penyedia jasa SEO, marketing, dan platform pendukung
aktifitas SEO yang telah berdiri sejak 29 April 2019. Perusahaan ini akrab dengan
sebutan CMLABS yang mana merupakan kependekan dari Content Marketing
Labs. PT CMLABS INDONESIA DIGITAL didirikan oleh tiga orang dengan latar
belakang dan negara yang berbeda. Ketiga orang tersebut melihat jarak antara
konsumen dan produk yang dicari masih terasa jauh dan rumit, terlebih untuk
pasar online di Indonesia. Sehingga mereka menciptakan jasa untuk membantu
perusahaan lain dalam upaya memperluas jangkauan brand mereka di internet.
2.2 Logo PT CMLABS INDONESIA DIGITAL

PT CMLABS INDONESIA DIGITAL memiliki logo yang menjadi identitas
perusahaan agar dapat membedakan dengan perusahaan lainnya. Logo resmi
milik PT CMLABS INDONESIA DIGITAL ada pada .
Gambar 2. Logo PT CMLABS INDONESIA DIGITAL
2.3 Alamat dan Kontak PT CMLABS INDONESIA DIGITAL

PT CMLABS INDONESIA DIGITAL sudah memiliki dua cabang yang berada di
dua kota besar, yaitu DKI Jakarta dan Kota Malang, Jawa Timur. Adapun masing-
masing alamat kantor CMLABS adalah sebagai berikut.
Jakarta
Jalan Pluit Kencana Raya No.63, Pluit, Penjaringan, Jakarta Utara, 14450. Telepon
(021) 666 044 70.
Malang
Jalan Seruni No.9 Lowokwaru, Kota Malang, Jawa Timur, 65141. Telepon (0341)
475 665.
2.4 Visi PT CMLABS INDONESIA DIGITAL

Visi utama dari PT CMLABS INDONESIA DIGITAL adalah to improve quality of
content yang mana PT CMLABS INDONESIA DIGITAL ingin menjadi perusahaan
terdepan dalam meningkatkan kualitas konten atau artikel digital di website.
PT CMLABS INDONESIA DIGITAL yang merupakan sebuah start-up company
tidak menggunakan misi untuk menjelaskan usaha mewujudkan tujuan atau visi
yang telah dibuat, melainkan menggunakan istilah OKR (Objective and Key
Result). Istilah OKR hampir sama dengan misi, tetapi yang membedakannya
adalah rumusan OKR yang selalu diperbarui setiap 3 bulan per periodenya.
Sehingga tidak ada rumusan OKR paten yang menyerupai misi perusahaan.
2.5 Ruang Lingkup Kerja PT CMLABS INDONESIA DIGITAL

CMLABS fokus pada keahlian bidang kerja spesialis yang berkaitan dengan
SEO, seperti:
1. SEO Specialist
Fokus pada membantu enterprise sebuah konten website dengan memiliki
SEO Roadmap, onpage, dan offpage.
2. Content / Copy Writing
Fokus pada semua aktifitas penulisan konten, termasuk copy untuk website.
3. SEO Campaign
Fokus pada pembuatan rencana komprehensif dan campaign tertentu
dengan prinsip content marketing.
2.6 Struktur Organisasi PT CMLABS INDONESIA DIGITAL

Sebuah perusahaan memiliki susunan organisasi yang terdiri dari petinggi
perusahaan dibantu karyawan yang bertanggung jawab sesuai bidang kerja yang
dilakukan. Susunan atau struktur organisasi PT CMLABS INDONESIA DIGITAL ada
pada .
Gambar 2. Bagan Struktur Organisasi PT CMLABS INDONESIA DIGITAL
2.7 Rantai Bisnis PT CMLABS INDONESIA DIGITAL

Rantai bisnis pada sebuah perusahaan dibutuhkan untuk mengetahui
rangkaian kegiatan perusahaan dalam menangani sebuah proyek. Pada rantai
bisnis juga menjelaskan peran yang bertanggung jawab selama proses
pengerjaan suatu proyek. Rantai bisnis PT CMLABS INDONESIA DIGITAL ada
pada .
Gambar 2. Rantai Bisnis PT CMLABS INDONESIA DIGITAL

BAB 3 TINJAUAN PUSTAKA
3.1 Kajian Pustaka

Penelitian yang dilakukan oleh Silalahi & Saragih (2019) bertujuan untuk
merancang dan membangun sebuah sistem informasi online berupa website
untuk Lembaga Pendidikan dan Pelatihan Madani (LP2M) dengan menggunakan
metode Extreme Programming. Lembaga yang fokus pada bidang pelaksanaan
pendidikan non-formal banyak melaksanakan kegiatan diklat, seminar, bimtek,
dan lokakarya di bidang kedinasan. Banyaknya kegiatan membuat pengelolaan
data semakin kompleks. Namun, pada pengelolaan data-data, contohnya data
pendaftaran dan peserta latihan, masih dilakukan secara konvensional (manual)
menggunakan Microsoft Excel. Penelitian tersebut merancang dan membangun
sistem informasi online berupa website menggunakan metode Extreme
Programming agar perancangan lebih sederhana dengan waktu yang lebih
singkat. Hasil penelitianpun membahas terkait efektifitas dan efisiensi hasil
perancangan sistem informasi manajemen di LP2M.
Penelitian yang dilakukan oleh Putra, et al. (2019) bertujuan untuk
mengembangkan sistem informasi perpustakaan di SMK 1 Muhammadiyah
Malang yang dapat mengatasi masalah keefisienan waktu pada saat melakukan
peminjaman buku, pengembalian buku, pengelolaan denda, dan pembuatan
laporan transaksi dengan menggunakan metode Extreme Programming.
Penelitian tersebut dilakukan karena terdapat permasalah di perpustakaan SMK
yang mana petugas perpustakaan masih mencatat semua aktivitas pelayanan
perpustakaan menggunakan buku folio bergaris. Hal tersebut membuat petugas
perpustakaan menghabiskan banyak waktu dalam aktivitas pelayanan
perpustakaan. Penelitian tersebut menggunakan metode Extreme Programming
dengan pengujian teknik whitebox testing dan blackbox testing dengan hasil valid
yang mana sistem informasi dapat digunakan oleh petugas perpustakaan SMK 1
Muhammadiyah Malang.
Penelitian yang dilakukan oleh Azdy, et al. (2018) bertujuan untuk
membangung sebuah aplikasi berbasis website yang digunakan sebagai layanan
pengaduan di perguruan tinggi. Penelitian tersebut dilakukan karena kurangnya
fasilitas untuk mahasiswa yang ingin melakukan pengaduan terhadap kualitas
pelayanan perguruan tinggi. Metodologi penelitian yang digunakan adalah
Extreme Programming yang dapat membangun serta mengembangkan
perangkat lunak secara cepat dengan anggota tim yang minimal. Hasil pengujian
menggunakan metode blackbox yang mana menghasilkan perangkat lunak yang
berjalan sesuai kebutuhan pengguna dan memenuhi kriteria kelulusan yang
dirumuskan pada user story.
3.2 Pengertian Sistem

Sistem adalah sekelompok unsur yang erat kaitannya dengan unsur lainnya,
yang berfungsi bersama-sama untuk mencapai tujuan tertentu. Suatu sistem
terdiri dari beberapa bagian sistem yang lebih besar. Sistem mempelajari
struktur yang mengoordinasikan kegiatan dan operasi dalam suatu organisasi
dengan cara yang efisien dan yang paling baik [CITATION Sut12 \l 1033 ].
Ada pula yang beranggapan bahwa sistem merupakan satu kesatuan usaha
yang terdiri dari bagian-bagian yang berkaitan satu sama lain yang berusaha
untuk mencapai suatu tujuan dalam lingkungan yang kompleks [CITATION
Dja15 \l 1033 ]. Pendekatan sistem yang menekankan pada suatu unsur akan
lebih mudah digunakan untuk mempelajari sistem dengan tujuan analisis dan
perancangan. Sistem juga memiliki maksud tertentu. Ada yang dimaksudkan
untuk mencapai suatu tujuan (goal) dan ada yang dimaksudkan untuk mencapai
suatu sasaran (objectives). Tujuan biasanya dihubungkan dengan ruang lingkup
luas sementara sasaran memiliki ruang lingkup sempit [CITATION Sut12 \l 1033 ].
3.3 Pengertian Informasi

Informasi adalah hasil pengolahan beberapa data dalam bentuk yang lebih
berguna dan berarti bagi penerimanya serta untuk mengurangi ketidakpastian
dalam proses pengambilan keputusan mengenai suatu keadaan. Informasi
merupakan data yang telah diklasifikasikan atau diolah atau interpretasi untuk
digunakan dalam proses pengambilan keputusan. Informasi yang berkualitas
memiliki ciri-ciri akurat, tepat waktu, relevan dengan kebutuhan, lengkap, benar,
dan bermanfaat [ CITATION Ang17 \l 1033 ].
Sumber dari informasi adalah data. Data belum dapat memberikan manfaat
yang besar bagi penerima sehingga perlu suatu model yang nantinya akan
dikelompokkan dan diproses untuk menghasilkan informasi. Pengolahan data
berkaitan dengan waktu untuk mendidik kerja seseorang dalam mengubah data
menjadi informasi yang berguna [ CITATION Sur12 \l 1033 ].
3.4 Pengertian Sistem Informasi

Sistem informasi adalah sebuah sistem dalam organisasi yang
mempertemukan kebutuhan pengolahan transaksi harian yang mendukung
fungsi operasi sistem atau organisasi yang bersifat manajerial dengan kegiatan
strategi dalam organisasi untuk menyediakan laporan yang diperlukan untuk
pihak luar tertentu. Sistem informasi perlu mendapat perhatian dari semua
bidang manajerial pada setiap organisasi. Pengelolaan sistem informasi yang baik
akan mendukung pelaksanaan manajemen yang efektif [CITATION Sut121 \l 1033
].
Sistem informasi menerima masukan data, instruksi, dan mengolah data
sesuai perintah untuk menampilkan hasil. Perlakuan tersebut merupakan
sebagian peristiwa yang terjadi pada suatu sistem informasi [CITATION Sus16 \l
1033 ]. Sehingga diharapkan produk dari sistem informasi adalah sekumpulan
informasi yang berkualitas dan hasil dokumentasi yang bermanfaat untuk semua
kalangan manajemen dan pemakai sistem [ CITATION Hut14 \l 1033 ].
3.5 Website
3.5.1 Pengertian Website
Website atau lebih akrab disebut web merupakan kumpulan halaman yang
terdiri dari beberapa laman informasi dalam bentuk digital. Informasi yang
ditampilkan dapat berupa teks, gambar, video, audio, dan animasi lainnya yang
tersedia dan dapat diakses menggunakan koneksi internet. Website terdiri dari
halaman-halaman informasi digital yang ditampilkan oleh browser, seperti
Mozilla Firefox, Google Chrome, Opera, dan sebagainya [CITATION Abd16 \l 1033
].
3.5.2 Jenis Website

Menurut Abdulloh (2018) website dibagi ke dalam tiga jenis, yaitu:
1. Website Statis
Website statis adalah website yang isi lamannya tidak diperbaharui secara
berkala sehingga isi konten tidak mengalami perubahan dalam kurun waktu
tertentu. Contohnya adalah laman website tentang profil perusahaan.
2. Website Dinamis
Website dinamis adalah website yang isi lamannya terus diperbaharui secara
berkala oleh pengelola atau pemilik website. Contohnya adalah laman
website blog dan berita.
3. Website Interaktif
Website interaktif masih termasuk dalam kategori website dinamis, karena
isi laman website selalu diperbaharui dalam kurun waktu tertentu. Bedanya
adalah isi informasi tidak diubah oleh pemilik website, namun diubah oleh
pengguna website. Contohnya adalah laman website marketplace seperti
Bukalapak, Tokopedia, Shopee, dan sebagainya.
3.6 HTML
3.6.1 Pengertian HTML
HTML atau Hyper Text Markup Language adalah sebuah bahasa markup
yang digunakan untuk membuat sebuah halaman website, menampilkan
berbagai informasi di dalam sebuah pencarian website di internet. HTML
dijadikan standar yang digunakan secara luas untuk menampilkan halaman
website [CITATION Har16 \l 1033 ]. HTML berperan sebagai pembentuk struktur
halaman website yang menempatkan setiap elemen website sesuai layout yang
diinginkan [CITATION Abd18 \l 1033 ].
3.6.2 Kegunaan HTML

Menurut Abdulloh (2016) adapun beberapa tugas dan kegunaan utama
HTML dalam membangun website sebagai berikut:
1. Menentukan layout website,
2. Memformat teks dasar, seperti pengaturan paragraf dan format font,
3. Membuat list,
4. Membuat tabel,
5. Menyisipkan gambar, video, dan audio,
6. Membuat link, dan
7. Membuat formulir.
3.7 PHP
3.7.1 Pengertian PHP
PHP atau PHP Hypertext Preprocessor adalah bahasa pemrograman yang
dapat disisipkan dalam skrip HTML dan bekerja di sisi server. Tujuan penggunaan
PHP adalah membantu pengembang website (web developer) untuk membuat
website dinamis dengan cepat dan tepat. Umumnya penggunaan bahasa
pemrograman PHP dibantu oleh perangkat lunak web server (Apache, IIS,
Personal Web Server atau PWS), PHP Server, dan database server seperti MySQL,
Interbase, dan MS SQL [CITATION Abd18 \l 1033 ].
3.7.2 Fungsi PHP

Menurut Abdulloh (2018) fungsi PHP dalam pemrograman web adalah:
1. Menghasilkan website dinamis,
2. Membuat, membuka, menulis, membaca, menghapus, dan menutup file
pada server,
3. Memproses data yang dikirim dari form,
4. Mengirim dan mengakses cookie,
5. Modifikasi data pada database,
6. Mengontrol akses user, dan
7. Mengenkripsi data.
3.8 JavaScript
JavaScript adalah jenis bahasa pemrograman yang paling populer dalam
dunia pemrograman website. JavaScript bisa dimasukkan atau disisipkan ke
halaman HTML. Sesuai namanya, JavaScript adalah jenis bahasa scripting
sehingga pengetikan kodenya bisa langsung dari sintaks kodenya, tidak perlu
dikompilasi terlebih dahulu untuk dijadikan file executable [CITATION Win14 \l
1033 ].
JavaScript cocok diletakkan di dokumen website yang ditransfer via jaringan
internet. Kode ini sangat powerful karena tidak perlu browser khusus atau
gadget khusus untuk menjalankannya. Itulah yang menyebabkan kode JavaScript
bisa dieksekusi oleh semua browser modern [CITATION Win14 \l 1033 ].
3.9 MySQL
Database atau basis data merupakan sekumpulan catatan atau data
terstruktur yang disimpan dalam sistem komputer dan diatur sedemikian rupa
sehingga dapat dicari dengan mudah dan informasi dapat diambil dengan cepat.
Basis data yang sering digunakan adalah MySQL dengan bahasa menggunakan
SQL. SQL atau Structured Query Language juga digunakan oleh database lainnya
seperti Oracle dan Microsoft SQL Server [ CITATION Nix18 \l 1033 ].
MySQL adalah salah satu sistem manajemen database open-source yang
populer di kalangan developer, terlebih web developer. MySQL dapat mengirim
dan menerima data dengan sangat cepat dan multiuser. MySQL mampu
menyediakan berbagai fasilitas atau fitur yang dapat digunakan oleh bermacam
pengguna. MySQL merekam semua data pengguna di dalam sistemnya dalam
bentuk tabel [ CITATION Wah10 \l 1033 ]. Database MySQL berisi satu atau lebih
tabel dimana masing-masing berisi catatan atau baris. Baris tersebut memuat
berbagai kolom yang berisi data [ CITATION Nix18 \l 1033 ].
3.10 Extreme Programming

3.10.1 Pengertian Extreme Programming
Extreme Programming atau lebih akrab dengan sebutan XP merupakan salah
satu metodologi rekayasa perangkat lunak yang banyak digunakan untuk
mengembangkan aplikasi atau website oleh para developer. Metode XP cocok
digunakan untuk pengembangan proyek perangkat lunak yang memerlukan
adaptasi cepat dalam perubahan yang terjadi selama pengembangan aplikasi.
Metode XP juga cocok untuk anggota tim yang tidak terlalu banyak dan berada
pada lokasi yang sama dalam pengembangan sistem [CITATION Sur17 \l 1033 ].
3.10.2 Kerangka Kerja Extreme Programming

Extreme Programming memiliki kerangka kerja yang membantu pekerjaan
dalam mengembangkan perangkat lunak dengan cepat dan fleksibel. Tahapan
pengembangan perangkat lunak dengan XP adalah Perencanaan (Planning),
Perancangan (Design), Pengkodean (Coding), dan Pengujian (Testing) [CITATION
Sur17 \l 1033 ]. Kerangka kerja Extreme Programming dapat dilihat pada .
Gambar 3. Kerangka Kerja Extreme Programming
Sumber: Suryantara (2017)
1. Perencanaan (Planning)
Tahapan pertama pada kerangka kerja XP ini membahas pemahaman
konteks bisnis dari aplikasi yang akan dibuat. Pada tahap perencanaan akan
mendefinisikan keluaran (output), fitur yang ada pada aplikasi, fungsi dari
aplikasi yang dibuat, penentuan waktu dan biaya pengembangan aplikasi,
serta alur pengembangan aplikasi. Tahap perencanaan dimulai dengan
mengumpulkan gambaran atau cerita dasar untuk pembuatan aplikasi yang
diberikan oleh klien.
2. Perancangan (Design)
Tahapan kedua pada kerangka kerja XP ini menekankan pada desain aplikasi
secara sederhana. Umumnya tahap ini menggunakan alat bantu berupa
kartu CRC atau Class Responsibility Collaborator. CRC digunakan sebagai alat
pemetaan atau membangun kelas-kelas yang akan digunakan pada diagram
use case, kelas diagram, dan diagram objek. Namun, juga dapat langsung
merumuskan UML dan perancangan antar muka untuk membangun sistem
informasi.
3. Pengkodean (Coding)
Tahapan ketiga pada kerangka kerja XP ini adalah kegiatan inti dalam
pengembangan aplikasi dengan menggunakan pair programming yang mana
dalam membuat program melibatkan 2 atau lebih programmer.
4. Pengujian (Testing)
Tahapan terakhir pada kerangka kerja XP ini memfokuskan pada pengujian
fitur-fitur yang telah dibuat untuk mengetahui sekaligus menghindari
kesalahan (error) serta memastikan aplikasi yang telah dibuat sesuai dengan
keinginan klien.
3.11 Unified Modeling Language (UML)

Unified Modeling Language (UML) merupakan salah satu perangkat
pemodelan visual yang digunakan untuk menspesifikan, menggambarkan,
membangun, dan dokumentasi dari sistem perangkat lunak. UML berupa bahasa
visual yang digunakan sebagai perangkat pemodelan dan komunikasi sebuah
sistem dengan menggunakan diagram dan teks-teks pendukung. Penggunaan
UML tidak terbatas pada metodologi tertentu, namun kenyataannya UML banyak
digunakan oleh pemodelan perangkat dengan metodologi berorientasi
objek[ CITATION Suk18 \l 1033 ].
UML memiliki versi terbaru yaitu UML 2.3 yang terdiri dari 4 macam
spesifikasi, yaitu Diagram Interchange Specification, UML Infrastructure, UML
Superstructure, dan Object Constraint Language (OCL). Selain itu UML memiliki
13 macam yang dikelompokkan dalam 3 kategori yaitu Structure Diagram,
Behavior Diagram, dan Interaction Diagram[ CITATION Suk18 \l 1033 ].
Pembagian kategori dan macam-macam diagram dapat dilihat pada .
Gambar 3. Diagram UML

Sumber: Sukamto & Shalahuddin (2010)
Beberapa macam UML akan digunakan dalam penelitian ini, yaitu Use Case
Diagram, Activity Diagram, Sequence Diagram, dan Class Diagram. Terdapat
penambahan Use Case Scenario untuk memperinci fungsi dan tugas yang dimiliki
sistem informasi dari Use Case Diagram yang telah dibuat sebelumnya dan Entity
Relationship Diagram yang berguna sebagai pemodelan awal basis data untuk
menggambarkan relasi antar basis data.
3.11.1 Use Case Diagram

Use Case Diagram adalah rangkaian pemodelan perilaku sistem informasi
yang akan dibuat. Use Case Diagram berfungsi untuk menjelaskan interaksi
antara sistem informasi dengan aktor-aktor yang telah ditentukan. Jenis UML ini
digunakan untuk mengetahui fungsi-fungsi pada sistem serta pengguna yang
berhak menggunakan sistem informasi itu [ CITATION Suk18 \l 1033 ]. Use Case
Diagram memiliki berbagai macam simbol yang dijelaskan pada .
Tabel 3. Simbol dan Deskripsi Pada Use Case Digram
Nama Simbol Deskripsi
Orang, proses, atau sistem yang berinteraksi
dengan fungsi sistem informasi. Aktor belum
Aktor
tentu orang, melainkan dapat dijadikan
sebagai preferensi kata benda.
Unit fungsionalitas yang mewakili proses
bertukar pesan antar aktor. Penulisan use
Use Case
case diawali dengan kata kerja suatu fungsi
sistem.
Asosiasi / Penunjuk proses komunikasi antara aktor
Association dengan use case.
Relasi antara use case induk dengan use
Include case tambahan yang diperlukan sebagai
syarat berjalannya suatu fungsi.
Relasi antara use case induk dengan use
case tambahan yang dapat berdiri sendiri.
Ciri use case tambahan adalah memiliki
Exclude
kesamaan nama depan yang
mengindikasikan kesamaan fungsi dengan
use case induk.
Generalisasi / Penunjuk hubungan umum-khusus antara
Generalizatio dua use case.
n
Supaya lebih jelas, berikut contoh pemodelan use case diagram pada studi
kasus sistem infomasi manajemen perpustakan yang dapat dilihat pada .
Gambar 3. Contoh Use Case Diagram Perpustakaan
3.11.2 Use Case Scenario

Use Case Scenario adalah sekumpulan penjelasan tekstual beberapa
skenario interaksi pada use case diagram. Setiap skenario menjelaskan urutan
langkah atau aktivitas yang dilakukan aktor ketika menggunakan sistem, baik
dalam keadaan berhasil ataupun gagal. Penjelasan secara tekstual pada use case
scenario bersifat singkat, informal namun tetap sopan, dan lengkap [CITATION
Kur18 \l 1033 ].
Menurut Kurniawan (2018), terdapat beberapa poin yang dijelaskan dalam
use case scenario, poin-poin tersebut adalah:
1. Aktor adalah pihak yang menginisiasi layanan sistem untuk mencapai tujuan
penggunaan sistem.
2. Pre-condition atau kondisi awal adalah kondisi spesifik yang harus terpenuhi
sebelum aktivitas suatu sistem dimulai.
3. Main Flow atau alur utama adalah alur pelaksanaan aktivitas aktor terhadap
sistem yang mengarahkan pada skenario keberhasilan sehingga tujuan aktor
terpenuhi.
4. Alternative Flow atau alur alternatif adalah alur pelaksanaan aktivitas aktor
dengan sistem yang mencakup pilihan skenario kegagalan sehingga tujuan
aktor tidak terpenuhi.
5. Post-condition atau kondisi akhir adalah kondisi spesifik yang harus terjadi
ketika aktivitas berhasil dijalankan.
Supaya lebih jelas, berikut contoh pemodelan use case scenario pada studi
kasus pendataan permohonan yang dapat dilihat pada .
Tabel 3. Contoh Use Case Scenario Transaksi Penjualan
Use Case Mengelola Transaksi Penjualan
Deskripsi Kasir mengelola transaksi penjualan pada toko
Aktor Kasir
Pre-condition Login
Main Flow 1. Kasir memilih fungsi penjualan.
2. Sistem menampilkan halaman penjualan.
3. Kasir menambahkan barang belanjaan pelanggan.
4. Kasir menentukan jumlah produk.
5. Kasir memilih fungsi bayar.
6. Sistem menampilkan total harga belanjaan.
7. Kasir memasukkan nominal uang pembayaran.
8. Kasir memilih fungsi submit pembayaran.
9. Sistem menampilkan jumlah uang kembalian.
10. Kasir memilih fungsi cetak struk.
11. Sistem menampilkan halaman penjualan.
Alternative Flow 1. Menambahkan barang belanjaan.
2. Menambahkan barang belanjaan melalui pencarian.
3. Hapus barang belanjaan.
Post-condition Transaksi penjualan berhasil dikelola.
Sumber: Rahadiyan, et al. (2018)
3.11.3 Activity Diagram

Activity Diagram adalah rangkaian pemodelan alur kerja (workflow) suatu
fitur dalam sistem informasi. Activity Diagram tidak menjelaskan aktivitas aktor
dalam menggunakan sistem informasi, melainkan menjelaskan aktivitas sistem
dalam memproses program. Jenis UML ini juga dapat menjelaskan urutan atau
pengelompokan tampilan dari tampilan antar muka yang mana setiap aktivitas
dianggap memiliki sebuah rancangan tampilan antar muka [ CITATION Suk18 \l
1033 ]. Activity diagram memiliki berbagai macam simbol yang dijelaskan pada .
Tabel 3. Simbol dan Deskripsi Pada Activity Diagram
Status awal untuk
Mulai / Start memulai aktivitas pada
sistem.
Penjelasan singkat
aktivitas pada sistem
Aktivitas
yang umumnya diawali
dengan kata kerja.
Notasi percabangan
Percabangan / yang melambangkan
decision adanya pilihan dari dua
aktivitas.
Notasi penggabungan
yang melambangkan
Penggabunga
adanya dua atau lebih
n / join
aktivitas yang digabung
menjadi satu.
Status akhir dari seluruh
Selesai / End aktivitas pada sistem.
Notasi pemisah dalam

organisasi bisnis antara
aktor dengan sistem.
Swimlane
Supaya lebih jelas, berikut contoh pemodelan activity diagram pada studi
kasus sistem informasi manajemen perpustakaan yang dapat dilihat pada .
Gambar 3. Contoh Activity Diagram Perpustakaan
3.11.4 Sequence Diagram

Sequence Diagram berfungsi untuk menjelaskan waktu hidup objek dengan
permintaan yang dikirimkan serta diterima antar objek. Sebelum memodelkan
Sequence Diagram, haruslah mengetahui seluruh objek yang terlibat dalam
sebuah use case beserta metodenya. Jumlah Sequence Diagram yang
dimodelkan adalah minimal sebanyak pendefinisian use case yang ada pada use
case scenario. Faktor terpenting dalam pembuatan sequence diagram yang baik
adalah urutnya peletakkan pesan atau proses. Hal ini dikarenakan dapat
memperjelas cara membaca proses sistem hanya dengan melalui diagram.
[ CITATION Suk18 \l 1033 ]. Sequence diagram memiliki berbagai macam simbol
yang dijelaskan pada .
Tabel 3. Simbol dan Deskripsi Pada Sequence Diagram
Menggambarkan orang, proses, atau
sistem lain yang berinteraksi dengan
Aktor
sistem informasi.
Menggambarkan jangka kehidupan

Garis hidup / suatu objek.
lifeline
Menggambarkan kondisi objek dalam

keadaan aktif dan saling berinteraksi,
Waktu aktif selain itu juga sebagai penanda tempat
mulai dan berakhirnya suatu interaksi.
Boundary Menyatakan sebuah form yang diakses

Lifeline selama aktivitas sistem.
Control Menyatakan sebuah penghubung antara

Lifeline boundary dengan tabel.
Menyatakan sebuah hubungan antar

Entity Lifeline aktivitas yang akan dilakukan.
Pesan tipe Menyatakan pengiriman data atau

send masukan ke objek lainnya.
Pesan tipe Menyatakan pengembalian informasi
reply setelah menjalankan suatu aktivitas.
Menyatakan pemanggilan suatu operasi
Pesan tipe call
dari aktivitas tertentu ke objek lain.
Menyatakan pemanggilan suatu operasi
Pesan tipe self dari aktivitas tertentu ke dirinya sendiri.
Alternative Menggambarkan area pengelompokan

combined aktivitas aktor berdasarkan alur
fragment kondisional (berhasil atau gagal).
Supaya lebih jelas, berikut contoh pemodelan sequence diagram pada studi
kasus sistem informasi manajemen perpustakaan yang dapat dilihat pada .
Gambar 3. Contoh Sequence Diagram Tambah Barang Belanjaan
Sumber: Rahadiyan, et al. (2018)
3.11.5 Class Diagram

Class Diagram berfungsi untuk menggambarkan rincian struktur dan
deskripsi sistem yang akan dibuat untuk membangun sistem. Class Diagram
memudahkan programmer dalam mengelompokkan kelas-kelas agar proses
pendokumentasian perancangan dan sistem informasi menjadi sinkron. Dalam
satu Class Diagram terdiri dari nama kelas, atribut, dan method [ CITATION Suk18
\l 1033 ]. Class Diagram memiliki berbagai macam simbol yang dijelaskan pada .
Tabel 3. Simbol dan Deskripsi Pada Class Diagram
Sebagai kelas pada struktur sistem.
Kelas / Class
Asosiasi / Menggambarkan relasi antarkelas secara

Association umum.
Generalisasi / Menggambarkan relasi antarkelas secara
Generalization generalisasi-spesialisasi (umum-khusus).
Agregasi / Menggambarkan relasi antarkelas dengan
Aggregation makna semua-bagian (whole-part).
Kebergantunga Menggambarkan relasi antarkelas yang
n / Dependency bergantung pada kelas lain.
Supaya lebih jelas, berikut contoh pemodelan class diagram pada studi kasus
sistem informasi manajemen perpustakaan yang dapat dilihat pada .
Gambar 3. Contoh Class Diagram Perpustakaan
3.11.6 Entity Relationship Diagram

Entity Relationship Diagram (ERD) merupakan metode pemodelan awal basis
data yang paling banyak digunakan untuk menggambarkan relasi antar basis
data. Konsep ERD dikembangkan berdasarkan teori himpunan dalam
matematika. ERD memiliki beberapa jenis aliran notasi, seperti notasi Chen,
notasi Barker, notasi Crow’s Foot, dan lain sebagainya. Namun, notasi yang
sering digunakan adalah notasi Chen dengan bermacam simbol [ CITATION Suk18
\l 1033 ]. Entity Relationship Diagram memiliki berbagai macam simbol yang
dijelaskan pada .
Tabel 3. Simbol dan Deskripsi Pada Entity Relationship Diagram
Entitas / Menyatakan benda atau data yang akan

Entity disimpan ke dalam basis data.
Menyatakan field atau kolom data yang akan

Atribut
disimpan pada suatu entitas.
Atribut
disimpan pada suatu entitas yang bersifat
primary key
utama atau primer.
Atribut
disimpan pada suatu entitas yang memiliki
multivalue
nilai lebih dari satu.
Menyatakan relasi atau penghubung antar
Relasi /
entitas. Pendeskripsian nama relasi diawali
Relation
dengan kata kerja.
Tabel 3.6 (lanjutan)
Menyatakan garis yang menghubungkan
Asosiasi one-
suatu entitas dengan paling banyak satu
to-one
entitas lainnya, begitupun sebaliknya.
Asosiasi one- Menyatakan garis yang menghubungkan satu
to-many atribut dengan banyak atribut (N-attribute).
Asosiasi Menyatakan garis yang menghubungkan
many-to- banyak entitas (N-entity) dengan banyak
many entitas lainnya (N-entity).
Sumber: Lubis (2016)
Supaya lebih jelas, berikut contoh pemodelan entity relationship diagram

pada studi kasus sistem informasi manajemen perpustakaan yang dapat dilihat
pada .
Gambar 3. Contoh Entity Relationship Diagram Perpustakaan

3.12 Blackbox Testing

Pengujian dengan metode blackbox merupakan tahapan pengujian
fungsional dari sistem informasi tanpa mengetahui struktur internal kode atau
program. Pengujian dimaksudkan untuk mengetahui kesesuaian fungsi-fungsi,
masukan, dan keluaran dari sistem informasi dengan kebutuhan yang diingikan
user. Pengujian blackbox dilakukan dengan membuat kasus uji coba terhadap
seluruh fungsi yang telah dibuat [ CITATION Suk18 \l 1033 ].
Menurut Utami, et al. (2015), pengujian blackbox memiliki beberapa jenis
teknik desain tes yang dapat dipilih sesuai dengan tipe pengujian yang
digunakan, yaitu:
1. Equivalence Class Partitioning
2. Boundary Value Analysis
3. State Transitions Testing
4. Cause-Effect Graphing
Equivalence Class Partitioning adalah metode membagi domain masukan
dari suatu program ke dalam kelas-kelas data, yang mana test case dapat
diturunkan. Teknik pengujian blackbox ini mengacu pada premis masukan dan
keluaran dari suatu komponen yang dipartisi ke dalam kelas-kelas, berdasarkan
spesifikasi dari komponen tersebut yang akan diperlakukan sama oleh komponen
tersebut. Singkatnya, masukan yang sama akan menghasilkan keluaran (respons)
yang sama pula [ CITATION Uta15 \l 1033 ].
Boundary Value Analysis adalah adalah tes seleksi yang menargetkan
kesalahan dalam aplikasi pada batas-batas kelas ekuivalen. Ketika pembagian
ekuivalen memilih pengujian dari dalam kelas ekuivalen, teknik Boundary Value
Analysis berfokus pada pengujian di dekat batas kelas ekuivalen. Pemilihan tes
menggunakan Boundary Value Analysis umumnya dilakukan sehubungan dengan
pembagian ekuivalen. Namun, selain mengidentifikasi batas-batas menggunakan
kelas-kelas ekuivalen, dimungkinkan juga untuk mengidentifikasi batas-batas
berdasarkan hubungan di antara variabel-variabel masukan[ CITATION Mat11 \l
1033 ].
State Transitions Testing digunakan saat terdapat urutan kejadian dan
kejadian berikutnya yang terjadi berdasarkan kondisi masukan/input tertentu.
Pengujian State Transitions Testing menggambarkan urutan fungsi dan pengujian
yang harus dilakukan menggunakan State Transitions Diagram. State Transition
Diagram adalah representasi bergambar dari state machine. Tujuannya adalah
untuk menggambarkan keadaan yang dapat diasumsikan oleh suatu sistem.
Perilaku sistem digambarkan dengan State Transitions Diagram. Keduanya berisi
informasi yang dapat segera diubah menjadi kasus uji [CITATION Bas15 \l 1033 ].
Cause-Effect Graphing adalah grafik berarah yang menghubungkan
sekumpulan penyebab dengan sekumpulan efek. Teknik ini melibatkan analisis
konten semantik dari spesifikasi persyaratan dan memperoleh hubungan logis
antara input (penyebab) dan output (efek) dalam grafik Boolean. Pembuatan
grafik biasanya menggunakan node yang mana node mewakili penyebab berada
di sisi kiri dan node yang mewakili efek berada di sisi kanan serta masukan
digabungkan menggunakan operator logika seperti AND, OR, dan NOT. Notasi
pada Cause-Effect Graphing dapat dilihat pada .
Gambar 3. Notasi pada Cause-Effect Graph
Sumber: Basu (2015)
3.13 Whitebox Testing

Pengujian dengan metode whitebox merupakan proses pengujian perangkat
lunak dengan memperhatikan desain dan fungsi logika pada kode program yang
diharapkan memiliki fungsi, masukan, dan keluaran yang sesuai kebutuhan
stakeholder [ CITATION Suk18 \l 1033 ]. Pengujian whitebox menekankan pada
proses perancangan test case yang mengandalkan struktur kontrol dari
perancangan prosedural untuk mendapatkan test case yang sesuai dengan
sistem. Penggunaan metode pengujian ini dapat memperoleh test case yang
menjamin validitas dalam mengerjakan seluruh struktur data internal sistem
[ CITATION Mat14 \l 1033 ].
Menurut Khurana (2010), pengujian whitebox memiliki beberapa jenis
pengujian, yaitu:
1. Basis Path Testing
2. Control Structure Testing
3. Mutation Testing
Basis Path Testing memungkinkan untuk menghasilkan kasus uji sehingga
setiap jalur program telah dijalankan setidaknya sekali. Teknik ini digunakan
untuk menentukan set dasar jalur eksekusi yang diperlukan untuk mengeksekusi
semua pernyataan yang ada dalam program. Jika menerapkan teknik pengujian
whitebox jenis ini, langkah pertama yang harus dilakukan adalah membuat flow
graph untuk menggambarkan aliran kontrol logika. Flow graph memiliki notasi
diagram alir yang akan dijelaskan pada .
Gambar 3. Notasi Flow Graph
Sumber: Khurana (2010)
Lingkaran merepresentasikan node untuk menggambarkan pernyataan
prosedural yang ada dalam program. Panah merepresentasikan edge atau link
untuk menggambarkan aliran kontrol yang ada dalam program. Flow graph juga
memiliki area yang dibatasi oleh nodes dan edges, baik di bagian luar panah
maupun di bagian dalam panah, dikenal dengan istilah region. Pemodelan region
dalam flow graph dapat dilihat pada .
Gambar 3. Region dalam Flow Graph

Setelah memodelkan flow graph, langkah kedua adalah menentukan jumlah
jalur independen melalui program dengan perhitungan Cyclomatic Complexity
yang diharapkan dapat mengukur ukuran kuantitatif dan kompleksitas program
berdasarkan logika pada kode pemrograman. Cyclomatic Complexity memiliki
metode perhitungan yang akan menunjukkan hasil pengukuran kuantitatif kode
program, yaitu:
V(G) = E – N + 2 (1)
V(G) = P + 1 (2)
V(G) = R (3)
Huruf E mewakili jumlah edge pada flow graph, huruf N mewakili jumlah
node pada flow graph, huruf R mewakili jumlah region pada flow graph, dan
huruf P mewakili jumlah percabangan yang terjadi pada flow graph. Setelah
melakukan perhitungan dengan prinsip Cyclomatic Complexity, langkah terakhir
adalah menentukan independent path yang merupakan jalur program yang dapat
menetapkan kondisi baru atau minimal satu set pernyataan pemrosesan baru
berdasarkan flow graph. Contoh independent path pada suatu flow graph dapat
dilihat pada .
Gambar 3. Independent Path

BAB 4 METODOLOGI PELAKSANAAN PKL
Bab ini akan membahas metodologi dari penelitian yang akan digunakan
dalam proses perancangan sistem informasi manajemen internship program
berbasis website dengan metode Extreme Programming. Sifat penelitian yang
berfokus pada perancangan dan pengembangan membuat tipe penelitian yang
digunakan adalah tipe implementatif. Tahapan metodologi penelitian yang
digunakan pada laporan PKL ini adalah diagram alir metode yang digunakan,
spesifikasi hardware dan software yang digunakan, studi literatur, perencanaan,
perancangan, pengkodean, pengujian, dan penarikan kesimpulan.
4.1 Diagram Alir Metode Extreme Programming

Proses pengembangan sistem informasi manajemen internship program
berbasis website pada laporan PKL ini menggunakan metode Extreme
Programming. Metode ini menekankan pada pengembangan suatu perangkat
lunak yang efisien karena memerlukan adaptasi cepat dalam perubahan yang
terjadi selama pengembangan perangkat lunak. Metode XP juga cocok digunakan
oleh tim yang tidak memiliki banyak anggota developer. Alur metode
perancangan sistem informasi manajemen berbasis website dapat dilihat pada .
Gambar 4. Diagram Alir Metode Extreme Programming
4.2 Spesifikasi Hardware dan Software yang Digunakan

Spesifikasi hardware yang digunakan dalam membangun sistem informasi
manajemen internship program berbasis website adalah PC atau laptop yang
digunakan minimal Core i3 dan minimal RAM 4GB. Spesifikasi software yang
digunakan adalah Sublime Text versi 3.2 untuk membuat script program, XAMPP
versi 3.2.2 sebagai server utama sistem informasi yang dibuat, dan Google
Chrome atau Mozilla Firefox untuk menampilkan tampilan website yang dibuat
dalam bentuk script dalam format HTML di jaringan internet.
4.3 Studi Literatur

Studi literatur digunakan untuk mencari sekaligus mengumpulkan referensi
teori pendukung yang relevan dengan permasalahan yang diperoleh saat
pelaksanaan PKL. Pada bagian studi literatur akan membahas kajian literatur
terhadap penelitian terdahulu terkait perancangan sistem informasi manajemen
berbasis website dengan metode Extreme Programming. Sumber kajian literatur
yang digunakan berupa buku, jurnal, laporan penelitian, laporan skripsi, hingga
pencarian di internet.
4.4 Perencanaan (Planning)

Tahapan ini dimulai dengan penggalian informasi dengan melakukan
wawancara terhadap penanggung jawab perusahaan tempat penulis
melaksanakan PKL. Wawancara bertujuan untuk mendapatkan informasi terkait
kebutuhan sistem yang akan dibangun mengenai fitur utama, fungsi fitur, dan
keluaran (output) yang diinginkan. Kumpulan kebutuhan sistem yang telah
diperoleh akan dirumuskan ke dalam bentuk user stories. Proses perancangan
sistem informasi manajemen berbasis website ini juga mengidentifikasi
permasalahan yang ada pada kondisi lapangan, kemudian melakukan analisis
kebutuhan pengguna secara menyeluruh untuk disesuaikan dengan sistem
informasi yang akan dibangun.
4.5 Perancangan (Design)

Apabila tahapan mengidentifikasi kebutuhan sistem sudah terpenuhi, maka
tahapan selanjutnya adalah tahapan perancangan. Tahapan ini memfokuskan
perancangan pemodelan antara kebutuhan di lapangan dengan sistem yang akan
dibuat. Perancangan atau design yang dilakukan terdiri dari perancangan sistem
informasi, basis data, dan tampilan antar muka (wireframe).
Proses perancangan sistem informasi dibantu dengan teknik pemodelan
desain menggunakan Unified Modelling Language (UML) sebagai alat bantu
pendokumentasian dalam pengembangan sistem informasi yang bersifat object
oriented. Penggunaan UML dalam perancangan sistem informasi terdiri dari:
1. Penentuan pengguna sistem (actor),
2. Perancangan Use Case Diagram,
3. Perancangan Use Case Scenario,
4. Perancangan Activity Diagram,
5. Perancangan Sequence Diagram, dan
6. Perancangan Class Diagram.
Proses perancangan basis data ditujukan untuk mengidentifikasi tempat
atau lokasi penyimpanan data-data yang akan diproses dalam sistem informasi.
Perancangan basis data pada laporan ini berbentuk Entity Relationship Diagram
(ERD). Penggunaan ERD dipercaya dapat memperjelas keterhubungan antar class
pada basis data.
Proses perancangan tampilan sistem informasi dalam bentuk wireframe
yang terdiri dari desain formulir pendaftaran, login, dashboard, menu data
pemagang, menu nilai pemagang, dan cetak sertifikat. Perancangan tampilan
disesuaikan dengan keinginan perusahaan yang akan menggunakan sistem
informasi kedepannya. Tampilan dibuat sesederhana mungkin dengan
mengutamakan prinsip desain yang minimalis.
4.6 Pengkodean (Coding)

Tahapan selanjutnya yang tak kalah penting adalah pengkodean (coding).
Tahapan ini mengacu kepada hasil perancangan (design) sistem informasi secara
keseluruhan, perancangan basis data hingga tampilan sistem informasi yang
masih berupa wireframe. Proses pembangunan sistem informasi dilakukan
secara pair programming mengingat bahwa penulis melaksanakan PKL secara
berkelompok. Penulis sebagai programmer akan duduk bersama untuk saling
membantu menyelesaikan pembangunan sistem informasi. Pembangunan sistem
informasi dilakukan secepat mungkin dengan tidak mengesampingkan uji coba
error secara berkala mengingat waktu pelaksanaan PKL yang tergolong singkat
yaitu hanya dua bulan. Fungsi-fungsi yang ada pada sistem informasi dibuat
secara optimal dengan harapan memenuhi keinginan pihak perusahaan PKL
sebagai stakeholder.
4.7 Pengujian (Testing)

Tahap pengujian (testing) dilakukan dengan menerapkan pengujian metode
whitebox jenis Basis Path dengan perhitungan Cyclomatic Complexity oleh
pengembang dan metode blackbox jenis State Transitions Testing yang mana
pengujian dilakukan oleh klien sebagai user utama sistem informasi. Dengan
menerapkan teknik pengujian whitebox jenis Basis Path dengan perhitungan
Cyclomatic Complexity diharapkan dapat mengukur ukuran kuantitatif dan
kompleksitas program berdasarkan logika pada kode pemrograman. Pada
pengujian whitebox, aliran kontrol logika digambarkan dengan menggunakan
flow graph.
Selain pengujian whitebox, sistem informasi yang dibangun juga akan diuji
dengan metode pengujian blackbox jenis State Transition Testing. Jenis teknik
State Transitions Testing cocok dengan pengembangan sistem informasi yang
dilakukan oleh penulis. State Transitions Testing digunakan saat terdapat urutan
kejadian dan kejadian berikutnya yang terjadi berdasarkan kondisi
masukan/input tertentu. State Transitions Testing menggambarkan urutan fungsi
dan pengujian yang harus dilakukan menggunakan State Transitions Diagram.
4.8 Penarikan Kesimpulan

Penarikan kesimpulan berguna untuk merangkum hasil tahapan
pengembangan sistem informasi yang dibuat oleh peneliti. Penarikan kesimpulan
dilakukan berdasarkan hasil dari setiap tahapan metode Extreme Programming.
Penelitian ini berhasil melaksanakan seluruh tahapan, mulai dari tahap
perencanaan, perancangan, pengkodean, hingga pengujian. Meskipun begitu,
tidak menutup kemungkinan bahwa sistem informasi yang telah dibangun akan
mengalami pengembangan yang menyesuaikan kebutuhan stakeholder.
BAB 5 HASIL DAN PEMBAHASAN
Bab ini akan menjelaskan hasil dan pembahasan dari pengembangan sistem
informasi manajemen internship program berbasis website dengan metode
Extreme Programming. Proses pengembangan sistem informasi diawali dengan
tahap Perencanaan (Planning) yang mana mengumpulkan daftar kebutuhan
sistem sesuai permintaan stakeholder. Kemudian ke tahap Perancangan (Design)
yang fokus pada perancangan pemodelan kebutuhan stakeholder dengan sistem
yang akan dibuat. Tahap selanjutnya adalah Pengkodean (Coding) yang
merupakan proses pembangunan sistem informasi dari segi tampilan antar
muka, fungsi, dan basis data. Tahap terakhir adalah Pengujian (Testing) yang
dimaksudkan untuk memastikan kondisi dan fungsi sistem informasi yang
dibangun telah berjalan dan sesuai keinginan stakeholder.
5.1 Perencanaan (Planning)

Pada tahap Perencanaan penulis mengumpulkan kebutuhan sistem dalam
bentuk user stories yang diperoleh dari proses wawancara dengan Manajer
Operasional CMLABS. User stories akan menjabarkan kebutuhan serta deskripsi
singkat fitur yang dibutuhkan sesuai dengan wawancara pada . Perumusan user
stories dikelompokkan berdasarkan fungsi atau fitur yang akan dibangun. Hasil
dari wawancara terkait fungsi formulir pendaftaran dirumuskan dalam bentuk
user stories yang dijelaskan pada .
Tabel 5. User Stories untuk Formulir Pendaftaran
Projek : Laman Formulir Pendaftaran Calon Pemagang
Tanggal wawancara : 26 Mei 2020
Pewawancara : Dania Lazuardi Husen, Syaifudin Eka Pradana,
Narasumber : Dwiyana Dini Kurniawan (Manajer Operasional
CMLABS)
Kebutuhan : Sistem yang digunakan oleh calon pemagang ini
diharapkan dapat merekam data pemagang yang mengajukan permohonan
magang yang disajikan dalam bentuk formulir di website.
No. Deskripsi
1. Sistem akan merekam data dan berkas yang dimasukkan oleh calon
pemagang, terdiri dari: nama pemagang, jenis kelamin, tempat dan
tanggal lahir, asal instansi, e-mail, posisi magang, status pemagang,
tanggal mulai dan akhir magang, berkas pendukung seperti CV,
portofolio, dan surat keterangan magang dari instansi asal yang
menaungi calon pemagang.
2. Jika calon pemagang telah memasukkan seluruh data dan berkas yang
diminta, maka data-data tersebut akan tersimpan ke basis data.
Hasil dari wawancara terkait fungsi login dan logout dirumuskan dalam
bentuk user stories yang dijelaskan pada .
Tabel 5. User Stories untuk Fungsi Login dan Logout Admin
Projek : Laman login dan fungsi logout
CMLABS)
Kebutuhan : Sistem login diharapkan dapat membantu proses
identifikasi admin sebelum masuk ke sistem utama. Penggunaan login
dimaksudkan agar admin mendapatkan hak akses untuk menggunakan sistem
informasi. Sedangkan penggunaan fungsi logout digunakan untuk keluar dari
tampilan sistem informasi.
No. Deskripsi
1. Fungsi login hanya membutuhkan ID dan password.
2. Admin akan keluar dari tampilan sistem hanya ketika menekan tombol
logout.
Hasil dari wawancara terkait fungsi pengelolaan data pemagang dirumuskan

dalam bentuk user stories yang dijelaskan pada .
Tabel 5. User Stories untuk Data Pemagang
Projek : Laman Pengelolaan Data Pemagang
CMLABS)
Kebutuhan : Sistem diharapkan dapat menampilkan dan mengelola
data pemagang yang sedang magang di CMLABS.
No. Deskripsi
1. Data yang ditampilkan pada tabel terdiri dari: ID pemagang, nama
pemagang, jenis kelamin, asal instansi, e-mail, status pemagang, dan
posisi magang.
2. Laman “Data Pemagang” dilengkapi dengan fitur untuk menambah,
mengubah, menghapus, dan menampilkan seluruh data pemagang
yang hanya bisa dilakukan oleh admin.
Hasil dari wawancara terkait fungsi pengelolaan nilai pemagang dirumuskan
Tabel 5. User Stories untuk Nilai Pemagang
Projek : Laman Pengelolaan Nilai Pemagang
CMLABS)
data nilai pemagang yang hanya bisa dilakukan oleh admin.
No. Deskripsi
1. Data yang ditampilkan pada tabel terdiri dari: ID pemagang, nama
pemagang, nilai presensi, nilai keterampilan, nilai sikap, nilai
pengetahuan, dan nilai kinerja.
2. Laman “Nilai Pemagang” dilengkapi dengan fitur untuk menambah,
mengubah, menghapus, dan mencetak nilai pemagang yang hanya
bisa dilakukan oleh admin.
Hasil dari wawancara terkait fungsi pengelolaan master data dirumuskan

Tabel 5. User Stories untuk Master Data
Projek : Laman Pengelolaan Data Master
CMLABS)
data master yang berisi data-data instansi-instansi yang menaungi pemagang
mahasiswa dan siswa/i SMK.
No. Deskripsi
1. Data yang ditampilkan pada tabel terdiri dari: ID instansi, nama
instansi, alamat instansi, nomor telepon instansi, dan alamat e-mail
instansi.
2. Laman “Data Pemagang” dilengkapi dengan fitur untuk menambah,
mengubah, dan menghapus data yang hanya bisa dilakukan oleh
admin.
Hasil dari wawancara terkait fungsi cetak sertifikat dirumuskan dalam

bentuk user stories yang dijelaskan pada .
Tabel 5. User Stories untuk Cetak Sertifikat
Projek : Laman Cetak Sertifikat
CMLABS)
Kebutuhan : Sistem diharapkan dapat memenuhi kebutuhan
sertifikasi pemagang setelah selesai melaksanakan magang. Menu “Cetak
Sertifikat” digunakan ketika tiap kali ada pemagang yang telah menyelesaikan
kegiatan magang.
No. Deskripsi
1. Laman “Cetak Sertifikat” langsung menampilkan format atau
template sertifikat yang telah dibuat, lalu tekan tombol “Cetak”.
2. Sertifikat yang dicetak akan terunduh dalam format PDF.
5.2 Perancangan (Design)

Hasil tahapan Perancangan meliputi penentuan aktor, pemodelan use case
diagram, use case scenario, activity diagram, sequence diagram, class diagram,
entity relationship diagram, dan rancangan antar muka sistem.
5.2.1 Penentuan Pengguna Sistem (Aktor)

Penentuan dan identifikasi pengguna sistem atau aktor dilakukan
berdasarkan keterlibatan dalam penggunaan sistem informasi agar tujuan
penggunaan sistem informasi dapat tercapai dan tepat sasaran. Perumusan
daftar pengguna sistem dijelaskan pada .
Tabel 5. Daftar Pengguna Sistem
No. Pengguna Deskripsi
1. Calon pemagang Pemagang dapat mendaftar dengan mengisi
formulir yang tersedia di website CMLABS.
2. Admin Admin merupakan operator yang
bertanggung jawab mengoperasikan sistem
informasi untuk mengatur data pemagang,
mulai dari pengelolaan data pemagang,
pengelolaan nilai pemagang, pengelolaan
data instansi, dan kebutuhan sertifikasi.
5.2.2 Pemodelan Use Case Diagram

Use Case Diagram adalah rangkaian pemodelan perilaku sistem informasi
yang akan dibuat. Use Case Diagram berfungsi untuk menjelaskan interaksi
antara sistem informasi dengan aktor-aktor yang telah ditentukan. Setelah
menganalisis kebutuhan stakeholder yang dirumuskan ke dalam user stories,
maka didapatkan hasil pemodelan use case diagram. Pemodelan use case
diagram sistem informasi berdasarkan rumusan kebutuhan sistem dengan aktor
yang terlibat dijelaskan pada .
Gambar 5. Use Case Diagram Sistem Informasi
5.2.3 Pemodelan Use Case Scenario

Use Case Scenario adalah rangkaian penjelasan rinci mengenai masing-
masing use case yang terjadi pada aktor di dalam sistem informasi. Use case
scenario terdiri dari nama use case, tujuan utama penggunaan fungsi sistem,
aktor yang terlibat, pre-condition sebagai kondisi awal untuk memulai
penggunaan sistem informasi, main flow sebagai alur utama sistem berjalan,
alternative flow sebagai alur alternatif jika terdapat kesalahan penggunaan pada
main flow, dan post-condition sebagai kondisi akhir setelah sistem berhasil
dijalankan. Berdasarkan use case diagram yang telah dibuat, sistem informasi
memiliki 15 (lima belas) use case scenario yang dibedakan berdasarkan fungsi.
Hasil dari pemodelan use case scenario untuk fitur formulir pendaftaran calon
pemagang dijelaskan pada .
Tabel 5. Use Case Scenario Pendaftaran Calon Pemagang
Use Case Pendaftaran Calon Pemagang
Tujuan Mendaftarkan diri sebagai pemagang secara online
Aktor Calon pemagang
Pre-condition Formulir pendaftaran berhasil ditampilkan
Main Flow 1. Sistem menampilkan formulir pendaftaran calon
pemagang yang terdiri dari: nama pemagang, jenis
kelamin, tempat dan tanggal lahir, asal instansi, e-mail,
nomor telepon, posisi magang, status pemagang,
tanggal mulai dan akhir magang, berkas pendukung
seperti CV, portofolio, dan surat keterangan magang
dari instansi asal yang menaungi calon pemagang.
2. Calon pemagang memasukkan data dengan lengkap
pada formulir pendaftaran, lalu tekan tombol
“Simpan”.
3. Sistem memeriksa valid tidaknya data masukan.
4. Sistem menyimpan data calon pemagang ke basis data.
Alternative Flow 1. Sistem menampilkan formulir pendaftaran calon
pemagang yang terdiri dari: nama pemagang, jenis
kelamin, tempat dan tanggal lahir, asal instansi, e-mail,
nomor telepon, posisi magang, status pemagang,
tanggal mulai dan akhir magang, berkas pendukung
seperti CV, portfolio, dan surat keterangan magang
dari instansi asal yang menaungi calon pemagang.
2. Calon pemagang memasukkan data pada formulir
pendaftaran, lalu tekan tombol “Simpan”.
4. Menampilkan pesan bahwa data tidak lengkap.
5. Calon pemagang memasukkan kembali data dengan
lengkap pada formulir pendaftaran.
7. Sistem menyimpan data calon pemagang ke basis data.
Post-condition Data calon pemagang berhasil tersimpan.
Hasil dari pemodelan use case scenario untuk fitur login dijelaskan pada .
Tabel 5. Use Case Scenario Login
Use Case Login Admin
Tujuan Memberikan akses masuk ke sistem informasi manajemen
Aktor Admin
Pre-condition Form login berhasil ditampilkan
Main Flow 1. Sistem menampilkan form login yang terdiri dari ID
admin dan password.
2. Admin memasukkan ID admin dan password
3. Sistem memeriksa valid tidaknya data masukan dengan
memeriksa ke basis data.
Alternative Flow 1. Sistem menampilkan form login yang terdiri dari ID
admin dan password.
2. Admin memasukkan ID admin dan password.
4. Sistem menampilkan pesan bahwa ID admin atau
password salah.
5. Admin memasukkan kembali ID admin dan password
dengan benar.
Post-condition Admin berhasil masuk ke dashboard sistem informasi
manajemen.
Hasil dari pemodelan use case scenario untuk fungsi menampilkan data
Tabel 5. Use Case Scenario Tampil Data Pemagang
Use Case Mengelola Data Pemagang (Tampil Data Pemagang)
Tujuan Menampilkan data lengkap pemagang dari basis data
Aktor Admin
Pre-condition Masuk ke menu “Data Pemagang”
Main Flow 1. Admin dapat melihat tabel data pemagang yang terdiri
dari: ID pemagang, nama pemagang, jenis kelamin, asal
instansi, e-mail, status pemagang, dan posisi magang.
Main Flow 2. Admin mencari data pemagang yang ingin dilihat
dengan memasukkan kata kunci berupa nama
pemagang pada kolom pencarian yang telah
disediakan.
3. Sistem menampilkan kolom data yang dicari.
4. Admin memilih tombol Preview.
Alternative Flow 1. Admin dapat melihat tabel data pemagang yang terdiri
dari ID pemagang, nama pemagang, jenis kelamin, asal
2. Admin mencari data pemagang yang ingin dilihat
disediakan.
3. Sistem tidak menampilkan data apapun karena nama
tidak ditemukan.
4. Admin memasukkan kembali kata kunci berupa nama
pemagang dengan benar.
6. Admin memilih tombol Preview.
Post-condition Sistem berhasil menampilkan data pemagang dengan
lengkap.
Hasil dari pemodelan use case scenario untuk fungsi menambah data
Tabel 5. Use Case Scenario Tambah Data Pemagang
Use Case Mengelola Data Pemagang (Tambah Data Pemagang)
Tujuan Menambah data pemagang sesuai kebutuhan
Aktor Admin
Pre-condition Masuk ke menu Data Pemagang
2. Admin memilih tombol “Tambah Data Pemagang”.
3. Sistem menampilkan form berisikan kolom-kolom
untuk memasukkan nama pemagang, jenis kelamin,
tempat dan tanggal lahir, asal instansi, e-mail, nomor
telepon, posisi magang, status pemagang, tanggal
mulai dan
Main Flow dan akhir magang, dan berkas pendukung, seperti CV,
portofolio, dan surat keterangan magang dari instansi
asal yang menaungi calon pemagang, lalu menekan
tombol “Simpan”.
4. Sistem memeriksa valid tidaknya data masukan
pemagang.
5. Sistem menyimpan data pemagang ke basis data.
2. Admin memilih tombol “Tambah Data Pemagang”.
untuk memasukkan nama pemagang, jenis kelamin,
tempat dan tanggal lahir, asal instansi, e-mail, posisi
magang, status pemagang, tanggal mulai dan akhir
magang, dan berkas pendukung, seperti CV, portofolio,
dan surat keterangan magang dari instansi asal yang
menaungi calon pemagang, lalu menekan tombol
“Simpan”.
pemagang.
5. Menampilkan pesan bahwa penambahan data tidak
lengkap.
6. Admin memasukkan kembali data dengan lengkap
pada form penambahan data pemagang.
pemagang.
Post-condition Data pemagang berhasil tersimpan.
Hasil dari pemodelan use case scenario untuk fungsi mengubah data
Tabel 5. Use Case Scenario Ubah Data Pemagang
Use Case Mengelola Data Pemagang (Ubah Data Pemagang)
Tujuan Mengubah data pemagang sesuai kebutuhan
Aktor Admin
2. Admin mencari data pemagang yang ingin diubah
disediakan.
4. Admin memilih tombol “Ubah”.
5. Sistem menampilkan form pengubahan data
pemagang.
6. Admin mengubah data pemagang sesuai kebutuhan.
7. Sistem memeriksa valid tidaknya data masukan hasil
mengubah data.
2. Admin mencari data pemagang yang ingin diubah
disediakan.
tidak ditemukan.
7. Sistem menampilkan form pengubahan data
pemagang.
8. Admin mengubah data pemagang sesuai kebutuhan.
mengubah data.
10. Sistem menampilkan pesan bahwa data masukan tidak
valid (tidak lengkap).
11. Admin mengubah kembali data pemagang dengan
benar.
mengubah data.
Alternative Flow 13. Sistem menyimpan data pemagang ke basis data.
Post-condition Data pemagang berhasil diubah.
Hasil dari pemodelan use case scenario untuk fungsi menghapus data
Tabel 5. Use Case Scenario Hapus Data Pemagang
Use Case Mengelola Data Pemagang (Hapus Data Pemagang)
Tujuan Menghapus data pemagang sesuai kebutuhan
Aktor Admin
2. Admin mencari data pemagang yang ingin dihapus
disediakan.
4. Admin memilih tombol “Hapus”.
5. Sistem menampilkan pesan konfirmasi “Apakah yakin
menghapus data?”.
6. Admin menekan tombol pilihan “Iya”.
dari ID pemagang, nama pemagang, jenis kelamin, asal
2. Admin mencari data pemagang yang ingin dihapus
disediakan.
tidak ditemukan.
menghapus data?”.
Alternative Flow 8. Admin menekan tombol pilihan “Iya”.
Post-condition Data pemagang berhasil dihapus.
Hasil dari pemodelan use case scenario untuk fungsi menambah nilai
Tabel 5. Use Case Scenario Tambah Nilai Pemagang
Use Case Mengelola Nilai Pemagang (Tambah Nilai Pemagang)
Tujuan Menambah nilai pemagang sesuai kategori penilaian
Aktor Admin
Pre-condition Masuk ke menu “Nilai Pemagang”
Main Flow 1. Admin dapat melihat tabel nilai pemagang yang terdiri
dari: ID pemagang, nama pemagang, nilai presensi,
nilai keterampilan, nilai sikap, nilai pengetahuan, dan
nilai kinerja.
2. Admin memilih tombol “Tambah Nilai”.
untuk memasukkan nilai presensi, nilai keterampilan,
nilai sikap, nilai pengetahuan, dan nilai kinerja.
4. Sistem memeriksa valid tidaknya data masukan nilai
pemagang.
5. Sistem menyimpan data nilai pemagang ke basis data.
Alternative Flow 1. Admin dapat melihat tabel nilai pemagang yang terdiri
nilai kinerja.
2. Admin memilih tombol “Tambah Nilai”.
untuk memasukkan nilai presensi, nilai keterampilan,
nilai sikap, nilai pengetahuan, dan nilai kinerja.
4. Sistem memeriksa valid tidaknya data masukan nilai
pemagang.
5. Menampilkan pesan bahwa penambahan nilai tidak
lengkap.
6. Admin memasukkan kembali nilai dengan lengkap pada
form penambahan nilai.
Alternative Flow 7. Sistem memeriksa valid tidaknya data masukan nilai
pemagang.
Post-condition Nilai pemagang berhasil ditambah
Hasil dari pemodelan use case scenario untuk fungsi mengubah nilai
Tabel 5. Use Case Scenario Ubah Nilai Pemagang
Use Case Mengelola Nilai Pemagang (Ubah Nilai Pemagang)
Tujuan Mengubah nilai pemagang sesuai kebutuhan penilaian
Aktor Admin
nilai kinerja.
2. Admin mencari data nilai pemagang yang ingin diubah
disediakan.
3. Sistem menampilkan kolom data nilai yang dicari.
5. Sistem menampilkan form pengubahan nilai
pemagang.
6. Admin mengubah nilai pemagang sesuai kebutuhan.
mengubah nilai.
dari ID pemagang, nama pemagang, nilai presensi, nilai
keterampilan, nilai sikap, nilai pengetahuan, dan nilai
kinerja.
3. Admin mencari data nilai pemagang yang ingin diubah
disediakan.

Alternative Flow 4. Admin memasukkan kembali kata kunci berupa nama
6. Sistem menampilkan form pengubahan nilai
pemagang.
7. Admin mengubah nilai pemagang sesuai kebutuhan.
mengubah nilai.
9. Sistem menampilkan pesan bahwa data masukan tidak
10. Admin mengubah kembali nilai pemagang dengan
benar.
mengubah nilai.
Post-condition Nilai pemagang berhasil diubah.
Hasil dari pemodelan use case scenario untuk fungsi menghapus nilai
Tabel 5. Use Case Scenario Hapus Nilai Pemagang
Use Case Mengelola Nilai Pemagang (Hapus Nilai Pemagang)
Tujuan Menghapus nilai pemagang sesuai kebutuhan
Aktor Admin
nilai kinerja.
2. Admin mencari data nilai pemagang yang ingin dihapus
disediakan.
Main Flow 5. Sistem menampilkan pesan konfirmasi “Apakah yakin
menghapus nilai?”.
nilai kinerja.
disediakan.
tidak ditemukan.
menghapus nilai?”.
Post-condition Nilai pemagang berhasil dihapus.
Hasil dari pemodelan use case scenario untuk fungsi mencetak nilai
Tabel 5. Use Case Scenario Cetak Nilai Pemagang
Use Case Mengelola Nilai Pemagang (Cetak Nilai Pemagang)
Tujuan Mencetak nilai pemagang sesuai kebutuhan
Aktor Admin
nilai kinerja.
disediakan.
Main Flow 3. Sistem menampilkan kolom data nilai yang dicari.
4. Admin memilih tombol “Cetak”.
5. Sistem akan memproses pencetakan atau mengunduh
berkas penilaian dalam format PDF.
nilai kinerja.
disediakan.
tidak ditemukan.
Post-condition Nilai pemagang berhasil dicetak.
Hasil dari pemodelan use case scenario untuk fungsi menambah data master
dijelaskan pada .
Tabel 5. Use Case Scenario Tambah Data Master
Use Case Mengelola Data Master (Tambah Data Master)
Tujuan Menambah data master berupa data instansi yang
menaungi pemagang sesuai kebutuhan
Aktor Admin
Pre-condition Masuk ke menu “Master Data”
Main Flow 1. Admin dapat melihat tabel data master yang terdiri
dari: ID instansi, nama instansi, alamat instansi, nomor
telepon instansi, dan e-mail instansi.
2. Admin memilih tombol “Tambah Data Master”.
Main Flow 3. Sistem menampilkan form berisikan kolom-kolom
untuk memasukkan nama instansi, alamat instansi,
nomor telepon instansi, dan e-mail instansi.
4. Sistem memeriksa valid tidaknya data-data instansi.
5. Sistem menyimpan data instansi ke basis data.
Alternative Flow 1. Admin dapat melihat tabel data master yang terdiri
2. Admin memilih tombol “Tambah Data Master”.
untuk memasukkan nama instansi, alamat instansi,
nomor telepon instansi, dan e-mail instansi.
5. Menampilkan pesan bahwa penambahan data tidak
lengkap.
6. Admin memasukkan kembali data dengan lengkap
pada formulir penambahan data instansi.
Post-condition Data master berupa data instansi berhasil tersimpan.
Hasil dari pemodelan use case scenario untuk fungsi mengubah data master
dijelaskan pada .
Tabel 5. Use Case Scenario Ubah Data Master
Use Case Mengelola Data Master (Ubah Data Master)
Tujuan Mengubah data master berupa data instansi yang menaungi
pemagang sesuai kebutuhan
Aktor Admin
2. Admin mencari data instansi yang ingin diubah dengan
memasukkan kata kunci berupa nama instansi pada
kolom pencarian yang telah disediakan.
Main Flow 3. Sistem menampilkan kolom data yang dicari.
5. Sistem menampilkan form pengubahan data instansi.
6. Admin mengubah data instansi sesuai kebutuhan.
7. Sistem memeriksa valid tidaknya data instansi hasil
mengubah data.
instansi tidak ditemukan.
instansi dengan benar.
7. Sistem menampilkan form pengubahan data instansi.
8. Admin mengubah data instansi sesuai kebutuhan.
mengubah data.
10. Sistem menampilkan pesan bahwa data instansi tidak
11. Admin mengubah kembali data instansi dengan benar.
mengubah data.
Post-condition Data master berupa data instansi berhasil diubah.
Hasil dari pemodelan use case scenario untuk fungsi menghapus data
master dijelaskan pada .
Tabel 5. Use Case Scenario Hapus Data Master
Use Case Mengelola Data Master (Hapus Data Master)
Tujuan Menghapus data master berupa data instansi yang
menaungi pemagang sesuai kebutuhan
Aktor Admin
menghapus data?”.
2. Admin melakukan pencarian data instansi yang ingin
diubah dengan memasukkan kata kunci berupa nama
instansi pada kolom pencarian yang telah disediakan.
instansi tidak ditemukan.
instansi dengan benar.
menghapus data?”.
Post-condition Data master berupa data instansi berhasil dihapus.
Hasil dari pemodelan use case scenario untuk fungsi mencetak sertifikat
dijelaskan pada .
Tabel 5. Use Case Scenario Cetak Sertifikat
Use Case Cetak Sertifikat
Tujuan Mencetak sertifikat pemagang sesuai kebutuhan
Aktor Admin
Pre-condition Masuk ke menu “Cetak Sertifikat”
Main Flow 1. Sistem menampilkan template sertifikat pemagang.
sertifikat dalam format PDF.
Alternative Flow 1. Sistem menampilkan template sertifikat pemagang.
3. Jika admin mengurungkan niat untuk mencetak
sertifikat, maka dapat membatalkan proses mencetak
dengan memilih tombol “Cancel”.
4. Jika admin yakin akan mencetak sertifikat, maka dapat
memilih tombol “Print”.
Post-condition Nilai pemagang berhasil dicetak.
Hasil dari pemodelan use case scenario untuk fitur logout dijelaskan pada .
Tabel 5. Use Case Scenario Logout
Use Case Logout
Tujuan Keluar dari sistem setelah mengakses sistem informasi
manajemen
Aktor Admin
Pre-condition Masuk ke dalam sistem informasi (bisa dari dashboard,
menu Data Pemagang, Nilai Pemagang, atau Cetak
Sertifikat)
Main Flow 1. Admin memilih tombol logout.
Sistem melakukan proses keluar dari sistem.
Alternative Flow -
Post-condition Admin berhasil keluar dari sistem informasi manajemen.
5.2.4 Pemodelan Activity Diagram

Activity Diagram adalah rangkaian pemodelan alur kerja (workflow) suatu
fitur dalam sistem informasi. Activity Diagram tidak menjelaskan aktivitas aktor
dalam menggunakan sistem informasi, melainkan menjelaskan aktivitas sistem
dalam memproses program. Penelitian ini menghasilkan 15 (lima belas) activity
diagram yang mengacu pada use case scenario dan dibedakan berdasarkan
fungsi. Hasil dari pemodelan activity diagram berdasarkan use case scenario
pada untuk fitur formulir pendaftaran calon pemagang dijelaskan pada .
Gambar 5. Activity Diagram Pendaftaran Pemagang

Hasil dari pemodelan activity diagram berdasarkan use case scenario pada
untuk fungsi login dijelaskan pada .
Gambar 5. Activity Diagram Login Admin
untuk fungsi menampilkan data pemagang dijelaskan pada .
Gambar 5. Activity Diagram Tampil Data Pemagang
untuk fungsi menambah data pemagang dijelaskan pada .
Gambar 5. Activity Diagram Tambah Data Pemagang
untuk fungsi mengubah data pemagang dijelaskan pada .
Gambar 5. Activity Diagram Ubah Data Pemagang
untuk fungsi menghapus data pemagang dijelaskan pada .
Gambar 5. Activity Diagram Hapus Data Pemagang
untuk fungsi menambah nilai pemagang dijelaskan pada .
Gambar 5. Activity Diagram Tambah Nilai Pemagang
untuk fungsi mengubah nilai pemagang dijelaskan pada .
Gambar 5. Activity Diagram Ubah Nilai Pemagang
untuk fungsi menghapus nilai pemagang dijelaskan pada .
Gambar 5. Activity Diagram Hapus Nilai Pemagang

untuk fungsi mencetak nilai pemagang dijelaskan pada .
Gambar 5. Activity Diagram Cetak Nilai Pemagang
untuk fungsi menambah data master dijelaskan pada .
Gambar 5. Activity Diagram Tambah Data Master
untuk fungsi mengubah data master dijelaskan pada .
Gambar 5. Activity Diagram Ubah Data Master
untuk fungsi menghapus data master dijelaskan pada .
Gambar 5. Activity Diagram Hapus Data Master

untuk fungsi mencetak sertifikat dijelaskan pada .
Gambar 5. Activity Diagram Cetak Sertifikat
untuk fitur logout dijelaskan pada .
Gambar 5. Activity Diagram Logout
5.2.5 Pemodelan Sequence Diagram

Sequence Diagram berfungsi untuk menjelaskan waktu hidup objek dengan
permintaan yang dikirimkan serta diterima antar objek. Sequence Diagram juga
menjelaskan proses transaksi berdasarkan activity diagram yang telah dibuat
antara aktor dengan sistem informasi. Penelitian ini menghasilkan perumusan
sequence diagram pada sistem informasi sebanyak 15 (lima belas) yang mengacu
pada activity diagram serta dibedakan berdasarkan fungsi. Hasil dari pemodelan
sequence diagram berdasarkan activity diagram pada untuk fitur formulir
pendaftaran calon pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Pendaftaran Pemagang
Hasil dari pemodelan sequence diagram berdasarkan activity diagram pada

untuk fitur login dijelaskan pada .
Gambar 5. Sequence Diagram Login

untuk fungsi menampilkan data pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Tampil Data Pemagang

untuk fungsi menambah data pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Tambah Data Pemagang

untuk fungsi mengubah data pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Ubah Data Pemagang

untuk fungsi menghapus data pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Hapus Data Pemagang

untuk fungsi menambah nilai pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Tambah Nilai Pemagang

Hasil dari pemodelan sequence diagram berdasarkan activity diagram pada untuk fungsi mengubah nilai pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Ubah Nilai Pemagang

untuk fungsi menghapus nilai pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Hapus Nilai Pemagang

untuk fungsi mencetak nilai pemagang dijelaskan pada .
Gambar 5. Sequence Diagram Cetak Nilai Pemagang

untuk fungsi menambah data master dijelaskan pada .
Gambar 5. Sequence Diagram Tambah Data Master

untuk fungsi mengubah data master dijelaskan pada .
Gambar 5. Sequence Diagram Ubah Data Master

untuk fungsi menghapus data master dijelaskan pada .
Gambar 5. Sequence Diagram Hapus Data Master

untuk fungsi mencetak sertifikat dijelaskan pada .
Gambar 5. Sequence Diagram Cetak Sertifikat

untuk fitur logout dijelaskan pada .
Gambar 5. Sequence Diagram Logout
5.2.6 Pemodelan Class Diagram

Class Diagram berfungsi untuk menggambarkan rincian struktur dan
deskripsi sistem yang akan dibuat untuk membangun sistem. Class Diagram
memudahkan programmer dalam mengelompokkan kelas-kelas agar proses
pendokumentasian perancangan dan sistem informasi menjadi sinkron. Dalam
satu Class Diagram terdiri dari nama kelas, atribut, dan method. Hasil dari
pemodelan class diagram berdasarkan sequence diagram dijelaskan pada .
Gambar 5. Class Diagram Sistem Informasi
5.2.7 Pemodelan Entity Relationship Diagram

Entity Relationship Diagram atau ERD berfungsi untuk menggambarkan
relasi antar basis data. Penelitian ini menghasilkan pemodelan ERD yang dibuat
berdasarkan fungsi yang dimiliki sistem informasi. Hasil dari pemodelan ERD
untuk sistem informasi manajemen internship program dijelaskan pada .
Gambar 5. Entity Relationship Diagram Sistem Informasi
5.2.8 Rancangan Antar Muka Sistem Informasi (Wireframe)

Pengembangan sistem informasi yang baik harus memiliki tampilan antar
muka yang menarik dan mudah digunakan oleh pengguna. Peneliti sekaligus
pengembang sangat memperhatikan perancangan antar muka. Penelitian ini
menghasilkan 20 (dua puluh) wireframes yang dibedakan berdasarkan fungsi.
Hasil dari perancangan antar muka sistem informasi untuk formulir pendaftaran
calon pemagang dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Formulir Pendaftaran Pemagang

Hasil dari perancangan antar muka sistem informasi untuk login dalam
bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Login Admin
Hasil dari perancangan antar muka sistem informasi untuk dashboard dalam
bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Dashboard
Hasil dari perancangan antar muka sistem informasi untuk menu fitur-fitur
sistem informas dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Menu Pada Dashboard
Hasil dari perancangan antar muka sistem informasi untuk laman data
pemagang dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Data Pemagang
Hasil dari perancangan antar muka sistem informasi untuk fitur menambah
data pemagang dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Tambah Data Pemagang
Hasil dari perancangan antar muka sistem informasi untuk fitur mengubah
Gambar 5. Wireframe Antar Muka Ubah Data Pemagang

Hasil dari perancangan antar muka sistem informasi untuk fitur menghapus
Gambar 5. Wireframe Antar Muka Hapus Data Pemagang
Hasil dari perancangan antar muka sistem informasi fitur menampilkan data
Gambar 5. Wireframe Antar Muka Tampil Data Pemagang
Hasil dari perancangan antar muka sistem informasi laman penilaian

Gambar 5. Wireframe Antar Muka Nilai Pemagang
Hasil dari perancangan antar muka sistem informasi fitur menambah nilai
Gambar 5. Wireframe Antar Muka Tambah Nilai Pemagang
nilai pemagang dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Ubah Nilai Pemagang
Gambar 5. Wireframe Antar Muka Hapus Nilai Pemagang
Hasil dari perancangan antar muka sistem informasi untuk fitur mencetak
Gambar 5. Wireframe Antar Muka Cetak Nilai Pemagang
Hasil dari perancangan antar muka sistem informasi untuk laman master
data dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Master Data
Hasil dari perancangan antar muka sistem informasi untuk fitur menambah
data master dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Tambah Data Master
Gambar 5. Wireframe Antar Muka Ubah Data Master
Gambar 5. Wireframe Antar Muka Hapus Data Master

Hasil dari perancangan antar muka sistem informasi untuk fitur mencetak
sertifikat dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Cetak Sertifikat
Hasil dari perancangan antar muka sistem informasi untuk fitur konfirmasi
mencetak sertifikat dalam bentuk wireframe digambarkan pada .
Gambar 5. Wireframe Antar Muka Konfirmasi Cetak Sertifikat
5.3 Pengkodean (Coding)

Pembangunan sekaligus pengembangan sistem informasi manajemen
internship program dimulai dari perancangan tampilan antar muka berdasarkan
dengan wireframe yang telah dibuat sebelumnya. Selanjutnya membuat
algoritme logika untuk fungsi fitur-fitur dan kebutuhan sistem informasi lainnya.
Pembuatan algoritme dalam sistem informasi ini memiliki proses yang terdiri dari
proses pendaftaran calon pemagang, login, dashboard, laman menu data
pemagang, fitur menambah data pemagang, fitur mengubah data pemagang,
fitur menghapus data pemagang, fitur menampilkan data pemagang dengan
lengkap, laman menu penilaian pemagang, fitur menambah nilai pemagang, fitur
mengubah nilai pemagang, fitur menghapus nilai pemagang, fitur mencetak nilai
pemagang, laman menu master data, fitur menambah data master, fitur
mengubah data master, fitur menghapus data master, fitur mencetak sertifikat,
dan fungsi logout.
5.3.1 Pengkodean Algoritme Pendaftaran Calon Pemagang

Pada proses pendaftaran magang, calon pemagang menuliskan data diri
yang terdiri dari nama, jenis kelamin, tempat dan tanggal lahir, asal instansi, e-
mail, nomor telepon, posisi magang, status pemagang (mahasiswa atau siswa/i
SMK), tanggal mulai dan selesai magang, serta dokumen pendukung (CV,
portfolio, dan surat pengantar dari universitas/sekolah). Apabila data diri dan
dokumen pendukung telah ditulis dengan lengkap, maka calon pemagang dapat
menekan tombol “Simpan” dan data berhasil tersimpan ke dalam database
perusahaan. Namun, jika data diri tidak ditulis dengan lengkap atau format dan
ukuran dokumen pendukung tidak sesuai ketentuan, maka data gagal terunggah
dan tersimpan di database perusahaan. Hasil dari pengkodean pembangunan
sistem informasi untuk tampilan formulir pendaftaran dijelaskan pada .
Tabel 5. Kode Program Tampilan Formulir Pendaftaran
pendaftaran.php
1 <form action="proses_daftar.php" method="post"
enctype="multipart/form-data">
2 <label class="col-xl-3 col-lg-3 col-form-label">* Nama
Pemagang</label>
3 <input type="text" name="nama_pemohon" id="nama_pemohon"
class="form-control m-input" required="required">
4 <label class="col-xl-3 col-lg-3 col-form-label">* Jenis
Kelamin</label>
5 <option value="">-- Pilih Jenis Kelamin --</option>
6 <option value="Laki-Laki">Laki - Laki</option>
7 <option value="Perempuan">Perempuan</option>
8 <label class="col-xl-3 col-lg-3 col-form-label">* Tempat
Lahir</label>
9 <input type="text" name="tempat_lhr" id="tempat_lhr" class="form-
control m-input" required="required">
10 <label for="example-date-input" class="col-xl-3 col-lg-3 col-form-
label">* Tanggal Lahir</label>
11 <input class="form-control m-input" name="tgl_lhr" type="date"
id="tgl_lhr" required="required">
12 <label class="col-xl-3 col-lg-3 col-form-label">* Asal
Instansi</label>
13 <input type="text" name="asal_instansi" id="asal_instansi"
class="form-control m-input" required="required">
14 <label class="col-xl-3 col-lg-3 col-form-label">* Email</label>
15 <input type="email" name="email" id="email" class="form-control m-
input" required="required">
16 <label class="col-xl-3 col-lg-3 col-form-label">* Nomor
Telepon</label>
17 <input type="text" name="no_telepon" class="form-control"
required="required">
18 <label class="col-xl-3 col-lg-3 col-form-label">* Posisi
Magang</label>
19 <option value="">-- Pilih Posisi Magang --</option>
20 <option value="Content Writer">Content Writer</option>
21 <option value="Copywriter">Copywriter</option>
22 <option value="Web Developer">Web Developer</option>
23 <option value="Graphics Designer">Graphics Designer</option>
24 <option value="UI/UX Developer">UI/UX Developer</option>
25 <option value="Social Media Specialist">Social Media
Specialist</option>
26 <option value="Video Editing">Video Editing</option>
27 <option value="SEO Specialist">SEO Specialist</option>
28 <label for="agama" class="col-xl-3 col-lg-3 col-form-label">*
Status Pemagang</label>
29 <option value="">-- Pilih Status --</option>
30 <option value="Mahasiswa">Mahasiswa</option>
31 <option value="Siswa/Siswi SMK">Siswa/Siswi SMK</option>
label">* Tanggal Masuk Magang</label>
33 <input class="form-control m-input" name="mulai_intern"
type="date" id="mulai_intern" required="required">
label">* Tanggal Akhir Magang</label>
35 <input class="form-control m-input" name="selesai_intern"
type="date" id="selesai_intern" required="required">
36 <label for="exampleInputEmail1">* Unggah Dokumen Pendukung</label>
<input type="file" class="custom-file-input" name="dokumen"
37 id="dokumen" required="required">
<div class=""><input type="submit" name="" value="Simpan"
38 class="btn btn-primary"></div></form>
Berdasarkan kode program yang telah dirumuskan pada , menghasilkan

tampilan akhir sistem informasi untuk fungsi pendaftaran pemagang yang dapat
dilihat pada .
Gambar 5. Tampilan Fitur Pendaftaran Pemagang

Hasil dari pengkodean pembangunan sistem informasi untuk proses
pendaftaran dijelaskan pada .
Tabel 5. Kode Program Proses Pendaftaran
proses_daftar.php
1 <?php
2 include 'koneksi.php';
3 $q = mysqli_query($connect, "SELECT COUNT(nama_pemohon) AS total
FROM tbl_intern");
4 $ext = mysqli_fetch_array($q);
5 $id_pemohon = $ext['total'] + 1;
6 $nama_pemohon = $_POST['nama_pemohon'];
7 $jenis_kelamin = $_POST['jenis_kelamin'];
8 $tempat_lhr = $_POST['tempat_lhr'];
9 $tgl_lhr = $_POST['tgl_lhr'];
10 $asal_instansi = $_POST['asal_instansi'];
11 $email = $_POST['email'];
12 $posisi_mgng = $_POST['posisi_mgng'];
13 $status_pemagang = $_POST['status_pemagang'];
14 $mulai_intern = $_POST['mulai_intern'];
15 $selesai_intern = $_POST['selesai_intern'];
16 $no_telepon = $_POST['no_telepon'];
17 $rand = rand();
18 $ekstensi = array('rar', 'zip');
19 $filename = $_FILES['dokumen']['name'];
20 $ukuran = $_FILES['dokumen']['size'];
21 $ext = pathinfo($filename, PATHINFO_EXTENSION);
22 if (!in_array($ext, $ekstensi)) {
23 header("location:pendaftaran.php?alert=gagal_ekstensi");
24 } else {
25 //jika ukuran kurang dari 2mb
26 if ($ukuran < 2097152) {
27 $xx = $rand . '_' . $filename;
28 move_uploaded_file($FILES['dokumen']['tmp_name'], 'doc/' . $rand .
'' . $filename);
29 $query = "INSERT INTO tbl_intern
(nama_pemohon,jenis_kelamin,tempat_lhr, tgl_lhr,asal_instansi,
email,no_telepon,posisi_mgng,status_pemagang,mulai_intern,selesai_
intern, dokumen)
VALUES('" . $nama_pemohon . "','" . $jenis_kelamin . "','" .
$tempat_lhr . "','" . $tgl_lhr . "','" . $asal_instansi . "','" .
$email . "','" . $no_telepon . "','" . $posisi_mgng . "','" .
$status_pemagang . "','" . $mulai_intern . "','" . $selesai_intern
. "', '" . $xx . "')";
30 $ex = mysqli_query($connect, $query);
31 header("location:pendaftaran.php?alert=berhasil");
32 }else{
33 header("location:pendaftaran.php?alert=gagal_ukuran");
34 }}
5.3.2 Pengkodean Algoritme Login Admin

Pada proses login, admin memasukkan ID dan password. Jika ID dan
password benar, maka admin diarahkan ke tampilan dashboard sistem informasi.
Jika ID atau password salah, maka akan muncul notifikasi bahwa admin gagal
masuk ke sistem informasi. Hasil dari pengkodean pembangunan sistem
informasi untuk tampilan login dijelaskan pada .
Tabel 5. Kode Program Tampilan Halaman Login
login.php
1 <div class="m-grid m-grid--hor m-grid--root m-page">
2 <img src="assets/app/media/img/logos/Gambar cmlabs.png"
style="width: 230px; height: 230px;"></a></div>
3 <h4 class="card-title">Login</h4>
4 <form action="proses_login.php" method="post" class="form-
horizontal">
5 <label for="username">ID Admin</label>
6 <input type="text" class="form-control" name="id_admin"
id="id_admin" aria-describedby="emailHelpId" placeholder="Masukkan
ID Admin"></div>
7 <label for="password">Password</label>
8 <input type="password" class="form-control" name="password"
id="password" aria-describedby="emailHelpId" placeholder="Masukkan
Password"></div>
9 <input type="submit" class="btn btn-info btn-block" value="Login">
10 </div></form></div></div></div></div></div>

tampilan akhir sistem informasi untuk fungsi login yang dapat dilihat pada .
Gambar 5. Tampilan Fungsi Login Admin

Hasil dari pengkodean pembangunan sistem informasi untuk proses login
dijelaskan pada .
Tabel 5. Kode Program Proses Login
proses-login.php
1 <?php
2 session_start();
4 $id_admin = $_POST['id_admin'];
5 $password = $_POST['password'];
6 $query = "SELECT * FROM tbl_admin WHERE id_admin = '".$id_admin."'
AND password = '".$password."'";
7 $ex = $connect->query($query);
8 if ($ex->num_rows == 1){
9 session_start();
10 $_SESSION['id_admin'] = $id_admin;
11 $_SESSION['level'] = "admin";
12 header("location: dashboard.php");
13 } else{
14 echo '<script>alert("Login Gagal")
15 window.location.href = "login.php";</script>';
16 }?>
5.3.3 Pengkodean Algoritme Dashboard
Dashboard berguna sebagai tampilan awal sistem informasi setelah admin
berhasil login. Pada dashboard akan ditampilkan menu dan fitur yang
mendukung sistem informasi tersebut. Salah satunya adalah implementasi data
pemagang yang sedang atau pernah magang dalam bentuk Column Chart dan
implementasi persentase jumlah pemagang yang aktif magang dalam bentuk Pie
Chart. Hasil dari pengkodean pembangunan sistem informasi untuk tampilan
dashboard dijelaskan pada .
Tabel 5. Kode Program Tampilan Halaman Dashboard
dashboard.php
1 <div class="card card-custom bg-gray-100 gutter-b card-stretch
card-shadowless">
2 <h3 class="card-title font-weight-bolder text-
success">PERKEMBANGAN TIM MAGANG</h3></div>
3 <?php
4 $jumlah = mysqli_query($connect, "SELECT COUNT(*) as jumlah from
tbl_intern group by month(mulai_intern);");
5 $bulan = mysqli_query($connect, "SELECT distinct
month(mulai_intern) as bulan_ke from tbl_intern");
6 ?>
7 <head>
8 <script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.b
undle.js"></script></head>
9 <body>
10 <canvas id="myChart" width="50" height="50"></canvas></div>
11 <script>
12 var ctx = document.getElementById("myChart");
13 var myChart = new Chart(ctx, {
14 type: 'bar',
15 data: {
16 labels: [<?php while ($b = mysqli_fetch_array($jumlah)) { echo '"'
. $b['jumlah'] . '",';}?>],
17 datasets: [{
18 label: 'Jumlah intern pada bulan ke',
19 data: [<?php while ($p = mysqli_fetch_array($bulan)) { echo '"' .
$p['bulan_ke'] . '",';}?>],
20 options: {
21 scales: {
22 yAxes: [{
23 ticks: {
24 beginAtZero: true
25 }}]}}});
26 </script></body></div>
27 <div class="card card-custom bg-light-success gutter-b card-
stretch card-shadowless">
28 <h3 class="card-title font-weight-bolder text-success">JUMLAH
INTERN CMLABS</h3></div>
29 <?php
30 $query = "SELECT count(*) as jumlah_intern, status_pemagang,
31 case
32 when status_pemagang = 'Siswa/Siswi SMK' then 'Siswa/Siswi SMK'
33 when status_pemagang = 'Mahasiswa' then 'Mahasiswa'
34 end as status_pemagang FROM tbl_intern GROUP BY
35 status_pemagang ;";
36 $result = mysqli_query($connect, $query);
37 $i=0;
38 while ($row = mysqli_fetch_array($result)) {
39 $label[$i] = $row["status_pemagang"];
40 $count[$i] = $row["jumlah_intern"];
41 $i++;
42 }?>
43 <meta name="viewport" content="width=device-width, initial-
44 scale=1">
45 <style>
46 body {
47 width: 200%;
48 margin: 0 auto;
49 }</style>
50 <script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
51 <script type="text/javascript">
52 google.charts.load('current', {'packages':['corechart']});
53 google.charts.setOnLoadCallback(drawPieChart);
54 function drawPieChart() {
55 var pie = google.visualization.arrayToDataTable([
56 ['status_pemagange', 'Numbder'],
57 ['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>],
58 ['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>],]);
59 var header = {
60 slices: {0: {color: '#666666'}, 1:{color: '#006EFF'}}};
61 var piechart = new
google.visualization.PieChart(document.getElementById('piechart'));
62 piechart.draw(pie, header);
63 </script></head></div></div>

tampilan akhir sistem informasi untuk dashboard yang dapat dilihat pada .
Gambar 5. Tampilan Dashboard

5.3.4 Pengkodean Algoritme Tampilan Utama Data Pemagang
Pada tampilan awal menu data pemagang akan menampilkan data
pemagang dalam bentuk tabel yang terdiri dari kolom ID pemagang, nama, asal
instansi, e-mail, posisi magang, dan status pemagang (mahasiswa atau siswa/i
SMK). Selain itu dilengkapi fitur pendukung sistem informasi yang terdiri dari
tambah, ubah, hapus, dan lihat nilai pemagang (preview). Hasil dari pengkodean
pembangunan sistem informasi untuk tampilan utama data pemagang dijelaskan
pada .
Tabel 5. Kode Program Tampilan Utama Data Pemagang
data-magang.php
1 <div class="data">
2 <table id="tabelnya" class="table table-striped table-bordered"
3 data-plugin="dataTable" style="width:100%">
4 <thead>
5 <tr>
6 <th>ID</th>
7 <th>Nama Pemagang</th>
<th>Jenis Kelamin</th>
8 <th>Asal Instansi</th>
9 <th>Email</th>
10 <th>Status Pemagang</th>
11 <th>Posisi Magang</th>
12 <th>Aksi</th></tr></thead>
13 <tbody id="tabel-data">
14 <?php
15 $query = mysqli_query($connect, "SELECT id_pemohon, nama_pemohon,
16 jenis_kelamin, asal_instansi, email, status_pemagang, posisi_mgng
17 FROM tbl_intern");
18 foreach ($query as $key) { ?>
19 <tr>
20 <td><?= $key['id_pemohon']; ?></td>
<td><?= $key['nama_pemohon']; ?></td>
<td><?= $key['jenis_kelamin']; ?></td>
21 <td><?= $key['asal_instansi']; ?></td>
22 <td><?= $key['email']; ?></td>
23 <td><?= $key['status_pemagang']; ?></td>
24 <td><?= $key['posisi_mgng']; ?></td>
25 <td>
26 <a href="edit_data_magang.php?data=<?= $key['id_pemohon'];?>"
27 class="btn btn-success btn-sm">Edit</a>
28 <a href="perantara_delete.php?data=<?= $key['id_pemohon'];?>"
29 class="btn btn-danger btn-sm">Hapus</a>
30 <a href="preview_intern.php?data=<?= $key['id_pemohon']; ?>"
31 target="_blank" class="btn btn-info btn-
sm">Preview</a></button></td></tr></div>

tampilan akhir sistem informasi untuk menu “Data Pemagang” yang dapat dilihat
pada .
Gambar 5. Tampilan Antarmuka Menu Data Pemagang
5.3.5 Pengkodean Algoritme Tambah Data Pemagang

Pada proses tambah data pemagang, admin menuliskan data diri pemagang
yang terdiri dari nama, jenis kelamin, tempat dan tanggal lahir, asal instansi, e-
mail, nomor telepon, posisi magang, status pemagang (mahasiswa atau siswa/i
SMK), tanggal mulai dan selesai magang, dan dokumen pendukung (CV, portfolio,
dan surat pengantar dari universitas/sekolah). Apabila data diri dan dokumen
pendukung telah ditulis dengan lengkap, maka admin dapat menekan tombol
“Simpan” dan data berhasil tersimpan ke dalam database perusahaan. Namun,
jika data diri tidak ditulis dengan lengkap atau format dan ukuran dokumen
pendukung tidak sesuai ketentuan, maka data gagal terunggah dan tersimpan di
database perusahaan. Hasil dari pengkodean pembangunan sistem informasi
untuk tampilan fitur menambah data pemagang dijelaskan pada .
Tabel 5. Kode Program Tampilan Tambah Data Pemagang
add-magang.php
1 <form action="proses_add-magang.php" method="post"
Pemagang</label>
class="form-control m-input" required="required"
placeholder="Masukkan nama lengkap">
Kelamin</label>
6 <option value="Laki-Laki">Laki - Laki</option>
7 <option value="Perempuan">Perempuan</option></select></div></div>
Lahir</label>
control m-input" required="required" placeholder="Masukkan tempat
lahir">
id="tgl_lhr" required="required" placeholder="Masukkan tanggal
lahir">
Instansi</label>
class="form-control m-input" required="required"
placeholder="Masukkan instansi">
input" required="required" placeholder="Masukkan alamat email">
Telepon</label>
17 <input type="text" name="no_telepon" class="form-control"
required="required" placeholder="Masukkan nomor
telepon"></div></div></div>
Magang</label>
20 <option value="Content Writer">Content Writer</option>
21 <option value="Copywriter">Copywriter</option>
22 <option value="Web Developer">Web Developer</option>
23 <option value="Graphics Designer">Graphics Designer</option>
24 <option value="UI/UX Developer">UI/UX Developer</option>
25 <option value="Social Media Specialist">Social Media
Specialist</option>
26 <option value="Video Editing">Video Editing</option>
27 <option value="SEO Specialist">SEO
Specialist</option></select></div></div>
30 <option value="Mahasiswa">Mahasiswa</option>
31 <option value="Siswa/Siswi SMK">Siswa/Siswi
SMK</option></select></div></div>
type="date" id="mulai_intern" required="required">
type="date" id="selesai_intern" required="required"
placeholder="Masukkan tanggal akhir magang ">
36 <label for="exampleInputEmail1">* Unggah Dokumen
Pendukung</label><div></div>
37 <input type="file" class="custom-file-input" name="dokumen"
id="dokumen" required="required">
38 <label class="custom-file-label" for="customFile">Pilih
file</label></div></div>
39 <input type="submit" name="" value="Simpan" class="btn btn-
primary"></div></form>

tampilan akhir sistem informasi untuk fitur menambah data pemagang yang
dapat dilihat pada .
Gambar 5. Tampilan Antarmuka Tambah Data Pemagang
Hasil dari pengkodean pembangunan sistem informasi untuk proses fitur
menambah data pemagang dijelaskan pada .
Tabel 5. Kode Program Proses Tambah Data Pemagang
proses_add-magang.php
1 <?php
3 $q = mysqli_query($connect, "SELECT COUNT(nama_pemohon) AS total
FROM tbl_intern");
5 $id_pemohon = $ext['total'] + 1;
17 $rand = rand();
18 $ekstensi = array('rar', 'zip');
19 $filename = $_FILES['dokumen']['name'];
20 $ukuran = $_FILES['dokumen']['size'];
21 $ext = pathinfo($filename, PATHINFO_EXTENSION);
22 if (!in_array($ext, $ekstensi)) {
23 header("location:add-magang.php?alert=gagal_ekstensi");
24 } else {
25 //jika ukuran kurang dari 2mb
26 if ($ukuran < 2097152) {
27 $xx = $rand . '_' . $filename;
28 move_uploaded_file($FILES['dokumen']['tmp_name'], 'doc/' . $rand .
'' . $filename);
29 $query = "INSERT INTO tbl_intern (
nama_pemohon, jenis_kelamin, tempat_lhr, tgl_lhr, asal_instansi,
email, no_telepon, posisi_mgng, status_pemagang, mulai_intern,
selesai_intern, dokumen)
VALUES('" . $nama_pemohon . "', '" . $jenis_kelamin . "', '" .
$tempat_lhr . "', '" . $tgl_lhr . "', '" . $asal_instansi . "', '"
. $email . "', '" . $no_telepon . "', '" . $posisi_mgng . "', '" .
$status_pemagang . "', '" . $mulai_intern . "', '" .
$selesai_intern . "', '" . $xx . "')";
31 header("location:data-magang.php?alert=berhasil");
32 }else{
33 header("location:add-magang.php?alert=gagal_ukuran");}}
5.3.6 Pengkodean Algoritme Ubah Data Pemagang

Pada proses mengubah data pemagang, admin terlebih dahulu mencari data
pemagang yang akan diubah datanya dengan cara mengetikkan nama pemagang
pada kolom pencarian. Jika sudah menemukan nama pemagang yang dicari,
admin dapat menekan tombol “Ubah” yang selanjutnya akan diarahkan ke
formulir pengubahan data. Data yang bisa diubah adalah nama, jenis kelamin,
tempat dan tanggal lahir, asal instansi, e-mail, nomor telepon, posisi magang,
status pemagang (mahasiswa atau siswa/i SMK), tanggal mulai magang, dan
tanggal selesai magang. Jika dirasa sudah cukup melakukan pengubahan data,
admin dapat menekan tombol “Simpan”. Hasil dari pengkodean pembangunan
sistem informasi untuk tampilan fitur mengubah data pemagang dijelaskan
pada .
Tabel 5. Kode Program Tampilan Ubah Data Pemagang
edit_data_magang.php
1 <?php
2 $query = "SELECT id_pemohon, nama_pemohon, jenis_kelamin,
3 tempat_lhr, tgl_lhr, asal_instansi, email, no_telepon,
posisi_mgng, status_pemagang, mulai_intern, selesai_intern FROM
tbl_intern WHERE id_pemohon = '".$id_pemohon."'";
$ex = mysqli_query($connect, $query);
4 foreach ($ex as $key) {
5 ?>
6 <form action="proses_update_intern.php" method="post"
7 <label class="col-xl-3 col-lg-3 col-form-label">* ID
Pemagang</label>
8 <input type="text" name="id_pemohon" id="id_pemohon" class="form-
control m-input1" required="required" value="<?php echo
$key['id_pemohon']; ?>" readonly></label>
Pemagang</label>
class="form-control m-input" required="required" value="<?=
$key['nama_pemohon']; ?>">
Kelamin</label>
13 <option value="Laki-Laki" <?php if($key['jenis_kelamin']=="Laki-
Laki"){echo "selected";}else{} ; ?>>Laki-Laki</option>>Laki -
Laki</option>
14 <option value="Perempuan" <?php
if($key['jenis_kelamin']=="Perempuan"){echo "selected";}else{} ; ?
>>Perempuan</option></select>
Lahir</label>
control m-input" required="required" value="<?=
$key['tempat_lhr']; ?>">
id="tgl_lhr" required="required" value="<?= $key['tgl_lhr']; ?>">
Instansi</label>
$key['asal_instansi']; ?>">
input" required="required" value="<?= $key['email']; ?>">
Telepon</label>
24 <input type="text" name="no_telepon" id="no_telepon" class="form-
control m-input" required="required" placeholder="" value="<?=
$key['no_telepon']; ?>">
Magang</label>
27 <option value="Content Writer" <?php
if($key['posisi_mgng']=="Content Writer"){echo
"selected";}else{} ; ?>>Content Writer</option>
28 <option value="Copywriter"<?php
if($key['posisi_mgng']=="Copywriter"){echo "selected";}else{} ; ?
>>Copywriter</option>
29 <option value="Web Developer" <?php if($key['posisi_mgng']=="Web
Developer"){echo "selected";}else{} ; ?>>Web Developer</option>
30 <option value="Graphics Designer" <?php
if($key['posisi_mgng']=="Graphics Designer"){echo
"selected";}else{} ; ?>>Graphics Designer</option>
31 <option value="UI/UX Developer" <?php
if($key['posisi_mgng']=="UI/UX Developer"){echo "selected";}else{}
; ?>>UI/UX Developer</option>
32 <option value="Social Media Specialist" <?php
if($key['posisi_mgng']=="Social Media Specialist"){echo
"selected";}else{} ; ?>>Social Media Specialist</option>
33 <option value="Video Editing" <?php if($key['posisi_mgng']=="Video
Editing"){echo "selected";}else{} ; ?>>Video Editing</option>
34 <option value="SEO Specialist" <?php if($key['posisi_mgng']=="SEO
Specialist"){echo "selected";}else{} ; ?>>SEO
Specialist</option></select>
37 <option value="Mahasiswa" <?php
if($key['status_pemagang']=="Mahasiswa"){echo "selected";}else{} ;
?>>Mahasiswa</option>
38 <option value="Siswa/Siswi SMK" <?php
if($key['status_pemagang']=="Siswa/Siswi SMK"){echo
"selected";}else{} ; ?>>Siswa/Siswi SMK</option></select>
type="date" id="mulai_intern" required="required" value="<?=
$key['mulai_intern']; ?>">
type="date" id="selesai_intern" required="required" value="<?=
$key['selesai_intern']; ?>">
43 <input type="submit" name="" value="Update Data" class="btn btn-
primary" id="btn-edit">
44 <?php } ?> </div>

tampilan akhir sistem informasi untuk fitur mengubah data pemagang yang
Gambar 5. Tampilan Antarmuka Ubah Data Pemagang

mengubah data pemagang dijelaskan pada .
Tabel 5. Kode Program Proses Ubah Data Pemagang
proses_update_intern.php
1 <?php
3 $id_pemohon = $_POST['id_pemohon'];
15 $query = "UPDATE tbl_intern
16 SET nama_pemohon = '".$nama_pemohon."',
17 jenis_kelamin = '".$jenis_kelamin."',
18 tempat_lhr = '".$tempat_lhr."',
19 tgl_lhr = '".$tgl_lhr."',
20 asal_instansi = '".$asal_instansi."',
21 email = '".$email."',
22 no_telepon = '".$no_telepon."',
23 posisi_mgng = '".$posisi_mgng."',
24 status_pemagang = '".$status_pemagang."',
25 mulai_intern = '".$mulai_intern."',
26 selesai_intern = '".$selesai_intern."'
27 WHERE id_pemohon = '".$id_pemohon."'";
29 if($ex){
30 header("location:data-magang.php?alert=berhasil");
31 }else{
32 header("location:data-magang.php?alert=gagal");
33 }
34 ?>
5.3.7 Pengkodean Algoritme Hapus Data Pemagang

Pada proses menghapus data pemagang, admin terlebih dahulu mencari
data pemagang yang akan dihapus datanya dengan cara mengetikkan nama
pemagang pada kolom pencarian. Jika sudah menemukan nama pemagang yang
dicari, admin dapat menekan tombol “Hapus”. Setelah itu, admin akan
ditampilkan pop-up konfirmasi hapus data. Jika admin memilih tombol “Iya”,
maka data akan dihapus dari database dan selanjutnya admin akan diarahkan ke
halaman utama menu data pemagang. Jika admin memilih tombol “Tidak”, maka
data tidak terhapus dari database. Hasil dari pengkodean pembangunan sistem
informasi untuk tampilan fitur menghapus data pemagang dijelaskan pada .
Tabel 5. Kode Program Tampilan Hapus Data Pemagang
perantara_delete_nilai.php
1 <?php
2 extract($_GET);
3 $id_pemohon = $_GET['data'];?>
4 <div class="modal fade" id="modalHapus" tabindex="-1"
role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
5 <h5 class="modal-title">Konfirmasi Hapus</h5>
6 <button type="button" class="close" data-dismiss="modal" aria-
label="Close">
7 <span aria-hidden="true">×</span></button></div>
8 <div class="modal-body">Apakah anda yakin akan menghapus data
dengan ID <text id="id_pemohon"> <?= $id_pemohon; ?></text> ?
</div>
9 <button type="button" class="btn btn-secondary" data-
dismiss="modal" id="tidak">Tidak</button>
10 <button type="button" class="btn btn-primary" id="ya">Ya</button>
11 </div></div></div></div>
12 <script>
13 $(document).ready(function(){
14 $("#modalHapus").modal();
15 });
16 $("#ya").click(function(){
17 $.ajax({
18 url: 'proses_delete_intern.php',
19 type: 'post',
20 data: {
21 id_pemohon: $("#id_pemohon").text()
22 },
23 success: function(data){
24 window.location.href = "data-magang.php";
25 //alert("Data berasil dihapus");
26 },
27 error: function(xhr){
28 alert("gagal");}})})
29 $("#tidak").click(function(){
30 window.location.href = "data-magang.php";})</script>

tampilan akhir sistem informasi untuk fitur menghapus data pemagang yang
Gambar 5. Tampilan Antarmuka Hapus Data Pemagang

menghapus data pemagang dijelaskan pada .
Tabel 5. Kode Program Proses Hapus Data Pemagang
proses_delete_nilai.php
1 <?php
4 $query = "DELETE FROM tbl_intern WHERE id_pemohon='".
$id_pemohon."'";
6 ?>
5.3.8 Pengkodean Algoritme Tampil Data Pemagang

Pada proses menampilkan data pemagang (preview), admin terlebih dahulu
mencari data pemagang yang akan dilihat datanya dengan cara mengetikkan
nama pemagang pada kolom pencarian. Jika sudah menemukan nama pemagang
yang dicari, admin dapat menekan tombol “Preview” yang selanjutnya akan
diarahkan ke halaman yang menampilkan data pemagang dalam bentuk formulir.
Hasil dari pengkodean pembangunan sistem informasi untuk tampilan fitur
menampilkan data pemagang dijelaskan pada .
Tabel 5. Kode Program Tampil Data Pemagang
preview_intern.php
1 <div class="m-portlet__body">
2 <?php
3 $query = "SELECT * FROM tbl_intern WHERE id_pemohon='".
4 $id_pemohon."'";
6 foreach ($ex as $key) { ?>
7 <form action="proses_update_nilai.php" method="post">
8 <label class="col-xl-3 col-lg-3 col-form-label">ID
Pemagang</label>
9 <label class="col-xl-3 col-lg-3 col-form-label">Nama
Pemagang</label>
10 <?php echo $key['nama_pemohon']; ?></label>
11 <label class="col-xl-3 col-lg-3 col-form-label">Jenis
Kelamin</label>
12 <?php echo $key['jenis_kelamin']; ?></label>
13 <label class="col-xl-3 col-lg-3 col-form-label">Tempat
Lahir</label>
14 <?php echo $key['tempat_lhr']; ?></label>
15 <label class="col-xl-3 col-lg-3 col-form-label">Tanggal Lahir
(dd/mm/yyyy)</label>
16 <?php echo date_format(new DateTime($key['tgl_lhr']), 'd-m-Y');?
></label></div></div>
17 <label class="col-xl-3 col-lg-3 col-form-label">Asal
Instansi</label>
18 <?php echo $key['asal_instansi']; ?></label>
19 <label class="col-xl-3 col-lg-3 col-form-label">Email</label>
20 <?php echo $key['email']; ?></label>
21 <label class="col-xl-3 col-lg-3 col-form-label">Nomor
Telepon</label>
22 <?php echo $key['no_telepon']; ?></label>
23 <label class="col-xl-3 col-lg-3 col-form-label">Posisi
Magang</label>
24 <?php echo $key['posisi_mgng']; ?></label>
25 <label class="col-xl-3 col-lg-3 col-form-label">Status
Pemagang</label>
26 <?php echo $key['status_pemagang']; ?></label>
27 <label class="col-xl-3 col-lg-3 col-form-label">Mulai magang
28 <?php echo date_format(new DateTime($key['mulai_intern']), 'd-m-
Y'); ?></label>
29 <label class="col-xl-3 col-lg-3 col-form-label">Selesai Magang
30 <?php echo date_format(new DateTime($key['selesai_intern']), 'd-m-
Y'); ?></label></form><?php } ?></div>

tampilan akhir sistem informasi untuk fitur menampilan data lengkap pemagang
yang dapat dilihat pada .
Gambar 5. Tampilan Antarmuka Tampil Data Pemagang
5.3.9 Pengkodean Algoritme Tampilan Utama Nilai Pemagang

Pada tampilan awal menu nilai pemagang, admin akan ditampilkan nilai
pemagang dalam bentuk tabel yang terdiri dari kolom ID pemagang, nama
pemagang, nilai presensi, nilai keterampilan, nilai sikap, nilai pengetahuan, dan
nilai kinerja. Selain itu dilengkapi fitur pendukung sistem informasi yang terdiri
dari tambah, ubah, hapus, dan cetak nilai pemagang. Hasil dari pengkodean
pembangunan sistem informasi untuk tampilan laman nilai pemagang dijelaskan
pada .
Tabel 5. Kode Program Tampilan Utama Nilai Pemagang
data-nilai.php
1 <?php
3 session_start();
4 if(!isset($_SESSION['id_admin'])){
5 header("location:login.php");}?>
6 <div class="nilai">
7 <table id="tbl-data-nilai" class="table table-striped table-
bordered" data-plugin="dataTable" style="width:100%">
8 <thead>
9 <th>Nama Pemagang</th>
10 <th>Nilai Persensi</th>
11 <th>Nilai Keterampilan</th>
12 <th>Nilai Sikap</th>
13 <th>Nilai Pengetahuan</th>
14 <th>Nilai Kinerja</th>
15 <th>Aksi</th></tr></thead>
17 <?php
18 $query = mysqli_query($connect, "SELECT tabel_nilai.id_pemohon,
tbl_intern.nama_pemohon, tabel_nilai.nilai_persensi,
tabel_nilai.nilai_keterampilan, tabel_nilai.nilai_sikap,
tabel_nilai.nilai_pengetahuan, tabel_nilai.nilai_kinerja FROM
tabel_nilai INNER JOIN tbl_intern ON
tabel_nilai.id_pemohon=tbl_intern.id_pemohon");
foreach ($query as $key) {?>
19 <tr>
20 <td><?= $key['id_pemohon']; ?></td>
21 <td><?= $key['nama_pemohon']; ?></td>
22 <td><?= $key['nilai_persensi']; ?></td>
23 <td><?= $key['nilai_keterampilan']; ?></td>
24 <td><?= $key['nilai_sikap']; ?></td>
25 <td><?= $key['nilai_pengetahuan']; ?></td>
26 <td><?= $key['nilai_kinerja']; ?></td>
27 <td>
28 <a href="edit_nilai.php?data=<?= $key['id_pemohon'];?>" class="btn
btn-success btn-sm">Edit</a>
29 <a href="perantara_delete_nilai.php?data=<?= $key['id_pemohon'];?
>" class="btn btn-danger btn-sm">Hapus</a>
30 <a href="print_nilai.php?data=<?= $key['id_pemohon']; ?>"
target="_blank" class="btn btn-warning btn-sm">Cetak</a>
31 </button></td></tr><?php}?></tbody></table></div>
34 $("#tbl-data-nilai").dataTable();});</div>

tampilan akhir sistem informasi untuk menu “Nilai Pemagang” yang dapat dilihat
pada .
Gambar 5. Tampilan Antarmuka Menu Nilai Pemagang

5.3.10 Pengkodean Algoritme Tambah Nilai Pemagang
Pada proses menambah nilai pemagang, admin memasukkan nilai pemagang
yang terdiri dari nilai presensi, keterampilan, sikap, pengetahuan, dan kinerja.
Apabila nilai-nilai telah ditulis dengan lengkap, maka admin dapat menekan
tombol Simpan dan nilai berhasil tersimpan ke dalam database perusahaan.
Namun, jika nilai tidak ditulis dengan lengkap, maka nilai gagal terunggah dan
gagal tersimpan di database perusahaan. Hasil dari pengkodean pembangunan
sistem informasi untuk tampilan fitur menambah nilai pemagang dijelaskan pada
.
Tabel 5. Kode Program Tampilan Tambah Nilai Pemagang
add-nilai.php
1 <form action="proses_penilaian.php" method="post"
3 Pemagang</label>
<span class="m-form__help1">Masukkan ID
4 Pemagang</span></div></div>
5 <label class="col-xl-3 col-lg-3 col-form-label">* Nilai
Presensi</label>
6 <span class="m-form__help">Masukkan nilai presensi</span></div>
<label class="col-xl-3 col-lg-3 col-form-label">* Nilai
7 Keterampilan</label>
8 <span class="m-form__help">Masukkan nilai
keterampilan</span></div>
10 Sikap</label>
<span class="m-form__help">Masukkan nilai sikap</span></div>
<label class="col-xl-3 col-lg-3 col-form-label">* Nilai
11 Pengetahuan</label>
12 <span class="m-form__help">Masukkan nilai pengetahuan</span></div>
Kinerja</label>
14 <span class="m-form__help">Masukkan nilai kinerja</span></div>
15 <input type="submit" name="" value="Simpan" class="btn btn-
primary" id="btn-edit"></form>

tampilan akhir sistem informasi untuk fitur tambah nilai pemagang yang dapat
dilihat pada .
Gambar 5. Tampilan Antarmuka Tambah Nilai Pemagang
menambah nilai pemagang dijelaskan pada .
Tabel 5. Kode Program Proses Tambah Nilai Pemagang
proses_penilaian.php
1 <?php
4 $nilai_persensi = $_POST['nilai_persensi'];
5 $nilai_keterampilan = $_POST['nilai_keterampilan'];
6 $nilai_sikap = $_POST['nilai_sikap'];
7 $nilai_pengetahuan = $_POST['nilai_pengetahuan'];
8 $nilai_kinerja = $_POST['nilai_kinerja'];
9 $query = "INSERT INTO tabel_nilai VALUES(
'".$id_pemohon."', '".$nilai_persensi."', '".
$nilai_keterampilan."', '".$nilai_sikap."','".
$nilai_pengetahuan."','".$nilai_kinerja."')";
$ex = mysqli_query($connect, $query);
10 if($ex){
11 header("location:data-nilai.php?alert=berhasil");
12 }else{
13 header("location:data-nilai.php?alert=gagal");
14 }?>
15
5.3.11 Pengkodean Algoritme Ubah Nilai Pemagang

Pada proses mengubah nilai pemagang, admin terlebih dahulu mencari data
pemagang yang akan diubah nilainya dengan cara mengetikkan nama pemagang
admin dapat menekan tombol Ubah yang selanjutnya akan diarahkan ke formulir
mengubah nilai. Nilai yang bisa diubah adalah nilai presensi, keterampilan, sikap,
pengetahuan, dan kinerja. Jika dirasa sudah cukup melakukan pengubahan nilai,
admin dapat menekan tombol Simpan. Hasil dari pengkodean pembangunan
sistem informasi untuk tampilan fitur mengubah nilai pemagang dijelaskan pada .
Tabel 5. Kode Program Tampilan Ubah Nilai Pemagang
edit_nilai.php
1 <?php
2 $query = "SELECT tabel_nilai.id_pemohon, tbl_intern.nama_pemohon,
tabel_nilai.nilai_persensi, tabel_nilai.nilai_keterampilan,
tabel_nilai.nilai_sikap, tabel_nilai.nilai_pengetahuan,
tabel_nilai.nilai_kinerja FROM tabel_nilai INNER JOIN tbl_intern
ON tabel_nilai.id_pemohon=tbl_intern.id_pemohon WHERE
tabel_nilai.id_pemohon = '".$id_pemohon."'";
5 ?>
6 <form action="proses_update_nilai.php" method="post"
Pemagang</label>
8 <input type="text" name="id_pemohon" id="id_pemohon" class="form-
control m-input1" required="required" value="<?php echo
$key['id_pemohon']; ?>" readonly></label>
Pemagang</label>
Presensi</label>
11 <span class="m-form__help">Masukkan nilai
presensi</span></div></div>
12 <div class="form-group m-form__group row">
Keterampilan</label>
14 <span class="m-form__help">Masukkan nilai keterampilan</span>
Sikap</label>
16 <span class="m-form__help">Masukkan nilai sikap</span>
Pengetahuan</label>
18 <span class="m-form__help">Masukkan nilai pengetahuan</span>
Kinerja</label>
20 <span class="m-form__help">Masukkan nilai kinerja</span>
primary" id="btn-edit"></div></form></div>
22 <?php } ?>

tampilan akhir sistem informasi untuk fitur mengubah nilai pemagang yang
Gambar 5. Tampilan Antarmuka Ubah Nilai Pemagang
mengubah nilai pemagang dijelaskan pada .
Tabel 5. Kode Program Proses Ubah Nilai Pemagang
proses_update_nilai.php
1 <?php
4 $nilai_persensi = $_POST['nilai_persensi'];
5 $nilai_keterampilan = $_POST['nilai_keterampilan'];
6 $nilai_sikap = $_POST['nilai_sikap'];
7 $nilai_pengetahuan = $_POST['nilai_pengetahuan'];
8 $nilai_kinerja = $_POST['nilai_kinerja'];
9 $query = "UPDATE tabel_nilai
SET nilai_persensi = '".$nilai_persensi."',nilai_keterampilan =
'".$nilai_keterampilan."',nilai_sikap = '".
$nilai_sikap."',nilai_pengetahuan = '".$nilai_pengetahuan."',
nilai_kinerja = '".$nilai_kinerja."'WHERE id_pemohon = '".
$id_pemohon."'";
11 if($ex){
12 header("location:data-nilai.php?alert=berhasil");
13 }else{
14 header("location:data-nilai.php?alert=gagal");
15 }?>
5.3.12 Pengkodean Algoritme Hapus Nilai Pemagang

Pada proses menghapus nilai pemagang, admin terlebih dahulu mencari
data pemagang yang akan dihapus nilainya dengan cara mengetikkan nama
pemagang pada kolom pencarian. Jika sudah menemukan nama pemagang yang
dicari, admin dapat menekan tombol Hapus. Setelah itu, admin akan ditampilkan
pop-up konfirmasi hapus data nilai. Jika admin memilih tombol “Iya”, maka data
nilai akan dihapus dari database dan selanjutnya admin akan diarahkan ke
halaman utama menu data pemagang. Jika admin memilih tombol “Tidak”, maka
data nilai tidak terhapus dari database. Hasil dari pengkodean pembangunan
sistem informasi untuk tampilan fitur menghapus nilai pemagang dijelaskan pada
.
Tabel 5. Kode Program Tampilan Hapus Nilai Pemagang
perantara_delete_nilai.php
1 <?php
2 extract($_GET);
3 $id_pemohon = $_GET['data'];?>
5 <div class="modal-dialog" role="document">
6 <div class="modal-content">
7 <div class="modal-header">
label="Close">
dengan ID <text id="id_pemohon"><?= $id_pemohon; ?></text> ?</div>
12 <div class="modal-footer">
14 <button type="button" class="btn btn-primary"
id="ya">Ya</button></div></div></div></div>
15 <script>
17 $("#modalHapus").modal();});
19 $.ajax({
20 url: 'proses_delete_nilai.php',
21 type: 'post',
22 data: {
23 id_pemohon : $("#id_pemohon").text()},
25 window.location.href = "data-nilai.php";},
27 alert("gagal");}})})
29 window.location.href = "data-nilai.php";})</script>

tampilan akhir sistem informasi untuk fitur menghapus nilai pemagang yang
Gambar 5. Tampilan Antarmuka Hapus Nilai Pemagang

menghapus nilai pemagang dijelaskan pada .
Tabel 5. Kode Program Proses Hapus Nilai Pemagang
1 <?php
4 $query = "DELETE FROM tabel_nilai WHERE id_pemohon='".
$id_pemohon."'";
6 ?>
5.3.13 Pengkodean Algoritme Cetak Nilai Pemagang
Pada proses mencetak nilai pemagang, admin terlebih dahulu mencari data
pemagang yang akan dicetak nilainya dengan cara mengetikkan nama pemagang
admin dapat menekan tombol Cetak. Admin akan diarahkan ke proses
pencetakan nilai, lalu tekan Print. Dokumen penilaian pemagang akan tersimpan
ke dalam laptop/komputer admin dengan format dokumen PDF. Hasil dari
pengkodean pembangunan sistem informasi untuk proses fitur mencetak nilai
Tabel 5. Kode Program Cetak Nilai Pemagang
print_nilai.php
2 window.print(); </script>
3 <?php
4 $no = 1;
5 $query = "SELECT tbl_intern.id_pemohon, tbl_intern.nama_pemohon,
6 tbl_intern.status_pemagang, tbl_intern.posisi_mgng,
7 tabel_nilai.nilai_persensi, tabel_nilai.nilai_keterampilan,
8 tabel_nilai.nilai_sikap, tabel_nilai.nilai_pengetahuan,
9 tabel_nilai.nilai_kinerja FROM tbl_intern INNER JOIN tabel_nilai
10 ON tbl_intern.id_pemohon=tabel_nilai.id_pemohon WHERE
11 tbl_intern.id_pemohon='".$id_pemohon."'";
13 foreach ($ex as $key) { ?>

tampilan akhir sistem informasi untuk fitur mencetak nilai pemagang yang dapat
dilihat pada .
Gambar 5. Tampilan Antarmuka Cetak Nilai Pemagang
5.3.14 Pengkodean Algoritme Tampilan Utama Master Data

Pada tampilan awal menu master data, admin akan ditampilkan data instansi
yang menaungi mahasiswa dan siswa magang dalam bentuk tabel yang terdiri
dari kolom nama instansi, alamat instansi, nomor telepon instansi, dan alamat e-
mail instansi. Selain itu dilengkapi fitur pendukung sistem informasi yang terdiri
dari tambah, ubah, dan hapus nilai pemagang. Hasil dari pengkodean
pembangunan sistem informasi untuk tampilan laman master data dijelaskan
pada .
Tabel 5. Kode Program Tampilan Utama Master Data
master-data.php
1 <div class="data">
2 <table id="tabelnya" class="table table-striped table-bordered"
data-plugin="dataTable" style="width:100%">
3 <thead>
4 <tr>
5 <th>ID</th>
6 <th>Nama Instansi</th>
7 <th>Alamat Instansi</th>
8 <th>Nomor Telepon</th>
9 <th>Email</th>
10 <th>Aksi</th>
11 </tr></thead>
13 <?php
14 $query = mysqli_query($connect, "SELECT id_instansi,
nama_instansi, alamat, no_tel_instansi, email FROM tbl_master");
15 foreach ($query as $key) {?>
16 <tr>
17 <td><?= $key['id_instansi']; ?></td>
18 <td><?= $key['nama_instansi']; ?></td>
19 <td><?= $key['alamat']; ?></td>
20 <td><?= $key['no_tel_instansi']; ?></td>
21 <td><?= $key['email']; ?></td>
22 <td>
23 <a href="edit_data_master.php?data=<?= $key['id_instansi'];?>"
class="btn btn-success btn-sm">Edit</a>
24 <a href="perantara_delete_master.php?data=<?=
$key['id_instansi'];?>" class="btn btn-danger btn-sm">Hapus</a>
25 </button></td></tr><?php}?>
26 </tbody></table></div>
29 $("#tabelnya").dataTable();
30 }); </script></div>

tampilan akhir sistem informasi untuk menu “Master Data” yang dapat dilihat
pada .
Gambar 5. Tampilan Antarmuka Menu Master Data
5.3.15 Pengkodean Algoritme Tambah Data Master

Pada proses menambah data master, admin memasukkan data instansi yang
terdiri dari nama, alamat, nomor telepon, dan alamat e-mail instansi yang
menaungi mahasiswa dan siswa magang. Apabila data telah ditulis dengan
lengkap, maka admin dapat menekan tombol Simpan dan data berhasil
tersimpan ke dalam database perusahaan. Namun, jika data tidak ditulis dengan
lengkap, maka data gagal terunggah dan gagal tersimpan di database
perusahaan. Hasil dari pengkodean pembangunan sistem informasi untuk
tampilan fitur menambah data master dijelaskan pada .
Tabel 5. Kode Program Tampilan Tambah Data Master
add-master.php
1 <form action="proses_add-master.php" method="post"
3 Instansi</label>
<option value="">-- Pilih Instansi --</option>
4 <?php
5 $sql = "SELECT DISTINCT asal_instansi FROM tbl_intern";
$ex = mysqli_query($connect, $sql);
6 foreach ($ex as $key){
7 ?>

8 <option value="<?=$key['asal_instansi']?>"><?=$key['asal_instansi']?
9 ></option>
10 <?php
11 }?>
12 <label class="col-xl-3 col-lg-3 col-form-label">* Alamat
Instansi</label>
13 <span class="m-form__help">Masukkan alamat instansi</span></div></div>
15 Telepon</label>
16 <span class="help">Masukkan nomor telepon</span></div>
<label class="col-xl-3 col-lg-3 col-form-label">* Email</label>
17 <span class="m-form__help">Masukkan alamat email</span></div></div>
18 <input type="submit" name="" id="simpan" value="Simpan" class="btn
btn-primary"></form>
tampilan akhir sistem informasi untuk fitur menambah data master yang dapat
dilihat pada .
Gambar 5. Tampilan Antarmuka Tambah Data Master

menambah data master dijelaskan pada .
Tabel 5. Kode Program Proses Tambah Data Master
proses_add-master.php
1 <?php
3 $q = mysqli_query($connect, "SELECT COUNT(nama_instansi) AS total
FROM tbl_master");
5 $id_instansi = $ext['total']+1;
6 $nama_instansi = $_POST['nama_instansi'];
7 $alamat = $_POST['alamat'];
8 $no_tel_instansi = $_POST['no_tel_instansi'];
10 $query = "INSERT INTO tbl_master VALUES($id_instansi,'".
$nama_instansi."','".$alamat."','".$no_tel_instansi."','".
$email."')";
12 if($ex){
13 header("location:master-data.php?alert=berhasil");
14 }
15 else{
16 header("location:master-data.php?alert=gagal");
17 }?>
5.3.16 Pengkodean Algoritme Ubah Data Master

Pada proses mengubah data master, admin terlebih dahulu mencari data
instansi yang akan diubah dengan cara mengetikkan nama instansi pada kolom
pencarian. Jika sudah menemukan nama instansi yang dicari, admin dapat
menekan tombol Ubah yang selanjutnya akan diarahkan ke formulir mengubah
data instansi. Data yang bisa diubah adalah nama, alamat, nomor telepon, dan
alamat e-mail instansi yang menaungi mahasiswa dan siswa magang. Jika dirasa
sudah cukup melakukan pengubahan data, admin dapat menekan tombol
Simpan. Hasil dari pengkodean pembangunan sistem informasi untuk tampilan
fitur mengubah data master dijelaskan pada .
Tabel 5. Kode Program Tampilan Ubah Data Master
edit_data_master.php
1 <?php
2 $query = "SELECT id_instansi, nama_instansi, alamat,
no_tel_instansi, email FROM tbl_master WHERE id_instansi = '".
$id_instansi."'";
5 ?>
6 <form action="proses_update_master.php" method="post"
Instansi</label>
8 <input type="text" name="id_instansi" id="id_instansi"
class="form-control m-input1" required="required" value="<?php
echo $key['id_instansi']; ?>" readonly></label></div></div>
Instansi</label>
10 <input type="text" name="nama_instansi" id="nama_instansi"
$key['nama_instansi']; ?>">
11 <span class="m-form__help">Masukkan nama instansi</span></div>
12 <label class="col-xl-3 col-lg-3 col-form-label">* Alamat
Instansi</label>
13 <input type="text" name="alamat" id="alamat" class="form-control
m-input" required="required" value="<?= $key['alamat']; ?>">
14 <span class="m-form__help">Masukkan alamat instansi</span></div>
Telepon</label>
16 <input type="text" name="no_tel_instansi" id="no_tel_instansi"
class="form-control m-input" required="required" placeholder=""
value="<?= $key['no_tel_instansi']; ?>">
17 <span class="help">Masukkan nomor telepon</span></div>
19 <div class="col-xl-9 col-lg-9">
20 <input type="text" name="email" id="email" class="form-control m-
input" required="required" value="<?= $key['email']; ?>">
21 <span class="m-form__help">Masukkan email instansi</span></div>
primary" id="btn-edit"><?php } ?>

tampilan akhir sistem informasi untuk fitur mengubah data master yang dapat
dilihat pada .
Gambar 5. Tampilan Antarmuka Ubah Data Master
mengubah data master dijelaskan pada .
Tabel 5. Kode Program Proses Ubah Data Master
proses_update_master.php
1 <?php
3 $id_instansi = $_POST['id_instansi'];
4 $nama_instansi = $_POST['nama_instansi'];
5 $alamat = $_POST['alamat'];
6 $no_tel_instansi = $_POST['no_tel_instansi'];
8 $query = "UPDATE tbl_master
SET nama_instansi = '".$nama_instansi."',
alamat = '".$alamat."',
no_tel_instansi = '".$no_tel_instansi."',
email = '".$email."'
WHERE id_instansi = '".$id_instansi."'
";
10 if($ex){
11 header("location:master-data.php?alert=berhasil");
12 }else{
13 header("location:master-data.php?alert=gagal");
14 }?>
5.3.17 Pengkodean Algoritme Hapus Data Master

Pada proses menghapus data master, admin terlebih dahulu mencari data
pemagang yang akan dihapus datanya dengan cara mengetikkan nama instansi
pada kolom pencarian. Jika sudah menemukan nama instansi yang dicari, admin
dapat menekan tombol Hapus. Setelah itu, admin akan ditampilkan pop-up
konfirmasi hapus data. Jika admin memilih tombol “Iya”, maka data akan dihapus
dari database dan selanjutnya admin akan diarahkan ke halaman utama menu
master data. Jika admin memilih tombol “Tidak”, maka data tidak terhapus dari
database. Hasil dari pengkodean pembangunan sistem informasi untuk tampilan
fitur menghapus data master dijelaskan pada .
Tabel 5. Kode Program Tampilan Hapus Data Master
perantara_delete_master.php
1 <?php
3 session_start();
5 header("location:login.php");}
6 extract($_GET);
7 $id_instansi = $_GET['data'];?>
9 <div class="modal-dialog" role="document">
10 <div class="modal-content">
11 <div class="modal-header">
label="Close">
dengan ID <text id="id_instansi"><?= $id_instansi; ?></text>?
</div>
16 <div class="modal-footer">
18 <button type="button" class="btn btn-primary" id="ya">Ya</button>
19 </div></div></div></div>
20 <script>
22 $("#modalHapus").modal(); });
24 $.ajax({
25 url: 'proses_delete_master.php',
26 type: 'post',
27 data: {
28 id_instansi : $("#id_instansi").text()},
30 window.location.href = "master-data.php";},
32 alert("gagal"); }})})
34 window.location.href = "master-data.php";
35 }) </script>

tampilan akhir sistem informasi untuk fitur menghapus data master yang dapat
dilihat pada .
Gambar 5. Tampilan Antarmuka Hapus Data Master
menghapus data master dijelaskan pada .
Tabel 5. Kode Program Proses Hapus Data Master
proses_delete_master.php
1 <?php
3 $id_instansi = $_POST['id_instansi'];
4 $query = "DELETE FROM tbl_master WHERE id_instansi='".
$id_instansi."'";
6 ?>
5.3.18 Pengkodean Algoritme Cetak Sertifikat

Pada menu cetak sertifikat, admin akan diarahkan ke halaman sistem
informasi yang menampilkan format sertifikat. Lalu admin dapat menekan
tombol Cetak. Dokumen sertifikat yang ditujukan untuk pemagang ini akan
tersimpan ke dalam laptop/komputer admin dengan format dokumen PDF. Hasil
dari pengkodean pembangunan sistem informasi untuk proses fitur mencetak
sertifikat dijelaskan pada .
Tabel 5. Kode Program Tampilan Cetak Sertifikat
sertif.php
1 <?php
3 session_start();
5 header("location:login.php"); }?>
6 <div class="sertif">
7 <img id="sertif"
src="assets/app/media/img/logos/sertif.jpg"></div>
8 <button class="btn-cetak" onclick="location.href='sertif.pdf'">
9 <i class="fa fa-print"></i> Cetak</button>
tampilan akhir sistem informasi untuk fitur mencetak sertifikat yang dapat dilihat
pada .
Gambar 5. Tampilan Antarmuka Cetak Sertifikat
5.3.19 Pengkodean Algoritme Logout

Pada proses logout, admin harus berada di dalam sistem informasi. Jika
admin telah melaksanakan serangkaian transaksi pada sistem, maka bisa
langsung menekan tombol Logout yang berada di dalam hamburger menu bagian
bawah. Admin akan langsung keluar dari sistem informasi. Hasil dari pengkodean
pembangunan sistem informasi untuk proses fungsi logout dijelaskan pada .
Tabel 5. Kode Program Proses Logout
remove_cookie.php
1 <?php
3 session_start();
4 $_SESSION['id_admin'] = '';
5 unset($_SESSION['id_admin']);
6 session_unset();
7 session_destroy();
8 header("location: login.php");?>

tampilan akhir sistem informasi untuk fitur logout yang dapat dilihat pada .
Gambar 5. Tampilan Antarmuka Logout
5.4 Pengujian (Testing)

Setelah proses pengembangan sistem telah selesai, sistem informasi harus
melewati tahap pengujian. Tujuan tahap pengujian adalah untuk mengetahui
sejauh mana fungsi-fungsi sistem informasi dapat bekerja dan sebagai langkah
antisipasi dari kemungkinan munculnya gangguan atau error sebelum sistem
resmi digunakan. Pada tahap ini, sistem informasi diuji dengan dua metode
pengujian, yaitu pengujian whitebox jenis Basis Path dengan perhitungan
Cyclomatic Complexity dan pengujian blackbox jenis State Transition Testing dari
stakeholder.
5.4.1 Pengujian Whitebox

Pada proses pengujian dengan metode whitebox testing, sistem informasi
akan diuji dengan teknik Basis Path dan perhitungan Cyclomatic Complexity.
Teknik tersebut digunakan untuk mengukur ukuran kuantitatif dan kompleksitas
program berdasarkan logika pada kode pemrograman. Teknik tersebut menguji
aliran kontrol logika pemrograman dengan bantuan flow graph. Hal pertama
yang dilakukan adalah merumuskan alur program dengan menggunakan
pseudocode kode program.
5.4.1.1 Fungsi Pendaftaran Pemagang
Kode program untuk proses pendaftaran pemagang akan dirumuskan
menjadi pseudocode untuk keperluan pengujian whitebox. Pseudocode fungsi
pendaftaran pemagang dijelaskan pada .
Tabel 5. Pseudocode Pendaftaran Pemagang
proses_daftar.php
Node Algoritma
1 Mulai
2 koneksi database
3 q  menampilkan jumlah pemagang dari tabel tbl_intern
4 memanggil data pemagang hasil masukan calon pemagang pada
proses pendaftaran
5 jika dokumen bukan rar/zip maka
6 data gagal disimpan ke database
7 jika ukuran dokumen kurang dari 2MB
8 xx  cek dokumen
9 query  memasukkan data-data pemagang ke database
10 hasil  data berhasil disimpan
11 data gagal disimpan
12 selesai
13 selesai
Setelah pseudocode dibuat, maka tahap selanjutnya adalah pembuatan

flowgraph. Flowgraph akan digambarkan pada .
Gambar 5. Flowgraph Pendaftaran Pemagang

Berdasarkan flowgraph yang telah dibuat, langkah selanjutnya adalah
menghitung Cyclometic Complexity dengan rumus:
V(G) = Jumlah edge – jumlah node + 2 = 14 – 13 + 2 = 3
V(G) = Jumlah predicated node + 1 = 2 + 1 = 3
V(G) = Jumlah region = 3
Berdasarkan flowgraph yang telah dibuat akan menghasilkan jalur-jalur
independen, yaitu:
1. 1-2-3-4-5-6-13
2. 1-2-3-4-5-7-8-9-10-12-13
3. 1-2-3-4-5-7-11-12-13
5.4.1.2 Fungsi Login
Kode program untuk proses login akan dirumuskan menjadi pseudocode
untuk keperluan pengujian whitebox. Pseudocode fungsi login dijelaskan pada .
Tabel 5. Pseudocode Login
proses_login.php
Node Algoritma
1 Mulai
2 memulai session
3 koneksi database
4 memanggil data admin berupa ID dan password dari database
5 query  menampilkan semua data dari tabel tbl_admin berdasarkan
ID dan password pada database
6 ex  query
7 jika ex  1 maka
8 admin berhasil masuk ke dashboard
9 login gagal
10 selesai
Setelah pseudocode dibuat, maka tahap selanjutnya adalah pembuatan

Gambar 5. Flowgraph Login
independen, yaitu:
1. 1-2-3-4-5-6-7-8-10
2. 1-2-3-4-5-6-7-9-10
5.4.1.3 Fungsi Dashboard
Kode program untuk dashboard akan dirumuskan menjadi pseudocode
untuk keperluan pengujian whitebox. Pseudocode fungsi dashboard dijelaskan
pada .
Tabel 5. Pseudocode Dashboard
dashboard.php
Node Algoritma
1 mulai
2 query  menampilkan jumlah pemagang ketika
3 status_pemagang  “Siswa/Siswi SMK”
4 status_pemagang  “Mahasiswa”
5 dari tabel tbl_intern pada database
6 result  query dengan i  0
7 while (row  result) {
8 label  row dari status pemagang
count  row dari jumlah pemagang
i  i+1
9 selesai
Setelah pseudocode dibuat maka tahap selanjutnya adalah pembuatan

Gambar 5. Flowgraph Dashboard

independen, yaitu:
1. 1-2-3-4-5-6-7-8-7-9
2. 1-2-3-4-5-6-7-9
5.4.1.4 Fungsi Tambah Data Pemagang
Kode program untuk fungsi menambah data pemagang akan dirumuskan
menambah data pemagang dijelaskan pada .
Tabel 5. Pseudocode Tambah Data Pemagang
proses_add-magang.php
Node Algoritma
1 mulai
2 koneksi database
3 q menampilkan jumlah pemagang dari tabel tbl_intern
4 memanggil data pemagang hasil masukan admin pada proses tambah
data pemagang
5 jika dokumen bukan rar/zip maka
7 jika ukuran dokumen kurang dari 2MB
8 xx cek dokumen
9 query memasukkan data-data pemagang ke database
10 hasil data berhasil disimpan
11 data gagal disimpan
12 selesai
13 selesai

Gambar 5. Flowgraph Tambah Data Pemagang

independen, yaitu:
1. 1-2-3-4-5-6-13
2. 1-2-3-4-5-7-8-9-10-12-13
3. 1-2-3-4-5-7-11-12-13
5.4.1.5 Fungsi Ubah Data Pemagang
Kode program untuk fungsi mengubah data pemagang akan dirumuskan
mengubah data pemagang dijelaskan pada .
Tabel 5. Pseudocode Ubah Data Pemagang
proses_update_intern.php
Node Algoritma
1 mulai
2 koneksi database
3 memanggil data pemagang hasil masukan admin pada proses
mengubah data pemagang
4 query  memperbarui tabel tbl_intern dengan memasukkan data
pemagang berdasarkan ID pemohon
5 ex  query
6 jika ex lengkap maka
7 hasil  data berhasil diperbarui dan tersimpan ke database
8 data gagal diperbarui
9 selesai

Gambar 5. Flowgraph Ubah Data Pemagang
independen, yaitu:
1. 1-2-3-4-5-6-7-9
2. 1-2-3-4-5-6-8-9
5.4.1.6 Fungsi Hapus Data Pemagang
Kode program untuk fungsi menghapus data pemagang akan dirumuskan
menghapus data pemagang dijelaskan pada .
Tabel 5. Pseudocode Hapus Data Pemagang
proses_delete_intern.php
Node Algoritma
1 mulai
2 memilih tombol “Hapus”
3 jika memilih pilihan “Iya” maka
4 proses menghapus data
5 hasil  data berhasil dihapus
6 data gagal dihapus
7 selesai
8 jika memilih pilihan “tidak” maka
9 kembali ke tampilan menu data pemagang
10 selesai

Gambar 5. Flowgraph Hapus Data Pemagang

independen, yaitu:
1. 1-2-3-4-5-7-10
2. 1-2-3-6-7-10
3. 1-2-8-9-10
5.4.1.7 Fungsi Tampil Data Pemagang
Kode program untuk fungsi menampilkan data pemagang akan dirumuskan
menampilkan data pemagang dijelaskan pada .
Tabel 5. Pseudocode Tampil Data Pemagang
preview_intern.php
Node Algoritma
1 mulai
2 query  menampilkan seluruh data dari tabel tbl_intern berdasarkan
ID pemagang
3 ex  query
4 foreach (ex)
5 berhasil menampilkan seluruh data dari database
6 selesai

Gambar 5. Flowgraph Tampil Data Pemagang

independen, yaitu:
1. 1-2-3-4-6
2. 1-2-3-4-5-4-6
5.4.1.8 Fungsi Tambah Nilai Pemagang
Kode program untuk fungsi menambah nilai pemagang akan dirumuskan
menambah nilai pemagang dijelaskan pada .
Tabel 5. Pseudocode Tambah Nilai Pemagang
proses_penilaian.php
Node Algoritma
1 mulai
2 koneksi database
3 memanggil data dari hasil masukan admin pada proses menambah
nilai pemagang
4 query  memasukkan data penilaian pemagang ke tabel tabel_nilai
5 ex  query
7 hasil  data berhasil disimpan ke database
9 selesai

Gambar 5. Flowgraph Tambah Nilai Pemagang

independen, yaitu:
1. 1-2-3-4-5-6-7-9
2. 1-2-3-4-5-6-8-9
5.4.1.9 Fungsi Ubah Nilai Pemagang
Kode program untuk fungsi mengubah nilai pemagang akan dirumuskan
mengubah nilai pemagang dijelaskan pada .
Tabel 5. Pseudocode Ubah Nilai Pemagang
proses_update_nilai.php
Node Algoritma
1 mulai
2 koneksi database
3 memanggil data pemagang hasil masukan admin pada proses
mengubah data pemagang
4 query  memperbarui tabel tabel_nilai dengan data nilai pemagang
berdasarkan ID pemagang
5 ex  query
9 selesai

Gambar 5. Flowgraph Ubah Nilai Pemagang
independen, yaitu:
1. 1-2-3-4-5-6-7-9
2. 1-2-3-4-5-6-8-9
5.4.1.10 Fungsi Hapus Nilai Pemagang
Kode program untuk fungsi menghapus nilai pemagang akan dirumuskan
menghapus nilai pemagang dijelaskan pada .
Tabel 5. Pseudocode Hapus Nilai Pemagang
Node Algoritma
1 mulai
2 memilih tombol “Hapus”
4 proses menghapus nilai
5 hasil  nilai berhasil dihapus
6 nilai gagal dihapus
7 selesai
10 selesai

Gambar 5. Flowgraph Hapus Nilai Pemagang

independen, yaitu:
1. 1-2-3-4-5-7-10
2. 1-2-3-4-6-7-10
3. 1-2-8-9-10
5.4.1.11 Fungsi Cetak Nilai Pemagang
Kode program untuk fungsi mencetak nilai pemagang akan dirumuskan
mencetak nilai pemagang dijelaskan pada .
Tabel 5. Pseudocode Cetak Nilai Pemagang
print_nilai.php
Node Algoritma
1 mulai
2 query  menampilkan seluruh data dari tabel tabel_nilai berdasarkan
ID pemagang
3 ex  query
4 foreach (ex)
5 berhasil menampilkan seluruh data nilai dari database
6 selesai
7 proses mencetak nilai pemagang
8 selesai

Gambar 5. Flowgraph Cetak Nilai Pemagang

independen, yaitu:
1. 1-2-3-4-6-7-8
2. 1-2-3-4-5-4-6-7-8
5.4.1.12 Fungsi Tambah Data Master
Kode program untuk fungsi menambah data master akan dirumuskan
menambah data master dijelaskan pada .
Tabel 5. Pseudocode Tambah Data Master
proses_add-master.php
Node Algoritma
1 mulai
2 koneksi database
3 menampilkan jumlah instansi dari tabel tbl_master pada database
4 memanggil data dari hasil masukan admin pada proses menambah
data master
5 query  memasukkan data master ke tabel tbl_master
6 ex  query
8 hasil  data berhasil disimpan ke database
10 selesai

Gambar 5. Flowgraph Tambah Data Master

independen, yaitu:
1. 1-2-3-4-5-6-7-8-10
2. 1-2-3-4-5-6-7-9-10
5.4.1.13 Fungsi Ubah Data Master
Kode program untuk fungsi mengubah data master akan dirumuskan
mengubah data master dijelaskan pada .
Tabel 5. Pseudocode Ubah Data Master
proses_update_master.php
Node Algoritma
1 mulai
2 koneksi database
3 memanggil data master hasil masukan admin pada proses mengubah
data master
4 query  memperbarui data master berdasarkan ID instansi
5 ex  query
9 selesai

Gambar 5. Flowgraph Ubah Data Master
independen, yaitu:
1. 1-2-3-4-5-6-7-9
2. 1-2-3-4-5-6-8-9
5.4.1.14 Fungsi Hapus Data Master
Kode program untuk fungsi menghapus data master akan dirumuskan
menghapus data master dijelaskan pada .
Tabel 5. Pseudocode Hapus Data Master
proses_delete_master.php
Node Algoritma
1 mulai
2 memilih tombol “Hapus” maka
4 proses menghapus data
5 hasil  data berhasil dihapus
6 data gagal dihapus
7 selesai
10 selesai

Gambar 5. Flowgraph Hapus Data Master

independen:
1. 1-2-3-4-5-7-10
2. 1-2-3-4-6-7-10
3. 1-2-8-9-10
5.4.1.15 Fungsi Cetak Sertifikat
Kode program untuk fungsi mencetak sertifikat akan dirumuskan menjadi
pseudocode untuk keperluan pengujian whitebox. Pseudocode fungsi mencetak
sertifikat dijelaskan pada .
Tabel 5. Pseudocode Cetak Sertifikat
sertif.php
Node Algoritma
1 mulai
2 koneksi database
3 memulai session
4 jika session admin selesai maka
5 hasil  halaman login
6 selesai
7 tampilan template sertifikat
8 tekan tombol “cetak”
9 selesai

Gambar 5. Flowgraph Cetak Sertifikat

independen:
1. 1-2-3-4-5-6-7-8-9
2. 1-2-3-4-5-6-4-5-6-7-8-9
5.4.1.16 Fungsi Logout
Kode program untuk proses logout akan dirumuskan menjadi pseudocode
untuk keperluan pengujian whitebox. Pseudocode fungsi logout dijelaskan pada .
Tabel 5. Pseudocode Logout
remove_cookie.php
Node Algoritma
1 mulai
2 koneksi database
3 memulai session
4 menambah data session dari ID admin
5 menghapus data session dari ID admin
6 mengakhiri session
7 hasil  halaman login
8 selesai

Gambar 5. Flowgraph Logout

Berdasarkan flowgraph yang telah dibuat akan menghasilkan jalur
independen, yaitu:
1. 1-2-3-4-5-6-7-8
5.4.2 Pengujian Blackbox

Pada proses pengujian dengan metode blackbox testing, sistem informasi
akan diuji dengan teknik State Transitions Testing. Teknik tersebut digunakan
untuk mengetahui valid atau tidaknya beberapa fungsi sistem yang dibangun.
Teknik State Transitions Testing akan dilakukan berdasarkan kondisi
masukan/input tertentu dengan urutan kejadian tertentu. Teknik tersebut
dilakukan dengan bantuan State Transitions Diagram yang terdiri dari urutan
transisi penggunaan sistem informasi. Pemodelan rancangan State Transitions
Diagram dari sistem informasi dijelaskan pada .
Gambar 5. State Transitions Diagram Sistem Informasi
Setelah State Transitions Diagram dibuat, langkah selanjutnya adalah
membuat tabel pengujian berdasarkan State Transitions Diagram dengan total
54 transisi. Kolom “Dari” berguna sebagai status awal sebelum transisi sistem.
Kolom “Aksi” berguna sebagai proses yang dilakukan selama pindah status.
Kolom “Tujuan” berguna sebagai status akhir setelah transisi selesai dilakukan.
Agar memudahkan identifikasi aksi, setiap aksi akan diberi kode T sebanyak
jumlah transisi pada setiap transaksi. Tabel pengujian digolongkan berdasarkan
fungsi dan menu yang dimiliki sistem informasi. Perumusan pengujian transisi
pada proses pendaftaran pemagang berdasarkan State Transitions Diagram
dijelaskan pada .
Tabel 5. Tabel Pengujian Pendaftaran Pemagang
Transitio Dari Aksi Tujuan
n
T1 Calon pemagang Calon pemagang Tampilan formulir
masuk ke website mengakses formulir pendaftaran
CMLABS pendaftaran
T2 Tampilan formulir Calon pemagang Data calon
pendaftaran mengisi data dengan pemagang berhasil
lengkap tersimpan ke basis
data
T3 Tampilan formulir Calon pemagang Tampilan formulir
pendaftaran tidak mengisi data pendaftaran
dengan lengkap
T4 Data calon Calon pemagang Selesai proses
pemagang berhasil menutup formulir mendaftar
tersimpan ke basis
data CMLABS
Perumusan pengujian transisi pada proses login berdasarkan State

Transitions Diagram dijelaskan pada .
Tabel 5. Tabel Pengujian Login Admin
Transition Dari Aksi Tujuan
T1 Admin mengakses Memilih program Tampilan form
sistem sistem informasi login
manajemen
T2 Tampilan form login Memasukkan ID Tampilan
admin dan password dashboard sistem
dengan benar informasi
T3 Tampilan form login Memasukkan ID Tampilan form
admin dan password login
yang salah
Perumusan pengujian transisi pada pengelolaan data pemagang berdasarkan

State Transitions Diagram dijelaskan pada .
Tabel 5. Tabel Pengujian Menu Data Pemagang

T1 Tampilan Memilih menu “Data Tampilan menu
dashboard sistem Pemagang” “Data Pemagang”
informasi
T2 Tampilan menu Memilih tombol Tampilan form
“Data Pemagang” “Tambah Data tambah data
Pemagang” pemagang
T3 Tampilan form Tambah data dengan Data pemagang
tambah data lengkap berhasil
pemagang ditambahkan
T4 Tampilan form Tambah data tidak Tampilan form
tambah data tidak lengkap tambah data
pemagang pemagang
T5 Data berhasil Kembali ke menu Tampilan menu
ditambahkan “Data Pemagang” “Data Pemagang”
“Data Pemagang” “Ubah” “Ubah Data
Pemagang”
T7 Tampilan form Mengubah data Data pemagang
“Ubah Data tanpa ada data yang berhasil diubah
Pemagang” dikosongkan
T8 Tampilan form Mengubah data Tampilan form
“Ubah Data dengan ada kolom “Ubah Data
Pemagang” yang dikosongkan Pemagang”
T9 Data pemagang Kembali ke menu Tampilan menu
berhasil diubah “Data Pemagang“ “Data Pemagang”
T10 Tampilan menu Memilih tombol Tampilan
“Data Pemagang” “Hapus” konfirmasi hapus
data
T11 Tampilan konfirmasi Menyetujui Data pemagang
hapus data konfirmasi berhasil dihapus
menghapusan data
T12 Tampilan konfirmasi Membatalkan Tampilan menu
hapus data konfirmasi “Data Pemagang”
menghapusan data
T13 Data pemagang Kembali ke menu Tampilan menu
berhasil dihapus “Data Pemagang” “Data Pemagang”
T14 Tampilan menu Memilih tombol Tampilan data
“Data Pemagang” “Lihat” lengkap pemagang
T15 Tampilan data Kembali ke menu Tampilan menu
lengkap pemagang “Data Pemagang” “Data Pemagang”
Perumusan pengujian transisi pada pengelolaan nilai pemagang berdasarkan

Tabel 5. Tabel Pengujian Menu Nilai Pemagang
T1 Tampilan Memilih menu “Nilai Tampilan menu
dashboard sistem Pemagang” “Nilai Pemagang”
informasi
“Nilai Pemagang” “Tambah Nilai “Tambah Nilai
Pemagang” Pemagang”
T3 Tampilan form Menambah nilai Nilai pemagang
“Tambah Nilai dengan angka riil berhasil ditambah
Pemagang” (bukan desimal)
T4 Tampilan form Tambah nilai dengan Tampilan form
“Tambah Nilai angka desimal “Tambah Nilai
T5 Nilai pemagang Kembali ke menu Tampilan menu
berhasil ditambah “Nilai Pemagang” “Nilai Pemagang”
“Nilai Pemagang” “Ubah” “Ubah Nilai
Pemagang”
T7 Tampilan form Mengubah nilai Nilai pemagang
“Ubah Nilai dengan angka riil, berhasil diubah
Pemagang” bukan desimal)
T8 Tampilan form Mengubah nilai Tampilan form
“Ubah Nilai dengan angka desimal “Ubah Nilai
T9 Nilai pemagang Kembali ke menu Tampilan menu
berhasil diubah “Nilai Pemagang” “Nilai Pemagang”
“Nilai Pemagang” “Hapus” konfirmasi hapus
nilai pemagang
T11 Tampilan Menyetujui Nilai pemagang
konfirmasi hapus konfirmasi berhasil dihapus
nilai pemagang menghapus nilai
T12 Tampilan Membatalkan Tampilan menu
konfirmasi hapus konfirmasi “Nilai Pemagang”
nilai pemagang menghapus nilai
T13 Tampilan menu Memilih tombol Tampilan format
“Nilai Pemagang” “Cetak” lembar data nilai
pemagang
T14 Tampilan format Memilih tombol Lembar data nilai
lembar data nilai “Cetak Nilai” pemagang berhasil
pemagang dicetak
T15 Lembar data nilai Kembali ke menu Tampilan menu
pemagang berhasil “Nilai Pemagang” “Nilai Pemagang”
dicetak
Perumusan pengujian transisi pada pengelolaan data master berdasarkan

Tabel 5. Tabel Pengujian Menu Master Data
T1 Tampilan Memilih menu Tampilan menu
dashboard sistem “Master Data” “Master Data”
informasi

“Master Data” “Tambah Data “Tambah Data
Master” Master”
T3 Tampilan form Menambah data Data instansi
“Tambah Data instansi dengan berhasil
Master” lengkap ditambahkan
T4 Tampilan form Menambah data Tampilan form
“Tambah Data instansi tidak “Tambah Data
Master” lengkap Master”
T5 Data instansi Kembali ke menu Tampilan menu
berhasil “Master Data” “Master Data”
ditambahkan
“Master Data” “Ubah” “Ubah Data
Master”
T7 Tampilan form Mengubah data Data instansi
“Ubah Data Master” tanpa ada data yang berhasil diubah
dikosongkan
T8 Tampilan form Mengubah data Tampilan form
“Ubah Data Master” dengan ada kolom “Ubah Data
yang dikosongkan Master”
berhasil diubah “Master Data” “Master Data”
“Master Data” “Hapus” konfirmasi hapus
data
T11 Tampilan konfirmasi Menyetujui Data instansi
hapus data konfirmasi berhasil dihapus
menghapus data
T12 Tampilan konfirmasi Membatalkan Tampilan menu
hapus data konfirmasi “Master Data”
menghapus data
berhasil dihapus “Master Data” “Master Data”
Perumusan pengujian transisi pada fungsi mencetak sertifikat berdasarkan
Tabel 5. Tabel Pengujian Menu Cetak Sertifikat
T1 Tampilan Memilih menu Template sertifikat
dashboard sistem “Cetak Sertifikat” di menu “Cetak
informasi Sertiikat”
T2 Template sertifikat Memilih tombol Sertifikat berhasil
pemagang di menu “Cetak” dicetak (diunduh
“Cetak Sertifikat” dalam format PDF)
T3 Sertifikat berhasil Kembali ke menu Tampilan template
dicetak (diunduh “Cetak Sertifikat” sertifikat
dalam format PDF)
Perumusan pengujian transisi pada proses logout berdasarkan State

Transitions Diagram dijelaskan pada .
Tabel 5. Tabel Pengujian Logout
T1 Tampilan Menekan tombol Keluar dari sistem
dashboard sistem logout informasi
informasi
Pengujian dengan metode blackbox testing juga dapat berguna untuk

memastikan kesesuaian kebutuhan sistem yang diinginkan stakeholder pada
tahap perencanaan. Hasil pengujian yang penulis simpulkan berdasarkan lembar
pengujian pada . Tabel hasil pengujian digolongkan berdasarkan fungsi dan menu
yang dimiliki sistem informasi. Hasil pengujian blackbox yang dibantu oleh
Manajer Operasional CMLABS pada proses pendaftaran calon pemagang
dijelaskan pada .
Tabel 5. Hasil Pengujian Formulir Pendaftaran
Transition Skenario Keluaran Kesimpulan
T1 Calon pemagang Tampilan formulir OK
mengakses formulir pendaftaran
pendaftaran
T2 Calon pemagang Data calon pemagang OK
mengisi data dengan berhasil tersimpan ke
lengkap basis data
T3 Calon pemagang tidak Tampilan formulir OK
mengisi data dengan pendaftaran
lengkap
T4 Calon pemagang Selesai proses OK
menutup formulir mendaftar
Hasil pengujian blackbox yang dibantu oleh Manajer Operasional CMLABS

pada proses login dijelaskan pada .
Tabel 5. Hasil Pengujian Login Admin
T1 Memilih program sistem Tampilan form login OK
informasi manajemen
T2 Memasukkan ID admin Tampilan dashboard OK
dan password dengan sistem informasi
benar
T3 Memasukkan ID admin Tampilan form login OK
dan password yang salah

pada pengelolaan data pemagang dijelaskan pada .
Tabel 5. Hasil Pengujian Menu Data Pemagang
T1 Memilih menu “Data Tampilan menu “Data OK
T2 Memilih tombol Tampilan form tambah OK
“Tambah Data data pemagang
Pemagang”
T3 Tambah data dengan Data pemagang berhasil OK
lengkap ditambahkan
T4 Tambah data tidak tidak Tampilan form tambah OK
lengkap data pemagang
T5 Kembali ke menu “Data Tampilan menu “Data OK
T6 Memilih tombol Tampilan form “Ubah OK
“Ubah” Data Pemagang”
T7 Mengubah data tanpa Data pemagang berhasil OK
ada data yang diubah
dikosongkan
T8 Mengubah data dengan Tampilan form “Ubah OK
ada kolom yang Data Pemagang”
dikosongkan
Pemagang“ Pemagang”
T10 Memilih tombol Tampilan konfirmasi OK
“Hapus” hapus data
T11 Menyetujui konfirmasi Data pemagang berhasil OK
menghapusan data dihapus
T12 Membatalkan Tampilan menu “Data OK
konfirmasi Pemagang”
menghapusan data
T14 Memilih tombol “Lihat” Tampilan data lengkap OK
pemagang

pada pengelolaan nilai pemagang dijelaskan pada .
Tabel 5. Hasil Pengujian Menu Nilai Pemagang
T1 Memilih menu “Nilai Tampilan menu “Nilai OK
T2 Memilih tombol Tampilan form “Tambah OK
“Tambah Nilai Nilai Pemagang”
Pemagang”

T3 Menambah nilai Nilai pemagang berhasil OK
dengan angka riil ditambah
(bukan desimal)
T4 Tambah nilai dengan Tampilan form “Tambah OK
angka desimal Nilai Pemagang”
T5 Kembali ke menu “Nilai Tampilan menu “Nilai OK
T6 Memilih tombol Tampilan form “Ubah OK
“Ubah” Nilai Pemagang”
T7 Mengubah nilai dengan Nilai pemagang berhasil OK
angka riil, bukan diubah
desimal)
T8 Mengubah nilai dengan Tampilan form “Ubah OK
angka desimal Nilai Pemagang”
“Hapus” hapus nilai pemagang
T11 Menyetujui konfirmasi Nilai pemagang berhasil OK
menghapus nilai dihapus
T12 Membatalkan Tampilan menu “Nilai OK
konfirmasi menghapus Pemagang”
nilai
T13 Memilih tombol Tampilan format lembar OK
“Cetak” data nilai pemagang
T14 Memilih tombol “Cetak Lembar data nilai OK
Nilai” pemagang berhasil
dicetak
pada pengelolaan data master dijelaskan pada .
Tabel 5. Hasil Pengujian Menu Master Data
T1 Memilih menu “Master Tampilan menu OK
Data” “Master Data”
T2 Memilih tombol Tampilan form “Tambah OK
“Tambah Data Master” Data Master”
T3 Menambah data Data instansi berhasil OK
instansi dengan lengkap ditambahkan
T4 Menambah data Tampilan form “Tambah OK
instansi tidak lengkap Data Master”
T5 Kembali ke menu Tampilan menu OK
“Master Data” “Master Data”
T6 Memilih tombol “Ubah” Tampilan form “Ubah OK
Data Master”
T7 Mengubah data tanpa Data instansi berhasil OK
ada data yang diubah
dikosongkan
T8 Mengubah data dengan Tampilan form “Ubah OK
ada kolom yang Data Master”
dikosongkan
“Hapus” hapus data
T11 Menyetujui konfirmasi Data instansi berhasil OK
menghapus data dihapus
T12 Membatalkan Tampilan menu OK
konfirmasi menghapus “Master Data”
data
pada fungsi cetak sertifikat dijelaskan pada .
Tabel 5. Hasil Pengujian Menu Cetak Sertifikat
T1 Memilih menu “Cetak Template sertifikat di OK
Sertifikat” menu “Cetak Sertiikat”
T2 Memilih tombol Sertifikat berhasil OK
“Cetak” dicetak (diunduh dalam
format PDF)
T3 Kembali ke menu Tampilan template OK
“Cetak Sertifikat” sertifikat

pada fungsi logout dijelaskan pada .
Tabel 5. Hasil Pengujian Logout
T1 Menekan tombol Keluar dari sistem OK
logout informasi
BAB 6 PENUTUP
Setelah penulis melaksanakan serangkaian proses penelitian, pada bab ini

penulis akan memberikan beberapa kesimpulan berdasarkan hasil penelitian
pada bab-bab sebelumnya dan saran yang diharapkan dapat bermanfaat bagi
perusahaan dan peneliti selanjutnya.
6.1 Kesimpulan
Berdasarkan hasil penelitian dalam Pengembangan Sistem Informasi
Manajemen Internship Program Berbasis Website yang dilakukan peneliti maka
menghasilkan beberapa kesimpulan sebagai berikut.
1. Proses pengembangan sistem informasi manajemen internship program
berbasis website menghasilkan tampilan dan fungsi sistem ang dibutuhkan,
terdiri dari fungsi pendaftaran calon pemagang, fungsi login dan logout,
fungsi kelola data pemagang, fungsi kelola nilai pemagang, fungsi kelola data
master, dan fungsi cetak sertifikat.
2. Hasil tahap pengujian (testing) sistem menggunakan dua metode yaitu
whitebox dan blackbox testing. Berdasarkan pengujian dengan metode
whitebox, sistem informasi memiliki tingkat kompleksitas sistem sebesar
100% berdasarkan teknik Basis Path dengan perhitungan Cyclomatic
Complexity terhadap flow graph yang menandakan sistem dapat digunakan
oleh admin dan calon pemagang. Namun, tidak memungkiri bahwa sistem
masih dapat dikembangkan kembali sesuai kebutuhan di waktu mendatang.
Sedangkan berdasarkan pengujian dengan metode blackbox, sistem
informasi memiliki tingkat validitas sistem sebesar 100% berdasarkan hasil
valid pada tiap kasus yang diujikan.
6.2 Saran
Terlepas dari selesainya pembangunan sistem informasi manajemen
internship program, sistem tersebut masih belum sempurna. Masih ada
beberapa hal yang dapat dilakukan untuk mengembangkan sistem agar lebih
baik. Salah satunya adalah penggunaan framework pada sistem agar
pembangunan sistem dapat lebih efektif, efisien, dan tertata rapi. Hal ini
dikarenakan pada penelitian ini masih tidak menggunakan framework.
DAFTAR PUSTAKA
Abdulloh, R., 2016. Easy & Simple Web Programming. 1st ed. Jakarta: PT Elex
Media Komputindo.
Abdulloh, R., 2018. 7 in 1 Pemrograman Web Untuk Pemula. 1st ed. Jakarta: PT
Elex Media Komputindo.
Anggraeni, E. Y. & Irviani, R., 2017. Pengantar Sistem Informasi. 1st ed.
Yogyakarta: ANDI.
Azdy, R. A. & Rini, A., 2018. Penerapan Extreme Programming Dalam
Membangun Aplikasi Pengaduan Layanan Pelanggan Pada Perguruan
Tinggi. Jurnal Teknologi Informasi dan Ilmu Komputer, 5(2), pp. 197-206.
Basu, A., 2015. Software Quality Assurance, Testing and Metrics. 1st ed. India:
PHI Learning Private Limited.
Djaelangkara, R. T., Sengkey, R. & Lantang, O. A., 2015. Perancangan Sistem
Informasi Akademik Sekolah Berbasis Web Studi Kasus Sekolah
Menengah Atas Kristen 1 Tomohon. e-Jurnal Teknik Elektro dan
Komputer, 4(3), pp. 86-94.
Harison & Syarif, A., 2016. Sistem Informasi Geografis Sarana Pada Kabupaten
Pasaman Barat. Jurnal TEKNOIF, 4(2), pp. 40-50.
Hutahaean, J., 2014. Konsep Sistem Informasi. 1st ed. Yogyakarta: Deepublish.
Khurana, R., 2010. Software Engineering: Principles and Practices. 2nd ed. New
Delhi: Vikas Publishing House.
Komputer, W., 2010. Panduan Belajar MySQL Database Server. 1st ed. Jakarta:
mediakita.
Kurniawan, T. A., 2018. Pemodelan Use Case (UML): Evaluasi Terhadap Beberapa
Kesalahan Dalam Praktik. Jurnal Teknologi Informasi dan Ilmu Komputer
(JTIIK), 5(1), pp. 77-86.
Lubis, A., 2016. Basis Data Dasar. 1st ed. Yogyakarta: Deepublish.
Mathur, A. P., 2011. Foundations of Software Testing. 1st ed. New Delhi: Darling
Kindersley.
Maturidi, A. D., 2014. Metode Penelitian Teknik Informatika. 1st ed. Yogyakarta:
Deepublish.
Nixon, R., 2018. Learning PHP, MySQL & JavaScript : with jQuery, CSS & HTML5.
4th ed. United States of America: O'Reilly Media, Inc.
PKL, T. P. P., 2018. Panduan Penyelesaian dan Evaluasi Praktik Kerja Lapangan
(PKL). Malang: s.n.
Putra, R. E., Wicaksono, S. A. & Arwani, I., 2019. Pengembangan Sistem Informasi
Perpustakaan menggunakan Metode Extreme Programming (Studi pada:
SMK 1 Muhammadiyah Malang). Jurnal Pengembangan Teknologi
Informasi dan Ilmu Komputer, 3(7), pp. 6330-6340.
Rahadiyan, A., Wardani, N. H. & Rokhmawati, R. I., 2018. Analisis dan
Perancangan Sistem Informasi Penjualan dan Persediaan Barang Pada
Gudang Pada CV. KAJEYEFOOD. Jurnal Pengembangan Teknologi
Informasi Ilmu Komputer, 2(6), pp. 2334-2342.
Silalahi, M. & Saragih, S. P., 2019. Sistem Informasi Manajemen Lembaga
Pendidikan dan Pelatihan Madani (LP2M) dengan Metode Extreme
Programming. Applied Informatics and Computing (JAIC), 3(2), pp. 107-
113.
Sukamto, R. A. & Shalahuddin, M., 2018. Rekayasa Perangkat Lunak: Terstruktur
dan Berorientasi Objek. 1st ed. Bandung: INFORMATIKA.
Suryana, D., 2012. Sistem Teknologi Informasi : Sistem Informasi Penggajian
Karyawan. 3rd ed. Jakarta: Gramedia.
Suryantara, I. G. N., 2017. Merancang Aplikasi dengan Metodologi Extreme
Programming. 1st ed. Jakarta: PT Elex Media Komputindo.
Susanti, M., 2016. Perancangan Sistem Informasi Akademik Berbasis Web Pada
SMK Pasar Minggu Jakarta. Jurnal Informatika, 3(1), pp. 91-99.
Sutabri, T., 2012a. Analisis Sistem Informasi. 1st ed. Yogyakarta: Andi.
Sutabri, T., 2012b. Konsep Sistem Informasi. 1st ed. Yogyakarta: ANDI.
Utami, F. H. & Asnawati, 2015. Rekayasa Perangkat Lunak. 1st ed. Yogyakarta:
Deepublish.
Winarno, E., Zaki, A. & Community, S., 2014. 3 in 1 : JavaScript, jQuery dan
jQuery Mobile. 1st ed. Jakarta: PT Elex Media Komputindo.
LAMPIRAN
LAMPIRAN A TRANSKRIP WAWANCARA

Narasumber : Manajer Operasional CMLABS Malang, Dwiyana Dini K.
No. Pertanyaan Jawaban Narasumber

1. Berapa jumlah Perusahaan kami dapat menerima pemagang
pemagang yang dapat dari kalangan siswa SMK dan mahasiswa
diterima di perusahaan sebanyak 20 – 30 orang.
dalam setiap tahunnya?
2. Terkait dengan jumlah Kami mendata segala kebutuhan pemagang,
pemagang yang cukup seperti mendata tugas-tugas hingga penilaian
banyak, apakah pihak kinerja pemagang masih menggunakan
perusahaan sudah bantuan Microsoft Excel atau Google
memiliki sistem Spreadsheet.
pengelolaan pemagang
yang memadai?
3. Menurut Anda apakah Menurut saya belum mempermudah karena
pemanfaatan harus mendata secara manual, sehingga masih
perangkat lunak tidak ada bedanya dengan menulis di kertas.
tersebut sudah
mempermudah
kegiatan Anda dalam
pendataan pemagang?
4. Bagaimana menurut Secara pribadi saya mempersilahkan siapapun
Anda jika ada yang yang ingin membuatkan sebuah program
membuatkan sistem untuk perusahaan kami.
informasi manajemen
pemagang?
5. Apa saja kebutuhan Sederhana saja, intinya penanggung jawab
yang diharapkan pendataan dapat mengetahui data-data
tersedia dalam sistem pemagang yang masuk setelah mendaftar
informasi manajemen melalui website perusahaan, lalu dapat
pemagang? mempermudah penanggung jawab dalam
proses penilaian pemagang dan sertifikasi
pemagang. Selain itu juga dapat mengelola
data instansi yang menaungi pemagang yang
pernah melaksanakan magang di CMLABS.
6. Apa saja fitur-fitur yang Tentu saja admin mengelola data yang masuk
diharapkan tersedia di ketika calon pemagang mendaftar melalui
sistem informasi? formulir pendaftaran. Kemudian data-data
yang telah masuk ke basis data akan
ditampilkan di sistem informasi. Sebelum itu
admin harus login terlebih dahulu.
Pengelolaan data dan nilai pemagang dibuat
sederhana saja yang dapat difungsikan untuk
menambah, mengubah, dan menghapus.
Harapan saya tambahkan juga dashboard
supaya terlihat lebih menarik. Untuk fungsi
logout dibuat simple saja.
7. Apa saja data yang Tentu saja nama, tempat dan tanggal lahir,
perlu dimasukkan oleh asal universitas atau sekolah, tanggal mulai
calon pemagang? dan selesai magang, dan berkas pendukung
seperti CV, portofolio, dan surat pengantar
dari kampus atau sekolah.
8. Bagaimana untuk Kalau penilaian umumnya saya menilai dari
pengelolaan nilai segi kehadiran, kompetensi, sikap kerja sama
pemagang? dalam tim, dan etika kerja.
9. Sempat disinggung Jadi harapan saya juga dibuatkan fungsi
mengenai pengelolaan pengelolaan data instansi agar memudahkan
data instansi kami (CMLABS) untuk mendata instansi mana
pemagang, bagaimana saja yang sudah pernah “menitipkan”
maksudnya? pelajarnya untuk magang di sini (CMLABS).
Fitur juga tidak jauh berbeda dengan
pengelolaan data dan nilai tadi.
LAMPIRAN B LEMBAR PENGUJIAN BLACKBOX
LAMPIRAN C FOTO KEGIATAN PKL
Selama melaksanakan PKL, kelompok penulis mengerjakan tugas pemberian

perusahaan yang diimbangi dengan pengerjaan projek PKL untuk keperluan
laporan. Penulis sempat mendokumentasikan beberapa aktivitas selama di
kantor CMLABS. Dokumentasi kegiatan pengerjaan projek PKL dapat dilihat pada
Gambar Lampiran C.1.
Gambar Lampiran C.1 Kegiatan Pengerjaan Projek PKL

Dokumentasi kegiatan pengerjaan projek internal perusahaan dapat dilihat pada
Gambar Lampiran C.2 Kegiatan Pengerjaan Projek Internal Perusahaan

Dokumentasi kegiatan pengerjaan laporan dan projek PKL dapat dilihat pada
Gambar Lampiran C.3 Kegiatan Pengerjaan Laporan PKL
Dokumentasi kegiatan presentasi hasil pengembangan sistem informasi sebagai
projek PKL dapat dilihat pada Gambar Lampiran C.4 dan Gambar Lampiran C.5.
Gambar Lampiran C.4 Kegiatan Presentasi Projek PKL

Gambar Lampiran C.5 Kegiatan Presentasi Projek PKL (2)
Kelompok penulis juga sempat mengabadikan momen kebersamaan dengan
pembimbing lapangan dan anggota kelompok PKL lainnya yang dapat dilihat
pada Gambar Lampiran C.6 dan Gambar Lampiran C.7
Gambar Lampiran C.6 Foto Bersama Pembimbing Lapangan PKL

Gambar Lampiran C.7 Foto Dengan Pegawai Inti, Pembimbing Lapangan, dan
Teman-Teman Pemagang
LAMPIRAN D LOGBOOK KEGIATAN

LAPORAN PKL Dania, Syaifudin, Rifaldi

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LAPORAN PKL Dania, Syaifudin, Rifaldi

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIK KERJA LAPANGAN (PKL)

PT CMLABS INDONESIA DIGITAL

PENGEMBANGAN SISTEM INFORMASI MANAJEMEN INTERNSHIP

Diajukan untuk memenuhi sebagian persyaratan Kurikulum Sarjana

Dania Lazuardi Husen (175150600111033)

PROGRAM STUDI PENDIDIKAN TEKNOLOGI INFORMASI

LAPORAN PRAKTIK KERJA LAPANGAN (PKL)

PT CMLABS INDONESIA DIGITAL

PENGEMBANGAN SISTEM INFORMASI MANAJEMEN INTERNSHIP PROGRAM

Diajukan untuk memenuhi sebagian persyaratan Kurikulum Sarjana

Dania Lazuardi Husen

Praktik Kerja Lapangan ini telah dilaksanakan pada

Tri Afirianto, S.T., M.T.

Saya menyatakan dengan sebenar-benarnya bahwa sepanjang pengetahuan

Malang, 25 September 2020

Dania Lazuardi Husen

Syaifudin Eka Pradana

Muhammad Fajar Rifaldi

Malang, 25 September 2020

PT CMLABS INDONESIA DIGITAL adalah sebuah perusahaan start-up yang

PT CMLABS INDONESIA DIGITAL is a start-up company that focuses on SEO

LAPORAN PRAKTIK KERJA LAPANGAN (PKL).............................................................i

Tabel 3.1 Simbol dan Deskripsi Pada Use Case Digram.........................................15

YGambar 2.1 Logo PT CMLABS INDONESIA DIGITAL...............................................5

YLAMPIRAN A TRANSKRIP WAWANCARA............................................................148

1.1 Latar Belakang

1.2 Rumusan Masalah

1.6 Sistematika Pembahasan

2.1 Sejarah dan Perkembangan PT CMLABS INDONESIA DIGITAL

2.2 Logo PT CMLABS INDONESIA DIGITAL

Gambar 2. Logo PT CMLABS INDONESIA DIGITAL

2.3 Alamat dan Kontak PT CMLABS INDONESIA DIGITAL

2.4 Visi PT CMLABS INDONESIA DIGITAL

2.5 Ruang Lingkup Kerja PT CMLABS INDONESIA DIGITAL

2.6 Struktur Organisasi PT CMLABS INDONESIA DIGITAL

Gambar 2. Bagan Struktur Organisasi PT CMLABS INDONESIA DIGITAL

2.7 Rantai Bisnis PT CMLABS INDONESIA DIGITAL

Gambar 2. Rantai Bisnis PT CMLABS INDONESIA DIGITAL

3.1 Kajian Pustaka

3.2 Pengertian Sistem

3.3 Pengertian Informasi

3.4 Pengertian Sistem Informasi

3.5.2 Jenis Website

3.6.2 Kegunaan HTML

3.7.2 Fungsi PHP

3.10 Extreme Programming

3.10.2 Kerangka Kerja Extreme Programming

3.11 Unified Modeling Language (UML)

Gambar 3. Diagram UML

3.11.1 Use Case Diagram

3.11.2 Use Case Scenario

3.11.3 Activity Diagram

Notasi pemisah dalam

3.11.4 Sequence Diagram

Menggambarkan jangka kehidupan

Menggambarkan kondisi objek dalam

Boundary Menyatakan sebuah form yang diakses

Control Menyatakan sebuah penghubung antara

Menyatakan sebuah hubungan antar

Pesan tipe Menyatakan pengiriman data atau

Alternative Menggambarkan area pengelompokan

3.11.5 Class Diagram

Asosiasi / Menggambarkan relasi antarkelas secara