Perancangan Flowchart Aplikasi Pertimbangan Perancangan

77 Penjelasan Gambar 4.2.: ini menggambarkan alur dari menu utama. Bila aplikasi lankan, pertama menampilkan halaman intro, kemudian tampil halaman menu utama. Pada menu utama tersedia menu , menu , menu , menu , menu menu Selain itu juga terdapat tombol menu dan . Jika memilih salah satu menu maka akan tampil halaman dari menu yang dipilih. Bila memilih maka akan keluar dari aplikasi. S Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Tampilkan Animasi jam Dinding Tampilkan Animasi P apan Tulis Tampilkan Animasi P intu Tampilkan Animasi Rak B uku Tampilkan Animasi Tempat S amp ah Tampil M enu Classro o m A P ilih Jam Dinding P ilih P apan Tulis P ilih Tempat Sampah P ilih P intu P ilih Rak Buku x Flowchart school home greeting dictionary games , profil. music Exit exit Flowchart Classroom Gambar 4. 4. 78 Sambungan S S Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak P ilih M eja P ilih Bangk u P ilih Buku P ilih P enggaris P ilih P ulpen P ilih P insil P ilih Jendela P ilih Langit - langit Tampilkan Animasi M eja Tampilkan Animasi Bang ku Tampilkan Animasi P enggaris Tampilkan Animasi P ulpen Tampilkan Animasi Buku Tampilkan Animasi P ensil Tampilkan Animasi Jendela Tampilkan Animasi Langit -langit x x Gambar 4. 5. Flowchart Classroom 79 Sambungan Penjelasan Gambar 4.3, 4.4 dan 4.5.: ini menggambarkan alur dari menu . Bila aplikasi dijalankan, pertama menampilkan halaman menu utama . Gambar 4.15 menjelaskan bahwa dalam halaman berisi 19 proses, jika memlih ”ya” maka akan tampil animasi dari benda - benda yang di dalam Keterangan : A1 : Halaman Alphabets A2 : Halaman Numbers A3 : Halaman Colors A4 : Halaman Month dan Days A5 : Halaman Our Body S : Sambungan dalam halaman yang berbeda X : Sambungan halaman berbeda Tid ak S Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya Tid ak Ya P ilih M enu Alph abets P ilih M enu Numbers P ilih M enu Co lo rs Pilih Menu Month day P ilih M enu Our Bo dy P ilih M enu Back A1 A2 A3 A4 A5 Keluar X Gambar 4. 6. Flowchart Classroom Flowchart school classroom Flowchart classroom audiens 80 yang diinginkan dan jika ”tidak” maka b isa memilih benda lainnya atau pada menu utama juga tersedia menu , menu , men u , menu , menu . Bila memilih maka akan k embali ke menu utama . Keterangan : B : Halaman House B 1 : Halaman Livingroom B 2 : Ha laman Kitchen B 3 : Halaman Bathroom B 4 : Halaman Bedroom Tampilan Hal aman Ho use P ilih M enu Livingro o m B1 P ilih M enu Kitchen B2 P ilih M enu Bathro o m B3 P ilih M enu Bedroo m B4 P ilih M enu Back Keluar Ya Ya Ya Ya Ya Tid ak Tid ak Tid ak Tid ak Tid ak B classroom audiens cl assroom Alphabets Numbesr colors month and day our body back Flowchart House Gambar 4. 7. 81 Penjelasan Gambar 4. 6.: ini menggambarkan alur dari menu . Bila aplikasi dijalankan, pertama menampilkan halaman menu utama . Pada menu utama tersedia menu , menu menu dan . Selain itu juga terdapat tombol . Jika memilih salah satu menu maka akan tampil halaman dari menu yang dipilih. Bila memilih maka akan kembali ke menu utama. Penjelasan Gambar 4. 7.: ini menggambarkan alur dari halaman . Bila aplikasi dijalankan, pertama menampilkan menu halaman . Dimana didalamnya Tampilan Hal aman Greeting P ilih M enu M o rning P ilih M enu Afternoo n P ilih M enu E vening P ilih M enu Back Keluar Ya Ya Ya Ya Tid ak Tid ak Tid ak Tid ak C Tampilkan Animasi Greeting Tampilkan Animasi Greeting Tampilkan Animasi Greeting Flowchart house house livingroom kitchen, bathroom bedroom back back Flowchart Greeting Flowchart Greeting greeting Gambar 4. 8. 82 ada 3 proses pilihan - pilihan yang dapat digunakan, jika memlih ”ya” maka akan tampil animasi dari sapaan yang diinginkan dan jika ”tidak” maka bisa memilih menu lainnya. Bila memilih maka akan k embali ke menu utama . Penjelasan Gambar 4. 8.: ini menggambarkan alur dari halaman . Bila aplikasi dijalankan, pertama menampilkan menu halaman . Dimana di D Tampilan Halaman Dictionary Pilih abcd Pilih efgh Pilih ijkl Pilih mnop Pilih qrst Pilih upwxyz Keluar Tampilkan Teks Kamus Dari A -D Tampilkan Teks Kamus Dari E- H Tampilkan Teks Kamus Dari I-L Tampilkan Teks Kamus Dari M -P Tampilkan Teks Kamus G -T Tampilkan Teks Kamus U-Z Pilih Back Ya Ya Ya Ya Tidak Ya Ya a Tidak Tidak Tidak Tidak Tidak Tidak Ya audiens audiens greeting back Flowchart Dictionary Flowchart Dictionary dictionary Gambar 4. 9. 83 dalamnya ada 7 proses pilihan - pilihan yang dapat digunakan, jika meml ih ”ya” maka akan tampil teks dari kamus yang diinginkan dan jika ”tidak” maka bisa memilih menu lainnya. Bila memilih maka akan k embali ke menu utama . Penjelasan Gambar 4. 9.: ini menggambarkan alur dari . Bila aplikasi dijalankan, pertama menampilkan halaman menu utama . Pada menu utama tersedia menu tebak gambar, menu menu membedakan Keterangan : E : Halaman Game E 1 : Halaman Tebak Gambar E 2 : Ha laman Mencocokan Gambar E3 : Halaman Membedakan 2 Gambar E 4 : Halaman Quiz Keluar Tampilan Halaman Game Pilih Menu Membedakan 2 Gambar Pilih Menu tebak gambar E1 E3 Pilih Menu Quiz E4 Pilih Menu Back E Pilih Menu Mencocokan Gambar E2 Ya Ya Y a Ya Tidak Tidakk Tidak Ya Tidak Tidak audiens audiens dictionary back Flowchart Game Flowchart game game game game game mencocokan gambar, game Gambar 4. 10. 84 2 gambar dan menu . Selain itu juga terdapat tombol . Jika memilih salah satu menu maka akan tampil halaman dari menu ya dipilih. Bila memilih maka akan kembali ke menu u tama . G Tampilan Halaman Music Pilih Mary hand a little lamb Keluar Tampilkan La gu Mary h and a little lamb Pilih Back Pilih Do Re Mi Tampilkan Lagu Do Re Mi Pilih Twinkle twinkle little star Tampilkan Lagu Twinkle twinkle little star Pilih Popeye Tampilkan Lagu Popaye Pilih Humpty dumty Tampilkan Lagu Humpty dumty Pilih Ten little Indians boys Tampilkan Lagu Ten little Indians boys Pilih Are you sleeping Tampilkan Lagu Are you sleeping Pilih Baa baa black sheep Tampilkan Lagu Baa baa black sheep Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Ya Tidak Tidak Ya Tidak Ya Tidak game quiz back back Flowchart Music Gambar 4.1 1. 85 Penjelasan Gambar 4.1 .: ini menggambarkan alur dari . Bila aplikasi dijalankan, pertama menampilkan halaman menu utama . Pada menu utama tersedia 8 menu lagu anak - anak dalam bahasa Inggris. Selain itu juga terdapat tombol . Jika memilih salah satu menu maka akan tampil halaman dari menu yang dipilih. Bila memilih maka akan kembali ke menu utama . Perancangan STD Halaman Utama Hal utama School Game Gree tig Music Profil Dictionary Klik “H alaman Utama” Tampilkan H alaman Utama Klik “H alaman Utama” Tampilkan H alaman Utama Klik “H alaman Utama” Tampilkan H alaman Utama Klik “H alaman Utama” Tampilkan H alaman Utama Klik “Halaman Utama” Tampilkan H alaman Utama Klik “H alaman Utama” Tampilkan H alaman Utama Klik “H alaman Scho o l” Tampilkan H alaman Scho o l Klik “H alaman Game” Tampilkan H alaman Game Klik “Halaman Greeting” Tampilkan Halaman Greeting Klik “H alaman P rofil” Tampilkan H alaman P rofil Klik “H alaman M usic” Tampilkan H alaman M usic Klik “Halaman Dictionary” Tampilkan Halaman Dictionary House Klik “H alaman Utama” Tampilkan H alaman Utama Klik “H alaman Ho use” Tampilkan H alaman Ho use Exit Klik “H alaman Exit” Tampilkan H alaman Exit Flowchart music music music back back

4.4.6 Perancangan STD

Gambar 4.12 . State Transition Diagram 86 Pada Halaman utama terdapat sembilan navigasi yaitu: halaman utama, house, school, game, greeting, profil, music, dictionary dan exit. Perancangan STD Halaman Pada halaman terdapat me nu halaman dan Klik “H alaman Scho o l ” Tampilkan H alaman Scho o l Comparisons Klik “H alaman Scho o l ” Tampilkan H alaman Scho o l Alphabet Colour Month Days Klik “H alaman Scho o l ” Tampilkan H alaman Scho o l Klik “H alaman Scho o l ” Tampilkan H alaman Scho o l Klik “H alaman Scho o l ” Tampilkan H alaman Scho o l Klik “H alaman Alphabet” Tampilkan H alaman Alphabet Klik “H alaman Co lo ur ” Tampilkan H alaman Co lo ur Klik “H alaman Our Bo dy” Tampilkan H alaman Our Bo dy Klik “H alaman M o nth Day” Tampilkan H alaman M o nth Day Klik “H alaman Scho o l ” Tampilkan H alaman Scho o l Klik “Halaman Number” Tamp ilkan Halaman Number Our Body Number Hal School Klik “H alaman Co mparisosns ” Tampilkan H alaman Co mpariso na Gambar 4.13 . School school alphabets, number, colour, comparisons, our body, dan month days. 87 Perancangan STD Halaman