Bab IV IMPLEMENTASI DAN PENGUJIAN
4.1
Implementasi Aplikasi Pada tahap ini penulis akan melakukan implementasi dan pengujian aplikasi
simulasi pembelajaran struktur data materi queue. Pada tahapan implementasi terdapat dua cakupan yaitu spesifikasi kebutuhan sistem yang meliputi perangkat keras, perangkat lunak dan implementasi pendukung yaitu desain antarmuka, proses koding.
4.1.1 Kebutuhan perangkat keras Dalam membuat aplikasi simulasi pembelajaran struktur data materi queue, spesifikasi perangkat keras yang dibutuhkan sebagai berikut : a. Processor Core 2 duo b. RAM 2 GB c. VGA 512 MB d. Hardisk 250 GB
4.1.2 Kebutuhan perangkat lunak Pembuatan aplikasi simulasi pembelajaran struktur data materi queue, adapun perangkat lunak yang dibutuhkan sebagai berikut : a. Operating System Windows 7 b. Adobe Flash CS3 c. Adobe Ilustrator
4.2
Pembuatan bahan Pada tahap ini penulis membuat komponen-komponen yang diperlukan oleh
aplikasi simulasi pembelajaran struktur data materi queue yaitu berupa teks, gambar, suara, animasi dan tombol-tombol navigasi.
38
39
4.2.1 Teks Pada teks, penulis menggunakan materi dan latihan yang diperoleh dari berbagai jenis buku struktur data yang merupakan buku panduan penulis.
Gambar 4.1 Teks Materi
4.2.2 Gambar Pada gambar, penulis membuat gambar dan mengedit gambar menggunakan Adobe Flash CS3 dan Adobe Ilustrator serta memperoleh gambar lainnya dari internet.
Gambar 4.2 Halaman Menu Awal
40
Gambar 4.3 Halaman Menu
4.2.3 Suara Suara yang digunakan pada aplikasi ini adalah suara lagu atau musik yang ditempatkan pada tombol-tombol navigasi.
4.2.4 Animasi Penulis menggunakan animasi pada aplikasi ini dan animasinya dibuat menggunakan Adobe Flash CS3.
Gambar 4.4 Animasi Orang
41
4.2.5 Tombol Navigasi Penulis menggunakan tombol navigasi yang berfungsi sebagai link untuk menghubungkan antara scene dan frame. Tombol navigasi ini dibuat sendiri oleh penulis menggunakan Adobe Flash CS3.
Tabel 4.1 Tombol Navigasi No 1.
Gambar
Keterangan Terdapat tombol-tombol yang memiliki fungsi masing-masing. Tombol materi untuk ke halaman materi, tombol latihan untuk ke halaman latihan, tombol profil untuk ke halaman profil, tombol keluar untuk keluar dari aplikasi tersebut.
3.
Terdapat dan
tombol
animasi.
circular Tombol
circular untuk ke halaman materi circular dan tombol animasi untuk ke halaman animasi.
4.
Tombol menu untuk ke halaman menu utama.
42
Lanjutan Tabel 4.1 Tombol Navigasi 5.
Terdapat
tombol
linear
dan
animasi. Tombol linear untuk ke halaman
materi
linear
dan
tombol animasi untuk halaman animas 6.
Terdapat
tombol
deque
dan
animasi. Tombol deque untuk ke halaman
materi
tombol
animasi
deque untuk
dan ke
halaman animasi. 7.
Tombol panah kanan ini untuk ke halaman berikutnya.
8.
Tombol panah kiri ini untuk ke halaman sebelumnya.
9.
Tombol ini berfungsi untuk ke halaman menu utama.
10.
Tombol ini untuk masuk ke halaman soal latihan.
43
4.3
Proses Pembuatan Pada proses awal pembuatan Aplikasi Simulasi Pembelajaran Struktur Data
Queue ini dengan Adobe Flash CS3 menggunakan ukuran layer 800 pixel (width) x 600 pixel (height) dengan tampilan fullscreen dengan frame rate 12 fps, menggunakan bahasa pemrograman Action Script 2.0 dan setiap movie flashnya dibagi-bagi kedalam setiap scene. Pada setiap scene menampilkan suatu adegan, pembagian movie kedalam scene agar mempermudah pembagian movie. Pada aplikasi ini terdapat scene menu, scene materi, scene latihan, scene profil dan scene animasi.
4.3.1 Scene Menu Pada scene menu ini terdapat judul aplikasi, animasi teks, animasi gambar dan tombol button. Scene menu ini akan muncul pertama kali pada saat aplikasi dijalankan. Pada scene menu ini terdapat 11 layer dan memiliki fungsi masingmasing dapat dilihat pada table 4.2.
Gambar 4.5 Tampilan Halaman Menu
44
Tabel 4.2 Penjelasan fungsi layer pada scene menu No
Layer
Fungsi
1
Bg
Sebagai layer
2.
Gbr
Menampilkan gambar background
3.
Book
Menampilkan gambar buku
4.
Button 1
Tempat button materi
5.
Button 2
Tempat button latihan
6.
Button 3
Tempat button profil
7.
Button 4
Tempat button keluar
8.
K.mata
Menampilkan gambar kaca mata
9.
Kopi
Menampilkan gambar secangkir kopi
10.
Hp
Menmpilkan gmbar handphone
11.
Teks
Menampilkan tulisan “Struktur data materi queue”
Pada frame pertama dan terakhir untuk layer “Bg” terdapat Actionscript 2.0 :
fscommand ("fullscreen",true); dan stop () ;
Perintah diatas untuk membuat tampilan menjadi fullscreen dan menghentikan jalannya aplikasi.
Pada layer tombol “button 1” terdapat Actionscript 2.0 : on (release){ gotoAndPlay('Materi',1); }
Perintah diatas jika mouse ditekan dan dilepaskan maka akan masuk ke scene materi.
45
Pada layer tombol “button 2” terdapat Actionscript 2.0 : on (release){ gotoAndPlay('Latihan',1); } Perintah diatas jika mouse ditekan dan dilepaskan maka akan masuk ke scene latihan.
Pada layer tombol “button 3” terdapat Actionscript 2.0 : on (release){ gotoAndPlay('Profil',1); }
Perintah diatas jika mouse ditekan dan dilepaskan maka akan masuk ke scene profil.
Pada layer tombol “button 4” terdapat Actionscript 2.0 : on (release) { fscommand("quit",""); } Perintah diatas jika mouse ditekan dan dilepaskan maka akan keluar dari aplikasi.
4.3.2 Scene Materi Pada scene materi terdapat animasi teks, button animasi, button definisi, button circular, button menu, button linear, button deque, button selanjutnya dan button sebelumnya dapat dilihat pada tabel 4.3.
46
Gambar 4.6 Tampilan Materi
Tabel 4.3 Penjelasan fungsi pada layer materi No.
Layer
Fungsi
1.
Bg
Sebagai layer
2.
Gbr
Menampilkan background
3.
Book
Menampilkan gambar buku
4.
Button 1
Tempat button definisi
5.
Button 2
Tempat button circular
6.
Button 3
Tempat button linear
7.
Button 4
Tempat button deque
8.
Menu
Tempat button menu
9.
Next
Tempat button selanjutnya
10.
Back
Tempat button sebelumnya
11.
Button 6
Tempat button animasi
12.
Button 7
Tempat button animasi
13.
Button 8
Tempat button animasi
14.
Definisi 1
Menampilkan isi materi
15.
Definisi 2
Menampilkan isi materi
47
4.3.3 Scene Latihan Pada scene latihan ini terdapat button tombol memulai latihan dan gambargambar berupa petunjuk untuk mengerjakan soal latihan. Dalam scene ini terdapat tiga layer yang memiliki masing-masing fungsi, untuk lebih jelasnya dapat dilihat pada tabel 4.4.
Gambar 4.7 Tampilan Latihan
Gambar 4.8 Tampilan Soal
48
Tabel 4.4 Penjelasan fungsi pada layer latihan No.
Layer
Fungsi
1.
Bg
Sebagai layer
2.
Gbr
Menampilkan background
3.
Soal
Menampilkan soal latihan, button mulai, button koreksi, button reset, button menu, button nilai, button selanjutnya dan kolom kotak yang menampilkan isi jawaban.
Pada layer “soal” frame 1 : stop ();
Perintah diatas adalah untuk menghentikan jalannya animasi.
Pada layer “soal” di button mulai latihan : on (release){ gotoAndPlay(2); } Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke frame soal.
49
Pada layer “soal” frame 5 :
stop(); //daftar jawaban sebenarnya jawaban_asli1 = "if (R < n-1)"; jawaban_asli2 = "R++;"; jawaban_asli3 = "if (F < R+1)"; jawaban_asli4 = "x = Q[F];"; jawaban_asli5 = "if (F==n)"; //nilai pertama kali sama dengan 0 nilai = 0;
Perintah diatas adalah jawaban yang sebenarnya dari si penulis
50
Pada layer “soal” button koreksi : //ketika tekanan mouse dilepaskan setelah mouse ditekan on (release) { //menghasilkan variable i=1, i=2, i=3, i=4, i=5 for (i=1; i<6; i++) { //jika jawaban_user+i sama dengan jawaban_asli+i if (_root["jawaban_user"+i] == _root["jawaban_asli"+i]) { //nilai ditambah 1 nilai += 1; //tanda+i pindah ke frame 2 _root["tanda"+i].gotoAndStop(2); } else { //tanda+i pindah ke frame 3 _root["tanda"+i].gotoAndStop(3); } } //tombol koreksi tidak bisa ditekan Koreksi.enabled = false; //tombol koreksi lebih transparan Koreksi._alpha = 40; }
51
Perintah diatas jika mouse ditekan dan dilepaskan maka akan memeriksa semua jawaban, jika jawaban benar maka nilai ditambah dua puluh dan jawaban akan di centang yang menampilkan keterangan benar. Jika jawaban salah maka nilai ditambah nol dan jawaban akan disilang yang menampilkan keterangan salah. Jika sudah mengalami pemeriksaan maka button koreksi tidak bisa di tekan dan button koreksi akan memudar.
Pada layer “soal” button reset :
//ketika tekanan mouse dilepaskan setelah mouse ditekan on (release) { //tombol Koreksi dapat ditekan Koreksi.enabled = true; //warna tombol Koreksi tidak transparan Koreksi._alpha = 100; //nilai diubah menjadi 0 nilai = 0; //menghasilkan variable i=1, i=2, i=3, i=4, i=5 for (i=1; i<6; i++) { //jawaban_user+i dikosongkan _root["jawaban_user"+i] = ""; //tanda+i pindah ke frame 1 _root["tanda"+i].gotoAndStop(1); } }
52
Perintah diatas jika mouse ditekan dan dilepaskan maka nilai akan menjadi nol, tanda centang maupun silang akan hilang dan jawaban akan menjadi kosong.
Pada layer “soal” button lanjut : on (release){ gotoAndPlay(6); } Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke frame selanjutnya.
Sedangkan layer “soal” button menu : on (release){ gotoAndPlay('Menu',1); }
Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke halaman menu.
4.3.4 Scene Profil Pada scene ini terdapat tulisan tentang si penulis dan button menu untuk ke halaman menu. Pada scene ini terdapat empat layer yang memiliki fungsi masingmasing dan dapat dilihat pada tabel 4.5.
53
Gambar 4.9 Tampilan Profil
Tabel 4.5 Penjelasan fungsi pada layer profil No.
Layer
Fungsi
1.
Bg
Menampilkan background
2.
Fhoto
Menampilkan fhoto
3.
Teks
Menampilkan animasi teks
4.
Keluar
Tempat button menu
5.
Musik
Menampilkan suara musik
Pada layer “Bg” pada frame terakhir : stop () ;
Perintah diatas untuk menghentikan jalannya animasi.
54
Pada layer “Keluar” di button keluar : on (release){ gotoAndPlay('Menu',1); }
Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke halaman menu.
Pada layer “musik” di frame akhir : stop();
Perintah diatas untuk menghentikan jalannya musik.
4.3.5 Scene Animasi Pada scene animasi ini terdapat button menu, button selanjutnya dan button sebelumnya. Pada scene ini memiliki 7 layer yang memiliki fungsi masing-masing dapat dilihat pada tabel 4.6.
55
Gambar 4.10 Tampilan Halaman Animasi
Tabel 4.6 Penjelasan fungsi pada layer animasi No.
Layer
Fungsi
1.
Bg
Menampilkan background
2.
Gmbr
Menampilkan gambar
3.
Anm
Menampilkan gambar animasi
4.
Next
Tombol button selanjutnya
5.
Back
Tombol button sebelumnya
6.
Definisi
Menampilkan keterangan dari gambar
7.
Home
Tombol button menu
Pada layer “next” button selanjutnya : on (release){ gotoAndPlay(121); } Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke halaman selanjutnya.
56
Pada layer “back” button sebelumnya : on (release){ gotoAndPlay(65); } Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke halaman sebelumnya.
Pada layer “definisi” : stop ();
Perintah diatas untuk menghentikan jalanya animasi.
Pada layer “home” button menu : on (release){ gotoAndPlay('Materi',1); }
Perintah diatas jika mouse ditekan dan dilepaskan maka akan pindah ke halaman menu.
4.4
Pengujian Pada tahap pengujian aplikasi simulasi pembelajaran struktur data materi
queue ini dilakukan untuk memastikan bahwa program aplikasi yang telah dirancang dan dibuat ini dapat berfungsi dengan baik dan sesuai dengan rumusan rancangan yang telah ditetapkan sebelumnya. Tanpa adanya pengujian, maka tidak dapat diketahui apakah program aplikasi yang telah dibuat sesuai dengan spesifikasi rancangan program aplikasi. Pengujian terhadap aplikasi simulasi pembelajaran struktur data materi queue dilakukan dengan menggunakan metode pengujian Black Box.
57
4.4.1 Pengujian blackbox Skenario yang akan dijelaskan oleh penulis yaitu skenario menu, skenario materi dan skenario latihan.
Tabel 4.7 Skenario pengujian Skenario Menu
Materi
Pengujian
Hasil yang diharapkan
Klik tombol materi
Menampilkan halaman materi
Klik tombol latihan
Menampilkan halaman latihan
Klik tombol profil
Menampilkan halaman profil
Klik tombol keluar
Menampilkan halaman keluar
Klik tombol definisi
Menampilkan halaman definisi
Klik tombol circular Menampilkan halaman circular
Latihan
Klik tombol linear
Menampilkan halaman linear
Klik tombol deque
Menampilkan halaman deque
Klik tombol animasi Menampilkan halaman animasi
4.4.2 Hasil Pengujian Dari hasil skenario dan pengujian pada aplikasi yaitu scene menu, scene materi dan scene latihan. Maka dapat diperoleh sesuai dengan rancangan dan dijelaskan pada tabel 4.7 hasil pengujian.
Tabel 4.8 Hasil pengujian Skenario Menu
Pengujian Klik tombol materi
Hasil yang diharapkan
Status akhir
Menampilkan halaman Sukses materi
Klik tombol latihan
Menampilkan halaman Sukses latihan
Klik tombol profil
Menampilkan halaman Sukses profil
58
Lanjutan Tabel 4.8 Hasil pengujian Klik tombol keluar
Menampilkan halaman Sukses keluar
Materi
Klik tombol definisi
Menampilkan halaman Sukses definisi
Klik tombol circular
Menampilkan halaman Sukses circular
Klik tombol linear
Menampilkan halaman Sukses linear
Klik tombol deque
Menampilkan halaman Sukses deque
Klik tombol animasi
Menampilkan halaman Sukses animasi
Latihan
Klik tombol mulai
Menampilkan halaman Sukses soal
4.4.3 Analisis Hasil Pengujian Dari analisi hasil pengujian perangkat lunak yang telah dilakukan, maka dapat disimpulkan bahwa : 1. Proses pada setiap menuju halaman menu dan halaman lainnya dapat berjalan dengan baik tanpa adanya kendala sama sekali. Pada setiap tombol saat diklik akan mengeluarkan suara. 2. Tombol-tombol pada setiap halaman berjalan dengan sukses dan berjalan sesuai fungsinya masing-masing baik itu tombol-tombol menu maupun tombol keluar. 3. Pengguna dapat melihat setiap menu yang ditampilkan dengan baik.
Secara fungsionalitas program tidak ditemukan kesalahan dan sudah sesuai dengan proses yang ada pada sistem. Hasil analisis terhadap Aplikasi Simulasi Pembelajaran Struktur Data Materi Queue berbasis multimedia yang dirancang
59
dan dibangun secara keseluruhan berfungsi dengan baik dan dapat digunakan sebagai sarana belajar bagi mahasiswa dan mahasiswi ilmu komputer.
4.5
Distribusi Setelah penulis melakukan implementasi dan pengujian terhadap Aplikasi
Simulasi Pembelajaran Struktur Data Materi Queue, selanjutnya penulis akan mendistribusikan aplikasi ini dengan dikemas dalam bentuk CD. Pendistribusian aplikasi ini kedalam bentuk CD harus dilakukan dengan cara di burning dan aplikasi simulasi harus disimpan kedalam format .exe agar pengguna dapat langsung menjalankan aplikasi simulasi pembelajaran struktur data materi queue.