BAB III ANALISA DAN PERANCANGAN. Pada Tugas Akhir ini akan di rancang Sebuah Aplikasi Pembelajaran Turunan Fungsi

dokumen-dokumen yang mirip
BAB III ANALISA DAN PERANCANGAN. Pada tugas akhir ini akan dirancang sebuah aplikasi Pembelajaran Berbasis

BAB III ANALISA DAN PERANCANGAN. menampilkan teks - teks serta terdapat kuis dengan animasi untuk melatih para

BAB III ANALISA DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM. dalam belajar dan mengenal subnetting dengan bantuan aplikasi,

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III KONSEP APLIKASI DAN PERANCANGAN. 3.1 Konsep Aplikasi Dalam membangun Aplikasi Multimedia Pembelajaran Otomotif dan

BAB III ANALISA DAN PERANCANGAN

BAB III KONSEP DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA, KONSEP DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS, KONSEP DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III KONSEP DAN PERANCANGAN


BAB III ANALISA DAN PERANCANGAN SISTEM. 3.1 Konsep Aplikasi Interaktif Panduan Pengguna TransJakarta

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERENCANAAN. Rabies merupakan penyakit hewan menular yang disebabkan oleh virus dan

BAB III ANALISA DAN PERANCANGAN. Dalam tugas akhir ini, akan dibuat sebuah aplikasi pembelajaran

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN. Pada tahap konsep, penulis menentukan kebutuhan dasar pengguna (user),

BAB III ANALISIS, KONSEP DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III KONSEP, PERANCANGAN, DAN PENGUMPULAN MATERI

BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISA DAN PERANCANGAN

BAB III KONSEP DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA PERANCANGAN DAN PEMODELAN SISTEM

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISA DAN PERANCANGAN

PERANCANGAN APLIKASI PEMBELAJARAN TURUNAN FUNGSI ALJABAR BERBASIS MULTIMEDIA UNTUK SEKOLAH MENENGAH ATAS KELAS XI RACHMAT PUJIONO

BAB III ANALISA MASALAH DAN PERANCANGAN

BAB III. Analisa dan Perancangan

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III KONSEP, DESAIN DAN PENGUMPULAN MATERI


BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

Pada bagian ini penulis akan menganalisa kebutuhan kebutuhan dalam. membuat aplikasi ini. Setelah semua kebutuhan selesai dianalisa, maka penulis

BAB III ANALISIS DAN PERANCANGAN. Deskripsi konsep aplikasi game adalah sebagai berikut:

BAB IV ANALISA DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB III ANALISA DAN PERANCANGAN


BAB 3 ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISA DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB 3 ANALISIS DAN PERANCANGAN APLIKASI PEMBELAJARAN FISIKA SMA KELAS 2

BAB III ANALISIS DAN PERANCANGAN

BAB III KONSEP, DESAIN DAN PENGUMPULAN MATERI

BAB IV HASIL DAN UJI COBA

Bab 3 Metode dan Perancangan Sistem 3.1 Metode Penelitian

BAB III ANALISA MASALAH DAN RANCANGAN PROGRAM

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS MASALAH DAN RANCANGAN PROGRAM

BAB III ANALISIS MASALAH DAN PERANCANGAN PROGRAM

datanya. Hasil User dapat melanjutkan aktivitas selanjutnya setelah memilih File yang diinginkan. 2. Use Case Menyisipkan Teks Table 4-2 Deskripsi Use

BAB 3 PERANCANGAN ANIMASI. Operasi matematika pada taman kanak-kanak. Dengan menggunakan perancangan,

BAB III PERANCANGAN SISTEM

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN


BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISA DAN PERANCANGAN


BAB III ANALISA DAN PERANCANGAN

Transkripsi:

BAB III ANALISA DAN PERANCANGAN 3.1 Analisis Sistem Pada Tugas Akhir ini akan di rancang Sebuah Aplikasi Pembelajaran Turunan Fungsi Aljabar berbasis Multimedia, yaitu suatu Aplikasi yang membantu User atau pengguna disini para Siswa/i Sekolah Menengah Atas kelas XI dalam mempelajari dan memahami turunan fungsi aljabar dengan bantuan komputer, dimana materi dan soal soal yang diberikan dirancang secara interaktif dan menarik sehingga pengguna aplikasi ini tidak merasa bosan ataupun jenuh dengan aplikasi ini. Aplikasi ini menampilkan rumus, soal soal Latihan dan penyelesaiannya serta terdapat Kuis dengan animasi untuk melatih para siswa/i dalam belajar yang di sertai dengan suara-suara yang dapat menarik pengguna untuk melihatnya. 3.2 Metode Pembuatan Aplikasi 3.2.1. Konsep Aplikasi Pembelajaran Turunan pokok bahasan Turunan Fungsi Aljabar berbasis Multimedia ini berisi tentang materi,rumus dan soal soal Turunan Fungsi Aljabar yang di kemas secara Interaktif dan menarik. Deskripsi konsep aplikasi ini adalah sebagai berikut : Judul : Perancangan Aplikasi Pembelajaran Turunan Fungsi Aljabar berbasis Multimedia untuk Sekolah Menegah Atas Kelas XI 33

34 Audiens : Pelajar SMA Kelas XI Bentuk Aplikasi : Media Pembelajaran Interaktif. Gambar : Menggunakan file berformat JPEG dan PNG. Audio : Menggunakan file WAV dan MP3. Animasi : Animasi gambar dan tombol dibuat oleh penulis dan sebagian diperoleh dari internet. Interaktif: Menggunakan link berupa tombol (button) yang memungkinkan user menuju ke halaman yang diinginkan. 3.3 Perancangan Pada tahap ini penulis melakukan perancangan aplikasi berupa perancangan Struktur Navigasi, Storyboard, Use case diagram, Activity Diagram, Sequence Diagram, dan perancangan antar muka (user interface). 1. Judul Pada halaman Judul ini di beri tombol masuk dan user di arahkan untuk menekan tombol masuk yang akan membawanya masuk ke halaman home (Menu Utama).

35 2. Menu Utama Pada halaman home / Menu Utama ini di beri tombol Materi,tombol Soal Soal, tombol Profil, tombol Kuis, dan tombol Keluar. 3. Menu Materi Pada halaman Materi pengguna (user) di arahkan untuk mengetahui, mempelajari dan memahami penggunaan rumus rumus turunan fungsi aljabar 4. Menu Soal Soal Pada halaman Soal pengguna (user) dapat melihat soal soal turunan fungsi aljabar dan penyelesaiannya untuk melatih pengguna dalam mengerjakan soalsoal turunan fungsi aljabar. 5. Profil Pada halaman Profil, bertujuan mengetahui informasi data - data penulis dan foto penulis. 6. Menu Kuis Pada halaman Kuis, Setelah pengguna (user) membaca penjelasan dari halaman materi dan melihat soal soal tentang turunan fungsi aljabar maka user lebih diarahkan untuk mengerjakan latihan soal Kuis. Bertujuan untuk mengetahui sejauh mana user memahami turunan fungsi aljabar. 7. Menu Keluar Pada halaman Keluar, diarahkan untuk memilih apakah ingin keluar dari aplikasi atau kembali ke halaman menu utama.

36 3.3.1. Perancangan Struktur Navigasi Perancangan struktur navigasi ini sangat penting didalam membuat suatu aplikasi. Struktur navigasi ini merupakan arah dari perjalanan aplikasi ini, struktur navigasi ini dibuat untuk dapat membantu penulis menentukan alur perjalanan serta acuan pembuatan aplikasi dari awal hingga akhir. Berikut rancangan struktur navigasi : JUDUL Menu Utama Materi Soal Soal Profil Kuis Keluar Gambar 3.1 Diagram Struktur Navigasi 3.3.2. Perancangan Storyboard Storyboard merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan pencantuman semua objek atau elemen multimedia serta komponen -komponen aplikasi yang akan dibuat. Satu kolom dalam storyboard mewakili satu tampilan dilayar monitor.

37 1. Storyboard Halaman Judul APLIKASI PEMBELAJARAN : TURUNAN FUNGSI ALJABAR 1. Masukan Nama Anda 2 3 MASUK 4 Gambar 3.2 Storyboard Halaman Judul Keterangan : 1. Judul : Aplikasi Pembelajaran Turunan Fungsi Aljabar 2. Teks : Masukan nama anda 3. Untuk Input text/nama 4. Button untuk masuk aplikasi

38 2. Storyboard Halaman Menu Utama User; Judul Aplikasi 5 Hari, Tanggal dan Jam HOME 6 7 8 9 10 11 Gambar 3.3 Storyboard Halaman Menu Utama Keterangan : 5. Judul : Aplikasi Pembelajaran Turunan Fungsi Aljabar 6. Animasi 7. Tombol Materi 8. Tombol Soal Soal 9. Tombol Profil 10. Tombol Kuis 11. Tombol Keluar

39 3. Storyboard Halaman Menu Materi Judul Aplikasi User; Hari, Tanggal dan Jam MATERI 12 13 14 15 Gambar 3.4 Storyboard Halaman Menu Materi Keterangan : 12. Materi : Materi 1 13. Materi : Materi 2 14. Materi : Materi 3 15. Tombol Kembali ke Halaman Menu Utama.

40 4. Storyboard Halaman Menu Soal Soal Latihan Soal 16 17 18 21 19 20 22 23 24 Gambar 3.5 Storyboard Halaman Menu Soal Soal Keterangan : 16. Teks Soal Latihan 17. Pilihan Jawaban A 18. Pilihan Jawaban B 19. Pilihan Jawaban C 20. Pilihan Jawaban D 21. Animasi Jawaban Soal 22. Tombol Pembahasan Jawaban Soal 23. Tombol Kembali ke Halaman Menu Utama. 24. Tombol menuju Soal Selanjutnya.

41 5. Storyboard Setelah klik Tombol 22 (Pembahasan Jawaban Soal) Latihan Soal 25 26 27 Gambar 3.6 Storyboard Setelah klik Tombol 22 (Pembahasan Jawaban Soal) Keterangan : 25. Teks Soal Latihan 26. Pembahasan Jawaban Soal 27. Tombol kembali ke Latihan soal 6. Storyboard Halaman Profil 28 30 29 Gambar 3.7 Storyboard Halaman Profil Keterangan : 28. Text Biodata Penulis 29. Photo Profil 30. Tombol Kembali ke Menu Utama

42 7. Storyboard Halaman Menu Kuis KUIS 31 32 Gambar 3.8 Storyboard Halaman Menu Kuis Keterangan : 31. Teks Petunjuk Mengerjakan kuis 32. Tombol (button) Menuju Halaman isian data Peserta Kuis 8. Storyboard Setelah klik button Nomer 32 Nama : 33 Kelas : 34 Nomer : 35 36 Gambar 3.9 Storyboard Setelah klik button Nomer 32

43 Keterangan : 33. Data Nama Peserta Kuis 34. Data Tingkatan Kelas Peserta Kuis 35. Data Nomer Peserta Kuis 36. Tombol (button) Memulai Kuis 9. Storyboard Setelah klik button 36 (memulai Kuis) 37 38 39 40 41 42 Keterangan : Gambar 3.10 Storyboard Setelah klik button 36 (memulai Kuis) 37. Text Soal Kuis 38. Pilihan Jawaban Kuis : Jawaban A 39. Pilihan Jawaban Kuis : Jawaban B 40. Pilihan Jawaban Kuis : Jawaban C 41. Pilihan Jawaban Kuis : Jawaban D 42. Pilihan Jawaban Kuis : Jawaban E

44 10. Storyboard Setelah Selesai Mengerjakan Kuis Skor Hasil Kuis Nama : Kelas : Nomer : 43 44 45 Skor : 46 47 Keterangan : Gambar 3.11 Storyboard Setelah Selesai Mengerjakan Kuis 43. Data Nama Peserta Kuis 44. Data Tingkatan Kelas Peserta Kuis 45. Data Nomer Peserta Kuis 46. Data Skor yang di peroleh Peserta Kuis 47. Tombol (button) untuk kembali ke menu utama 11. Storyboard Halaman Menu Keluar 48 49 50 Gambar 3.12 Storyboard Halaman Menu Keluar

45 Keterangan : 48. Teks : Apakah anda ingin keluar? 49. Ya : Untuk keluar dari aplikasi 50. Tidak : Untuk kembali ke aplikasi 3.3.3. Perancangan Use Case Diagram Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Yang ditekankan adalah apa yang diperbuat sistem, dan bukan bagaimana. Use case diagram mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (Fowler, 2005:141). Diagram ini menunjukkan fungsionalitas suatu sistem dan bagaimana sistem berinteraksi dengan dunia luar. Materi Soal Soal Profil Pengguna (User) Kuis Keluar Gambar 3.13 Use Case Diagram Aktor utama pada aplikasi ini adalah user. Dari identifikasi aktor tersebut, didapatkan suatu usecase diagram yang menampilkan interaksi antara user / pengguna dengan usecase. Sehingga terjadinya skenario.

46 Berikut adalah deskripsi use case yang telah digambarkan di atas: 1. Materi Nama : Materi Aktor : User Deskripsi : Disini user dapat memperoleh penjelasan tentang materi dan rumus tentang turunan fungsi aljabar Skenario : a. ketika user mengklik / menekan tombol materi b. maka sistem akan menampilkan halaman materi c. sistem akan menampilkan halaman yang dipilih oleh user 2. Soal Soal Nama : Soal Soal Aktor Deskripsi : : User user dapat berlatih mengerjakan soal soal tentang turunan fungsi aljabar yang telah di sediakan lengkap dengan cara menyelesaikan nya. Skenario : a. ketika user mengklik / menekan tombol soal b. maka sistem akan menampilkan halaman soal nomer 1 c. sistem akan menampilkan halaman yang dipilih oleh user 3. Profil Nama Aktor Deskripsi : : Kuis : User Disini user dapat mengetahui data dan informasi dari penulis ( pembuat aplikasi ) Skenario : a. ketika user mengklik / menekan tombol Profil b. maka sistem akan menampilkan halaman profil c. sistem akan menampilkan halaman yang dipilih oleh user 4. Kuis Nama Aktor : Kuis : User

47 Deskripsi : Disini user dapat mencoba mengerjakan soal kuis yang sudah disediakan oleh sistem tentang turunan fungsi aljabar tentang mata kuliah sistem tersebar. Skenario : a. ketika user mengklik / menekan tombol Kuis b. maka sistem akan menampilkan halaman Kuis c. sistem akan menampilkan halaman yang dipilih oleh user d. pengguna (user) menjawab soal pilihan ganda. e. Setelah user menyelesaikan seluruh soal yang ada sampai akhir, lalu sistem akan menampilkan jumlah skor pengguna 5. Keluar Nama : Keluar Aktor : User Deskripsi : Disini user dapat keluar dari aplikasi yang sedang berjalan. Skenario : a. ketika user mengklik / menekan tombol Keluar b. maka sistem akan menampilkan halaman keluar c. sistem akan menampilkan halaman yang dipilih oleh user 3.3.4. Perancangan Activity Diagram Activity Diagram menunjukkan langkah demi langkah untuk melakukan komputasi. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Diagram ini menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah yang mana yang bisa dijalankan secara bersamaan.

48 1. Perancangan Activity Diagram Untuk Halaman Judul Aktifitas dimulai ketika pengguna menjalankan aplikasi dan sistem menampilkan halaman judul aktifitas selanjutnya adalah user memasukkan namanya kemudian menekan tombol masuk. USER SISTEM Menjalankan aplikasi Menampilkan Halaman Judul Memasukan Nama Tidak User Input Nama...? Ya Memilih Masuk Gambar 3.14 Activity Diagram Halaman Judul

49 2. Perancangan Activity Diagram Untuk Halaman Menu Utama Aktifitas dimulai ketika pengguna memilih masuk, kemudian sistem menampilkan halaman Menu Utama, aktifitas selanjutnya adalah memilih menu yang terdiri dari Materi, Soal Soal, Kuis, Profil dan Keluar. Kemudian sistem akan menampilkan halaman menu yang dipilih. USER SISTEM Memilih Masuk Menampilkan halaman Menu Utama Memilih Menu Pilih Menu Materi Soal Profil Kuis Keluar Menampilkan halaman yang dipilih Gambar 3.15 Activity Diagram Halaman Menu Utama

50 3. Perancangan Activity Diagram Untuk Halaman Menu Materi Aktifitas dimulai ketika pengguna memilih tombol materi. Selanjutnya sistem akan menampilkan halaman materi. Aktivitas selanjutnya adalah memilih menu materi yang sudah disediakan oleh sistem. Kemudian sistem akan menampilkan halaman menu yang dipilih. USER SISTEM Memilih menu materi Menampilkan halaman materi Materi 1 Memilih Pilihan Materi Materi 2 Materi 3 Menampilkan Halaman Materi yang dipilih Gambar 3.16 Activity Diagram Halaman Menu Materi 4. Perancangan Activity Diagram Untuk Halaman Menu Soal Soal Aktifitas dimulai ketika pengguna memilih tombol Soal Soal. Selanjutnya sistem akan menampilkan halaman soal pertama. aktifitas selanjutnya memilih Jawaban Soal yang berupa pilihan ganda, apabila pilihan jawaban pengguna (user) salah maka sistem akan menampilkan pembahasan jawaban soal yang benar namun jika jawaban pengguna sudah benar maka pengguna mencoba menjawab soal selanjutnya dan begitu seterusnya hingga soal selesai.

51 USER SISTEM Memilih Menu Soal Soal Menampilkan Soal ke 1 Menampilkan Soal ke 2 Memilih Jawaban Menampilkan Soal ke 3 Menampilkan Soal ke 4 Menampilkan Soal ke 5 Cek Jawaban Benar Salah Memilih Pembahasan Soal Menampilkan Pembahasan Soal Gambar 3.17 Activity Diagram Halaman Menu Soal Soal

52 5. Perancangan Activity Diagram Untuk Halaman Menu Profil Aktifitas dimulai ketika pengguna (user) memilih menu Profil kemudian sistem akan menampilkan halaman Profil yang berisi biodata lengkap di sertai foto pembuat aplikasi, aktifitas selanjutnya user dapat memilih tombol home untuk kembali menuju menu utama. USER SISTEM Memilih menu Profil Menampilkan halaman Profil Memilih tombol home Pilihan Pengguna? tidak ya Menampilkan Halaman Menu Utama Gambar 3.18 Activity Diagram Halaman Profil 6. Perancangan Activity Diagram Untuk Halaman Menu Kuis Aktifitas dimulai ketika pengguna memilih menu Kuis, kemudian sistem menampilkan halaman Kuis, aktifitas selanjutnya adalah memilih tombol next untuk lanjut ke halaman selanjutnya yaitu halaman isian biodata peserta kuis,

53 aktifitas selanjutnya adalah memilih tombol next lagi untuk memulai Kuis, sistem menampilkan halaman soal pertama. Setelah itu pengguna menjawab soal dan sistem menampilkan soal berikutnya dan begitu seterusnya hingga soal selesai dan sistem menampilkan halaman nilai (skor kuis) anda. USER SISTEM Memilih Menu Kuis Menampilkan Halaman Kuis Memilih Tombol Next Menampilkan Halaman isian biodata peserta kuis Mengisi biodata peserta kuis Memilih Tombol Masuk Menampilkan Soal Kuis ke 1 Memilih jawaban 1 Gambar 3.19 Activity Diagram Halaman Menu Kuis

54 1 Menampilkan Soal Kuis ke 2 Memilih jawaban Menampilkan Soal Kuis ke 3 Memilih jawaban Menampilkan Soal Kuis ke 4 Memilih jawaban Menampilkan Soal Kuis ke 5 Memilih jawaban Menampilkan Soal Kuis ke 6 Memilih jawaban Menampilkan Soal Kuis ke 7 Memilih jawaban Menampilkan Soal Kuis ke 8 Memilih jawaban Menampilkan Soal Kuis ke 9 Memilih jawaban Menampilkan Soal Kuis ke 10 Memilih jawaban Menampilkan Jumlah Skor peserta Kuis Gambar 3.20Activity Diagram Halaman Menu Kuis

55 7. Perancangan Activity Diagram Untuk Halaman Menu Keluar Aktifitas dimulai ketika pengguna (user) memilih menu Keluar kemudian sistem akan menampilkan halaman keluar, aktifitas selanjutnya apabila pengguna ingin keluar aplikasi maka memilih tombol YA dan jika pengguna ingin kembali ke Menu Utama maka memilih tombol TIDAK. USER SISTEM Memilih menu Keluar Menampilkan Halaman Keluar Memilih Tombol YA Keluar dari Aplikasi Memilih Tombol TIDAK Menampilkan Halaman Menu Utama kembali 3.3.5. Perancangan Sequence Diagram Gambar 3.21 Activity Diagram Halaman Menu Keluar. Sebuah Sequence Diagram secara khusus menjabarkan aktivitas sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan-pesan melalui objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat Sequence Diagram.

56 1. Perancangan Sequence Diagram Untuk Halaman Menu Materi Sequence diagram untuk halaman informasi menggambarkan skenario dan langkahlangkah yang dilakukan pengguna. Pertama pengguna masuk ke halaman Menu Utama, kemudian sistem menampilkan halaman Menu Utama, selanjutnya pengguna dapat memilih menu Materi. Kemudian masuk ke halaman yang dipilih maka sistem akan menampilkan halaman yang dipilih User / Pengguna Halaman Menu Utama Halaman Materi Halaman yang di pilih a b c Gambar 3.22 Sequence Diagram Halaman Materi Keterangan : a. User masuk halaman Menu Utama b. Kemudian user memilih menu materi c. Maka system akan menampilkan materi yang dipilih

57 2. Perancangan Sequence Diagram Untuk Halaman Menu Soal Soal Skenario sequence diagram untuk halaman soal di mulai saat pengguna masuk ke halaman menu utama kemudian memilih menu soal dan sistem akan menampilkan halaman soal pertama. selanjutnya pengguna memilih Jawaban Soal, apabila pilihan jawaban pengguna (user) benar maka sistem akan menampilkan pembahasan soal tersebut namun jika jawaban pengguna salah maka pengguna bisa mencoba menjawab kembali soal latihan tersebut dan begitu seterusnya hingga soal selesai. User / Pengguna Halaman Menu Utama Halaman Soal Soal Jawaban Soal yang di pilih Pembahasan Soal A B D E C F Gambar 3.23 Sequence Diagram halaman Menu Soal Soal Keterangan : a. User masuk halaman Menu Utama. b. Kemudian user memilih menu soal. c. Lalu user menjawab soal soal latihan yang sudah tersedia oleh system. d. System akan menampilkan jawaban soal yang di pilih user. e. Jika jawaban salah maka user dapat melihat pembahasan jawaban soal yang benar yang di sediakan oleh system. f. Jika jawaban benar, system akan mengarahkan menuju soal salanjutnya.

58 3. Perancangan Sequence Diagram Untuk Halaman Profil Skenario Sequence Diagram halaman Profil di mulai saat pengguna masuk ke halaman menu utama kemudian memilih menu Profil kemudian sistem akan menampilkan halaman Profil yang berisi biodata lengkap di sertai foto pembuat aplikasi, User / Pengguna Halaman Menu Utama Halaman Profil a b c Gambar 3.24 Sequence Diagram halaman Profil Keterangan : a. User masuk halaman Menu Utama b. Kemudian user memilih menu Profil c. System menampilkan Profil pembuat aplikasi.

59 4. Perancangan Sequence Diagram Untuk Halaman Kuis Sequence Diagram halaman kuis menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman Menu Utama kemudian memilih menu Kuis, kemudian sistem menampilkan petunjuk soal, Halaman isian biodata peserta kuis, lalu sistem akan menampilkan soal untuk dikerjakan, selanjutnya pengguna memilih jawaban, sistem mengecek jawaban, kemudian sistem menampilkan skor kuis. User / Pengguna Halaman Menu Utama Halaman Kuis Isian biodata peserta Kuis Soal Kuis A B C D Keterangan : Gambar 3.25 Sequence Diagram halaman Menu Kuis a. User masuk halaman Menu Utama b. Kemudian user memilih menu Kuis c. User melanjutkan mengisi biodata diri d. Lalu user menjawab soal-soal Kuis yang sudah tersedia oleh system

60 5. Perancangan Sequence Diagram Untuk Halaman Menu Keluar Pada halaman keluar, digambarkan skenario dari langkah langkah yang dilakukan oleh pengguna. Diawali dengan pengguna masuk ke halaman menu utama, kemudian pengguna memilih menu keluar, jika memilih tombol ya maka akan keluar dari aplikasi dan jika menekan tombol tidak maka akan kembali ke halaman utama. User / Pengguna Halaman Menu Utama Halaman Keluar Keluar dari Aplikasi Kembali ke Menu Utama A B C D Gambar 3.26 Sequence Diagram halaman Menu Keluar Keterangan : a. User masuk halaman Menu Utama b. Kemudian user memilih menu Keluar c. User memilih keluar dari aplikasi d. User memilih membatalkan keluar dari aplikasi.

61 3.3.6. Perancangan Antar Muka (user interface). Perancangan antar muka (User interface) disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan. Rancangan dalam aplikasi ini, yaitu: a. Rancangan Halaman Judul Rancangan ini digunakan sebagai tampilan awal yang berisi tampilan judul aplikasi, input nama user dan tombol masuk. Tombol masuk ini digunakan untuk memasuki tampilan halaman Menu Utama. Aplikasi Pembelajaran Turunan Pokok Bahasan : Turunan Fungsi Aljabar Masukan Nama Rachmat Pujiono Masuk Gambar 3.27 Rancangan Halaman Judul

62 b. Rancangan Halaman Menu Utama Rancangan halaman menu utama merupakan tampilan utama yang memuat beberapa objek-objek multimedia animasi, teks, gambar, suara latar dan juga tombol-tombol navigasi. Tombol navigasi dalam tampilan menu utama ini terdiri dari tombol menu Materi, Soal, Kuis, Profil dan menu Keluar, tampilan hari, tanggal, jam, dan nama user juga akan ditampilkan di halaman menu utama dan Materi. Aplikasi Turunan Fungsi Aljabar Nama User hari tgl-jam Animasi Roda Berputar Materi Soal Soal Profil Kuis Keluar Gambar 3.28 Rancangan Halaman Menu Utama c. Rancangan Halaman Menu Materi Rancangan halaman materi merupakan tampilan awal menu materi yang menampilkan beberapa tombol untuk memilih materi yang di inginkan pengguna, dan Tombol Home untuk kembali ke Menu utama.

63 Aplikasi Pembelajaran Turunan Fungsi Aljabar Materi 1 Materi 2 Materi 3 HOME Gambar 3.29 Rancangan Halaman Menu Materi d. Rancangan Halaman Materi 1 Rancangan halaman materi 1 menampilkan materi pertama turunan fungsi aljabar dan menggunakan tombol next and prev untuk menampilkan materi yang di pilih pengguna, tampilan hari, tanggal, jam, dan nama user akan ditampilkan di halaman ini. Nama User hari tgl-jam Materi 1 Text Materi Prev Next Gambar 3.30 Rancangan Halaman Materi 1.

64 e. Rancangan Halaman Materi 2 Rancangan halaman materi 2 sama dengan rancangan materi pertama menampilkan materi turunan fungsi aljabar menggunakan tombol next,prev dan tombol berupa text untuk melihat contoh dalam pembahasan materi 2, tampilan hari, tanggal, jam, dan nama user juga akan ditampilkan di halaman ini. Nama User hari tgl-jam Materi 2 Turunan Fungsi Aljabar Text Materi Contoh...! Prev Gambar 3.31 Rancangan Halaman Materi 2.

65 f. Rancangan Halaman Materi 3 Rancangan halaman materi 3 ini. sama dengan rancangan materi pertama dan kedua yaitu menampilkan materi terakhir turunan fungsi aljabar dan menggunakan tombol next and prev, tampilan hari, tanggal, jam, dan nama user juga akan ditampilkan di halaman ini. Nama User hari tgl-jam Materi 3 Text Materi Prev Next Gambar 3.32 Rancangan Halaman Materi 3.

66 g. Rancangan Halaman Menu Soal Soal Rancangan halaman menu soal soal menampilkan soal latihan turunan fungsi aljabar, soal soal latihan tersebut berupa pilihan ganda yang akan di kerjakan oleh user, pilihan jawaban dapat di pilih salah satu A, B, C atau D yang di anggap benar oleh user, jika jawaban user benar maka akan di tampilkan pembahasan soal tersebut namun bila jawaban salah user dapat memilih jawaban kembali atau melanjutkan menuju soal selanjutnya. 1. Text Soal... Latihan Soal Pilihan Jawaban A Pilihan Jawaban B Animasi Text Pilihan Jawaban C Pilihan Jawaban D PEMBAHASAN Gambar 3.33 Rancangan Halaman Soal Soal.

67 h. Rancangan Halaman Pembahasan Soal Soal Rancangan halaman Pembahasan Soal Soal menampilkan cara menyelesaikan soal latihan turunan fungsi aljabar serta menampilkan tombol kembali menuju halaman soal soal. PEMBAHASAN 1. Text Soal... Jawab : Text Jawaban Jawabanya adalah : A Gambar 3.34 Rancangan Halaman Pembahasan Soal Soal. i. Rancangan Halaman Profil Rancangan halaman profile ini digunakan untuk menampilkan biodata lengkap penulis.yang bersangkutan diserta fotonya dan menampilkan tombol kembali menuju halaman menu utama.

68 Profil Pembuat Nama : Rachmat Pujiono Tmt-Tgl-Lahir : Jakarta, 8-Maret-1987 Jenis Kelamin : Laki Laki Nim : 41506010094 Fakultas : Ilmu Komputer Jurusan : Teknik Informatika UNIVERSITAS MERCUBUANA Pas Foto HOME Gambar 3.35 Rancangan Halaman Profil j. Rancangan Halaman Menu Kuis Rancangan halaman kuis menampilkan soal kuis pilihan ganda yang akan dikerjakan oleh pengguna. Beserta pilihan jawaban yang dapat dipilih salah satu A, B, C, D atau E. yang menurut pengguna jawabannya itu benar.tapi sebelumnya pengguna di arahkan ke petunjuk mengerjakan kuis dan mengisi form isian data peserta kuis dan Tombol Next untuk melanjutkan.

69 KUIS Petunjuk Mengerjakan Kuis : 1.... 2.... 3.... SELAMAT MENGERJAKAN NEXT Gambar 3.36 Rancangan Halaman Kuis (Petunjuk mengerjakan Kuis). Nama : Kelas : Nomor : NB :Isikan Nama, Kelas, dan Nomer pada kotak yg tersedia NEXT Gambar 3.37 Rancangan Halaman Kuis (form isian biodata Peserta Kuis).

70 1. Text Soal... A Jawaban Soal B Jawaban Soal C Jawaban Soal D Jawaban Soal E Jawaban Soal Gambar 3.38 Rancangan Halaman Kuis (soal kuis). Skor Hasil Kuis Nama : Kelas : Nomer : Skor : Ulang Gambar 3.39 Rancangan Halaman Kuis (Hasil kuis).

71 k. Rancangan Menu Outro (Keluar) Rancangan halaman Outro menampilkan tombol keluar dan tombol kembali menuju halaman utama. Anda Ingin Keluar Aplikasi...? YA TIDAK Gambar 3.40 Rancangan Halaman Menu Outro