BAB 4 IMPLEMENTASI DAN PENGUJIAN

BAB 4 IMPLEMENTASI DAN PENGUJIAN

4.1.

Lingkungan Implementasi

Setelah sistem dianalisis dan di desain secara rinci maka sistem di implementasikan. Tahap implementasi sistem (sistem implementation) merupakan tahap meletakkan sistem supaya siap dioperasikan, salah satu diantaranya adalah pemrograman dan pengetesan program. Penulisan kode program merupakan kegiatan terbesar didalam tahap implementasi sistem. Lingkungan implementasi aplikasi ini meliputi lingkungan perangkat lunak dan perangkat keras.

4.1.1. Lingkungan Perangkat Keras Perangkat Keras yang digunakan untuk pengujian aplikasi client adalah : 1. Prossesor Intel(R) Core(TM) i5-4210M CPU @ 2.60GHz 2. Memory DDR3 16 GB. 3. Hardisk 250 GB.

Sedangkan untuk sample mesin client yang digunakan adalah :

1. Processor 2.7GHz dual-core Intel Core i5 processor (Turbo Boost up to 3.1GHz) with 3MB shared L3 cache 2. Memory DDR3 8GB 3. Hardisk 128GBs

4.1.2. Lingkungan Perangkat Lunak Perangkat Lunak yang digunakan untuk aplikasi server adalah : 1. NodeJs sebagai web server 2. Operating System Linux Mint 17.1 Rebbeca. 3. MongoDB sebagai database untuk menyimpan data. 4. NginX sebagai load balancer.

71 http://digilib.mercubuana.ac.id/

72

Perangkat Lunak yang digunakan untuk aplikasi client adalah : 1. Operating System OS X El Capitan 10.11 2. Browser Google Chrome Versi 47.0.2526.106 (64-bit)

4.2.

Tampilan Antar muka

4.2.1. Tampilan Halaman Login Gambar 4.1 merupakan tampilan untuk login user sebelum masuk ke menu halaman utama. Login ini berfungsi untuk mengaktifkan menu yang ada di dalam aplikasi web.

Gambar 4.1 Halaman Login 4.2.2. Tampilan Halaman Utama Gambar 4.2 merupakan tampilan untuk user sebelum masuk ke Drawing Board (room). Di halaman ini user bisa menambahkan Room baru.

http://digilib.mercubuana.ac.id/

73

Gambar 4.2 Halaman Utama 4.2.3. Tampilan Drawing Board (Room) Gambar 4.3 merupakan tampilan untuk user dimana user dapat berinteraksi dengan user lain di room yang sama dengan menggunakan objek gambar maupun tulisan.

Gambar 4.3 Halaman Drawing Board (Room)

4.2.4. Tampilan List Tool Gambar 4.4 merupakan daftar tool yang dapat digunakan oleh user, yang terdiri dari Pencil Tool, Drawing Tool, Image Tool, Sticky Note Tool, Copy, Delete.


74

Gambar 4.4 Tampilan List Tools 4.2.5. Tampilan Drawing Tool Gambar 4.5 merupakan Tool yang dapat digunakan oleh user,untuk membuat objek seperti, kotak, lingkaran, Polygon, dilengkapi dengan perubahan warna stroke dan fill

Gambar 4.5 Drawing tool 4.2.6. Tampilan Sticky Note Tool Gambar 4.6 merupakan Tool yang dapat digunakan oleh user, untuk membuat Sticky note dilengkapi dengan pilihan background dan Text editor


75

Gambar 4.6 Sticky note tool

4.2.7. Tampilan Image Upload Tool Gambar 4.7 merupakan Tool yang dapat digunakan oleh user, untuk mengunggah gambar dan menjadikannya sebuah objek di Drawing board.

Gambar 4.7 Image Tool 4.2.8. Tampilan Drawing Element Gambar 4.8 merupakan hasil pembuatan objek dari tool yang tersedia user, element akan di kirim ke server socket.io setiap insert, edit ataupun delete lalu server socket.io akan mem-broadcast elemen tersebut ke client lain, elemen akan di sinkronisasi


76

setiap 10 detik sekali ke database, dengan metode persistentState dimana perlakuannya akan berbeda-beda untuk elemen baru, elemen dirubah ataupun elemen dihapus.

Gambar 4.8 Drawing element

4.3

Pengujian Menjelaskan lingkungan pengujian yaitu untuk menguji perangkat lunak yang

dihasilkan. Sebelum pengujian terhadap aplikasi ini dilakukan, terlebih dahulu harus dilakukan perencanaan untuk melakukan pengujian tersebut sehingga pengujian yang akan dilakukan akan sesuai dengan ketentuan yang ada, jadi tidak terjadi penyimpangan dari tujuan yang telah dibuat sebelumnya. Pengujian yang dilakukan menggunakan metode white-box dan black-box.

4.3.1

Skenario Pengujian Black Box Skenario pengujian yang akan dilakukan pada perangkat lunak ini adalah

melakukan test case terhadap proses-proses di form-form yang ada pada aplikasi, apakah modul tersebut menghasilkan keluaran yang benar atau tidak dengan menggunakan data yang telah disiapkan.


77

4.3.1.1 Tabel Skenario Pengujian Halaman Login Tabel 4.1 Skenario Pengujian Halaman Login No 1

Item yang diuji Tombol Login

Cara Pengujian Melakukan input username dan

Hasil Yang Diharapkan Muncul halaman utama

password.

4.3.1.2 Tabel Skenario Pengujian Halaman Utama Tabel 4.2 Skenario Pengujian Halaman Utama No 1

Item yang diuji Tombol Buat

Cara Pengujian

Hasil Yang Diharapkan

Mengklik tombol Buat Baru

Muncul Room baru

Mengklik salah satu room

Muncul halaman Drawing

Baru 2

List Room

Board (Room) 3

Tombol Keluar

Mengklik tombol Keluar

Kembali ke halaman login

4.3.1.3 Tabel Skenario Pengujian Halaman Drawing Board (Room) Tabel 4.3 Skenario Pengujian Halaman Drawing Board (Room) No 1

Item yang diuji

Cara Pengujian

Hasil Yang Diharapkan

Tombol Pencil

Menyorot tombol tools lalu Kursor berubah menjadi

Tool

mengklik Tombol Pencil Tool

tanda plus dan user dapat membuat coretan di Board

2

Tombol Drawing

Menyorot tombol tools lalu Muncul popup yang berisi

Tool

mengklik Tombol Drawing Tool

tool untuk membuat objekobjek

seperti

bentuk

persegi, lingkaran, poligon dan lainnya, serta ada pilihan ketebalan stroke


78

juga pilihan warna stroke dan fill 3

Tombol Image


Tool

mengklik Tombol Image Tool

tombol Choose File dan tombol cancel juga post

4

Tombol Sticky


Note Tool

mengklik Tombol Sticky Note textbox yang dilengkapi Tool

editor, pilihan background, tombol Cancel dan Post

5

Tombol Copy

Memilih objek yang akan di Objek yang dipilih akan

Tool

gandakan lalu Menyorot tombol menjadi 2 objek tools

setelah

itu

mengklik

Tombol Copy Tool 6

Tombol Erase

Memilih objek yang akan di Objek yang dipilih akan

Tool

hapus lalu Menyorot tombol terhapus dari Board tools

setelah

itu

mengklik

Tombol Erase Tool 7

Objek Drawing

Berinteraksi dengan

cara

dengan

objek Objek

akan

mengikuti

memindahkan perilaku yang sama di client

merubah ukuran serta memutar yang lain yang masuk di

8

Tombol Daftar

objek

room yang sama

Mengklik Tombol Daftar File

Kembali ke halaman utama

File

4.3.2

Hasil Pengujian Dari hasil pengujian, semua item yang diuji sesuai dengan yang diharapkan.

Pengujian form-form yang ada di aplikasi server maupun aplikasi Client , apakah modul tersebut menghasilkan keluaran yang telah sesuai maupun tidak sesuai.


79

4.3.2.1 Tabel Hasil Pengujian Halaman Login Tabel 4.4 Hasil Pengujian Halaman Login No

1

Item yang diuji

Tombol Login

Cara Pengujian

Hasil Yang

Hasil

Diharapkan

Pengujian

Melakukan input

Muncul halaman

username dan

utama

Sesuai

password.

4.3.2.2 Tabel Hasil Pengujian Halaman Utama Tabel 4.5 Hasil Pengujian Halaman Utama No

1

2

Item yang diuji

Cara Pengujian

Tombol Buat

Mengklik tombol Buat

Baru

Baru

List Room

Hasil Yang

Hasil

Diharapkan

Pengujian

Muncul Room baru

Sesuai

Mengklik salah satu

Muncul halaman

Sesuai

room

Drawing Board (Room)

3

Tombol Keluar

Mengklik tombol

Kembali ke halaman

Keluar

login

Sesuai

4.3.2.3 Tabel Hasil Pengujian Halaman Drawing Board (Room) Tabel 4.6 Hasil Pengujian Halaman Drawing Board (Room) No

1

Item yang diuji

Cara Pengujian

Hasil Yang

Hasil

Diharapkan

Pengujian

Tombol Pencil

Menyorot tombol tools

Kursor berubah

tool

lalu mengklik Tombol

menjadi tanda plus

Pencil Tool

dan user dapat


Sesuai

80

membuat coretan di Board 2

Tombol Drawing


Muncul popup yang

Tool


berisi tool untuk

Drawing Tool

membuat objek-

Sesuai

objek seperti bentuk persegi, lingkaran, poligon dan lainnya, serta ada pilihan ketebalan stroke juga pilihan warna stroke dan fill 3

Tombol Image


Muncul popup yang

Tool


berisi tombol

Image Tool

Choose File dan

Sesuai

tombol cancel juga post 4

Tombol Sticky


Muncul popup yang

Note Tool


berisi textbox yang

Sticky Note Tool

dilengkapi editor,

Sesuai

pilihan background, tombol Cancel dan Post 5

Tombol Copy

Memilih objek yang

Objek yang dipilih

Tool

akan di gandakan lalu

akan menjadi 2


objek

setelah itu mengklik Tombol Copy Tool


Sesuai

81

6

Tombol Erase

Memilih objek yang

Objek yang dipilih

Tool

akan di hapus lalu

akan terhapus dari


Board

Sesuai

setelah itu mengklik Tombol Erase Tool 7

Objek Drawing

Berinteraksi dengan

Objek akan

objek dengan cara

mengikuti perilaku

Sesuai

memindahkan merubah yang sama di client ukuran serta memutar

yang lain yang

objek

masuk di room yang sama

8

4.3.3

Tombol Daftar

Mengklik Tombol

Kembali ke halaman

File

Daftar File

utama

Sesuai

Analisis Hasil Pengujian Dari hasil pengujian dapat dijelaskan sebagai berikut:

1.

Pengujian Halaman Login Form melakukan proses login untuk masuk ke halaman utama.

2.

Pengujian Halaman Utama Menampilkan halaman utama untuk menampilkan, membuat serta masuk ke room.

3.

Pengujian Halaman Drawing Board (Room) Menampilkan halaman Drawing Board beserta objek yang tersimpan membuat objek, menghapus objek, menggandakan objek dengan tool, juga dapat berinteraksi dengan objek.

4.3.4

Skenario Pengujian White Box Skenario pengujian white box yang akan dilakukan pada perangkat lunak

ini adalah melakukan test case terhadap method dan fungsi-fungsi penting yang


82

merupakan inti dari program atau mewakili method-method lain yang mempunyai algoritma yang identik. Pengujian ini bertujuan untuk melengkapi pengujian sebelumnya dengan metode black box guna memastikan kode yang ditulis bekerja sesuai harapan

4.3.4.1.Skenario Procedure Load Canvas Procedure Load Canvas akan melakukan request api lalu membaca response berupa json yang berisi informasi objek pada Drawing Board lalu membuat ulang objek kedalam Drawing Board

Tabel 4.7 Source Code Procedure Load Canvas // Load Canvas loadCanvas: function () {

$.ajax({ method: "POST", url: "/api/load-canvas", data : {pageid: Board.pageid}, dataType: 'json', success: function(data){ if(data && data.length > 0) { for(d in data){ // Memanggil fungsi createObject pada Board

Board.createObject(data[d], true); } setTimeout(function(){

Board.createThumb(); }, 5000); } $('#loading').hide(); }, error: function(){ $('#loading').hide(); } }); },


83

createObject: function (elem, fromdb, cb) {

var newCtxId; var element = {}; if (fromdb) { element = { id: elem.name, type: elem.type, style: elem.style, size: elem.size, position: elem.position, angle: elem.angle, data: elem.data, persistentState: 'updated' };

newCtxId = elem.name; } else { element = elem; newCtxId = element.id;

Materialize.toast(elem.type + ' Created', 2000); }

if (element.type == 'chart') { try { element.data = JSON.parse(element.data); } catch (err) { console.log('Element data already json..'); } }

var gridsize = parseInt($('#grid-size').val());

var $newObject = $('
') .attr({ 'id': newCtxId, 'data-type': element.type }) .css({ 'width': element.size.width + 'px', 'height': element.size.height + 'px',


84

'left': Math.floor(element.position.left / gridsize) * gridsize + 'px', 'top': Math.floor(element.position.top / gridsize) * gridsize + 'px', 'z-index': Board.zIndexCounter, 'position': 'absolute' });

switch (element.type) { case 'img': $newObject.css('background', 'url(' + element.data + ')').addClass('obj-img'); break; case 'image': $newObject.css('background', 'url("upload/images/' + element.data + '")').addClass('obj-image'); break; case 'text': $newObject.html('
' + unescape(element.data) + '
').addClass('obj-text'); break; case 'comic': $newObject.html('
').addClass('obj-comic'); break; case 'table': $newObject.html('
').addClass('obj-table'); break; case 'chart': $newObject.addClass('obj-chart'); break; case 'stamp': $newObject.css('background', 'url(images/stamp/' + element.data + ')').addClass('obj-stamp'); break; }

if ($('#' + newCtxId).length == 0) $('#canvasContainer').append($newObject);

$('#' + newCtxId).append('
') .resizable({ handles: { 'se': '.handle-se'


85

}, containment: 'parent', resize: Board.resize, stop: Board.resize, minHeight: 60, minWidth: 150, autoHide: true, cancel: false });

$('#' + newCtxId) .rotatable({ angle: parseFloat(element.angle?element.angle:0), rotate: Board.rotate, stop: Board.rotate });

if( !$('#' + newCtxId).data('ui-rotatable').angle()){ $('#' + newCtxId).data('ui-rotatable').angle(0); }

if (element.type == 'chart') { var chart = new AmCharts.AmSerialChart(); chart.dataProvider = element.data.data; chart.categoryField = "label"; chart.marginTop = 15; chart.marginLeft = 55; chart.marginRight = 15; chart.marginBottom = 80; chart.angle = 0.0; chart.depth3D = 15;

var catAxis = chart.categoryAxis; catAxis.gridCount = element.data.data.length; catAxis.labelRotation = 90;

var graph = new AmCharts.AmGraph(); graph.title = 'Chart by KolaboDraw'; graph.valueField = "value"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 0.8;


86

chart.addGraph(graph); chart.write(newCtxId); element.data = JSON.stringify(element.data); }

var optgrid = (gridsize > 5) ? [gridsize, gridsize] : false;

$('#' + newCtxId).draggable({ containment: "parent", scroll: false, grid: optgrid, drag: Board.move, stop:Board.move, cancel: false });

$('#' + newCtxId).on('click', function (e) { e.preventDefault(); e.stopPropagation(); $('#canvasContainer > div.active').removeClass('active'); $(this).addClass('active'); $(this).css('z-index', Board.zIndexCounter);

Board.zIndexCounter++; });

$('#' + newCtxId).TouchBox({ resize: true, callback_touches: function (touches) { $('#canvasContainer > div.active').removeClass('active'); $(this).addClass('active'); }, callback_size_change: function (newWidth, newHeight) { var event = $(this).attr('id'); var ui = { position: { top: parseInt($(this).css('top')), left: parseInt($(this).css('left')) }, size: { width: newWidth, height: newHeight


87

} };

Board.resize(event, ui); }, callback_position_change: function (newLeft, newTop) { var event = $(this).attr('id'); var ui = { position: { top: newTop, left: newLeft }, size: { width: $(this).width(), height: $(this).height() } };

Board.move(event, ui); } });

if (element.type == 'text' || element.type == 'comic' || element.type == 'table') { $('#' + newCtxId).on('dblclick', function (e) { e.preventDefault();

Board.editTextArea(newCtxId); }); }

Board.element.push(element);s if(typeof(cb) === 'function'){ cb.call(); }

Board.elementById[element.id] = element; Board.zIndexCounter++; },

4.3.4.2. Skenario Procedure Save Canvas Procedure Save Canvas akan melakukan post ke api lalu membuat thumbnail untuk minimap, elemen akan diperlakukan berbeda tergantung pada persistenState baik new, updated ataupun removed.


88

Tabel 4.8 Source Code Procedure Save Canvas saveCanvas: function () { if(!Board.pageid){ return; } var formData = new FormData();

console.log('saving elements..'); var tobesavedelement = [];

Board.element.forEach(function(el){ if (el.persistentState != 'updated' && el.persistentState != 'removed') { tobesavedelement.push(el); } });

if(tobesavedelement.length > 0){ $.post("/api/save-canvas/"+Board.pageid, { data: tobesavedelement, dataType: 'json' }, function (data) { if (data.success) { for(i in tobesavedelement){

el = tobesavedelement[i]; if (el.persistentState == 'update_required' || el.persistentState == 'new') { // Update element dengan persistentState new, dan update_required di local menjadi updated setelah melakukan save

Board.updateElement(el.id, 'persistentState', 'updated'); } if (el.persistentState == 'deleted') { // Update element dengan persistentState deleted di local menjadi removed setelah melakukan save

Board.updateElement(el.id, 'persistentState', 'removed'); } }; } }); }


89

// Memanggil fungsi createThumb

Board.createThumb(); },

createThumb: function () {

var canvas = document.getElementById('previewCanvas'); var context = canvas.getContext('2d'); canvas.width = Board.canvas.width; canvas.height = Board.canvas.height; for (var i = 0; i < Board.element.length; i++) { var element = Board.element[i]; switch (element.type) { case 'img': var image = new Image(); image.src = element.data; context.drawImage(image, element.position.left, element.position.top, element.size.width, element.size.height); break; case 'image': var image = new Image(); image.src = 'upload/images/' + element.data; context.drawImage(image, element.position.left, element.position.top, element.size.width, element.size.height); break; case 'comic': case 'text': context.fillStyle = element.style.fill; context.fillRect(element.position.left, element.position.top, element.size.width, element.size.height); break; case 'stamp': context.font = element.size.width + 'px infinitec-draw'; context.textAlign = 'center'; context.fillStyle = element.style.fill; var icon =Board.getUnicodeIcon(element.data); context.fillText(icon, element.position.left, element.position.top); } }


90

thumbCanvas = document.createElement('canvas'); thumbCanvas.width = 120; thumbCanvas.height = 120; thumbCanvas.getContext("2d").drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 120, 120); $('.layers ul li:eq(' + Board.page + ') img').attr('src', thumbCanvas.toDataURL('image/png')).css('width', '100%').css('height', '100%');

Board.thumbPreview = thumbCanvas.toDataURL('image/png'); $('#minimap-thumbcanvas').attr('src', thumbCanvas.toDataURL('image/png')); },

4.3.4.3.Skenario Procedure Client Message Procedure Client Message akan melakukan emit ke server socket.io untuk memberitahu server mengenai semua perubahan yang terjadi di Board Client, terdiri dari cm_new, cm_move, cm_resize, cm_rotate, cm_delete.

Tabel 4.9 Souce Code Procedure Client Message (cm_new) // cm_new – Pembuatan objek baru, di trigger saat event mouseup terjadi apabila user dalam drawing mode mouseup: function (e) { if (Board.drawMode != "polyline") {

Board.linePoints = []; } switch (Board.drawMode) { case 'lineOut': case 'line': case 'rect': case 'elips': case 'poly':

Board.drawing = 0; if (Board.drawing == 0 && (e.type == 'touchend' || e.type == 'ontouchend')) { var type, x, y, color, thick; x =Board.toCanvasX(e); y =Board.toCanvasY(e);

Board.mouse.x = x;


91

Board.mouse.y = y; if (Board.drawMode == 'stamp') { $('#stamp-cursor').css('left',Board.toPageX(e) + 'px').css('top',Board.toPageY(e) + 'px').css('zindex',Board.zIndexCounter); } if (Board.drawMode == 'image') { $('#image-cursor').css('left',Board.toPageX(e) + 'px').css('top',Board.toPageY(e) + 'px').css('zindex',Board.zIndexCounter); }

type = 'dragend';

if (Board.disable == 2 && (Board.drawing == 1 ||Board.drawing == 2)) { return; } if (Board.drawing == 1 ||Board.drawing == 2 ||Board.drawing == 0) {

Board.draw(Board.currentCtxId, x, y, type, color, thick); } }

Board.clear(Board.memCanvas); Board.memCanvas.getContext("2d").drawImage(Board.canvas, 0, 0); if (Board.drawMode == 'lineOut') {

Board.donedrawing(); } break; case 'image': var x, y; x =Board.toCanvasX(e); y =Board.toCanvasY(e); var newCtxId = App.userid + (new Date).getTime();

var element = { id: newCtxId, type: 'image', style: { lineSize: App.views.mymemo.linethickslider.value(),


92

fill:Board.fill, stroke: App.views.mymemo.strokepallete.getKendoColorPicker().value() }, size: { width: 200, height: 200 }, position: { top: y, left: x }, angle: 0.0, data:Board.imageFile, persistentState: 'new' };

Board.createObject(element); App.socket.emit('cm_new', element); Board.donedrawing(); break; case 'stamp': var x, y; x =Board.toCanvasX(e); y =Board.toCanvasY(e); var newCtxId = App.userid + (new Date).getTime();

var element = { id: newCtxId, type: 'stamp', style: { lineSize: App.views.mymemo.linethickslider.value(), fill:Board.fill, stroke: App.views.mymemo.strokepallete.getKendoColorPicker().value() }, size: { width: 200, height: 200 }, position: { top: y,


93

left: x }, angle: 0.0, data:Board.stampIcon, persistentState: 'new' };

Board.createObject(element); App.socket.emit('cm_new', element); Board.donedrawing(); break; case 'polyline': var x, y; x =Board.toCanvasX(e); y =Board.toCanvasY(e); if (Board.linePoints.length > 0) { if (!$("#isstroke").is(':checked')) {

Board.clear(Board.canvas); }

Board.linePoints.push({x: x, y: y}); Board.ctx.lineTo(x, y); if ($("#isstroke").is(':checked'))

Board.ctx.stroke(); if ($("#isfill").is(':checked'))

Board.ctx.fill(); } else {

Board.linePoints.push({x: x, y: y}); Board.ctx.lineCap = "round"; Board.ctx.strokeStyle =App.views.mymemo.strokepallete.getKendoColorPicker().value(); Board.ctx.fillStyle =App.views.mymemo.fillpallete.getKendoColorPicker().value(); Board.ctx.lineWidth =App.views.mymemo.linethickslider.value(); Board.ctx.beginPath(); Board.ctx.moveTo(x, y); Board.ctx.lineTo(x + 1, y + 1); Board.ctx.stroke(); } break;


94

case 'text': if (!Board.inserting && !Board.editing) { var x, y; x =Board.toPageX(e); y =Board.toPageY(e); var newCtxId = App.userid + (new Date).getTime();

var element = { id: newCtxId, type: 'text', style: { lineSize:App.views.mymemo.linethickslider.value(), fill:Board.fill, stroke:App.views.mymemo.strokepallete.getKendoColorPicker().value() }, size: { width: 250, height: 150 }, position: { top: y, left: x }, angle: 0.0, data: ' ', persistentState: 'new' };

Board.inserting = true; Board.currentCtxId = newCtxId; Board.createObject(element); $('#text-' + newCtxId).removeClass('disabled'); $('#canvasFakeContainer').removeClass('active'); } break; case 'comic': if (!Board.inserting && !Board.editing) { var x, y;


95

x = $(window).width() / 2; y = $(window).height() / 2; var newCtxId = App.userid + (new Date).getTime();

var element = { id: newCtxId, type: 'comic', style: { lineSize:App.views.mymemo.linethickslider.value(), fill:Board.fill, stroke:App.views.mymemo.strokepallete.getKendoColorPicker().value() }, size: { width: 250, height: 150 }, position: { top: y, left: x }, angle: 0.0, data: ' ', persistentState: 'new' };

Board.inserting = true; Board.currentCtxId = newCtxId; Board.createObject(element); $('#text-' + newCtxId).removeClass('disabled'); $('#canvasFakeContainer').removeClass('active'); } break; case 'table': if (!Board.inserting && !Board.editing) { var x, y; x =Board.toPageX(e); y =Board.toPageY(e);


96

var newCtxId = App.userid + (new Date).getTime();

var table = '';

for (var i = 0; i < parseInt($('#tbrow').val()); i++) { table += ''; for (var j = 0; j < parseInt($('#tbcol').val()); j++) { table += ''; } table += ''; }

table += '

';

var element = { id: newCtxId, type: 'table', style: { lineSize:App.views.mymemo.linethickslider.value(), fill:Board.fill, stroke:App.views.mymemo.strokepallete.getKendoColorPicker().value() }, size: { width: 250, height: 150 }, position: { top: y, left: x }, angle: 0.0, data: table, persistentState: 'new' };

Board.inserting = true; Board.currentCtxId = newCtxId; Board.createObject(element); $('#textbox-window').closest(".k-window").css({


97

top: y, left: x });

$('#text-' + newCtxId).removeClass('disabled'); $('#canvasFake').removeClass('active'); } break; default: break; } },

Tabel 4.10 Souce Code Procedure Client Message (cm_update) // cm_update – Perubahan Objek yang editable seperti, Sticky Note di trigger ketika Board dalam mode editing } else if (Board.editing) { var newCtxId =Board.editElementId; if($('#text-' + newCtxId).parent().attr('data-type') === 'comic'){ var htmldata = $('#text-' + newCtxId + ' .card-content').html(); } else { var htmldata = $('#text-' + newCtxId).html(); }

$('#text-' + newCtxId).addClass('disabled');

$('#textbox-window').data("kendoWindow").center().close();

Board.updateElement(newCtxId, 'style', { font: $('#fonttypeselect option:selected').val(), fontsize: parseInt($('#' + newCtxId).css('font-size')), textAlign: $('#' + newCtxId).css('text-align') == 'start' ? 'left' : $('#' + newCtxId).css('text-align'), strokesize: $('#' + newCtxId).css('-webkit-text-stroke-width') ? $('#' + newCtxId).css('-webkittext-stroke-width') : 1, fill: $('#' + newCtxId).css('color'), stroke: $('#' + newCtxId).css('text-shadow') });

Board.updateElement(newCtxId, 'position', { top: parseInt($('#' + newCtxId).css('top')),


98

left: parseInt($('#' + newCtxId).css('left')) });

Board.updateElement(newCtxId, 'size', { width: parseInt($('#' + newCtxId).css('width')), height: parseInt($('#' + newCtxId).css('height')) });

Board.updateElement(newCtxId, 'data', escape(htmldata)); // Update data di local menjadi persistentState update_required, agar diproses oleh saveCanvas

Board.updateElement(newCtxId, 'persistentState', 'update_required'); var updatedElement =Board.getElement(newCtxId);

Board.elementById[newCtxId] = updatedElement; App.socket.emit('cm_update', updatedElement); Board.editing = false; Board.editElementId = 0; }

Tabel 4.11 Souce Code Procedure Client Message (cm_move) // cm_move – Pemindahan objek, di trigger saat event move dari jQueryUi Draggable di trigger move: function (event, ui) { event.stopPropagation(); if (Board.editing ||Board.inserting) return;

var elid = $(this).attr('id') ? $(this).attr('id') : event; var zindex = parseInt($(this).css('z-index'));

App.socket.emit('cm_move', { id: elid, memo: Board.memo, page: Board.page, top: ui.position.top, left: ui.position.left, z: zindex });


99

Board.updateElement(elid, 'position', { top: ui.position.top, left: ui.position.left });

Board.updateElement(elid, 'z', zindex); Board.zIndexCounter = zindex; // Update data di local menjadi persistentState update_required, agar diproses oleh saveCanvas

Board.updateElement(elid.replace("el-wrap-", ""), 'persistentState', 'update_required'); },

Tabel 4.12 Souce Code Procedure Client Message (cm_rotate) // cm_rotate - Melakukan perubahan pada rotasi objek rotate: function (event, ui) { if (Board.editing ||Board.inserting) return;

var self = $(this);

var elid = self.attr('id') ? self.attr('id') : event; var zindex = parseInt($(this).css('z-index'));

App.socket.emit('cm_rotate', { id: elid, memo: Board.memo, page: Board.page, angle: ui.angle.current, z: zindex });

Board.updateElement(elid, 'angle', ui.angle.current); Board.updateElement(elid, 'z', zindex); // Update data di local menjadi persistentState update_required, agar diproses oleh saveCanvas

Board.updateElement(elid.replace("el-wrap-", ""), 'persistentState', 'update_required'); },


100

Tabel 4.13 Souce Code Procedure Client Message (cm_resize) // cm_resize – Melakukan perubahan ukuran objek resize: function (event, ui) { if (Board.editing || Board.inserting) { return;

}

var elid = $(this).attr('id') ? $(this).attr('id') : event; var zindex = parseInt($(this).css('z-index'));

App.socket.emit('cm_resize', { id: elid, memo: Board.memo, page: Board.page, width: ui.size.width, height: ui.size.height, top: ui.position.top, left: ui.position.left });

Board.updateElement(elid, 'position', { top: ui.position.top, left: ui.position.left });

Board.updateElement(elid, 'size', { width: ui.size.width, height: ui.size.height });

Board.updateElement(elid, 'z', zindex); // Update data di local menjadi persistentState update_required, agar diproses oleh saveCanvas

Board.updateElement(elid, 'persistentState', 'update_required'); },

Tabel 4.14 Souce Code Procedure Client Message (cm_delete) // cm_delete – Penghapusan Objek, akan di trigger saat fungsi deleteElement dipanggil


101

deleteElement: function (e) { if (confirm('Delete selected object?')) { var deleteObject = $('#canvasContainer > div.active');

// Memanggil fungsi removeElement pada Board

Board.removeElement(deleteObject.attr('id')); deleteObject.find('div').remove(); deleteObject.remove();

App.socket.emit('cm_delete', { id: deleteObject.attr('id'), memo:Board.memo, page:Board.page });

// Trigger segera saveCanvas untuk memproses objek yang dihapus

Board.saveCanvas(); } else {

} e.preventDefault(); },

// Merubah status objek di local menjadi persistenState deleted removeElement: function (id) {

Board.updateElement(id, 'persistentState', 'deleted'); },

4.3.4.4.Skenario Procedure Server Message Procedure Server Message akan menerima broadcast dari server socket.io untuk meng-update semua perubahan yang terjadi di Board client lain, terdiri dari sm_new, sm_update, sm_move, sm_resize, sm_rotate, sm_delete.

Tabel 4.15 Souce Code Procedure Server Message (sm_new) // sm_new – Pembuatan objek baru di Board client lain App.socket.on('sm_new', function (data) { // Memanggil fungsi createObjek

Board.createObject(data);


102

// Menambahkan element ke local data element

Board.element.push(data); Board.elementById[data.id] = data; });

Tabel 4.16 Souce Code Procedure Server Message (sm_update) // sm_update – Perubahan objek yang editable di Board Client Lain App.socket.on('sm_update', function (data) { if ((data.type == 'text' || data.type == 'table' ) && Board.editElementId != data.id) { $('#' + data.id).css('width', data.width + 'px').css('height', data.height + 'px'); $('#text-' + data.id).html(unescape(data.data)); } if(data.type == 'comic'){ $('#' + data.id).css('width', data.width + 'px').css('height', data.height + 'px'); $('#' + data.id + ' .text-edit').removeClass('lime purple red blue green pink cyan yellow orange brown grey'); $('#' + data.id + ' .text-edit').addClass(data.style.fill).attr('data-bg', data.style.fill); $('#text-' + data.id + ' .card-content').html(unescape(data.data)); } });

Tabel 4.17 Souce Code Procedure Server Message (sm_move) // sm_move – Pemindahan posisi objek di Board Client lain App.socket.on('sm_move', function (data) { // Merubah posisi objek sesuai perubahan yang diterima $('#' + data.id).css({ 'left': data.left + 'px', 'top': data.top + 'px', 'z-index': data.z });

Board.zIndexCounter = data.z; });

Tabel 4.18 Souce Code Procedure Server Message (sm_resize) // sm_resize – Perubahan ukuran objek di Board Client lain App.socket.on('sm_resize', function (data) {


103

// Merubah ukuran objek dan posisi ssesuai perubahan yang diterima $('#' + data.id).css({ 'width': data.width + 'px', 'height': data.height + 'px', 'left': data.left + 'px', 'top': data.top + 'px', 'z-index': data.z }); });

Tabel 4.19 Souce Code Procedure Server Message (sm_delete) // sm_delete – Penghapusan objek di Board Client lain App.socket.on('sm_delete', function (data) { // Hapus container objek dari DOM $('#' + data.id + ' div').remove(); // Hapus objek dari DOM $('#' + data.id).remove(); // Hapus objek dari local data if (Board.elementById.indexOf(data.id))

Board.elementById.splice(Board.elementById.indexOf(data.id), 1); // Hapus objek dari local data for (var i = 0; Board.element.length; i++) { if (Board.element[i].id == data.id)

Board.element.splice(i, 1); } });


104


BAB 4 IMPLEMENTASI DAN PENGUJIAN

Recommend Documents