BAB IV IMPLEMENTASI DAN PENGUJIAN

Transkripsi

1 BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Impelementasi Aplikasi Pada tahap ini penulis melakukan implementasi aplikasi dan pengujian. Tahap implementasi terdiri dari tiga cakupan yaitu spesifikasi kebutuhan sistem yang meliputi perangkat keras (hardware) dan perangkat lunak (software), dan implementasi sistem aplikasi pendukung yang meliputi proses coding, desain antarmuka. 4.2 Pengumpulan Bahan Teks Teks atau isi materi pada pembuatan aplikasi ini, penulis peroleh dari Buku IPA Biologi SMA kelas XII yang merupakan buku panduan untuk siswa kelas XII Gambar Gambar dibuat menggunakan Adobe Flash CS3, Adobe photoshop CS3 dan juga diperoleh dari internet Animasi Animasi pada aplikasi ini penulis buat menjadi animasi menggunakann Adobe Flash CS Suara Suara digunakan untuk suara latar pada setiap halaman yan disediakan. 78

2 Tombol Navigasi Tombol navigasi yang terdapat pada aplikasi ini mengandung tautan (link) yang menghubungkan suatu halaman lainnya. Semua tombol yang ada dibuat sendiri oleh penulis menggunakan Adobe Flash CS3 Tabel 4.1 Tombol Navigasi No. Gambar Tombol Keterangan 1. Masuk Tombol ini berfungsi untuk menuju kehalaman menu utama. 2. Home Tombol ini berfungsi untuk menuju ke halaman home 3. Profil Tombol ini berfungsi untuk menuju ke halaman Profil penulis 4. Terdapat beberapa tombol, pada Materi tombol materi berfungsi untuk Video menuju kehalaman materi, tombol video berfungsi untuk menuju Game kehalaman video dan tombol game berfungsi untuk menuju kehalaman game. 5. Tombol ini berfungsi untuk menuju Kembali ke halaman Sebelumnya. 6. Tombol ini berfungsi untuk keluar Keluar dari aplikasi. 7. Pada tombol login ini berfungsi Admin untuk Masuk kehalaman Admin. Login

3 80 8. Tombol ini berfungsi untuk Next kehalaman selanjutnya. 9. Terdapat beberapa tombol yaitu tombol latihan bab 1, latihan bab 2, Uji Kompetensi latihan bab 3, latihan bab 4, latihan bab 5, latihan bab 6, dan Bab 1 latihan bab 7, dimana masingmasing tombol berfungsi untuk menuju kehalaman latihan. 10. Tombol ini berfungsi untuk menuju Update Soal kehalaman Update soal. 11. Tombol ini berfungsi untuk menuju Ganti Password kehalaman Ganti password. 12. Terdapat beberapa tombol yaitu, Bioteknologi pertanian di tombol video sistem gerak, sistem pencernaan makanan, dan sistem Epigel germination climbing reproduksi wanita. Dimana masingmasing tombol berfungsi untuk Runtuhnya Evolusi Darwin menuju kehalaman video yang dipilh. Memahami sel kromosom Jaringan Tumbuhan 13. Tombol ini berfungsi untuk menuju Daftar isi kehalaman Daftar isi pada materi.

4 81 4.3Proses Dalam pembuatan aplikasi ini penulis menggunakan spesifikasi layar 550 x 400 pixel dengan tampilan fullscreen dan nilai frame rate 12 fps dan menggunakan bahasa pemrograman Action script 2.0. Movie Flash dibagi dalam beberapa scene yang dapat menampilkan suatu adegan atau skenario tertentu. Aplikasi ini terdiri dari 1 scene. Setiap scene terdapat animasi yang dibuat dengan teknik motion tween yaitu teknik yang digunakan untuk membuat gambar atau object bergerak secara otomatis Scene Pada scene 1 ini terdapat halaman intro. Scene ini yang akan muncul pertama kali ketika program ini mulai dikerjakan dan tampilan awal pembuka yang kemudian untuk menuju halaman menu yang terdapat pada scene 2. Gambar 4.1 Tampilan Scene 1

5 82 Tabel 4.2 Penjelasan Fungsi Layer pada scene 1 Maksud dari perintah diatas adalah jika tombol masuk diklik maka akan menghentikan semua file suara dalam frame menuju ke frame menu dan berhenti pada frame ke menu utama. No Layer Fungsi 1. Button Mulai Masuk ke halaman menu utama 2. Background Menampilkan Gambar background Actionscript yang terdapat pada layer Masuk sebagai berikut: stop(); masuk.onrelease = function(){ gotoandplay(2);

6 Scene Utama Pada scene ini terdapat halaman utama. Scene ini yang akan muncul ketika tombol mulai sudah ditekan. Terdapat pula tombol pilihan untuk user (siswa) dan guru (admin) memilih tombol yang di inginkan. Gambar 4.2 tampilan menu utama. Tabel 4.3 Penjelasan Fungsi Layer pada menu utama Maksud dari perintah diatas adalah jika tombol diklik maka akan menuju ke frame menu dan berhenti pada frame ke menu yang di inginkan. No Layer Fungsi 1. Button home Masuk ke halaman home 2. Button Profil Masuk ke halaman Profil 3. Button Materi Masuk ke halaman Materi

7 84 4. Button Uji kompetensi Masuk ke halaman Latihan 5. Button Game Masuk ke halaman Game 6. Button Video Masuk ke halaman Video 7. Button Admin Masuk ke halaman Admin 8. Button Keluar Masuk ke halaman Keluar 9. Animasi Daun Menampilkan animasi daun jatuh 10. Bg Menampilkan Gambar background 11. Action Terdapat action script Actionscript yang terdapat pada layer Siwa dan Admin sebagai berikut: stop(); Materi.onRelease = function(){ gotoandplay(21); Profile.onRelease = function(){ gotoandplay(3); Uji.onRelease = function(){ gotoandstop(9); Admin.onRelease = function(){ gotoandplay(6); Video2.onRelease = function(){ gotoandplay(7); Game.onRelease = function(){ gotoandplay(8);

8 Scene Profil Pada scene ini terdapat halaman profil. Scene ini yang akan muncul ketika tombol mulai sudah ditekan. Maka masuk ke halaman home kembali. Gambar 4.3 tampilan menu Profil. Tabel Penjelasan Fungsi Layer pada menu profil No Layer Fungsi 1. Button home Kembali ke halaman home 2. Teks Menampilkan teks 3. Background Menampilkan Gambar background

9 86 Actionscript yang terdapat pada layer Profil sebagai berikut: stop(); Home2.onRelease = function(){ gotoandplay(2); Scene Materi Pada scene halaman Materi terdapat beberapa submateri yang dapat dipilih oleh pengguna dari bab 1 sampai dengan bab 7 yang akan menuju kehalaman submateri yang dipilih. Gambar 4.4 tampilan materi. Tabel 4.5 Penjelasan Fungsi Layer pada menu materi

10 87 No Layer Fungsi 1. Button Bab 1 Masuk ke halaman materi Bab 1 2. Button Bab 2 Masuk ke halaman materi Bab 2 3. Button Bab 3 Masuk ke halaman materi Bab 3 4. Button Bab 4 Masuk ke halaman materi Bab 4 5. Button Bab 5 Masuk ke halaman materi Bab 5 6. Button Bab 6 Masuk ke halaman materi Bab 6 7. Button Bab 7 Masuk ke halaman materi Bab Button Home Masuk kehalaman awal 12. Button Daftar isi Masuk kehalam daftar isi pada materi 13. Button Keluar Untuk keluar dari aplikasi 14. Background Menampilkan Gambar background 15. Action Terdapat action script Action script yang terdapat pada materi: on(release) { _root.gotopage(6,true); } on(release) {

11 88 _root.gotopage(7,true); } on(release) { _root.gotopage(8,true); } daftar.enabled = b3.enabled = b2.enabled = 1.enabled = 2.enabled = 3.enabled = 4.enabled = 5.enabled = 6.enabled = 7.enabled = 8.enabled = 9.enabled = b1.enabled = (_root.getpn(14)==_root.page); trace("b1_hal1 reset"); this.onmousedown = function(){ fscommand("quit"); } on(release) { _root.gotopage(2,true); } on (press){ _root.gotoandplay(1); }

12 Scene Uji Kompetensi Pada scene halaman latihan terdapat beberapa latihan yang dapat dipilih oleh pengguna dari latihan bab 1 sampai dengan latihan bab 7 yang akan menuju kehalaman latihan yang dipilih. Gambar 4.5 tampilan menu latihan. Gambar tampilan latihan.

13 90 Tabel 4.6 Penjelasan Fungsi Layer pada menu latihan No Layer Fungsi 1. Button latihan bab 1 sampai dengan latihan bab 7 Pengguna dapat memilih latihan bab 1 sampai dengan latihan bab 7 2. Button pilihan Pengguna dapat memilih jawaban jawaban dari a sampai d 3 Button next Pengguna dapat melanjutkan latihan soal berikutnya. 4. Button Home Untuk kembali ke menu awal 5. Background Menampilkan Gambar background 6. Action Terdapat action script Action script yang terdapat pada latihan: stop () ; HOME10.onRelease = function(){ gotoandplay(2); // untuk kembali ke menu home atau frame 2 latihanbab1.onrelease = function(){ gotoandplay(4); // untuk memilih latihan bab1 latihanbab2.onrelease = function(){ gotoandplay(10); // untuk memilih latihan bab2 latihanbab3.onrelease = function(){ gotoandplay(11); // untuk memilih latihan bab3

14 91 latihanbab4.onrelease = function(){ gotoandplay(12); // untuk memilih latihan bab4 latihanbab5.onrelease = function(){ gotoandplay(13); // untuk memilih latihan bab5 latihanbab6.onrelease = function(){ gotoandplay(14); // untuk memilih latihan bab6 latihanbab7.onrelease = function(){ gotoandplay(15); // untuk memilih latihan bab7 stop(); mdm.database.msaccess.connect("biologi.mdb", ""); mdm.database.msaccess.select("select * FROM SOAL1"); var latihan = mdm.database.msaccess.getdata(); soal = latihan[0][1]; // untuk memilih jawaban dari soal latihan a = latihan[0][2]; b = latihan[0][3]; c = latihan[0][4]; d = latihan[0][5]; next_btn.onrelease = function(){ // untuk menjawab pertanyaan selanjutnya setpertanyaan(nextqst); } ; score = 0; setpertanyaan(0); function setpertanyaan(i) { nextqst = i+1; if (latihan[i][0]!= undefined) { soal = latihan[i][1]; a = latihan[i][2]; b = latihan[i][3]; c = latihan[i][4]; d = latihan[i][5]; jawabanbenar = latihan[i][6]; pilihan = ""; } else {

15 92 endquiz(); } function endquiz() { gotoandstop(5); setbuttonpil(); // untuk memilih jawaban a,b,c,d function setbuttonpil() { abtn.onrelease = function() { jawaban("a"); pilihan = "A"; bbtn.onrelease = function() { jawaban("b"); pilihan = "B"; cbtn.onrelease = function() { jawaban("c"); pilihan = "C"; dbtn.onrelease = function() { jawaban("d"); pilihan = "D"; function jawaban(val){ if (val!= jawabanbenar) { score = score-0; } else { score = score+10; // akumulasi nilai jika benar bertambah 10 }trace(score); }

16 Scane Video Pada scane halaman Video terdapat beberapa video yang dapat dipilih oleh pengguna yang akan menuju kehalaman video yang dipilih. Gambar 4.6 tampilan menu video. Gambar tampilan video.

17 94 Tabel Penjelasan Fungsi Layer pada menu video No Layer Fungsi 1. Button Bioteknologi pertanian di indonesi Pengguna dapat nonton video tentang Bioteknologi pertanian di indonesi 2. Button Epigeal germination Pengguna dapat nonton video tentang Epigeal germination 3. Button Runtuhnya evolusi Darwin 1 4. Button Memahami sel kromosom DNA Pengguna dapat nonton video tentang Runtuhnya evolusi Darwin 1 Pengguna dapat nonton video tentang Memahami sel kromosom DNA 5. Button Jaringan tumbuhan Pengguna dapat nonton video tentang Jaringan tumbuhan 6. Button home Untuk kembali ke halaman home 7. Button video Untuk kembali ke menu pilihan video Action script yang terdapat pada video: stop (); V1.onRelease = function(){ gotoandplay(19); HOME5.onRelease = function(){ gotoandplay(2); V2.onRelease = function(){ gotoandplay(66); V3.onRelease = function(){ gotoandplay(67); V4.onRelease = function(){

18 95 gotoandplay(67); V5.onRelease = function(){ gotoandplay(67); Action script yang terdapat pada video: stop () ; RUMAH3.onRelease = function(){ gotoandplay(2); VID3.onRelease = function(){ gotoandplay(7); Scene Update soal Pada scene halaman Update soal, dimana admin dapat merubah soal-soal yang ada dari soal nomer 1 sampai dengan nomer 10.

19 96 Gambar 4.7 tampilan untuk Update soal Tabel 4.8 Penjelasan Fungsi Layer pada menu update soal No Layer Fungsi 1. Button Update soal Menampilkan halaman Update soal 2. Button Ganti Password Menampilkan halaman Ganti Password 3. Button Home Kembali ke halaman home 4. Button pilih Dimana admin dapat memilih bab yang akan dirubah

20 97 Lanjutan Tabel 4.8 Penjelasan Fungsi Layer pada menu update soal Action script yang terdapat pada update soal: stop (); GP.onRelease = function(){ gotoandplay(18); stop (); UD.onRelease = function(){ gotoandplay(17); stop (); HOME9.onRelease = function(){ gotoandplay(2); Action script update soal: stop(); HOME7.onRelease = function(){ gotoandplay(2);

21 98 stop(); //disable teks tekstidakaktif(); //penambahan kolom di datagrid view_soal.addcolumn("id"); view_soal.addcolumn("soal"); view_soal.addcolumn("pilihana"); view_soal.addcolumn("pilihanb"); view_soal.addcolumn("pilihanc"); view_soal.addcolumn("pilihand"); view_soal.addcolumn("jawaban"); view_soal.getcolumnat(0).width = 50; view_soal.getcolumnat(1).width = 250; view_soal.getcolumnat(2).width = 150; view_soal.getcolumnat(3).width = 150; view_soal.getcolumnat(4).width = 150; view_soal.getcolumnat(5).width = 50;

22 99 view_soal.hscrollpolicy = "on"; //koneksi database mdm.database.msaccess.connect("biologi.mdb",""); //tombol proses (mengisi data kedalam datagrid) proses_btn.onpress = function() { view_soal.removeall(); mdm.database.msaccess.select("select * FROM SOAL"+no_bab.text+""); var soal = mdm.database.msaccess.getdata(); var rows:number = 0; for (rows=0; rows<soal.length; rows++) { var isi:object = { isi.id = soal[rows][0].tostring(); isi.soal = soal[rows][1].tostring(); isi.pilihana = soal[rows][2].tostring();

23 100 isi.pilihanb = soal[rows][3].tostring(); isi.pilihanc = soal[rows][4].tostring(); isi.pilihand = soal[rows][5].tostring(); isi.jawaban = soal[rows][6].tostring(); view_soal.additem(isi); } //melihat data di teks ketika datagrid di pilih view_soal.addeventlistener("change",pilih); function pilih() { no = view_soal.selecteditem.id; soal = view_soal.selecteditem.soal; a = view_soal.selecteditem.pilihana; b = view_soal.selecteditem.pilihanb; c = view_soal.selecteditem.pilihanc; d = view_soal.selecteditem.pilihand; jawaban = view_soal.selecteditem.jawaban;

24 101 } //fungsi desabled teks function tekstidakaktif() { teks1.type = "dynamic"; teks2.type = "dynamic"; teks3.type = "dynamic"; teks4.type = "dynamic"; teks5.type = "dynamic"; teks6.type = "dynamic"; } //fungsi enabled teks function teksaktif() { teks1.type = "input"; teks2.type = "input"; teks3.type = "input"; teks4.type = "input"; teks5.type = "input";

25 102 teks6.type = "input"; } //fungsi hapus teks function hapusteks() { teks1.text = ""; teks2.text = ""; teks3.text = ""; teks4.text = ""; teks5.text = ""; teks6.text = ""; } //tombol tambah(menambah soal) tambah_btn.onrelease = function() { aksi.text = "Tambah Soal"; teksaktif(); hapusteks();

26 103 teks1.setfocus; //tombol hapus (menghapus soal) hapus_btn.onrelease = function() { mdm.database.msaccess.runquery("delete from SOAL"+no_bab.text+" where id = "+no+""); //tombol edit (mengedit soal) edit_btn.onrelease = function() { aksi.text = "Edit Soal"; teksaktif(); //tombol simpan (sesudah di edit atau ditambah) simpan_btn.onrelease = function() { //pemambahan soal if (aksi.text == "Tambah Soal") {

27 104 mdm.database.msaccess.connect("biologi.mdb",""); mdm.database.msaccess.runquery("insert into SOAL"+no_bab.text+" (soal, pilihan1, pilihan2, pilihan3, pilihan4, jawaban) values ('"+soal+"','"+a+"','"+b+"','"+c+"','"+d+"','"+jawaban+"')"); mdm.dialogs.prompt("input berhasil"); //edit soal } else if (aksi.text == "Edit Soal") { mdm.database.msaccess.connect("biologi.mdb",""); mdm.database.msaccess.runquery("update SOAL"+no_bab.text+" SET soal = '"+soal+"', pilihan1 = '"+a+"', pilihan2 = '"+b+"', pilihan3 = '"+c+"', pilihan4 = '"+d+"', jawaban = '"+jawaban+"' WHERE id = "+no+" "); mdm.dialogs.prompt("soal sudah terganti"); } tekstidakaktif(); aksi.text = "";

28 Scene Ganti Password Pada scene halaman Ganti Password, dimana admin dapat mengganti password yang diinginkan. Gambar 4.8 tampilan untuk Ganti Password Tabel 4.9 Penjelasan Fungsi Layer pada menu ganti password No Layer Fungsi 1. Button Ganti Untuk mengganti password jika sudah diganti 2. Animasi ikan Untuk menampilkan ikan berjalan 3. Button Home Untuk kembali ke menu awal 4. Background Menampilkan Gambar background 5. Action Terdapat action script

29 106 Action script ganti password stop(); HOME8.onRelease = function(){ gotoandplay(2); stop(); //koneksi database mdm.database.msaccess.connect("biologi.mdb",""); //pilih tabel di database mdm.database.msaccess.select("select * FROM ADM"); //variable var pas = mdm.database.msaccess.getdata(); //tombol ganti ganti_btn.onpress = function() { //cek sandi lama dengan database if (sandi_lama.text == pas[0][2]) { //pengecekan sandi baru dengan ulang sandi

30 107 if (sandi_baru.text == "" ulang_sandi.text == "") { mdm.dialogs.prompt("masukan sandi baru"); sandi_baru.text = ""; ulang_sandi.text = ""; } else if (sandi_baru.text == ulang_sandi.text) { mdm.database.msaccess.runquery("update ADM SET pass = '"+sandi_baru.text+"' WHERE ID = 1"); mdm.dialogs.prompt("password admin telah terganti"); } else { mdm.dialogs.prompt("password anda tidak sama"); } sandi_baru.text = ""; ulang_sandi.text = ""; } else { mdm.dialogs.prompt("password anda salah"); } sandi_lama.text = ""; sandi_baru.text = ""; ulang_sandi.text = "";

31 Scene Game Pada scene halaman latihan terdapat beberapa Game yang dapat dipilih oleh pengguna dari 2 game yang akan menuju kehalaman Game yang dipilih. Gambar 4.9 tampilan menu game Gambar 4.10 tampilan game.

32 109 Tabel 4.10 Penjelasan Fungsi Layer pada menu game No Layer Fungsi 1. Button game 1 Pengguna dapat memilih game 1 atau yang ke 2 dan 2 2. Button Home Untuk kembali ke menu awal 3. Background Menampilkan Gambar background 4. Action Terdapat action script Action script yang terdapat pada game: stop(); GAME1.onRelease = function(){ gotoandplay(65); GAME2.onRelease = function(){ gotoandplay(70); stop(); loadmovie("pingpong.swf",game); 4.4 Pengujian Pengujian ini dilakukan dengan menggunakan metode pengujian sistem yaitu metode blackbox testing. Metode Blackbox Testing merupakan metode pengujian pada program aplikasi yang berdasarkan spesifikasi fungsional dari program dan bertujuan untuk menemukan kesalahan fungsional pada program.

33 110 Skenario pengujian meliputi skenario aplikasi terhadap fungsionalitas yang berfungsi untuk menguji kesesuain proses perangkat lunak terhadap proses yang terjadi dalam sistem Metode Blackbox Testing Tabel 4.11 Skenario Pengujian Menu yang diuji Bagian yang diuji Input Output Ket Intro Klik tombol mulai Ke halaman utama Sukses Sesuai Menu Klik tombol Siswa Ke halaman siswa Sukses Sesuai Klik tombol Admin Ke halaman admin Sukses Sesuai Klik tombol Materi Ke halaman Materi Sukses Sesuai Klik tombol Latihan Ke halaman Sukses Sesuai Latihan Klik tombol Game Ke halaman Game Sukses Sesuai Klik tombol Video Ke halaman Video Sukses Sesuai Klik tombol Admin Ke halaman Admin Sukses Sesuai Materi Klik bab 1 bab 7 Ke Halaman bab yang dipilih Sukses Sesuai Soal Klik latihan bab 1 Ke Halaman Sukses Sesuai latihan bab 7 latihan bab yang dipilih

34 111 Lanjutan Tabel 4.11 Skenario Pengujian Dalam aplikasi pembelajaran Biologi SMA kelas XI ini, penulis menggunakan komputer dengan spesifikasi : 1. Perangkat Keras (Hardware) a. Intel(R) Core(TM)2 Duo CPU 2.00GHz b. RAM 2 GB 2. Perangkat Lunak (Software) a. Adobe Flash CS3 b. Adobe Photosop CS3 c. Microsoft Access 2007 d. MDM e. Windows 7

35 Kesimpulan Hasil Pengujian Tersebut Setelah melakukan pengujian dengan menjalankan program aplikasi maka dari hasil tersebut sebagai berikut: Pada menu intro bagian yang diuji adalah tombol mulai yang di input dari sistem tersebut menampilkan halaman menu. Maka program aplikasi ini menampilkan output sesuai dengan yang diharapkan. Pada menu bagian yang diuji adalah tombol materi, latihan, video, game, dan admin yang di input dari sistem tersebut menampilkan halaman materi, latihan, video, game dan admin. Maka program aplikasi ini menampilkan output sesuai dengan yang diharapkan. Pada menu latihan bagian yang diuji adalah tombol memilih jawaban dimana sistem akan memberi nilai jawaban yang benar. Pada menu video bagian yang diuji adalah tombol judul video. Maka program aplikasi ini menampilkan output sesuai dengan yang diharapkan. Pada menu game yang diuji adalah tombol judul game. Maka program aplikasi ini menampilkan output sesuai dengan yang diharapkan. Pada menu admin bagian yang diuji adalah tombol admin yang di input dari sistem tersebut menampilkan halaman admin. Maka program aplikasi ini menampilkan output sesuai dengan yang diharapkan. Dari pengujian ini mendapatkan hasil yang sesuai dengan yang diharapkan Pengujian Aplikasi 1. Pengujian terhadap user Aplikasi ini sudah diuji coba oleh 40 siswa kelas SMK YAPERA Tangerang. Evaluasi dilakukan dengan cara membagikan kuisioner pada para siswa yang sudah menjalankan aplikasi. Cara ini dilakukan untuk mengetahui tanggapan para siswa terhadap aplikasi

36 Tanggapan Guru Selain melakukan uji coba terhadap siswa, guru biologi turut mencoba aplikasi ini. Beliau sangat senang dengan adannya aplikasi ini. Karena dapat mempermudah beliau menyampaikan materi. 3. Hasil observasi data siswa Tabel 4.12 Hasil Observasi Data TOTAL sebelum mengunakan aplikasi TOTAL sesudah mengunakan aplikasi Sangat Sulit Mudah Sangat sulit Mudah Gambar 4.11 Grafik Hasil Observasi Data

37 Distribusi Aplikasi ini dikemass dalam bentuk CD Tampilan Aplikasi Aplikasi pembelajaran biologi SMA kelas XII ini terdiri dari satu program utama. Cara kerja aplikasi ini adalah ketika menjalankan aplikasi ini, akan muncul halaman intro berupa judul Aplikasi pembelajaran biologi SMA kelas XII, kemudian klik tombol masuk sehingga muncul halaman menu terdiri dari 7 tombol pilihan yaitu : 1. Menu yaitu untuk menampilkan halaman Menu utama 2. Materi yaitu untuk menampilkan halaman Materi 3. Latihan yaitu untuk menampilkan halaman Latihan 4. Game yaitu untuk menampilkan halaman Game 5. Video yaitu untuk menampilkan halaman Video 6. Profil yaitu untuk menampilkan halaman Profil 7. Admin yaitu untuk menampilkan halaman Admin 8. Keluar yaitu untuk menampilkan halaman keluar Penjelasan tampilan aplikasi Spesifikasi layar : 550 x 400 pixel Frame rate : 12 fps

38 Halaman Intro Gambar 4.12 Tampilan Halaman Intro Ket : Aplikasi berjalan secara baik sehingga halaman intro akan lansung muncul. Pengguna dapat mengklik tombol masuk yang akan membawa pengguna menuju halaman menu. 2. Halaman Menu Gambar 4.13 Tampilan Halaman Menu

39 116 Ket : Terdapat 8 tombol menuju halaman home,profil,materi,uji kompetensi,game,video,admin,dan keluar. 3. Halaman Materi Gambar 4.14 Tampilan Halaman Materi Ket : Terdapat tampilan awal halaman yang berupa bab-bab...

40 Halaman Latihan Gambar 4.15 dan Tampilan Halaman Latihan

41 118 Ket : Terdapat 7 bab tombol menuju halaman uji kompetensi (latihan) Pilih lalu masuk ke halaman pilihan jawaban. 5. Halaman Video Gambar 4.17 Tampilan Halaman Video Ket : Terdapat 5 tombol menuju halaman video, Pilih lalu masuk ke halaman video.

42 Halaman Game Gambar Tampilan Halaman Game Ket : Terdapat 2 tombol menuju halaman game, Pilih lalu masuk ke halaman game. 7. Halaman Profil Gambar Tampilan Halaman Profil

43 120 Ket : Menampilkan halaman profil, dan data penulis. 8. Halaman Admin Gambar 4.20 Tampilan Halaman Admin Ket : Terdapat 2 tombol input teks, untuk memasukan user name, dan password. 9. Halaman Keluar Gambar Tampilan Halaman Keluar Ket : Menampilkan halaman keluar.