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 navbarhalaman 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.
<li class="page-scroll">
<a href="#karakter">Karakter</a> </li>
<div id="karakter" class="pad-section"> </div>
Potongan kode diatas menjelaskan bagaimana sistem secara otomatis scroll ke bagian karakter ketika pengguna mengklik menu karakter. Berikut adalah tampilan antar muka halaman depan.
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 navbarhalaman 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.
Gambar 4.1Halaman 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.
<button id="1bx3k">3</button>
Gambar 4.1Halaman Utama
4.1.2 Implementasi Halaman Aplikasi
Halaman aplikasi merupakan halaman yang digunakan untuk membuat 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, 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.
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 canvasadalah 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
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
. Setelah variabel dibuat dan dideklarasikan, maka untuk menambahkan ke canvas, perlu pemanggilan. Potongan kode untuk menambahkan ke dalam
adalah sebagai berikut.
$('#1bx3k').click(function (){ canvas.clear();
canvas.add(clipRect1); canvas.add(clipRect2);
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.
<div class="row menu">
<img src="img/semar.svg /> </div>
$('.menu > img').on('click', function (){ if(!currentRect) {
return swal("Perhatian", "Pilih salah satu panel terlebih dahulu", "warning");
}
drawObject(this.src); })
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,
vektor, agar gambar yang digunakan tidak pecah atau buram ketika diperbesar
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
<div class="row menu">
<img src="img/semar.svg />
$('.menu > img').on('click', function (){ if(!currentRect) {
return swal("Perhatian", "Pilih salah satu panel terlebih dahulu", "warning");
drawObject(this.src);
Sebelum ditambahkan, pengguna terlebih dahulu memilih panel mana yang akan ditambahkan, kemudian sistem akan memasukkan gambar terpilih ke dalam panel
top: clipRect.top+10, lockScalingFlip: true, centeredScaling: true, hasControls: true, clipName: currentRect, clipTo: function(ctx) {
return _.bind(clipByName, gambar)(ctx) } }); canvas.add(gambar.scale(0.5)); }); } 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 defaultsebagai 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(); }
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 defaultsebagai 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
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 canvasmenjadi 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 canvaske 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 libraryyang 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],
simpan ke PNG, sistem akan mengkonversi ke data URL yang baru untuk 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 yang lain yaitu jspdf.js. Prosesnya hampir sama dengan konversi kedalam
{type: 'application/pdf', encoding: 'raw'} ); saveAs(blob, 'draft.pdf'); canvas.backgroundColor = "rgba(0, 0, 0, 0)"; canvas.renderAll(); });
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.2Halaman Aplikasi Membuat Panel window.print();
Gambar 4.3Tampilan Awal Halaman Membuat Komik
Gambar 4.4 Tampilan Halaman Aplikasi Dengan Objek Berupa Gambar
Gambar 4.5 Tampilan Halaman Aplikasi Dengan Objek Berupa Teks
Gambar 4.3Tampilan Awal Halaman Membuat Komik
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 dukunganwebbrowser terhadap elemen HTML5 :
terinstal pada perangkat notebook yang digunakan. Berikut ini adalah spesifikasi dari perangkat :
1. Spesifikasi Notebook:
Processor Intel® Core i3 NVIDIA GeForce GT 630M 1 GB Memory 2 GB DDR3
Hard Drive 500 GB
Display 14 inches, Max. Resolution 1366 x 768 Microsoft Windows 8.1 64-bit
XAMPP v3.2.1
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
Gambar 4.6SkorWeb 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).
Pengujian dilakukan melalui perangkat notebook dengan spesifikasi yang telah dijelaskan pada bahasan sebelumnya. Item yang diuji antara lain adalah sebagai berikut :
Tabel 4.1Hasil Pengujian dengan Metode Black Box
No. Item Yang Diuji
Sifat
Kegiatan Cara Pengujian
Hasil Yang Diharapkan Hasil Pengujian 1. Tambah panel Normal
Mengklik tombol jumlah panel yang diinginkan
Panel ditambah ke
canvassesuai jumlah yang dipilih
Sesuai
2. Ganti ukuran panel
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 3. Ubah posisi panel Normal
Pilih panel kemudian tahan dan geser ke posisi yang diinginkan
Panel berubah
posisi. Sesuai
4. Hapus panel
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
digunakan dalam pengujian adalah blackbox testing. Black box testing melakukan pengujian tanpa melihat source code aplikasi dan pengujian dijalankan
atau pengguna untuk mengamati aplikasi apakah telah berhasil menambahkan masukan (input), memproses, dan menghasilkan keluaran (output)
Pengujian dilakukan melalui perangkat notebook dengan spesifikasi yang telah dijelaskan pada bahasan sebelumnya. Item yang diuji antara lain adalah sebagai berikut :
Hasil Pengujian dengan Metode Black Box
Item Yang Diuji
Sifat
Kegiatan Cara Pengujian
Hasil Yang
Diharapkan Pengujian
Normal Mengklik tombol jumlah panel yang diinginkan
Panel ditambah ke
canvassesuai jumlah yang dipilih
Sesuai
Normal
Memilih salah satu panel kemudian ganti
Ukuran panel terpilih berubah
Tabel 4.1 (Lanjutan) Hasil Pengujian dengan Metode Black Box
No. Item Yang Diuji
Sifat
Kegiatan Cara Pengujian
Hasil Yang Diharapkan Hasil Pengujian 5. Tambah gambar Normal
Pilih salah satu panel kemudian klik gambar yang ingin ditambahkan.
Gambar ditambahkan ke panel terpilih Sesuai Tidak normal
Klik salah satu gambar tanpa memilih panel
Muncul pesan
untuk pilih panel. Sesuai
6. Balik
gambar Normal
Klik tombol putar gambar
Pilihan gambar yang ada di dalam menu berganti secara horizontal.
Sesuai
7. Ubah posisi
gambar Normal
Pilih salah satu gambar kemudian tahan dan geser ke posisi yang diinginkan
Gambar berubah
posisi Sesuai
8. Ubah ukuran
gambar Normal
Pilih salah satu gambar kemudian tahan dan tarik
pointyang ada pada sisi gambar.
Ukuran gambar
berubah Sesuai
9. Rotasi
gambar Normal
Pilih salah satu gambar kemudian tahan dan geserpointuntuk rotasi.
Gambar berotasi sesuai sudut yang diinginkan.
Sesuai
10. Tambah teks
Normal
Pilih panel kemudian isi form tambah teks kemudian klik tombol tambah
Teks ditambahkan
ke panel terpilih Sesuai Tidak
normal
Tidak memilih panel sebelum menambah teks
Muncul pesan
untuk pilih panel. Sesuai Tidak
normal
Tidak mengisi teks pada form tambah teks kemudian klik tombol tambah
Tidak ada teks yang
ditambahkan. Sesuai
11. Ubah posisi
teks Normal
Pilih salah satu teks kemudian tahan dan geser ke posisi yang diinginkan
Teks berubah posisi Sesuai
12. Ubah ukuran
teks Normal
Pilih salah satu teks kemudian ganti dengan nilai yang baru
Ukuran teks berubah sesuai dengan nilai yang dipilih.
Sesuai
13. Ubah isi teks Normal
Pilih salah satu teks kemudian isi form ubah teks dengan nilai yang baru
Isi teks berubah sesuai dengan nilai yang baru
Sesuai
14. Ubah jenis
teks Normal
Pilih salah satu teks kemudian klik tombol jenis teks (bold, italic, underline)yang diinginkan
Jenis teks berubah sesuai dengan tombol yang dipilih.
Sesuai
15. Ubah
kerataan teks Normal
Pilih salah satu teks kemudian klik tombol kerataan teks (kiri, tengah, kanan) yang
Kerataan teks berubah sesuai dengan tombol yang dipilih. Sesuai Ubah posisi gambar Normal
kemudian tahan dan geser ke posisi yang diinginkan
Gambar berubah posisi
Ubah ukuran
gambar Normal
Pilih salah satu gambar kemudian tahan dan tarik
pointyang ada pada sisi gambar.
Ukuran gambar berubah Rotasi
gambar Normal
Pilih salah satu gambar kemudian tahan dan geserpointuntuk rotasi.
Gambar berotasi sesuai sudut yang diinginkan.
10. Tambah teks
Normal
Pilih panel kemudian isi form tambah teks kemudian klik tombol tambah
Teks ditambahkan ke panel terpilih Tidak
normal
Tidak memilih panel sebelum menambah teks
Muncul pesan untuk pilih panel. Tidak
normal
Tidak mengisi teks pada form tambah teks kemudian klik tombol tambah
Tidak ada teks yang ditambahkan.
Ubah posisi
teks Normal
Pilih salah satu teks kemudian tahan dan geser ke posisi yang diinginkan
Teks berubah posisi Sesuai
Ubah ukuran
teks Normal
Pilih salah satu teks kemudian ganti dengan
Ukuran teks berubah sesuai dengan nilai yang
Tabel 4.1 (Lanjutan) Hasil Pengujian dengan Metode Black Box
No. Item Yang Diuji
Sifat
Kegiatan Cara Pengujian
Hasil Yang Diharapkan
Hasil Pengujian
16. Hapus objek Normal
Pilih objek (gambar atau teks) kemudian klik tombol hapus
Objek terhapus Sesuai
16. Hapus objek Normal
Pilih objek (gambar atau teks) kemudian klik tombol hapus
Objek terhapus Sesuai
17. Bring to
front Normal
Pilih objek (gambar atau teks) kemudian klik tombolbring to front
Objek berpindah di posisi paling atas diantara objek lainnya.
Sesuai
18. Komik baru
Normal Mengklik tombol komik baru, kemudian pilih ya.
Membuat komik
baru Sesuai Tidak
normal
Mengklik tombol komik baru, kemudian pilih tidak.
Gagal membuat komik baru, dan melanjutkan proses yang berjalan.
Sesuai
19. Grid
Normal Mengklik tombolgrid Menampilkangrid Sesuai Normal Mengklik tombol grid Menyembunyikan
grid Sesuai
20. Keluaran (output)
Normal Klik tombol simpan ke pdf
Mengunduh ke dalam format pdf sesuai dengan isi
canvas
Sesuai
Normal Klik tombol simpan ke png
Mengunduh ke dalam format png sesuai dengan isi
canvas
Sesuai
Normal Klik tombol cetak Mencetak sesuai
dengan isi canvas Sesuai
Tidak normal
Klik tombol cetak, tetapi
printer tidak terdeteksi Gagal mencetak. 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), browserini telah mendukung fitur text support, path support, dan image exports format to png, sehingga fungsi-fungsi pada aplikasi berjalan dengan baik.
18. Komik baru
Normal
baru, kemudian pilih ya. baru Sesuai Tidak
normal
Mengklik tombol komik baru, kemudian pilih tidak.
Gagal membuat komik baru, dan melanjutkan proses yang berjalan.
Sesuai Normal Mengklik tombolgrid Menampilkangrid Sesuai Normal Mengklik tombol grid Menyembunyikan
grid Sesuai
Normal Klik tombol simpan ke pdf
Mengunduh ke dalam format pdf sesuai dengan isi
canvas
Sesuai
Normal Klik tombol simpan ke png
Mengunduh ke dalam format png sesuai dengan isi
canvas
Sesuai
Normal Klik tombol cetak Mencetak sesuai
dengan isi canvas Sesuai
Tidak normal
Klik tombol cetak, tetapi
printer tidak terdeteksi Gagal mencetak. Sesuai
4.2.3 Hasil Pengujian
Gambar 4.7Hasil 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.8Hasil Pengujian Aplikasi Dengan Objek Berupa Panel
Gambar 4.7Hasil 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.
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.9Hasil Pengujian Aplikasi Dengan Objek Berupa Gambar
Gambar 4.10Hasil Pengujian Aplikasi Dengan Objek Berupa Teks
Sedangkan, hasil pengujian untuk konversi objek yang ada pada canvaske dokumen dengan ekstensi PNG yang dapat dilihat pada Gambar 4.11 juga berfungsi dengan baik.
Gambar 4.11Hasil Pengujian Canvasyang Telah Dikonversi ke PNG
4.2.4 Analisis Hasil Pengujian
Berikut ini adalah analisis dari aplikasi Komik Strip Punakawan yang diakses melalui web browser padanotebookdengan 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,
Gambar 4.11Hasil Pengujian Canvasyang Telah Dikonversi ke PNG
4.2.4 Analisis Hasil Pengujian
Berikut ini adalah analisis dari aplikasi Komik Strip Punakawan yang diakses melalui web browser padanotebookdengan spesifikasi yang telah dibahas sebelumnya. Hasil pengujian meliputi tampilan aplikasi dan semua fungsi apakah sudah berjalan dengan baik. Hasil pengujiannya adalah sebagai berikut :
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 canvasdi HTML5.
5. Aplikasi berjalan dengan bai pada web browser Google Chrome versi 43 browser tersebut telah memiliki fitur yang berguna untuk manipulasi objek 2 dimensi pada elemen canvasdi HTML5.