BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Spesifikasi Sistem Untuk mengimplementasikan aplikasi instant messaging dan doodleyang telah dirancang, diperlukan spesifikasi perangkat lunak, perangkat keras dan jaringan yang akan dirinci sebagai berikut. 4.1.1 Spesifikasi Perangkat Lunak 1. Perangkat lunak yang dibutuhkan untuk komputer server antara lain: a. Sistem Operasi Linux atau Windows atau Macintosh atau Solaris b. DBMS PhpMyAdmin versi3.4.5 dan MySQL versi 5.5 c. Node.js versi 0.8.15 d. Framework Express.js versi 2.5.8 e. Socket.ioclient module untuk Node.js versi 0.9.13 f. Stylusclient module untuk Node.js versi 0.0.1 g. Jadeclient module untuk Node.js versi 0.0.1 h. Mysqlclient module untuk Node.js versi 2.0.0-alpha5 i. NPM versi 1.0.x 2. Perangkat lunak yang dibutuhkan untuk komputer client antara lain: a. Sistem Operasi Linux atau Windows atau Macintosh atau Solaris 76
77 b. Web Browser Mozilla firefox atau Google Chrome atau Internet Explorer 4.1.2 Spesifikasi Perangkat Keras 1. Perangkat keras yang dibutuhkan untuk komputer server antara lain: a. Processor Intel Core 2 Duo CPU 2.2 GHz b. Memory SDRAM DDR3 1 GB c. Wi-Fi Integrated 802.11b//g/n 2. Perangkat keras yang dibutuhkan untuk komputer user antara lain: a. Processor Intel Core 2 Duo CPU 2.2 GHz b. Memory SDRAM DDR3 1 GB c. Wi-Fi Integrated 802.11b//g/n 3. Spesifikasi jaringan yang dibutuhkan a. Router TL-MR3020 4.2Evaluasi Sistem Untuk membuktikan kelebihan dari teknologi node.js yaitu non-blockingdan push, maka kami akan melakukan pengujian terhadap aplikasi yang telah kami buat. 4.2.1 Pengujian Teknik Non-Blocking 4.2.1.1 Tujuan Tujuan dari pengujian ini adalah untuk membuktikan bahwa dengan teknik non-blockingtransaksi yang dilakukan clientyang memerlukan proses pada server, seperti chatting yang memerlukan proses
78 penyimpanan pada database server,akan terproses dengan cepat. Cepat dalam arti pesan cepat disampaikan kepada user lain yang menjadi tujuan namunpesan tetap tersimpan di dalam database server. Tidak seperti teknik blockingyang harus menunggu proses pencatatan pada databaseserver selesai,lalu setelah itu baru mengirimkan pesan kepada user lain yang menjadi tujuan. 4.2.1.2 Skenario Pengujian Untuk dapat memperlihatkan dengan jelas perbedaan kecepatan dari teknik non-blocking dan blocking, maka pengujian ini tidak dilakukan langsung terhadap aplikasi instant messaging.alasannya karena membutuhkan user yang banyak untuk menjalankan aplikasi instant messaging agar perbedaan kecepatan terlihat jelas.pengujian ini dilakukan dengan menjalankan 2 program sederhana yang di-code dengan teknik non-blocking dan blocking dari node.js.program ini menjalankan 2 proses yang berurutan. Proses yang pertama menjalankan looping yang selanjutnya menampilkan kata Thanks for waiting! pada browser. Proses yang kedua menampilkan kata Hello!. Program yang dijalankan dengan teknik blocking menggunakan port8000, sedangkan program yang dijalankan dengan teknik non-blocking menggunakan port 8080. Berikut adalah prosedur pengujian yang kami lakukan.pertama, kami membuka 2 jendela command window untuk menjalankan server port 8000 dan 8080. Kedua, kami membuka 2 window browser, yaitu Google Chrome,yang masing-masing digunakan untuk menjalankan program yang
79 di-code dengan teknik blocking dan non-blocking. Berikut adalah program yang ditulis dengan teknik blocking. Gambar 4.1Coding Blocking Berikut adalah program yang ditulis dengan dengan teknik non-blocking yang terdiri dari 2 file, yaitu block.js yang berisi proses pertama yaitu looping dan nonblocking.js yang merupakan program utama yang berisi pemanggilan proses pertama melalui file block.jsdan proseskedua. Gambar 4.2 Coding Non-Blocking, file block.js
80 Gambar 4.3Coding Non-Blocking, file nonblocking.js 4.2.1.3 Hasil Pengujian Setelah dilakukan pengujian kami mendapatkan hasil sebagai berikut. Pada browser pertama yang digunakan untuk menjalankan program dengan teknik blocking, program ini mengeksekusi proses pertama pada saat t = 0 detik.. Proses pertama melakukan looping dan selesai saat t = 21 detik lalu menampilkan kata Thanks for waiting!. Sesaat setelah itu proses yang kedua dieksekusi, yaitu menampilkan kata Hello!. Sedangkan pada browser kedua yang digunakan untuk menjalankan program dengan teknik non-blocking, program ini mengeksekusi proses pertama saat t = 0 detik. Ketika proses pertama ini sedang dieksekusi,
81 sesaat itu proses kedua langsung dieksekusi dan menampilkan kata Hello!. Pada saat t = 20 detik, proses pertama selesai dieksekusi dan menampilkan kata Thanks for waiting!. 4.2.1.4 Analisis Hasil Pengujian dan Kesimpulan Dari hasil yang didapat, program yang dijalankan dengan teknik blocking berjalan dengan sequence. Artinya proses yang kedua harus menunggu proses pertama sampai selesai untuk dapat dieksekusi. Sedangkan pada teknik non-blocking, proses kedua dapat langsung dieksekusi setelah proses pertama dieksekusi tanpa harus menunggu proses pertama selesai dieksekusi. Dengan demikian dapat disimpulkan bahwa teknik non-blocking program yang dibuat dapat berjalan lebih optimal dan cepat dibandingkan dengan teknik blocking. 4.2.2 Pengujian Kompatibilitas Browser 4.2.2.1 Tujuan Tujuan dari pengujian ini adalah untuk membuktikan bahwa aplikasi yang dibuat dapat dijalankan oleh user di browser manapun. 4.2.2.2 Skenario Pengujian Untuk menguji seberapa kompatibel aplikasi instant messaging dan doodle yang dibuat dengan browser maka dilakukan pengujian dengan cara menjalankan aplikasi tersebut pada beberapa browser. Dalam
82 pengujian aplikasi webakan dijalankan pada browser Google Chrome, Mozilla Firefox dan Internet Explorer. 4.2.2.3 Hasil Pengujian Dari pengujian yang dilakukan, kami mendapatkan tampilan-tampilan sebagai berikut untuk masing-masing browser yang diujikan. Gambar 4.4 Halaman Login pada Google Chrome
Gambar 4.5 Halaman Login pada Mozilla Firefox 83
Gambar 4.6 Halaman Login pada Internet Explorer 84
85 Berikut adalah tampilan halaman chat in room. Gambar 4.7 Halaman Chat in Room pada Google Chrome
Gambar 4.8 Halaman Chat in Room pada Mozilla Firefox 86
Gambar 4.9 Halaman Chat in Room pada Internet Explorer 87
88 Berikut ini adalah tampilan aplikasi pada halaman doodle. Gambar 4.10 Halaman Doodle pada Google Chrome
Gambar 4.11 Halaman Doodle pada Mozilla Firefox 89
90 Gambar 4.12 Halaman Doodle pada Internet Explorer 4.2.2.4 Analisis Hasil Pengujian dan Kesimpulan Berdasarkan hasil pengujian yang didapat, aplikasi instant messagingyang dibuat dengan node.js dapat berjalan di Google Chrome, Mozilla Firefox dan Internet Explorer. Demikian juga dengan fitur doodle, setiap browser yang diujikan juga dapat menjalankan fitur ini. Perbedaannya hanya dari tampilan yang tidak begitu mencolok.hal ini menunjukkan bahwa aplikasi web yang dibuat dengan teknologi Node.js mempunyai kompatibilitas yang baik terhadap setiap browser.
91 4.2.3 Pengujian Fitur Doodle 4.2.3.1 Tujuan Tujuan dari pengujian ini adalah untuk membuktikan apakah fitur doodle yang dibuat sudah dapat berjalan dengan baik atau belum. 4.2.3.2 Skenario Pengujian Pengujian fitur doodleakan dilakukan dengan menggunakan 2 komputer yang sedang aktif menggunakan aplikasi ini. Kedua komputer tersebut kemudian mengaktifkan fitur chat personally agar dapat mengaktifkan fitur doodle. Setelah itu, masing-masing komputer mengaktifkan fitur doodle dengan mengklik fitur doodle. Pengujian dilakukan sebanyak dua kali.pada pengujian I komputer pertama menggambar garis lurus dari atas ke bawah di sebelah kiri sehingga garis lurus yang digambar juga muncul secara real time pada layar komputer dua.kemudian komputer kedua menggambar garis lurus dari atas ke bawahdi sebelah kanan sehingga garis lurus yang digambar juga muncul secara real time pada layar komputer satu.pada pengujian II juga dilakukan hal yang sama seperti pengujian I. 4.2.3.3 Hasil Pengujian Berikut ini adalah data hasil pengujian doodle yang didapatkan setelah melakukan pengujian doodle.
92 Gambar 4.13 Tampilan Doodle di Komputer 1 pada Pengujian I Gambar 4.14 Tampilan Doodledi Komputer 2 pada Pengujian I
93 Gambar 4.15 Tampilan Doodle di Komputer 1 pada Pengujian II Gambar 4.16 Tampilan Doodle di Komputer 2 pada Pengujian II
94 4.2.3.4 Analisis Hasil Pengujian dan Kesimpulan Pada pengujian doodle yang pertama, garis yang dibuat oleh komputer 1 menampilkan garis yang sama di komputer 2.Begitu juga sebaliknya, garis yang dibuat oleh komputer 2 menampilkan garis yang sama di komputer 1. Dan pada pengujian yang kedua, garis yang dibuat oleh komputer 1 menampilkan garis yang sedikit berbeda di komputer 2.Pada komputer 2 muncul garis tambahan yang menghubungkan garis pertama dan garis kedua yang dibuat oleh komputer 1.Begitu juga sebaliknya, garis yang dibuat oleh komputer 2 menampilkan garis yang sedikit berbeda di komputer 1. Pada komputer 1 muncul garis tambahan yang menghubungkan garis pertama dan garis kedua yang dibuat oleh komputer 2. Berdasarkan hasil tersebut dapat disimpulkan bahwa fitur doodle yang dikembangkan masih mengandung bugs sehingga hasil yang didapatkan belum sempurna. Hal tersebut kemungkinan besar dikarenakan adanya perintah-perintah pemrograman yang tidak terkirim dari komputer 1 ke komputer 2, ketika di komputer 1 dilakukan aksi penggambaran lalu dilakukan penggambaran selanjutnya. Begitu pula yang terjadi sebaliknya jika aksi penggambaran dilakukan oleh komputer 2.Sehingga terjadi kesalahan dalam menampilkan penggambaran dari aksi komputer 1 di komputer 2 atau sebaliknya. Dengan demikian fitur doodle ini masih membutuhkan perbaikan untuk mendapatkan hasil yang lebih baik sehingga user dapat menggunakan fitur ini dengan nyaman.
95 4.2.4 Pengujian Pemakaian CPU (CPU usage) 4.2.4.1 Tujuan Tujuan dari pengujian ini adalah untuk membuktikan bahwa aplikasi instant messaging dan doodle yang dibangun memiliki CPU usage atau pemakaian CPU yang kecil baik dari sisi server maupun client. 4.2.4.2 Skenario Pengujian Pada pengujian ini akan dilakukan perbandingan antara aplikasi instant messagingyang dibuat dengan Node.js dan aplikasi yang dibuat dengan PHP versi 3.01. Aplikasi PHP yang diuji menggunakan teknik blocking dan teknologi pull.webserver yang digunakan pada aplikasi PHP adalah Apache versi 2.2. Sedangkan aplikasi yang dibuat dalam penelitian ini menggunakan teknik non-blocking dan teknologi push. Dengan demikian akan terlihat perbandingan CPU usage antara aplikasi instant messaging yang dibangun dengan Node.js dan yang dibangun dengan PHP. Pengujian CPU usage pada server dilakukan dengan menggunakan resource monitor yang merupakan utility bawaan dari Windows. Sedangkan di sisi clientmenggunakan task manageryang dimiliki oleh browser Google Chrome. Masing-masing pengujian dilakukan sebanyak dua kali.pengujian pertama dilakukan ketika client tidak melakukan chatting(idle).dan pengujian kedua dilakukan ketika client melakukan melakukan chatting.
96 4.2.4.3 Hasil Pengujian. Tabel 4.1 Penggunaaan CPU Server Aplikasi Instant Messaging Node.jspada Pengujian I Proses CPU Usage (%) node.exe 0 cmd.exe 0 conhost.exe 0 Tabel 4.2 Penggunaan CPU ServerAplikasi Instant Messaging PHP pada Pengujian I Proses CPU Usage (%) httpd.exe 0.08 Tabel 4.3 Penggunaaan CPUClientAplikasi Instant Messaging Node.jspada Pengujian I Proses CPU Usage (%) Tab:beeChat 0 Tabel 4.4 Penggunaaan CPUClientAplikasi Instant Messaging PHP pada Pengujian I Proses CPU Usage (%) Tab: Chat 2
97 Tabel 4.5 Penggunaaan CPU Server Aplikasi Instant Messaging Node.jspada Pengujian II Proses CPU Usage (%) node.exe 0.05 cmd.exe 0 conhost.exe 0 Tabel 4.6 Penggunaan CPU ServerAplikasi Instant Messaging PHP pada Pengujian II Proses CPU Usage (%) httpd.exe 0.24 Tabel 4.7 Penggunaaan CPUClientAplikasi Instant Messaging Node.jspada Pengujian II Proses CPU Usage (%) Tab:beeChat 6 Tabel 4.8 Penggunaaan CPUClientAplikasi Instant Messaging PHP pada Pengujian II Proses CPU Usage (%) Tab: Chat 8
98 4.2.4.4 Analisis Hasil Pengujian dan Kesimpulan Berdasarkan hasil pengujian, pada pengujian I server Node.js memiliki CPU usage0 % dan client memiliki CPU usage 0%.Sedangkan server PHP memiliki CPU usage0.08 % dan client memiliki CPU usage 2 %.Pada pengujian II, servernode.js memiliki CPU usage 0.05 % dan client memiliki CPU usage 6%.Sedangkan server PHP memiliki CPU usage 0.24 % dan client memiliki CPU usage8%. Dengan demikian dapat disimpulkan bahwa aplikasi instant messaging yang dibangun dengan Node.js di sisi server memiliki CPU usage yang lebih kecil 79.16 % dibandingkan dengan aplikasi instant messaging PHP. Dan aplikasi instant messaging yang dibangun dengan Node.js di sisi client memiliki CPU usage yang lebih kecil 33.33 % dibandingkan dengan aplikasi instant messaging PHP. 4.2.5 Pengujian Teknologi Push 4.2.5.1 Tujuan Tujuan dari pengujian ini adalah untuk membuktikan bahwa aplikasi yang dibuat menggunakan teknologi push. 4.2.5.2 Skenario Pengujian Pada pengujian ini dilakukan perbandingan dengan teknologipull. Untuk pembandingnya adalah aplikasi instant messaging sederhana dengan teknologi pulldan teknologi blockingyang menggunakan PHP versi 3.01.Web server yang digunakan adalah Apache versi 2.2.
99 Pengujian ini dilakukan dengan menggunakan taskmanager dari browser Google Chrome.Pada task manager terdapat memory yang menjadi indikator apakah aplikasi menggunakan teknologi push atau menggunakan teknologi pull. Aplikasi yang menggunakan teknologi push, akan terjadi perubahan pada memory setiap kali ada activity yang dilakukan oleh client. Sedangakan aplikasi yang menggunakan teknologi pull akan terjadi perubahan pada memory setiap beberapa waktu walaupun tidak ada activity yang dilakukan oleh client. Masing-masing aplikasi diuji dalam keadaan idle dan akan dilihat perubahan memory yang terjadidalam waktu 5 detik. 4.2.5.3 Hasil Pengujian Pada aplikasi instant messaging Node.js, saat t = 0 detik memilikimemory= 16448 KB. Kemudian saat t = 5 detik, memory = 16448 KB. Sedangkan pada aplikasi instant messaging PHP, saat t = 0 detik memiliki memory= 15804 KB. Kemudian saat t = 5 detik, memory = 15924 KB. 4.2.5.4 Analisis Hasil Pengujian dan Kesimpulan Berdasarkan hasil pengujian, pada aplikasi instant messaging Node js tidak terjadi perubahan memory dalam waktu 5 detik.sedangkan pada aplikasi instant messaging PHP terjadi perubahan memory dalam waktu 5 detik.dengan demikian dapat disimpulkan bahwa aplikasi instant messaging yang dibuatmenggunakan teknologi push yang tidak
100 mengharuskan server untuk selalu mengecek apakah ada request yang masuk atau tidak.berbeda dengan teknologi pull yang selalu mengecek request dari client sehingga terjadi perubahan memory setiap beberapa waktu. 4.2.6 Evaluasi Kuesioner Untuk dapat mengevaluasi sistem secara keseluruhan maka dilakukan juga evaluasi melalui kuesioner.kuesioner ini disebarkan ke 25 mahasiswa BINUS secara acak.berikut ini merupakan pertanyaan dari kuesioner yang disebarkan beserta hasil evaluasinya. Gambar 4.17 Hasil Evaluasi Pertanyaan 1 Gambar 4.18 Hasil Evaluasi Pertanyaan 2
101 Gambar 4.19 Hasil Evaluasi Pertanyaan 3 Gambar 4.20 Hasil Evaluasi Pertanyaan 4 Gambar 4.21 Hasil Evaluasi Pertanyaan 5
102 Gambar 4.22 Hasil Evaluasi Pertanyaan 6.1 Gambar 4.23 Hasil Evaluasi Pertanyaan 6.2 Gambar 4.24 Hasil Evaluasi Pertanyaan 6.3
103 Gambar 4.25 Hasil Evaluasi Pertanyaan 7 Gambar 4.26 Hasil Evaluasi Pertanyaan 8 Gambar 4.27 Hasil Evaluasi Pertanyaan 9 Gambar 4. 28 Hasil Evaluasi Pertanyaan 10
104 4.2.7 Evaluasi Tampilan Antarmuka Untuk tampilan antarmuka, dilakukan evaluasi berdasarkan delapan aturan emas. 1. Konsistensi Tampilan antarmuka aplikasi menggunakan warna dan layout yang konsisten di setiap halamannya. Gambar 4. 29 Evaluasi Konsistensi. 2. Melayani Kebutuhan Universal Tampilan dirancang sesederhana mungkin agar user yang pemula ataupun yang sudah biasa dapat mudah menggunakannya.
105 3. Memberikan Umpan Balik yang Informatif Ketika user salah memasukan input pada saat melakukan login,akan muncul sebuah peringatan yang menginformasikan bahwa input yang diberikan user salah. Gambar 4. 30 Evaluasi Umpan Balik yang Informatif Saat User Salah Memasukan Input Username atau Password Ketika Login
106 Gambar 4. 31 Evaluasi Umpan Balik yang Informatif Saat User Tidak Memasukan Input Username Ketika Login Gambar 4. 32 Evaluasi Umpan Balik yang Informatif Saat User Tidak Memasukan Password Ketika Login
107 4. Merancang Dialog untuk Menghasilkan Suatu Penutupan Umpan balik diberikan untuk mengindikasikan bahwa apa yang sudah dilakukan user benar. Hal ini dapat ditemukan pada saat user telah selesai melakukan registrasi. Gambar 4. 33 Evaluasi Dialog untuk Menghasilkan Suatu Penutupan 5. Memberikan Penanganan Kesalahan yang Sederhana Untuk mencegah kesalahan user dalam membuat password, pada saat melakukan registrasi terdapat dua kolom inputuntuk password.dimana di kolom pertama ditujukan untuk password yang dikehendaki, dan kolom selanjutnya ditujukan untuk verivikasi password yang telah dimasukan.
108 Gambar 4. 34Evaluasi Penanganan Kesalahan Sederhana Ditunjukan pada KolomYour Password dan Verify Password 6. Mudah Kembali ke Tindakan Sebelumnya Disediakannya button clean doodle di kiri atas area doodle yang memungkinkan user kembali ke aksi sebelumnya jika terjadi kesalahan pada saat melakukan doodle.
109 Gambar 4. 35 Evaluasi Mudah Kembali ke Tindakan Sebelumnya 7. Mendukung Pusat Kendali Internal User menjadi pengendali sistem dan sistem akan merespon tindakan yang dilakukan pengguna. 8. Mengurangi Beban Daya Ingat Tampilan antarmuka aplikasi menggunakan layout yang serupa di setiap halaman dan menggunakan button- button menu berupa tulisan bukan terwakili dalam bentuk gambar yang mengharuskan user mengingat kembali maksud dari gambar tersebut.