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