BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Sistem Tahap analisa merupakan tahap awal penulis dalam pembuatan aplikasi perangkat lunak, pada tahap ini penulis menganalisa kebutuhan sistem yang dibuat. Yang menjadi faktor dari analisa adalah suatu permasalahan dalam pembuatan perangkat lunak tersebut karena dengan itu dapat diketahui segala sesuatu yang dibutuhkan oleh sistem. Dunia pendidikan kini semakin maju, dengan kemajuan teknologi informasi mahasiswa cenderung menggunakan komputer untuk belajar. Pada matakuliah Struktur Data, kebanyakan mahasiswa kurang memahami isi materi, karena matakuliah tersebut sulit dan kurangnya waktu belajar. Melihat keadaan tersebut penulis berkeinginan membuat aplikasi pembelajaran Struktur data Graph berbasis multimedia, karena dengan adanya aplikasi tersebut bisa digunakan untuk membantu pembelajaran Graph secara mandiri. Aplikasi tersebut dibuat menggunakan Adobe Flash CS3. Aplikasi yang dibuat adalah aplikasi yang bisa digunakan untuk menambah pembelajaran secara individu atau mandiri agar mahasiswa mudah mengerti dalam pembelajaran graph tersebut. Aplikasi yang dibuat hendaknya menarik dan tidak membosankan agar mahasiswa atau pengguna senang memakainya. Dari keseluruhan komponen sistem yang dibangun, maka didapat masukan, proses dan keluaran yaitu: Masukkan : 1. Data Materi Graph : penjelasan Materi Graph Keluaran : 1. Daftar jenis materi Graph yang telah disediakan. 2. Daftar latihan essay Graph tentang materi graph. 27

2 28 yaitu : Aplikasi pembelajaran struktur data materi graph ini memiliki beberapa menu, 1. Menu Materi Pada menu materi digunakan untuk mengenal dan mempelajari materimateri graph, yaitu dengan memilih menu materi yang terdapat pada tampilan materi. Materi-materi yang disajikan antara lain : a. Graph Dalam materi ini terdapat definisi dan penjelasan yang jelas dalam pengenalan graph dan contoh graph. b. Directed and Undirected Graph Dalam materi ini menjelaskan tentang perbedaan antara directed graph dengan Undirected graph (Graph berarah dengan Graph tak berarah) beserta contoh gambar dan simulasinya. c. Weighted Graph Dalam materi ini menerangkan bahwa dalam graph terdapat beberapa nilai yang merupakan sebuah bobot pada tiap-tiap busur (jalur) yang menghubungkan antara dua buah simpul. d. Multigraph Dalam materi ini menjelaskan multi graph merupakan graph tak sederhana yang memiliki busur berbeda dari graph sederhana, yang ditandai dengan busur loop dan multiple edge. e. Sub Graph Dalam materi ini membandingkan antara graph asli dengan subgraph-subgraphnya, yang dijelaskan dengan gambar dan simulasi.

3 29 f. Full Connected Graph Dalam materi ini menjelaskan tentang graph yang kemungkinan memiliki busur maksimum dan minimum yang menghubungkan antar-antar simpul. g. Istilah Pada Graph Dalam materi ini menjelaskan beberapa istilah yang terdapat dalam sebuah graph antara lain : incident, Degree(indegree dan outdegree), successor dan prodessor, path, dan cycle. h. Representasi graph Dalam materi ini menerangkan adjency matrik dan adjency list yang merupakan representasi dari graph yang di gambarkan dalam setiap halamannya. Adapun beberapa simulasi yang mempermudah memahami materi ini. i. Graph Traversal Dalam materi ini menjelaskan antara dua metode pencarian, yaitu DFS (Depth First Search) yang mengutamakan penulusaran dengan mendahulukan pencarian ke dalam dan BFS (Breadth First Search) yang mengutamakan penulusaran dengan mendahulukan pencarian melebar. j. Lintasan Terpendek Dalam materi ini menjelaskan tentang pencarian jalur yang dilakukan menggunakan tiga algoritma, yaitu algoritma djikstra, algoritma warshall s, dan algoritma flyod s.

4 30 2. Menu Latihan Pada menu latihan berisi pengujian yang digunakan untuk mengasah pembelajaran yang ada pada halaman materi, pada halaman home penulis membuat sebuah tombol untuk masuk ke halaman latihan, dibagian halaman latihan penulis membuat pertanyaan seputar materi yang telah dijelaskan pada aplikasi, dan menjawab pertanyaan tersebut. 3. Menu Profil Pada menu profil ini terdapat biodata dari penulis, dengan maksud agar pengguna aplikasi ini dapat mengetahui penulis atau pembuat dari aplikasi. 3.2 Konsep Simulasi pembelajaran struktur data Graph ini merupakan aplikasi yang dibuat untuk mempermudah mahasiswa dalam mempelajari Struktur data Graph. Aplikasi ini dirancang menggunakan metode pengembangan multimedia dilakukan melalui 6 tahap yaitu konsep, perancangan, pengumpulan material, pembuatan, pengujian dan distribusi. Dalam aplikasi ini terdapat 3 sub menu yaitu materi, profil, dan latihan.deskripsi konsep aplikasi seperti pada tabel 3.1. Tabel 3.1 Deskripsi konsep aplikasi Judul Simulasi Pembelajaran Struktur Data Graph Pengguna Mahasiswa-Mahasiswi Ilmu Komputer Bentuk Aplikasi Media Pembelajaran Interaktif Gambar Menggunakan file berformat JPG, PNG dan EPS Suara Menggunakan file berformat MP3 Animasi Animasi pada teks, tombol dan gambar dibuat sendiri Interaktif Menggunakan link berupa tombol untuk pengguna menuju ke halaman yang diinginkan.

5 Perancangan Pada perancangan ini akan menerangkan dengan jelas dan secara rinci perancangan Aplikasi Simulasi Pembelajaran Struktur Data Graph yang meliputi pemodelan use case diagram, sequence diagram dan activity diagram Perancangan Use Case Diagram Pada aplikasi Simulasi Pembelajaran Struktur Data Graph berbasis multimedia ini, mengidentifikasi yang menjadi aktor utamanya adalah mahasiswa. Dari identifikasi aktor tersebut maka akan diperoleh suatu diagram use case dan skenario yang memperlihatkan interaksi antara use case dengan aktor. Use case diagram Aplikasi Simulasi Pembelajaran Struktur Data Graph dapat dilihat pada gambar 3.1. Materi Profil Mahasiswa Latihan Gambar 3.1 Use case diagram Aplikasi Simulasi Pembelajaran Struktur Data Graph

6 32 Berikut ini merupakan deskripsi Use case diagram diatas : Tabel 3.2 Nama Aktor Deskripsi Skenario Kondisi Awal Kondisi Akhir Use Case Materi Materi Mahasiswa. Mahasiswa dapat memilih materi yang ada. 1. Mahasiswa memilih menu materi. 2.Sistem menampilkan halaman materi. 3. Mahasiswa memilih materi-materi yang ada. Mahasiswa menerima halaman materi yang terdapat beberapa Materi yaitu : graph,directed and undirected graph, weighted graph, multigraph, sub graph, full connected, graph, istilah pada graph, representasi graph, graph traversal, lintasan terpendek. Mahasiswa dapat melihat mempelajari isi dari setiap materi. Tabel 3.3 Use Case Profil Nama Aktor Deskripsi Skenario Kondisi Awal Kondisi Akhir Profile. Mahasiswa. Mahasiswa dapat melihat profile penulis. 1.Mahasiswa memilih menu profile 2.Sistem menampilkan halaman profile. 3.Mahasiswa dapat melihat profile dari penulis. Mahasiswa menerima halaman profile. Mahasiswa dapat melihat profile penulis.

7 33 Tabel 3.4 Use Case Latihan Nama Aktor Deskripsi Skenario Kondisi Awal Kondisi Akhir Latihan. Mahasiswa. Mahasiswa dapat mengerjakan latihan soal yang ada pada halaman latihan. 1.Mahasiswa memilih menu latihan. 2.Sistem menampilkan halaman latihan 3.Mahasiswa dapat mengerjakan latihan soal sebanyak 10 soal. 4. Dalam setiap dilakukan pengecekan benar atau salah. 5. Mahasiswa dapat melanjutkan ke soal berikutnya. Mahasiswa menerima halaman latihan Mahasiswa mendapatkan hasil setelah mengerjakan soal memperoleh nilai yang benar dan salah Perancangan Activity Diagram Activity Diagram menggambarakan aliran fungsional sistem. Pada tahap pemodelan, diagram activity diagram dapat digunakan untuk menunjukan aliran kerja. Dapat juga digunakan untuk menggambarkan aliran kejadian dalam use case 1. Perancangan Activity Diagram untuk Halaman Materi Pada gambar 3.2 aktifitas dimulai pada saat mahasiswa sudah masuk kedalam menu utama, selanjutnya aktifitas mahasiswa memilih menu materi, didalam menu materi aktifitas selanjutnya memilih submenu materi yang akan dipelajari. Setelah mahasiswa memilih salah satu submenu tersebut, maka akan ditampilkan halaman materi.

8 34 Pengguna Sistem Memilih menu materi Menampilkan Pilihan materi Memilih Materi 1 sampai dengan Materi 10 Menampilkan materi yang dipilih Gambar 3.2 activity diagram menu materi 2. Perancangan Activity Diagram untuk Halaman Profil Pada gambar 3.3 aktifitas dimulai pada saat mahasiswa sudah masuk kedalam menu utama, selanjutnya aktifitas mahasiswa memilih menu materi. Setelah mahasiswa memilih menu profile maka yang akan tampil halama profile penulis.

9 35 Pengguna Sistem Memilih menu Profil Menampilkan halaman profil Berisi biodata penulis Gambar 3.3 activity diagram menu profil 3. Perancangan Activity Diagram untuk Halaman Latihan Pada gambar 3.4 aktifitas akan dimulai saat mahasiswa sudah masuk ke dalam menu utama, selanjutnya aktifitas mahasiswa memilih menu latihan memulai latihan, sistem akan menampilkan halaman latihan dan mahasiswa akan mengerjakan latihan dan mengisi jawaban, setelah itu sistem akan memeriksa jawaban dan akan keluar score, nilai benar dan nilai salah. Jika aktifitas mahasiswa tidak mulai latihan maka sistem tidak melakukan pekerjaan.

10 36 Pengguna Sistem Memilih menu Latihan Menampilkan halaman latihan Mengerjakan Latihan 1 Koreksi Menampilkan score Lanjut YA Soal < 10 Tidak Mengerjakan Latihan 2 Menuju Latihan 2 Koreksi Menampilkan score Gambar 3.4 activity diagram menu latihan.

11 Perancangan 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. 1. Sequence diagram menu materi Pada sequence diagram menu materi mahasiswa atau pengguna akan mengakses melalui menu utama, pada menu utama pengguna akan memilih menu materi. Setelah itu akan terdapat tampilan beberapa materi yang terdapat pada aplikasi.

12 38 Mahasiswa Menu utama Menu materi Sub-sub materi Membuka aplikasi Memilih menu materi Memilih sub-sub materi Menampilkan menu utama Menampilkan halaman materi Menampilkan sub-sub materi yang dipilih Gambar 3.5 sequence diagram menu materi 2. Sequence diagram menu profil Pada sequence diagram menu profil mahasiswa atau pengguna akan mengakses melalui menu utama, pada menu utama pengguna akan memilih menu profil untuk melihat profil penulis.

13 39 Mahasiswa Menu utama Menu profi Membuka aplikasi Memilih menu profil Menampilkan menu utama Menampilkan biodata penulis Gambar 3.6 Sequence diagram menu profil 3. Sequence diagram menu latihan Pada sequence diagram menu latihan atau pengguna akan mengakses melalui menu utama, pada menu utama mahasiswa akan memilih menu latihan dan sistem akan menampilkan tampilan latihan dan mahasiswa akan mengerjakan latihan.

14 40 Mahasiswa Menu utama Menu latihan Soal-soal latihan Koreksi Jawaban Membuka aplikasi Memilih menu latihan Mengerjakan latihan Koreksi jawaban Menampilkan menu utama Menampilkan soal latihan Mengerjakan latihan Koreksi jawaban Menampilkan hasil koreksi Gambar 3.7 sequence diagram menu latihan Perancangan Storyboard Storyboard adalah deskripsi masing-masing tampilan suatu kejadian dari movie yang dimainkan dengan menampilkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Storyboard digunakan sebagai alat bantu pada tahapan perancangan multimedia. Pada bagian storyboard ini akan menggambarkan rancangan Aplikasi Simulasi Struktut Data Graph.

15 41 1. Storyboard Halaman Utama Waktu Simulasi Pembelajaran Struktur Data Graph Sound off Sound On Keluar Animasi Materi Profil Latihan Nama Scene : Awal Link Tombol : Materi : Menuju halaman materi Profil : Menuju halaman profil Latihan : Menuju halaman latihan Keluar : Menuju halaman keluar Sound on : Menghidupkan suara Sound off : Mematikan suara Keterangan : Halaman menu utama Gambar 3.8 storyboard menu utama

16 42 2. Storyboard Halaman Materi Hom e Animasi Graph Directed and Undirected graph Directed and Undirected graph Multigraph Sub Graph Full Connected Graph Istilah Pada Graph Representas Graph Graph Traversal Lintasan Terpendek Nama Scene Link Tombol : Keterangan : Materi Home Graph Directed and : Menuju halaman menu utama : Menuju materi Definisi Graph : Menuju materi Graph berarah dan undirected graph Graph tak berarah Weighted Grapah Multigraph Sub Graph Full Connected Graph Istilah Pada Graph Representasi Graph Graph Traversal Lintasan Terpendek Sound on Sound off Sound Off : Halaman menu materi Sound On : Menuju materi Graph berbobot : Menuju materi Graph tak sederhana : Menuju materi Sub Gaph : Menuju materi Full Connected Graph : Menuju materi Istilah Pada Graph : Menuju materi Representasi Graph : Menuju materi Graph Travesal : Menuju materi Algoritma pencarian Lintasan terpendek : Menghidupkan background sound : Mematikan background sound Gambar 3.9 storyboard menu materi

17 43 3. Storyboard Halaman Profil Text Biodata penulis Nama Scene : Profil Link Tombol : Biodata Penulis : Menuju biodata penulis Gambar 3.10 storyboard menu profil 4. Storyboard Halaman Latihan Latihan Soal Materi Graph Mulai Home Animasi Nama scene : latihan Link : Mulai : Menuju ke halaman soal Home : Menuju ke halaman menu utama Keterangan : Halaman latihan Gambar 3.11 storyboard menu latihan

18 44 5. Storyboard halaman jawawaban Gambar Jawaban 1 Lanjut Koreksi Nama scene : Jawaban Link Keterangan : Lanjut : Melanjutkan ke halaman selanjutnya : Halaman Jawaban Gambar 3.12 storyboard halaman jawaban 6. Storyboard halaman score Score Hasil Lintasan terpendek Score Lanjut Nama scene : latihan Link : Mulai : Menuju ke halaman soal Home : Menuju ke halaman menu utama Keterangan : Halaman latihan Gambar 3.13 storyboard halaman score