BAB IV IMPLEMENTASI DAN PENGUJIAN Langkah selanjutnya setelah melakukan analisa dan perancangan adalah pengkodean (implementasi) dan pengujian, implementasi merupakan perancangan aplikasi yang dapat dimengerti oleh mesin dengan spesifikasi perangkat lunak dan perangkat keras yang digunakan. Tahap pengujian terfokus pada logika internal perangkat lunak yang memastikan bahwa seluruh pernyataan telah disetujui. Fungsi eksternal yaitu pengujian yang dilakukan untuk kesalahan-kesalahan dan memastikan bahwa masukan yang didefinisikan menghasilkan keluaran yang diinginkan. 4.1 Implementasi Tampilan pertama kali yang muncul ketika aplikasi dijalankan adalah layar aplikasi form guru. Layar form guruini memiliki menu file dan about. Pada menu file terdapat sub menu lagi yaitu soal baru,simpan dan keluar. Menu about merupakan menu yang akan menampilkan form tentang aplikasi virtual mewarnai anak tk. Dan menu keluar untuk menutup aplikasi. Untuk sub menu soal baru dari menu file apabila dipilih akan menampilkan list soal gambar. Sub menu simpan merupakan menu untuk menyimpan gambar yang telah diberi warna. Tampilan aplikasi kedua adalah tampilan layar aplikasi form murid. Pada layar ini terdapat menu file, about, server, IP lokal dan tombol connect. Tombol connect berfungsi untuk menghubungkan aplikasi ke server. Apabila telah terhubung maka tampilan layar aplikasi murid akan menampilkan gambar soal. Selain itu layar form murid pada samping kiri terdapat menu warna, tombol reset, tombol undo, tombol simpan, tombol exit dan tombol selesai. dan pada samping kanannya terdapat layar gambar yang ditangkap oleh Webcam dan kolom untuk melakukan Chatting dengan guru. 33
34 4.1.1 Kebutuhan Sistem Sistem akandiimplementasikan pada perangkat komputer, namun sebelumnya dilakukan pengembangan aplikasi pada komputer dengan bantuan 2 laptop atau komputer.spesifikasi lengkapnya sebagai berikut: 1. Kebutuhan perangkat keras : Prosesor Pentium IV 3.20 GHz Memori 1 GB Cakram keras (Harddisk) 32 GB Papan ketik (keyboard) dan tetikus (mouse) Monitor dengan resolusi 1024 x 768 pixel 2. Kebutuhan perangkat lunak : Sistem operasi Windows 7 Visual Studio 2012.Net Framework 4.0 4.1.2 Implementasi Program Implementasi dari keseluruhan sistem ini merupakan integrasi dari sistem yang terdiri dari : 1. Modul Guru yang berfungsi sebagai Server untuk melihat pewarnaan yang dilakukan murid secara real-time. 2. Modul Murid sebagai Client untuk melakukan pewarnaan pada Gambar yang dipilih oleh Guru. Implementasi sistem di atas menggunakan bahasa pemrograman Visual Basic yang dengan menggunakan IDE (Integrated Development Environment) Visual Studio 2012. Untuk dapat merekam gambar dari Webcam, penulis menggunakan library khusus.net yang bersifat terbuka (open source) yaituemgucv. Sedangkan untuk melakukan proses penerimaan dan pengiriman gambar hasil rekaman Emgu CV digunakan library TCPCam. Bab ini akan membahas tentang beberapa proses utama yang ada di sistem yang menjadi titik berat penulisan tugas akhir ini, antara lain : Progam Chat Program Menampilkan Video melalui Webcam
35 4.1.2.1 Program Menu Chat Guru dan murid dapat melakukan interaksi dengan saling mengirim teks. Untuk dapat saling mengirim teks guru terlebih dahulu menjalankan fungsi startserver() yang akan memulai proses pembuatan Socket sebagai Server sehingga siap menerima pesan (sebagai Listener) dari Client dengan parameter alamat IP dan port yang akan digunakan. Kemudian murid sebagai client melakukan connect ke Server. Sub parsedatastringandaction(byval message AsString) Dim strarray() AsString strarray = Split(message, "==") If strarray.length > 1 Then Dim muridid = strarray(0) Dim commandaction = strarray(1) (String.Compare(commandAction, "IP") = 0) Then 'Mengubah status Murid menjadi terhubung lalu mengaktifkan WecCam If ((String.Compare(muridId, "MURID1") = 0)) Then lblstatusmurid1.text = "Terhubung" lblstatusmurid1.forecolor = Color.Orange TabPage1.Text = "Murid 1 (Terhubung)" startstopvideo(strarray(2), PORT_MURID_1_B) ElseIf ((String.Compare(muridId, "MURID2") = 0)) Then lblstatusmurid2.text = "Terhubung" lblstatusmurid2.forecolor = Color.Orange TabPage2.Text = "Murid 2 (Terhubung)" startstopvideo(strarray(2), PORT_KE_MURID_2) EndIf EndSub Gambar 4.1 Potongan Program Fungsi parsedatastringandaction Pesan-pesan dari client atau murid ini digunakan untuk berkomunikasi antara aplikasi Guru dan aplikasi Murid sehingga kegiatan pada aplikasi Murid secara otomatis dilakukan pula pada aplikasi Guru. Format pesan ini dipisahkan dengan karakter sama dengan ( = ) sebanyak dua kali untuk memisahkan parameter. Berikut ini adalah format-format dari pesan untuk melakukan komunikasi dari aplikasi Guru kepada Murid atau sebaliknya : Melakukan Interaksiantara Guru dengan Murid Melalui Teks atau Chat: Format: [ID_Murid]==CHAT==[Chat message]
36 Misal : MURID1==CHAT==halo world Maksud : Murid 1 meminta aplikasi guru menjalankan fungsi Chat dengan isi pesan Chat halo world Untuk melakukan pengiriman pesan dari Guru ke Murid digunakan fungsi submit Chat dengan parameter Chat Message bertipe String kepada Client yang dituju, misal Murid 1 PrivateSub submitchat() If (TextBoxChatMurid1.Text <>"") Then Dim ChatMessage AsString = NewString("") ChatMessage = "Guru : "& TextBoxChatMurid1.Text RichTextBoxMurid1.AppendText(ChatMessage &Environment.NewLine) RichTextBoxMurid1.ScrollToCaret() TextBoxChatMurid1.Text = "" Dim formatstring AsString = NewString("") formatstring = "MURID1==CHAT=="& ChatMessage xupdate(formatstring, True) EndIf EndSub Gambar 4.2 Potongan Program Fungsi submitchat Guru Untuk melakukan pengiriman pesan dari Murid ke Guru digunakan fungsi submitchat dengan mengirim parameter ChatMessage ke server. PrivateSub submitchat() If (TextBoxChat.Text <>"") Then Dim ChatMessage = "Murid 1 : "& TextBoxChat.Text TextBoxChat.Text = "" dosenddatatoserver("murid1==chat=="& ChatMessage) Console.WriteLine("==ChatMessage=="& ChatMessage) EndIf EndSub Gambar 4.3 Potongan Program Fungsi submitchat Murid Message Chat yang dikirim dari guru akan diterima murid berupa formatstring yang nantinya akan dipisahkan dari karakter sama dengan karakter sama dengan ( = ) menjadi tiga string array.string array pertama adalah nama client yang menerima, string array kedua adalah type format string yang dikirim akan di compare dengan kondisi if-else apabila kondisi terpenuhi maka program
37 akan menampilkan string array ketiga yaitu isi dari pesan. Berikut fungsi xupdate yang akan menjalankan pesan yang diterima client. 4.1.2.2 Program Menampilkan Video melalui Webcam Untuk mempermudah komunikasi secara visual antara guru dan murid, maka dalam program ini ditambahkan pula fitur untuk menampilkan video hasil tangkapan dari Webcam guru dan murid. Secara teknis, program ini menangkap gambar dari Webcam dan menampilkan pada picturebox lalu mengirimkan (stream) gambar ke lawan menggunakan teknik socket, kemudian pada lawan menampilkan kembali hasil stream menjadi gambar pada picturebox. 4.1.2.2.1 Program menampilkan Video pada Guru Ketika membuka form pertama kali, program menjalankan fungsi frmmain_load yang di dalamnya terdapat baris untuk memulai perekaman gambarmelalui fungsi QueryFramepadakelas Emgu.CV.Image ke dalam PictureBoxsehingga gambar pada PictureBoxini siap dikirimkan (stream) dengan menggunakan objek ClientVideoyaitu dengan instantiate TCPCam.Client. Kemudian setelah Murid sukses melakukan koneksi dengan Guru, maka dilakukan Client Video.Connect dengan paramater alamat IP murid dan port yang digunakan untuk memulai eksekusi pengiriman gambar ke Murid. Kemudian untuk menangkap gambar yang dikirimkan oleh murid, digunakan objek Host dengan instantiate TCP Cam.Host dengan maksud menyiapkan program agar dapat menerima stream dari Murid. Objek Host memerlukan dua parameter yaitu PictureBox untuk menampilkan gambar hasil dari pengiriman stream oleh murid dan port yang digunakan untuk stream (port yang digunakan oleh Guru dan murid harus sama).
Dim LocalHostaddress AsString = System.Net.Dns.GetHostByName(localhost).AddressList(0).ToString()
45 selanjutnya akan diproses sesuai dengan kebutuhan, apakah program menghasilkan keluaran yang sesuai dengan fungsi dari aplikasi. 4.2.1 Lingkungan pengujian Pada pengujian ini akandilakukan dengan dua perangkat komputer. Kondisi tempat pengujian juga dilakukan pada jaringan yang sama melalui Wifi. Spesifikasi perangkat-perangkat yang digunakan untuk melakukan pengujian sistem adalah sebagai berikut : 1. Komputer satu dengan spesifikasi : a. Operating System Windows 7 32 bit b. Prosesor Pentium IV 3.20 GHz c. Memori 1 GB d. Cakram keras (Harddisk) 32 GB e. Papan ketik (keyboard) dan tetikus (mouse) f. Monitor dengan resolusi 1024 x 768 pixel g. Wi-fi connection 2. Komputer dua dengan spesifikasi : a. Operating System Windows 7 32 bit b. Prosesor Pentium IV 3.20 GHz c. Memori 1 GB d. Cakram keras (Harddisk) 32 GB e. Papan ketik (keyboard) dan tetikus (mouse) f. Monitor dengan resolusi 1024 x 768 pixel g. Wi-fi connection 4.2.2 Pengujian Tampilan pada Menu-Menu Utama Pengujian ini dilakukan terhadap menu-menu yang terdapat pada aplikasi, pada skenario ini penulis menggunakan Blackbox Testing. Pengujian dengan metode ini dilakukan dengan menguji item Webcam dimana Guru dan Murid dapat saling melihat gambar yang ditangkap oleh Webcam masing-masing. Kemudian dilakukan pengujian pada item Chatting dimana Guru dan Murid dapat
46 saling menerima dan megirim pesan berbasis teks. selengkapnya dapat dilihat pada tabel 4.1. Rencana pengujian Tabel 4.1 Rencana Pengujian Aplikasi Virtual Mewarnai Anak TK Item Uji Detail Pengujian Jenis Pengujian Webcam Menangkap gambar pada Webcam Guru Black-box Melihat hasil gambar hasil Webcam Murid di Guru Menangkap gambar pada Webcam Murid Melihat hasil gambar hasil Webcam Guru di Murid Black-box Black-box Black-box Chat Mengirim pesan dari Guru ke Murid Black-box Mengirim pesan dari Murid ke Guru Guru menerima pesan dari Murid Murid menerima pesan dari Guru Black-box Black-box Black-box 4.2.3 Kasus dan Hasil Pengujian Berdasarkan rencana pengujian, maka dapat dilakukan pengujian pada aplikasi Virtual Mewarnai Anak TK sebagai berikut. 1. Pengujian Webcam Pengujian ini dibagi menjadi dua, yaitu pengujian penangkapan citra gambar oleh Webcam guru lalu menampilkannya pada Murid dan penangkapan citra gambar oleh Webcam murid lalu menampilkannya pada Guru. a. Pengujian Webcam pada Guru dijelaskan pada tabel 4.2 Tabel 4.2 Pengujian Webcam Guru Antarmuka yang diuji Bagian antarmuka yang diuji Guru Gambar yang menampilkan Webcam Guru Status aplikasi Mengaktifkan Webcam dan menampilkan gambar Guru (Lihat Hasil Pengujian OK
Guru Menerima gambar Murid gambar 4.17) Guru dapat melihat gambar hasil perekaman oleh Webcam Murid (Lihat gambar 4.17) OK Antarmuka yang diuji Bagian antarmuka yang diuji Murid Gambar yang menampilkan Webcam Murid Murid Menerima gambar Guru Status aplikasi Mengaktifkan Webcam dan menampilkan gambar Murid (Lihat gambar 4.18) Murid dapat melihat gambar hasil perekaman oleh Webcam Guru Hasil Pengujian OK OK
Antarmuka yang diuji Guru Guru Bagian antarmuka yang diuji Pengiriman pesan teks Penerimaan pesan teks Status aplikasi Guru dapat mengirimkan pesan teks ke Murid (Lihat gambar 4.17) Guru dapat menampilkan percakapan Chat Guru dan Murid (Lihat gambar 4.18) Hasil Pengujian Lihat gambar 4.17 Lihat gambar 4.18
Antarmuka yang diuji Murid Murid Bagian antarmuka yang diuji Pengiriman pesan teks Penerimaan pesan teks Status aplikasi Murid dapat mengirimkan pesan teks ke Guru (Lihat gambar 4.17) Murid dapat menampilkan percakapan Chat Murid dan Murid (Lihat gambar 4.18) Hasil Pengujian Lihat gambar 4.21 Lihat gambar 4.22