Perancangan Aplikasi ANALISIS DAN PERANCANGAN SISTEM

merupakan solusi yang paling tepat berdasarkan perhitungan yang dilakukan untuk dipilih oleh user.

3.4 Perancangan Aplikasi

3.4.1 Use – Case Diagram Aplikasi Analisis setiap interaksi yang terjadi antara pengguna dan sistem dapat dipahami secara mudah melalui use-case diagram. Use-case berperan menggambarkan interaksi antar komponen-komponen yang berperan dalam sistem yang akan dirancang. SOLUSI WSM INPUT NILAI KRITERIA SOLUSI WPM NILAI KRITERIA ALTERNATIF NORMALISASI MATRIKS NILAI KRITERIA PROSES PERHITUNGAN WSM NILAI PEMEROESAN PERBAIKAN NILAI INPUT PROSES PERHITUNGAN WPM NILAI PEMEROESAN Gambar 3.5 Tampilan use-case diagram aplikasi Universitas Sumatera Utara 3.4.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. Activity diagram tidak menggambarkan behaviour internal sebuah sistem dan interaksi antar subsistem secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum. MULAI APLIKASI INPUT NILAI KRITERIA Pemrosesan WSM SOLUSI WSM Pemrosesan WSM USER SISTEM Gambar 3.6 Activity diagram sistem Universitas Sumatera Utara MULAI APLIKASI INPUT NILAI KRITERIA Pemrosesan WPM SOLUSI WPM Pemrosesan WPM USER SISTEM Gambar 3.7 Activity Diagram Aplikasi Universitas Sumatera Utara 3.4.3 Kamus Data Aplikasi Kamus data adalah suatu daftar data elemen yang terorganisir dengan definisi yang tetap dan sesuai dengan sistem, sehingga user dan analis sistem mempunyai pengertian yang sama tentang input, output, dan komponen data store. Kamus data ini sangat membantu analis sistem dalam mendefinisikan data yang mengalir di dalam sistem, sehingga pendefinisian data itu dapat dilakukan dengan lengkap dan terstruktur. PROSES Nilai 1 Nilai 2 Nilai 3 Nilai 4 KRITERIA 1 KRITERIA 2 KRITERIA 3 KRITERIA 4 Gambar 3.8 Form Input Aplikasi FORM = TOP HEADER + ISI + FOOTER TOP HEADER = NULL ISI = KRITERIA 1 + KRITERIA 2 + KRITERIA 3 + KRITERIA 4 KRITERIA 1 = MAKSIMAL 2 DIGIT KRITERIA 2 = MAKSIMAL 2 DIGIT KRITERIA 3 = MAKSIMAL 2 DIGIT KRITERIA 4 = MAKSIMAL 2 DIGIT FOOTER = PROSES PROSES = TOMBOL PEMEROSESAN APLIKASI Universitas Sumatera Utara 3.4.4 Tampilan Rancangan User Interface Aplikasi Tampilan graphic user interface dari aplikasi ini pada pengaplikasiannya menggunakan CSS3 CascadingStyle Sheet 3 dan juga HTML 5. Sebelumnya akan dijelaskan secara ringkas dan sederhana prototype dari tampilan yang akan dibuat. 1. Tampilan Awal Aplikasi Tampilan awal atau home dari aplikasi ini dirancang sangat paktis sekali. Dikarenakan dalam penggunaanya kita tidak diharuskan terdaftar atau login kedalam aplikasi terlebih dahulu. FOOTER GETTING STARTED NAMA APLIKASI MENU DROPDOWN Gambar 3.9 Tampilan prototype halaman awal aplikasi 2. Tampilan Halaman Getting Started Setelah me-click tombol getting started maka pengguna akan diarah kepada sebuah halaman, yang menampilkan formulir isian. Selanjutnya tingga mengisikan persentase kebutuhan yang ingin ditetapkan sebagai nilai patokan yang akan diproses oleh sistem. Universitas Sumatera Utara TOP HEADER FOOTER NAMA APLIKASI MENU DROPDOWN PROSES Nilai 1 Nilai 2 Nilai 3 Nilai 4 KRITERIA 1 KRITERIA 2 KRITERIA 3 KRITERIA 4 Gambar 3.10 Tampilan Form isian Umpan balik dari pemrosesan tadi adalah sebuah halaman yang meminta kita untuk memilih akan melakukan pemrosesan dengan cara bagaimana. FOOTER NAMA APLIKASI MENU DROPDOWN WSM WPM Gambar 3.11 Tampilan halaman feedback dari tombol pemerosesan. Universitas Sumatera Utara 3. Tampilan Halaman Hasil Setelah pengguna memilih salah satu dari dua metode yang ada, maka selanjutnya akan diarahkan ke halaman yang member informasi sputar hasil pemerosesan berdasarkan kepada metode yag dipilih. Dihalaman ini juga disertakan komentar seputar hasil yang diperoleh serta bagaimana apabila pemerosesan dilakukan dengan metode sebaliknya. FOOTER NAMA APLIKASI MENU DROPDOWN ALTERNATIF 1 NILAI NILAI ALTERNATIF 2 ALTERNATIF 3 NILAI SARAN BERDASARKAN HASIL PERHITUNGAN LIHAT HASIL PERHITUNGAN METODE LAIN Gambar 3.12 Halaman hasil pemerosesan Universitas Sumatera Utara

BAB 4 IMPLEMENTASI DAN PENGUJIAN

4.1. Implementasi Sistem

Dalam mengimplementasikan metode, penulis memilih menerapkannya ke dalam aplikasi yang berbasis web atau web application. Perancangannya menggunakan bahasa PHP PHP: Hypertext Preprocessor , basis data MySQL, HTML 5, dan CSS3Cascading Style Sheet 3. a. Halaman Awal Pada halaman awal aplikasi ini, para pengguna langsung diarahkan kepada menu Getting Started pada layar utama, untuk memulai perhitungan. Terdapat juga beberapa menu tambahan yang dapat menambah pengetahuan pengguna. Seperti pengertian cloud computing, Penjelasan seputar SaaS Software as a Service, PaaS Platform as a Service , serta IaaS Infrastructure as a Servce yang juga daapat memperkaya pengetahuan si pengguna. Berikut ditampilkan tampilan halaman utama dari aplikasi ini. Universitas Sumatera Utara