BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

(1)

37 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

(2)

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

(3)

<?php

session_start(); ?>

<html>

<head><title>comment</title>

(4)

}); });

</script>

<body>

<strong>Pilih Jenis Kode verifikasi (Captcha)</strong> <ul>

<li><a class="speech">Speech Recognition Captcha (Headset Required)</a></li> <li><a class="matrix">Matrix Captcha</a></li>

<li><a class="dragdrop">Dragdrop Captcha</a></li> </ul>

</td> </tr> <tr>

</tr> <tr>

<td colspan="2"><input class="tombol" type="submit" value="Submit"> <a href="report.php">Lihat kritik saran</a></td>

</tr> </table> </form>

(5)

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 Fungsi

Tombol Hold to Talk 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 <html>

<head>

(6)

var audioDiv = document.getElementById('AudioContainer'); var jsgf =

"#JSGF V1.0;\n" + "speech captcha;\n" +

"public <top> = 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;

(7)

function onWamiError(type, message) {

alert("WAMI error: type = " + type + ", message = " + message); }

function onWamiTimeout() {

alert("WAMI timed out. Hit reload to start over"); }

</script> </head>

Klik dan tahan "Hold to Talk" lalu bicara di headset sesuai angka yang tertera.(penyebutan satu angka untuk sekali klik).</i>

</table> </body> </html>

(8)

2. s_captcha.php <?php session_start(); header("Content-type: image/png"); $captcha_image=imagecreatefrompng("images/latar.png"); $captcha_font= imageloadfont("images/font.gdf"); $captcha_text=rand(0000, 9999); $_SESSION['s_captcha']=$captcha_text; $captcha_color= imagecolorallocate($captcha_image,0,5,3); imagestring($captcha_image,$captcha_font,15,5,$captcha_text,$ca ptcha_color); imagepng($captcha_image); imagedestroy($captcha_image); ?>

3. Tampilan Matrix Captcha

Pada tampilan Matrix Captcha ini terdapat deretan angka dan huruf yang berupa image dan berperan sebagai captcha, lalu dabawahnya terdapat kotak-kotak 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.

(9)

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 Captchasebagai berikut : 1. c_matrix.php

<html>

<body>

(10)

Klik huruf atau angka yang terdapat pada kotak sesuai urutan yang tertera.</i> <img src="captcha.php" />

<div class="loading" style="display:none;">LOADING</div> <div class="captcha"> </div> </body> </html> 2. captcha.php <?php session_start(); header("Content-type: image/png"); $captcha_image=imagecreatefrompng("images/latar.png"); $captcha_font= imageloadfont("images/fizzo.gdf"); $captcha_text=substr(md5(uniqid(' ')),-6,6); $_SESSION['m_captcha']=$captcha_text; $captcha_color= imagecolorallocate($captcha_image,0,5,3); imagestring($captcha_image,$captcha_font,15,5,$captcha_text,$captcha_color); imagepng($captcha_image); imagedestroy($captcha_image); ?> 3. matrix.php <?php session_start(); $ex=str_split($_SESSION['m_captcha']); for($i=0;$i<4;$i++){ for($j=0;$j<=4;$j++){

(11)

} } $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; } } } ?>

(12)

<tr>

<tr>

<tr>

(13)

?></span></td><td onclick="append_ex17()"><span class="q"><?php echo $c[1][3] ?></span></td><td onclick="append_ex18()"><span class="r"><?php echo $c[2][3] ?></span></td><td onclick="append_ex19()"><span class="s"><?php echo $c[3][3] ?></span></td><td onclick="append_ex20()"><span class="t"><?php echo $c[4][3] ?></span></td> </tr>

</table>

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

(14)

} 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(""); }

(15)

$(".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(){

(16)

$(".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());

(17)

}

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

(18)

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

1. c_drag.php

<html>

(19)

padding:5px; margin-bottom:10px; } </style> <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({

(20)

left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) ) }); }); }); </script> </head> <body>

<i><b>Captcha Drag and Drop :</b> Drag kotak kemana saja.</i>

<input type="hidden" id="content" name="result"> <style type="text/css"> #container { height: 200px; width:200px; border: 1px dashed #888; } </style> </body></html> 4.2 Skenario Pengujian

Skenario yang dijalankan atara lain skenario Menu awal, Menu Speech Recognition Captcha, Menu Matrix Captcha, Menu Drag and Drop Captcha.

(21)

Item Uji Flow Normal Flow Tidak Normal Hasil yang diharapkan Link Speech Recognition Captcha

Link diklik atau dipilih oleh user

Menampilkan tampilan menu speech recognition captcha Link Matrix Captcha

Menampilkan tampilan menu Matrix captcha Link DragDrop

Captcha

Menampilkan tampilan menu DragDrop Captcha Speech Recognition Captcha Value dalam texbox sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user sukses memproses captcha Value dalam texbox tidak sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user gagal memproses captcha dan harus kembali ke awal

(22)

Tabel 4.5 Skenario Pengujian. Lanjutan

Item Uji Flow Normal Flow Tidak Normal Hasil yang diharapkan Tombol “Hold To Talk” ditekan Sistem dapat merekam dan menampilkan speech user ke bentuk text dan dimasukan kedalam TextBox

Matrix Captcha

Link pada kolom atau tabel matrix di klik oleh user.

Sistem dapat menampilkan nilai yang sesuai dengan apa yang user klik di dalam tabel matrix. Value dalam hidden textbox sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user sukses memproses captcha Value dalam hidden textbox tidak sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user gagal memproses captcha dan harus kembali ke awal

(23)

Item Uji Flow Normal Flow Tidak Normal

Hasil yang diharapkan

Drag and Drop Captcha

User mendrag object kotak yang berukuran 50x40 px

Sistem dapat mengetahui perubahan posisi pada object drag sehingga sistem menambahkan nilai pada hidden textbox.

Value dalam hidden textbox sesuai dengan value yang telah ditentukan Menampilakan tampilan menu validasi bahwa user sukses memproses captcha Value dalam hidden textbox tidak sesuai dengan value yang telah ditentukan Menampilakan tampilan menu validasi bahwa user gagal memproses captcha dan harus kembali ke awal

(24)

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 Normal Hasil yang diharapkan Hasil Link Speech Recognition Captcha Link diklik atau dipilih oleh user Menampilkan tampilan menu speech recognition captcha Sukses Link Matrix Captcha Link diklik atau dipilih oleh user Menampilkan tampilan menu Matrix captcha Sukses Link DragDrop Captcha Link diklik atau dipilih oleh user Menampilkan tampilan menu DragDrop Captcha Sukses Speech Recognition Captcha Value dalam texbox sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user sukses memproses captcha Sukses

(25)

Item Uji Flow Normal Flow Tidak Normal Hasil yang diharapkan Hasil Value dalam texbox tidak sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user gagal memproses captcha dan harus kembali ke awal Sukses Tombol “Hold To Talk” ditekan Sistem dapat merekam dan menampilkan speech user ke bentuk text dan dimasukan kedalam TextBox Sukses Matrix Captcha Link pada kolom atau tabel matrix di klik oleh user.

Sistem dapat menampilkan nilai yang sesuai dengan apa yang user klik di dalam tabel matrix.

(26)

Tabel 4.6 Hasil Pengujian. Lanjutan

Item Uji Flow Normal Flow Tidak Normal Hasil yang diharapkan Hasil Value dalam hidden textbox sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user sukses memproses captcha Sukses Value dalam hidden textbox tidak sesuai dengan session captcha yang ditentukan Menampilakan tampilan menu validasi bahwa user gagal memproses captcha dan harus kembali ke awal Sukses Drag and Drop Captcha User mendrag object kotak yang berukuran 50x40 px Sistem dapat mengetahui perubahan posisi pada object drag sehingga sistem menambahkan nilai pada hidden textbox. Sukses

(27)

Tabel 4.6 Hasil Pengujian. Lanjutan

Item Uji Flow Normal Flow Tidak Normal Hasil yang diharapkan Hasil Value dalam hidden textbox sesuai dengan value yang telah ditentukan Menampilakan tampilan menu validasi bahwa user sukses memproses captcha Sukses Value dalam hidden textbox tidak sesuai dengan value yang telah ditentukan Menampilakan tampilan menu validasi bahwa user gagal memproses captcha dan harus kembali ke awal Sukses