BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Sistem Analisa sistem merupakan tahapan awal dalam membuat perangkat lunak. Dalam tahap ini penulis menganalisa kebutuhan dasar sistem. Analisa dilakukan terhadap data-data yang merepresentasikan masalah, sehingga dapat diketahui spesifikasi kebutuhan sistem yang akan dibangun. Penulis merancang sebuah aplikasi tentang modul pembelajaran CCNA1. Aplikasi ini terdiri dari materi tentang jaringan komputer dasar yang berhubungan dari alat-alat jaringan, topologi jaringan, ip address, OSI Layer dan subneting. Pembentukan aplikasi ini ditujukan untuk memudahkan mahasiswa fakultas ilmu komputer mempelajari materi tentang CCNA 1. Aplikasi ini menyediakan fiturfitur yang menarik karena berupa suatu aplikasi interaktif dimana di dalam aplikasi ini terdapat animasi-animasi yang berhubungan dengan CCNA 1, sehingga aplikasi ini dapat menurunkan tingkat kejenuhan mahasiswa fakultas ilmu komputer dalam mempelajari jaringan komputer. Penulis merancang bangun aplikasi modul pembelajaran CCNA 1 untuk mahasiswa fakultas ilu komputer ini dengan memasukkan 3 tahap Input Proses Output yang merupakan sistem kerja dari aplikasi tersebut. 3.2 Konsep Rancangan aplikasi modul pembelajaran CCNA 1 untuk mahasiswa fakultas ilmu komputer ini dibuat untuk semua orang pada umumnya dan mahasiswa fakultas ilmu komputer pada khususnya. Aplikasi ini menggunakan teks untuk pembelajaran dan penjelasan, gambar sebagai pembelajaran, dan animasi supaya pengguna tidak bosan. Deskripsi konsep aplikasi ini seperti yang terlihat pada tabel 3.1. 24

25 Tabel 3.1. Deskripsi Konsep Aplikasi Judul Rancang bangun aplikasi modul pembelajaran CCNA 1 untuk mahasiswa Fakultas Ilmu Komputer Pengguna Mahasiswa FASILKOM pada khususnya Gambar Menggunakan file berformat.jpg yang dibuat sendiri Suara Menggunakan file.mp3 Animasi Menggunakan tombol navigasi animasi dan pemanfaatan media suara pada aplikasi Video Menggunakan file.flv Aplikasi ini dimaksudkan untuk mengembangkan proses belajar mengajar yang bersifat manual dan digital menjadi lebih interaktif, mudah dimengerti, dan akan lebih mengasikkan karena lebih menarik. Aplikasi ini bisa digunakan pada komputer atau laptop manapun tidak perlu mengakses internet jadi lebih mudah karena bisa dipakai dimanapun dan kapan saja 3.3 Perancangan Dalam tahap ini akan dijelaskan secara rinci Rancang Bangun Aplikasi Modul Pembelajaran CCNA 1 yang meliputi pemodelan use case diagram, sequence diagram, activity diagram dan class diagram 3.3.1 Pemodelan Diagram Use Case Pada aplikasi pembelajaran CCNA 1 untuk mahasiswa fakultas ilmu komputer ini, dapat diidentifikasi bahwa aktor utamanya adalah user (pengguna). Dari identifikasi aktor tersebut, maka akan didapatkan satu diagram use case dan beberapa skenario yang memperlihatkan interaksi-interaksi use case dengan aktor. Use case diagram aplikasi ini dapat dilihat pada gambar 3.1

26 Aplikasi Gambar 3.1. Diagram Use case Rancang Bangun Aplikasi Modul Pembelajaran CCNA 1 Untuk Mahasiswa Fakultas Ilmu Komputer Berikut adalah deskripsi Use case yang telah digambarkan : Tabel 3.2. Use Case aplikasi modul pembelajaran CCNA 1 Nama Bab Materi Aktor Pengguna Deskripsi Pengguna dapat memilih modul bab 1 sampai 11 dan kuis 1 sampai 4 yang berisikan materi-materi pelajaran CCNA 1. Skenario 1. Pengguna masuk ke halaman depan 2. Sistem masuk ke halaman utama 3. Pengguna memilih menu modul materi 4. Sistem masuk ke halaman materi yang dipilih 5. Pengguna memilih menu latihan 6. Sistem masuk ke halaman latihan yang berisi soal-soal pilihan ganda 7. Pengguna mengerjakan soal-soal yang disediakan 8. Sistem mengecek jawaban pengguna dan menampilkan nilai dari hasil pekerjaan pengguna

27 Tabel 3.2. Use Case aplikasi modul pembelajaran CCNA 1 (lanjutan) Kondisi Awal 1. Pengguna menerima halaman materi pelajaran yang terdiri dari beberapa materi yaitu introduction to networking, Networking Fundamental, Network Media, Cable Testing, Cabling LANs and WANs, Ethernet Fundamentals, Ethernet Technologies, Ethernet Switching, TCP/IP Protocol Suite and IP Addressing, Routing Fundamentals and Subnets, TCP/IP Transport and Application Layers 2. Pengguna menerima halaman latihan dari menu materi yang dipilih. Kondisi Akhir 1. Pengguna mempelajari menu materi yang dipilih. 2. Pengguna mengisi jawaban pada soal latihan materi yang dipilih. 3.3.2 Perancangan Peta Navigasi Peta navigasi ini memudahkan untuk merancang aplikasi yang akan dibuat dalam menentukan lokasi pada setiap halaman yang ada dalam aplikasi. Pada gambar 3.2 merupakan peta navigasi dari Rancang Bangun Aplikasi Modul Pembelajaran CCNA 1

Gambar 3.2 Peta Navigasi Aplikasi pembelajaran CCNA 1 28

29 3.3.3 Pemodelan Activity Diagram Pengguna Sistem Gambar 3.3. Diagram Activity Modul Pembelajaran CCNA

30 Pada gambar 3.3 dapat dijelaskan bawha aplikasi dimulai saat: 1. Pada saat memasuki aplikasi pengguna akan memilih masuk ke aplikasi atau keluar. Jika pengguna memilih masuk maka pengguna akan masuk ke halaman utama jika tidak maka aplikasi akan tertutup. 2. Setelah pengguna masuk ke halaman awal dan setelah itu dapat memilih modul CCNA 1 yang akan di pelajari atau quiz yang ada pada aplikasi. Apabila pengguna memilih halaman modul maka materi modul yang dipilih akan dimunculkan oleh sistem. Jika pengguna memilih quiz maka sistem akan memunculkan halaman quiz. 3. Setelah selesai mempelajari satu modul atau satu quiz pengguna akan menuju pada pilihan kembali ke menu. Jika ya maka sistem akan menampilkan halaman menu jika tidak maka sistem akan menanyakan apakah akan melanjutkan ke modul selanjutnya atau tidak. 4. Pada halaman quiz pengguna akan diberikan soal berupa pilihan ganda yang diberikan oleh sistem, lalu pengguna akan menjawab soal yang diberikan oleh sistem. 5. Setelah itu sitem akan mengecek jawaban, apabila benar maka pengguna akan memperoleh nilai +1 jika salah maka pengguna akan memperoleh nilai +0. 6. Jika pengguna sudah menjawab 20 soal maka sistem akan menampilkan halaman nilai. 7. Setelah quiz maka pengguna akan kembali ke pemilihan yang ada pada point 2 dan dan melakukan hal yang sama sampai pengguna memilih pilihan keluar.

31 3.3.4 Pemodelan Sequence Diagram Sequence diagram digunakan untuk mengambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case. Sequence diagram menggambarkan interaksi antar objek di dalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi waktu dan objek-objek yang terkait. Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan keluaran tertentu. Dari bentuk use case yang telah digambarkan diatas hanya satu aktor yang akan dibuat sequence diagram sesuai dengan use case yang telah dibuat sebelumnya.

Gambar 3.4 Diagram Sequence Modul Pembelajaran CCNA 1 32

33 3.3.5 Pemodelan Class Diagram Class diagram mendeskripsikan jenis-jenis objek dalam sistem dan berbagai macam hubungan statis yang terdapat diantara mereka. Gambar 3.5 Diagram class aplikasi Pembelajaran CCNA 1 Pada gambar di atas dijelaskan bahwa fungsi-fungsi yang ada di dalam objek book dipanggil oleh aplikasi flash namun hubungan antara dua objek tersebut hanya berupa hubungan agregasi yang berarti flash bisa memiliki makna sendiri atau dapat berdiri sendiri walaupun tanpa adanya objek (komponen) book. 3.3.6 Perancangan Story Board Storyboard merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan mencantumkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Satu kolom storyboard mewakili satu tampilan di layar monitor.

34 Tabel 3.3 Rancangan Story Board Nama Scene Cover Visual Nama Scene : Cover Link : Scene, Link keluar Ket : Halaman Awal Link : Halaman Sebelumnya, Halaman Berikutnya, halaman menu, keluar Keterangan : Tampilan awal setelah masuk ke dalam aplikasi.

35 Tabel 3.3 Rancangan Story Board (lanjutan) Menu, Keluar Keterangan : tampilan modul 1 Menu, Keluar Keterangan : tampilan modul 2

36 Tabel 3.3 Rancangan Story Board (lanjutan) Menu, Keluar Keterangan : tampilan modul 3 Menu, Keluar, Mulai Quiz Keterangan : tampilan Quiz 1

37 Tabel 3.3 Rancangan Story Board (lanjutan) Menu, Keluar, Pertanyaan quiz selanjutnya Keterangan : tampilan isi quiz 1 Menu, Keluar Keterangan : tampilan modul 4

39 Tabel 3.3 Rancangan Story Board (lanjutan) Menu, Keluar, Pertanyaan quiz selanjutnya Keterangan : tampilan isi quiz 2 Menu, Keluar Keterangan : tampilan modul 6

41 Tabel 3.3 Rancangan Story Board (lanjutan) Menu, Keluar, Mulai Quiz Keterangan : tampilan Quiz 3 Menu, Keluar, Pertanyaan quiz selanjutnya Keterangan : tampilan isi quiz 3

44 Tabel 3.3 Rancangan Story Board (lanjutan) Menu, Keluar, Pertanyaan quiz selanjutnya Keterangan : tampilan isi quiz 2 3.3.7 Perancangan Antar Muka Pada tahap ini penulis membuat antarmuka dari aplikasi yang akan dibuat yang akan menunjukan dimana letak tombol satu dan lainnya untuk memulai proses pembelajaran CCNA1 untuk mahasiswa Fakultas Ilmu Komputer 3.3.7.1 Rancangan Tampilan Pembuka atau Intro Halaman intro adalah tampilan awal pembuka sebelum memasuki halaman utama (menu utama) dari aplikasi ini, sebuah intro biasanya menampilkan gambar, logo, animasi text, bahkan ada yang menampilkan animasi yang berhubungan dengan

45 objek tersebut. Hal ini dimaksudkan untuk menarik perhatian pengguna pada saat melihat aplikasi ini. Tautan yang ada pada halaman ini berupa tombol masuk ke halaman utama. Pada halaman ini, pengguna dapat langsung mengoperasikan aplikasi ini. Gambar 3.6 Rancangan Tampilan Intro 3.3.7.2 Rancangan Tampilan Menu Utama Pada halaman menu pelajaran terdiri dari tombol-tombol yang akan mengubungkan ke halaman materi dan modul, dan terdapat juga tombol-tombol kembali ke menu, tombol keluar, tombol berikut dan kembali. Gambar 3.7 Rancangan Tampilan menu utama

46 3.3.7.3 Rancangan tampilan halaman materi Pada halaman materi terdapat 4 tombol yaitu tombol berikut, tombol kembali untuk menuju halaman sebelumnya atau kembali ke halaman berikutnya, tombol menu untuk kembali ke halaman menu, dan tombol keluar untuk menutup aplikasi Gambar 3.8 Rancangan Halaman Materi 3.3.7.4 Rancangan Tampilan Halaman Quiz Rancangan halaman kuis merupakan tampilan halaman latihan user untuk menguji kemampuan user untuk materi pembelajaran mata. Pada halaman ini terdapat 20 soal ujian yang bisa diulang secara acak karena penulis melakukan pengacakan soal sebanyak 30, dan pada halaman ini terdapat tombol lanjut untuk melihat soal berikutnya dan di akhir halaman soal dapat melihat urutan nilai kuis. Di halaman latihan ini juga terdapat tombol menu untuk kembali ke menu, tombol kembali untuk membalik halaman buku ke halaman sebelumnya, tombol berikut untuk membalik halaman buku ke halaman selanjutnya dan tombol keluar untuk menutup aplikasi

47 Gambar 3.9 Rancangan Tampilan Halaman awal Kuis Gambar 3.10 Rancangan Tampilan Halaman Kuis

48 3.3.7.5 Rancangan Tampilan Halaman video Rancangan tampilan halaman video ini merupakan salah satu tampilan yang ada di dalam halaman buku untuk meletakan suatu video. Pada halaman ini terdapat 4 tombol yaitu tombol berikut, tombol kembali untuk menuju halaman sebelumnya atau kembali ke halaman berikutnya, tombol menu untuk kembali ke halaman menu, dan tombol keluar untuk menutup aplikasi. Gambar 3.11 Rancangan Tampilan Halaman Video Video pada halaman video ini berupa file.flv yang dikonversi menjadi sebuah movie clip pada flash. Dan setelah konversi maka fps (frame per second) yang di seting pada halaman video ini di sesuaikan dengan banyak frame dan waktu video agar suara dan gambar pada video menjadi sinkron. Cara mendapatkan fps yang sesuai adalah dengan melakukan operasi matematika dengan membagi jumlah frame dengan waktu video (detik).

49 3.4 Pengumpulan bahan (Material Collecting) Pada tahap pengumpulan bahan (material collecting) pengumpulan bahan yang sesuai dengan kebutuhan yang dikerjakan. adalah tahap Tabel 3.4 Daftar bahan No Jenis bahan Nama Sumber Kategori 1 Video Video 1 http://woodgears.ca/marbleadd/ Free Video 2 http://www.youtube.com/watch?v=0j4vy Free 8rHeIc dari http://jagatreview.com 2 Suara 1.mp3 Flippingbook component Free 2.mp3 Maxim Mrvica The Piano Player DVD Buy 3 Animansi Tes.swf Button1 Button next Button back Dibuat sendiri Free 4 Gambar Cover.jpg Mod11.jpg Mod12.jpg Mod13.jpg Mod14.jpg Mod15.jpg Mod16.jpg Mod18.jpg Mod21.jpg Mod22.jpg Mod23.jpg Mod24.jpg Dibuat sendiri Free

50 Tabel 3.4 Daftar bahan lanjutan No Jenis Nama Sumber Kategori bahan 4 gambar Mod25.jpg Mod26.jpg Mod27.jpg Mod28.jpg Mod29.jpg Mod31.jpg Mod32.jpg Mod33.jpg Mod35.jpg Mod37.jpg Mod41.jpg Mod42.jpg Mod43.jpg Mod44.jpg Mod45.jpg Mod46.jpg Mod47.jpg Mod48.jpg Mod51.jpg Mod52.jpg Mod53.jpg Mod54.jpg Mod55.jpg Mod56.jpg Mod57.jpg Mod58.jpg Dibuat sendiri Free

51 Tabel 3.4 Datar bahan (lanjutan) No Jenis Nama Sumber Kategori bahan 4 Gambar Mod59.jpg Mod61.jpg Mod62.jpg Mod63.jpg Mod64.jpg Mod65.jpg Mod67.jpg Mod68.jpg Mod69.jpg Mod71.jpg Mod 72.jpg Mod 73.jpg Mod 74.jpg Mod 75.jpg Mod 76.jpg Mod 77.jpg Mod 78.jpg Mod 79.jpg Mod 81.jpg Mod 82.jpg Mod 83.jpg Mod 84.jpg Mod 85.jpg Mod 86.jpg Mod 88.jpg Mod91.jpg Dibuat sendiri free

52 Tabel 3.4 Datar bahan (lanjutan) No Jenis Nama Sumber Kategori bahan 4 Gambar Mod92.jpg Mod93.jpg Mod94.jpg Mod95.jpg Mod96.jpg Mod97.jpg Mod211.jpg Mod212.jpg Mod213.jpg Mod214.jpg Mod 216.jpg Mod 510.jpg Mod 511.jpg Mod 512.jpg Mod 514.jpg Mod 515.jpg Mod 516.jpg Mod 517.jpg Mod 518.jpg Mod 519.jpg Mod 520.jpg Mod 521.jpg Mod 522.jpg Mod 523.jpg Mod 524.jpg Mod525.jpg Dibuat sendiri free

53 Tabel 3.4 Datar bahan (lanjutan) No Jenis Nama Sumber Kategori bahan 4 Gambar Mod610.jpg Mods1.jpg Mods2.jpg Mods3.jpg Mods4.jpg Mods5.jpg Mods6.jpg Modx1.jpg Modx2.jpg Modx3.jpg Mod x4.jpg Mod x5.jpg Mod x6.jpg Mod x7.jpg Mod x8.jpg Dibuat sendiri free