9

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.

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

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

2 Actions Keseluruhan aktivitas yang mengandung

urutan-urutan langkah.

3 Flow Menunjukkan langkah berikutnya dari

suatu tindakan.

4 Decision Menunjukkan aktivitas yang dapat dipilih.

5 Merge Menggabungkan kembali flow yang

sebelumnya terpisah oleh decision.

6 Fork

Tindakan pada flow paralel yang ada di

bawah flow dapat terjadi dengan urutan

tertentu ataupun bersamaan.

7 Join

Semua tindakan yang masuk ke dalam 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

1 Actor Seperti actor dalam use case diagram,

disini actor menggunakan actor symbol

2 System

Kotak yang menunjukan sistem sebagai

“black box”. The colon (;) merupakan

notasi standar dari sequence diagram yang

menggambarkan sistem yang sedang

berjalan

3 Lifelines

Garis vertikal dari actor dan system

symbols, yang menunjukan umur sequence

diagram

4 Activations Bars

Merupakan garis yang diset sepanjang

lifelines dalam waktu tertentu saat

participant aktif berinteraksi

5 Input Messages Garis horizontal dari actor ke system yang

berisikan pesan.

6 Output Messages Garis horizontal dari system ke actor yang

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 Time(second)

HTTP Websocket 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 ~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.