BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... ·...

52
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

Transcript of BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... ·...

Page 1: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 2: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 3: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 4: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

28

Gambar 4. 6 Rancangan Tampilan Management User untuk Staff

Gambar 4. 7 Rancangan Tampilan Petunjuk Peserta

Page 5: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

29

Gambar 4. 8 Rancangan Tampilan Soal Peserta

Gambar 4. 9 Rancangan Tampilan Selesai Tes Peserta

Page 6: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

30

Gambar 4. 10 Rancangan Tampilan Daftar Peserta untuk Psikolog

Gambar 4. 11 Rancangan Tampilan Hasil dan Grafik Tes Peserta untuk Psikolog

Page 7: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 8: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 9: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 10: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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">&copy; 2017-2018</p> -->

</form> Gambar 4. 17 Script Tampilan Register Akun

Page 11: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 12: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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,

Page 13: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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:

Page 14: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 15: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 16: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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/[email protected]/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!',

Page 17: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 18: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 19: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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']?>">

Page 20: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 21: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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);

Page 22: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 23: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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);

Page 24: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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]',

Page 25: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 26: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 27: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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()){

Page 28: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 29: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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++;

Page 30: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 31: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 32: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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">

Page 33: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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">&times;</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>

Page 34: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

58

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</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">&times;</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.

Page 35: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 36: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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",

Page 37: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 38: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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:

Page 39: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 40: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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>

Page 41: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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%.

Page 42: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 43: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 44: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 45: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 46: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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

Page 47: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 48: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 49: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 50: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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%.

Page 51: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.

Page 52: BAB 4 PEMBAHASAN 4.1. Perancangan Aplikasirepository.unika.ac.id/20057/5/15.N1.0015 DANIEL... · maka nilai aktif menjadi 0. Dengan kata lain tidak muncul di tabel user staff. Berikut

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.