BAB III ANALISIS DAN DESAIN SISTEM

Transkripsi

1 BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisis Masalah Dalam suatu pembangunan aplikasi, analisis perlu dilakukan sebelum tahap perancangan dilakukan. Perancang aplikasi harus menganalisis kebutuhan apa yang diperlukan untuk membangun suatu perangkat lunak. Kebutuhan utama dalam perancangan aplikasi multimedia pada rancang bangun profile sekolah MTs. Al-Azhar ini adalah berbagai file bergambar, audio serta menggunakan Adobe Flash CS6 Professional yang menyediakan segala keperluan untuk membuat aplikasi yang dinamis untuk tampilan yang indah dilihat. Analisis dapat didefinisikan sebagai Penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan dan hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikannya. Di dalam tahap analisis sistem terdapat langkahlangkah dasar yang harus dilakukan oleh analis sistem sebagai berikut : 1. Identify, yaitu mengidentifikasi masalah. 2. Understand, yaitu memahami kerja dari sistem yang ada. 3. Analyze, yaitu menganalisis sistem. 4. Report, yaitu membuat laporan hasil analisis. 25

2 26 III.2. Evaluasi Sistem yang Berjalan Berdasarkan evaluasi sistem yang sedang berjalan, pada saat ini belum ada aplikasi profile sekolah pada sekolah MTs. Al-Azhar Bulu Cina dengan menggunakan Adobe Flash berbasis multimedia khususnya. Pengenalan profile sekolah MTs. Al Azhar masih berlangsung secara manual yaitu dengan cara membagikan brosur yang berisi tentang profile sekolah itu sendiri sehingga tidak efektif dan masih terdapat banyak kelemahan, khususnya dalam media visual yang baik. Dimana media visual yang baik dapat menarik perhatian user atau pengguna sehingga dapat memahami tentang profile sekolah yang diperkenalkan dalam aplikasi tersebut. III.3. Desain Sistem Pada bagian ini terdiri dari dua bagian yaitu : 1. Dirancangnya sebuah aplikasi profile sekolah yang mana ditampilkan dalam media visual yang baik dalam penyampaian informasi bagi pengguna atau user. 2. Metode penyampaian media informasi yang baik dapat membuat pengguna atau user dapat memahami apa yang disampaikan dengan baik. III.3.1. Use Case Diagram Aplikasi Use Case menggambarkan tahapan proses suatu sistem aplikasi di sistem perancangan multimedia. Program Use Case menggambarkan bahasa untuk spesifikasikan, membangun dan dokumentasikan bagian dari informasi yang digunakan atau dihasilkan oleh proses perangkat lunak.

3 Use Case Diagram yakni diagram yang menggambarkan actor, use case dan relasinya sebagai suatu urutan tindakan yang memberikan nilai terukur untuk aktor. Berikut ini merupakan Use Case Diagram dalam Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al-Azhar Bulu Cina Berbasis Multimedia Mulaiaplik asi Logo user Intro SlideKomp ilasi Info StrukturOr ganisasi Profile Guru &Staf Gambar III.1. Use Case Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina III.3.2. Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir.

4 Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi, menggambarkan aktifitas-aktifitas, objek, state, transisi state dan event. Dengan kata lain kegiatan diagram alur kerja menggambarkan perilaku sistem untuk tiap aktivitas. User Sistem Tidak MasukAplikasi Ya Menu Utama KembaliKeAwal Tidak Ya KeluarAplikasi Gambar III.2. Activity DiagramRancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina Perancangan Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina ini memiliki struktur UML sebagai berikut : 1. User masuk aplikasi dan pada menu awal akan masuk kedalam bagian sistem yaitu pada frame Menu utama.

5 2. Tetapi jika user tidak ingin melanjutkan kemenu utama user juga disajikan dengan pilihan tombol lainnya yaitu tombol keluar aplikasi. 3. Pada frame menu utama aplikasi, user diberikan tombol navigasi yaitu tombol opsi pilihan menu-menu lainnya dan kembali kemenu awal (home). 4. Pada frame keluar user diberikan tombol navigasi pilihan keluar aplikasi. III.3.3. Sequence Diagram Sequence diagram adalah suatu diagram yang menampilkan interaksiinteraksi antar objek atau sistem yang disusun pada sebuah urutan dan rangkaian waktu. Digunakan untuk menggambarkan skenario atau rangkaian langkahlangkah yang dilakukan sebagai sebuah respon dari suatu kejadian untuk menggambarkan output tertentu. Sequence diagram menjelaskan interaksi objek yang disusun berdasarkan urutan waktu. Secara mudahnya sequence diagram adalah gambaran tahap demi tahap, dan tergolong kronologi (urutan) perubahan secara logis yang seharusnya dilakukan untuk menghasilkan sesuatu yang sesuai dengan use case diagram. Sequence diagram menu Awal pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina dapat dilihat pada Gambar III.3. berikut :

6 Menu Selected Piihan Menu Utama: 1. MasukAplikasi 2. Intro 3. Info Gambar III.3. Sequence Diagram Menu Awal Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina Berikut ini merupakan Sequence Diagram menu utama pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cinayang dirancang, lihat gambar III.4. Piihan Menu Utama: Menu Selected Next Preview Exit 4. Slide Kompilasi 5. Struktur Organisasi 6. Profile Guru &Staf 7. Gambar III.4. Sequence Diagram Menu Utama pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina

7 Berikut ini merupakan Sequence Diagram menu sejarah pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina yang dirancang, lihat gambar III.5. Menu Selected Piihan Menu : 1. singkat MTS. Al- Azhar Gambar III.5. Sequence Diagram Menu pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina Berikut ini merupakan Sequence Diagram menu pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina yang dirancang, lihat gambar III.6. Menu Selected Piihan Menu : 1. MTS. Al- Azhar 2. Next 3. Previous Gambar III.6. Sequence Diagram Menu pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina

8 Berikut ini merupakan Sequence Diagram menu galeri pada Rancang Bangun Media Infomasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina yang dirancang, lihat gambar III.7. Piihan Menu : Menu Selected 1. Slide Kompilasi 2. Next 3. Previous Gambar III.7. Sequence Diagram Menu pada Rancang Bangun Media Infomasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina Berikut ini merupakan Sequence Diagram menu struktur organisasi pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina yang dirancang, lihat gambar III.8. Piihan Menu Struktur Organisasi : Menu Selected 1. Struktur Organisasi 2. Profile Guru &Staf 3. Next 4. Previous Gambar III.8. Sequence Diagram Menu Struktur Organisasi pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina

9 Berikut ini merupakan Sequence Diagram menu prestasi pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina yang dirancang, lihat gambar III.9. Piihan Menu : Menu Selected Next 3. Previous Gambar III.9. Sequence Diagram Menu padarancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina III.3.4. Desain Sistem Secara umum aplikasi ini dirancang untuk memberikan informasi kepada pengguna melalui suatu media unik dan menarik. Pada aplikasi ini pengguna dapat menggunakannya untuk mengembangkan ataupun mengetahui tentang Profile sekolah MTs. Al-Azhar melalui media multimedia. Pengguna diberikan informasi dengan cara yang berbeda. III.4. Desain User Interface Dalam pembuatan user interface Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina tersebut memiliki

10 beberapa tahapan, yang mana tahapan desain user interface tersebut yang akan ditampilkan sebagai kerangka dasar desain user interface. III.4.1. Rancangan Menu Awal Aplikasi Gambar yang ditujukan pada gambar III.10. merupakan rancangan menu awal Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina. Madrasah Tsanawiyah Al AzharBuluCina Foto Madrasah Tsanawiyah Al AzharBuluCina Intro Masu Info Gambar III.10. Rancangan Menu Awal Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina Gambar diatas memperlihatkan judul aplikasi dengan tiga buah tombol yaitu Masuk yang digunakan untuk memulai pengenalan profile sekolah MTs. Al- Azhar, tombol intro dan tombol info. III.4.2. Perancangan Menu Utama Aplikasi Menu utama bertujuan untuk menampilkan halaman utama pada aplikasi dimana halaman utama inilah yang menjadi akses untuk menjalankan aplikasi ini. Perancangan menu utama dapat dilihat pada Gambar III.11. berikut :

11 Madrasah Tsanawiyah Al AzharBuluCina Struktur Organisasi Exit Logo Madrasah Tsanawiyah Al Azhar Bulu Cina Jam Gambar III.11. Perancangan Menu Utama Aplikasi III.4.3. Interface Menu Interface Menu dapat dilihat pada Gambar III.12. berikut : Madrasah Tsanawiyah Al Azhar Bulu Cina Struktur Organisasi Home Gambar III.12.Interface Menu pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina

12 III.4.4. Interface Menu Interface Menu dapat dilihat pada Gambar III.13. berikut : Madrasah Tsanawiyah Al Azhar Bulu Cina Struktur Organisasi Home Gambar III.13. Interface Menu Visi dan Misi pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina III.4.5. Interface Menu Interface Menu dapat dilihat pada Gambar III.14. berikut : Madrasah Tsanawiyah Al Azhar Bulu Cina Struktur Organisasi Home Gambar III.14. Interface Menu pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina

13 III.4.6. Interface Menu Struktur Organisasi Interface Menu struktur organisasi dapat dilihat pada Gambar III.15. berikut : Madrasah Tsanawiyah Al Azhar Bulu Cina Struktur Organisasi Struktur Organisasi Home Gambar III.15. Interface Menu Struktur Organisasi pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina III.4.7. Interface Menu Interface Menu prestasi dapat dilihat pada Gambar III.16. berikut : Madrasah Tsanawiyah Al Azhar Bulu Cina Struktur Organisasi Home Gambar III.16. Interface Menu pada Rancang Bangun Media Informasi Profile Sekolah Madrasah Tsanawiyah Al Azhar Bulu Cina