Layanan Service Aplikasi smsCAPTCHA pada Web PHP …ftiuksw.org/ejournal/assets/pdf/507d9c8adca2f4b9ab7ea92400ebcad9.… · Perkembangan selanjutnya adalah Rasmus ... source serta

Jurnal Teknologi Informasi-Aiti, Vol. 8. No.1, Februari 2011 : 1 - 100

42

Layanan Service Aplikasi smsCAPTCHA pada WebPHP Berbasis cURL dengan Menggunakan JSON

Format1)Jonathan Narendra, 2)Suprihadi, 3)Yos Richard Beeh

Fakultas Teknologi InformasiUniversitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, IndonesiaEmail : 1)[email protected], 2)[email protected],

3)[email protected]

Abstract

As the development of technology become more progressive ,harmful programs like spam grow more rampant. By inserting commentsin guestbook and website form, it can direct visitors to a link that can beharmful. Therefore, the captcha is used as a solution to resolve the is-sues. On this research, the author will create captcha service applicationvia sms (short message service). This research uses waterfall methodand built in PHP five with JSON Format and curl technology. The resultof this research is the application can be used by all websites on thehosting that supports javascript.

Keywords: smsCAPTCHA, Code Verification, cURL, PHP

1 . Pendahuluan

Semakin banyaknya kegiatan dan kebutuhan orang akan internet, semakinbanyak pula layanan yang disediakan. Salah satu yang sering dijumpai adalah form,baik pada saat melakukan registrasi, ketika akan memberikan komentar padaguestbook, dan lain-lain. Namun seiring berkembangnya teknologi, semakin banyakpula program Spam Comment yang bisa menyerang website atau blog denganmenyisipkan komentar pada guestbook dan form website tersebut yang isinya bisaberupa promosi atau bahkan mengarahkan pengunjung ke link-link yang dapatmerugikan. Oleh karena itu diciptakan captcha sebagai security code untukmembedakan apakah yang sedang berinteraksi dengan form adalah mesin (bot)atau manusia. Salah satu tipe captcha yang banyak digunakan adalah captchabertipe teks yang terdistorsi ke dalam gambar. Namun dengan semakinberkembangnya teknologi, captcha ini memiliki beberapa kelemahan, salah satunyaadalah jika karakter captcha telalu sederhana kemungkinan para spammer bisasaja memakai software untuk mengenali tulisan yang ada di gambar dan kemudianmenterjemahkannya ke dalam teks. Sebenarnya terdapat suatu teknik generateimage agar karakter pada gambar tersebut menjadi sulit dibaca oleh program, namun

43

biasanya karakter captcha menjadi terlalu aneh dan tidak jelas bentuknya, sehinggapengunjung website pun dibuat repot. Data ini diperoleh dari kuesioner yang telahdisebarkan pada tahap analisis kebutuhan sistem. Pada artikel ini akan menitikberatkanfitur service captcha yang dimiliki oleh layanan smsCAPTCHA, dengan tujuanagar aplikasi tersebut dapat juga digunakan oleh website atau blog lain tanpa harusmembeli modem sendiri, server, dan tanpa menuliskan coding smsCAPTCHA kedalam website yang dimiliki.

2. Kajian Pustaka

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktuitu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalahsekumpulan script yang digunakan untuk mengolah data form dari web.Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber tersebut danmenamakannya PHP/FI, pada saat tersebut kepanjangan dari PHP/FI adalahPersonal Home Page/Form Interpreter. Dengan pelepasan kode sumber ini menjadiopen source, maka banyak programmer yang tertarik untuk ikut mengembangkanPHP. PHP mengalami perkembangan pesat dimulai pada November 1997, PHP/FI 2.0 dirilis. Pada rilis ini interpreter sudah diimplementasikan dalam C. Dalamrilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pengembangan dari PHP terus berlanjut sampai pada tahun2004 zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalamiperubahan besar. Dalam versi ini juga dikenalkan model pemrograman berorientasiobjek baru untuk menjawab perkembangan bahasa pemrograman kearahpemrograman berorientasi objek. Sampai saat ini telah banyak database yang telahdidukung oleh PHP dan kemungkinan akan terus bertambah. Database tersebutadalah dBase, DBM, FilePro, mSQL, MySQL, ODBC, oracle, postgres, sybase,dan velocis. Selain itu PHP juga mendukung koneksi dengan protokol IMAP, SNMP,NNTP dan POP3. Cara kerja PHP dapat diilustrasikan dalam Gambar 1.

Gambar 1 Cara Kerja PHP [1]

Cara kerja PHP, yaitu pertama client web browser atau member memakaikomputer kemudian member tersebut menjalankan file PHP itu di web browser

Layanan Service (Richard Beeh, dkk)


44

atau yang biasa disebut browser saja dan kemudian File PHP itu dikirim ke webserver. Web server mengirimkannya lagi ke Engine PHP atau mesin PHP dan didalam mesin PHP itu diproses dan setelah diproses oleh mesin PHP maka akanberbentuk file HTML, dan file HTML ini akan dikirimkan ke web server dan webserver tersebut akan memberikan hasil running ke member. Untuk dapatmenjalankan PHP, diperlukan sebuah web server. Dalam penelitian ini penelitimenggunakan web server bernama wamp server versi 2.1e-x32. Pada wampserver ini, file–file PHP berada di dalam direktori www seperti yang ditunjukkanoleh Gambar 2.

Gambar 2 Direktori www

MySQL merupakan software sistem manajemen database (Database Man-agement System – DBMS ) yang sangat populer dalam pemrograman web. MySQLmerupakan database yang paling populer digunakan untuk membangun aplikasiweb yang menggunakan database sebagai sumber dan pengelola datanya [2]. Da-tabase MySQL tersedia secara bebas dan boleh digunakan oleh semua orang denganlisensi open source. MySQL dikenal sebagai database yang pertama kali didukungoleh bahasa pemrograman script untuk internet-PHP. MySQL lebih umum digunakanuntuk membagun aplikasi berbasis web, umumnya pengembangan aplikasinyamenggunakan bahasa pemrograman script PHP [3]. JSON (JavaScript ObjectNotation) adalah format pertukaran data ringan. Mempermudah programmer dalammelakukan format datanya (lebih singkat daripada array) dan format ini juga sangatmudah diolah oleh mesin untuk mengurai dan menghasilkan. Hal ini didasarkan padasubset bahasa pemrograman JavaScript, Standard ECMA-262 Edisi tiga padaDesember 1999 [4]. JSON adalah format teks yang benar-benar merupakan bahasaindependen, tetapi menggunakan konvensi yang akrab bagi programmer darikeluarga bahasa pemrograman C, termasuk di dalamnya adalah C, C++, C#, Java,JavaScript, Perl, Python, dan banyak lainnya. Properti ini membuat JSONmerupakan format bahasa pertukaran data yang ideal. JSON dibangun di atas duastruktur yaitu a. kumpulan nama/nilai berpasangan yang dalam berbagai bahasa dapatdirealisasikan sebagai object, record, struct, dictionary, hash table, keyed list,atau associative array; b.Daftar list of value yang dalam kebanyakan bahasa, inidirealisasikan sebagai array, vektor, list, atau sequence. Terdapat beberapa caramemasukkan array ke dalam variabel dalam Javascript, yaitu seperti yang terlihat

45

pada Kode Program 1, dimana terlihat jelas kenapa format JSON sangat bermanfaatuntuk melakukan efisiensi transfer data dan coding, karena hanya membutuhkansedikit karakter untuk inisialisasi variabel array tersebut. Contoh yang lebihkompleks, terlihat pada Kode Program 2.

Kode Program 1 Kode PHP Array – JSON Format

// Dengan New Arrayvar array_ke_1 = new Array(‘Satu’,’Dua’,’Tiga’);

// Dengan New Array dan Memasukan Satu Per-Satuvar array_ke_2 = new Array();array_ke_2[0] = ‘Satu’;array_ke_2[1] = ‘Dua’;array_ke_2[2] = ‘Tiga’;

— Dengan Format JSONvar array_ke_3 = [‘Satu’,’Dua’,’Tiga’];

Kode Program 2 Kode PHP String dengan JSON Format

<html><head> <title>Coba JSON</title></head><body> <script type=”text/javascript”>//Data Awal dengan format JSONvar aku = { ‘nama’:’Jonathan Narendra’, ‘kesukaan’: [‘Makan’,’Internetan’,’Pacaran’], ‘status’:’Jomblo Lho’ };// Tampilkan Namadocument.write(‘Nama : ‘+aku.nama+’<br />’);

// Looping untuk menampilkan Kesukaandocument.write(‘Kesukaan: <ol>’); for (var i=0;i<aku.kesukaan.length;i++){ document.write(‘<li>’+aku.kesukaan[i]+’</li>’); }document.write(‘</ol>’);

// Tampilkan Statusdocument.write(‘Status : ‘+aku.status+’<br />’); </script></body></html>

Hasil yang akan didapat adalah seperti pada Gambar 3. JSON format adalahstruktur data universal. Hampir semua bahasa pemrograman modern mendukungformat data ini.



46

Gambar 3 Hasil Koding JSON Format

cURL adalah singkatan dari Client URL, merupakan sebuah tool berbasiscommand-line untuk mentransfer file dengan sintaks URL. Mendukung FTP, FTPS,HTTP, HTTPS, SCP, SFTP, TFTP, TELNET, DICT, LDAP, LDAPS dan FILE.cURL mendukung sertifikat SSL, HTTP POST, HTTP PUT, FTP uploading, HTTPform based upload, proxy, cookies, autentifikasi user dan password (Basic, Digest,NTLM, Negotiate, kerberos). cURL dikembangkan oleh Daniel Stenberg padatahun 1998 sebuah tool berbasis command-line. cURL gratis dan bersifat opensource serta di-compile dan bisa berjalan pada berbagai sistem operasi. Sebagaicontoh untuk menelusuri URL http://www.smsCAPTCHA.com dan menampilkanisi halaman URL tersebut ke dalam window terminal, digunakan perintah pada KodeProgram 3.

Kode Program 3 Contoh Curl

curl www.smsCAPTCHA.com

Kode Program 4 Contoh Curl dengan File Output

curl –o output.html www.smsCAPTCHA.comUntuk melakukan HTTP post ke sebuah URL, digunakan perintah pada Kode

Program 5.

Kode Program 5 Contoh Curl dengan Post

curl -d “name=jon&age=6” www.smsCAPTCHA.com /admin.php

Libcurl merupakan bentuk library dari cURL yang sudah didukungpembenarannya oleh PHP. Pada PHP terdapat modul cURL yang bisa digunakanuntuk melakukan request HTTP ke remote URL dan menampilkan hasil eksekusinya(HTTP Response). Dalam PHP, sebuah sesi cURL diawali dengan fungsi curl_init()dan diakhiri dengan fungsi curl_close(). Eksekusi cURL terjadi saat fungsi curl_exec()dipanggil. Pengaturan setting cURL di antaranya pengaturan cookie, request HTTPGET / POST, user agent, HTTP referer, dilakukan dengan fungsi curl_setopt().Contoh kode PHP untuk melakukan request HTTP GET ke http://www.smsCAPTCHA.com dengan libcurl pada Kode Program 6.

47

Kode Program 6 Contoh Kode PHP GET dengan Libcurl

(1)$url = ’http://www.smsCAPTCHA.com’;(2)$ch = curl_init();(3)curl_setopt($ch, CURLOPT_URL,$url);(4)curl_exec($ch);(5)curl_close($ch);

Pada Kode Program 6, baris pertama menunjukkan variabel URL. Bariskedua merupakan kode untuk menginisialisasi curl dan memiliki nilai kembalian berupacurl handle. Baris ketiga merupakan kode untuk mengetur URL curl dengan variabelURL. Baris keempat adalah kode curl untuk mengeksekusi URL tujuan. Baris kelimamenutup curl handle. Contoh kode PHP untuk melakukan request HTTP POST kehttp://www.smsCAPTCHA.com/admin.php dengan libcurl pada Kode Program 7.

Kode Program 7 Contoh Kode PHP POST dengan Libcurl

(1)$url = ’http://www.smsCAPTCHA.com/admin.php’;(2)$post_data = ’name=jon&age=6’;(3)$ch = curl_init();(4)curl_setopt($ch, CURLOPT_URL, $url);(5)curl_setopt($ch, CURLOPT_POST, 1);(6)curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);(7)curl_exec($ch);(8)curl_close($ch);

Pada Kode Program 7, baris pertama menunjukkan variabel URL. Bariskedua menunjukkan variabel yang berisi data POST. Baris ketiga merupakan kodeuntuk menginisialisasi curl dan memiliki nilai kembalian berupa curl handle. Bariskeempat merupakan kode untuk mengatur URL curl dengan variabel URL. Bariskelima mengatur option CURLOPT_POST agar curl menggunakan metode HTTPPOST. Baris keenam mengatur data POST dengan menggunakan optionCURLOPT_POSTFIELDS. Baris ketujuh adalah kode curl untuk mengeksekusiURL tujuan. Baris kedelapan menutup curl handle.

Captcha merupakan kependekan dari “Completely Automated PublicTuring test to Tell Komputers and Human Apart” adalah suatu tes sederhanayang digunakan untuk membedakan antara manusia dan komputer. Penemunya adalahLuis von Ahn, Manuel Blum, Nicholas J Hooper (Carneige Mellon University) danJohn Langford (IBM) pada tahun 2000 dan mulai marak digunakan di berbagaisitus untuk mencegah penyalahgunaan dari “bots” atau program otomatis yangbiasanya dibuat untuk menghasilkan spam. Captcha ini biasanya digunakan dalampendaftaran email gratis, atau pendaftaran (registrasi) keanggotaan dalam suatuwebsite, sehingga pengunjung website tersebut tidak dapat melakukan pendaftaranmelalui program bots (yaitu program yang secara otomatis melakukan pendaftarantanpa campur tangan pemakai) [5]. Umumnya captha berbentuk gambar yang didalamnya terdapat perintah. Perintah bisa dengan mudah dibaca manusia, namun



48

komputer akan kesulitan membaca perintah dalam gambar itu. Dengan cara ini,hanya manusia yang bisa melanjutkan prosesnya, sedangkan komputer/robot /spamakan gagal. Bagi komputer, sebuah gambar hanyalah kumpulan kode-kode warnadari setiap pixelnya. Dibutuhkan proses yang cukup rumit untuk bisa mengenaliobjek pada gambar, apalagi untuk memahami arti sebuah gambar. Sedangkan bagimanusia hanya dalam hitungan seper sekian detik kode dalam gambar sudah terbaca.Namun pada penerapannya terdapat beberapa kelemahan dari captcha berbentukgambar ini, yaitu Jika karakternya terlalu aneh dan tidak jelas bentuknya, maka userakan dibuat repot. Karena user tidak bisa mengenali tulisan apa yang ada di dalamgambar tersebut, sehingga user bisa mengetikkan kata yang salah dan sistem tidakakan melayaninya karena kode captcha yang di-input tidak sesuai; Jika karakternyaterlalu sederhana, kemungkinan para spammer bisa saja memakai software untukmengenali tulisan yang terdapat pada image dan kemudian diterjemahkan ke dalamteks; dan dari beberapa kelemahan tersebut, sebenarnya ada beberapa solusi yangbisa diambil, seperti menggunakan gambar hewan atau buah-buahan untuk kemudianpengunjung diminta memasukkan nama hewan atau buah-buahan tersebut ke dalamtextbox yang tersedia. Pada perkembangannya dengan semakin canggih teknologi,captcha dibuat dengan format lain, seperti captcha dalam bentuk suara dan sms(short message service), yang ditujukan agar kode tersebut semakin aman dariserangan spam dan tidak menyulitkan pengunjung. Selama ini ada beberapa situspopuler yang menggunakan captcha melalui sms, yaitu gmail, ebay, facebookconfirmation system dan lain-lain. Aplikasi smsCAPTCHA pada situs-situs tersebutbersifat individual, sehingga dikembangkan oleh masing-masing dan tidak memberikanakses layanan untuk website lain. Namun seiring banyaknya kebutuhan websiteakan aplikasi captcha, maka pada 2009 google mengakuisi layanan aplikasi captchayang ditujukan untuk para pemilik situs yang ingin menggunakan captcha pada situsmereka agar dapat menggunakan dan mengaplikasikan aplikasi captcha berbentukgambar tersebut dengan mudah tanpa harus melakukan coding yang rumit, dengancara mengakses layanan tersebut melalui situs www.recaptcha.net.

AJAX adalah singkatan dari “Asynchronous JavaScript and XML”, yangdibuat dari serangkaian teknologi dengan berbagai kemampuan, yaitu JavaScript,XML dan sebuah method komunikasi asinkron antara client dan server. Padatahun 2005 Jesse James Garret, seorang designer program memperkenalkan istilahAJAX ini dalam bukunya yang berjudul “A New Approach to Web Applications”dan pada tahun itulah AJAX mulai trend atau populer digunakan. Pada tanggal 5April 2006 World Wide Web Consorsium (W3C) memutuskan bahwa AJAXmenjadi standart pengembangan web [6]. Dengan adanya AJAX, akses data keserver yang dikirim client melalui web dapat lebih cepat daripada mekanisme biasa.Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refreshpage) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan serverside programming seperti PHP, ASP, JSP dll. Mekanisme proses AJAX ditunjukkanpada Gambar 4. Mekanisme pada Gambar 4 menunjukkan proses berawal dariweb client. Web client me-request sebuah halaman PHP ke server melaluiJavascript. Selanjutnya server akan merespon dan menjalankan script PHP. ScriptPHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan

49

dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascripttersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus me-refresh halaman web. Dengan AJAX, Javascript berkomunikasi langsung ke serverdengan sebuah fungsi yang disebut XMLHttpRequest. XMLHttpRequest memilikifungsi agar suatu halaman web dapat di-request dari server dan diterima hasilnyatanpa perlu terjadi refresh pada halaman web tersebut. XMLHttpRequest telah di-support oleh IE 5 kenatas, Safari 1.2 ke atas, Mozilla Firefox ke atas dan Opera8 keatas.

Gambar 4 Arsitektur Model AJAX [6]

3 . Metodologi Penelitian

Perancangan algoritma dalam layanan aplikasi smsCAPTCHA terbagi menjaditiga proses, yaitu proses awal (request layanan), proses verifikasi dan proses webmember meminta data nomor hp client member. Proses awal (request layanan)digambarkan oleh Gambar 5. Gambar 5 menjelaskan bagaimana alur algoritmaproses awal (request layanan) pada layanan service aplikasi smsCAPTCHA. Sepertiyang sudah dijelaskan sebelumnya, aplikasi ini berawal ketika ada client memberyang mengakses halaman web member yang terdapat aplikasi smsCAPTCHA.Terdapat dua fungsi utama pada proses ini. Yang pertama adalah fungsi go_init()pada library yang sudah di-download oleh member yang mengarahkan padahalaman server “api-init.php”. Halaman ini berisi kumpulan kode PHP yang akanmengecek apakah identitas dari aplikasi member sudah terdaftar di server ataubelum. Pada bagian ini cURL memiliki peranan penting sebagai penghubung untukpengiriman data member (private key) dengan nilai pengembalian berupa data yangdikirimkan valid atau tidak dari server dengan format data JSON. Jika data validmaka server akan mengirimkan session name dalam format JSON yang kemudiandisimpan ke dalam database server sebagai identitas dari client member. Yangkedua adalah fungsi “client_code()”, dimana di dalam fungsi “client_code()” initerdapat duafungsi lagi, yaitu “smsCAPTCHA_pop_up()” untuk membuat windowbaru dimana form input nomer hp akan ditampilkan nantinya dan“smsCAPTCHA_pop_up_go” untuk menghubungkan ke halaman server“sms.php” dimana form dan proses data client member (nomor hp dan kodecaptcha) akan dilakukan di sana. Proses ini akan dieksekusi setelah proses go_init()selesai dijalankan.



50

Gambar 5 Diagram Alir Proses Awal (Request Layanan)

Untuk proses verifikasi layanan service aplikasi smsCAPTCHA digambarkanoleh Gambar 6 yang menjelaskan bagaimana alur algoritma proses verifikasi kodecaptcha pada layanan service aplikasi smsCAPTCHA.Terdapat fungsi“go_verify()” pada proses ini, fungsi tersebut digunakan untuk mengirimkan databerupa ip client, uid, api_key dan kode captcha yang sudah dimasukkan kehalaman server “api-verify.php” proses pengiriman tersebut menggunakanteknologi dari cURL POST dari website member menuju ke server layanan serviceaplikasi smsCAPTCHA dengan nilai pengembalian berupa data valid atau tidakdalam format data JSON. Jika data yang dimasukkan valid maka session nameakan diteruskan untuk proses selanjutnya. Dari halaman itu data tersebut akandiproses dan dilakukan pengecekan (mencocokkan) antara kode captcha yangdimasukkan client member dengan kode captcha yang ada di dalam database.

51

Gambar 6 Diagram Alir Proses Verifikasi Kode Captcha

Proses selanjutnya adalah proses ketika web member meminta data nomorhp client member pada server layanan service aplikasi smsCAPTCHA. Prosestersebut digambarkan oleh Gambar 7, menjelaskan bagaimana alur algoritma prosesketika web member meminta data nomor hp client member pada server layananservice aplikasi smsCAPTCHA. Terdapat fungsi “go_get_phone()”, pada prosesini fungsi tersebut digunakan untuk mengirimkan data berupa ip client, uid, api_keydengan menggunakan cURL sebagai penghubung ke halaman server “api-get-phone.php” dan cURL POST untuk pengiriman data. Dimana pada halaman tersebutakan memproses permintaan data nomor hp client member yang sudah memasukkandata kode captcha dengan benar. Data nomor hp client member tersebut dikirimkanserver layanan service aplikasi smsCAPTCHA dengan format data JSON yangkemudian aplikasi smsCAPTCHA pada website member akan menterjemahkanformat tersebut menjadi string yang dapat diolah oleh pemilik website.



52

Gambar 7 Diagram Alir Proses Minta Data Nomer HP Client Member

4 . Implementasi dan Pengujian Sistem

Halaman utama adalah halaman awal yang diakses oleh pengguna (calonmember maupun member) ketika mengakses web layanan service aplikasismsCAPTCHA. Pada halaman utama ini terdapat informasi dasar mengenai weblayanan service aplikasi smsCAPTCHA, link menuju ke halaman informasi, sertalink menuju halaman “admin.php” untuk melakukan login. Design interfacehalaman utama/halaman index ini disajikan secara minimalis untuk menghindarikebingungan pengguna. Dengan design minimalis diharapkan informasi dapat diterimaoleh pengguna dengan baik. Agar dapat digunakan oleh website lain, pertama-tamapemilik website harus melakukan registrasi terlebih dahulu. Terdapat proteksi padapenanganan proses registrasi ini dengan menggunakan teknologi AJAX(Asynchronous JavaScript and XML).

53

Gambar 8 Tampilan Halaman Utama Website

Gambar 9 menampilkan halaman antarmuka form registrasi. Pada halamanini terdapat beberapa data yang harus diisi oleh calon member, terdapat pula beberapaproteksi pada form registrasi sehingga client diharuskan mengisi semua data secaralengkap. Beberapa proteksi tersebut antara lain adalah pesan peringatan bahwaterdapat halaman (nama field) yang belum diisi dan pada field email terdapat formatinput-an yang harus diisi agar masukkan valid (terisi dengan benar agar dapatdiproses). Jika pengisian tidak sesuai, maka akan terdapat pesan peringatan bahwaemail yang dimasukkan tidak tepat.

Gambar 9 Tampilan Halaman Utama Website

Gambar 10 Tampilan Pesan Peringatan Masukkan Tidak Valid

Kemudian setelah pemilik website terdaftar sebagai member, langkah selanjutnyaadalah login. Setelah berhasil melakukan login, maka member akan masuk ke dalamhalaman verifikasi layanan website. Pada halaman ini member dapat melakukanregistrasi website dengan mengisikan alamat website member yang akan dipasangaplikasi layanan smsCAPTCHA.



54

Gambar 11 Tampilan Halaman Verifikasi Halaman Website

Pada Gambar 11 terlihat bahwa terdapat satu textbox untuk dimasukkanalamat website member yang akan dipasang aplikasi layanan smsCAPTCHA. Adabeberapa proteksi untuk melakukan registrasi website ini, yaitu setelah tombol simpanverifikasi dipilih, maka sebelum alamat website tersebut tersimpan ke dalamdatabase, sistem akan melakukan pemeriksaan terlebih dahulu ke dalam databasesmsCAPTCHA apakah alamat website ini sudah terdaftar atau belum. Gambar 12menjelaskan jika alamat website ini belum terdaftar, maka alamat website ini akandisimpan ke dalam database berdasarkan username member dan setelah itu munculpesan message box bahwa data web telah berhasil tersimpan. Setelah itu memberakan terhubung ke halaman info web.

Gambar 12 Tampilan Pesan Data Website Tersimpan

Jika data yang dimasukkan sudah terdaftar di database, maka akan munculpesan message box bahwa data sudah ada dan member akan kembali ke halamanverifikasi halaman website seperti telihat pada Gambar 13.

Gambar 13 Tampilan Pesan Data Website Sudah Terdaftar

Halaman info web adalah halaman yang berisi tentang informasi layanan member.Disini terdapat nama website member yang akan dipasang aplikasi smsCAPTCHA,

55

private key (api key dan user id), link download library dan link yang menuju kehalaman api documentation, dimana halaman ini berisi tentang tata cara penerapanaplikasi smsCAPTCHA ke website member dan beberapa baris source yang harusdi-copy oleh member untuk nantinya digabungkan dengan baris coding di websitemember.

Gambar 14 Tampilan Halaman Info Website

Data-data pada Gambar 14 (domain name, user id dan api key) diambildari database berdasar pada username member yang mengakses halaman tersebut.Pada field domain name pada Gambar 16 berisi alamat website member, fielduser id dan field api key berisi kode rahasia yang nantinya digunakan oleh memberuntuk memberikan identitas dari aplikasi smsCAPTCHA yang dipasang pada websitemember, field resource berisi dualink menuju halaman download dan halaman apidocumentation, dimana pada halaman tersebut terdapat petunjuk tentang tata caramengaplikasikan aplikasi smsCAPTCHA ke website member. Halaman DownloadLibrary memiliki fungsi utama yaitu sebagai tempat bagi member untuk melakukandownload library smsCAPTCHA agar aplikasi smsCAPTCHA pada websitemember dapat berfungsi dengan baik.

Gambar 15 Tampilan Halaman Download Library

Gambar 15 menunjukkan informasi tentang library smsCAPTCHA serta



56

beberapa link untuk melakukan download. Jika link library smsCAPTCHA tersebutdipilih maka member akan melakukan download library. Halaman api lib adalahhalaman yang disediakan sebagai informasi kepada member yang berisi tentangtata cara bagaimana mengaplikasikan aplikasi smsCAPTCHA ke website member.

Gambar 16 Tampilan Halaman Api Lib

Gambar 16 menunjukkan tampilan halaman api lib yang berisi tentang petunjukserta tata cara untuk member mengaplikasikan aplikasi smsCAPTCHA ke halamanwebsite member. Selain informasi mengenai tata cara mengaplikasikan aplikasismsCAPTCHA , terdapat pula baris kode HTML dan PHP yang memiliki fungsiuntuk menampilkan aplikasi smsCAPTCHA di website member danmenghubungkannya dengan file library yang sudah di-download(smsCAPTCHAlib.php). Kode ini harus di-copy oleh member dan diletakkan padabaris kode halaman website member yang ingin ditampilkan aplikasi smsCAPTCHA. Misal member ingin menampilkan aplikasi smsCAPTCHA pada guestbookwebsite-nya, maka member harus meng-copy baris kode tersebut ke dalam halamanguestbook website-nya. Pada baris kode tersebut, member juga harus memasukkankode rahasia yang sudah didapat dari halaman info web miliknya (user id dan apikey). Aplikasi layanan service aplikasi smsCAPTCHA memberikan layanan aplikasismsCAPTCHA kepada member yang terdaftar. Agar dapat diaplikasikan kewebsite lain dengan mudah, maka aplikasi dibuat secara minimalis dengan bentukform dan kode program dari sisi member yang simple.

57

Gambar 17 Tampilan Form Aplikasi smsCAPTCHA

Gambar 17 menunjukkan bentuk form dari aplikasi smsCAPTCHA. Sepertiyang sudah dijelaskan sebelumnya (pada halaman learnmore), aplikasi ini terdapatdua tombol dan satu textbox. Tombol “set nomor HP” digunakan untuk client webmember mengisikan nomor hpnya. Pada saat tombol ini dipilih maka aplikasi akanmeminta request layanan menuju server layanan service aplikasi smsCAPTCHA.Dalam proses meminta layanan menuju server layanan service aplikasismsCAPTCHA, form aplikasi smsCAPTCHA ini akan terhubung ke librarysmsCAPTCHA terlebih dahulu, kemudian dari library ini kemudian akanmenghubungkan antara aplikasi smsCAPTCHA member ke server layanan serviceaplikasi smsCAPTCHA. Library (smsCAPTCHAlib.php) pada aplikasismsCAPTCHA disini memiliki fungsi sebagai penghubung antara aplikasi pada webmember dengan server layanan service aplikasi smsCAPTCHA denganmemanfaatkan teknologi dari cURL. Proses pengiriman data menggunakancURL_POST dan kemudian menerima jawaban dari server berupa data denganformat JSON. Terdapat lima fungsi penting dalam library ini, yaitu fungsi get_ip_id()yang digunakan untuk mengambil data dari client member berupa ip dan tipe browseryang digunakan oleh client member. Kemudian fungsi go_init() untuk mengirimdata identitas dari aplikasi smsCAPTCHA pada member (api_key dan user_id)ke halaman server “api-init().php” untuk kemudian di verifikasi apakah datatersebut sudah terdaftar atau tidak dan jika data member sudah terdaftar makafungsi ini akan menerima hasil dari verifikasi data member berupa session_name.Di sisi server terdapat lima halaman utama dengan fungsi yang dimiliki. Yang pertamaadalah halaman “api-init.php” dengan fungsi utama adalah melakukan cek identitasdari aplikasi smsCAPTCHA yang sedang melakukan request layanan dan membuatdata layanan service pada tabel captcha_session. Yang kedua adalah halaman“sms.php” yang memiliki fungsi utama untuk menampilkan form “set nomer hp”dan membuat kode captcha setelah client member memasukkan nomor handphonepada form “set nomer hp”.Yang ketiga adalah halaman “smslib.php” yang memilikifungsi utama adalah sebagai penghubung antara server layanan service aplikasismsCAPTCHA dengan server web penyedia layanan sms. Pada halaman inidigunakan curl post untuk mengirimkan data kode captcha dan nomor hp clientmember.Yang keempat adalah halaman “api-verify.php” yang memiliki fungsi utamauntuk memverifikasi jawaban captcha yang dimasukkan oleh client member dengandata kode captcha yang terdapat di dalam database. Jika semua proses verifikasikode captcha sudah dilalui, maka proses terakhir terdapat pada halaman ini, yaitu



58

halaman “api-get-phone” yang memiliki fungsi utama adalah untuk memberikan datanomor handphone dari client member yang sedang melakukan proses verifikasidengan aplikasi smsCAPTCHA pada website member. Proses pada halaman inidapat digunakan sesuai dengan yang member inginkan dan butuhkan. Jika membermerasa tidak perlu untuk mengaktifkan layanan ini, maka member menonaktifkankode untuk memanggil fungsi meminta data nomor handphone di dalam sourceyang sudah member copy. Pada pengujian sistem ini, menggunakan metode pengujianperangkat lunak black box dengan tujuan untuk mengetahui apakah semua fungsiperangkat lunak telah berjalan dengan semestinya sesuai kebutuhan fungsional yangtelah didefinsikan atau tidak. Sehingga sistem dapat menghasilkan layanan servicecaptcha berbasis sms kepada setiap website yang sudah terdaftar (website member)dengan baik. Ada dua tipe pengujian pada proses ini, yaitu pengujian sistem padaweb smsCAPTCHA dan pengujian pada member dan client member. Pengujiansistem pada web smsCAPTCHA ini menggunakan variable – variable yang terkaitdengan interaksi antara calon member (visitor) dengan sistem (website layananservice aplikasi smsCAPTCHA).

Tabel 1 pengujian sistem pada web smsCAPTCHA telah berjalan denganlancar dan baik. Kesimpulan tersebut sesuai dangan terpenuhinya variable yangdiberikan. Kemudian dilakukan pengujian sistem pada member dan client member.Pengujian sistem pada member dan client member ini menggunakan variable-variable yang terkait dengan interaksi antara member dengan sistem dan antaraclient member dengan aplikasi smsCAPTCHA pada website member.

Tabel 1 Pengujian Sistem Pada Web smsCAPTCHA

No Variable yang digunakan Hasil

Pengujian 1. Apakah sistem menampilkan informasi yang

seharusnya ditampilkan? Ya

2. Apakah tombol navigasi berfungsi dengan benar?

Ya

3. Apakah sistem dapat membedakan antara member dengan visitor?

Ya

4. Apakah Proses sign up dapat dilakukan dengan benar?

Ya

5. Apakah proteksi pengisian form pada proses sign up dapat berjalan dengan baik?

Ya

6. Apakah demo program aplikasi smsCAPTCHA dapat berjalan dengan baik?

Ya

Layanan service aplikasi smsCAPTCHA ini adalah sistem layanan berbasiswebsite. Dan akan digunakan oleh banyak member dan client member. Oleh karenaitu dibutuhkan implementasi langsung dari sisi member dan client member untukmelakukan tes terhadap sistem. Pada tahap ini peneliti telah menyebarkan link angketke forum internet yaitu Kaskus dan Jasakom agar aplikasi dapat dicoba oleh memberforum tersebut. Dari angket yang tersebar pada forum tersebut selama kurang lebihdua minggu dan menghasilkan dua puluh tujuh data yang diisi oleh member forum.

59

Dari hasil pengumpulan data dari responden tersebut maka bisa dihitung persentasedengan cara mengetahui prosentase nilai interfal dari hasil jawaban responden.Kemudian kesimpulan yang didapat adalah bahwa hasil implementasi dari sistemlayanan service aplikasi smsCAPTCHA yang dibuat telah sesuai dengan tujuan.Hal ini didasari data prosentase sebanyak 53.33333% dari responden yangmemberikan kriteria penilaian terhadap sistem adalah setuju dan data denganprosentase sebanyak 20% dari responden yang memberikan kriteria penilaian terhadapsistem adalah sangat setuju. Semua proses yang menggunakan cURL, yaitu padaproses pengiriman data antar server menggunakan cURL POST juga sudah berjalansebagaimana mestinya sehingga sistem layanan service aplikasi smsCAPTCHA dapatberkomunikasi dengan baik dan data dari member dapat diolah oleh server.Pengembalian data dari server menuju aplikasi smsCAPTCHA pada memberdengan menggunakan JSON format juga sangat efektif, karena data yang dikirimoleh server dapat langsung dibaca tanpa harus melalui deklarasi fungsi yang panjangsehingga proses pengembalian data dapat berjalan dengan baik. Dengan demikianpengujian menunjukkan bahwa sistem ini menghasilkan layanan service aplikasismsCAPTCHA pada web php berbasis cURL dengan menggunakan JSON formatdengan baik. Selain itu terdapat kelemahan dari aplikasi yang telah dibuat, yaitu darisisi member, a.Layanan aplikasi smsCAPTCHA tidak dapat digunakan pada webhosting yang tidak memiliki support untuk javascript; b.Terjadi kesulitan dalampenerapan aplikasi smsCAPTCHA pada sistem yang menggunakan bahasapemrograman ajax sebagai proteksi input data; c.Aplikasi smsCAPTCHA dapatdigunakan pada alamat website lain dengan menggunakan kode rahasia yang sama;d.Ketika alamat website member di rubah atau dihapus, maka kode rahasia jugaakan berubah, sehingga member tidak dapat menggunakan aplikasi smsCAPTCHAlagi sebelum menginputkan kode rahasia yang baru ke dalam kode rahasia aplikasismsCAPTCHA pada websitenya. Kelemahan sari sisi client member yaitu prosesuntuk menerima pesan kode captcha melalui sms terkadang memakan waktu yangsangat lama. Hal ini terjadi karena dalam proses untuk pengiriman kode melaluisms, sistem menggunakan server dari website penyedia layanan sms, sehingga cepatlambatnya pengiriman sms tergantung pada server website tersebut.

5 . Simpulan

Untuk menerapkan dan mengkombinasikan antara captcha dan sistem sms(short message service) pada aplikasi website ini serta agar aplikasi dapat digunakanoleh member kedalam website atau blog mereka, maka dapat menggunakan teknologicURL sebagai pengiriman data antar server dan format data menggunakan formatdata JSON. Serta digunakan pula web server penyedia layanan sms sebagai smsgateway untuk mengirimkan data captcha tersebut melalui sms: Server websitelayanan service aplikasi smsCAPTCHA dapat melayani setiap permintaan captchadengan baik, terbukti dari pengujian yang sudah dilakukan dengan permintaan layananyang datang lebih dari satu website member dan lebih dari satu client memberyang mengakses secara bersamaan. Dengan adanya website layanan service aplikasismsCAPTCHA ini dapat membantu memberi pilihan untuk para pemilik website



60

maupun blog yang ingin mengaplikasikan layanan captcha dengan konsep yang lain(selain kode captcha yang terdistorsi di dalam gambar) yaitu kode captcha berbasissms ke halaman website mereka tanpa harus membeli modem sendiri, server dantanpa menuliskan coding smsCAPTCHA yang panjang dan rumit ke dalam websitemereka.

6 . Daftar Pustaka

[1] Tutorial PHP.2011.How PHP Works, http://learnphp-tutorial.com. Diaksestanggal 10 Oktober 2010.

[2] Sutarman.200.Seri Pemrograman Web dengan PHP dan MySQL. Yogyakarta:Penerbit Andi.

[3] Betha, Sidik.2007.MySQL Untuk Administrator dan Pengembang AplikasiWeb.

[4] JSON.2009.Introducing JSON, http://www.json.org/. Diakses tanggal 2September 2010.

[5] reCaptcha.2010.reCAPTCHA (Labs).http://code.google.com/apis/recaptcha/docs/php.html.Diakses tanggal 1 September 2010.

[6] Sunyoto, Andi.2009.AJAX - Membangun Web dengan TeknologiAsynchronous dan XML. Jakarta : Andi Publisher.

Documents

Layanan Service Aplikasi smsCAPTCHA pada Web PHP …ftiuksw.org/ejournal/assets/pdf/507d9c8adca2f4b9ab7ea92400ebcad9.… · Perkembangan selanjutnya adalah Rasmus ... source serta