repository.nusamandiri.ac.id · Web viewPermasalahan yang akan diteliti dalam pembuatan aplikasi...
Transcript of repository.nusamandiri.ac.id · Web viewPermasalahan yang akan diteliti dalam pembuatan aplikasi...
52
BAB III
ANALISA DAN PERANCANGAN SOFTWARE
3.1Analisa Kebutuhan Software
Belakangan ini semakin banyak pengguna smartphone android. Baik orang dewasa maupun anak-anak sudah memiliki smartphone dengan system operasi android. Namun pemanfaatan smartphone tersebut hanya sebatas sms, telepon, dan ber-internet. Padahal perangkat tersebut dapat digunakan sebagai sarana edukasi khususnya bahasa pemrograman. Berdasarkan analisa tersebut penulis merancang aplikasi pembelajaran bahasa pemrograman berikut dengan kuis untuk smartphone tersebut.
3.1.1.Identifikasi Masalah
Permasalahan yang akan diteliti dalam pembuatan aplikasi ini adalah perancangan aplikasi yang mencakup pengenalan dasar bahasa pemrograman java dan html, berikut kuis yang menggunakan metode pilihan ganda.
Bahasa pemrograman dianggap pelajaran yang sulit untuk kebanyakan orang maupun mahasiswa. Masyarakat maupun mahasiswa/mahasiswi masih menganggap bahwa bahasa pemrograman sulit untuk dipelajari karena sulitnya dalam pemahaman syntax bahasa pemrograman.
3.1.2.Analisa Kebutuhan
Kebutuhan yang akan di analisa mencakup software, hardware baik itu untuk user maupun penulis sebagai pembuat.
1. Komponen Hardware
Perangkat yang penulis gunakan memiliki spesifikasi sebagai berikut :
a. Vendor: Dell
b. Tipe : Latitude E6410
c. HDD: 320 GB
d. RAM: 2 GB
e. Proccesor: Intel Core i5, M520 2.40GHz
f. Graphic: Nvidia NVS 3100M 1237 MB
2. Komponen Software
Perangkat lunak yang digunakan oleh penulis dalam pengembangan aplikasi ini, antara lain :
a. Intel XDK
Intel XDK adalah development kit yang dibuat oleh Intel untuk membuat aplikasi native untuk perangkat mobile menggunakan teknologi web seperti HTML5, CSS dan JavaScript. Aplikasi web dikompilasi menggunakan platform Cordova di server online untuk membuat aplikasi hybrid yang cross-platform. Aplikasi Intel XDK sendiri adalah aplikasi cross-platform yang tersedia untuk sistem operasi Windows, Linux dan OSX. Dengan teknologi seperti ini, developer dapat membuat satu aplikasi yang dapat berjalan di banyak platform mobile hanya dengan menggunakan satu basis kode saja.
b. HTML5
HTML5 adalah versi terbaru teknologi hypertext/web yang sekarang ini masih dalam tahap pengembangan. HTML5 ini akan menjadi trend teknologi internet masa depan karena sudah diperkaya dengan fitur-fitur ungulan yang tentunya akan menjadi standard pengembangan media informasi berbasis web.
c. Aplikasi
Aplikasi yang digunakan adalah aplikasi yang berbasis android sehingga program tersebut dapat digunakan untuk menjalankan fungsinya.
d. Input/output
Input/output yang digunakan adalah input penggunaan dari interface android itu sendiri yang menghasilkan output berdasarkan dari input yang dimasukkan.
3.2Desain
3.2.1.Rancangan Algoritma pada kasus
a. Algoritma Boolean pada Learning Programming Language Quiz
1.Inisialisasi Button
Gambar III.1 Listing Button pada Quiz
2. Melakukan jawab pilihan Ganda
Gambar III.2 Listing Jawaban Pilhan Ganda
Gambar III.3 Listing Pilihan Ganda Jawaban yang Benar
Gambar III.4 Listing Pilihan Ganda untuk Menampilkan Score
3.2.2.Software Architecture
Rekayasa perangkat lunak merupakan pembangunan dengan menggunakan prinsip dan konsep rekayasa dengan tujuan menghasilkan perangkat lunak yang bernilai ekonomi yang dipercaya dan bekerja secara efisien menggunakan mesin. Perangkat lunak banyak dibuat dan pada akhirnya sering tidak digunakan karena masalah-masalah nonteknis.
1. Use Case Diagram
Use Case merupakan pemodelan untuk kelakuan sistem informasi yang akan dibuat.
Gambar III.5 Use Case Diagram Learning Programming Language
2. Activity Diagram
Gambar III.6 Activity Diagram Learning Programming Language
3. Sequence Diagram menu Java
Gambar III.7 Sequence Diagram Menu Java
4. Sequence Diagram menu HTML
Gambar III.8 Sequence Diagram Menu HTML
5. Deployment Diagram
Gambar III.9 Deployment Diagram Learning Programming Language
3.2.3User Interface
Arsitek User Interface pada aplikasi android adalah user interface yang meliputi Activity dan User Interface yang terdiri dari komponen. Semuanya yang berhubungan dengan user interface pada aplikasi android biasanya berada pada lokasi C:\Users\Juna\Documents\LearningProgrammingLanguage Adapun dalam aplikasi ini menggunakan interface sebagai berikut :
(LEARNING PROGRAMMING LANGUAGE)
(JAVA) (HTML)
(TIPS) (QUIZ)
(ABOUT)
(JAVA)Gambar III.10 Tampilan Menu Home Aplikasi
(MATERI) (Judul MateriMateri 1Materi 2Materi 3Materi 4Materi 5Materi 6Materi 7Materi 8Materi 9)
Gambar III.11Tampilan Menu Java
(MATERI) (Judul MateriMateri 1Materi 2Materi 3Materi 4Materi 5Materi 6Materi 7Materi 8Materi 9) (HTML)
Gambar III.12 Tampilan Menu HTML
(LEARNING PROGRAMMING LANGUAGE)
(JAVA) (HTML)
(BACK)
Gambar III.13 Tampilan Menu Quiz
(LEARNING PROGRRAMING LANGUAGE)
(Tips Sukses Belajar Pemrograman :1.2.3.4.5.6.7.)
Gambar III.14 Tampilan Menu Tips
3.3.Implementasi
Aplikasi pembelajaran bahasa pemrograman Java dan HTML ini dibangun menggunakan Intel XDK. Aplikasi dapat berjalan pada hardware apapun yang menggunakan sistem operasi android. Spesifikasi sistem operasi android untuk dapat beroprasi minimum pada android 4.0 – 4.0.2 (Ice Cream Sandwich) dan maksimum pada android 5.0 (Lollipop).
1.Tampilan Menu Home
Gambar III.15 Menu Home
2.Tampilan Menu Java
Gambar III.16 Menu Java
3.Tampilan Materi Java
Gambar III.17 Menu Materi Java
4.Tampilan Menu HTML
Gambar III.18 Menu HTML
5.Tampilan Materi HTML
Gambar III.19 Menu Materi HTML
6.Tampilan Menu Quiz
Gambar III.20 Menu Quiz
7.Gambar Menu Quiz Java
Gambar III.21 Menu Quiz Java
8.Gambar Menu Quiz HTML
Gambar III.22 Menu Quiz HTML
9.Gambar Menu Tips
Gambar III.23 Menu Tips
10.Gambar Menu About
Gambar III.24 Menu About
3.4Testing
Testing menggunakan white box dan black box. Untuk pengujian white box dengan menggunakan skema diagram alir, berikut ini merupakan diagram alir dari aplikasi Learning Programming Language.
1. White Box
a. Main Menu
Gambar III.25 Bagan Alir Main Menu
Gambar III.26 Grafik Alir Main Menu
(V(G) = E – N + 2)
Dimana :
E = Jumlah Edge yang ditentukan gambar panah
N = Jumlah simpul grafik alir ditentukan dengan gambar lingkaran
Sehingga didapat :
V(G) = E – N + 2
V(G) = 17 – 13 + 2
V(G) = 4 + 2
V(G) = 6
Baris set yang dihasilkan dari jalur independent adalah sebagai berikut :
Path 1 : 1,2,3,5,7,9,11,13
Path 2 : 1,2,3,4,2,3,5,7,9,11,13
Path 3 : 1,2,3,5,6, 2,3,5,7,9,11,13
Path 4 : 1,2,3,5,7,8,2,3,5,7,9,11,13
Path 5 : 1,2,3,5,7,9,10,2,3,5,7,9,11,13
Path 6 : 1,2,3,5,7,9,11,12, 2,3,5,7,9,11,13
b. Java
Gambar III.27 Bagan Alir Java
Gambar III.28 Grafik Alir Java
(V(G) = E – N + 2)
Dimana :
E = Jumlah Edge yang ditentukan gambar panah
N = Jumlah simpul grafik alir ditentukan dengan gambar lingkaran
Sehingga didapat :
V(G) = E – N + 2
V(G) = 34 – 27 + 2
V(G) = 7 + 2
V(G) = 9
Baris set yang dihasilkan dari jalur independent adalah sebagai berikut :
Path 1 : 1,2,3,6,9,12,15,18,21,24,27
Path 2 : 1,2,3,4,5,6,9,12,15,18,21,24,27
Path 3 : 1,2,3,6,7,8,9,12,15,18,21,24,27
Path 4 : 1,2,3,6,9,10,11,12,15,18,21,24,27
Path 5 : 1,2,3,6,9,12,13,14,15,18,21,24,27
Path 6 : 1,2,3,6,9,12,15,16,17,18,21,24,27
Path 7 : 1,2,3,6,9,12,15,18,19,20,21,24,27
Path 8 : 1,2,3,6,9,12,15,18,21,22,23,24,27
Path 9 : 1,2,3,6,9,12,15,18,21,24,25,26,27
c. HTML
Gambar III.29 Bagan Alir HTML
Gambar III.30 Grafik Alir HTML
(V(G) = E – N + 2)
Dimana :
E = Jumlah Edge yang ditentukan gambar panah
N = Jumlah simpul grafik alir ditentukan dengan gambar lingkaran
Sehingga didapat :
V(G) = E – N + 2
V(G) = 38 – 30 + 2
V(G) = 8 + 2
V(G) = 10
Baris set yang dihasilkan dari jalur independent adalah sebagai berikut :
Path 1 : 1,2,3,6,9,12,15,18,21,24,27,30
Path 2 : 1,2,3,4,5,6,9,12,15,18,21,24,27,30
Path 3 : 1,2,3,6,7,8,9,12,15,18,21,24,27,30
Path 4 : 1,2,3,6,9,10,11,12,15,18,21,24,27,30
Path 5 : 1,2,3,6,9,12,13,14,15,18,21,24,27,30
Path 6 : 1,2,3,6,9,12,15,16,17,18,21,24,27,30
Path 7 : 1,2,3,6,9,12,15,18,19,20,21,24,27,30
Path 8 : 1,2,3,6,9,12,15,18,21,22,23,24,27,30
Path 9 : 1,2,3,6,9,12,15,18,21,24,25,26,27,30
Path 10 : 1,2,3,6,9,12,15,18,21,24,27,28,29,30
d.Quiz
Gambar III.31 Bagan Alir Quiz
Gambar III.32 Grafik Alir Quiz
(V(G) = E – N + 2)
Dimana :
E = Jumlah Edge yang ditentukan gambar panah
N = Jumlah simpul grafik alir ditentukan dengan gambar lingkaran
Sehingga didapat :
V(G) = E – N + 2
V(G) = 12 – 11 + 2
V(G) = 1 + 2
V(G) = 3
Baris set yang dihasilkan dari jalur independent adalah sebagai berikut :
Path 1 : 1,2,3,7,11
Path 2 : 1,2,3,4,5,6,7,11
Path 3 : 1,2,3,7,8,9,10,11
2. Black Box
Tabel III.1 Pengujian Black Box Menu Utama
Input
Proses
Output
Validasi
Button Java
Menampilkan layout materi Java
Tampil layout materi Java
Selesai
Button HTML
Menampilkan layout materi HTML
Tampil layout materi HTML
Selesai
Button Quiz
Menampilkan layout pilihan kuis
Tampil layout pilihan kuis
Selesai
Button Tips
Menampilkan layout tips sukses belajar pemrograman
Tampil layout tips sukses belajar pemrograman
Selesai
Button About
Menampilkan layout seputar pembuat aplikasi
Tampil layout seputar pembuat aplikasi
Selesai
Tabel III.2 Pengujian Black Box Menu Quiz
Input
Proses
Output
Validasi
Button Quiz Java
Menampilkan layout kuis mengenai java
Tampil layout kuis tentang java
Selesai
Button Quiz HTML
Menampilkan layout kuis mengenai html
Tampil layout kuis tentang html
Selesai
Radio Button Pilihan Ganda
Tidak melakukan pengisian jawaban
Tampilan notif : You hae to answer before you continue to the next question.
Selesai
Button Back
Kembali ke menu sebelumnya
Kembali ke menu sebelumnya
Selesai
3.5Support
Untuk memasang aplikasi ini digunakan perangkat atau media Mobile Smartphone berbasis Android minimal Android 4.0 – API Level 14 RAM 1 GB dan maksimal Android 5.0 – API Level 21 RAM 2 GB.
21
uc Use Case Model
User
Pilih Button Java
Pilih Button HTML
Pilih Button Quiz
Pilih Button Tips
Pilih Button About
Materi Java
Materi HTML
Pilih Quiz Java
Pilih Quiz HTML
«include»
«extend»
«include»
«extend»
act Activity
Mulai
Home
Pilih Button Java
Pilih Button HTML
Pilih Materi Java
Pilih Materi HTML
Pilih Button Quiz
Pilih Quiz Java
Pilih Quiz HTML
Pilih Button Tips
Pilih Button About
Selesai
sd Sequence diagram menu Java
User
Button JavaButton Materi
Pengenalan
Bahasa Java
Dasar
Pemrograman
Java
Input dari
Keyboard
Struktur KontrolJava ArrayJava Class
Library
Membuat Class
Sendiri
Pewarisan,
Polimorfisme,
dan Interface
struktur kontrol()
back()
input dari keyboard()
back()
dasar pemrograman java()
back()
back()
back()
HTML()
back()
back()
Pewarisan, Polimorfisme, dan Interface()
back()
membuat class sendiri()
pengenalan bahasa java()
java class library()
judul materi()
java array()
sd Sequence diagram menu HTML
User
Button HTMLButton Materi
HTMLPengaturan TeksListsImagesTabelFramesKumpulan Tag
HTML
Penyisipan SuaraMarquee
back()
images()
back()
lists()
back()
pengaturan teks()
back()
HTML()
back()
judul materi()
back()
marquee()
back()
penyisipan suara()
back()
kumpulan tag html()
back()
frames()
back()
tabel()
HTML()
deployment Deployment Diagram
Personal Computer
Intel XDK
Cordova
HTML5
Jquery
Learning
Programming
Language.apk
Smart Phone Android
«deployment spec»
Operating System Android
Ice Cream Sandwich (4.0)
«deployment spec»
Operating System Android
Lollipop (5.0)
«merge»
StartTampil MainMenuMenu JavaPilih JavaPilih HTMLPilih QuizPilih TipsPilih AboutEndMenu HTMLProses QuizTampil TipsTampil AboutYYYYYTTTTT
StartTampil MainMenuMenu JavaPilih JavaPilih HTMLPilih QuizPilih TipsPilih AboutEndMenu HTMLProses QuizTampil TipsTampil AboutYYYYYTTTTT
12435791113681012T
12435791113681012T
StartMenu JavaPilih PengenalanPengenalan Bahasa JavaDasar Pemrograman JavaInput dari KeyboardStruktur KontrolJava ArrayJava Class LibraryMembuat ClassPewarisanPilih DasarPilih InputPilih StrukturPilih ArrayPilih Class LibraryPilih ClassPilih PewarisanEndYYYYYYYYTTTTTTTTProsesProsesProsesProsesProsesProsesProsesProses
StartMenu JavaPilih PengenalanPengenalan Bahasa JavaDasar Pemrograman JavaInput dari KeyboardStruktur KontrolJava ArrayJava Class LibraryMembuat ClassPewarisanPilih DasarPilih InputPilih StrukturPilih ArrayPilih Class LibraryPilih ClassPilih PewarisanEndYYYYYYYYTTTTTTTTProses
Proses
Proses
Proses
Proses
Proses
Proses
Proses
123581114172023266912151821242747101316192225
12358111417202326691215182124274
7
10
13
16
19
22
25
StartMenu HTMLJikaPengenalan HTMLPengaturan TeksListsImagesTabelFramesKumpulan Tag HTMLPenyisipan SuaraJikaJikaJikaJikaJikaJikaJikaEndYYYYYYYTYTTTTTTTJikaPenyisipan SuaraTY
StartMenu HTMLJikaPengenalan HTMLPengaturan TeksListsImagesTabelFramesKumpulan Tag HTMLPenyisipan SuaraJikaJikaJikaJikaJikaJikaJikaEndYYYYYYYTYTTTTTTTJikaPenyisipan SuaraTY
123581114172023266912151821243047101316192225272829
12358111417202326691215182124304
7
10
13
16
19
22
25
272829
StartQuizJavaHTMLEndSoalSoalProsesProsesTampil ScoreTampil ScoreYYTT
StartQuizJavaHTMLEndSoalSoalProsesProsesTampil ScoreTampil ScoreYYTT
1237114859610
1237114859610