BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1

Implementasi Setelah tahap analisis dan perancangan selesai dilakukan, maka tahap

selanjutnya adalah tahap implementasi. Pada subbab berikut akan dijelaskan implementasi dan cara kerja dari matrix captcha, speech recognition captcha dan drag and drop captcha. Terdapat dua cakupan yaitu proses yang meliputi cara kerja program, coding dan spesifikasi kebutuhan sistem yang meliputi perangkat keras (hardware), perangkat lunak (software), dan hal-hal yang berhubungan dengan aplikasi.

4.1.1 Spesifikasi Kebutuhan Sistem Berikut spesifikasi kebutuhan sistem dimana sistem dibuat dan dijalankan: 1. Perangkat keras (hardware) : a.

Intel Core i3

b.

RAM 2 GB DDR3

c.

Harddisk 320GB

d.

Headset

2. Perangkat lunak (software) : a.

Microsoft Windows 7 sebagai sistem operasi

b.

Firefox 4.0

c.

jxpiinstall.exe

4.1.2 Proses Pengimplementasian dari masing-masing captcha memiliki cara-cara yang berbeda, untuk speech recognition captcha, disini user dapat menuliskan suatu captcha tanpa mengetiknya melainkan menggunakan suara namun user harus menggunakan hardware tambahan yaitu berupa headset, user harus mengeja angka-angka yang tertera di layar secara berurutan lalu komputer akan berusaha 37

38

memahami apa yang user katakan dan menuliskannya di dalam textbox. Untuk Matrix Captcha, disini user dapat menulisakan suatu captcha dengan hanya mengeklik kotak-kotak yang beberapa berisikan values yang sesuai dengan captcha yang tampil, user harus mengklik kotak tersebut sesuai urutan captcha yang tampil di monitor. Selanjutnya Drag and Drop Captcha, disini user dapat mengeksekusikan suatu captcha hanya dengan men-drag suatu objek yang berbentuk kotak, dan komputer akan bisa langsung mengetahui kalau user itu adalah manusia. 1.

Tampilan Awal Pada tampilan awal ini merupakan tampilan pilihan atau option, jadi user

bisa memilih captcha apa yang mau digunakan. Ada tiga pilihan yaitu matrix captcha, speech recognition captcha dan drag and drop captcha.

Gambar 4.1 Tampilan Awal

Tabel 4.1 Fungsi link pada tampilan awal Links

Fungsi

Speech Recognition Captcha

Menampilkan Speech Recognition Captcha

Matrix Captcha

Menampilkan Matrix Captcha

Dragdrop Captcha

Menampilkan Dragdrop Captcha

39

Source code yang terdapat pada halaman awal : <script type="text/javascript" src="config/jquery.tools.min.js"> <script type="text/javascript"> $(document).ready(function(){ $(".matrix").click(function(){ $(".c_drag").hide(); $(".c_speech").hide(); $(".c_matrix").show('slow');

}); });

$(document).ready(function(){ $(".dragdrop").click(function(){ $(".c_drag").show('slow'); $(".c_speech").hide(); $(".c_matrix").hide();

}); });

$(document).ready(function(){ $(".speech").click(function(){ $(".c_drag").hide(); $(".c_speech").show('slow'); $(".c_matrix").hide();

40

}); });

colspan="2">
style="display:none"

class="c_matrix">
"c_matrix.php" ?>

"s_captcha2.php"

?>

style="display:none"

class="c_drag">

<strong>Pilih Jenis Kode verifikasi (Captcha) Speech Recognition Captcha (Headset Required) Matrix Captcha Dragdrop Captcha

Lihat kritik saran

41

2.

Tampilan Speech Recognition Captcha Pada tampilan Speech Recognition Captcha terdapat tombol Hold to Talk

yang berada di atas captcha, yang berguna untuk menerima perintah melalui suara, lalu ada deretan angka acak berupa image yang disini berperan sebagai captcha, dan yang terakhir ada sebuah textbox guna menampung inputan user yang melalui suara.

Gambar 4.2 Tampilan Speech Recognition Captcha

Tabel 4.2 Fungsi pada Tampilan Speech Recognition Captcha Tools Tombol Hold to Talk

Fungsi Menerima

perintah

melalui

suara

dan

memahaminya Tombol Setting

Mengatur alur inputan suara yang melalui device.

Captcha Image

Menampilkan deretan angka acak yang berupa image.

Textbox

Menampung inputan user yang melalui suara

Source code yang terdapat pada tampilan Speech Recognition Captcha sebagai berikut : 1. s_captcha2.php

42

<script src="http://wami.csail.mit.edu/portal/wami.js?devKey=6029c7d70fd9d372 49b4320e00925916"> <script> var myWamiApp; function onLoad() {

var audioDiv = document.getElementById('AudioContainer'); var jsgf = "#JSGF V1.0;\n" + "speech captcha;\n" + "public = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;\n";

var grammar = {"language" : "en-us", "grammar" : jsgf }; var audioOptions = {"pollForAudio" : false}; var configOptions = {"sendIncrementalResults" : false, "sendAggregates" : false}; var handlers = {"onReady" : onWamiReady, "onRecognitionResult" : onWamiRecognitionResult, "onError" : onWamiError, "onTimeout" : onWamiTimeout}; myWamiApp = new WamiApp(audioDiv, handlers, "json", audioOptions, configOptions, grammar); } function onWamiReady() {

} function onWamiRecognitionResult(result) { var hyp = result.hyps[0].text; var Textbox = document.getElementById("txtcaptcha"); Textbox.value = Textbox.value + hyp;

43

} function onWamiError(type, message) { alert("WAMI error: type = " + type + ", message = " + message); } function onWamiTimeout() { alert("WAMI timed out. Hit reload to start over"); } Note :
Klik dan tahan "Hold to Talk" lalu bicara di headset sesuai angka yang tertera.(penyebutan satu angka untuk sekali klik).

44

2. s_captcha.php

3.

Tampilan Matrix Captcha Pada tampilan Matrix Captcha ini terdapat deretan angka dan huruf yang

berupa image dan berperan sebagai captcha, lalu dabawahnya terdapat kotakkotak yang berupa matrix yang berisikan values di beberapa kotaknya, dan terdapat textbox yang bertipe hidden yang berguna untuk menampung nilai saat user mengeklik kotak yang berisikan values.

45

Gambar 4.3 tampilan Matrix Captcha Tabel 4.3 Fungsi pada tampilan Matrix Captcha Tools

Fungsi

Captcha Image

Menampilkan deretan angka dan huruf acak yang berupa image.

Kolom Matrix

Menempatkan value atau nilai yang sesuai dengan deretan captcha yang tertera.

Input textbox hidden

menampung nilai saat user mengeklik kotak yang berisikan values.

Source code yang terdapat pada tampilan Matrix Captcha sebagai berikut : 1. c_matrix.php <script type="text/javascript" src="config/jquery.tools.min.js"> <script type="text/javascript" src="config/my.js"> Captcha Matrix :



46

Klik huruf atau angka yang terdapat pada kotak sesuai urutan yang tertera.

LOADING

2. captcha.php 3. matrix.php
47

$c[$j][$i]=" "; } } $n = 4; $v1 = range(0, $n); $v2 = range(0, $n-1); shuffle($v2); $j=0; $k=0; foreach ($v1 as $x){ foreach ($v2 as $y){ $k++; if($k<=6){ $c[$x++][$y]=$ex[$j]; $j++; }else{ break; } } }

?>



48


onclick="append_ex()"><span

?>
class="a">
onclick="append_ex2()"><span

echo

$c[0][0]

class="b">
echo

$c[1][0] ?>
onclick="append_ex5()"><span class="e">
onclick="append_ex6()"><span

?>
class="f">
onclick="append_ex7()"><span

echo

$c[0][1]

class="g">
echo

$c[1][1] ?>
onclick="append_ex10()"><span class="j">
onclick="append_ex11()"><span

?>
class="k">
onclick="append_ex12()"><span

echo

$c[0][2]

class="l">
echo

$c[1][2] ?>
onclick="append_ex15()"><span class="o">

49


onclick="append_ex16()"><span

?>
class="p">
onclick="append_ex17()"><span

echo

$c[0][3]

class="q">
echo

$c[1][3] ?>
class="s">
echo

onclick="append_ex19()"><span $c[3][3]

?>
onclick="append_ex20()"><span class="t">

<span class="c"> $c[2][0] class="d"> ?>	onclick="append_ex4()"><span $c[3][0] ?>
<span class="h"> $c[2][1] class="i"> ?>	onclick="append_ex9()"><span $c[3][1] ?>
<span class="m"> $c[2][2] class="n"> ?>	onclick="append_ex14()"><span $c[3][2] ?>
<span class="r"> $c[2][3] ?>

4.

matrix.js

$(document).ready(function() { $(".loading").show(); $(".captcha").hide(); $.ajax({ success:function(){ $(".loading").hide(); $(".captcha").fadeIn('slow'); $(".captcha").load('test.php'); } }); }); function append_ex(){ $(".txt").val($(".txt").val() + $(".a").text()); $(".a").html("");

50

} function append_ex2(){ $(".txt").val($(".txt").val() + $(".b").text()); $(".b").html(""); } function append_ex3(){ $(".txt").val($(".txt").val() + $(".c").text()); $(".c").html(""); } function append_ex4(){ $(".txt").val($(".txt").val() + $(".d").text()); $(".d").html(""); } function append_ex5(){ $(".txt").val($(".txt").val() + $(".e").text()); $(".e").html(""); } function append_ex6(){ $(".txt").val($(".txt").val() + $(".f").text()); $(".f").html(""); } function append_ex7(){ $(".txt").val($(".txt").val() + $(".g").text()); $(".g").html(""); }

51

function append_ex8(){ $(".txt").val($(".txt").val() + $(".h").text()); $(".h").html(""); } function append_ex9(){ $(".txt").val($(".txt").val() + $(".i").text()); $(".i").html(""); } function append_ex10(){ $(".txt").val($(".txt").val() + $(".j").text()); $(".j").html(""); } function append_ex11(){ $(".txt").val($(".txt").val() + $(".k").text()); $(".k").html(""); } function append_ex12(){ $(".txt").val($(".txt").val() + $(".l").text()); $(".l").html(""); } function append_ex13(){ $(".txt").val($(".txt").val() + $(".m").text()); $(".m").html(""); } function append_ex14(){

52

$(".txt").val($(".txt").val() + $(".n").text()); $(".n").html(""); } function append_ex15(){ $(".txt").val($(".txt").val() + $(".o").text()); $(".o").html(""); } function append_ex16(){ $(".txt").val($(".txt").val() + $(".p").text()); $(".p").html(""); } function append_ex17(){ $(".txt").val($(".txt").val() + $(".q").text()); $(".q").html(""); } function append_ex18(){ $(".txt").val($(".txt").val() + $(".r").text()); $(".r").html(""); } function append_ex19(){ $(".txt").val($(".txt").val() + $(".s").text()); $(".s").html(""); } function append_ex20(){ $(".txt").val($(".txt").val() + $(".t").text());

53

$(".t").html(""); }

4.

Tampilan Drag and Drop Captcha Pada tampilan Drag and Drop Captcha ini terdapat suatu objek yang

berbentuk kotak yang dikelilingi oleh border dan bertuliskan drag me, user hanya perlu men-drag objek tersebut untuk menunjukan pada komputer bahwa dirinya manusia, lalu terdapat textbox yang bertipe hidden yang berguna untuk menampung nilai saat user men-drag objek tersebut.

Gambar 4.4 Tampilan Drag and Drop Captcha

Tabel 4.4 Fungsi pada tampilan Drag and Drop Captcha Tools

Fungsi

Objek drag

Sebuah objek untuk di-drag

Input textbox hidden

Menampung nilai saat user men-drag objek tersebut

54

Source code yang terdapat pada tampilan Drag and Drop Captcha sebagai berikut: 1.

c_drag.php

<script type="text/javascript" src="config/jquery.js"> <script type="text/javascript" src="config/jquery_002.js"> <script src="config/ga.js" async="" type="text/javascript"> <script src="config/jquery1.js"> <script src="config/jquery_001.js"> <script src="config/excanvas.js"> <style type="text/css"> p { height:30px; } .dragDiv { font-family:"calibri"; font-size:12px; padding-top:5px; width:50px; height:45px; background-color:#EFF7FF; border:1px solid #96C2F1; position:absolute; left:110px; top:685px; } .dragDiv div

55

{ padding:5px; margin-bottom:10px; } <script type="text/javascript"> $().ready(function() { var $div = $('#container'); $('#content').val(''); $('.dragDiv').Drags({ handler: '.handler', onMove: function(e) { $('#content').val(''); }, onDrop:function(e){ $('#content').val('dropped!'); $('.handler').html('you are human'); }, }) .click(function(e){ $('#content').val(''); $('.handler').html('Drag me'); }) .drag("start",function( ev, dd ){ dd.limit = $div.offset(); dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight(); dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth(); }) .drag(function( ev, dd ){ $( this ).css({ top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),

56

left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) ) }); }); }); Captcha Drag and Drop : Drag kotak kemana saja.

Drag me

<style type="text/css"> #container { height: 200px; width:200px; border: 1px dashed #888; }

4.2

Skenario Pengujian Skenario yang dijalankan atara lain skenario Menu awal, Menu Speech

Recognition Captcha, Menu Matrix Captcha, Menu Drag and Drop Captcha.

57

Tabel 4.5 Skenario Pengujian Flow Tidak Item Uji

Flow Normal

Normal

Hasil yang

Link Speech

Link diklik atau

diharapkan Menampilkan

Recognition

dipilih oleh user

tampilan menu

Captcha

speech recognition captcha

Link Matrix

Link diklik atau

Menampilkan

Captcha

dipilih oleh user

tampilan menu Matrix captcha

Link DragDrop

Link diklik atau

Menampilkan

Captcha

dipilih oleh user

tampilan menu DragDrop Captcha

Value dalam

Menampilakan

texbox sesuai

tampilan menu

dengan session

validasi bahwa

captcha yang

user sukses

ditentukan

memproses captcha

Speech Recognition

Value dalam

Menampilakan

Captcha

texbox tidak

tampilan menu

sesuai dengan

validasi bahwa

session captcha

user gagal

yang ditentukan

memproses captcha dan harus kembali ke awal

58

Tabel 4.5 Skenario Pengujian. Lanjutan Item Uji

Flow Normal

Flow Tidak

Hasil yang

Normal

diharapkan

Tombol “Hold To

Sistem dapat

Talk” ditekan

merekam dan menampilkan speech user ke bentuk text dan dimasukan kedalam TextBox

Link pada kolom

Sistem dapat

atau tabel matrix

menampilkan nilai

di klik oleh user.

yang sesuai dengan apa yang user klik di dalam tabel matrix.

Matrix Captcha

Value dalam

Menampilakan

hidden textbox

tampilan menu

sesuai dengan

validasi bahwa

session captcha

user sukses

yang ditentukan

memproses captcha Value dalam

Menampilakan

hidden textbox

tampilan menu

tidak sesuai

validasi bahwa

dengan session

user gagal

captcha yang

memproses

ditentukan

captcha dan harus kembali ke awal

59

Tabel 4.5 Skenario Pengujian. Lanjutan Item Uji

Flow Normal

Flow Tidak

Hasil yang

Normal

diharapkan

User mendrag

Sistem dapat

object kotak yang

mengetahui

berukuran 50x40

perubahan posisi

px

pada object drag sehingga sistem menambahkan nilai pada hidden textbox.

Drag and Drop Captcha

Value dalam

Menampilakan

hidden textbox

tampilan menu

sesuai dengan

validasi bahwa

value yang telah

user sukses

ditentukan

memproses captcha Value dalam

Menampilakan

hidden textbox

tampilan menu

tidak sesuai

validasi bahwa

dengan value yang

user gagal

telah ditentukan

memproses captcha dan harus kembali ke awal

60

4.3

Analisis Hasil Pengujian Setelah melakukan pengujian dengan metode Blackbox, maka penulis

mendapatkan hasil yang diinginkan. Dibawah ini adalah tebel hasil dari pengujian yang telah dilakukan oleh penulis sebagai pembuktian bahwa alternatif baru dalam penggunaan captcha yang telah dibuat dapat dijalankan dengan baik dan sesuai dengan rancangannya sebelum pembuatan.

Tabel 4.6 Hasil Pengujian Item Uji

Flow Normal

Flow Tidak

Hasil yang

Normal

diharapkan

Link Speech

Link diklik

Menampilkan

Recognition

atau dipilih

tampilan menu

Captcha

oleh user

speech

Hasil

Sukses

recognition captcha Link Matrix

Link diklik

Menampilkan

Captcha

atau dipilih

tampilan menu

oleh user

Matrix

Sukses

captcha Link

Link diklik

Menampilkan

DragDrop

atau dipilih

tampilan menu

Captcha

oleh user

DragDrop

Sukses

Captcha

Speech Recognition Captcha

Value dalam

Menampilakan

texbox sesuai

tampilan menu

dengan

validasi bahwa

session

user sukses

captcha yang

memproses

ditentukan

captcha

Sukses

61

Tabel 4.6 Hasil Pengujian. Lanjutan Item Uji

Flow Normal

Flow Tidak

Hasil yang

Normal

diharapkan

Value dalam

Menampilakan

texbox tidak

tampilan menu

sesuai dengan

validasi bahwa

session

user gagal

captcha yang

memproses

ditentukan

captcha dan

Hasil

Sukses

harus kembali ke awal Tombol

Sistem dapat

“Hold To

merekam dan

Talk” ditekan

menampilkan speech user ke bentuk text

Sukses

dan dimasukan kedalam TextBox

Matrix Captcha

Link pada

Sistem dapat

kolom atau

menampilkan

tabel matrix di

nilai yang

klik oleh user.

sesuai dengan apa yang user klik di dalam tabel matrix.

Sukses

62

Tabel 4.6 Hasil Pengujian. Lanjutan Item Uji

Flow Normal

Flow Tidak

Hasil yang

Normal

diharapkan

Value dalam

Menampilakan

hidden

tampilan menu

textbox sesuai

validasi bahwa

dengan

user sukses

session

memproses

captcha yang

captcha

Hasil

Sukses

ditentukan Value dalam

Menampilakan

hidden textbox tampilan menu tidak sesuai

validasi bahwa

dengan

user gagal

session

memproses

captcha yang

captcha dan

ditentukan

harus kembali

Sukses

ke awal

Drag and Drop Captcha

User mendrag

Sistem dapat

object kotak

mengetahui

yang

perubahan

berukuran

posisi pada

50x40 px

object drag sehingga sistem menambahkan nilai pada hidden textbox.

Sukses

63

Tabel 4.6 Hasil Pengujian. Lanjutan Item Uji

Flow Normal

Flow Tidak

Hasil yang

Normal

diharapkan

Value dalam

Menampilakan

hidden

tampilan menu

textbox sesuai

validasi bahwa

dengan value

user sukses

yang telah

memproses

ditentukan

captcha Value dalam

Hasil

Sukses

Menampilakan

hidden textbox tampilan menu tidak sesuai

validasi bahwa

dengan value

user gagal

yang telah

memproses

ditentukan

captcha dan harus kembali ke awal

Sukses