Concept Design Aplikasi visualisasi fotosintesis berbasis multimedia.

20 BAB III. ANALISA DAN PERANCANGAN SISTEM

3.1 Concept

Sistem yang akan dibangun adalah aplikasi simulasi berbasis multimedia yang menampilkan penjelasan tentang fotosintesis baik berupa teks, gambar, audio, maupun animasi. Program ini bertujuan untuk mempermudah siswa maupun masyarakat umum dalam menerima informasi proses fotosintesis. Pengguna sendiri adalah siswa ataupun masyarakat umum yang sudah mengenal penggunaan media komputer. Program ini bersifat interaktif. Dalam pengembangan program bantu yang berbasis multimedia dengan menggunakan Adobe Flash. Program ini akan didistribusikan untuk siswa atau masyarakat umum dalam bentuk softcopy maupun cd, sedangkan untuk proses keberhasilan program ini akan diujikan melalui kuesioner yang dibahas pada bab selanjutnya.

3.2 Design

3.2.1 Perancangan Sistem yang dikembangkan

Sistem yang dikembangan adalah aplikasi simulasi fotosintesis berbasis multimedia dengan menggabungan teks, animasi, audio, gambar sehingga dalam menyampaikan informasi proses fotosintesis dapat mudah dipahami dan menjadikan pembelajaran lebih menarik.

3.2.2 Kebutuhan Sistem Hardware

– Software a. Kebutuhan Hardware  Kebutuhan hardware pengembang Analisa kebutuhan hardware atau perangkat keras adalah analisa kebutuhan dari perangkat keras yang dibutuhkan oleh penulis untuk melakukan pembuatan aplikasi ini. Perangkat yang digunakan adalah : - Prosesor : Intel Core i5 2.27 GHz - RAM : 4096 MB - Sistem Operasi : Windows 7 64-bit - VGA : NVIDIA GeForce 310M 512mb - Harddisk : 500 GB - Optical : DVD-RW  Kebutuhan hardware pengguna Agar pengguna dapat menggunakan program bantu ini, pengembang merekomendasikan kebutuhan perangkat keras sebagai berikut: - Prosesor : Intel Pentium 4, AMD Athlon 64 - RAM : 512MB - VGA : VGA dengan memory 64MB - Harddisk : 40GB - OS : Windows XP , Windows 7 - Optical : DVD-ROM - Speaker : Speaker 2 channel b. Kebutuhan Software  Kebutuhan software pengembang Perangkat lunak yang dibutuhkan untuk menyelesaikan penelitian ini adalah Adobe Flash Profesioanal CS5, Adobe Ilustrator CS5, dan Adobe fireworks CS5.  Kebutuhan software pengguna Untuk menjalankan program bantu ini, perangkat lunak yang harus dipenuhi pengguna adalah Flash Player 9 atau flash player yang terbaru atau player yang bisa memutar file .swf.

3.2.3 Storyboard

Scen e GUI Narasi Keterangan 1 Menampilkan halaman utama. Tombol yang disediakan: - Jika di klik tombol Mulai maka menuju ke scene 2. - Jika diklik tombol Glosarium maka menuju ke scene 3 - Jika di klik tombol petunjuk maka menuju ke scene 4. Fotosintesis glosarium petunjuk Mulai fotosintesis keluar Gambar pohon Gambar matahari evaluasi - Jika di klik tombol evaluasi, maka menuju ke scene 5 - Jika di klik keluar maka menutup keluar dari aplikasi menuju ke scene 6 Gambar: matahari, pohon dan papan fotosintesis Teks: Judul Fotosintesis Animasi: Matahari bergerak. Durasi: - 2.1 Banyak manfaat yang dapat kita rasakan dari tumbuhan, antara lain; buah yang bisa kita makan, batang tumbuhan besar yang bisa kita gunakan untuk bahan bangunan, dan oksigen yang kita hirup setiap hari. Menampilkan animasi manfaat tumbuhan bagi kehidupan manusia. Tombol: - Kembali Jika dipilih tombol kembali maka akan menuju ke scene 1 - Ulang Jika diklik tombol ulang maka aplikasi akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi Gambar pohon Gambar buah gambar gas O2 gambar rumah kembali lanjut ulang akan melanjutkan kembali materi yang telah disiapkan. Teks: - Gambar buah, pohon, gas O2 Animasi: gambar buah, rumah, gas CO2 muncul perlahan secara bersama dan dijelaskan satu per satu manfaatnya kemudian menghilang secara perlahan. Audio: manfaat.mp3 Durasi: -

2.2 Fotosintesis

merupakan siklus terpenting dari tumbuhan. Fotosintesis terdiri dari kata foto dan synthesis, yang berarti suatu penyusunan senyawa kimia kompleks yang memerlukan energi cahaya. Aplikasi mencoba menjelaskan pengertian fotosintesis. Tombol: - Kembali Jika dipilih tombol kembali maka akan menuju ke scene 1 - Ulang Jika diklik tombol ulang maka aplikasi akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi akan melanjutkan Apa itu fotosinteis? Animasi kata fotosintesis kembali lanjut ulang kembali materi yang telah disiapkan. Teks: judul apa itu fotosintesis? Gambar: - Animasi: Kata foto dan sintesis muncul secara terpisah dan dijelaskan satu per satu. Kemudian kata tersebut disatukan membentuk kata baru “Fotosintesis” dan dijelaskan. Audio : fotosintesis.mp3 Durasi: - 2.3 Tumbuhnan akan mencari air dan unsur hara menggunakan akar kemudian diangkut menggunakan pembuluh angkut xylem menuju ke daun. Lapisan luar daun menyerap energy matahari dan udara karbon dioksida melalui stoma, setelah semua bahan terpenuhi maka terjadilah proses fotosintesis dengan menghasilkan oksigen dan glukosa yang dimanfaatkan oleh tumbuhan itu sendiri. aplikasi mencoba menjelaskan bahan yang dibutuhkan untuk proses fotosintesis. Tombol: - Kembali Jika dipilih tombol kembali maka akan menuju ke scene 1 - Ulang Jika diklik tombol ulang maka aplikasi akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi Gambar pohon Gambar matahari gambar tanah gambar air gambar CO2 kembali lanjut ulang akan melanjutkan kembali materi yang telah disiapkan. Teks: - Gambar: matahari, tanah, gas CO2, air. Animasi: gambar tanah, matahari, CO2, dan air muncul serta di berikan tanda panah menuju ke tanaman, hal ini bertujuan bahwa tumbuhan memerlukan bahan – bahan tersebut. Setelah itu gambar mulai menghilang secara perlahan. Audio: pengumpulan bahan.mp3 Durasi: - 2.4 Tumbuhnan akan mencari air dan unsur hara menggunakan akar kemudian diangkut menggunakan pembuluh angkut xylem menuju ke daun. Lapisan luar daun menyerap energy matahari dan udara karbon dioksida melalui stoma, setelah semua bahan terpenuhi maka terjadilah proses fotosintesis dengan menghasilkan Aplikasi mencoba menjelaskan bahan yang dihasilkan selama proses fotosintesis terjadi. Tombol: - Kembali Jika dipilih tombol kembali maka akan menuju ke scene 1 - Ulang Jika diklik tombol ulang maka aplikasi Gambar pohon gambar O2 Gambar glukosa kembali lanjut ulang oksigen dan glukosa yang dimanfaatkan oleh tumbuhan itu sendiri. Apabila tumbuhan kelebihan glukosa maka tumbuhan tersebut akan menghasilkan buah. akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi akan melanjutkan kembali materi yang telah disiapkan. Teks: - Gambar: glukosa dan gas O2 Animasi: gambar O2 dan glukosa muncul secara perlahan, disertai tanda panah keluar dari tumbuhan, hal ini sebagai penanda bahwa tumbuhan menghasilkan glukosa dan gas O2. Setelah itu menghilang secara perlahan. Audio: pengumpulan bahan.mp3 dan lebih glukosa.mp3 Durasi: - 2.5 Berikut rumus kimia dari fotosintesis..6co2 + 6h2o + energy matahari dengan bantuan klorofil menghasikan glukosa c6h12o6 dan 6oksigen Aplikasi menyajikan rumus kimia dari proses fotosintesis. Tombol: - Kembali Jika dipilih tombol kembali maka akan menuju ke scene 1 Rumus kimia 6CO2 + 6H2O + energi cahaya 6H12O6 + 6O2 klorofil kembali lanjut ulang - Ulang Jika diklik tombol ulang maka aplikasi akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi akan melanjutkan kembali materi yang telah disiapkan. Gambar: - Teks: rumus kimia fotosintesis, 6CO 2 + 6H 2 O + energi cahaya dengan bantuan klorofil menjadi C 6 H 12 O 6 + 6O 2 Animasi : tulisan “rumus kimia ” muncul dari atas dengan effect alpha, untuk rumusnya sendiri muncul satu persatu dari effect blur. Audio: rumus kimia.mp3 Durasi: - 2.7 Coba perhatikan potongan dari daun berikut setelah diperbesar menggunakan mikroskop. Aplikasi mencoba menjelaskan bagian dimana proses fotosintesis itu berlangsung. Tombol: - Kembali Jika dipilih tombol kembali Gambar pohon Gambar daun Kaca mikro skop kembali lanjut ulang maka akan menuju ke scene 1 - Ulang Jika diklik tombol ulang maka aplikasi akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi akan melanjutkan kembali materi yang telah disiapkan. Gambar: pohon, daun, mikroskop. Animasi: pertama gambar pohon memisahkan daunnya satu, kemudian kaca pembesar memfokuskan pada daun tersebut, sehingga efek diperbesar dimulai. Audio: bagian daun1.mp3 Durasi: 2.8 bagian yang dimiliki daun antara lain: kultikula, epidermis atas, jaringan tiang, xylem, floem, epidermis bawah, jaringan pelindung, jaringan bunga karang dan stroma. Aplikasi ini menjelaskan bagian jaringan yang menyusun daun beserta fungsi – fungsinya. Tombol: - Kembali Jika dipilih tombol kembali maka akan jaringan penyusun daun Gambar potong melintang daun kembali lanjut ulang menuju ke scene 1 - Ulang Jika diklik tombol ulang maka aplikasi akan mengulang pembahasan materi tersebut - Lanjut Jika diklik tombol lanjut maka aplikasi akan melanjutkan kembali materi yang telah disiapkan. Gambar: daun potong melintang Teks: jaringan yang penyusun daun. Animasi: setiap jaringan diberi nama dan penunjuk. Audio: kultikula.mp3, epidermis atas.mp3, jaringan tiang.mp3, xylem.mp3, floem.mp3, epidermis bawah.mp3, jaringan pelindung.mp3, jaringan bunga karang.mp3 dan stoma.mp3 Durasi: - 2.10 Fotosintesis terjadi di bagian kloroplas; perhatikan proses fotosintesis berikut; mula- mula kloroplas mendapat sinar matahari yang menggerakkan electron, kemudian h2o atau air tersedia dalam granum dibantu elktron dan NADP + menhasilkan NADPH dan oksigen, disinilah air terurai menjadi oksigen. Kemudian adp dan fosfat menuju granum menghasilkan Aplikasi menampilkan proses fotosintesis I dan fotosintesis II. Tombol: - Jika di klik tombol kembali maka halaman kembali ke scene 1. - Jika diklik “ulang” maka animasi akan dimulai pada scene 2.10 Gambar: kloroplas Animasi: aliran fotosintesis yang terjadi selama fotosintesis I Proses fotosintesis dalam kloroplas Proses fotosintesis kembali ulang ATP, proses ini sering disebut phosphorilasi. Proses ini disebut juga sebagai fotosintesis reaksi terang karena membutuhkan sinar matahari secara langsung. Kemudian udara co2 atau karbondioksida masuk stroma yang mebutuhkan NADPH dan ATP untuk mengurai menjadi glukosa, NADP+ dan ADP + fosfat. Proses ini disebut siklus kelvin. dan fotosintesis II. Audio: fotosintesisI.mp 3, fotosintesisII.m p3 durasi: - 3 Menampilkan halaman istilah kata yang telah disediakan. Tombol: - Jika di klik tombol kembali, maka menu glosarium menutup dan kembali ke scene 1. - Jika user memilih salah satu istilah yang terdapat pada glosarium maka aplikasi akan memberikan informasi dari kata yang telah Cari Daftar istilah keterangan kembali dipilih Gambar: - Teks: judul Glosarium Animasi: - Audio: - 4 Menampilkan halaman petunjuk penggunaan tombol. - Jika di tekan tombol kembali maka menu petunjuk menutup dan kembali ke scene 1. - Jika ditekan tombol lanjut maka menu petunjuk PETUNJUK kembali lanjut menampilkan petunjuk berikutnya Gambar: - Teks: judul Petunjuk 5.1 Menampilkan halaman evaluasi yang menggunakan drop target yang sudah ditentukan letaknya, user akan diberikan nama bagian dari daun dan meletakan pada tempat yang sudah ditentukan. Tombol: - jika diklik back maka kembali ke Gambar bagian dari daun nama kembali lanjut scene 1. - jika di kill tombol next menuju ke scene 5.2 Animasi: darg dan drop Audio: - Durasi: - 5.2 Menampilkan halaman evaluasi lanjutan, evaluasi ini berbentuk pilihan ganda, sehingga user dapat memilih salah satu jawaban yang benar. Tidak ada penghitungan score. Tombol : peratanyaan jawaban jawaban jawaban kembali lanjut - jika user memilih salah satu jawaban akan muncul peringatan apakah jawaban tersebut benar atau salah. - jika user memilih tombol back maka kembali ke scene 1. - jika user memilih tombol next maka muncul pertanyaan yang baru sampai tidak ada tombol next lagi. Animasi: - Audio: - Durasi: - 6 Menampilkan pesan menutup aplikasi, pengguna disajikan 2 pilihan “ya” dan “tidak”. Hal ini bertunjuan untuk menanggulangi kesalahan pengguna yang secara tidak sengaja memilih tombol keluar. Tombol: - Jika pengguna Apakah anda ingin mengakhiri? ya tidak menekan tombol “ya” maka aplikasi menutup. - Jika pengguna menekan tombol tidak” maka kembali ke scene 1 Gambar: - Teks: peringatan “Apakah anda ingin mengakhiri” Animasi: peringatan muncul secara perlahan. Audio: - Durasi: - Tabel 3.1 : Storyboard

3.2.4 Diagram Use Case

userpengguna mulai fotosintesis petunjuk glosarium evaluasi keluar Aplikasi visualisasi fotosintesis berbasis multimedia Gambar 3.1 : Gambar Diagram Use Case

3.2.5 Use Case Narrative

Nama Use Case : mulai fotosintesis Primary actor : User Deskripsi : aplikasi menampilkan visualisasi fotosintesis Pre-kondisi : User telah masuk ke dalam menu utama Skenario : Aksi Aktor Reaksi Sistem Skenario Normal : 1. Tampilkan menu utama 2. Memilih mulai fotosintesis 3. Menampilkan halaman visualisasi fotosintesis 4. Memilih lanjut 5. Klik lanjut 6. Melanjutkan visualisasi fotosintesis 7. Memilih ulang 8. Klik ulang 9. Mengulang yang selesai divisualisasikan 10. Jika di klik “Kembali” Sekenario Alternatif 11. Kembali ke menu utama Tabel 3.2: Use case narrative mulai fotosintesis Nama Use Case : petunjuk Primary actor : User Deskripsi : aplikasi menampilkan petunjuk penggunaan aplikasi Pre-kondisi : User telah masuk ke dalam menu utama Skenario : Aksi Aktor Reaksi Sistem Skenario Normal : 1. Tampilkan menu utama 2. Memilih petunjuk 3. Menampilkan halaman petunjuk penggunaan aplikasi 4. Memilih lanjut 5. Klik lanjut 6. Melanjutkan petunjuk yang selanjutnya 7. Memilih kembali 8. Klik kembali 9. Kembali ke petunjuk yang sebelumnya 10. Jika di klik “Kembali” Sekenario Alternatif 11. Kembali ke menu utama Tabel 3.3: Use case narrative petunjuk Nama Use Case : glosarium Primary actor : User Deskripsi : aplikasi menampilkan halaman glosarium Pre-kondisi : User telah masuk ke dalam menu utama Skenario : Aksi Aktor Reaksi Sistem Skenario Normal : 1. Tampilkan menu utama 2. Memilih glosarium 3. Menampilkan halaman glosarium 4. Memilih istilah yang disediakan 5. Menampilkan penjelasan istilah yang dipilih 6. Jika di klik “Kembali” Sekenario Alternatif 7. Kembali ke menu utama Tabel 3.4: Use case narrative glosarium Nama Use Case : evaluasi Primary actor : User Deskripsi : apliaski menampilkan halaman evaluasi Pre-kondisi : User telah masuk ke dalam menu utama Skenario : Aksi Aktor Reaksi Sistem Skenario Normal : 1. Tampilkan menu utama 2. Memilih evaluasi 3. Menampilkan halaman evaluasi bagian drag dan drop istilah 4. Men-drag dan drop istilah yang muncul 5. Mencocokan istilah dengan letak yang seharusnya sudah ditentukan, jika benar maka istilah masuk, jika salah istilah kembali ke posisi awal, dan jika istilah seudah tidak ada lagi maka lanjut ke pertanyaan pilihan ganda 6. Memilih lanjut 7. Klik lanjut 8. Menampilkan halaman evaluasi pilihan ganda 9. Memilih jawaban 10. Jika benar aplikasi merespon benar, jika salah aplikasi merespon salah. 11. Memilih ulang 12. klik ulang 13. Aplikasi akan mereset ulang jawaban 14. Memilih lanjut 15. Klik lanjut 16. Aplikasi melanjutkan pertanyaan yang selanjutnya 17. Jika di klik “Kembali” Sekenario Alternatif 18. Kembali ke menu utama Tabel 3.5: Use case narrative evaluasi Nama Use Case : keluar Primary actor : User Deskripsi : aplikasi keluar Pre-kondisi : User telah masuk ke dalam menu utama Skenario : Aksi Aktor Reaksi Sistem Skenario Normal : 1. Tampilkan menu utama 2. Memilih keluar 3. Menampilkan peringatan “ya” dan “tidak” 4. Memilih tidak 5. Klik tidak 6. Peringatan hilang 7. Memilih ya 8. Klik ya 9. Aplikasi menutup Tabel 3.6: Use case narrative keluar

3.2.6 Activity Diagram

3.2.6.1 Activity Diagram Mulai Fotosintesis kembali lanjut ulang ulang ulang ulang ulang kembali kembali kembali kembali lanjut lanjut Mulai Visualisasi manfaat tumbuhan bahan dan hasil fotosintesis Rumus kimia fotosintesis Bagian daun Proses fotosintesis di kloroplas selesai visualisasi lanjut Gambar 3.2: Gambar Activity diagram mulai fotosintesis 3.2.6.2 Activity Diagram Petunjuk lanjut Pilih petunjuk Petunjuk Halaman awal Petunjuk menu visualisasi Petunjuk glosarium Petunjuk Evaluasi drag Dan drop Petunjuk evaluasi pilihan ganda selesai visualisasi lanjut lanjut lanjut kembali kembali kembali kembali kembali Gambar 3.3: Gambar Activity diagram petunjuk 3.2.6.3 Activity Diagram Glosarium Pilih glosarium selesai glosarium Tampilkan penjelasan Pilih istilah Gambar 3.4: Gambar Activity diagram glosarium 3.2.6.4 Activity Diagram Evaluasi Pilih evaluasi selesai evaluasi Soal pilihan ganda Menyelesaikan Soal Drag dan drop kembali kembali lanjut lanjut go Gambar 3.5: Gambar Activity diagram mulai fotosintesis 3.2.6.5 Activity Diagram Keluar Pilih keluar Aplikasi menutup Peringatan menutup Klik tombol ya Klik tombol tidak Gambar 3.6: Gambar Activity diagram keluar

3.3 Material Collecting