bab 4 pembahasan 4.1. perancangan aplikasirepository.unika.ac.id/20057/5/15.n1.0015 daniel... ·...
Post on 10-Oct-2020
0 Views
Preview:
TRANSCRIPT
25
BAB 4 PEMBAHASAN
4.1. Perancangan Aplikasi
Tes psikologi analisa kepribadian DISC merupakan aplikasi tes yang
digunakan untuk mengetahui kepribadian dari orang. Aplikasi ini dalam
perancangannya berbasis web. Berikut diagram alir dari aplikasi tes psikologi
analisa kepribadian DISC:
Gambar 4. 1 Flowchart Sistem
26
Perancangan use case digunakan untuk mengetahui fungsi-fungsi aplikasi
setiap user yang menggunakan aplikasi tersebut. Use case dari aplikasi tes
psikologi analisa kepribadian DISC adalah sebagai berikut:
Gambar 4. 2 Use Case Aplikasi
Perancangan database menggunakan Entity Relational Diagram (ERD) dari
aplikasi tes psikologi analisa kepribadian DISC adalah sebagai berikut:
Gambar 4. 3 Entitity Relational Database Aplikasi
27
Aplikasi ini juga dirancang desain User Interface menggunakan balsamiq
untuk mockup. Berikut rancangan tampilan awal aplikasi:
Gambar 4. 4 Rancangan Tampilan Login
Gambar 4. 5 Rancangan Tampilan Daftar Peserta untuk Staff
28
Gambar 4. 6 Rancangan Tampilan Management User untuk Staff
Gambar 4. 7 Rancangan Tampilan Petunjuk Peserta
29
Gambar 4. 8 Rancangan Tampilan Soal Peserta
Gambar 4. 9 Rancangan Tampilan Selesai Tes Peserta
30
Gambar 4. 10 Rancangan Tampilan Daftar Peserta untuk Psikolog
Gambar 4. 11 Rancangan Tampilan Hasil dan Grafik Tes Peserta untuk Psikolog
31
Gambar 4. 12 Rancangan Tampilan Kesimpulan Tes Peserta untuk Psikolog
4.2. Pengembangan Aplikasi
Rancang bangun tes psikologi analisa kepribadian DISC dalam
pengembangannya menggunakan bahasa pemograman PHP dan bootstrap.
Pemograman menggunakan editor Visual Studio Code. Sementara sistem
database menggunakan MySQL dengan menggunakan tool PHPMy Admin.
Gambar 4. 13 Tampilan Editor Visual Studio Code
32
Gambar 4. 14 Tampilan Tool Database PHPMyAdmin
Pengguna dari aplikasi ini dalah peserta tes, psikolog, dan staff. Jika peserta
tes ingin melakukan tes, maka peserta diwajibkan untuk login ke sistem. Jika
peserta belum mempunyai username dan email, maka peserta wajib lapor ke staff
dan staff membuat user baru dengan memasukkan data peserta di halaman
register. Setelah user baru dibuat, maka peserta tes diberikan username dan
password oleh staff sehingga peserta tes bisa masuk ke sistem.
Gambar 4. 15 Tampilan Halaman Login
33
Gambar 4. 16 Tampilan halaman register
Form login digunakan untuk masuk ke sistem. Jika belum mempunyai
username dan password maka harus regritrasi terlebih dahulu. Form regristrasi
tediri dari 8 data. Data tersebut dimasukkan ke dalam form melalui button
sehingga bisa diproses ke proses daftar.
<div class="col-sm-4 offset-md-4" align="center" style="margin-bottom:5%" >
<form class="form-signin" action="prosesdaftar.php" method="post" align="center">
<img class="mb-4" src="asset/logo_ppt.png" alt="" width="320" height="150">
<h1 class="h3 mb-3 font-weight-normal">Daftar Baru</h1>
<p class="p">Nama Lengkap </p>
<label for="nama" class="sr-only" >Nama</label>
<input name="nama" type="text" id="nama" class="form-control"
placeholder="Nama" required autofocus>
<p class="p">Username </p>
<label for="username" class="sr-only" >Username</label>
<input name="username" type="text" id="username" class="form-control"
placeholder="Username" required autofocus>
<p class="p">Organisasi </p>
<label for="organisasi" class="sr-only" >Organisasi</label>
<input name="organisasi" type="text" id="organisasi" class="form-control"
placeholder="Organisasi" required autofocus>
<p class="p">Position </p>
<label for="posisi" class="sr-only" >Posisi</label>
<input name="posisi" type="text" id="posisi" class="form-control"
placeholder="Position" required autofocus>
<p class="p">Nomor Telepon </p>
34
<label for="telp" class="sr-only" >No Telepon</label>
<input name="telp" type="text" id="telp" class="form-control" placeholder="Nomor
Telepon" required autofocus>
<p class="p">Gender </p>
<label for="gender" class="sr-only">Gender</label>
<div class="card mx-auto border-secondary mb-3" style="width: 100%;">
<div class="card-body">
<input name="gender" type="radio" id="gender" class="radioL" value= "L" >Laki-
Laki
<inputname="gender" type="radio" id="gender" class="radioP"
value="P">Perempuan
</div>
</div>
<p class="p">Password </p>
<label for="password" class="sr-only">Password</label>
<input name="password" type="password" id="password" class="form-control"
placeholder="Password" required>
<p class="p">Role </p>
<select class="form-control" id="role" name="role">
<?php
$koneksi = mysqli_connect("localhost","root","","skripsi") or die (mysqli_error());
$sql = "SELECT * FROM role WHERE deleted ='no'";
$result = mysqli_query($koneksi,$sql);
echo "<option>Pilih</option>";
while ($row = mysqli_fetch_object($result)) {
echo "<option>$row->role</option>";
}
?>
</select>
<input type='hidden' name='aktif' value='1'>
<div class="checkbox mb-3 border-top">
<!-- <label>
Sudah punya akun? <a href="logout.php"><b>Login</b></a>
</label> -->
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit"
value="Daftar">Submit</button>
<!-- <p class="mt-5 mb-3 text-muted">© 2017-2018</p> -->
</form> Gambar 4. 17 Script Tampilan Register Akun
35
Form dikirimkan ke prosesdaftar.php dengan metode post. Pada proses
daftar data dimasukkan database dengan metode MySQL Insert.
Dalam insert username ke database, diperlukan adanya validasi terlebih
dahulu agar data lebih valid. Jika username sudah ada sebelumnya maka akan
menampilkan warning pertama, jika dalam pengisian masih ada data kosong
maka warning kedua akan jalan, jika tidak ada bermasalah maka akan masuk ke
database.
if($query->num_rows != 0) {
?>
<div class="fixed-top alert alert-warning mx-auto" style="width: 500px;" role="alert">
<strong>Username Sudah Terdaftar!</strong> Klik tombol <a
href='Login.php'>Login</a> untuk masuk ke sistem!
</div>
<?php
} else {
if(!$username || !$pass || !$nama || !$organisasi || !$posisi || !$gender || !$telp) { ?>
<div class="fixed-top alert alert-danger mx-auto" style="width: 500px;" role="alert">
<strong>Masih ada data yang kosong!</strong> Pastikan data anda terisi semua.
</div>
<?php
} else {
$data = "INSERT INTO user VALUES ('','$username', '$pass', '$nama',
'$organisasi', '$posisi', '$gender', '$telp', '$role', '$aktif')";
$simpan = mysqli_query($koneksi,$data) or die (mysqli_error($koneksi));
if($simpan) {
?>
<div class="fixed-top alert alert-success mx-auto" style="width: 500px;"
role="alert">
<strong>Pendaftaran Sukses!</strong> Silahkan <a href='login.php'>Login</a>
</div>
<?php
} else {
?>
<div class="fixed-top alert alert-danger mx-auto" style="width: 500px;" role="alert">
<strong>Proses Gagal!</strong> <a href='daftar.php'>Reload</a>
</div> Gambar 4. 18 Script Proses Daftar
36
Di proses login, hasil username dan password dicocokan dari database. Ketika
username dan password tidak cocok maka akan menampilkan tulisan tidak
cocok. Ketika cocok maka akan mengarahkan ke halaman selanjutnya.
$sql = "SELECT * FROM user WHERE username = '$username'";
$query = mysqli_query($koneksi,$sql) or die (mysqli_error($koneksi));
$hasil = $query->fetch_assoc();
if($query->num_rows == 0) {
?>
<div class="fixed-top alert alert-warning mx-auto" style="width: 500px;" role="alert">
<strong>Username Anda Belum Terdaftar!</strong> Hubungi administrator kami
untuk membuat username baru.
</div>
<?php
} else {
if($pass <> $hasil['password']) {
?>
<div class="fixed-top alert alert-danger mx-auto" style="width: 500px;" role="alert">
<strong>Password Salah!</strong> Pastikan Password anda benar.
</div>
<?php
}
else if ($hasil['role'] == "peserta"){
$_SESSION['username'] = $hasil['username'];
header('location:index.php');
}
else if ($hasil['role'] == "psikolog"){
$_SESSION['username'] = $hasil['username'];
header('location:psikolog/index_psi.php');
}
else if ($hasil['role'] == "admin"){
$_SESSION['username'] = $hasil['username'];
header('location:daftar.php');
}
}
Gambar 4. 19 Script Tampilan Login
Baik daftar maupun login berasal dari tabel database yang sama. Yaitu tabel
user. Tabel user teridiri atas id_user, username, password, nama, organisasi,
37
posisi, gender, telepon, role, dan aktif. Role digunakan untuk mengetahui user
memiliki role psikolog atau peserta atau staff. Sementara aktif digunakan untuk
mengetahui user aktif atau tidak. Jika user dihapus atau sudah selesai proses nya
maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff.
Berikut struktur tabel user:
Gambar 4. 20 Struktur Tabel User
Untuk proses login hanya digunakan username dan email dan disamakan
dengan kolom inputan. Sementara sisanya dan termasuk username dan email
juga digunakan di proses daftar.
Selain medaftar peserta staff juga dapat melihat user management. User
management digunakan untuk melihat user yang aktif, mengedit data user, dan
menghapus user. Berikut tampilan user management:
38
Gambar 4. 21 Tampilan User Management
Untuk menampilkan user, dibutuhkan tabel yang berisi data dari user dan
button delete untuk menghapus user. Berikut script tabel user manajemen:
<div class="row">
<div style="margin-left: 4%;" class="col-11">
<table class="table table-responsive table-bordered table-hover text-center
datatab">
<thead class="thead-dark">
<tr>
<th class="w-20">NO</th>
<th class="w-15">ID</th>
<th class="w-25">USERNAME</th>
<th class="w-10">GENDER</th>
<th class="w-25">ORGANISASI</th>
<th class="w-25">POSISI</th>
<th class="w-50">TELEPON</th>
<th class="w-50">ROLE</th>
<th class="w-50">ACTION</th>
</tr>
</thead>
<tbody>
<?php
include "dbcon.php";
$i=1;
$sql = "SELECT * FROM user WHERE user.aktif=1";
$res = mysqli_query($koneksi,$sql);
while($row=$res->fetch_object()){
echo "<tr>
<td>$i</td>
<td>$row->id_user</td>
39
<td>$row->username</td>
<td>$row->gender</td>
<td>$row->organisasi</td>
<td>$row->posisi</td>
<td>$row->telp</td>
<td>$row->role</td>
<td>
<a class='btn btn-danger konfirm' data-id='$row->id_user'
style='color:white'><span class='oi oi-trash'></span> Delete</a>
</td>
</tr>";
$i++;
}
?>
</tbody>
</table>
</div>
</div> Gambar 4. 22 Script Tabel User Manajemen
Untuk filtering data dalam tabel, menggunakan plugin data tabel dengan
basis javascript. Hanya dengan mendownload asset dari data table dan meletakan
javascript maka akan tampil secara otomatis filtering dan paging akan tampil
pada tabel.
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
z
<script>
$(document).ready(function() {
$('.datatab').DataTable();
} );
</script> Gambar 4. 23 Script Data Tabel
Ketika tombol hapus diklik, maka akan keluar konfirmasi dahulu, agar
jika tidak sengaja diklik maka tidak langsung terhapus tetapi ada alert konfirmasi
terlebih dahulu.
40
Gambar 4. 24 Alert Konfirmasi Hapus User
Alert konfirmasi menggunakan plugin sweetalert.js karena mempunyai
tampilan lebih dinamis daripada alert javascript standar.
Untuk menggunakan sweetalert, maka langkah awal harus
menambahkan script source dari online sweetalert. Lalu menambahkan function
yang sudah ditambahkan pada bagian button. Dengan menambahkan variable
tujuan yaitu berisi data id dari button, sehingga id_user dapat dikenali. Setelah
itu pengaturan standar dari sweetalert yang berisi judul, logo, button, dan lain-
lain. Dengan logika if jika yes maka akan diberi link tujuan delete dan
keterangan dihapus, jika tidak maka cancel. Berikut script dari sweetalert:
<script src="https://unpkg.com/sweetalert2@7.8.2/dist/sweetalert2.all.js"></script>
<!-- Confirmjs -->
<script type="text/javascript">
$('.konfirm').click(function(){
var tujuan=$(this).data('id');
swal({
title: 'Are you sure?',
text: 'Delete User',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes!',
41
cancelButtonText: 'No.'
}).then((result) => {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
window.location.href="admindeleteusr.php?id="+tujuan;
}
});
});
</script> Gambar 4. 25 Script Sweetalert
Untuk menghapus user, maka akan menuju proses admindeleteuser.php.
Agar user tidak hilang secara langsung tetapi ada storing data, maka
menggunakan update aktif 0. Jika 0 maka tidak tampil di tabel user management
tetapi masih disimpan dalam database sebagai data. Berikut script delete user:
$id =$_REQUEST['id'];
$sql = "UPDATE user SET aktif=0 WHERE id_user=$id";
mysqli_query($koneksi,$sql);
header('location:adminusermnj.php'); Gambar 4. 26 Script Delete User
Jika username mempunyai role sebagai peserta, maka proses login akan
mengarahkan ke instruksi test. Isntruksi tes berfungsi untuk memberikan
pengarahan umum dan peraturan tes.
Gambar 4. 27 Tampilan Instruksi Tes
42
Script yang digunakan untuk menampilkan instruksi tes adalah sebagai
berikut:
<h1 class="display-4">MARSTON MODEL INDONESIA</h1>
<H3 align= 'left'>PETUNJUK</H3>
<div class="container-fluid">
<p align='justify' class="lead">Bayangkan Anda berada dalam salah satu 'setting'
lingkungan (kerja, keluarga, sekolah, atau lainnya) sesuai dengan tujuan
pemeriksaan. Tugas Anda, membaca 4 kalimat yang terdapat di dalam masing-
masing kotak. Pilih salah satu jawaban pada kolom P disamping kalimat yang
<b>PALING</b> menggambarkan diri anda dalam setting yang sudah ditentukan
tersebut dan pilih jawaban pada kolom K disamping kalimat yang <b>KURANG</b>
menggambarkan diri anda dalam setting yang sudah ditentukan tersebut. Untuk
masing-masing soal gambaran, pilih satu respon <b>PALING</b> dan
<b>KURANG</b>.</p>
</div>
<form action="mulai.php" method="post">
<div align="center">
<input class = " btn btn-primary btn-lg active" type="submit" name="mulai"
value="MULAI">
</div> Gambar 4. 28 Script Tampilan Instruksi Tes
Setelah instruksi, peserta akan ditujukan ke soal.php yaitu file untuk
menampilkan soal.Soal ditampilkan dengan format standar. Kolom P digunakan
untuk menjawab jika pernyataan di kanan paling sesuai dengan kepribadian
peserta. Sementara kolom K digunakan untuk menjawab jika pernyataan kurang
sesuai dengan kepribadian peserta tes. Tombol next digunakan untuk
melanjutkan ke soal selanjutnya.
Gambar 4. 29 Tampilan Soal Tes
43
Pada tampilan soal, soal ditampilkan menggunakan tabel. Tabel yang
dibutuhkan ada 4, karena bentuk baku soal untuk tes DISC menggunakan format
tampilan seperti pada gambar 4.23. Tabel pertama yaitu tabel besar hanya
sebagai wadah tabel. Lalu tabel 2 berada di kolom P, Lalu tabel 3 berada di
kolom K dan tabel 4 berada di kolom pernyataan. Isi dari tabel 2,3, dan 4 berasal
dari database kemudian menggunakan looping untuk ditampilkan di tampilan
soal. Tabel 2 dan 3 merupakan hasil looping database dari soal ganjil dan genap.
Sementara tabel 4 merupakan soal yang ditampilkan dari soal genap. Script yang
digunakan untuk menampilkan soal adalah sebagai berikut:
<h3 align="center">ASSESSMENT TEST</h3>
<div class="card mx-auto border-info mb-3" style="width: 60%;">
<div class="card-body">
<div class="container mb-4">
<div class="col-12">
<table class="table table-bordered text-center">
<!-- judul -->
<thead class="thead-dark">
<tr>
<th class="w-5">P</th>
<th class="w-5">K</th>
<th class="w-50">PERNYATAAN</th>
<!-- <th class="w-20"></th> -->
</tr>
</thead>
<tr>
<?php
include "dbcon.php";
include "pagination.php";
while($data = mysqli_fetch_array($quer)){
?>
<!-- form jawaban dan soal -->
<td style="width:1%;">
<table class="table table-responsive text-center table-hover">
<form action="update.php" method="post" id="formAdd">
<input type="hidden" name="halaman" value="<?php echo
$_GET['halaman']?>">
44
<input type="hidden" name="id[]" value="<?php echo $data['id_soal'];
?>">
<input type="hidden" name="jumlah" value="<?php echo $jumlah; ?>">
<th>
<div class="col-2">
<input class="DataA<?php echo $data['cls']?> pila"
name="pilihan<?php echo $data['id_soal']?>" type="radio" id = "pilihan<?php echo
$data['id_soal']?>" value="<?php echo $data['kuncia'];?>">
</th>
</tr>
<th>
<div class="col-2">
<input class="DataB<?php echo $data['cls']?> pilb"
name="pilihan<?php echo $data['id_soal']?>" type="radio" id = "pilihan<?php echo
$data['id_soal']?>" value="<?php echo $data['kuncib'];?>">
</th>
</tr>
<th>
<div class="col-2">
<input class="DataC<?php echo $data['cls']?> pilc"
name="pilihan<?php echo $data['id_soal']?>" type="radio" id = "pilihan<?php echo
$data['id_soal']?>" value="<?php echo $data['kuncic'];?>">
</th>
</tr>
<th>
<div class="col-2">
<input class="DataD<?php echo $data['cls']?> pild"
name="pilihan<?php echo $data['id_soal']?>" type="radio" id = "pilihan<?php echo
$data['id_soal']?>" value="<?php echo $data['kuncid'];?>"required/>
</th>
</tr>
</table>
</td>
<?php }?>
<td>
<table class="table text-center">
<tbody>
<tr>
<?php
$nom = $no+2;
$sql = "SELECT * FROM soal WHERE id_soal=$nom";
$res = mysqli_query($koneksi,$sql);
while($row = mysqli_fetch_array($res)){
?>
<th> <?php echo $row['a'];?></th>
45
</tr>
<th> <?php echo $row['b'];?></th>
</tr>
<th> <?php echo $row['c'];?></th>
</tr>
<th> <?php echo $row['d'];?></th><?php }?>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!-- submit-->
<div align="right">
<button type="submit" class="btn btn-success" name="update"> Next <span class="oi
oi-arrow-circle-right"> </span></button>
</div>
</div>
</div>
</div> Gambar 4. 30 Script Tampilan Soal Tes
Pada tampilan soal hanya ditampilkan dari data yang disimpan dalam
database. Kemudian dalam penampilannya, soal dimasukkan ke dalam tabel.
Kemudian perpindahan antar soal menggunakan tombol next. Tombol next ini
menggunakan sistem pagination.html Pada $halaman digunakan untuk batas
data yang akan ditampilkan dalam 1 halaman. Kemudian $page digunakan untuk
membuat url halaman dengan 1 adalah default halaman. Sementara $mulai
perhitungan halaman, $query untuk menampilkan data dengan Batasan per page,
$pages untuk membulatkan hasil dan total jumlah age. Berikut script pagination:
$halaman = 2;
$page = isset($_GET["halaman"]) ? (int)$_GET["halaman"] : 1;
$mulai = ($page>1) ? ($page * $halaman) - $halaman : 0;
$query= mysqli_query($koneksi,"SELECT * FROM soal");
$jumlah = mysqli_num_rows($query);
$pages = ceil($jumlah/$halaman);
46
$quer = mysqli_query($koneksi, "SELECT * FROM soal LIMIT $mulai, $halaman")
or die (mysqli_error($koneksi));
$no =$mulai; Gambar 4. 31 Script Pagination
Lalu pada bagian update di sertakan file pagination dengan include dan
pada bagian bawah soal digunakan perulangan dan pembatasan. Ketika user klik
next maka akan menuju update sehingga akan menuju link
soal.php?halaman='.$next.'"'.";. Sebelum menuju link tersebut, halaman dicek
terlebih dahulu. Jika halaman sudah maksimal yaitu 24 maka halaman akan tetap
24 dan akan menuju link end_test. Ini dilakukan agar saat halaman terakhir tidak
terus menuju halaman 25 dimana halaman 25 tidak ada data. Lalu pengecekan
terakhir bila halaman kurang dari 2 maka halaman 1 agar halaman tidak menjadi
0 dimana halman 0 tidak ada data. Jika tidak maka halaman akan bertambah 1
seperti biasa. Berikut script proses pagination:
echo '<script language="javascript">';
if($halaman>=24){
$halaman=24;
header('location:end_test.php');
}
else if ($halaman<2){
$halaman=1;
$next=$halaman+1;
}
else{
$next=$halaman+1;
}
echo 'location.href="soal.php?halaman='.$next.'"'.";";
echo '</script>';
Gambar 4. 32 Script Pagination Pada Bagian update jawaban
Agar jawaban tidak bisa kembar antara pilihan paling dan kurang maka
diberi function javascript. Data A1 penjabarannya adalah Data merupakan nama
47
class, A merupakan pilihan jawaban, 1 adalah class dari P atau K. Dalam
pengecekan menggunakan fungsi if. Jika Data A1 sudah di klik maka data A2
disabled dan yang lain masih bisa diklik. Jika data A2 diklik maka data A1
disabled dan data lain masih bisa dan seterusnya. Berikut script fungsi agar
jawaban tidak kembar:
<script>
$('.pila').click(function(){
if($('.DataA1:checked').length == 1){
$(".DataA2").attr('disabled', true);
$(".DataB2").attr('disabled', false);
$(".DataC2").attr('disabled', false);
$(".DataD2").attr('disabled', false);
}
if($('.DataA2:checked').length == 1){
$(".DataA1").attr('disabled', true);
$(".DataB1").attr('disabled', false);
$(".DataC1").attr('disabled', false);
$(".DataD1").attr('disabled', false);
}
});
$('.pilb').click(function(){
if($('.DataB1:checked').length == 1){
$(".DataA2").attr('disabled', false);
$(".DataB2").attr('disabled', true);
$(".DataC2").attr('disabled', false);
$(".DataD2").attr('disabled', false);
}
if($('.DataB2:checked').length == 1){
$(".DataA1").attr('disabled', false);
$(".DataB1").attr('disabled', true);
$(".DataC1").attr('disabled', false);
$(".DataD1").attr('disabled', false);
}
});
$('.pilc').click(function(){
if($('.DataC1:checked').length == 1){
$(".DataA2").attr('disabled', false);
$(".DataB2").attr('disabled', false);
48
$(".DataC2").attr('disabled', true);
$(".DataD2").attr('disabled', false);
}
if($('.DataC2:checked').length == 1){
$(".DataA1").attr('disabled', false);
$(".DataB1").attr('disabled', false);
$(".DataC1").attr('disabled', true);
$(".DataD1").attr('disabled', false);
}
});
$('.pild').click(function(){
if($('.DataD1:checked').length == 1){
$(".DataA2").attr('disabled', false);
$(".DataB2").attr('disabled', false);
$(".DataC2").attr('disabled', false);
$(".DataD2").attr('disabled', true);
}
if($('.DataD2:checked').length == 1){
$(".DataA1").attr('disabled', false);
$(".DataB1").attr('disabled', false);
$(".DataC1").attr('disabled', false);
$(".DataD1").attr('disabled', true);
}
});
</script> Gambar 4. 33 Script Soal Jawaban Tidak Kembar
Untuk memasukkan jawaban soal ke database, maka dalam tombol next
terdapat form dalam metode post menuju ke file update.php. Dalam
memasukkan diperlukan penyimpanan session terlebih dahulu karena jawaban
di update 2 jawaban per halaman session berfungsi menyimpan jawaban
sebelumnya dan setelah update ke soal berikutnya jawaban sebelumnya masih
tersimpan tidak hilang karena update null. Berikut script dari update:
$sql = "UPDATE jawaban SET soal1='$_SESSION[soal1]',
soal2='$_SESSION[soal2]', soal3='$_SESSION[soal3]', soal4='$_SESSION[soal4]',
soal5='$_SESSION[soal5]', soal5='$_SESSION[soal5]', soal6='$_SESSION[soal6]',
soal7='$_SESSION[soal7]', soal8='$_SESSION[soal8]', soal9='$_SESSION[soal9]',
soal10='$_SESSION[soal10]', soal11='$_SESSION[soal11]',
soal12='$_SESSION[soal12]', soal13='$_SESSION[soal13]',
soal14='$_SESSION[soal14]', soal15='$_SESSION[soal15]',
49
soal16='$_SESSION[soal16]', soal17='$_SESSION[soal17]',
soal18='$_SESSION[soal18]', soal19='$_SESSION[soal19]',
soal20='$_SESSION[soal20]', soal21='$_SESSION[soal21]',
soal22='$_SESSION[soal22]', soal23='$_SESSION[soal23]',
soal24='$_SESSION[soal24]', soal25='$_SESSION[soal25]',
soal26='$_SESSION[soal26]', soal27='$_SESSION[soal27]',
soal28='$_SESSION[soal28]', soal29='$_SESSION[soal29]',
soal30='$_SESSION[soal30]', soal31='$_SESSION[soal31]',
soal32='$_SESSION[soal32]', soal33='$_SESSION[soal33]',
soal34='$_SESSION[soal34]', soal35='$_SESSION[soal35]',
soal36='$_SESSION[soal36]', soal37='$_SESSION[soal37]',
soal38='$_SESSION[soal38]', soal39='$_SESSION[soal39]',
soal40='$_SESSION[soal40]', soal41='$_SESSION[soal41]',
soal42='$_SESSION[soal42]', soal43='$_SESSION[soal43]',
soal44='$_SESSION[soal44]', soal45='$_SESSION[soal45]',
soal46='$_SESSION[soal46]', soal47='$_SESSION[soal47]',
soal48='$_SESSION[soal48]', tanggal=NOW() WHERE username='$username'";
mysqli_query($koneksi,$sql); Gambar 4. 34 Script Update Jawaban ke Database
Setelah peserta selesai menjawab maka akan diarahkan file end test dimana
hanya pemberitahuan untuk menghubungi staff.
Gambar 4. 35 Tampilan Tes Selesai
Script dari tampilan selesai tes diatas adalah sebagai berikut:
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h3 class="container-fluid"><b>TERIMA KASIH TELAH MELAKASANAKAN TES
DISC INI!</b></h3>
<div class="container-fluid">
<H3>Silahkan Hubungi Staff Kami</H3>
</div> Gambar 4. 36 Script Tes Selesai
50
Setelah jawaban peserta sudah masuk ke database, maka dari itu jawaban
secara otomatis dihitung oleh program. Sehingga psikolog tidak perlu untuk
menghitung jawaban secara manual. Sebelum masuk ke hasil tes peserta, maka
ada tabel untuk mengetahui data peserta mana yang akan dilihat.
Gambar 4. 37 Tampilan Data Peserta untuk Psikolog
Setelah klik tombol hasil tes maka akan tampil nilai dan grafik dari peserta
yang diklik
Gambar 4. 38 Tampilan Hasil Jawaban untuk Psikolog
51
Gambar 4. 39 Tampilan Grafik untuk Psikolog
Tabel data peserta menggunakan tabel dimana data diambil dari database.
Pada kolom action terdiri dari 3 form untuk menampilkan data jawaban dari
peserta, print, dan melihat kesimpulan. Form digunakan untuk mengirimkan data
yang dipilih sehingga data sesuai dengan user yang akan dilihat. Script untuk
menampilkan tabel data peserta adalah sebagai berikut:
<table class="table table-responsive table-bordered table-hover text-center datatab">
<thead class="thead-dark">
<tr>
<th class="w-20">NO</th>
<th class="w-15
">ID</th>
<th class="w-25">NAMA</th>
<th class="w-10">GENDER</th>
<th class="w-25">ORGANISASI</th>
<th class="w-25">POSISI</th>
<th class="w-20">TELEPON</th>
<th class="w-25">ACTION</th>
</tr>
</thead>
<?php
include "dbcon.php";
$i=1;
$sql = "SELECT * FROM jawaban, user WHERE
jawaban.username=user.username AND user.role='peserta' ORDER BY id ASC";
$res = mysqli_query($koneksi,$sql);
while($row=$res->fetch_object()){
52
echo "<tr>
<td>$i</td>
<td>$row->id</td>
<td>$row->nama</td>
<td>$row->gender</td>
<td>$row->organisasi</td>
<td>$row->posisi</td>
<td>$row->telp</td>
<td>
<form class='form-group' action='sorting.php' method='post' style='margin-
left:-25%;'>
<input type='hidden' name='id' value='$row->id'>
<input type='hidden' name='username' value='$row->nama'>
<input type='hidden' name='gender' value='$row->gender'>
<input type='hidden' name='tanggal' value='$row->tanggal'>
<button title='Hasil Tes' type='submit' name='lihat'class='btn btn-
success'><span class='oi oi-clipboard'></span></button>
</form>
<form class='form-group' action='print.php' method='post' target='_blank'
style='margin-top:-28%; margin-left:30%;'>
<input type='hidden' name='id' value='$row->id'>
<input type='hidden' name='username' value='$row->nama'>
<input type='hidden' name='gender' value='$row->gender'>
<input type='hidden' name='tanggal' value='$row->tanggal'>
<button title='Print'type='submit' name='print'class='btn btn-warning'><span
class='oi oi-print'></span></button>
</form>
<form class='form-group' action='kesimpulan.php' method='post'
style='margin-top:-28%; margin-left:80%;'>
<input type='hidden' name='id' value='$row->id'>
<input type='hidden' name='username' value='$row->nama'>
<input type='hidden' name='gender' value='$row->gender'>
<input type='hidden' name='tanggal' value='$row->tanggal'>
<button title='Kesimpulan'type='submit' name='simpulan'class='btn btn-
danger'><span class='oi oi-clipboard'></span></button>
</form>
</td>
</tr>";
$i++;
}
?>
</table> Gambar 4. 40 Script data peserta untuk Psikolog
53
Hasil analisis jumlah DISC pada jawaban tes peserta dihitung berdasarkan
jawaban yang sudah memiliki nilai tiap pilihan. Pertama, dengan select database
untuk mengambil data yang mau di tes. Lalu dengan if clause jika data dalam
database D maka akan dihitung dalam D, jika I maka dihitung dalam I. Setelah
itu ditampilkan. Dilakukan dengan looping sebanyak 48 kali. Jika nomor genap
(jawaban kurang sesuai) maka menggunakan variable $d, $i, dan seterusnya,
Sementara nomor ganjil (jawaban paling sesuai) menggunakan variable $da, $ia,
dan seterusnya. Script untuk perhitungan jawaban adalah sebagai berikut:
$sql = "SELECT * FROM jawaban,user WHERE jawaban.username=user.username
AND id = $id_peserta;";
$jawaban= mysqli_query($koneksi,$sql);
$d=0;
$i=0;
$s=0;
$c=0;
$n=0;
$da=0;
$ia=0;
$sa=0;
$ca=0;
$na=0;
// die(var_dump($tanggal));
while ($data= mysqli_fetch_object($jawaban))
{
for ($pag=1; $pag<=48 ; $pag++) {
if($pag % 2 == 0){
$a = 'soal'.(string)$pag;
if ($data->{$a}=='D'){
$d++;
}
if ($data->{$a}=='I'){
$i++;
}
if ($data->{$a}=='S'){
$s++;
54
}
if ($data->{$a}=='C'){
$c++;
}
if ($data->{$a}=='N'){
$n++;
}
}
else {
$a = 'soal'.(string)$pag;
if ($data->{$a}=='D'){
$da++;
}
if ($data->{$a}=='I'){
$ia++;
}
if ($data->{$a}=='S'){
$sa++;
}
if ($data->{$a}=='C'){
$ca++;
}
if ($data->{$a}=='N'){
$na++;
}
}
}
?>
<div align="left" style="margin-bottom: 2%; margin-top:-2%;">
<a href='index_psi.php' class='btn btn-danger'><span class="oi oi-arrow-circle-
left"></span> Back</a>
</div>
<div align='left'>
<h6 class="col-2">ID : <?php echo $id_peserta;?></h6>
<h6 class="col-2">Nama : <?php echo $username;?></h6>
<h6 class="col-2">Gender : <?php $gender;
if( $gender == 'L'){
echo 'Laki-Laki';
}
else echo 'Perempuan';
?></h6>
<h6 class="col-2">Tanggal Tes : <?php echo $tanggal;?></h6>
55
</div>
<div class="row">
<div class="col-sm-4">
<div class="card border-info">
<div class="card-body">
<h1 class="card-title">Most</h1>
<div class="row">
<h2 class="col-2">D</h2>
<h2 class="col-3">:<?php echo $da;?></h2>
</div>
<div class="row">
<h2 class="col-2">I</h2>
<h2 class="col-3">:<?php echo $ia;?></h2>
</div>
<div class="row">
<h2 class="col-2">S</h2>
<h2 class="col-3">:<?php echo $sa;?></h2>
</div>
<div class="row">
<h2 class="col-2">C</h2>
<h2 class="col-3">:<?php echo $ca;?></h2>
</div>
<div class="row">
<h3 class="col-2"><span class="oi oi-star"></span></h3>
<h2 class="col-3">:<?php echo $na;?></h2>
</div>
<button type="button" onclick="mostfunction()" class='btn btn-primary
openModal' data-toggle="modal" data-target="#modalmost">
<span class="oi oi-bar-chart"></span> Tabel
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card border-info">
<div class="card-body">
<h1 class="card-title">Least</h1>
<div class="row">
<h2 class="col-2">D</h2>
<h2 class="col-3">:<?php echo $d?></h2>
</div>
<div class="row">
<h2 class="col-2">I</h2>
<h2 class="col-3">:<?php echo $i;?></h2>
</div>
56
<div class="row">
<h2 class="col-2">S</h2>
<h2 class="col-3">:<?php echo $s;?></h2>
</div>
<div class="row">
<h2 class="col-2">C</h2>
<h2 class="col-3">:<?php echo $c;?></h2>
</div>
<div class="row">
<h3 class="col-2"><span class="oi oi-star"></span></h3>
<h2 class="col-3">:<?php echo $n;?></h2>
</div>
<button type="button" onclick="leastfunction()" class='btn btn-primary openModal'
data-toggle="modal" data-target="#modalleast">
<span class="oi oi-bar-chart"></span> Tabel
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card border-info">
<div class="card-body">
<h1 class="card-title">Change</h1>
<div class="row">
<h2 class="col-2">D</h2>
<h2 class="col-3">:<?php echo $da - $d;?></h2>
</div>
<div class="row">
<h2 class="col-2">I</h2>
<h2 class="col-3">:<?php echo $ia - $i;?></h2>
</div>
<div class="row">
<h2 class="col-2">S</h2>
<h2 class="col-3">:<?php echo $sa - $s;;?></h2>
</div>
<div class="row">
<h2 class="col-2">C</h2>
<h2 class="col-3">:<?php echo $ca - $c;?></h2>
</div>
<div class="row">
<h2 class="col-2"><span class="oi oi-star"></span></h2>
<h2 class="col-3">:-</h2>
</div>
<button onclick="changefunction()" type="button" class='btn btn-primary
openModal' data-toggle="modal" data-target="#modalchange">
57
<span class="oi oi-bar-chart"></span> Tabel
</button>
</div>
</div>
</div>
</div> Gambar 4. 41 Script Tampilan Hasil Perhitungan Jumlah DISC Pada Lembar Jawab
Sementara untuk menampilkan grafik menggunakan modal dari bootstrap.
Grafik ditampilkan menggunakan id “Chart Container” yang data dan tampilan
menggunakan basis java script Berikut script untuk menampilkan grafik:
div class="modal fade" id="modalmost" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Graph 1
<mark><b>MOST</b></mark></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" align="center">
<div id="chartContainermost" style="height: 400px; width: 500px;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalleast" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Graph 2
<mark><b>LEAST</b></mark></h5>
58
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" align="center">
<div id="chartContainerleast" style="height: 400px; width: 500px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalchange" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Graph 3
<mark><b>CHANGE</b></mark></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" align="center">
<div id="chartContainerchange" style="height: 400px; width: 500px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div> Gambar 4. 42 Script Tampilan Grafik DISC Peserta
`Untuk menampilkan grafik maka dibutuhkan javascript dari grafik yaitu
chart.js. Javascript digunakan untuk pengaturan grafik yang akan ditampilkan.
Selain itu javascript juga digunakan untuk memasukkan nilai-nilai dari grafik.
59
Karena DISC memiliki nilai-nilai yang berbeda dari grafik biasa, maka nilai asli
harus menggunakan permisalan if. Seperti script 4.14, jika jawaban 0 maka pada
grafik berada di titik -6.1. Berikut script dari permisalan if:
if($da==0){
$ada=-6.1;
} Gambar 4. 43 Script Permisalan IF Grafik DISC
Misalkan salah satu dari permisalan if. $da adalah nilai asli dari jawaban
tes. $ada adalah nilai yang akan ditampilkan di grafik. Data diambil dari
permisalan if lalu dimasukkan ke array. Dari array kemudian dimasukkan ke
dalam javascript menggunakan JSON. Dalam javascript juga ada pengaturan
standar dari chart.js. Chart.js merupakan plugin untuk membuat chart. Dalam
chart bisa mengatur tema, judul, animasi, datapoint, dan lain-lain. Berikut script
dari javascript chart.js:
$dataPointsmost = array(
array("y" => $ada, "label" => "D"),
array("y" => $aia, "label" => "I"),
array("y" => $asa, "label" => "S"),
array("y" => $aca, "label" => "C"),
);
$dataPointsleast = array(
array("y" => $ad, "label" => "D"),
array("y" => $ai, "label" => "I"),
array("y" => $as, "label" => "S"),
array("y" => $ac, "label" => "C"),
);
$dataPointschange = array(
array("y" => $acda, "label" => "D"),
array("y" => $acia, "label" => "I"),
array("y" => $acsa, "label" => "S"),
array("y" => $acca, "label" => "C"),
);
?>
<!-- Chart -->
<script>
60
function mostfunction(){
var chart1 = new CanvasJS.Chart("chartContainermost", {
animationEnabled: true,
theme: "light2",
zoomEnabled: true,
title: {
text: "Mask, Public Self"
},
data: [{
type: "line",
dataPoints: <?php echo json_encode($dataPointsmost,
JSON_NUMERIC_CHECK); ?>
}]
});
chart1.render();
}
function leastfunction(){
var chart2 = new CanvasJS.Chart("chartContainerleast", {
animationEnabled: true,
theme: "light2",
zoomEnabled: true,
title: {
text: "Core, Private Self"
},
data: [{
type: "line",
dataPoints: <?php echo json_encode($dataPointsleast,
JSON_NUMERIC_CHECK); ?>
}]
});
chart2.render();
}
function changefunction(){
var chart3 = new CanvasJS.Chart("chartContainerchange", {
animationEnabled: true,
theme: "light2",
zoomEnabled: true,
title: {
text: "Mirror, Perceived Self"
},
data: [{
type: "line",
61
dataPoints: <?php echo json_encode($dataPointschange,
JSON_NUMERIC_CHECK); ?>
}]
});
chart3.render();
}
</script> Gambar 4. 44 Script Javascript Grafik DISC
Selain melihat hasil analisis, psikolog juga bisa mencetak hasil analisis
yang digunakan untuk dokumentasi fisik:
Gambar 4. 45 Tampilan Mencetak Hasil Analisis dan Grafik DISC
Script dari mencetak ini sama dengan hasil analisis karena mempunyai isi
yang sama. Perbedaan nya yaitu terdapat javascript untuk mencetak halaman
ketika layar dalam proses penampilan.
<script>
window.onload = function(){
window.print();
}
</script> Gambar 4. 46 Script Perintah Cetak Hasil Analisis dan Grafik DISC
Kesimpulan peserta untuk menentukan peserta termasuk
kepribadian DISC dapat dilakukan secara otomatis pada sistem. Selain dapat
menggolongkan kepribadian, sistem juga dapat mengetahui pekerjaan apa yang
cocok untuk peserta.
62
Gambar 4. 47 Tampilan Kesimpulan Hasil Analisis dan Grafik DISC
Script dari kesimpulan ini sama dengan hasil analisis. Namun ada tambahan
untuk menambahkan kesimpulan yaitu menggunakan rankting. Ranking
dibutuhkan untuk menentukan urutan nilai dalam grafik dari tertinggi. Untuk
menentukan kesimpulan peserta, dinilai dari tiga urutan nilai dari teratas.
Misalnya jika nilai dalam grafik teratas adalah C, I, D maka karakter peserta
tersebut adalah C-I-D, dan seterusnya.
Untuk meranking urutan grafik nilai dalam grafik dimasukkan ke dalam
array terlebih dahulu. Setelah itu, nilai dari array di sorting ascending. Hasil
sorting bisa didapat array yang diurutkan dari nilai terbesar. Berikut script
ranking:
63
<?php
$maxarrm = array($ada,$aia,$asa,$aca);
$rankm = $maxarrm;
rsort($rankm);
$maxarrl = array($ad,$ai,$as,$ac);
$rankl = $maxarrl;
rsort($rankl);
$maxarrc = array($acda,$acia,$acsa,$acca);
$rankc = $maxarrc;
rsort($rankc);
?> Gambar 4. 48 Script Ranking Nilai Kesimpulan Hasil Analisis dan Grafik DISC
Untuk menentukan kesimpulan maka dapat dilihat dari grafik. Dari grafik
diambil ranking kepribadian yang sumbu y berada di positif. Rank digunakan
untuk menentukan posisi tiga teratas. Jika kepribadian yang sumbu y berada
positif satu kepribadian, maka kepribadian yang keluar satu jika dua yang berada
di sumbu y positif maka dua kepribadian, dan jika tiga kepribadian yang berada
di sumbu positif maka ada tiga kepribadian. Script dari penjelasan di atas adalah
sebagai berikut:
if($acda==$rankc[1] && $acia==$rankc[2] && $acsa<=0 && $acca==$rankc[0] &&
$acia>0){$karakterc="Profile C-D-I";
$ketc="|C-D-I| seorang yang sangat berorientasi pada tugas dan sensitif pada
permasalahan. Ia leb
ih mempedulikan tugas yang ada dibanding orang-orang di sekitarnya, termasuk
perasaan mereka. |C-D-I| sangat kukuh/keras dan mempunyai pendekatan yang
efektif dalam pemecahan masalah. Oleh karena sifat alamiah dan keinginannya akan
hasil yang terukur, |C-D-I| akan tampak dingin, tidak berperasaan dan menjaga jarak.
Ia membuat keputusan berdasar pada fakta, bukan emosi. |C-D-I| cenderung pendiam
dan tidak mudah percaya.";
$jobc="Directing, Managing or Supervising (Engineering, Research, Finance,
Planning), Designer, Work Study, Sales (Technical/ Specialist), Logistic Support,
Systems Analyst, Lecturer, Company Secretary, Negotiator and Purchasing.";
} Gambar 4. 49 Script If untuk Kesimpulan Hasil Analisis dan Grafik DISC
Script di atas mengecek apakah nilai D di rank 2, I rank 3 S dibawah 0 dan
C rank 1, jika iya maka akan ditulis Profile C-D-I dengan keterangan dan
64
pekerjaan yang cocok. Jika tidak maka akan lanjut sampai ketentuan sama. Perlu
diletahui, untuk rank menggunakan array sehingga nilai dalam array diambil.
Jika rank 1 maka array[0], jika rank 2 maka array[1], dan seterusnya. Ketika
ketentuan sudah sama, maka akan ditampilkan dalam tabel. Berikut script
tampilan tabel:
<table border="1 solid" align="center">
<tr align="center">
<th colspan="32"> DISC </th>
</tr>
<tr>
<th></th>
<th>D</th>
<th>I</th>
<th>S</th>
<th>C</th>
<th><span class="oi oi-star"></span></th>
<th style="width:10%">Kesimpulan</th>
<th>Keterangan</th>
<th>Pekerjaan</th>
</tr>
<tr>
<th style="width:5%">MOST</th>
<th><?php echo $da;?></th>
<th><?php echo $ia;?></th>
<th><?php echo $sa;?></th>
<th><?php echo $ca;?></th>
<th><?php echo $na;?></th>
<th><?php echo $karakterm;?></th>
<th style="text-align:justify; padding:2%;"><?php echo $ketm;?></th>
<th><?php echo $jobm;?></th>
</tr>
<tr>
<th>LEAST</th>
<th><?php echo $d;?></th>
<th><?php echo $i;?></th>
<th><?php echo $s;?></th>
<th><?php echo $c;?></th>
<th><?php echo $n;?></th>
<th><?php echo $karakterl;?></th>
<th style="text-align:justify; padding:2%;"><?php echo $ketl;?></th>
65
<th><?php echo $jobl;?></th>
</tr>
<tr>
<th>CHANGE</th>
<th><?php echo $cda;?></th>
<th><?php echo $cia;?></th>
<th><?php echo $csa;?></th>
<th><?php echo $cca;?></th>
<th><?php echo $na-$n;?></th>
<th><?php echo $karakterc;?></th>
<th style="text-align:justify; padding:2%;"><?php echo $ketc;?></th>
<th><?php echo $jobc;?></th>
</tr> Gambar 4. 50 Script Tabel Kesimpulan Hasil Analisis dan Grafik DISC
4.3. Hasil Uji Coba Aplikasi
Setelah dilakukan penyebaran kusioner, maka didapatkan 30 responden
sebagai sampel, sehingga mendapatkan data melalui pengisian kuisioner.
Berikut hasil pengolahan data responden:
Gambar 4. 51 Diagram Umur Responden
Dari 30 orang responden, responden terbanyak berumur 20 dan 21 tahun
sebanyak 40%. Sementara responden berumur 19, 22, dan 24 tahun sebanyak
6,67%.
66
Gambar 4. 52 Diagram Jenis Kelamin Responden
Dari 30 responden, diambil data jenis kelamin yang seimbang. Yaitu 50%
laki-laki dan 50% perempuan.
Gambar 4. 53 Diagram Pendidikan Responden
Pendidikan yang ditempuh responden saat ini, sebanyak 93,33% dari 30
responden sedang menempuh sebagai sarjana. Sementara sebanyak 6,67%
sedang menempuh SMA.
67
Gambar 4. 54 Diagram Pernah Menggunakan Aplikasi Responden
Sebanyak 86,67% dari 30 responden belum pernah melakukan tes psikologi
analisa kepribadian DISC. Sementara responden yang sudah pernah mengikuti
tes analisa kepribadian DISC sebanyak 13.33%.
Gambar 4. 55 Diagram Pemahaman Penggunaan Aplikasi
Terdapat 16 responden atau 53,33% setuju bahwa paham cara menggunakan
aplikasi dengan cepat. Sementara 8 orang atau 26,67% menjawab sangat setuju,
4 orang atau 13,33% menjawab tidak cepat paham menggunakan aplikasi dan 2
orang atau 6,67% netral.
68
Gambar 4. 56 Diagram Kemudahan dan Kelancaran Proses Login Aplikasi
Sebanyak 20 responden atau 66,67% setuju bahwa proses login mudah dan
lancar. Sementara sebanyak 8 reponden atau 26,67% sangat setuju jika proses
login lancar dan mudah dan 2 responden atau 6,67% tidak setuju jika proses
login lancar dan mudah.
Gambar 4. 57 Diagram Kelancaran Tombol Mulai Instruksi Aplikasi
Baik responden yang setuju dan sangat setuju sama-sama memiliki jumlah
13 reponden atau 43,33%. Sementara yang tidak setuju hanya 1 orang atau
3,33% dan 3 orang lagi atau 10% netral.
69
Gambar 4. 58 Diagram Kemudahan Penggunaan Tombol Mulai pada Soal Aplikasi
Sebanyak 15 responden atau sebanyak 50% setuju bahwa tombol mulai pada
soal aplikasi mudah digunakan. Sementara 7 responden atau 23,33% merasa
sangat setuju, 5 reponden atau 16,67% Netral, dan 3 reponden atau 10% tidak
setuju.
Gambar 4. 59 Kemudahan dalam membaca font dalam tampilan soal
Responden yang setuju merasa mudah dalam membaca font dalam tampilan
soal sebanyak 18 responden atau 60%. Sementara 8 reponden atau 26,67%
sangat setuju, 3 reponden atau 10% netral dan 1 reponden atau sebanyak 3,33%
tidak setuju.
70
Gambar 4. 60 Diagram Kemudahan menjawab soal dengan adanya fitur peringatan
Sebanyak 12 responden atau 40% netral bahwa peringatan pada saat belum
menjawab soal sangat membantu. Sisanya 8 responden atau 26,67% setuju, 5
responden atau 16,67% sangat setuju, 4 responden atau 13,33% tidak setuju dan
1 reponden sangat tidak setuju atau sebanyak 3,33%.
Gambar 4. 61 Diagram Kemudahan dalam proses perpindahan soal aplikasi
Responden yang setuju bahwa proses perpindahan soal aplikasi cepat dan
akurat sebanyak 18 reponden atau 60%. Sementara 7 responden atau 23.33%
sangat setuju. Sebanyak 4 responden atau 13,33% netral, dan 1 reponden atau
3,33% tidak setuju
71
Gambar 4. 62 Diagram Kemenarikan Aplikasi
Terdapat 13 responden atau 43,33% setuju bahwa sistem aplikasi menarik.
Sementara 11 responden atau 36,67% sangat setuju dan 6 responden atau 20%
netral.
Gambar 4. 63 Diagram Penggunaan Aplikasi lebih mudah daripada konvensional
Sebanyak 12 responden atau 40% netral dalam merasakan bahwa
nmenggunakan aplikasi lebih nyaman daripada psikotes secara tertulis.
Sementara sebanyak 6 responden atau 20% setuju, 7 responden atau 23,33%
sangat setuju, dan 5 orang atau 16,67% tidak setuju.
72
Gambar 4. 64 Diagram Kemenarikan Tampilan Login
Dalam kemenarikan tampilan login, sebanyak 18 orang atau 60% setuju.
Sementara 9 reponden atau 30 % netral dan 3 orang atau 10% sangat setuju.
Gambar 4. 65 Diagram Kenyamanan Tata Letak Tampilan Login
Sebanyak 25 responden atau 83,33% setuju bahwa tata letak tampilan login
sudah sesuai dan pas. Sementara 3 responden atau 10% netral dan 2 responden
atau 6,67% sangat setuju.
73
Gambar 4. 66 Diagram Kemenarikan tampilan instruksi
Sejumlah 15 responden atau 50% setuju jika tampilan instruksi menarik.
Sementara 7 responden atau 23,33% netral, 6 responden atau 16,67% sangat
setuju, dan 3 responden atau 10% tidak setuju.
Gambar 4. 67 Diagram Kenyamanan Tata Letak tampilan instruksi
Baik responden setuju dan netral masing-masing berjumlah 10 responden
atau sebanyak 33,33%. Sementara sebanyak 8 responden atau 26,67% sangat
setuju, dan 2 responden atau 6,67% tidak setuju.
74
Gambar 4. 68 Diagram kenyamanan dalam membaca font tampilan instruksi
Sejumlah 18 responden atau 60% setuju bahwa font di tampilan instruksi
jelas dan mudah dibaca. Sementara 8 responden atau 26,67% sangat setuju, 2
responden atau 6,67% netral dan masing-masing 1 responden atau 3,33% tidak
setuju dan sangat tidak setuju.
Gambar 4. 69 Diagram Kemenarikan tampilan soal pada aplikasi
Responden yang merasa netral jika tampilan soal menarik sebanyak 12
responden atau 40%. Responden yang setuju sebanyak 10 responden atau
33,33% dan sangat setuju 8 responden atau 26,67%.
75
Gambar 4. 70 Kenyamanan tata letak tampilan soal aplikasi
Sejumlah 18 responden atau 60% setuju bahwa tata letak tampilan soal
aplikasi nyaman dilihat. Sementara masing-masing 6 atau 20% responden sangat
setuju dan netral.
Gambar 4. 71 Kelancaran tombol next untuk perpindahan soal aplikasi
Sebanyak 17 responden atau 56,67% setuju jika tombol next untuk
perpindahan soal aplikasi berjalan baik dan lancar. Sementara 8 responden atau
26,67% sangat setuju, 3 responden atau 10% netral dan masing-masing 1
responden atau 3,33% tidak setuju dan sangat tidak setuju.
76
Gambar 4. 72 Diagram Intensi Menyarankan Aplikasi ke Orang Lain
Sejumlah 11 responden atau 36,67% menyarankan aplikasi kepada orang
lain untuk menggunakan aplikasi. Sementara 10 responden atau 33,33% sangat
menyarankan, 6 responden atau 20% netral dan 3 responden atau 10% tidak
menyarankan.
Pada Wawancara dengan para psikolog, aplikasi tes psikologi analisa
kepribadian DISC sudah sesuai dengan tampilan yang diharapkan, perhitungan
jawaban dengan hasil yang dikeluarkan sudah sesuai, penampilan grafik sudah
sesuai dengan standar. Para psikolog, mengatakan bahwa penggunaan
kesimpulan yang pengolahan melalui komputer sangat membantu.
Saat wawancara dengan staff, staff juga merasakan efektivitas kerja. Para
staff tidak perlu lagi untuk mengetik manual, menghitung jawaban manual,
membuat grafik manual dengan kertas dan bullpen. Staff hanya mengecek ulang
hasil kesimpulan psikolog jika terjadi kesalahan ketik dan tata bahasa.
top related