1 BAB IV KONSTRUKSI DAN PENGUJIAN 4.1 Konstruksi Pada tahap ini penulis melakukan pembangunan sistem aplikasi yang telah dirancang sebelumnya. Pembang...
4.1 Konstruksi Pada tahap ini penulis melakukan pembangunan sistem aplikasi yang telah dirancang sebelumnya. Pembangunan aplikasi merupakan implementasi dari proses-proses yang ada didalam sistem. Implementasi yang akan dijelaskan adalah implementasi halaman depan dan implementasi halaman aplikasi. 4.1.1 Implementasi Halaman Depan Halaman depan adalah halaman yang pertama kali muncul ketika mengakses aplikasi komik strip Punakawan. Halaman ini menampilkan informasi singkat mengenai aplikasi. Dalam halaman ini terdapat informasi berupa tentang aplikasi, fitur-fitur yang ada pada aplikasi, dan informasi mengenai tokoh Punakawan yang berisi tentang deskripsi singkat dari masing-masing tokoh, dan disertai gambarnya. Untuk menampilkan informasi yang tersedia, pengguna mengklik informasi yang dipilih pada navbar halaman depan. Sebagai contoh jika pengguna ingin mengetahui tentang tokoh Punakawan beserta deskrispinya, pengguna mengklik menu karakter yang ada di atas halaman aplikasi, kemudian sistem secara otomatis akan scroll ke bagian karakter. Cara yang sama berlaku untuk semua menu yang ada pada halaman depan.
Potongan kode diatas menjelaskan bagaimana sistem secara otomatis scroll ke bagian karakter ketika pengguna mengklik menu karakter. Berikut adalah tampilan antar muka halaman depan.
39 http://digilib.mercubuana.ac.id/
40
Gambar 4.1 Halaman Utama
4.1.2 Implementasi Halaman Aplikasi Halaman aplikasi merupakan halaman yang digunakan untuk membuat komik. Pada halaman ini, terdapat dua proses, yaitu proses pembuatan panel komik dan pembuatan komik. Implementasi dari fungsi-fungsi yang tersedia menggunakan javascript library, yaitu Jquery dan FabricJS, agar lebih cepat, efisien, dan mudah dalam identifikasi ketika ada kesalahan dalam pembuatan. Manipulasi objek dilakukan di canvas yang merupakan salah satu element pada HTML5. Implementasi halaman ini dibagi ke beberapa bagian, yaitu panel komik, gambar, teks, dan keluaran. 1. Panel Komik Dalam panel komik, terdapat fungsi untuk menambahkan panel, mengganti ukuran panel, dan menghapus panel. Untuk menambahkan panel komik, pengguna mengklik tombol yang berupa angka. Angka yang tersedia yaitu 1 sampai 9, karena jumlah maksimal panel komik yang dapat ditambahkan dalam aplikasi ini yaitu 9 buah. Sebagai contoh, panel yang akan ditambahkan berjumlah 3 buah, maka tombol yang diklik adalah tombol dengan angka 3.
http://digilib.mercubuana.ac.id/
41
Setelah diklik, kemudian sistem memanggil fungsi pada Javasript sesuai dengan id yang tercantum pada tombol terpilih. Jika yang dipilih adalah tombol 3, maka id yang dipanggil adalah 1bx3k . var clipRect3 = new fabric.Rect({ originX: 'left', originY: 'top', left: 450, top: 150, width: 195, height: 195, fill: 'white', stroke: '#000', strokeWidth: 2, selectable: true, hasControls: false, className: 'comic-window', rectId: 'rectThree' }); clipRect3.set({ clipFor: clipRect3.rectId });
Potongan kode diatas merupakan potongan kode untuk membuat variabel berupa panel komik. Panel komik berupa persegi dengan nilai-nilai yang telah dideklarasikan, antara lain posisi, ukuran panjang dan lebar, warna, dan garis, mempunyai hak untuk terpilih, tidak mempunyai kontrol, mempunyai class dan id.. Setelah variabel dibuat dan dideklarasikan, maka untuk menambahkan ke dalam canvas, perlu pemanggilan. Potongan kode untuk menambahkan ke dalam canvas adalah sebagai berikut. $('#1bx3k').click(function (){ canvas.clear(); canvas.add(clipRect1); canvas.add(clipRect2); canvas.add(clipRect3); canvas.remove(clipRect4); canvas.remove(clipRect5); canvas.remove(clipRect6); canvas.remove(clipRect7); canvas.remove(clipRect8); canvas.remove(clipRect9); canvas.renderAll(); });
Penjelasan pada potongan kode diatas, karena user memilih untuk membuat tiga buah panel komik, maka yang ditambahkan hanya tiga buah panel, sedangkan panel 4 sampai 9 terhapus. Hal yang sama berlaku untuk jumlah panel lain yang
http://digilib.mercubuana.ac.id/
42
diinginkan. Hasil implementasi pembuatan panel komik dapat dilihat pada gambar 4.2. 2. Gambar Pada aplikasi ini, terdapat fungsi untuk menambahkan gambar, modifikasi gambar yang berupa ubah ukuran, posisi, rotasi, dan juga terdapat fungsi untuk menghapus gambar. Gambar punakawan dan balon komik yang terdapat pada aplikasi ini dibuat sendiri oleh penulis menggunakan perangkat lunak Adobe Illustrator CC. Format gambar yang tersedia dalam ekstensi SVG atau gambar vektor, agar gambar yang digunakan tidak pecah atau buram ketika diperbesar ukurannya. Untuk menambahkan gambar kedalam elemen canvas, pengguna aplikasi mengklik gambar yang dipilih kemudian sistem akan menambahkan sesuai dengan permintaan dengan cara mengambil sumber gambar pada direktori aplikasi.
Sebelum ditambahkan, pengguna terlebih dahulu memilih panel mana yang akan ditambahkan, kemudian sistem akan memasukkan gambar terpilih ke dalam panel tersebut. Gambar yang ditambahkan ke canvas mempunyai nilai dan property seperti yang tertera pada potongan kode. Objek gambar mempunyai nilai hasControls: true,
yaitu berarti objek ini memiliki hak untuk diubah posisi,
ukuran, serta sudut kemiringannya. Hasil implementasi penambahan gambar dapat dilihat pada gambar 4.4. function drawObject(imageSrc) { fabric.Image.fromURL(imageSrc, function (gambar) { var clipRect = findByClipName(currentRect); gambar.set({ left: clipRect.left+10,
3. Teks Pada aplikasi komik-strip, teks memiliki fungsi antara lain menambah teks, modifikasi teks berupa ubah isi teks, posisi, ukuran, jenis, serta kerataan, dan juga menghapus teks. Untuk menambah teks ke canvas, prosesnya sama dengan gambar, yaitu pengguna harus memilih salah satu panel terlebih dahulu. Pengguna mengisi teks yang akan ditambahkan pada form tambah teks, kemudian mengklik tombol tambah teks. Teks mempunyai nilai default sebagai berikut : var text = new fabric.IText($('#inputteks').val(), { left: clipRect.left+10, top: clipRect.top+10, textAlign: 'center', fontFamily: 'SF Toontime', lineHeight: 1, fontSize : 15, fill: 'black', lockScalingX: true, lockScalingY: true, hasControls: false, clipName: currentRect });
Berbeda dengan gambar, teks mempunyai nilai hasControls: false, sehingga teks dalam kondisi default, tidak bisa diubah ukurannya serta tidak bisa dirotasi. Untuk mengganti nilai, pengguna hanya bisa memilih dari pilihan nilai yang tersedia. Pilihan yang tersedia yaitu hanya mengganti ukuran teks. Hasil implementasi dapat dilihat pada gambar 4.5. if (activeObject && activeObject.type === 'i-text') { if($(this).val() == "10"){ activeObject.set({fontSize: 12}); canvas.renderAll(); } else if ($(this).val() == "15"){ activeObject.set({fontSize: 15}); canvas.renderAll(); }
http://digilib.mercubuana.ac.id/
44
4. Keluaran Ada tiga jenis keluaran yang dihasilkan pada aplikasi ini, yaitu gambar dengan ekstensi PNG, dokumen dengan ekstensi PDF, serta hasil cetakan berbentuk fisik melalui printer. Alur kerjanya yaitu hal yang pertama kali dilakukan oleh sistem yaitu menon-aktifkan semua objek yang ada pada canvas, kemudian sistem mengubah latar belakang canvas menjadi warna putih jika sebelumnya pengguna memutuskan untuk mengaktifkan fitur grid. Untuk mengkonversi kedalam ekstensi PNG, setelah pengguna mengklik tombol simpan ke PNG, sistem akan mengkonversi canvas ke data URL yang baru untuk dijadikan file dengan ekstensi PNG yang sifatnya temporary (sementara). Kemudian sistem secara otomatis mengunduh hasil konversi ke local drive perangkat yang digunakan. Berikut potongan kode untuk mengkonversi ke PNG var imageSaver = document.getElementById('imageSaver'); imageSaver.addEventListener('click', saveImage, false); function saveImage(e) { resetAllRects(); canvas.deactivateAll(); canvas.isDrawingMode = false; canvas.backgroundColor = "white"; canvas.renderAll(); this.href = canvas.toDataURL({ format: 'jpeg', quality: 0.8 }); this.download = 'punakawan.png' }
Untuk mengkonversi kedalam format PDF, menggunakan bantuan javascript library yang lain yaitu jspdf.js. Prosesnya hampir sama dengan konversi kedalam format PNG. Hanya ada perbedaan dalam ukuran kertas hasil konversi. Berikut potongan kode untuk mengkonversi ke PDF. var base64 = $('canvas').get(0).toDataURL('image/jpeg'); var doc = new jsPDF('portrait'); doc.addImage(base64, 'JPEG', 0, 0, 210, 280); var data = doc.output(); var buffer = new ArrayBuffer(data.length); var array = new Uint8Array(buffer); for (var i = 0; i < data.length; i++) { array[i] = data.charCodeAt(i); } var blob = new Blob( [array],
Untuk fungsi mencetak menggunakan printer, menyesuaikan dengan browser yang digunakan. Dikarenakan penulisan kode untuk mencetak memanggil fitur yang tersedia pada browser. Berikut potongan kode untuk mencetak. canvas.renderAll(); window.print(); });
Gambar 4.2 Halaman Aplikasi Membuat Panel
http://digilib.mercubuana.ac.id/
46
Gambar 4.3 Tampilan Awal Halaman Membuat Komik
Gambar 4.4 Tampilan Halaman Aplikasi Dengan Objek Berupa Gambar
Gambar 4.5 Tampilan Halaman Aplikasi Dengan Objek Berupa Teks
http://digilib.mercubuana.ac.id/
47
4.2 Pengujian Proses pengujian ini di lakukan dengan cara mengakses halaman aplikasi pada perangkat. Dalam hal ini penulis akan menggunakan metode pengujian aplikasi blackbox untuk melihat apakah fungsi-fungsi pada aplikasi berjalan dengan baik atau tidak, dan juga mengetahui di bagian mana saja terdapat kesalahan pada aplikasi ini untuk segera di perbaiki oleh penulis. 4.2.1 Lingkungan Pengujian Aplikasi Komik-Strip Punakawan diakses melalui browser yang telah terinstal pada perangkat notebook yang digunakan. Berikut ini adalah spesifikasi dari perangkat : 1. Spesifikasi Notebook : a. Processor Intel® Core
i3
b. NVIDIA GeForce GT 630M 1 GB c. Memory 2 GB DDR3 d. Hard Drive 500 GB e. Display 14 inches, Max. Resolution 1366 x 768 f. Microsoft Windows 8.1 64-bit g. XAMPP v3.2.1 h. Google Chrome Version 43 Penulis memilih menggunakan web browser Google Chrome versi 43 berdasarkan pengujian dan penilaian yang dilakukan oleh situs html5test.com, yaitu sebuah situs yang menguji dan menilai kinerja dan dukungan web browser terhadap elemen-elemen HTML5. Berdasarkan situs html5test.com yang diakses pada 27 Mei 2015, Google Chrome versi 43 mendapatkan nilai tertinggi, yang kemudian menjadi dasar keputusan yang diambil oleh penulis dalam menetapkan web browser mana yang akan dipilih dalam pengujian. Berikut adalah skor dukungan web browser terhadap elemen HTML5 :
http://digilib.mercubuana.ac.id/
48
Gambar 4.6 Skor Web Browser Terpopuler pada Situs www.html5test.com
4.2.2 Pengujian Black Box Sesuai dengan uraian yang telah dibahas sebelumnya, metode yang digunakan dalam pengujian adalah blackbox testing. Black box testing yaitu melakukan pengujian tanpa melihat source code aplikasi dan pengujian dijalankan oleh tester atau pengguna untuk mengamati aplikasi apakah telah berhasil menambahkan masukan (input), memproses, dan menghasilkan keluaran (output). (output) Pengujian dilakukan melalui perangkat notebook dengan spesifikasi yang telah dijelaskan pada bahasan sebelumnya. Item yang diuji antara lain adalah sebagai berikut :
Tabel 4.1 Hasil Pengujian dengan Metode Black Box
No.
1.
2.
3.
4.
Item Yang Diuji Tambah panel
Sifat Kegiatan
Cara Pengujian
Hasil Yang Diharapkan
Normal
Mengklik tombol jumlah panel yang diinginkan
Panel ditambah ke canvas sesuai jumlah yang dipilih
Sesuai
Normal
Memilih salah satu panel kemudian ganti ukurannya.
Ukuran panel terpilih berubah sesuai ukuran yang dipilih.
Sesuai
Tidak normal
Ganti ukuran tanpa ada panel yang dipilih.
Muncul pesan untuk tambah/pilih panel.
Sesuai
Normal
Pilih panel kemudian tahan dan geser ke posisi yang diinginkan
Panel berubah posisi.
Sesuai
Normal
Pilih salah satu panel kemudian klik tombol hapus panel.
Panel terpilih dihapus
Sesuai
Tidak normal
Klik tombol hapus tanpa ada panel terpilih
Muncul pesan untuk pilih panel.
Sesuai
Ganti ukuran panel
Ubah posisi panel
Hapus panel
http://digilib.mercubuana.ac.id/
Hasil Pengujian
49
Tabel 4.1 (Lanjutan) Hasil Pengujian dengan Metode Black Box No.
5.
Item Yang Diuji
Tambah gambar
Sifat Kegiatan Normal
Pilih salah satu panel kemudian klik gambar yang ingin ditambahkan.
Tidak normal
Klik salah satu gambar tanpa memilih panel
Normal
Klik tombol putar gambar
6.
Balik gambar
7.
Ubah posisi gambar
Normal
8.
Ubah ukuran gambar
Normal
9.
Rotasi gambar
Normal
Normal
10.
Tambah teks
Tidak normal Tidak normal
11.
Ubah posisi teks
12.
Ubah ukuran teks
13.
Ubah isi teks
14.
Ubah jenis teks
15.
Ubah kerataan teks
Cara Pengujian
Normal
Normal
Normal
Normal
Normal
Pilih salah satu gambar kemudian tahan dan geser ke posisi yang diinginkan Pilih salah satu gambar kemudian tahan dan tarik point yang ada pada sisi gambar. Pilih salah satu gambar kemudian tahan dan geser point untuk rotasi. Pilih panel kemudian isi form tambah teks kemudian klik tombol tambah Tidak memilih panel sebelum menambah teks Tidak mengisi teks pada form tambah teks kemudian klik tombol tambah Pilih salah satu teks kemudian tahan dan geser ke posisi yang diinginkan Pilih salah satu teks kemudian ganti dengan nilai yang baru Pilih salah satu teks kemudian isi form ubah teks dengan nilai yang baru Pilih salah satu teks kemudian klik tombol jenis teks (bold, italic, underline) yang diinginkan Pilih salah satu teks kemudian klik tombol kerataan teks (kiri, tengah, kanan) yang diinginkan
Hasil Yang Diharapkan Gambar ditambahkan ke panel terpilih Muncul pesan untuk pilih panel. Pilihan gambar yang ada di dalam menu berganti secara horizontal.
Hasil Pengujian Sesuai Sesuai
Sesuai
Gambar berubah posisi
Sesuai
Ukuran gambar berubah
Sesuai
Gambar berotasi sesuai sudut yang diinginkan.
Sesuai
Teks ditambahkan ke panel terpilih
Sesuai
Muncul pesan untuk pilih panel.
Sesuai
Tidak ada teks yang ditambahkan.
Sesuai
Teks berubah posisi
Sesuai
Ukuran teks berubah sesuai dengan nilai yang dipilih.
Sesuai
Isi teks berubah sesuai dengan nilai yang baru
Sesuai
Jenis teks berubah sesuai dengan tombol yang dipilih.
Sesuai
Kerataan teks berubah sesuai dengan tombol yang dipilih.
Sesuai
http://digilib.mercubuana.ac.id/
50
Tabel 4.1 (Lanjutan) Hasil Pengujian dengan Metode Black Box No.
Item Yang Diuji
16.
Hapus objek
Normal
16.
Hapus objek
Normal
17.
Bring to front
18.
19.
20.
Komik baru
Grid
Keluaran (output)
Sifat Kegiatan
Cara Pengujian Pilih objek (gambar atau teks) kemudian klik tombol hapus Pilih objek (gambar atau teks) kemudian klik tombol hapus
Normal
Pilih objek (gambar atau teks) kemudian klik tombol bring to front
Normal
Mengklik tombol komik baru, kemudian pilih ya.
Tidak normal
Mengklik tombol komik baru, kemudian pilih tidak.
Normal
Mengklik tombol grid
Normal
Mengklik tombol grid
Normal
Klik tombol simpan ke pdf
Normal
Klik tombol simpan ke png
Normal
Klik tombol cetak
Tidak normal
Klik tombol cetak, tetapi printer tidak terdeteksi
Hasil Yang Diharapkan
Hasil Pengujian
Objek terhapus
Sesuai
Objek terhapus
Sesuai
Objek berpindah di posisi paling atas diantara objek lainnya. Membuat komik baru Gagal membuat komik baru, dan melanjutkan proses yang berjalan. Menampilkan grid Menyembunyikan grid Mengunduh ke dalam format pdf sesuai dengan isi canvas Mengunduh ke dalam format png sesuai dengan isi canvas Mencetak sesuai dengan isi canvas Gagal mencetak.
Sesuai
Sesuai
Sesuai Sesuai Sesuai
Sesuai
Sesuai
Sesuai Sesuai
4.2.3 Hasil Pengujian Berikut ini adalah beberapa hasil dari pengujian yang telah dilakukan sebelumnya, antara lain pengolahan objek berupa panel, gambar, teks serta hasil konversi canvas ke PNG dan kemampuan browser dalam mengolah grafis 2 dimensi pada canvas. Berdasarkan uraian sebelumnya, web browser yang digunakan adalah Google Chrome versi 43. Sesuai dengan nilai yang diberikan oleh situs html5test.com (lihat Gambar 4.7), browser ini telah mendukung fitur text support, path support, dan image exports format to png, sehingga fungsi-fungsi pada aplikasi berjalan dengan baik.
http://digilib.mercubuana.ac.id/
51
Gambar 4.7 Hasil Pengujian Fungsi Grafis 2D pada Google Chrome Versi 43 (Sumber www.html5test.com) Fungsi pengolahan objek berupa panel komik yang telah diuraikan pada pengujian black box berjalan dengan baik. Hasil pengujian dapat dilihat pada Gambar 4.8.
Gambar 4.8 Hasil Pengujian Aplikasi Dengan Objek Berupa Panel
http://digilib.mercubuana.ac.id/
52
Untuk fungsi-fungsi yang ada pada objek berupa gambar dan teks juga berjalan dengan baik. Hasil pengujian dapat dilihat pada Gambar 4.9 untuk objek berupa gambar dan Gambar 4.10 untuk objek berupa teks.
Gambar 4.9 Hasil Pengujian Aplikasi Dengan Objek Berupa Gambar
Gambar 4.10 Hasil Pengujian Aplikasi Dengan Objek Berupa Teks
http://digilib.mercubuana.ac.id/
53
Sedangkan, hasil pengujian untuk konversi objek yang ada pada canvas ke dokumen dengan ekstensi PNG yang dapat dilihat pada Gambar 4.11 juga berfungsi dengan baik.
Gambar 4.11 Hasil Pengujian Canvas yang Telah Dikonversi ke PNG
4.2.4 Analisis Hasil Pengujian Berikut ini adalah analisis dari aplikasi Komik Strip Punakawan yang diakses melalui web browser pada notebook dengan spesifikasi yang telah dibahas sebelumnya. Hasil pengujian meliputi tampilan aplikasi dan semua fungsi apakah sudah berjalan dengan baik. Hasil pengujiannya adalah sebagai berikut : 1. Fungsi-fungsi yang ada dalam penambahan objek panel serta fungsi panel lainnya seperti modifikasi panel serta menghapus panel berjalan dengan baik. Perancangan antar muka yang baik dimaksudkan untuk memudahkan pengguna, dengan properti serta nilai ukuran yang ada sesuai dengan standar pembuatan panel komik. Pengguna juga dapat memanfaatkan fitur grid untuk tata letak panel agar komik yang dihasilkan rapih dan sesuai prosedur. 2. Pengguna juga bisa mengatur objek berupa gambar yang memiliki fungsi hampir sama dengan manipulasi objek pada panel komik. Hanya saja ada keterbatasan pada objek gambar karena gambar yang disediakan yaitu 9 buah,
http://digilib.mercubuana.ac.id/
54
dengan rincian 4 buah gambar punakawan dan 5 buah untuk gambar balon komik. Ekstensi gambar yang digunakan adalah SVG agar gambar tidak pecah ketika diganti ukurannya. 3. Fungsi pada objek berupa teks juga berjalan dengan baik. Penulis menggunakan 2 jenis tipografi yang berbeda untuk judul komik serta konten komik. 4. Fungsi keluaran berupa konversi kedalam format dengan ekstensi PNG dan PDF pun berjalan dengan baik. Hanya ada kendala ketika dikonversi, resolusi yang dihasilkan kecil sehingga kualitasnya masih jelek. 5. Aplikasi berjalan dengan bai pada web browser Google Chrome versi 43 karena browser tersebut telah memiliki fitur yang berguna untuk manipulasi objek 2 dimensi pada elemen canvas di HTML5.
.on('click', function (){ if(!currentRect) { return swal()