lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat...

60
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Upload: others

Post on 06-Mar-2020

12 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP 

 

 

 

 

 

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

BAB III

METODOLOGI DAN PERANCANGAN

3.1 Metode Penelitian

Metode yang digunakan dalam penelitian ini adalah sebagai berikut.

1. Studi Pustaka

Melakukan studi pustaka untuk memperkuat teori-teori tentang sistem

pendukung keputusan, dan metode hidden markov model dengan

memfokuskan pada pengolahan proses sesuai dengan parameter yang

digunakan,

2. Analisis Sistem

Melakukan analisis sistem untuk mengetahui hal-hal yang dibutuhkan untuk

memenuhi kriteria dari penerimaan karyawan baru PT Kusumomegah

Jayasakti,

3. Desain Sistem

Desain sistem berupa prototyping yang disesuaikan dengan analisis sistem

yang dibutuhkan sebelum diimplementasikan atau dibuat ke dalam bahasa

pemrograman,

4. Pemrograman dan Implementasi Metode

Tahap pemrograman meliputi penulisan kode-kode dengan menggunakan

bahasa scripting PHP dan untuk prosesnya menggunakan metode hidden

markov model sebagai acuan untuk melakukan perhitungan ketepatan atau

keakuratan dari proses sistem pendukung keputusan penerimaan karyawan

baru,

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

4. Pengujian Aplikasi

Memastikan aplikasi yang dibuat sesuai dengan sesuai dengan syarat-syarat

yang ada, serta memastikan program berjalan dengan baik dan tidak ada

kesalahan logika. Selain itu, memastikan ketepatan dari hasil proses

penerimaan karyawan baru,

5. Penyerahan Aplikasi

Penyerahan aplikasi kepada para staf departemen sumber daya manusia pada

PT Kusumomegah Jayasakti agar dapat dipergunakan untuk mendukung

kegiatan dalam penerimaan karyawan baru.

6. Penulisan Laporan

Melakukan penulisan laporan bertahap dari analisis sistem sampai dengan

pengujian aplikasi.

3.2 Analisis Masalah

Saat ini masih banyak perusahaan yang melakukan penerimaan karyawan baru

dengan menggunakan cara manual sehingga menyulitkan para staf departemen

sumber daya manusia dalam memeriksa hasil tes.

Pada penelitian ini, penulis mengambil studi kasus pada perusahaan teknologi

informasi dan komunikasi yang bergerak dalam bidang pengadaan barang peralatan

komputer, pembuatan software, jasa servis peralatan komputer dan pengaturan

terhadap jaringan, perusahaan ini bernama PT Kusumomegah Jayasakti.

PT Kusumomegah Jayasakti memiliki banyak karyawan yang bergerak pada

bidangnya masing-masing dan hanya memiliki sedikit karyawan pada departemen

sumber daya manusia. Hal ini membuat para staf pada departemen sumber daya

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

manusia kesulitan dalam memanajemen seluruh karyawan yang ada. Jika terdapat

karyawan baru yang ingin mendaftar dan mengikuti tes maka para staf departemen

sumber daya manusia harus meluangkan waktunya untuk karyawan baru tersebut

sehingga pekerjaan yang lain terbengkalai dikarenakan harus menunggu tes

pelamar dan memeriksa hasil tes karyawan.

Dalam proses tesnya, staf departemen sumber daya manusia memberikan form

biodata pelamar yang harus diisi terlebih dahulu sebelum mengikuti tes. Setelah

mengisi form staf HRD memberikan form tes yang berisi soal-soal ujian

penerimaan karyawan baru. Soal yang diujikan dalam form tersebut seperti soal

psikotes, pengetahuan atau kecerdasan umum dan matematika. Semua soal tes atau

form yang diberikan kepada pelamar berbentuk form fisik dan memiliki tulisan

yang kurang jelas sehingga dapat memicu kesalahan pada saat pelamar melakukan

tes.

3.3 Pemecahan Masalah

Berdasarkan masalah yang ditemukan, ditawarkan sebuah solusi berupa

aplikasi dengan kemampuan sebagai berikut.

1. Memiliki number generator pada soal untuk mengacak nomor soal dengan

ketentuan soal yang diacak berdasarkan probabilitas kemudian diurutkan dari

probabilitas yang tertinggi ke paling rendah;

2. Memiliki perhitungan nilai hasil tes pelamar berdasarkan parameter yang

sesuai dengan kriteria perusahaan dan dapat membantu para staf HRD dalam

mengambil keputusan penerimaan karyawan baru;

3. Merupakan aplikasi yang dibuat dalam basis web.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

3.4 Rancangan Masukkan dan Keluaran Sistem

Rancangan masukkan dari aplikasi ini adalah sebuah form untuk mengisi data

diri pelamar yang berfungsi untuk menunjukkan informasi formal dari pelamar dan

jawaban soal tes yang dijawab oleh pelamar.

Rancangan keluaran dari aplikasi ini adalah dua buah halaman web yaitu view

search applicant untuk memperlihatkan data pelamar beserta nilai totalnya dan

detail applicant untuk melihat informasi detil dari pelamar seperti data pribadi

pelamar, hasil tes pelamar, jawaban tes pelamar dan sampel observasi urutan soal.

Kedua halaman web itu hanya dapat dilihat oleh staf HRD.

3.5 Perancangan Sistem

Sistem yang dirancang berbasis web menggunakan bahasa pemrograman PHP

yang dibuat dengan struktur pemrograman berorientasi objek beserta dengan basis

data sebagai tempat untuk menyimpan data. Perancangan dan alur pada sistem yang

dibuat ini dijelaskan dalam use case diagram, activity diagram, sequence diagram,

class diagram, entity relationship diagram, desain antarmuka dan proses sistem.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

3.5.1 Use Case Diagram

Gambar 3.1 Use Case Diagram

Pada use case diagram, dapat dilihat terdapat dua jenis pengguna seperti

pelamar dan staf HRD. Pelamar adalah pengguna yang menggunakan sistem hanya

untuk mengikuti tes. Staf HRD adalah pengguna yang memiliki hak akses penuh

dalam sistem namun tidak memiliki proses mengikuti tes.

Secara lebih rinci, masing-masing use case dapat dijelaskan sebagai berikut.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

1. Use Case Login

Use case login digunakan untuk melihat proses masuk atau melakukan login

ke dalam subsistem backend. Use case ini hanya dapat diakses oleh staf HRD.

Secara lebih jelas, proses yang berlangsung pada use case login dapat dilihat

pada activity dan sequence diagram berikut.

Gambar 3.2 Activity Diagram Login

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.3 Sequence Diagram Login

2. Use Case Logout

Use case logout digunakan untuk melihat proses keluar atau melakukan logout

pada subsistem backend. Use case ini hanya dapat diakses oleh staf HRD.

Secara lebih jelas, proses yang berlangsung pada use case logout dapat dilihat

pada activity dan sequence diagram berikut.

Gambar 3.4 Activity Diagram Logout

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.5 Sequence Diagram Logout

3. Use Case Melihat Data Pelamar

Use case melihat data pelamar digunakan untuk melihat proses yang

menampilkan seluruh data pelamar pada subsistem backend. Use case ini

hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

berlangsung pada use case melihat data pelamar dapat dilihat pada activity dan

sequence diagram berikut.

Gambar 3.6 Activity Diagram Melihat Data Pelamar

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.7 Sequence Diagram Melihat Data Pelamar

4. Use Case Mencari Data Pelamar

Use case mencari data pelamar digunakan untuk melihat proses pencarian data

pelamar hingga menampilkan data yang telah ditemukan pada subsistem

backend. Use case ini hanya dapat diakses oleh staf HRD. Secara lebih jelas,

proses yang berlangsung pada use case mencari data pelamar dapat dilihat pada

activity dan sequence diagram berikut.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.8 Activity Diagram Mencari Data Pelamar

Gambar 3.9 Sequence Diagram Mencari Data Pelamar

5. Use Case Melihat Detail Data Pelamar

Use case melihat detil data pelamar digunakan untuk melihat proses yang

menampilkan data pelamar secara detil pada subsistem backend. Use case ini

hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

berlangsung pada use case melihat data pelamar dapat dilihat pada activity dan

sequence diagram berikut.

Gambar 3.10 Activity Diagram Melihat Data Detail Pelamar

Gambar 3.11 Sequence Diagram Melihat Data Detail Pelamar

6. Use Case Menghapus Data Pelamar

Use case menghapus data pelamar digunakan untuk melihat proses menghapus

data pelamar pada subsistem backend. Use case ini hanya dapat diakses oleh

staf HRD. Secara lebih jelas, proses yang berlangsung pada use case

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

menghapus data pelamar dapat dilihat pada activity dan sequence diagram

menghapus data pelamar berikut.

Gambar 3.12 Activity Diagram Menghapus Data Pelamar

Gambar 3.13 Sequence Diagram Menghapus Data Pelamar

7. Use Case Memasukkan User Baru

Use case memasukkan user baru digunakan untuk melihat proses membuat

akun user baru yang akhirnya dapat digunakan untuk masuk atau login ke

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

dalam subsistem backend. Use case ini hanya dapat diakses oleh staf HRD.

Secara lebih jelas, proses yang berlangsung pada use case memasukkan user

baru dapat dilihat pada activity dan sequence diagram berikut.

Gambar 3.14 Activity Diagram Memasukkan User Baru

Gambar 3.15 Sequence Diagram Memasukkan User Baru

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

8. Use Case Mengubah Password

Use case mengubah password digunakan untuk melihat proses mengubah

password akun user pada subsistem backend. Use case ini hanya dapat diakses

oleh staf HRD. Secara lebih jelas, proses yang berlangsung pada use case

mengubah password dapat dilihat pada activity dan sequence diagram berikut.

Gambar 3.16 Activity Diagram Mengubah Password

Gambar 3.17 Sequence Diagram Mengubah Password

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

9. Use Case Reset Password

Use case reset password digunakan untuk melihat proses mengubah password

akun user jika user lupa password pada subsistem backend. Use case ini hanya

dapat diakses oleh staf HRD. Secara lebih jelas, proses yang berlangsung pada

use case reset password dapat dilihat pada activity dan sequence diagram

berikut.

Gambar 3.18 Activity Diagram Reset Password

Gambar 3.19 Sequence Diagram Reset Password

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

10. Use Case Melihat Data Soal

Use case melihat data soal digunakan untuk melihat proses yang menampilkan

data pelamar secara detil pada subsistem backend. Use case ini hanya dapat

diakses oleh staf HRD. Secara lebih jelas, proses yang berlangsung pada use

case melihat data soal dapat dilihat pada activity dan sequence diagram

berikut.

Gambar 3.20 Activity Diagram Melihat Data Soal

Gambar 3.21 Sequence Diagram Melihat Data Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 18: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

11. Use Case Mencari Soal

Use case mencari soal digunakan untuk melihat proses pencarian data soal

hingga menampilkan data yang telah ditemukan pada subsistem backend. Use

case ini hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

berlangsung pada use case mencari soal dapat dilihat pada activity dan

sequence diagram berikut.

Gambar 3.22 Activity Diagram Mencari Soal

Gambar 3.23 Sequence Diagram Mencari Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 19: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

12. Use Case Mengubah Status Soal

Use case mengubah status soal digunakan untuk melihat proses mengubah

status soal dari aktif menjadi tidak aktif atau sebaliknya pada subsistem

backend. Use case ini hanya dapat diakses oleh staf HRD. Secara lebih jelas,

proses yang berlangsung pada use case mengubah status dapat dilihat pada

activity dan sequence diagram berikut.

Gambar 3.24 Activity Diagram Mengubah Status Soal

Gambar 3.25 Sequence Diagram Mengubah Status Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 20: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

13. Use Case Meninjau Soal

Use case meninjau soal digunakan untuk melihat proses peninjauan atau

preview pada soal yang telah dibuat pada subsistem backend. Use case ini

hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

berlangsung pada use case meninjau soal dapat dilihat pada activity dan

sequence diagram berikut.

Gambar 3.26 Activity Diagram Meninjau Soal

Gambar 3.27 Sequence Diagram Meninjau Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 21: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

14. Use Case Menghapus Soal

Use case menghapus soal digunakan untuk melihat proses menghapus atau

delete soal pada subsistem backend. Soal yang dihapus atau di-delete memiliki

format yang berbeda. Pada soal yang mempunyai gambar, sebelum melakukan

proses penghapusan atau delete semua gambar fisik yang berkaitan dengan

soal itu, gambar-gambar yang berkaitan di-backup terlebih dahulu untuk

mencegah hal yang tidak diinginkan. Kemudian jika gagal melakukan

penghapusan atau delete pada gambar fisik tersebut, maka semua gambar fisik

yang berkaitan akan di-restore seperti semula. Pada saat melakukan

penghapusan atau delete data pada database, jika proses delete gagal maka

semua gambar fisik yang berkaitan dengan soal tersebut akan di-restore. Use

case ini hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

berlangsung pada use case menghapus soal dapat dilihat pada activity dan

sequence diagram berikut.

Gambar 3.28 Activity Diagram Menghapus Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 22: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.29 Sequence Diagram Menghapus Soal

15. Use Case Memasukkan Soal Baru

Use case memasukkan soal baru digunakan untuk melihat proses memasukkan

soal baru pada subsistem backend. Soal yang dimasukkan jika memiliki

gambar, jika terjadi kegagalan semua gambar yang berhasil di-upload akan

dihapus. Kemudian, saat melakukan memasukkan data pada database, jika

proses gagal maka semua gambar fisik yang berhasil di-upload akan dihapus.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 23: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Use case ini hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

berlangsung pada use case memasukkan soal baru dapat dilihat pada activity

dan sequence diagram berikut.

Gambar 3.30 Activity Diagram Masukkan Soal Baru

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 24: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.31 Sequence Diagram Masukkan Soal Baru

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 25: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

16. Use Case Mengubah Soal

Use case mengubah soal digunakan untuk melihat proses mengubah soal pada

subsistem backend. Dalam prosesnya, user memilih soal yang ingin diubah,

kemudian melakukan pengubahan data pada form sesuai yang diinginkan lalu

form di-submit. Setelah itu dilakukan pengecekan terhadap proses upload

gambar. Jika proses upload tidak valid atau tidak ada gambar baru yang di-

upload, maka langsung ke tahap update data pada database. Kemudian jika

proses upload valid atau memiliki gambar fisik yang baru di-upload, gambar

fisik lama akan di-backup guna untuk menjaga hal yang tidak diinginkan.

Setelah itu dilakukan pengecekan kembali, jika terjadi kegagalan dalam upload

gambar fisik yang baru maka gambar lama akan di-restore dan gambar fisik

yang telah di-backup dihapus guna untuk menghemat pemakaian resource.

Kemudian, saat melakukan proses mengubah data soal pada database, jika

proses gagal maka gambar fisik lama akan di-restore dan gambar fisik yang

di-backup dihapus. Jika proses mengubah soal pada database berhasil maka

dalam prosesnya hanya menghapus gambar yang di-backup saja. Use case ini

hanya dapat diakses oleh staf HRD. Secara lebih jelas, proses yang

berlangsung pada use case mengubah soal dapat dilihat pada activity dan

sequence diagram berikut.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 26: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.32 Activity Diagram Mengubah Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 27: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.33 Sequence Diagram Mengubah Soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 28: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

17. Use Case Mengikuti Tes

Use case mengikuti tes digunakan untuk melihat proses mengubah soal pada

subsistem backend. Dalam prosesnya, user melakukan proses pengisian data

pribadi pada form yang telah disediakan. Setelah form ter-submit, semua hasil

input-an user dimasukkan kedalam session, kemudian dilakukan proses

generate variabel observasi hidden markov model. Variabel observasi yang

telah di-generate, di-filter dan di-smoothing guna untuk mendapatkan

probabilitas yang baik guna dalam meng-generate urutan soal yang muncul

nantinya. Selanjutnya melakukan pengambilan sampel observasi melalui

database. Jika data yang diambil kosong atau tidak ada maka dilakukan proses

learning atau pembelajaran terhadap sampel yang ada. Namun jika data yang

diambil tidak kosong maka dilakukan proses filtering dan smoothing kembali

pada semua sampel-sampel yang diambil dan pada akhirnya semua sampel

dipelajari. Proses learning ini guna untuk mencari probabilitas yang terbaik

dari semua sampel yang ada. Setelah ditemukan sampel yang mempunyai

probabilitas terbaik maka dilakukan pengambilan soal melalui database dan

pengurutan nomor soal sesuai dengan probabilitas dari yang terbesar ke yang

terkecil. Semua data-data soal dan hasil dari proses hidden markov model

dimasukkan kedalam session. Data-data soal yang telah di-load berdasarkan

urutan ditampilkan ke user dan kemudian dikerjakan. Setelah user selesai tes,

hasil tes user dinilai sebagai lulus atau tidak dalam perusahaan, kemudian data

dimasukkan ke dalam database. Use case ini hanya dapat diakses oleh

pelamar. Secara lebih jelas, proses yang berlangsung pada use case mengikuti

tes dapat dilihat pada activity dan sequence diagram berikut.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 29: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.34 Activity Diagram Mengikuti Tes

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 30: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.35 Sequence Diagram Mengikuti Tes

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 31: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Berdasarkan activity diagram mengikuti tes di atas terdapat 4 (empat) buah

subproses yang memiliki fungsi untuk mempersingkat penulisan dalam activity

diagram. Berikut adalah keempat subproses activity diagram mengikuti tes yang

dibuat dalam bentuk activity diagram beserta dengan penjelasannya.

A. Membuat Sampel Hidden Markov Model

Subproses ini berfungsi untuk pembuatan sampel observasi hidden markov

model. Dalam prosesnya, sampel dibuat berdasarkan nomor yang diacak

sebanyak 150 kali, kemudian dilakukan pengecekan pada sampel jika terdapat

nomor sampel yang sama maka akan melakukan pembuatan sampel kembali

sampai total sampel yang dibuat sebanyak 150. Setelah sampel selesai dibuat

maka dimasukkan ke dalam array dan kemudian array tersebut dijadikan

return variabel yang nantinya digunakan untuk proses selanjutnya.

Gambar 3.36 Activity Diagram Subproses Membuat

Sampel Hidden Markov Model

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 32: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

B. Melakukan Filter Sampel Hidden Markov Model

Subproses ini berfungsi untuk melakukan filtering hidden markov model atau

memfilter probabilitas sampel observasi hidden markov model. Awal dari

proses filtering yaitu, melakukan inisialisasi variabel, kemudian melakukan

perhitungan conditional likehood yang berfungsi untuk perpindahan antara

indeks yang satu ke indeks lain, filtering untuk menyaring probabilitas yang

nantinya dijadikan probabilitas terbaik.

Gambar 3.37 Activity Diagram Subproses Melakukan Filter

Sampel Hidden Markov Model

C. Melakukan Smooth Sampel Hidden Markov Model

Subproses ini berfungsi untuk melakukan smoothing hidden markov model.

Awal dari proses smoothing yaitu, melakukan inisialisasi variabel, kemudian

melakukan proses perhitungan smoothing yang berfungsi untuk memperhalus

atau memperbesar probabilitas pada hidden markov model.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 33: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.38 Activity Diagram Subproses Melakukan Smooth

Sampel Hidden Markov Model

D. Melakukan Training Sampel Hidden Markov Model

Subproses ini berfungsi untuk melakukan training hidden markov model

dengan menggunakan algoritma Baum Welch. Awal dari proses training yaitu,

melakukan inisialisasi variabel, membuat matriks transisi dan matriks emisi,

mengestimasi probabilitas pada saat perpindahan atau transisi, mengestimasi

matriks transisi yang digunakan untuk mempelajari perpindahan dan

menghitung likehood dari sampel yang ada berdasarkan parameter yang telah

ditentukan. Proses perhitungan likehood merupakan proses untuk memilih

probabilitas atau peluang terbaik dari seluruh sampel observasi yang ada.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 34: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.39 Activity Diagram Subproses Melakukan Training

Sampel Hidden Markov Model

18. Use Case Mengubah Tanda Pengenal

Use case mengubah tanda pengenal digunakan untuk melihat proses mengubah

tanda pengenal akun user pada subsistem backend. Use case ini hanya dapat

diakses oleh staf HRD. Secara lebih jelas, proses yang berlangsung pada use

case mengubah tanda pengenal dapat dilihat pada activity dan sequence

diagram berikut.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 35: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.40 Activity Diagram Mengubah Tanda Pengenal

Gambar 3.41 Sequence Diagram Mengubah Tanda Pengenal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 36: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

3.5.2 Struktur Tabel Database

Secara garis besar, struktur tabel dari database yang digunakan dapat

digambarkan sebagai entity relationship diagram berikut.

Gambar 3.42 Entity Relationship Diagram

Berikut adalah penjelasan secara detil dari masing-masing tabel pada database

yang digunakan penulis dalam penelitian ini.

1. Tabel User_Data

Tabel User_Data berisi data user account yang digunakan untuk masuk atau

login kedalam subsistem backend aplikasi. Selain digunakan untuk login tabel

ini juga digunakan untuk proses me-reset password dan mengubah password.

Berikut adalah struktur tabel User_Data.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 37: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Tabel 3.1 Struktur Tabel User_Data

Nama Field Tipe Data Constraint Keterangan

User_Username Varchar(20) Primary Key Not Null

Kode unik pengguna

User_Password Varchar(50) Not Null Kata sandi unik pengguna

User_QuestionIdentify Varchar(255) Not Null Pertanyaan untuk mereset password

User_AnswerIdentify Varchar(255) Not Null Jawaban untuk mereset password

2. Tabel LastEducation_Data

Tabel LastEducation_Data berisi data detil tingkat pendidikan terakhir seperti

SMP, SMA, D3, S1, S2, S3. Data dari tabel ini digunakan oleh pelamar sebagai

penunjuk pendidikan terakhir pelamar pekerja dan sebagai salah satu

parameter penilaian penerimaan karyawan baru PT Kusumomegah Jayasakti.

Berikut adalah struktur tabel LastEducation_Data.

Tabel 3.2 Struktur Tabel LastEducation_Data

Nama Field Tipe Data Constraint Keterangan

Education_ID Int(1) Primary Key Not Null Kode unik edukasi

Education_Detail Varchar(20) Not Null Deskripsi dari setiap edukasi

3. Tabel ApplicantStatus_Data

Tabel ApplicantStatus_Data berisi data detail status pelamar seperti diterima,

dan tidak diterima. Data dari tabel ini hanya digunakan sebagai penunjuk status

tes pelamar yang telah selesai mengikuti tes. Berikut adalah struktur tabel

ApplicantStatus_Data.

Tabel 3.3 Struktur tabel ApplicantStatus_Data

Nama Field Tipe Data Constraint Keterangan

ApplicantStatus_ID Int(1) Primary Key Not Null

Kode unik status pelamar

ApplicantStatus_Detail Varchar(20) Not Null Deskripsi dari setiap status pelamar

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 38: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

4. Tabel Applicant_Data

Tabel Applicant_Data berisi data lengkap pelamar, hasil tes pelamar, dan

status tes pelamar. Data dari tabel ini digunakan sebagai bukti pelamar yang

sudah melakukan tes dan tempat untuk menyimpan data sampel observasi

setiap pelamar yang telah menyelesaikan tes. Berikut adalah struktur tabel

Applicant_Data.

Tabel 3.4 Struktur Tabel Applicant_Data

Nama Field Tipe Data Constraint Keterangan

Applicant_ID Int(11) Primary Key Not Null Auto Increment

Kode unik setiap pelamar

Applicant_FullName Varchar(100) Not Null Nama lengkap pelamar

Applicant_NickName Varchar(20) Not Null Nama panggilan pelamar

Applicant_BirthPlace Varchar(40) Not Null Tempat lahir pelamar

Applicant_BirthDate Date Not Null Tanggal lahir pelamar

Applicant_LastEducation Int(1) Foreign Key Not Null

Kode unik pendidikan terakhir

Applicant_ContactNumber Varchar(20) Not Null Nomor Kontak pelamar

Applicant_ContactEmail Varchar(100) Not Null Alamat surat elektronik pelamar

Applicant_FormalAddress Text Not Null Alamat pada KTP pelamar

Applicant_CurrentAddress Text Not Null Alamat tempat tinggal pelamar sekarang

Applicant_DateTest DateTime Not Null Tanggal melakukan tes

Applicant_SequenceNumber Text Not Null Urutan nomor urut soal

Applicant_ExamNumber Text Not Null Urutan nomor soal yang muncul

Applicant_ExamAnswer Text Not Null Urutan Jawaban pelamar

Applicant_TestValue Int(3) Not Null Nilai hasil tes pelamar

Applicant_Status Int(1) Foreign Key Not Null

Kode unik dari hasil tes

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 39: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

5. Tabel Exam_Data

Tabel Exam_Data berisi data-data lengkap soal. Data dari tabel ini digunakan

untuk tes penerimaan karyawan baru yang dikerjakan oleh pelamar. Berikut

adalah struktur tabel Exam_Data.

Tabel 3.5 Struktur Tabel Exam_Data

Nama Field Tipe Data Constraint Keterangan

Exam_ID Int(11) Primary Key Not Null Auto Increment

Kode unik pada soal

Exam_TypeFormat Int(1) Foreign Key Not Null

Kode unik pada format soal

Exam_TypeQuestion Int(1) Foreign Key Not Null

Kode unik pada tipe soal

Exam_QuestionNoPicture Text Soal tanpa gambar

Exam_AnswerNoPicture_A Text Jawaban A tanpa gambar

Exam_AnswerNoPicture_B Text Jawaban B tanpa gambar

Exam_AnswerNoPicture_C Text Jawaban C tanpa gambar

Exam_AnswerNoPicture_D Text Jawaban D tanpa gambar

Exam_QuestionPicture Varchar(255) Soal dengan gambar

Exam_AnswerPicture_A Varchar(255) Jawaban A dengan gambar

Exam_AnswerPicture_B Varchar(255) Jawaban B dengan gambar

Exam_AnswerPicture_C Varchar(255) Jawaban C dengan gambar

Exam_AnswerPicture_D Varchar(255) Jawaban D dengan gambar

Exam_TrueAnswer Varchar(1) Not Null Jawaban benar dari soal

Exam_Status Int(1) Foreign Key Not Null

Kode unik untuk status soal

6. Tabel ExamTypeQuestion_Data

Tabel ExamTypeQuestion_Data berisi data detil tipe atau jenis soal seperti tes

IQ, matematika dan pengetahuan umum. Data dari tabel ini hanya digunakan

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 40: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

sebagai penunjuk status tipe pertanyaan pada soal tes. Berikut adalah struktur

tabel ApplicantStatus_Data.

Tabel 3.6 Struktur Tabel ExamTypeQuestion_Data

Nama Field Tipe Data Constraint Keterangan

ExamTypeQuestion_ID Int(1) Primary Key Not Null

Kode unik pada tipe soal

ExamTypeQuestion_Description Varchar(20) Not Null Deskripsi tipe soal

7. Tabel ExamTypeFormat_Data

Tabel ExamTypeFormat_Data berisi data detil format dari pertanyaan seperti

pertanyaan gambar jawaban gambar, pertanyaan gambar jawaban text,

pertanyaan text jawaban gambar, dan pertanyaan text jawaban text. Setiap

format soal mempunyai tampilan yang berbeda-beda. Data dari tabel ini

digunakan sebagai penunjuk format soal pada tes, memasukkan soal baru,

mengubah soal, dan menghapus soal. Berikut adalah struktur tabel

ExamTypeFormat_Data.

Tabel 3.7 Struktur Table ExamTypeFormat_Data

8. Tabel ExamStatus_Data

Tabel ExamStatus_Data berisi data detil status pertanyaan seperti aktif dan

tidak aktif. Ketika status soal aktif maka soal tersebut akan ditampilkan dalam

tes, sedangkan status soal tidak aktif maka soal tersebut tidak ditampilkan

dalam tes. Berikut adalah struktur tabel ExamStatus_Data.

Nama Field Tipe Data Constraint Keterangan

ExamTypeFormat_ID Int(1) Primary Key Not Null

Kode unik pada format soal

ExamTypeFormat_Description Varchar(20) Not Null Deskripsi format soal

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 41: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Tabel 3.8 Struktur Tabel ExamStatus_Data

Nama Field Tipe Data Constraint Keterangan

ExamStatus_ID Int(1) Primary Key Not Null

Kode unik pada status soal

ExamStatus_Description Varchar(20) Not Null Deskripsi status soal

3.5.3 Class Diagram

Class diagram merupakan suatu gambaran yang menghubungkan relasi antara

kelas-kelas yang ada. Terdapat beberapa kelas yang fungsinya berbeda-beda seperti

class Uri_Library yang digunakan untuk mendapatkan absolute path, class

Exam_Library yang digunakan untuk semua proses yang berhubungan dengan soal,

HMM_Library yang digunakan untuk semua proses yang berhubungan dengan

hidden markov model, Applicant_Library yang digunakan untuk semua proses yang

berhubungan dengan pelamar, UserManagement_Library yang digunakan untuk

semua proses yang berhubungan dengan data akun untuk masuk atau login kedalam

subsistem backend, Login_Library yang digunakan untuk proses login kedalam

subsistem backend, dan Mysql_Library yang digunakan untuk melakukan koneksi

ke dalam database. Dalam prosesnya class Login_Library,

UserManagement_Library, Applicant_Library, dan Exam_Library membutuhkan

class Mysql_Library dikarenakan terdapat banyak method yang prosesnya banyak

berhubungan dengan database. Berikut adalah class diagram yang digunakan

selama pembuatan sistem.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 42: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.43 Class Diagram

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 43: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

3.5.4 State Chart Diagram

Statechart diagram menunjukkan siklus hidup dari obyek tunggal, dari saat

dibuat sampai obyek tersebut dihapus. Diagram ini adalah cara tepat untuk

memodelkan perilaku dinamis sebuah kelas. Berdasarkan class diagram diatas

terdapat dua buah class yang dinamis seperti Exam_Library dengan method

ChangeStatusExam dan Applicant_Library dengan method InsertDataApplicant.

A. Method ChangeStatusExam

Gambar 3.44 Change Status Exam State Chart Diagram

Method ini digunakan untuk untuk melakukan proses ubah status dari soal.

Status soal diubah secara dinamis dengan melihat syarat status soal

sebelumnya. Status soal akan diubah menjadi non-aktif jika status soal

sebelumnya aktif dan sebaliknya, status soal akan diubah menjadi aktif jika

status soal sebelumnnya non-aktif.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 44: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

B. Method InsertDataApplicant

Gambar 3.45 Insert Data Applicant State Chart Diagram

Method ini digunakan untuk untuk melakukan proses memasukkan data

pelamar. Proses masukkan data dilakukan secara dinamis dengan melihat

pendidikan terakhir dari pelamar dan nilai akhir hasil tes pelamar. Jika tingkat

pendidikan terakhir pelamar SMP, SMA, atau D3 dan nilai hasil tes dibawah

50 maka pelamar dinyatakan tidak lulus dan sebaliknya jika hasil tes pelamar

diatas atau sama dengan 50 maka pelamar dinyatakan lulus. Jika tingkat

pendidikan terakhir pelamar S1, S2, atau S3 dan nilai hasil tes dibawah 65

maka pelamar dinyatakan tidak lulus dan sebaliknya jika hasil tes pelamar

diatas atau sama dengan 65 maka pelamar dinyatakan lulus.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 45: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

3.5.5 Tampilan Antarmuka

Sistem yang dibuat memiliki dua bagian subsistem, yaitu frontend dan backend.

Setiap subsistem memiliki perannya masing-masing, seperti frontend untuk tes

penerimaan karyawan baru dan backend untuk mengelola data soal, akun login

backend, dan hasil tes pelamar pekerja.

A. Subsistem Frontend

Dalam subsistem frontend memiliki empat halaman website yang memiliki

konten, yaitu halaman home, insert new applicant, test exam, dan thank you. Berikut

penjelasan tentang setiap halaman beserta dengan desain tampilan antarmuka.

1. Desain Antarmuka Halaman Home

Gambar 3.46 Desain Antarmuka Halaman Home

Pada gambar desain antarmuka halaman home di atas, hanya terdapat satu

button mulai tes yang berfungsi untuk memulai tes. Setelah button mulai tes

di-klik maka akan otomatis berpindah halaman ke insert new applicant yang

menampilkan form yang harus diisi oleh pelamar.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 46: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

2. Desain Antarmuka Halaman Insert New Applicant

Gambar 3.47 Desain Antarmuka Halaman Insert New Applicant

Pada gambar desain antarmuka halaman insert new applicant di atas, terdapat

form data pelamar pekerjaan dan button masukkan data. Setiap field pada form

di atas tervalidasi sesuai dengan syarat ketentuan yang ada. Pada saat button

ditekan, jika semua data hasil input valid maka akan langsung berpindah

halaman, dan jika tidak valid maka akan memunculkan pesan error.

3. Desain Antarmuka Halaman Test Exam

Gambar 3.48 Desain Antarmuka Halaman Test Exam

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 47: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Pada gambar desain antarmuka halaman test exam di halaman sebelumnya,

terdapat sebuah kotak yang menampilkan data pelamar seperti nama lengkap

dan nama panggilan beserta dengan tanggal ujian dan jumlah soal yang telah

dikerjakan dan soal maksimal. Kemudian terdapat field No. sebagai tempat

menampilkan data nomor soal, field pertanyaan untuk tempat menampilkan

pertanyaan dari soal dan field jawaban A,B,C,D untuk menampilkan jawaban

dari soal. Pada test exam terdapat validasi pada jawaban yang akan aktif jika

menekan tombol submit. Ketika menekan tombol submit bila jawaban telah

dipilih maka akan lanjut ke soal berikutnya, tetapi bila jawaban belum dipilih

maka akan memunculkan pesan error.

4. Desain Antarmuka Halaman Thank You

Gambar 3.49 Desain Antarmuka Halaman Thank You

Pada gambar desain antarmuka halaman thank you di atas, terdapat sebuah

kotak yang berisi ucapan terima kasih terhadap pelamar beserta dengan

informasi pengumuman lulus atau tidak lulus pelamar oleh staf HRD. Setelah

selama 10 detik pada halaman ini maka akan terjadi proses perpindahan

halaman secara otomatis ke halaman home frontend.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 48: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

B. Subsistem Backend

Dalam susbsistem backend memiliki sebelas halaman website yang memiliki

konten, yaitu halaman change password, detail applicant, forgot password, home,

insert new exam, insert new user, login, preview exam, update exam, view search

data applicant, view search exam dan change identify. Berikut penjelasan tentang

setiap halaman beserta desain tampilan antarmuka.

1. Desain Antarmuka Halaman Change Password

Gambar 3.50 Desain Antarmuka Halaman Change Password

Pada gambar desain antarmuka halaman change password di atas, terdapat

form ganti password dan sebuah button change password. Setiap field pada

form di atas tervalidasi sesuai dengan syarat dan ketentuan yang ada. Pada saat

button ditekan, jika semua data hasil input valid maka akan langsung berpindah

halaman, dan jika tidak valid maka akan memunculkan pesan error sampai

semua field valid.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 49: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

2. Desain Antarmuka Halaman Detail Applicant

Gambar 3.51 Desain Antarmuka Halaman Detail Applicant

Pada gambar desain antarmuka halaman detail applicant di atas, desain

antarmuka halaman ini hanya untuk menampilkan data detil dari data pelamar,

hasil tes pelamar, jawaban tes pelamar, urutan soal, dan sampel observasi

hidden markov model.

3. Desain Antarmuka Halaman Home

Gambar 3.52 Desain Antarmuka Halaman Home

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 50: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Pada gambar desain antarmuka halaman home di halaman sebelumnya

berfungsi hanya untuk memperlihatkan tampilan ketika berhasil melakukan

login pada backend.

4. Desain Antarmuka Halaman Insert New User

Gambar 3.53 Desain Antarmuka Halaman Insert New User

Pada gambar desain antarmuka halaman insert new user di atas, terdapat form

insert new user dan button insert user. Setiap field pada form di atas tervalidasi

sesuai dengan syarat ketentuan yang ada. Pada saat button ditekan, jika semua

data hasil input valid maka akan langsung berpindah halaman, dan jika tidak

valid maka akan memunculkan pesan error.

5. Desain Antarmuka Halaman Login

Gambar 3.54 Desain Antarmuka Halaman Login

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 51: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Pada gambar desain antarmuka login di halaman sebelumnya, terdapat pada

bagian kiri terdapat kotak yang isinya gambar untuk memperindah tampilan

login dan pada bagian sebelah kanan terdapat form login, teks forgot your

password yang ketika diklik akan melakukan perpindahan ke halaman forgot

password, dan satu button login. Setiap field pada form login tervalidasi sesuai

dengan syarat dan ketentuan yang ada. Pada saat button login ditekan, jika

semua data hasil input valid maka akan langsung berpindah halaman, dan jika

tidak valid maka akan memunculkan pesan error sampai semua field valid.

6. Desain Antarmuka Halaman Preview Exam

Gambar 3.55 Desain Antarmuka Halaman Preview Exam

Pada gambar desain antarmuka halaman preview exam di atas, halaman ini

digunakan untuk melihat hasil soal yang telah dibuat. Terdapat field No.

sebagai tempat menampilkan data nomor soal, field pertanyaan untuk tempat

menampilkan pertanyaan dari soal dan field jawaban A,B,C,D untuk

menampilkan jawaban dari soal.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 52: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

7. Desain Antarmuka Halaman Insert New Exam

Gambar 3.56 Desain Antarmuka Halaman Insert New Exam

Pada gambar desain antarmuka halaman insert new exam di atas, terdapat satu

combo box yang berguna untuk memilih jenis format soal sebelum

memasukkan soal baru. Pada combo box di atas terdapat beberapa pilihan

format soal seperti pertanyaan gambar jawaban gambar, pertanyaan gambar

jawaban text, pertanyaan text jawaban gambar, dan pertanyaan text jawaban

text. Berikut penjelasan desain antarmuka halaman insert new exam.

Gambar 3.57 Desain Antarmuka Halaman Insert New Exam Picture-Picture

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 53: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.58 Desain Antarmuka Halaman Insert New Exam Picture-Text

Gambar 3.59 Desain Antarmuka Halaman Insert New Exam Text-Picture

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 54: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.60 Desain Antarmuka Halaman Insert New Exam Text-Text

Di atas terdapat empat desain antarmuka sesuai dengan format soal. Setiap

field pada semua form di atas tervalidasi sesuai dengan syarat ketentuan yang

ada. Pada saat button ditekan, jika semua data hasil input valid maka akan

langsung berpindah halaman, dan jika tidak valid maka akan memunculkan

pesan error.

8. Desain Antarmuka Halaman Forgot Password

Gambar 3.61 Desain Antarmuka Halaman Forgot Password

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 55: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Pada gambar desain antarmuka halaman forgot password di halaman

sebelumnya, pada bagian kiri terdapat gambar untuk menghias tampilan

halaman dan pada bagian sebelah kanan terdapat form reset password dengan

field username berfungsi untuk mencari userid dan satu button search

question. Untuk melakukan reset password, user harus mengisi field username

terlebih dahulu dan menekan tombol search question. Pada saat button search

question ditekan, jika field username kosong akan menampilkan pesan error

dan jika field username tidak kosong maka akan menampilkan tampilan seperti

berikut.

Gambar 3.62 Desain Antarmuka Halaman Forgot Password Detail

Pada gambar desan antarmuka halaman forgot password detail di atas, pada

form reset password terdapat tampilan field baru seperti question answer, new

password dan confirm new password. Field question merupakan field yang

terisi terlebih dahulu karena digunakan sebagai pertanyaan agar user dapat

melakukan reset password. Setiap field pada form di atas tervalidasi sesuai

dengan syarat ketentuan yang ada. Pada saat button ditekan, jika semua data

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 56: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

hasil input valid maka akan langsung berpindah halaman, dan jika tidak valid

maka akan memunculkan pesan error.

9. Desain Antarmuka Halaman Update Exam

Gambar 3.63 Desain Antarmuka Halaman Update Exam Picture-Picture

Gambar 3.64 Desain Antarmuka Halaman Update Exam Picture-Text

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 57: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Gambar 3.65 Desain Antarmuka Halaman Update Exam Text-Picture

Gambar 3.66 Desain Antarmuka Halaman Update Exam Text-Text

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 58: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Pada gambar desain antarmuka halaman update exam di halaman sebelumnya,

terdapat empat macam format form sesuai dengan format soal yang digunakan.

Setiap field pada semua form di atas tervalidasi sesuai dengan syarat ketentuan

yang ada. Pada saat button ditekan, jika semua data hasil input valid maka akan

langsung berpindah halaman, dan jika tidak valid maka akan memunculkan

pesan error.

10. Desain Antarmuka Halaman View Search Data Applicant

Gambar 3.67 Desain Antarmuka Halaman View Search Data Applicant

Pada gambar desain antarmuka halaman view search data applicant di atas,

pada bagian kiri atas terdapat form search yang memiliki field search by name

dan button search applicant. Form search ini digunakan untuk melakukan

pencarian data pelamar berdasarkan nama pelamar. Pada bagian kanan atas

terdapat empat buah button dan satu buah field page number yang berfungsi

untuk paging pada data tabel. Pada bagian bawah terdapat tabel yang

menampilkan semua data pelamar hasil query database.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 59: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

11. Desain Antarmuka Halaman View Search Exam

Gambar 3.68 Desain Antarmuka Halaman View Search Exam

Pada gambar desain antarmuka halaman view search exam di atas, pada bagian

kiri atas terdapat form search yang memiliki field search by name dan button

search exam. Form search ini digunakan untuk melakukan pencarian data

pelamar berdasarkan id soal. Pada bagian kanan atas terdapat empat buah

button dan satu buah field page number yang berfungsi untuk paging pada data

tabel. Pada bagian bawah terdapat tabel yang menampilkan semua data

pelamar hasil query database.

12. Desain Antarmuka Halaman Change Identify

Gambar 3.69 Desain Antarmuka Halaman Change Identify

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015

Page 60: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat …kc.umn.ac.id/2667/4/BAB III.pdf · 2017-10-12 · pelamar dan memeriksa hasil tes karyawan. Dalam

Pada gambar desain antarmuka halaman change identify di halaman

sebelumnya, terdapat form ganti tanda identitas dan sebuah button change

identify. Setiap field pada form di atas tervalidasi sesuai dengan syarat dan

ketentuan yang ada. Pada saat button ditekan, jika semua data hasil input valid

maka akan langsung berpindah halaman, dan jika tidak valid maka akan

memunculkan pesan error sampai semua field valid.

Rancang Bangun ..., Steve Sentosa, FTI UMN, 2015