BAB 2 TINJAUAN PUSKATA 2.1
Teori Umum 2.1.1
Pengertian Internet Menurut Zeid, Ibrahim (2000:4) internet adalah tentang komputer dan
program penyelusuran. Pada awalnya internet hanya bisa digunakan oleh militer saja. Pada tahun 1968 internet mulai digunakan oleh beberapa universitas di Amerika, dan pada tahun 1969 jaringan internet mulai dibentuk dan disambungkan ke beberapa universitas dan lembaga di Amerika. 2.1.2
Pengertian World Wide Web World Wide Web(WWW) menurut Kenneth, Jane Laudon (2003:17)
adalah sistem dengan standar yang secara universal digunakan untuk menyimpan, mengambil, memformat, dan menampilkan informasi dalam lingkungan jaringan. WWW dikembangkan pertama kali di pusat penelitian partikel eropa (CERN), Jenewa, Swiss. Pada tahun 1989 Berners-Lee membuat proposal memulai proyek pembuatan hypertext secara global. Kemudian pada bulan oktober 1990, “WWW” sudah dapat digunakan didalam lingkungan CERN. 2.1.3
Interaksi Manusia Komputer Menurut Shneiderman dan Plaisant (2005:4), Interaksi Manusia dan
Komputer (IMK) adalah ilmu yang berhubungan dengan perancangan, evaluasi, dan
implementasi sistem komputer yang interaktif untuk
digunakan oleh user. Titik berat IMK adalah perancangan dan evaluasi antar muka pemakai (user interface). User interface adalah bagian dari sistem komputer yang memungkinkan manusia berinteraksi dengan komputer.
9
10
2.1.3.1 Lima Faktor Manusia Terukur Menurut Shneiderman dan Plaisant (2005:16), ada lima faktor manusia terukur yang dapat dijadikan pusat evaluasi kebutuhan pengguna dalam perancangan suatu user interface, yaitu: 1. Waktu belajar Merupakan suatu tolak ukur seberapa lama seorang user mampu mempelajari apa saja yang dapat dilakukan dengan tools yang diberikan. 2. Kecepatan kinerja Merupakan suatu tolak ukur seberapa lama hal tersebut dapat bekerja dengan baik. 3. Tingkat kesalahan user Tolak ukur seberapa banyak kesalahan yang dapat dilakukan user dalam mengerjakan suatu tugas. 4. Daya ingat Mengukur seberapa baik seorang user dapat mengingat pengetahuan yang didapatkan dalam waktu tertentu setelah menjalankan program tersebut. 5. Kepuasan subjektif Seberapa puas user setelah menggunakan applikasi tersebut, hal ini dapat ditanyakan langsung dengan mewawancarai atau melakukan survei. 2.1.3.2 Delapan Aturan Emas Menurut Shneiderman dan Plaisant (2005:74), ada delapan aturan emas yang dapat digunaankan untuk evaluasi perancangan suatu user interface, yaitu:
11
1. Konsistensi Bentuk konsistensi dapat dilakukan seperti pemilihan jenis huruf, Kapitalisasi, Bahasa yang digunakan, Penggunaan warna, dan hal lainnya yang harus konsisten dan diterapkan secara keseluruhan 2. Universal Usability Adanya fitur yang dapat menjelaskan secara rinci untuk user awam dan untuk para user yang mahir atau ahli disediakan fitur seperti shortcut yang memudahkan user menjelajahi sistem secara cepat 3. Memberikan Feedback Yang Informatif Dalam setiap hal yang dilakukan oleh user harus mempunyai respon atau feedback yang informative sehingga user dapat mengerti feedback apa yang telah diberikan. 4. Rancangan Dialog Penutup Semua hal yang dilakukan user membentuk suatu urutan yang telah diatur kedalam kelompok dimana terdapat bagian awal, tengah, akhir. 5. Pencegah Kesalahan Suatu sistem yang baik dikatakan apabila user tidak dapat melakukan kesalahan yang fatal dan sering melakukannya. Apabila user melakukan kesalahan, sistem dapat mendeteksi kesalahan tersebut dan memberikan mekanisme sederhana yang dapat dipahami dengan mudah. 6. Kemudahan Kembali Ketindakan Sebelumnya Hal ini dapat mengurangi kekuatiran user ketika user melakukan kesalahan, karena user diingatkan terlebih dahulu dan dapat membatalkan tindakannya sehingga membuat user lebih leluasa dalam menjelajahi fitur-fitur yang ada.
12
7. Mendukung Pusat Kendali Internal User ingin menjadi pengontrol sistem dan sistem harus merespon segala tindakan user. Sehingga user menjadi lebih inisiatif dalam menggunakan sistem tersebut. 8. Mengurangi Beban Ingatan Jangka Pendek Setiap user memiliki daya ingat jangka pendek yang berbeda, dalam mengingat beberapa hal dalam waktu singkat dapat menjadikan user terbebani, sehingga buatlah sistem yang sederhana agar user mudah memahaminya.
2.1.4
Sistem Basis Data Menurut Connolly and Begg (2005:31), basis data (database) adalah
suatu kumpulan data yang saling terhubung beserta definisinya, dan dirancang untuk memenuhi kebutuhan informasi suatu organisasi.
2.1.4.1 Database Management System Database management system adalah sebuah perangkat lunak yang
memungkinkan
user
untuk
menentukan,
membuat,
mempertahankan dan mengontrol akses ke basis data. Komponen database management system environtment yaitu :
1. Hardware Database
management
system
membutuhkan
hardware untuk bekerja. Perangkat keras dapat bervariasi
mulai
dari
satu
komputer
pribadi,
mainframe tunggal, maupun jaringan komputer, bergantung dengan kebutuhan user. 2. Software Software meliputi database management system software itu sendiri, bersama dengan sistem operasi,
13
dan perangkat lunak jaringan jika dibutuhkan. Biasanya saat ini software yang sering digunakan adalah software yang tulis dengan third generation programming language (C,C++,Java,etc). 3. Data Data adalah hal yang paling penting didalam database management system karena data berperan sebagai suatu hal yang menjembatani antara mesin dengan manusia. 4. Prosedur Prosedur adalah instruksi atau aturan yang dibuat untuk mengendalikan tampilan dan penggunaan basis
data.
Staff
dan
pengguna
perlu
mendokumentasikan cara penggunaan sistem basis data. 5. Orang Komponen terakhir adalah orang yang terlibat dalam database management system.
2.1.4.2 MySQL Menurut Sheldon dan Moes (2005:8), MySQL seperti sebuah sistem, sama seperti Oracle, DB2, SQL Server, dan Postgre SQL. Produk ini seperti sistem manajemen basis data lain, mengizinkan pengguna untuk mengakses dan memanipulasi data. Melindungi data dari corrupt dan inconsistencies, dan melakukan perawatan data yang telah disimpan. Yang berbeda dari MySQL dan DBMS adalah MySQL tidak hanya mendukung penyimpanan data didalam tabel, melainkan MySQL dapat melakukan spesifikasi relasi antara tabel didalamnya. Fitur-fitur penting yang terdapat dalam MySQL:
14
1. Skalabilitas MySql dapat menangani basis data dalam skala besar. Hal ini telah dibuktikan dalam implementasi diperusahaanperusahaan besar seperti Yahoo!, Google, HP, dan Cisco. Menurut dokumentasi produk MySQL dari semua database yang menggunakan MySQL AB, perusahaan
yang
menggunakan MySQL, didalamnya terdapat lima puluh juta record, dan pengguna MySQL melaporkan bahwa database mereka mengandung enam puluh ribu tabel, dan 5 miliar baris. 2. Portabilitas MySQL dapat digunakan dalam berbagai sistem operasi, termasuk Unix, Linux, Windows, Q2/S, Solaris, dan MacOS. 3. Konektivitas MySQL dapat diakses dari mana saja di dalam internet, dan banyak pengguna dapat mengakses sebuah data MySQL bersamaan. MySQL dapat diakses dari bahasa pemograman seperti C, C++, Java, PHP, Perl, Phyton dan juga mendukung TCP/IP sockets, Unix socket, named pipe. 4. Keamanan MySQL memiliki sistem yang handal dalam mengatur akses ke dalam data. Sistem tersebut menggunakan struktur host- dan user-based yang dapat mengatur siapa saja yang dapat mengakses informasi tertentu dan level akses ke informasi tersebut. 5. Kecepatan Seperti yang terdapat dalam www.mysql.com (website official MySQL) waktu yang dibutuhkan basis data
15
MySQL dalam menanggapi sebuah permintaan sama cepatnya atau lebih cepat dari kebanyakan sistem manajemen basis data relasional komersial. 6. Kemudahan dalam penggunaan MySQL mudah di-install dan mudah diterapkan. Pengguna dapat melakukan instalasi MySQL dan menjalankannya dalam hitungan menit setelah mengunduh datanya. 7. Kode Open-Source MySQL AB, perusahaan pembuat MySQL, membuat kode MySQL tersedia untuk semua orang, dan dapat diunduh dan digunakan. Open-source mengizinkan semua orang untuk terlibat dalam review, pengujian, dan pengembangan kode.
2.1.5
UML UML (Unified Modeling Language) adalah sebuah cara yang
digunakan untuk mendeskripsikan sebuah sistem atau perangkat lunak. Ada beberapa jenis diagram UML yang biasa digunakan, diantaranya:
1. Use Case Diagram Menurut Whitten (2007:246), use case diagram adalah sebuah diagram yang menjelaskan tentang sistem dari sisi pengguna sistem tersebut dengan menggambarkan interaksi antara sistem dengan sistem eksternal dan pengguna. Dengan kata lain, diagram tersebut menggambarkan siapa yang akan menggunakan sistem dan dengan cara apa pengguna berinteraksi dengan sistem.
16
Gambar 2.1 Contoh Use Case Diagram (Whitten:246) A. Actor Aktor adalah apapun yang dapat berinteraksi dan dapat memicu proses selanjutnya dengan sistem untuk melakukan pertukaran informasi. Sebuah aktor merepresentasikan sebuah peran yang dilakukan oleh pengguna dalam berinteraksi dengan sistem, bukannya individu tertentu. Aktor tidak harus berupa manusia, bisa saja berupa organisasi, sistem informasi, dan perangkat eksternal. B. Relationship Relationship
adalah
garis
dan
simbol
yang
menghubungkan kedua use case. Hubungan antara use case berbeda bergantung dengan garis yang menghubungan antara use case tersebut. Berikut ini adalah beberapa jenis hubungan yang ditemukan pada diagram use case. a. Associations Hubungan antara aktor dan use case dimana terdapat interaksi diantara mereka, relasi ini disebut associations.
17
Gambar 2.2 Contoh Associations (Whitten, 2007:248) b. Extendeds Beberapa use case mengandung fungsi yang kompleks karena berisi beberapa langkah yang membuat logika use case sulit untuk dimengerti. Agar lebih mudah dimengerti, kita dapat melakukan penyederhanaan langkah yang digunakan, sehingga hasil yang didapat disebut extension use case.
Gambar 2.3 Contoh Extends (Whitten, 2007:249) c. Uses (atau Includes) Sering ditemukan beberapa use case yang memiliki fungsi yang hampir sama, untuk mengurangi redudansi data tersebut maka dua atau lebih use case akan digabungkan menjadi 1 use case.
18
Gambar 2.4 Contoh Uses/Includes (Whitten, 2007:249) d. Depends on Hubungan ketergantungan antara use case dimana proses suatu use case tersebut tidak dapat bekerja hingga use case yang lain telah dilakukan.
Gambar 2.5 Contoh Depends on (Whitten, 2007:250) e. Inheritance Hubungan antar aktor pada saat ada dua atau lebih aktor yang memiliki perilaku yang hampir sama. Hal yang dilakukan untuk mengurangi redundansi tersebut adalah
19
dengan membuat aktor baru (abstract actor) yang nantinya akan mewariskan sifat kepada aktor yang memiliki perilaku hampir sama tadi.
Gambar 2.6 Contoh Inheritance (Whitten, 2007:250)
2. Activity Diagram Menurut Whitten (2007, p390), activity diagram adalah proses langkah atau aktifitas dari sistem. Diagram ini mirip dengan flowcharts, yang menjelaskan alur aktifitas dari sistem. Tetapi activity diagram berbeda dengan flowcharts, yang membedakannya adalah menyediakan mekanisme untuk melakukan aktifitas secara paralel. Oleh karena itu activity diagram ini adalah model sangat berguna dalam mengeksekusi atau mengoperasikan sebuah sistem, dari hasil tersebut activity diagram dapat disimpulkan sebagai diagram yang fleksibel, dapat melakukan desain dan analisis.
20
Gambar 2.7 Contoh Activity Diagram (Whitten, 2007:393)
21
Tabel 2.1 Penjelasan Activity Diagram No
Simbol
Arti Simbol
1
Initial nodes
Merepresentasikan awal dari suatu proses. Keseluruhan aktivitas yang mengandung
2
Actions urutan-urutan langkah. Menunjukkan langkah berikutnya dari
3
Flow suatu tindakan.
4
Decision
Menunjukkan aktivitas yang dapat dipilih. Menggabungkan
5
kembali
flow
yang
Merge sebelumnya terpisah oleh decision. Tindakan pada flow paralel yang ada di
6
Fork
bawah flow dapat terjadi dengan urutan tertentu ataupun bersamaan. Semua tindakan yang masuk ke dalam join
7
Join
harus
diselesaikan
sebelum
proses
berlanjut. 8
Activity Final
Merepresentasikan akhir dari suatu proses.
22
3. Sequence Diagram Menurut Whitten (2007, p394), sequence diagram adalah diagram yang menjelaskan tentang berinteraksi dengan objek dengan menggunakan pesan dalam eksekusinya.
Gambar 2.8 Contoh Sequence Diagram (Whitten, 2007:395)
23
Tabel 2.2 Penjelasan Sequence Diagram No
Notasi
Arti Notasi Seperti actor dalam use case diagram,
1
Actor disini actor menggunakan actor symbol Kotak yang menunjukan sistem sebagai “black box”. The colon (;) merupakan
2
System
notasi standar dari sequence diagram yang menggambarkan
sistem
yang
sedang
berjalan Garis vertikal dari actor dan system 3
Lifelines
symbols, yang menunjukan umur sequence diagram Merupakan garis yang diset sepanjang
4
Activations Bars
lifelines
dalam
waktu
tertentu
saat
participant aktif berinteraksi Garis horizontal dari actor ke system yang 5
Input Messages berisikan pesan. Garis horizontal dari system ke actor yang
6
Output Messages digambarkan dengan garis putus-putus.
24
4. Class Diagram Menurut Whitten (2007:382), class diagram adalah diagram yang menggambarkan struktur dari sebuah objek sistem, yang ditunjukan oleh objek kelas yang sistem tersebut buat, serta hubungan antar masing-masing objek kelas. Menurut Whitten (2007:650), terdapat tiga jenis visibility antara lain : 1. Private Atribut
yang
hanya
bisa
diakses
dengan
cara
mendefinisikan class atau atribut yang akan mengaksesnya terlebih dahulu. 2. Protected Sebuah atribut yang memiliki visibility protected hanya dapat diakses oleh class yang mendefinisikannya dan oleh class yang merupakan turunan dari class yang mendefinisikannya. 3. Public Sebuah atribut maupun method yang memiliki visibility public dapat dilihat dan diakses oleh semua class. Terdapat beberapa hal yang harus diperhatikan dalam class diagram, diantaranya :
1. Association Menurut Whitten (2007:378), asosiasi adalah hubungan terstruktur antar dua kelas atau lebih dengan hubungan bidirectional. Di ujung garis asosiasi terdapat multiplicity, yaitu angka yang akan mengindikasikan jumlah kejadian minimum dan maksimum dari satu objek/kelas untuk satu kejadian tunggal dari objek/ kelas yang terkait.
25
Gambar 2.9 Hubungan Asosiasi (Whitten, 2011:377) 2. Aggregation – Composition Menurut Whitten (2007:378), aggregation adalah sebuah hubungan dimana suatu kelas yang mengandung satu atau lebih bagian kelas yang lebih kecil. Sebaliknya bagian kelas yang lebih kecil merupakan bagian dari kelas yang lebih besar. Sedangkan composition memiliki hubungan yang lebih kuat dibanding dengan aggregation. Pada komposisi, kelas yang sepenuhnya bertanggung jawab atas pembentukan dan perusakan bagian kelasnya yang lebih kecil. Namun pada UML 2.0, notasi untuk aggregation sudah dihilangkan karena dianggap tidak memiliki fungsi yang mencolok.
Gambar 2.10 Hubungan Agregasi dan Komposisi (Whitten, 2007:379)
26
3. Generalization – Specification Menurut
Whitten
(2007:373),
hubungan
generalisasi/spesifikasi adalah sebuah cara dimana kelas yang memiliki atribut dan perilaku yang mirip digabungkan menjadi kelas yang baru, disebut dengan supertype. Atribut dan perilaku dari kelas supertype akan diwariskan kepada kelas subtype.
Gambar 2.11 Hubungan generalisasi dan spesifikasi (Whitten, 2007:376)
27
2.1.6
Teori Software Engineering
Dalam pembuatan aplikasi game edukatif ini akan digunakan metode pendekatan metode Waterfall Model. Mengacu pada Bernd Bruegge dan Allen H. Dutoit dalam bukunya yang berjudul Object Oriented Software Engineering langkah-langkah dalam Waterfall Model adalah sebagai berikut :
. Gambar 2.12 Waterfall Model 1. Project Initiation Process Proses ini dilakukan pada tahap awal pembuatan project, karena ini adalah tahap pembuatan ruang lingkup project 2. Concept Exploration Process Proses ini dilakukan untuk pencarian konsep atau pengumpulan ide agar pembangunan aplikasi berjalan dengan baik. 3. System Allocation Process Dalam proses ini dilakukan tahap untuk menentukan software, atau hardware yang tepat untuk menunjang arsitektur aplikasi yang akan dibangun.
28
4. Requirements Process Requirements process dijalankan untuk memenuhi kebutuhan client sehingga aplikasi yang dibangun dapat menyelesaikan masalah client. 5. Design Process Proses ini dilakukan untuk menentukan design dari aplikasi yang akan dibangun sesuai dengan kebutuhan aplikasi tersebut. 6. Implementation Process Dalam proses ini code-code yang telah dikembangkan disatukan dengan design yang telah ditentukan. 7. Verification and Validation Process Dalam tahap ini dilakukan pengujian kelayakan dan kinerja dari aplikasi, dan mencari kesalahan-kesalahan yang ada dalam aplikasi tersebut. 8. Installation Process Pada tahap ini aplikasi sudah harus siap untuk digunakan oleh client. 9. Operation and Support Process Proses terakhir dimana aplikasi dapat berjalan dengan data yang sesungguhnya dan melakukan pengecekan secara berkala sehingga kesalahan-kesalahan baru yang mungkin muncul dapat diperbaiki dengan cepat
2.2
Teori Khusus 2.2.1 Pengertian HTML5 Menurut Iqbal, Husni dan Studiawan (2012), HTML5 (Hypertext Markup Language version 5) adalah sebuah bahasa markah yang menstrukturkan isi dari World Wide Web, sebuah teknologi utama pada internet. Standar HTML5 menyempurnakan elemen-elemen lama yang terdapat pada standar sebelumnya, menambahkan elemen-elemen yang lebih semantik dan menambahkan fitur-fitur baru untuk mendukung pembuatan aplikasi web yang lebih kompleks.
29
Berikut
fitur-fitur
baru
HTML5
yang
dijelaskan
didalam
www.w3schools.com (sebuah website belajar cara membuat website), antara lain :
1. Canvas Canvas merupakan elemen yang digunakan untuk menggambar grafik menggunakan scripting. Untuk menggunakan elemen canvas harus dengan melakukan scripting, canvas mempunyai beberapa metode untuk menggambar suatu kotak, lingkaran, karakter, atau memasukan suatu gambar. 2. Scalable Vector Graphics Scalable Vector Graphics (SVG) digunakan untuk menentukan suatu grafik berbasis vector untuk web, grafik ini menggukan format XML, yang berarti tidak akan kehilangan fokus atau tidak akan terjadi blur ketika dilakukan proses zoom. 3. Drag/Drop Drag and drop merupakan fitur yang sudah sangat dikenal bagi pengguna computer. Tetapi didalam HTML5 ketika kita melakukan suatu “drag” objek atau melakukan penarikan objek kita dapat menaruhnya dilokasi yang berbeda.
4. Geolocation HTML5 geolocation API digunakan untuk mengetahui lokasi penggunanya, tetapi karena ini menyangkut kerahasiaan pengguna, hal ini hanya dapat dilakukan ketika user yang dituju menyetujui untuk melakukannya. 5. Video HTML5 menyediakan elemen baru untuk menampilkan sebuah video didalam website, elemen ini juga dapat mengatur tinggi dan lebar atau disebut resolusi dari video tersebut.
30
Dalam elemen video terdapat 3 format yang didukung oleh browser. Berikut tabel jenis format video berserta browser yang mendukungnya.
Tabel 2.3 Penjelasan format video didalam browser Browser
MP4
WebM
Ogg
Intenet Explorer
√
-
-
Chrome 6+
√
√
√
Firefox 3.6+
-
√
√
Safari 5+
√
-
-
Opera 10+
-
√
√
6. Audio Elemen baru yang disediakan didalam HTML5 adalah audio. Dialam elemen ini kita dapat memutar sebuah suara didalam website. Dan dapat melakukan pengaturan play, pause, volume. Untuk menggunakan elemen ini hanya terdapat 3 jenis format audio yang dapat dijalankan didalam browser. Berikut tabel 3 jenis format audio beserta dengan browser yang mendukungnya.
31
Tabel 2.4 Penjelasan format audio didalam browser Browser
MP3
Wav
Ogg
Intenet Explorer
√
-
-
Chrome 6+
√
√
√
Firefox 3.6+
-
√
√
Safari 5+
√
√
-
Opera 10+
-
√
√
7. Input Types Seperti versi HTML sebelumnya yang terdapat fitur input types, didalam HTML5 terdapat tambahan bagi fitur input types, seperti : color, date, datetime, datetime-local, email, month, dll.
2.2.2
Socket Programming Didalam buku Donahoo, dan Calvert (2001:4), pada saat membuat
sebuah program yang membutuhkan hubungan komunikasi antara komputer, diperlukan sebuah protocol yang merupakan persetujuan bahwa mereka akan berkomunikasi satu sama lain.
Gambar 2.13 clinet and server (Donahoo, dan Calvert, 2001:1)
Clients biasanya berkomunikasi dengan satu server dalam waktu yang sama, contohnya sebuah web server, sebuah client dapat berkomunikasi
32
dengan banyak web server , dalam hal ini pula sebuah server tidak jarang untuk berkomunikasi lebih dari satu client.
Gambar 2.14 server handling many client (Donahoo,dan Calvert,2001:1) Client dan server yang dianggap berkomunikasi hanya dengan menggunakan jaringan protocol, sebenarnya melibatkan beberapa network layer. Berfokus dalam TCP/IP protocol suite, atau yang sering disebut internet protocol suite.
Gambar 2.15 communicate using TCP (Donahoo, dan Calvert, 2001:1)
33
Client dan server berkomunikasi dengan menggunakan application protocol, transport layer berkomunikasi menggunakan Transmission Control Protocol (TCP), dapat dilihat dalam gambar 2.16. TCP dan IP bukanlah satu-satunya protocol yang kita bahas, beberapa client dan server menggunakan protocol yang beranama User Datagram Protocol (UDP). TCP merupakan connection oriented protocol, TCP menjaga detail data, transmisi data, timeout, dll. Hampir semua aplikasi yang berada dalam internet menggukan TCP. UDP merupakan connectionless protocol. Dalam UDP tidak ada jaminan bahwa data yang dikirim sampai pada tujuannya.
Gambar 2.16 socket function for TCP (Donahoo,dan Calvert,2001:40)
34
Pada gambar 2.17 menjelaskan bagaimana cara sebuah TCP membangun sebuah koneksi antara client dan server. -
Socket() adalah fungsi yang pertama kali harus dipanggil yang berguna untuk menentukan jenis komunikasi apa yang akan dipakai
-
Bind() adalah fungsi untuk mengikat sebuah protocol lokal untuk socket. Dengan Internet Protocol, alamat protocol adalah kombinasi dari IPv4 dan IPv6, bersama dengan nomor port dari TCP atau UDP.
-
Close() berfungsi sebagai untuk menutup sebuah socket dan memutuskan hubungan komunikasi TCP.
2.2.3
Websocket Menurut Wang, Salim, dan Moskovits (2013) websocket adalah
sebuah protocol dimana merupakan fitur konektivitas baru dari HTML5. Websocket dapat melakukan perpindahan data 2 arah dalam suatu waktu atau yang dikenal dengan transmisi data full-duplex. Untuk menghasilkan sebuah koneksi dengan protocol websocket, client harus melakukan request dengan protocol HTTP/1.1 dan mendapat reply dari server sehingga HTTP dirubah menjadi websocket yang dikenal dengan websocket opening handshake. Sebagai perbandingan pada websocket terdapat juga konsep yang bernama polling. Polling adalah fungsi yang bertugas untuk melakukan proses update setiap detiknya.
Gambar 2.17 polling send http request (Lengstorf, dan Leggetter, 2013:6)
35
Sama halnya dengan kehidupan nyata, dalam komunikasi antara client dengan server proses ini sangat menggangu dan tidak produktif, karena hanya menimbulkan banyak permintaan yang kosong dan terjadinya flooding terhadap server.
Gambar 2.18 polling vs websocket (Wang,Salim,dan Moskovits,2013:7) Dapat dilihat pada gambar 2.19, bahwa konsep websocket dengan polling memiliki perbedaan. Websocket memiliki efisiensi
dalam
transimisi data real-time dibanding protokol HTTP biasa, ini didukung oleh hasil percobaan yang dilakukan oleh Liu, Sun (2012), efisiensi merupakan faktor utama dalam transmisi data real-time. Melalui percobaannya dihasilkan data melalui tabel berikut.
36
2.2.4
Node.Js Menurut jurnal yang ditulis oleh Iqbal, Husni dan Studiawan (2012)
Node.js
adalah
sistem
perangkat
lunak
yang
didesain
untuk
pengembangan aplikasi web. Aplikasi ini ditulis dalam bahasa JavaScript, menggunakan basis event dan asynchrounous I/O. Tidak seperti kebanyakan bahasa JavaScript yang dijalankan pada web browser, Node.js dieksekusi sebagai aplikasi server. Aplikasi ini terdiri dari V8 JavaScript Engine buatan Google dan beberapa modul bawaan yang terintegrasi. Dalam buku Teixeira (2013,pV), server side javascript sudah beredar dari beberapa tahun lalu. Dalam versi serbelumnya berfokus pada menerjemahkan dari platform seperti Ruby, Phyton, PERL kedalam Javascript.
Dengan
menggunakan
Node.js
kita
dapat
membuat
programming model yang mudah dengan skala server yang cukup besar dengan mudah. Tiga kelebihan Node.Js. Yaitu : 1. Node is Easy – Node membuat I/O pemogramman menjadi lebih mudah dan dimengerti dari sebelumnya. 2. Node is Lean – Node tidak mencoba untuk menyelesaikan semua masalah, tetapi ini bergantung dengan pondasi internet protocol yang menggunakan fungsi API. 3. Node does note compromise – Node tidak mencoba untuk jalan dengan software yang sudah out of date. Karena Node.Js memberikan tampilan baru yang fresh.
2.2.5
Socket.Io Seperti yang ditulis dalam buku Rai (2013:48) Socket.Io merupakan
layer abstrak bagi Websocket. Socket.Io menyediakan library bagi server dan client yang mudah.
37
Untuk menggunakan Socket.Io dapat dilakukan dengan proses instalasi dalam Node.Js dengan menggunakan “npm”, npm merupakan Package Manager untuk Node.Js.
2.2.6
JavaScript Object Notation(JSON) Menurut Crockford(2008:136) JSON adalah format pertukaran data
yang ringan. Saat ini JSON merupakan bagian terbaik dari JavaScript, bahkan JSON memiliki bahasa yang independen. Pertukaran data antara program yang ditulis dalam bahasa JSON dapat dengan mudah diterapkan dan digunakan.
2.2.7 Keyboard Typing Theory Menurut Dobson (2009) kebanyakan keyboard komputer memiliki pijakan yang lebih tinggi pada tombol f dan j untuk membantu menentukan lokasi tanpa harus melihat keyboard. Berikut letak posisi jari pada keyboard.
Gambar 2.19 Hand Position (Dobson,2009:8)
38
2.3
Hasil Penelitian Sebelumnya Menurut Curran dan George (2012), komunikasi data pada halaman web pada umumnya menggunakan HTTP dimana hanya dapat melakukan perpindahan data 1 arah dalam satu waktu. Pada protokol HTTP memerlukan request untuk memperoleh setiap data baru. Proses request ini yang membuat komunikasi antara client dan server lambat.
Untuk mengatasi permasalah komunikasi data yang lambat dapat diatasi dengan menggunakan websocket. Seperti yang dilansir Wang, Salim, dan Moskovits (2013) dalam penelitiannya websocket adalah sebuah protocol dimana merupakan fitur konektivitas baru dari HTML5. Websocket dapat melakukan perpindahan data 2 arah dalam suatu waktu atau yang dikenal dengan transmisi data full-duplex. Untuk menghasilkan sebuah koneksi dengan protocol websocket, client harus melakukan request dengan protocol HTTP/1.1 dan mendapat reply dari server sehingga HTTP dirubah menjadi websocket yang dikenal dengan websocket opening handshake. Websocket memiliki efisiensi
dalam
transimisi data real-time dibanding protokol HTTP biasa, ini didukung oleh hasil percobaan yang dilakukan oleh Liu, Sun (2012), efisiensi merupakan faktor utama dalam transmisi data real-time. Melalui percobaannya dihasilkan data melalui tabel berikut Tabel 2.5 Perbandingan transmisi data antara HTTP dengan Websocket Number of packets
Number of bits
HTTP
Websocket
HTTP
Websocket
Client to server
83
5
33,662
372
Server to client
77
8
45,600
7456
Total
160
13
79,262
7828
Time(second) HTTP
Websocket
~2.5
~0.25
39
Dari tabel diatas menunjukan bahwa koneksi socket 10 kali lebih efisien dibandingkan dengan koneksi HTTP.
Gambar 2.20 Tampilan Awal Kendo Boy Kendo boy merupakan game yang dibuat oleh HIMTI BINUS UNIVERSITY dengan basis flash. Game ini dimainkan dengan cara mengetik sesuai dengan soal berikan untuk mengalahkan lawan.
Gambar 2.21 Tampilan Permainan Kendo Boy Dalam tampilan ini terlihat bagaimana gameplay Kendo Boy. Dengan mengetik sesuai yang diinginkan para player Kendo Boy diminta untuk mengalahkan lawan secepat mungkin.
40
Gambar 2.22 Tampilan Permainan Berakhir Kendo Boy Ketika player kalah, maka tampilan ini keluar menandakan permainan telah berakhir, player dapat memilih keluar dari permainan atau mencobanya kembali.
