BAB 2 TINJAUAN PUSTAKA 2.1 Teori Umum Teori-teori dasar yang digunakan dalam penulisan laporan pengembangan aplikasi akan dijelaskan sebagai berikut: 2.1.1 JQuery Chaffer dan Swedberg (2010:8) menjelaskan jQuery sebagai library dari Javascript yang mudah digunakan bagi para web developer dan web designer untuk menambahkan elemen-elemen yang dinamis dan menarik pada web yang dirancang, mengurangi ketidakkonsistenan serta mengurangi waktu perancangan website. Menurut Chaffer dan Swedberg (2011:9), fitur utama yang terdapat dalam jQuery antara lain: 1. Mengakses
elemen-elemen
dalam
sebuah
dokumen.
Tanpa
menggunakan library Javascript, seorang web developer harus menulis banyak baris kodingan untuk mengakses Document Object Model (DOM) tree dan menentukan bagian dari struktur dokumen suatu HTML. Sementara itu, dengan menggunakan jQuery, seorang developer dapat dengan mudah memilih dan menentukan bagian dari dokumen yang ingin dimanipulasi. 2. Memodifikasi tampilan dari sebuah halaman web. Dalam perancangan tampilan, CSS sudah cukup baik, namun tidak mendukung web browser yang tidak menggunakan standar yang sama. Dengan menggunakan standar yang mendukung semua web browser, jQuery memungkinkan pergantian style pada dokumen bahkan setelah dokumen sudah di-render. 3. Mengubah isi dari sebuah dokumen. jQuery dapat memodifikasi isi dari suatu dokumen meliputi mengubah teks, menyisipkan atau menukar gambar, menyusun ulang urutan dari suatu daftar, atau menulis ulang dan memperpanjang seluruh struktur dari HTML dengan menggunakan Application Programming Interface (API) yang mudah digunakan.
9
10 4. Merespon terhadap interaksi dari user. jQuery library memberikan kemudahan dalam mengerjakan berbagai event seperti, menekan sebuah link, tanpa harus mengacaukan bahasa pemrograman HTML dengan menggunakan event handlers yang sekaligus berfungsi untuk menghilangkan ketidakkonsistenan dalam browser. 5. Menganimasikan perubahan yang dibuat ke dalam dokumen. jQuery memfasilitasi peralatan untuk merancang tampilan grafik yang interaktif. 6. Mengambil informasi dari server tanpa harus me-refresh suatu halaman dalam web. Dengan menggunakan asynchronous Javascript and XML atau yang disebut dengan Ajax membantu dalam hubungan komunikasi antara client dan server. 7. Menyederhanakan task dari Javascript. Untuk seluruh dokumen dari jQuery disediakan library untuk meningkatkan dasar construct dari Javascript seperti iterasi dan manipulasi array. 2.1.2 Interaksi Manusia dan Komputer (IMK) Menurut definisi dari Association for Computing Machinery Special Interest Group on Computer–Human Interaction (ACM SIGCHI), Interaksi Manusia dan Komputer (IMK) adalah sebuah aturan yang berhubungan dengan desain, evaluasi, dan implementasi dari sistem komputer secara interaktif untuk digunakan oleh user dan pembelajaran yang menyangkut. Dalam
bukunya
Shneiderman
dan
Plaisant
(2010:88)
mengungkapkan mengenai 8 aturan emas dalam membuat desain interaktif, yaitu: 1. Berusaha untuk konsisten Dalam desain antarmuka segala sesuatu harus disesuaikan secara
konsisten
seperti
warna,
tema,
penggunaan
bahasa,
terminologi, menu, fitur help hingga urutan proses harus dibuat secara konsisten. 2. Menggunakan shortcut yang universal Seiring meningkatnya tingkat penggunaan seseorang dengan aplikasi, maka semakin tinggi juga keinginan mereka untuk mengurangi interaksi dan mempercepat pekerjaan.Untuk masalah
11 tersebut maka dibutuhkan fitur shortcut untuk mempermudah perpindahan halaman atau bahkan automation untuk mengurangi interaksi tersebut. 3. Memberikan umpan balik yang informatif Memberikan feedback yang informatif terhadap apa yang terjadi atau yang di lakukan dalam sebuah aplikasi. Apabila fitur yang di jalankan bersifat frequent seperti save dan delete maka informasi yang diberikan dapat secara sederhana. Jika operasi yang dijalankan bersifat penting maka informasi yang disampaikan harus lebih jelas dan informatif.Hal yang perlu diperhatikan dalam memberikan respon suatu operasi adalah informasi yang diberikan harus komprehensif dan bermakna, serta memperhatikan waktu kemunculannya secara tepat. Respon dapat berupa dialog box, alert, process bar, dan lainlain. 4. Memberikan dialog untuk menandakan penutupan Saat suatu operasi telah selesai, berikan informasi kepada pengguna bahwa operasi tersebut telah selesai dan pengguna dapat melanjutkan ke operasi selanjutnya atau dapat menggunakan fitur yang lain. Informasi kepada pengguna dapat berupa dialog box yang menyatakan suatu operasi telah selesai atau dengan action grouping agar pengguna mendapatkan informasi operasi-operasi apa yang sudah dilakukan dan operasi apa selanjutnya. 5. Memberikan penanganan kesalahan yang sederhana Sedapat mungkin suatu aplikasi dirancang agar pengguna tidak menghasilkan kesalahan (error) yang signifikan.Untuk memandu pengguna agar tidak menghasilkan error, maka perlu adanya mekanisme
pencegahan
error
sebelum
suatu
operasi
dijalankan.Apabila pada akhirnya user menghasilkan error, penyebab kesalahan tersebut harus diinformasikan. Pencegahan error dapat dilakukan dengan proses validasi input sebelum mengirimkan (submit) atau dengan menampilkan petunjuk (hints) saat pengguna berinteraksi dengan aplikasi.
12 6. Menyediakan pembalikan aksi yang mudah Saat suatu operasi sudah dijalankan, sebaiknya disediakan suatu fitur untuk mengembalikan operasi tersebut. Fitur ini dapat mengurangi kecemasan pengguna aplikasi apabila melakukan kesalahan dan menghindari pengguna untuk mencoba-coba fitur yang tidak mereka pahami. Hal tersebut dapat diimplementasikan dengan adanya fitur undo, baik untuk single action ataupun group action. 7. Mendukung pengguna untuk menjadi pengendali internal Pada umumnya pengguna selalu memiliki keinginan untuk memegang kendali atas apa yang dilakukan oleh aplikasi. Oleh karena itu, perlu adanya fitur-fitur yang menunjukkan bahwa penggunalah yang memegang kendali dan aplikasi bekerja sesuai apa yang diperintahkan oleh pengguna. Hal ini dapat dilakukan salah satunya dengan memberikan fitur cancel pada operasi yang sedang berjalan atau form pengaturan. 8. Mengurangi beban ingatan jangka pendek Secara
alamiah
manusia
memiliki
keterbatasan
dalam
memproses suatu informasi pada ingatan jangka pendeknya. Oleh karena itu, tampilan dan proses pada suatu aplikasi juga harus memperhatikan hal tersebut. Tampilan harus dirancang sesederhana mungkin, namun berisi informasi yang komprehensif. Sistem kognitif manusia akan lebih mudah untuk mengenali dibandingkan dengan mengingat. Oleh karena itu, penggunaan iconography, warna dan visual lainnya akan membantu pengguna aplikasi menemukan fungsi yang dibutuhkan. Jika operasi pada aplikasi terdiri atas beberapa proses, maka informasi penting dari proses sebelumnya harus dapat terlihat pada proses setelahnya. 2.1.3 Unified Modeling Language (UML) Menurut Whitten and Bentley (2007:371), Unified Modeling Language (UML) merupakan sekumpulan peraturan yang digunakan untuk menggambarkan suatu software system dari segi objek-objek. 2.1.3.1 Use Case Diagram Menurut Whitten and Bentley (2007:246), use case modeling mengidentifikasi dan menggambarkan fungsi sistem
13 dengan menggunakan alat yang disebut use case. Use case menggambarkan fungsi sistem dari segi external user dan dalam terminologi yang dimengerti. Use case digambarkan dengan sebuah bulatan lonjong dengan namause case di bagian atas, bawah atau di dalam bulatan tersebut. Sebuah use case mewakili satu tujuan dari sistem dan menggambarkan sebuah urutan aktivitas dan interaksi pengguna yang mencoba untuk mencapai tujuan. Use case merupakan teknik yang tepat untuk memahami dokumen kebutuhan sistem. Use case sendiri tidak dianggap sebagai suatu kebutuhan fungsional, melainkan suatu cerita (skenario) yang terdapat dalam use case meliputi satu atau lebih kebutuhan.
Gambar 2.1 Contoh Use Case Whitten dan Bentley (2007:247) membagi use case menjadi 2 komponen utama yaitu actor dan relationship yang menggambarkan aktivitas dalam use case diagram. 1. Use case dijalankan oleh pengguna luar yang disebut actor. Seorang actor memulai aktivitas sistem, yaitu sebuah use case dengan tujuan untuk menyelesaikan tugas bisnis yang menghasilkan sesuatu yang dapat diukur.
14
Gambar 2.2 Contoh Actor Dalam Use Case 2. Whitten
dan
Bentley
(2007:248-250),
menjelaskan
relationship yang terdapat dalam use case diagram, yaitu: 1. Association merupakan hubungan antara seorang actor dan sebuah use case. Association digambarkan dengan garis dan tanda panah. Garis dan tanda panah dengan ujungnya yang menyentuh use case menandakan use case sebagai penerima dari actor. Tanpa tanda panah menandakan interaksi antara use case dengan actor sebagai penerima. Association dalam use case dapat berlangsung satu arah atau dua arah.
Gambar 2.3 Contoh Hubungan Association pada Use Case 2. Extend merupakan hubungan yang berfungsi untuk menyederhanakan fungsionalitas use case yang rumit sehingga mudah dipahami.
15
Gambar 2.4 Contoh Hubungan Extend pada Use Case 3. Uses (include) berfungsi mengurangi rendudansi fungsi yang ada dalam use case yang menggunakan suatu fungsionalitas yang sama atau mirip. Hubungan use case tersebut disebut juga use cae abstract.
Gambar 2.5 Contoh Hubungan Include pada Use Case 4. Depends on merupakan hubungan yang dibentuk ketika suatu aktivitas dapat dijalankan jika aktivitas sebelumnya sudah dijalankan.
16
Gambar 2.6 Contoh Hubungan Depends on pada Use Case 5. Inheritance digunakan ketika dua actor atau lebih menggunakan suatu use case yang memiliki sifat yang sama, maka dapat disederhanakan menjadi satu actor baru yang disebut abstract actor.
Gambar 2.7 Contoh Hubungan Inheritance pada Use Case 2.1.3.2 Class Diagram Whitten dan Bentley (2007:373) mendefinisikan class diagram sebagai sebuah penggambaran struktur objek statis dari
17 suatu sistem yang menunjukan kelas-kelas objek dan hubungan antara kelas-kelas objek tersebut.
Gambar 2.8 Contoh Class Diagram Whitten dan Bentley (2007:373) menjelaskan notasi-notasi yang terdapat dalam suatu class diagram yaitu: 1. Association dan multiplicity Association
dan
multiplicity
menggambarkan
hubungan antara satu atau lebih objek yang berinteraksi satu dengan yang lainnya.
18 Multiplicity
merupakan
jumlah
maksimum
dan
minimum dari sebuah objek yang berhubungan dengan objek kelas lain. Tabel 2.1 Tabel Penjelasan Multiplicity Multiplicity
Deskripsi
0..1
Nol atau satu
0..*
Nol atau banyak
1..*
Satu atau banyak
?..?
Jangkauan spesifik
2. Generalization/specialization Generalisasi/spesialisasi merupakan teknik pada kelas objek yang membagi kesamaan atribut atau metode yang dikelompokkan menjadi supertype. Atribut dan metode pada kelas objek supertype diwariskan pada kelas objek subtype.
Gambar 2.9 Contoh Generalisasi/Spesialisasi 3. Aggregation Agregasi digunakan untuk menggambarkan suatu hubungan yang satu bagian menggambarkan keseluruhan dari bagian-bagian kecil dan sebaliknya bagian-bagian kecil menggambarkan suatu kesatuan yang utuh. Sebagai contoh
19 suatu komputer yang terdiri dari beberapa komponen seperti rangka komputer, CPU, motherboard, power supply, dsb.
Gambar 2.10 Contoh Hubungan Aggregation 4. Composition Komposisi merupakan hubungan yang lebih kuat dibandingkan agregasi. Hubungan ini digunakan untuk menggambarkan bagian menyeluruh yang terikat dengan komponen penyusunnya satu dengan lain tanpa terpisahkan. Sebagai contoh pada saat memesan suatu urutan pesanan, jika pesanan dibatalkan maka urutan tersebut juga akan dibatalkan.
Gambar 2.11 Contoh Hubungan Composition
20 2.1.3.3 Sequence Diagram Menurut Whitten dan Bentley (2007:394), Sequence diagram merupakan diagram yang menggambarkan objek-objek yang berinteraksi satu dengan lainnya menggunakan pesan yang dijalankan pada use case atau operasi. Tabel 2.2 Penjelasan Elemen-Elemen Sequence Diagram No.
Nama
1.
Actor
Simbol
Deskripsi Berinteraksi dengan sistem dengan tujuan tertentu
2.
Sistem
Kelas yang digunakan dalam class diagram
3.
Lifeness
Menunjukkan urutan aktif dari actor maupun sistem
4.
Activation
Menunjukkan
Bar
periode waktu pada saat objek aktif dalam interaksi
5.
Input
Metode
Message
penyampaian dari setiap objek. Setiap message memanggil method dari kelas yang dituju
6.
Output
Jawaban dari pesan
message
yang dikirim
21 7.
Receiver
Actor lain atau
actor
pengguna luar yang menerima pesan dari sistem
8.
Frame
Menandai daerah khusus di mana terjadi seleksi, perulangan, dll
Gambar 2.12 Contoh Sequence Diagram 2.1.4 Extreme Programming Model Metode rekayasa piranti lunak menurut Pressman (2010:39) yaitu model
klasik
yang
menggunakan
pendekatan
sistematis
untuk
mengembangkan suatu software. Perancangan menggunakan agile method yang menggabungkan berbagai pendekatan dari sistem analisis
22 dan desain untuk aplikasi sesuai dengan sistem yang akan dikembangkan (Pressman, 2010:721). Menurut Shore (2007:9), agile method merupakan suatu metode atau proses kerja yang mendukung agile philoshophy meliputi scrum dan extreme programming (XP) dengan menggabungkan bagian-bagian tertentu, membuang bagian yang lain, dan menghasilkan ide-ide baru. Shore (2007:19-21) membagi metode ini terbagi menjadi lima tahapan, yaitu:
Gambar 2.13 Metode Perancangan Extreme Programming 1. Planning Dalam tahap ini dilakukan komunikasi langsung dengan user untuk menggali ide mengenai aplikasi yang akan dirancang atau dikembangkan. Para pengembang mengukur waktu pengerjaan untuk merancang aplikasi sesuai dengan user requirement serta menentukan waktu untuk bertemu antar pengembang aplikasi. 2. Analysis Dalam tahap ini, perencanaan dari permasalahan yang ada dibuat lebih spesifik sebelum pengembang mengimplementasikan aplikasi. 3. Design and coding Dalam tahap ini dilakukan perancangan interface dengan desain yang sesederhana mungkin sesuai dengan kebutuhan dan perancangan terhadap use case diagram, class diagram dan sequence diagram. Perancangan disesuaikan dengan life cycle dan menentukan algoritma
23 secara mendetail. Pada tahap ini juga dilakukan pertemuan rutin dari anggota
pengembang
untuk
melakukan
coding
kemudian
membagikan hasil coding ke sesama anggota. Coding harus dioptimasi dengan baik sehingga nantinya tidak ada lagi revisi yang diperlukan. 4. Testing Pada tahap ini dilakukan testing yang terbagi menjadi dua yaitu, unit test dan functional test. Unit test berfungsi untuk mengecek kelengkapan code dalam aplikasi yang dibuat dan memastikan bahwa aplikasi berjalan dengan lancar, terlepas dari sesuai atau tidaknya dengan kebutuhan. Sedangkan functional test berfungsi untuk mengecek kesesuaian aplikasi dengan kebutuhan meliputi pengecekan bug dalam aplikasi sehingga dapat dilakukan perbaikan dari aplikasi yang ada. Functional test dilakukan secara berulang untuk memastikan bahwa aplikasi sesuai dengan kebutuhan dari user. 5. Deployment Tahap akhir dari metode perancangan ini yaitu melakukan testing terhadap user dengan mempersiapkan demo dan melakukan evaluasi untuk mengukur tingkat kepuasan user dengan menyebarkan kuesioner sebagai feedback. 2.1.5 Javascript & V8 Javascript 2.1.5.1 Javascript Javascript merupakan hasil modifikasi dari bahasa pemrograman C++, Javascript memiliki pola bahasa dan penulisan yang lebih sederhana dari bahasa C++. Javascript terdiri dari dua suku kata yaitu Java yang berarti bahasa pemrograman berorientasi objek, dan script yang berarti serangkaian instruksi program. Menurut Aloysius Sigit W. (2011:1) Javascript merupakan bahasa scripting yang bekerja pada sisi client. Karena memiliki sifat client-side maka Javascript dapat diolah langsung di browser tanpa harus terhubung ke server terlebih dahulu. 2.1.5.2 V8 Javascript V8 Javascript adalah sebuah open source Javascript Engine yang dikembangkan oleh Google dan ditulis dalam bahasa
24 C++ untuk browser Google Chrome. V8 mengimplementasikan ECMAScript seperti yang ditentukan dalam ECMA-262, edisi ke lima V8 dapat berjalan pada Windows (XP atau yang terbaru), Mac OS X (10.5 atau yang terbaru), dan Linux yang menggunakan prosesor ARM. V8 dapat dijalankan sendiri atau digabungkan dengan aplikasi C++ lainnya. 2.1.6 CSS (Cascading Style Sheet) CSS merupakan salah satu bahasa pemrograman web yang dapat mengendalikan beberapa komponen pada web dan bertujuan untuk membuat web lebih terstruktur. Pada awal tahun 1996, CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium (W3C). Dengan CSS warna border, hyperlink, mouseover, ukuran gambar, margin kiri ataupun bawah serta beberapa parameter lainnya dapat dikendalikan. CSS memiliki dua sifat yaitu internal dan external. Pada skrip internal langsung dimasukkan kedalam halaman website yang akan didesain. Sementara pada external script CSS dipisahkan pada berkas khusus. 2.1.7 Instant Messaging Pesan instan (Instant messaging) adalah sebuah teknologi internet yang mengijinkan para pengguna dalam jaringan internet untuk mengirimkan pesan-pesan secara singkat langsung pada saat yang bersamaan (real-time) menggunakan teks kepada pengguna lainnya yang sedang terhubung ke jaringan yang sama (repository.usu.ac.id). 2.1.8 HTML5 Hypertext Markup Language (HTML) merupakan suatu metode untuk pengimplementasian konsep hypertext pada suatu dokumen. HTML merupakan protocol yang digunakan untuk mengirim data atau kumpulan data dari webserver ke dalam browser. HTML5 merupakan versi terbaru dari HTML versi sebelumnya yaitu HTML 4.0.1. Berbagai fitur perbaikan dan pengembangan terus dilakukan seperti fitur audio, video, css3 dan database lokal. Berikut adalah beberapa fungsi HTML yaitu: 1. Mengelola kumpulan data dan informasi sehingga dapat diakses dan ditampilkan di browser melalui internet.
25 2. Membuat halaman web dan menampilkan berbagai dokumen atau informasi pada browser. 3. Membuat dan mengatur komponen-komponen dokumen seperti jenis huruf ataupun gambar. 4. Mengatur jenis warna dan letak tulisan. 5. Saling menghubungkan antara suara dan rekaman gambar. 6. Menampilkan tulisan atau sekelompok kata dalam bentuk miring ataupun dalam bentuk cetakan tebal. 7.
Menampilkan
informasi
dalam
bentuk
tabel
sehingga
memudahkan pengguna dalam membaca informasi yang ditampilkan. 8. Terdapat fitur canvas untuk memasukan objek 2D atau 3D (grafik, diagram dan gambar) ke dalam halaman web dengan menggunakan Javascript untuk membuat objek terlebih dahulu di dalamnya. 2.1.9 Komunikasi Komunikasi merupakan proses penyampaian informasi dari satu pihak kepada pihak lainnya. Komunikasi atau communication berasal dari bahasa
Latin yaitu communis yang berarti sama. Communico,
communicatio atau communicare yang berarti membuat sama (make to common). Komunikasi dilakukan untuk berbagi pengetahuan dan pengalaman menurut Riant Nugroho (2004:72) komunikasi bertujuan untuk menciptakan pemahaman bersama atau mengubah persepsi bahkan perilaku. Menurut Tubbs dan Moss (dikutip dalam Mulyana, 2005), komunikasi adalah proses penciptaan makna antara dua orang atau lebih. Pace dan Faules (2005) menyatakan bahwa terdapat dua bentuk umum tindakan yang dilakukan orang yang terlibat dalam komunikasi, yaitu penciptaan pesan dan penafsiran pesan. Komunikasi mempunyai aneka macam bentuk yang bergantung dari segi memandangnya, seperti: 1. Dari segi penyampaian pesannya, komunikasi dapat dilakukan secara lisan dan secara tertulis, atau secara elektronik melalui radio, televisi, telepon, internet dan sebagainya.
26 2. Dari segi kemasan pesan, komunikasi dapat dilakukan secara verbal (dengan berbicara) atau dengan nonverbal (diwakili bahasa isyarat). Komunikasi verbal diwakili dengan penyebutan kata-kata, yang pengungkapannya dapat dengan lisan atau tertulis. Sedangkan komunikasi nonverbal terlihat dalam ekspresi atau mimik wajah, gerakan tangan, mata dan bagian tubuh lainnya. 3. Dari segi keresmian pelaku komunikasi, saluran komunikasi yang digunakan,
dan
bentuk
kemasan
pesan,
komunikasi
dapat
dikategorikan sebagai bentuk komunikasi formal dan informal. 4. Dari segi pasangan komunikasi, komunikasi dapat dilihat sebagai: a. Komunikasi intrapersonal (intrapersonal communication), ialah proses komunikasi dalam diri komunikator. Pengirim dan penerima pesannya adalah dirinya sendiri (manusia sebagai makhluk rohani). b. Komunikasi interpersonal (interpersonal communication) ialah interaksi tatap muka antara dua orang atau lebih di mana pengirim dapat menyampaikan pesan secara langsung, dan penerima pesan dapat menerima dan menanggapinya secara langsung pula (manusia sebagai makhluk sosial). 2.1.10 Web Application (WebApp) Aplikasi web merupakan sebuah aplikasi yang mengunakan teknologi browser untuk menjalankan aplikasi dan diakses melalui jaringan komputer (Remick, 2011). Aplikasi web awalnya dibangun dengan menggunakan bahasa HTML (Hypertext Markup Language). Seiring dengan perkembangan zaman maka muncul skrip dan objek untuk mengembangkan aplikasi web seperti PHP dan ASP pada skrip dan applet pada objek. Aplikasi web dapat dibagi menjadi dua yaitu aplikasi web statis dan aplikasi web dinamis. Aplikasi web statis menggunakan skrip HTML. Kekurangan untuk menggunakan aplikasi ini terdapat pada keharusan seorang pembuat aplikasi untuk terus meng-update setiap perubahan yang terjadi. Kelemahan ini diatasi dengan adanya model aplikasi dinamis. Pada
27 aplikasi web dinamis, perubahan informasi pada aplikasi tidak diubah melalui perubahan program akan tetapi melalui perubahan data. Ada 2 bagian pokok dalam aplikasi web, yang pertama adalah sisi client dan yang kedua adalah sisi server. Sisi client dalam hal ini adalah PC atau bisa juga Perangkat mobile yang terhubung ke jaringan internet, client dapat mengakses aplikasi web melalui web browser seperti Internet Explorer, Mozilla Firefox, Google Chrome, Opera dan lain-lain, sedangkan server adalah perangkat komputer dengan spesifikasi yang baik digunakan untuk menyimpan aplikasi web beserta database server yang siap untuk diakses oleh client. 2.1.11 Browser Browser adalah perangkat lunak yang berfungsi menampilkan dan melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server. Pengertian browser berasal dari kata “browse” dalam bahasa inggris yang artinya melihat-lihat atau membaca-baca. Browser merupakan aplikasi yang digunakan untuk mengoperasikan internet, terutama sebagai media untuk melakukan browsing, surfing, dan melakukan aktivitas di dunia maya lainnya (Gustaf, 2008). Browser memiliki beberapa fungsi seperti: a. Caching Berfungsi untuk mereduksi penggunaan bandwidth, mengurangi kesibukan webserver dan mencegah terjadinya lag. b. Authentication Pengertian Authentication adalah proses verifikasi untuk memastikan keamanan jaringan di perangkat nirkabel agar kompatibel dan sesuai dengan jaringan nirkabel operator seluler yang aman. c. State high maintenance Penegertian state high maintenance adalah sebuah mekanisme untuk memastikan bahwa web browser tetap stabil. d. Requesting supporting data item Requesting supporting data item berfungsi untuk meminta item yang mendukung data yang diminta oleh user. e. Taking action in responses to other header & status code
28 Jika anda mengunjungi suatu situs, komputer akan meminta data dari server melalui HTTP. Bahkan sebelum halaman yang diminta akan ditampilkan dalam browser, web server akan mengirimkan header HTTP yang memiliki kode status. Kode status inilah yang menyediakan informasi tentang status permintaan rendering complex object Pengertian rendering complex object adalah proses pengumpulan semua yang ada pada dalam halaman web serta efek-efek yang ada didalamnya yang pada akhirnya halaman yang ditampilkan akan menjadi sangat baik. f. Dealing with error condition. Handling atau penanganan error yang terjadi. Beberapa contoh browser yang masih sering digunakan di dunia antara lain Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer. 2.1.12 Notepad ++ Notepad++adalah
sebuah
free
source
code
editor
dan
pengembangan dari notepad sebelumnya yang dapat digunakan dalam berbagai macam bahasa pemrograman.Notepad++ merupakan aplikasi yang berjalan pada platform Microsoft Windows. Notepad++ berdasar pada scintilla sebuah komponen untuk melakukan pengeditan bahasa pemrograman.Notepad++ dibuat dengan menggunakan bahasa C++, WIN32 API, dan STL untuk membuat Notepad++ dapat mengeksekusi perintah secara cepat dan juga menjadi aplikasi dengan ukuran yang kecil, sehingga membuat komputer dapat menjalankannya tanpa memerlukan daya yang besar. 2.1.13 Framework Framework adalah aplikasi setengah jadi yang bisa digunakan kembali dan dikhususkan untuk menghasilkan suatu aplikasi tertentu (Husted T., 2003, p5). Dalam ilmu komputer framework adalah struktur tingkatan mengenai apa yang program bisa atau seharusnya dibuat dan bagaimana sebuah program bisa saling berelasi. Framework dapat berupa set fungsi dalam sebuah sistem dan bagaimana mereka saling berelasi;
29 tingkatan dalam sistem operasi; tingkatan dari subsistem aplikasi; dan bagaimana standar komunikasi antar tingkatan yang berbeda. 2.1.14 TCP/IP Menurut Fall dan Steven (2011:586), Transmission Control Protocol (TCP) menyediakan reliabilitas menggunakan variasi yang spesifik karena menyediakan byte stream interface, TCP harus mengubah pengiriman sejumlah byte aplikasi menjadi paket yang dapat dibawa oleh Internet Protocol (IP) yang disebut juga dengan packetization. Paket tersebut berisikan urutan nomor yang mewakili byte offset dari byte pertama dalam setiap paket dari keseluruhan data. TCP menjaga pengecekan terhadap header, aplikasi data yang terlibat, dan isi dari header IP. Pengecekan ini bertujuan untuk mendeteksi error pada bit.Jika suatu segmen diperoleh dengan checksum yang tidak sesuai, maka TCP membuang paket tersebut tanpa pemberitahuan dari pembuangan paket tersebut. Ketika TCP mengirimkan sekumpulan segmen, pada umumnya TCP akan memasang satu timer pengiriman ulang yang menunggu dari bagian penerima untuk memastikan pengiriman berhasil dilakukan. TCP tidak memasang timer pada setiap segmen. Timer dipasang pada saat mengirimkan sekumpulan data dan memperbarui waktu pada saat Acknowledgement (ACK) diterima. Jika ACK tidak diterima tepat waktu, maka, segmen akan dikirim ulang. Menurut Fall dan Steven (2011:587), TCP menyediakan jaringan full-duplex pada layer aplikasi yang berarti data dapat mengalir dari tiap arah secara independen dari arah yang lain. Oleh karena itu, setiap akhir koneksi harus menjaga urutan nomor dari aliran data pada tiap arah. Ketika koneksi terbentuk, setiap segmen TCP yang berisikan data, berjalan ke arah berlawanan. Dengan menggunakan urutan nomor, TCP penerima membuang duplikasi segmen dan mengurutkan kembali segmen yang tidak sesuai urutan. TCP menggunakan IP untuk mengirimkan segmen-segmen dan IP tidak menjamin pembuangan yang duplikat atau menjamin urutan yang benar.
30
Gambar 2.14
Contoh IP Header
2.1.15 Node Package Manager (NPM) Node Package Manager (NPM) adalah sebuah package manager untuk memudahkan para developer Javascript untuk membagi dan mendaur-ulang code dan juga NPM memudahkan developer untuk mengupdate code yang telah di bagikan sebelumnya. Oleh karena itu NPM sering digunakan developer Node.Js yang juga merupakan pemrograman berbasis Javascript untuk mengatur, mencari, dan melakukan install modul-modul pada Node.Js (npmjs.com). 2.1.16 Express.js Express.js adalah framework dari Node.js yang minimalis dan fleksibel yang menyediakan fitur-fitur untuk mendukung aplikasi web dan mobile.Express.js menyediakan fitur aplikasi web yang mendasar tanpa menutupi fitur yang ada di dalam Node.js. Dalam penginstalan Express.js dapat dilakukan melalui command prompt melalui perintah NPM dengan mengetik “npm install express--save” (expressjs.com). 2.1.17 Jaringan Komputer Jaringan komputer ialah sekumpulan komputer beserta juga dengan perangkat pendukung yang saling bekerjasama dan saling terhubung, agar memungkinkan terjadinya pertukaran data/informasi dari satu komputer dengan komputer lainnya, maka dibutuhkan suatu media jaringan komputer baik berupa perangkat keras maupun perangkat lunak. Komputer ataupun perangkat lainnya yang terhubung dalam sebuah jaringan yang dapat menerima dan mengirim informasi disebut node.
31 Pada peer-to-peer setiap komputer bias menjadi client maupun server karena setiap komputer memiliki jaringan yang setara.Jaringan Peer-to-peer biasa disebut dengan workgroups karena biasa digunakan pada kelompok yang berisi 10 orang atau kurang. Jenis-jenis jaringan komputer: 1. LAN (LocalArea Network) Suatu jaringan yang menghubungkan komputer dan perangakat komputer lainnya untuk saling bertukar informasi dalam suatu lingkungan area.LAN merupakan private network yang biasa digunakan dalam lingkup perusahaan yang kecil. 2. WLAN (WirelessLocal Area Network) WLAN
adalah
jaringan
yang
lebih
besar
daripada
LAN,
menggunakan wifi sebagai penghubung dari satu komputer dengan komputer yang lainnya.WLAN menggunakan wireless switch atau router untuk menerima dan mengirim informasi. 3. WAN (WideArea Network) WAN adalah jaringan yang dapat,mencakup daerah yang sangat besar dengan menggunakan optical fiber, satellite, etc, sebagai penghubung antar komputer satu dengan yang lainnya. 4. PAN (PersonalArea Network) Jaringan yang menghubungkan sistem komputer dengan device yang jaraknya tidak terlalu jauh karena menggunakan bluetooth sebagai media pengiriman dan penerimaan informasi. 2.1.18 Jade Jade adalah sebuah template engine dengan performa tinggi yang bercampur dengan “Haml” sebuah markup language yang digunakan untuk mengartikan “HTML” dari sebuah aplikasi web tanpa harus menggunakan
inline
code.Jade
diimplementasikan
menggunakan
Javascript untuk aplikasi node dan browser. Dengan menggunakan Jade, seorang web developer tidak perlu menambahkan kurung siku dalam proses pembuatan halaman web HTML. Untuk melakukan instalasi Jade dapat menggunakan perintah NPM dalam command prompt seperti “npm install jade”.Contoh desain sederhana dengan menggunkan template Jade.
32
Gambar 2.15 Jade Code Example
33 Dalam HTML code diatas akan menjadi:
Gambar 2.16 HTML Code Example 2.1.19 I/O Model I/O
Model
merupakan
metode
yang
digunakan
untuk
mengendalikan alur dari kodingan program yang berhubungan dengan input dan output dalam jaringan. Ada dua fase untuk sebuah operasi input, yaitu: 1. Menunggu data 2. Mengopi data dari kernel ke user I/O model terbagi ke dalam 5 macam, yaitu: 1. Blocking I/O yaitu metode yang mem-blocking sepanjang proses berlangsung.
34 2. Non blocking I/O yaitu metode yang mem-blocking jika tidak terdapat data, dan menjalankan proses pengiriman data jika terdapat data. Proses pengecekan dilakukan secara terus-menerus. 3. I/O multiplexing yaitu metode yang melakukan proses blocking antara menunggu dan mengirimkan data secara terpisah. Proses pengecekan tidak dilakukan secara terus-menerus. 4. Signal driven yaitu metode yang berada pada kondisi non blocking pada saat menunggu dan blocking pada saat mengopi data. Sebuah sinyal diberikan ketika proses input ouput dapat dilakukan. 5. Asynchronous I/O yaitu metode yang melakukan kondisi non blocking secara terus-menerus dan memberikan sinyal ketika proses input dan output selesai dilakukan. 2.1.20 HTTP HTTP merupakan protokol yang digunakan untuk menampilkan suatu situs yang berisi informasi-informasi dari server web melalui jaringan internet. HTTP ditemukan oleh Tim Berners-lee, pada tahun 1989 Berners mulai mengembangkan world wide web yang merupakan sebuah global hypertext project. Www merupakan sebuah browser yang dapat digunakan untuk mencari dan mengakses informasi pada browser seperti mozila, internet explorer, dsb.Www atau yang biasa disebut dengan website berisi kumpulan dari halaman-halaman situs web, pada halaman situs tersebut terdapat dokumen yang biasanya ditulis dengan menggunakan format HTML (Hypertext Markup Language). Format HTML tersebutlah yang diakses oleh HTTP. 2.1.21 Real-Time Definisi real-time adalah suatu tingkatan untuk mendapatkan jawaban dari komputer yang mana pengguna merasakan cukup cepat atau yang memungkinkan komputer dapat menyelesaikan proses-proses eksternal (sebagai contoh: untuk menunjukan visualisasi dari kondisi cuaca sebagaimana perubahannya). Wikipedia memperkenalkan real-time web adalah sebuah set teknologi yang memungkinkan user untuk menerima informasi secepat mungkin setelah informasi diberikan,tanpa mengharuskan user atau aplikasi untuk mencari update terbaru dalam periode waktu tertentu (Rohit Rai, 2013:7).
35 2.1.22 JSON Menurut Sai Srinivas Sriparasa (2013:15), Javascript Object Notation (JSON) merupakan format pertukaran data berbasis teks, ringan, dan dapat pertukaran datanya antara client dan server dapat dimengerti oleh manusia. JSON bersifat independen, dan mendukung format data yang tersedia dalam berbagai bentuk bahasa pemrograman seperti C#, PHP, Java, C++, Phyton, dan Ruby. 2.1.23 Package.JSON Package.JSON merupakan file yang terdapat pada Node Package Manager (NPM) yang menyimpan berbagai macam metadata yang relevan dengan projek yang ada. Package.JSON pada umumnya terletak di root directory dari sebuah projek Node.js. File ini digunakan untuk memberikan informasi kepada npm untuk mengidentifikasikan projek. Di dalamnya juga terdapat informasi mengenai metadata lain seperti deskripsi dari projek, versi dari projek dalam persebaran tertentu, informasi lisensi, bahkan konfigurasi data yang sangat diperlukan oleh NPM dan pengguna dari package. 2.1.24 Raphael.js Raphael.js merupakan library pada Javascript yang digunakan untuk dapat memudahkan dalam kreasi web seperti vector graphics shapes, etc. Raphael.js bekerja dari sisi client (berjalan pada user machine) dan juga dapat bekerja hampir disemua browser, tidak membutuhkan external plug-in seperti java atau flash. 2.1.25 Gravatar Pertama kali ditemukan oleh Preston-Werner pada tahun 2004, Gravatar atau Global Recognize Avatar merupakan sebuah avatar yang berupa gambar yang menggambarkan diri user secara online. Avatar tersebut biasanya berupa gambar kecil yang berada di sebelah nama user pada saat user online. 2.1.26 MongoDB MongoDB
merupakan
database
yang
berbasis
dokumen.
MongoDB sangat ampuh, fleksibel, dan terukur dengan menggabungkan fitur-fitur dalam relational database seperti secondary indexes, range queries, dan sorting (K. Chodorow, 2013:1).
36 Menurut mengukur.
Chodorow
Data
model
(2013:2), MongoDB
MongoDB yang
didesain
berbasis
untuk
dokumen
memungkinkan untuk membagi data secara otomatis melalui berbagai server. Selain itu, MongoDB dapat menyeimbangkan data dan mengangkut data melalui suatu cluster, dan menyebarkan data secara otomatis.Hal ini memungkinkan developer untuk berfokus pada pemrograman aplikasi. Chodorow (2013:2-3) membagi kelebihan dari MongoDB ke dalam lima fitur utama: 1. Indexing MongoDB mendukung secondary indexes, yang menyediakan beragam query yang cepat dan menyediakan kemampuan indexing yang full-text, geospatial, unik dan terpadu. 2. Stored Javascript Para pengembang dapat menyimpan dan menggunakan fungsi-fungsi beserta nilai-nilai dalam Javascript pada sisi server. 3. Aggregation MongoDB mendukung aggregation tools untuk membangun agregasi yang kompleks dari potongan-potongan yang sederhana dan memungkinkan database untuk mengoptimalkan. 4. Fixed-size collections Fixed-size collection berguna untuk menyimpan data terbaru, seperti logs. 5. File Storage MongoDB mendukung protocol yang mudah digunakan untuk menyimpan data dalam jumlah besar dan file metadata. 2.1.27 Bootstrap Bootsrap adalah sebuah framework CSS, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout ahalaman dengan mudah dan rapi, serta memodifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen yang lainnya.
37 2.1.28 Scribble/Doodle Scribble/doddle
adalah
sebuah
kata
kerja
yang
berarti
menggambar sesuatu secara spontan dan tanpa terencana. Sedangkan dalam kata kerja scribble/doodle mempunyai arti sebuah sketsa atau gambar kasar (Merriam-Webster.com). Tujuan dari doodle atau sketsa adalah untuk menyajikan suatu bahasa baru yang sangat mirip dengan tulisan dan mencatat hal nyata dengan simbol-simbol garis dan tekstur yang disingkat(T. C. Wang, 2006, p71). Oleh karena itu scribble/doodle adalah sebuah teknik penyampaian informasi yang dapat dijadikan jalur alternatif selain menggunakan pesan dalam bentuk teks. 2.1.29 Node_Modules Pertama kali dikembangkan oleh Ryan Dahl, Node_modules terdapat dalam Javascript. Di dalam Javascript terdapat kode objek-objek yang berada di dalam file, file tersebut yang disebut dengan sebuah module pada program node. Node_modules dapat di-install dari NPM melalui jaringan internet dengan format name_module beserta dengan Node.js-nya. 2.2 Teori Khusus 2.2.1 WebSocket Menurut Fette dan Melnikov (2011:4), WebSocket merupakan suatu protocol yang memungkinkan komunikasi dua arah antara suatu client dengan suatu host dengan suatu kodingan yang ditanamkan pada kedua-duanya. Model security yang digunakan merupakan model security yang biasa digunakan pada web browser. Protocol ini mencakup proses handshake pada layer TCP. WebSocket digunakan untuk menyediakan mekanisme pada aplikasi berbasis web yang membutuhkan komunikasi dua arah dengan server yang tidak bergantung pada beberapa koneksi di Hypertext Transfer Protocol (HTTP). Protocol WebSocket didesain untuk menggantikan teknologi komunikasi dua arah yang menggunakan HTTP sebagai layer transport untuk mendapat manfaat dari infrastruktur yang sudah ada seperti proxy, filtering, dan authentication. Teknologi ini diimplementasikan sebagai gabungan dari efficiency dan reliability karena HTTP pada mulanya tidak
38 ditunjukkan untuk komunikasi dua arah.Protocol WebSocket merupakan pengembangan dari HTTP dengan menggunakan infrastruktur yang ada pada HTTP seperti bekerja pada port 80 dan 443 yang juga mendukung HTTP proxy dan intermediaries. 2.2.1.1 Opening Handshake Opening handshake bertujuan untuk menyesuaikan dengan server-side software berbasis HTTP dan intermediaries, sehingga suatu port dapat digunakan baik oleh HTTP clientsberkomunikasi dengan server dan WebSocket clientsberkomunikasi dengan server tersebut. 2.2.1.2 Closing Handshake Salah satu dari client dapat mengirimkan suatu control frame dengan data yang berisi suatu control sequence untuk memulai closing handshake. Dalam penerimaan frame tersebut, pengguna lainnya mengirimkan suatu close frame sebagai respon. Client pertama menutup koneksi sehingga tidak ada data yang dapat diterima. Setelah mengirimkan suatu control frame menandakan koneksi harus ditutup dan client tidak mengirimkan data lagi. Setelah menerima suatu control frame menandakan koneksi harus ditutup dan client membuang data yang diterima. 2.2.1.3 Design Philosophy Secara konsep, WebSocket merupakan layer di atas TCP yang mengerjakan beberapa tugas sebagai berikut: a. Menambahkan sebuah web security model untuk browser b. Menambah suatu mekanisme addressing dan protocol penamaan yang mendukung multiple service pada satu port dan banyak host name pada satu IP address. c. Membuat layer suatu mekanisme framing di atas TCP untuk kembali pada mekanisme paket IP dimana TCP dibangun dan tanpa batasan panjang d. Menyisipkan tambahan closing handshake yang didesiain untuk bekerja pada proxy atau perantara-perantara lainnya.
39 2.2.1.4 Security Model Protocol WebSocket menggunakan model dasar yang digunakan web browser untuk membatasi halaman web yang dapat mengakses sebuah WebSocket server ketika protocol WebSocket digunakan dari sebuah halaman web. Pada dasarnya, ketika protocol WebSocket digunakan oleh client yang tidak menggunakan web browser untuk mengakses halaman web, maka model dasar tidak akan berfungsi karena client tersebut dapat menggunakannya secara sewenang-wenang. Perancangan security pada protocol ini bertujuan untuk menggagalkan koneksi dengan server dari protocol-protocol yang sudah ada seperti Simple Mail Transfer Protocol (SMTP), dan HTTP. Pada saat yang sama juga memungkinkan HTTP server untuk mendukung protocol ini jika diperlukan melalui pembatasan handshake yang rumit dan membatasi jumlah data yang akan dikirim melalui koneksi sebelum handshake selesai dilakukan. 2.2.1.5 Hubungan Dengan TCP dan HTTP Protocol WebSocket merupakan suatu protocol berbasis TCP yang independen. Hubungannya dengan HTTP terletak pada handshake yang diterjemahkan oleh HTTP server sebagai suatu Upgrade request. Berdasarkan default, protocol WebSocket menggunakan port 80 untuk koneksi regular WebSocket dan port 443 untuk koneksi WebSocket yang dibuat jalur melalui Transport Layer Security (TLS). 2.2.1.6 Membangun Suatu Koneksi Suatu koneksi yang dibuat pada suatu port yang dibagikan oleh sebuah HTTP server, maka koneksi akan muncul sebagai sebuah regular Get request dengan sebuah Upgrade offer. Dengan sebuah IP address dan sebuah server untuk semua traffic pada sebuah hostname memungkinkan untuk membuat koneksi berbasis sistem pada protocol WebSocket untuk diterapkan.
40 2.2.2 Node.js Menurut
Thompson
(2011:1),
Node.js
dikenal
dengan
asynchronous framework pada Javascript yang dibangun sama seperti V8 Engine yang digunakan web browser Chromium dan Google Chrome untuk menerjemahkan Javascript. Dengan fungsi tambahan pada bidang networking dan file system API support, dapat dibuktikan bahwa Node.js dapat bekerja dengan IO secara asynchronous. Node.js memiliki 3 keunggulan utama yaitu konsumsi memori yang kecil karena menggunakan event driven berbasis infinite loop dalam satu thread, operasi non-blocking dimana Node.js akan melakukan pekerjaan lain sampai data tersedia atau selesai diproses, dan penggunaan CPU yang lebih kecil karena menggunakan single thread dengan memanfaatkan event loop dan callback. Terdapat banyak library dalam berbagai bahasa pemrograman yang
dapat
dikerjakan
pada
IO
secara
asynchronous.
Node.js
menggunakan callbacks bagi para developer untuk menandakan progress dari operasi asynchronous. Callbacks merupakan Twisted library dari bahasa pemrograman Phyton atau framework sejenisnya. Callbacks juga sangat mudah dan berguna untuk me-manageflow dari suatu aplikasi tetapi memungkinkan untuk menghasilkan kesalahan dikarenakan dalam
menggunakan
pengembangan
asynchronous
tidak
selalu
menggunakan langkah-langkah yang sama. Thompson (2011:3) mengungkapkan bahwa Node.js dengan kelebihannya yang merupakan asynchronous IO, umum, syntax yang sederhana, dan memiliki banyak modul dalam pengembangan secara aktif merupakan pilihan yang tepat untuk web development. Maka dapat diambil kesimpulan bahwa Node.js adalah sebuah platform software yang dipakai untuk membangun aplikasi-aplikasi pada sisi server yang fleksibel di sebuah jaringan. Node.js menggunakan Javascript sebagai bahasa pemrogaman dan dapat dengan mudah menghasilkan pemrosesan tingkat tinggi melalui non-blocking I/O. Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx.
41
Gambar 2.17 Node.js Code Example Contoh skrip di atas setelah dieksekusi akan menghasilkan sebuah halaman web sederhana bertuliskan “Selamat Datang” sekaligus menjalankan perintah sebagai HTTP Server (webserver seperti Apache) untuk menyampaikan output tersebut melalui internet melalui port 8080. Node.js memiliki 2 konten yaitu runtime environment dan script library. Runtime environment adalah sebuah software yang berfungsi untuk mengeksekusi, menjalankan dan mengimplementasikan fungsifungsi dan cara kerja inti dari suatu bahasa pemrograman. Contoh: Agar sebuah server bisa mengeksekusi script PHP maka harus terlebih dulu diinstall PHP runtime environment-nya, seperti LAMP (Linux, Apache, MySQL, PHP). Sedangkan Script Library adalah kumpulan, kompilasi atau bank data berisi script/kode-kode pemrogaman. Node.js berisikan bermacam-macam web framework seperti MVC framework, Full-satck framework, REST API, dan generators.Beberapa framework yang sering digunakan dalam Node.js adalah Sails.js, Total.js, Partial.js, Koa.js, Locomotive.js, Express.js, Flatiron.js, Express.io, SocketStream, Geddy.js. 2.2.3 Socket.IO Rai (2013:87), menjelaskan bahwa Socket.IO menyediakan Aplication Programming Interface (API) yang mudah digunakan yang juga memiliki banyak fungsionalitas. Fungsionalitas yang dimiliki Socket.IO dapat bekerja secara seragam pada banyak browser dan menyediakan beragam jenis mekanisme transport. Penggunaan WebSocket tidak didukung pada banyak browser seperti Internet Explorer 10. Selain itu juga banyak browser versi lama yang tidak mendukung penggunaan WebSocket.Sebaliknya, dengan
42 menggunakan
Socket.IO,
orang-orang
yang
dapat
menggunakan
WebSocket tetap menggunakannya. Sementara dengan yang tidak dapat, akan disediakan mekanisme transport terbaik yang dapat digunakan yang dapat bekerja pada browser, dan mampu melalui firewall dan proxy. Menurut
Rai
(2013:90-91),
socket
pada
Socket.IO
menggabungkan socket pada jaringan menggunakan berbagai mekanisme transport. Sama seperti socket lainnya, terdapat banyak tingkatan dalam siklus hidup Socket.IO, bergantung dari kondisi pada jaringan seperti: a. Connecting Connecting merupakan kondisi di mana client mengirimkan connection request kepada server untuk menjalankan proses handshake. b. Connected Connected merupakan kondisi di mana proses handshake selesai dilakukan dan koneksi dibuka menggunakan transport yang diberikan saat proses handshake. c. Disconnecting Disconnecting merupakan kondisi di mana server mengirimkan heartbeat message untuk mengetahui koneksi yang masih terhubung. Jika koneksi tidak terhubung, maka socket akan ditutup. d. Disconnected Disconnected merupakan kondisi di mana koneksi antara client dan server terputus dan jaringan tersebut ditutup. 2.2.3.1 Socket.IO Connection Koneksi handshake.
pada
Handshake
Socket.IO
diawali
dengan
sebuah
menjadi
bagian
penting
sebuah
protocol.Seluruh aktivitas dan pesan dikirim melalui socket. Socket.IO dikhususkan untuk bekerja pada aplikasi web, oleh karena itu aplikasi yang berjalan menggunakan HTTP sehingga handshake pada Socket.IO dilakukan pada HTTP. 2.2.3.2 Socket.IO Message Ketika koneksi berhasil dilakukan, seluruh komunikasi antara client dan server dilakukan menggunakan pesan-pesan melalui socket dengan format koding tertentu.
43 Rai (2013:93-96) membagi jenis-jenis pesan ke dalam 9 bentuk sebagai berikut: 1. Disconnect (0) Nilai nol menunjukan suatu pesan merupakan sebuah sinyal disconnect yang akan memberitahu Socket.IO untuk menutup koneksi dalam socket. 2. Connect Pesan ini digunakan untuk multiplexing dan dikirimkan dari client ke server untuk membuka koneksi baru. 3. Heartbeat Pesan ini dikirim dari client ke server dalam timeout yang diberikan selama handshake dan server juga akan merespon dengan pesan heartbeat. 4. Message Pesan ini dikirim melalui socket. Pesan ini membawa data dan dikirimkan menggunakan fungsi socket.send. 5. JSON Message Pesan ini mirip untuk mengirimkan pesan, tetapi harus disejajarkan dengan menggunakan Javascript Object Notation (JSON). 6. Event Pesan event merupakan jenis khusus dari JSON yang digunakan untuk mengirim event melalui socket. 7. ACK Pesan Acknowledgement (ACK) dikirimkan pada saat pesan diterima. Pesan ini dapat dikirimkan pada saat ACK request diaktifkan atau akan dikirimkan oleh aplikasi. 8. Error Pesan ini dikirimkan oleh server ketika terdapat error seperti kegagalan melakukan proses permintaan connect ke suatu endpoint. 9. NOOP Pesan ini menandakan tidak adanya operasi dan digunakan untuk menutup sebuah poll ketika waktu polling habis.
44 2.3 Hasil Penelitian Melalui penelitian terhadap produk-produk sebelumnya, diperoleh beberapa aplikasi sejenis We Communicate yang sudah ada: 1. Twiddla a. Kelebihan: 1. Group interaction: memungkinkan komunikasi dalam grup atau jumlah user lebih dari satu orang. 2. Group chat: menyediakan fitur untuk berkomunikasi melalui pesan teks dengan seluruh user yang berada dalam satu ruangan. 3. Scrtibbling tools: menyediakan peralatan untuk memberikan input-an pada kanvas. Scribbling tools pada Twiddla terdiri dari beberapa macam: a. Pencil tool: untuk mencoret-coret kanvas. b. Browse tool: untuk melakukan browsing pada halaman URL. c. Select tool: untuk memilih gambar atau coret-coretan. d. Erase tool: untuk menghapus gambar atau coret-coretan. e. Shape tool: untuk membuat berbagai bentuk rupa seperti garis, persegi, lingkaran, persegi dengan ujung melengkung. f. Text tool: untuk memberi input berupa pesan teks. g. Pallete tool: untuk memilih warna yang digunakan saat mencoretcoret. h. Copy tool: untuk menggandakan suatu bagian dari coret-coretan. i. Cut tool: untuk mengambil suatu bagian dari coret-coretan dan menyimpannya secara sementara. j. Paste tool: untuk menyisipkan bagian dari coret-coretan yang sudah tersimpan sementara melalui copy atau cut tool. k. Pen size tool: untuk mengatur tingkat ketebalan dan ukuran dari suatu garis atau titik. 4. Variative background: menyediakan beberapa jenis halaman belakang dari kanvas. Background terdiri dari beberapa macam: a. Whiteboard: berupa papan tulis dengan warna background putih yang dapat diisi dengan menggunakan scribbling tools yang tersedia.
45 b. Web page: berupa halaman belakang yang dapat digunakan untuk melakukan browsing ke halaman web yang mau dituju. c. Etherpad: berupa halaman belakang yang dapat diubah oleh beberapa orang secara bersamaan termasuk dapat melakukan input berupa teksdi dalamnya. d. Document: berupa halaman belakang yang mendukung beberapa dokumen dalam format tertentu seperti .doc, .xls, .ppt, dan .pdf. e. Image: berupa halaman belakang yang memungkinkan untuk memasukan gambar dan membagikan kepada user lain. 5. Menyediakan fitur untuk menyisipkan simbol-simbol dan formula matematika. 6. Menyediakan fitur untuk menyisipkan kodingan dan widget ke dalam halaman whiteboard. 7. Voice chat: memungkinkan untuk berkomunikasi melalui pertukaran rekaman suara. 8. Undo: menyediakan fitur untuk kembali ke langkah sebelumnya. 9. Menyediakan
fitur
untuk
menghapus
coret-coretan
secara
keseluruhan. b. Kekurangan 1. Gambar atau dokumen yang dibagikan tidak dapat disimpan secara permanen. 2. Pencil tool dan eraser tool pada fitur scribbling dalam aplikasi Twiddla tidak real-time. 3. Jumlah user yang dibatasi di tiap ruangan sebanyak 10 user. 4. Tampilan kurang menarik dan terlihat rumit dalam pemakaian. 2. Flockdraw a. Kelebihan: 1. Tampilan sederhana 2. Group interaction: memungkinkan lebih dari satu user untuk berinteraksi satu sama lain. 3. Group chat: menyediakan fitur untuk berkomunikasi melalui pesan teks dengan seluruh user yang berada dalam satu ruangan. 4. Scribbling tools: menyediakan peralatan untuk memberi input-an pada kanvas. Scribbling tools pada Flockdraw terdiri dari beberapa macam:
46 a. Pencil tool: untuk mencoret-coret kanvas. b. Erase tool: untuk menghapus coret-coretan pada kanvas. c. Paint tool: untuk mewarnai seluruh bagian kanvas dengan warna tertentu. d. Pallete tool: untuk memilih warna yang digunakan saat mencoretcoret. e. Line tool: untuk membuat garis pada kanvas. f. Text tool: untuk memberi input-an berupa teks pada kanvas. g. Shape tool: untuk membuat berbagai bentuk rupa seperti garis, persegi, lingkaran, persegi dengan ujung melengkung. h. Save tool: untuk menyimpan hasil coret-coretan dan membagikan pada media sosial Facebook atau Twitter. i. Pen size tool: untuk mengatur tingkat ketebalan dan ukuran dari suatu garis atau titik. 5. Jumlah penonton yang tidak dibatasi dalam suatu ruangan. b. Kekurangan: 1. Jumlah user untuk mencoret-coret dibatasi sebanyak 10 orang. 2. Tidak dapat menyisipkan gambar ke dalam kanvas. 3. Tidak terdapat fitur untuk mengulang langkah sebelumnya. 3. Scribblar a. Kelebihan: 1. Group interaction: memungkinkan lebih dari satu user untuk berinteraksi satu sama lain. 2. Group chat: menyediakan fitur untuk berkomunikasi melalui pesan teks dengan seluruh user yang berada dalam satu ruangan. 3. Scribbling tools: menyediakan peralatan untuk memberi input-an pada kanvas. Scribbling tools pada Scribblar terdiri dari beberapa macam: a. Pencil tool: untuk mencoret-coret kanvas. b. Pallete tool: untuk memilih warna yang digunakan saat mencoretcoret. c. Line tool: untuk membuat garis pada kanvas. d. Text tool: untuk memberi input-an berupa teks pada kanvas. e. Screenshot tool: untuk mengambil hasil coret-coretan dan menampilkannya pada tab baru.
47 f. Shared pointer tool: untuk menunjukkan posisi pointer dari pengguna lain yang berada dalam room yang sama. g. Pen size tool: untuk mengatur tingkat ketebalan dan ukuran dari suatu garis atau titik. h. Highlighter tool: untuk memberi input-an berupa tanda dengan beberapa pilihan warna sebagai penekanan. i. Stamp tool: untuk memberi input berupa logo seperti cap atau stampel. j. Flip tool: membalikkan gambar secara vertikal atau horizontal. k. Copy tool: untuk menggandakan suatu bagian dari coret-coretan. l. Cut tool: untuk mengambil suatu bagian dari coret-coretan dan menyimpannya secara sementara. m. Paste tool: untuk menyisipkan bagian dari coret-coretan yang sudah tersimpan sementara melalui copy atau cut tool. 4. Menyediakan
fitur
untuk
menghapus
coret-coretan
secara
keseluruhan. 5. Menyediakan fitur untuk mengganti bahasa dari setiap fungsi yang ada. 6. Menyediakan fitur untuk menyisipkan simbol-simbol dan formula matematika. 7. Voice chat: memungkinkan untuk berkomunikasi melalui pertukaran rekaman suara. 8. Lock shape: memungkinkan coret-coretan yang dibuat untuk dikunci sehingga tidak dapat dihapus. 9. Undo: menyediakan fitur untuk kembali ke langkah sebelumnya. 10. Menyediakan variasi background dengan format kotak-kotak. b. Kekurangan: 1. Tampilan antar muka yang rumit dan sulit dipahami. 2. Pencil tool dan eraser tool pada fitur scribbling dalam aplikasi Scribblar tidak real-time. 3. Jumlah user yang dibatasi di tiap ruangan sebanyak 2 user. Selain itu, berikut merupakan penjelasan dari beberapa jurnal yang mendukung aplikasi We Communicate, sebagai berikut:
48 1. Menurut James J. Gibson dan Patricia M. Yonas (1967), aktivitas scribbling tidaklah sederhana memainkannya tetapi juga memiliki kontribusi terhadap pengembangan visual dalam bentuk perhatian dan persepsi. Scribbling tidak sama dengan menulis dalam hal komunikasi indra, tidak juga digerakkan oleh keinginan untuk memberi informasi atau menetapkan pikiran dan perasaan. Motivasi dari melakukan scribbling yaitu memberi jejak pada kertas, mengendalikan secara visual jejak yang dirasakan, dan merasakan jejak yang ditinggalkan. 2. Menurut K. E. Hatlelid dan W. D. Kavanagh (2004), lingkungan dunia virtual
menyediakan
kluster
chat.
Kluster
chat
merupakan
pengelompokkan avatar dari user yang terlibat dalam percakapan tertutup. Ketika kluster chat dibuat berdasarkan permintaan dari user. Pada saat kluster chat sudah dibuat, area percakapan dalam dunia virtual juga dibuat. Avatar ditampilkan sebagai sekelompok orang yang memiliki percakapan satu dengan yang lain sehingga user baru dapat mengenali user mana yang bercakap satu dengan yang lain, dan memberi tahu user yang dapat dijangkau melalui percakapan. Partisipan dalam kluster chat menyebarkan percakapan mereka dalam satu kluster chat dan tampilan dari user hanya dibatasi pada partisipan dari kluster chat yang sama serta membatasi komunikasi yang dapat dilakukan hanya dalam satu kluster chat yang sama dan memblokir komunikasi yang berasal dari luar kluster chat tersebut. 3. Menurut G. Cuomo dan R. J. Redpath (1999), bahwa dalam sebuah lingkungan chat melalui internet, indikator umpan balik dari chat menunjukan user penerima dari suatu aplikasi chatting yang setidaknya satu pengirim berada dalam proses mempersiapkan sebuah pesan untuk dilihat oleh lingkungan partisipan. Pada saat seorang pengirim mengetik teks, panjang dari teks dikirimkan kepada penerima melalui paket data yang tidak terpercaya. Sehingga, penerima menunjukan mask characters yang sesuai pada angka dari jumlah teks yang dikirim oleh pengirim. Oleh karena itu, pengirim disediakan oleh keamanan bahwa teks yang diketik tidak akan ditampilkan ke penerima hingga selesai diketik. Selain itu, penerima juga dilengkapi dengan tanda bahwa sesuatu akan ditampilkan kepada mereka.
49 4. Menurut B. N. Marquette, M. B. Stevens, dan M. L. Williams (2002), bahwa suatu sistem chat mencakup sebuah chat server dan sejumlah client dalam suatu jaringan memiliki batasan bandwidth. Setiap client dapat dikonfigurasikan sesuai dengan instruksi dari chat server, baik untuk mengoperasikan suatu mode master atau mode slave. Pada mode slave, sebuah chat client tidak dapat memulai sebuah chat session dan dapat berpartisipasi hanya pada chat session yang dimulai oleh client chat lain yang beroperasi pada mode master. Seorang user yang mengundang memulai, atau menambahkan anggota kepada sebuah chat session dengan mengirimkan sebuah undangan kepada user penerima pada sebuah alamat proxy yang terdaftar pada chat server. Jika chat server menentukan bahwa user penerima berada pada kondisi logged on, chat server meneruskan undangan pada user penerima ke alamat jaringannya. Jika user penerima menerima undangan tersebut, user penerimamengirimkan sebuah pesan untuk bergabung kepada client pengirim dan client pengirim menambahkan nama dari user penerima beserta alamat jaringan client ke dalam sebuah daftar anggota. Kemudian, chat session dimulai dengan chat anggota client mengirimkan chat input kepada client master dan client master tersebut mengirimkan update dari chat session kepada anggota client.
50
