bab 2 tinjauan referensilibrary.binus.ac.id/ecolls/ethesisdoc/bab2/rs1...gambar 2. 11 contoh notasi...

38
BAB 2 TINJAUAN REFERENSI 2.1 Landasan teori 2.1.1 Unified Modeling Language (UML) Unified modeling language adalah sekumpulan dari model konstruksi, dan notasi yang di definisikan oleh Object Management Group (OMG) yang adalah organisasi standar untuk pengembangan sebuah sistem. (Satzinger, Jackson, & Burd, 2012, p. 46) Dengan menggunakan UML, analisis dan end-user lebih dapat menggambarkan dan memahami bermacam - macam diagram yang secara spesifik digunakan dalam proyek pengembangan sebuah sistem. (Satzinger, Jackson, & Burd, 2012, p. 46) Dapat disimpulkan bahwa UML ini digunakan untuk menggambarkan dan memahami diagram sebagai dasar dan model dalam dan atau pengembangan sebuah sistem. 2.1.1.1 Use-case Diagram Dalam buku Systems Analysis and Design in a Changing World edisi keenam, Satzinger, Jackson, dan Burd mengatakan bahwa use-case mendeskripsikan seseorang yang menggunakan sistem, yaitu actor selalu berada diluar boundary yang memiliki porsi manualnya sendiri di dalam sistem dan terkadang aktor ini bukanlah manusia secara harafiah namun adalah sistem lain dan atau alat lain dan menunjukkan hubungan antara use-case dengan actor tersebut (Satzinger, Jackson, & Burd, 2012, p. 81) Elemen yang terdapat dalam use-case yang ditunjukkan pada Gambar 2.1 adalah: 1. Simple stick figure Menggambarkan actor yang berperan dan atau seseorang yang menggunakan use-case 2. Connecting line Menunjukkan indikasi hubungan yang terjadi antara use- case dengan aktor 9

Upload: others

Post on 08-Dec-2020

18 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

BAB 2

TINJAUAN REFERENSI

2.1 Landasan teori

2.1.1 Unified Modeling Language (UML)

Unified modeling language adalah sekumpulan dari model konstruksi,

dan notasi yang di definisikan oleh Object Management Group (OMG) yang

adalah organisasi standar untuk pengembangan sebuah sistem. (Satzinger,

Jackson, & Burd, 2012, p. 46)

Dengan menggunakan UML, analisis dan end-user lebih dapat

menggambarkan dan memahami bermacam - macam diagram yang secara

spesifik digunakan dalam proyek pengembangan sebuah sistem. (Satzinger,

Jackson, & Burd, 2012, p. 46)

Dapat disimpulkan bahwa UML ini digunakan untuk menggambarkan

dan memahami diagram sebagai dasar dan model dalam dan atau

pengembangan sebuah sistem.

2.1.1.1 Use-case Diagram

Dalam buku Systems Analysis and Design in a Changing

World edisi keenam, Satzinger, Jackson, dan Burd mengatakan bahwa

use-case mendeskripsikan seseorang yang menggunakan sistem, yaitu

actor selalu berada diluar boundary yang memiliki porsi manualnya

sendiri di dalam sistem dan terkadang aktor ini bukanlah manusia

secara harafiah namun adalah sistem lain dan atau alat lain dan

menunjukkan hubungan antara use-case dengan actor tersebut

(Satzinger, Jackson, & Burd, 2012, p. 81)

Elemen yang terdapat dalam use-case yang ditunjukkan pada

Gambar 2.1 adalah:

1. Simple stick figure

Menggambarkan actor yang berperan dan atau seseorang

yang menggunakan use-case

2. Connecting line

Menunjukkan indikasi hubungan yang terjadi antara use-

case dengan aktor

9

Page 2: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

10

3. Automation boundary

Mendefinisikan batasan antara aktor dan aplikasi/sistem

yang digambarkan dengan kotak.

4. Use-case

Ditampilkan dalam bentuk oval dengan nama di dalam

use-case yang menggambarkan aktivitas dalam sistem, dan

digunakan untuk merespon dan menanggapi input dari user

(Satzinger, Jackson, & Burd, 2012, p. 69)

Gambar 2. 1 elemen-elemen use-case diagram

(Satzinger, Jackson, & Burd, 2012, p. 69)

Use-case diagram adalah permodelan UML yang digunakan

untuk menampilkan secara grafis bagaimana hubungan use-case

dengan user, dan kegiatan apa saja yang dapat dilakukan oleh user

dalam sebuah sistem.

Page 3: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

11

Gambar 2. 2 Contoh Use-case diagram (Satzinger, Jackson, & Burd, 2012, p. 81)

Sebagai sebuah contoh pada gambar 2.2 diatas dapat dilihat,

bahwa dalam use-case diagram menampilkan sub-system dengan

lebih lengkap, dan lebih detail menjelaskan tentang use-case dan

actor dari individual sub-system tersebut. Pada kasus ini tujuan dari

diagram ini adalah menunjukkan hubungan, alur, bahkan tugas actor

dari sistem Customer Account sub-system. (Satzinger, Jackson, &

Burd, 2012, p. 81)

2.1.1.2 Use-case Description

Use-case description sama seperti use-case diagram, namun

ditunjukkan dalam model tekstual yang mendeskripsikan informasi atau

proses detail peran setiap use case. Pada umumnya, cara terbaik untuk

membuat sebuah use-case diagram adalah dengan menggunakan fully

developed use case description, karena menjelaskan sebuah use-case

dengan sangat detail. (Satzinger, Jackson, & Burd, 2012, p. 122)

Page 4: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

12

Gambar 2. 3 Contoh use-case description dan komponen-komponennya

(Satzinger, Jackson, & Burd, 2012, p. 122)

Berdasarkan gambar 2.3, dapat disimpulkan beberapa komponen

dalam use-case description antara lain:

1. Use Case Name : Nama dari use-case

2. Scenario : Alur skenario (aktivitas) dalam suatu use- case

3. Triggering Event : Sesuatu hal yang memicu use-case tersebut

dijalankan/bekerja.

4. Brief Description : Penjelasan singkat alur yang dijalankan use-

case tersebut.

5. Actors : Suatu hal yang terkait dengan use-case. Actor

tidak selalu manusia, actor dapat juga sebuah sistem atau alat.

6. Related Use-Cases: Berdasarkan artinya, related Use Cases adalah

use-case lain yang masih berhubungan/berkaitan dengan use-case

Page 5: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

13

yang sedang dijelaskan. Biasanya menjelaskan bagaimana dapat

saling berkaitan.

7. Stakeholders : Divisi atau actor lain yang menggunakan use-case.

8. Preconditions : Kondisi yang harus terpenuhi sebelum use-case

dimulai/berjalan.

9. Postconditions : Kondisi yang terjadi setelah use-case selesai

dijalankan.

10. Flow of Activities : Tahapan secara detail yang dilakukan oleh

user dan respon yang diberikan oleh sistem kepada user.

11. Exception Conditions: Aktivitas yang mempengaruhi suatu use-

case tidak dapat berjalan dengan baik/semestinya.

2.1.1.3 Activity Diagram

Gambar 2. 4 Contoh activity diagram (Satzinger, Jackson, & Burd, 2012, p. 125)

Page 6: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

14

Activity Diagram mendeskripsikan berbagai macam aktivitas

dari user dan atau aktor yang melakukan aktivitas tersebut, dan alur

berurutan mengenai aktivitas-aktivitas tersebut yang dapat dilihat

pada Gambar 2.4. (Satzinger, Jackson, & Burd, 2012, p. 57)

Gambar 2. 5 Simbol-simbol activity diagram (Satzinger, Jackson, & Burd,

2012, p. 57)

Pada Gambar 2.5 simbol-simbol dalam activity diagram terdiri dari:

1. Oval

Sebagai representasi dari aktivitas individual dalam sebuah workflow

2. Connecting arrow

Representasi alur atau urutan aktivitas-aktivitas yang ada

3. Black circle

Titik hitam ini menunjukan dimulainya, dan berakhirnya alur aktivitas.

Titik hitam ini ada di dua tempat berbeda, yaitu awal dan akhir workflow.

Pada awal workflow berbentuk titik hitam, dan pada akhir workflow

berbentuk titik hitam dengan lingkaran diluarnya.

4. Diamond

Simbol ini menunjukan titik keputusan yang digunakan oleh user sebagai

pengambil keputuan dan akan menentukan langkah selanjutnya alur

aktivitas ini akan berjalan.

Page 7: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

15

5. Heavy solid line

Heavy solid line ini adalah synchronization bar yang memisahkan satu

langkah menjadi beberapa langkah/ alur dan atau mengkombinasikan

/menyatukan beberapa alur yang terpisah menjadi satu langkah.

6. Swimlane heading

Merepresentasikan agent atau user yang menampilkan dan atau

menjalankan aktivitas.

Gambar 2. 6 Contoh activity diagram secara lengkap (Satzinger, Jackson,

& Burd, 2012, p. 59)

Pada gambar 2.6 menunjukkan contoh activity diagram pada kegiatan

e-commerce (online checkout) yang mengandung beberapa actor, dan alur

aktivitas yang dilakukan saat checkout order.

Page 8: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

16

2.1.1.4 Class Diagram

Menurut Satzinger, class diagram berguna untuk menunjukkan kelas

dari suatu obyek yang ada pada sebuah sistem dan hubungan yang terjadi

diantara kelas-kelas tersebut.

Gambar 2. 7 Kelas dan hubungannya dalam class diagram (Satzinger,

Jackson, & Burd, 2012, pp. 101-107)

Pada gambar 2.7 dapat dilihat, bahwa class diagram memiliki

beberapa komponen, yaitu persegi panjang sebagai representasi kelas-kelas

beserta karakteristik dan atau sifat dari kelas tersebut, dan garis penghubung

antara persegi panjang yang menunjukkan hubungan antar kelas tersebut.

Dalam class diagram, terdapat 3 access modifier, yaitu:

1. Private : dilambangkan dengan simbol minus ( - )

Page 9: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

17

2. Protected : dilambangan dengan simbol pagar ( # )

3. Public : dilambangkan dengan simbol plus ( + )

Terdapat 3 jenis hubungan yang ada pada class diagram, yaitu:

1. Association

Association adalah relasi antara dua class yang saling

berhubungan, dilambangkan dengan garis yang menghubungkan antar

class satu dengan lainnya. Hubungan itu di antara lain (Satzinger,

Jackson, & Burd, 2012, pp. 101-107) :

1. Zero to one (0..1)

2. One and one only (1)

3. One and one only alternate (1..1)

4. Zero or more (0..*)

5. Zero or more alternate (*)

6. One or more (1..*)

2. Generalization/specification

Gambar 2. 8 Generalization dan Specification Association (Satzinger,

Jackson, & Burd, 2012, p. 105)

Generalization pada gambar 2.8 merupakan sebuah relasi

hierarki dimana class dibagi berdasarkan persamaan dan

perbedaannya, relasi ini terbagi lagi menjadi 2 yaitu:

a. Superclass : Sebuah superclass merupakan class general yang

dapat mewarisi sifat dan kesamaannya kepada subclass.

Page 10: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

18

b. Subclass : Sebuah subclass merupakan class yang lebih

spesifik, memiliki karakter mirip yang diturunkan oleh

superclass/parent classnya, namun pada dasarnya subclass

memiliki perbedaan antara satu dengan lainnya.

Specification yang ditampilkan pada Gambar 2.8 merupakan

pengembangan dari subclass, sebuah subclass dapat memiliki sifat/atribut

yang sama dengan parent/super class-nya. Walaupun tetap memiliki

perbedaan satu sama lain. Hal yang membuat berbeda dapat atribut atau

hal lainnya yang lebih spesifik. (Satzinger, Jackson, & Burd, 2012, pp.

101-107)

3. Whole/part relationships dibagi menjadi dua :

a. Aggregation

Aggregation merupakan hubungan dimana sebuah class mengambil

peran sebagai parent dan kelas lainnya berperan sebagai child. Dalam

aturan agregat, sebuah child dapat bertahan tanpa adanya parent.

Aggregation dilambangkan dengan diamond.

b. Composition

Composition merupakan relasi whole part yang lebih kuat

dibandingkan dengan agregat sehingga hubungan antara parent dan child

tidak dapat terpisahkan. Apabila kelas parent dihapus maka child menjadi

tidak berguna dan harus dihapus juga. Composition dilambangkan dengan

diamond yang diberi warna hitam didalamnya (Satzinger, Jackson, &

Burd, 2012, pp. 101-107).

2.1.1.5 Sequence Diagram

Sequence Diagram adalah diagram lanjutan dari use-case,

menunjukkan skenario atau flow antara aktor dan sistem. Sebuah sistem

sequence diagram digunakan untuk mendeskripsikan urutan dari informasi

sebuah sistem. Dalam sequence diagram, interaksi yang diperlihatkan lebih

kompleks dan berbeda dibanding use-case diagram, dimana aktor dan sistem

akan berinteraksi dengan memasukkan data dan juga akan menerima data,

sebagai contoh penerapan sequence diagram terdapat pada Gambar 2.9.

(Satzinger, Jackson, & Burd, 2012, pp. 126-127)

Page 11: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

19

Notasi yang ada dalam sequence diagram antara (Satzinger,

Jackson, & Burd, 2012, pp. 126-133) :

a. Actor : Dilambangkan dengan stickman, memiliki sistem kerja yang

sama dengan use-case dimana aktor berinteraksi dengan sistem.

b. Object : Representasi seluruh sistem automasi yang dilambangkan

dengan nama obyek yang digaris bawahi didalam sebuah kotak.

c. Lifeline : Dilambangkan dengan garis putus-putus, mengindikasikan

alur dari pesan yang dikirim dan yang diterima oleh aktor dan obyek,

serta menunjukkan waktu perjalanan obyek tersebut.

d. Input Message : Mendeskripsikan tujuan dan data yang dikirimkan.

e. Return Value : Dilambangkan dengan panah putus-putus yang

menunjukkan suatu respon setelah user menjalankan suatu proses.

Respon tersebut berupa boolean (true-false).

f. Loop : pesan yang dikirim dan return value terdapat dalam

kotak yang lebih besar dan berjalan berulang kali sesuai dengan

kondisinya, sebagai contoh notasi ini terdapat pada Gambar 2.10.

g. True/false condition : Mengindikasikan pesan berulang selama

kondisinya masih benar.

h. Alt frame : Mengindikasikan kondisi if-else yang dapat dilihat

pada Gambar 2.11.

Page 12: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

20

Gambar 2. 9 Penerapan Sequence Diagram (Satzinger, Jackson, & Burd,

2012, p. 342)

Gambar 2. 10 Contoh notasi loop (Satzinger, Jackson, & Burd, 2012, p. 128)

Page 13: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

21

Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, &

Burd, 2012, p. 130)

2.1.2 Android

Android merupakan sistem operasi mobile berbasis kernel Linux yang

dikembangkan oleh Android Inc dan kemudian diakuisisi oleh Google.

Sistem operasi ini bersifat open source (terbuka), sehingga para programmer

dapat membuat aplikasi secara mudah. Sistem operasi Android memiliki fitur

yang dimiliki oleh smartphone pada umumnya seperti aplikasi yang

melimpah, email, fitur online seperti browser, dll. (Enterprise, 2010, p. 1)

2.1.3 Waterfall Model

Waterfall model atau terkadang disebut dengan classic life cycle

adalah metode yang pendekatannya berurutan dan sistematik dalam

pengembangan software yang diawali dengan menspesifikasikan kebutuhan

customer dan memprosesnya melalui perencanaan, pembuatan model,

konstruksi, pengaplikasian serta maintenance setelah software selesai dibuat.

(Pressman & Maxim, 2015, pp. 41-42)

Gambar 2. 12 Waterfall Model (Pressman & Maxim, 2015, pp. 41-42)

Page 14: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

22

Seperti yang terlihat di Gambar 2.12, terdapat air terjun kecil antara

tahap pertama ke tahap lainnya, oleh sebab itu model ini disebut dengan

Waterfall Model atau daur ulang perangkat lunak.

Beberapa tahapan yang harus dilalui dalam proses waterfall seperti

yang terlihat dalam Gambar 2.12 adalah sebagai berikut:

a. Communication

Tahap yang pertama dilakukan adalah berkomunikasi antara

developer dan customer dalam membahas dan menganalisa masalah

untuk menentukan kebutuhan sistem dan data-data yang diperlukan, serta

mendefinisikan fitur dan fungsi dari software yang akan dibuat.

b. Planning

Tahapan ini adalah tahapan perencanaan yang menjelaskan

mengenai estimasi tugas yang akan dilakukan, resiko yang dapat terjadi,

estimasi produk yang dihasilkan, penjadwalan pembuatan software dan

memastikan proses pengerjaan software tetap berlangsung lancar.

c. Modeling

Pada tahap ini developer mulai merancang dan memodelkan

arsitektur sistem yang dapat berupa perancangan struktur data, arsitektur

software, tampilan interface dari software, dan algoritma dasar program

untuk lebih memahami gambaran besar dari perencanaan yang telah

dibuat di tahap sebelumnya.

d. Construction

Pada tahap ini developer memulai untuk coding atau membuat

kode yang dapat dibaca dan di mengerti oleh mesin untuk dibuat menjadi

sebuah software. Setelah tahap coding selesai, pengujian terhadap sistem

akan dijalankan untuk menemukan dan mengkoreksi kesalahan yang

mungkin dan atau telah terjadi untuk diperbaiki.

e. Deployment

Tahap terakhir ini adalah tahap implementasi software kepada

customer, serta melakukan evaluasi pada software. Pada tahap ini dapat

dilakukan perbaikan dan pengembangan software berdasarkan hasil

evaluasi agar software dapat berjalan dan berkembang sesuai dengan

fungsinya.

Page 15: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

23

2.1.4 PHP (Hypertext Preprocessor)

PHP atau Hypertext Preprocessor adalah bahasa pemrograman script

serverside yang sengaja dirancang lebih cenderung untuk membuat dan

mengembangkan website. Bahasa pemrograman ini dirancang khusus untuk

para pengembang website agar dapat menciptakan suatu halaman website

yang bersifat dinamis. Gambar 2.13 menunjukkan korelasi antara PHP dan

model MVC

Gambar 2. 13 PHP dan MVC Model (Yudhanto & Prasetyo, 2018, p. 7)

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995 dan

terus dikembangkan hingga saat ini. Ada banyak sekali web termasuk

CMS yang dibuat menggunakan bahasa pemrograman PHP, salah satu

contohnya adalah Wordpress. (Yudhanto & Prasetyo, 2018, p. 7)

2.1.5 Hypertext Markup Language (HTML)

Hypertext Markup Language adalah sebuah bahasa untuk

mendeskripsikan bagaimana tulisan, grafik dan file yang mengandung

informasi lainnya terorganisir dan terhubung bersama. Hypertext awalnya

merupakan teks yang tersimpan dalam form elektronik yang berhubungan

antar halaman. Namun saat ini pengertian hypertext berubah menjadi suatu

hal yang mengarah kepada semua hal yang berhubungan dengan obyek (teks,

gambar, file, dll) yang dapat dihubungkan dengan obyek lain.

Sampai saat ini, sudah lebih dari 110 juta web server menjawab request

user untuk lebih dari 25 miliar teks dan file multimedia. Kata yang biasa

pengguna gunakan dalam kehidupan sehari-hari adalah “mengunjungi web

Page 16: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

24

halaman”, namun apa yang sesungguhnya terjadi adalah pengguna melihat

semua teks dan gambar dalam sebuah alamat dalam komputer. Teks yang

dibaca, dan gambar yang dilihat adalah hasil render dari web browser. Untuk

mendukung tampilan HTML yang baik dalam sebuah website, diperlukan

HTML, CSS (Cascading Style Sheet), JavaScript bergabung dan

berkolaborasi untuk menghasilkan object atau elemen tertentu seperti teks,

gambar, video, tabel, dll sehingga menjadi konten dari sebuah halaman web

yang baik (Meloni, 2012, p. 2)

2.1.6 Cascading Style Sheet (CSS)

Cascading Style Sheet membantu sebuah konten yang telah ditulis

dengan Hypertext Markup Language atau HTML menjadi lebih indah dan

lebih bagus. Konsep dalam Cascading Style Sheet atau biasa disebut

Stylesheet ini cukup sederhana, yaitu dengan membuat sebuah Stylesheet

dokumen yang menspesifikasikan font, warna, spacing, dan karakteristik

lainnya untuk membangun tampilan unik pada tampilan website-nya.

Memisahkan file CSS / Stylesheet dengan file HTML memudahkan

perubahan dan perbaikan kode di masa yang akan datang, dan memudahkan

dalam menghubungkan setiap halaman yang telah dan atau sudah diberi

tampilan.

Berikut adalah contoh penulisan CSS:

h1 {

font: 36pt Courier;

}

Dari code di atas, dapat dilihat bahwa CSS terdiri dari tiga komponen utama:

1. Selector

Selector berfungsi sebagai penamaan atau penanda dalam

sebuah tag atau elemen HTML yang akan dimodifikasi

tampilannya dengan CSS. Dapat dilihat dari contoh diatas

memiliki Selector h1, yang berarti semua tag h1 dalam file HTML

akan memiliki font berukuran 36, dengan jenis huruf Courier.

2. Property

Page 17: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

25

Property merupakan suatu atribut yang akan diubah dalam

selector, berdasarkan contoh diatas maka property yang akan

diubah adalah font dalam tag h1.

3. Value

Value adalah nilai apa yang akan di ubah dalam suatu property

tersebut. Value ini dapat berupa teks maupun angka, untuk teks

pada umumnya memiliki nilai tetap yang dapat dipilih seperti

jenis penempatan tulisan, yaitu ‘center’, ‘ left’ atau ‘right’, untuk

angka pada umumnya memiliki value yang tidak tetap yang dapat

di isi dengan apapun yang ingin dideklarasikan. Pada kode diatas,

dapat disimpulkan bahwa value yang dimiliki merupakan nilai

tidak tetap yang harus diisi sendiri, nilai yang dipilih merupakan

angka 36 dan nilai tetap dimana untuk font sudah tersedia pada

library (Meloni, 2012, p. 57)

2.1.7 JavaScript

Javascript adalah sebuah bahasa pemrograman yang digunakan pada

website agar menjadi lebih interaktif dan dinamis. Javascript adalah bahasa

pemrograman client-side dimana tampilan akhir akan dilihat oleh user secara

langsung. JavaScript tidak memerlukan mesin kompilasi untuk eksekusi

instruksi, cukup memodifikasinya dengan tag <script> dalam HTML, lalu

save dan refresh, maka perubahan yang dibuat akan langsung terlihat pada

web browser.

Menurut Meloni, ada beberapa hal yang dapat javascript lakukan. Hal

itu di antara lain adalah (Meloni, 2012, pp. 66-67):

a. Menampilkan pesan kepada user sebagai bagian dari web page

dalam status line di browser maupun pada alert box.

b. Menyortir konten dari sebuah form dan melakukan

perhitungan. Pada umumnya ini berhubungan dengan angka

dan kuantitas.

c. Membuat animasi gambar atau membuat gambar dapat

bergerak ketika user menggerakan mouse di sekitar gambar.

d. Membuat banner iklan yang interaktif kepada user, untuk

menampilkan tampilan grafik yang lebih bagus dan menarik.

Page 18: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

26

e. Mendeteksi apakah browser sedang digunakan, dan

menjalankan fungsi lanjutan tertentu yang hanya dapat

dijalankan di dalam browser yang kompatibel.

f. Mendeteksi plug-ins yang ter-instal dan memberitahu user

jika ada plug-in yang diperlukan.

g. Memodifikasi seluruh ataupun sebagian dari web page tanpa

perlu user melakukan reload.

h. Menampilkan dan berinteraksi dengan data dari sebuah remote.

2.1.8 Web Server

Web server adalah perangkat lunak yang berfungsi sebagai penerima

input yang dikirimkan melalui browser, kemudian memberikan tanggapan

permintaan dalam bentuk halaman situs web atau lebih umumnya dalam

dokumen HTML. Namun, web server dapat mempunyai dua pengertian

berbeda, yaitu sebagai bagian dari perangkat keras (hardware), maupun

sebagai bagian dari perangkat lunak (software). Jika merujuk pada hardware,

webserver digunakan untuk menyimpan semua data seperti dokumen HTML,

gambar, file CSS stylesheet, dan file JavaScript. Sedangkan pada sisi

software, fungsi web server adalah sebagai pusat kontrol untuk memproses

input yang diterima dari browser. Semua yang berhubungan dengan website

biasanya juga berhubungan dengan web server, karena tugas web server

adalah mengatur semua komunikasi yang terjadi antara browser dengan

server untuk memproses sebuah website. (Yudhanto & Prasetyo, 2018, p. 10)

2.1.9 Model-View-Controller (MVC)

Model-View-Controller atau MVC adalah sebuah metode untuk

membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan

(View) dan cara bagaimana memprosesnya (Controller) contohnya dapat

dilihat pada Gambar 2.14. (Yudhanto & Prasetyo, 2018, p. 6) Penjelasan

setiap komponen dalam MVC adalah sebagai berikut :

a. Model : Model mewakili struktur data, dan berisi fungsi-fungsi yang

membantu seseorang dalam pengelolaan basis data, seperti

memasukkan data ke basis data, pembaruan data, dll.

Page 19: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

27

b. View : View adalah bagian yang mengatur tampilan ke pengguna,

contohnya halaman web.

c. Controller: Controller merupakan bagian yang menjembatani model

dan view. Controller berisi perintah-perintah yang berfungsi untuk

memproses suatu data dan mengirimkannya ke halaman web.

Gambar 2. 14 Model-View- Controller (MVC) (Yudhanto & Prasetyo,

2018, p. 6)

2.1.10 Framework

Framework adalah kerangka kerja. Framework juga dapat diartikan

sebagai kumpulan script (terutama class dan function) yang dapat membantu

developer/programmer dalam menangani berbagai masalah-masalah dalam

pemrograman, seperti koneksi ke database, pemanggilan variabel, file, dll.

Dan framework dapat disebut juga dengan kumpulan fungsi-fungsi / library,

sehingga pekerjaan developer lebih fokus dan lebih cepat dalam membangun

aplikasi.

Framework adalah komponen pemrograman yang siap digunakan ulang

kapan saja, sehingga programmer tidak harus membuat script yang sama untuk

tugas yang sama dan tidak perlu membuat fungsi dari awal. Programmer cukup

memanggil kumpulan library atau fungsi yang sudah ada di dalam

Page 20: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

28

framework, cara menggunakan fungsi tersebut sudah ditentukan dan memiliki

aturan masing-masing. Pada gambar 2.15 ditampilkan beberapa framework

PHP yang cukup dikenal oleh kalangan programmer. (Yudhanto & Prasetyo,

2018, p. 8)

Gambar 2. 15 Contoh beberapa framework PHP (Yudhanto & Prasetyo,

2018, p. 9)

2.1.11 Laravel

Laravel adalah salah satu framework PHP terbaik yang dikembangkan

oleh Taylor Otwell. Proyek Laravel dimulai pada April 2011. Awal mula proyek

ini dibuat karena Otwell sendiri tidak menemukan framework yang up-to-date

dengan versi PHP. Mengembangkan versi PHP yang ada juga bukan merupakan

ide yang bagus karena keterbatasannya sumber daya. Oleh sebab itu, Otwell

membuat sendiri framework bernama Laravel, dan membuat syarat penggunaan

Laravel harus diimbangi minimal dengan PHP versi 5.3.

Laravel merupakan framework web development PHP yang bersifat

open source dirilis di bawah lisensi MIT dan dibangun dengan konsep MVC

(Model-view-controller). Laravel adalah pengembangan website berbasis

MVC yang ditulis dalam bahasa PHP, dirancang untuk meningkatkan

kualitas perangkat lunak dengan mengurangi pengembangan awal dan biaya

pemeliharaan, serta untuk meningkatkan pengalaman bekerja dengan aplikasi

Page 21: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

29

yang menyediakan sintaks ekspresif, jelas, dan aplikasi yang dapat

menghemat waktu. (Yudhanto & Prasetyo, 2018, pp. 17-18)

Beberapa alasan laravel adalah salah satu framework PHP yang

sangat baik untuk digunakan (Yudhanto & Prasetyo, 2018, pp. 19-21) :

- Mudah dan dokumentasinya lengkap

Platform laravel menarik dan mudah digunakan, programmer

hanya perlu memiliki pemahaman dasar mengenai PHP, maka

struktur framework ini akan mudah dipahami karena dokumentasinya

yang sangat baik, rapi, dan jelas.

- Open Source

Merupakan framework open source, yang berarti dapat digunakan

secara bebas, gratis, dan memungkinkan programmer membuat web

aplikasi yang besar dan kompleks dengan cukup mudah, yaitu hanya

dengan bermodalkan editor dan web server yang telah terinstal PHP.

- Arsitektur MVC

Dengan menggunakan pola MVC, struktur kode menjadi lebih

rapi dimana struktur itu memisahkan antara logika dan tampilan.

- Blade Template

Hal menarik yang dimiliki Laravel adalah Blade Template, selain

unik juga sangat menarik perhatian untuk digunakan. Contoh

penggunaan Blade Template adalah dapat memetakan template yang

di miliki dengan membaginya menjadi beberapa blade sehingga

menjadi lebih mudah untuk diatur.

- Memiliki Fitur Migration

Migration adalah salah satu fitur utama yang dimiliki oleh

Laravel. Migration memungkinkan user untuk mempertahankan

struktur database yang dimiliki tanpa harus membuatnya kembali.

Dengan fitur ini user dapat mengembalikan beberapa perubahan

terakhir yang kita lakukan pada database.

- Keamanan

Laravel memberikan beberapa pilihan penting yang dapat

digunakan untuk membuat aplikasi agar tetap aman.

- Komunitas yang Besar

Page 22: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

30

Laravel didukung dengan komunitas yang besar, dengan hal ini

pula maka user yang baru mulai mempelajari framework ini akan

mudah mencari solusi atas setiap permasalahan yang mungkin akan

ditemukan selama proses belajar/mengerjakan aplikasi.

- Hemat Waktu

Dengan semua kelebihan Laravel diatas, maka dapat disimpulkan

akan mudah mempelajari framework ini, cukup membuka

dokumentasi, karena akan sangat menghemat waktu dalam proses

pembuatan aplikasinya.

2.1.12 React Native

React Native adalah sebuah framework Javascript untuk menulis kode

yang secara nyata membangun aplikasi mobile untuk iOS dan Android. Library

dalam React Native adalah berbasis React, Library Javascript Facebook untuk

membangun UI. Namun, dibanding menargetkan web browser, React Native

fokus kepada platform mobile. Dalam arti lain, web developer kini dapat

membangun aplikasi mobile menggunakan library javascript yang dimana sudah

terdapat dan sudah sangat familiar dalam dunia web. Framework ini juga

mempermudah developer karena dapat dijalankan pada Android maupun iOS.

React Native ditulis dengan gabungan bahasa javascript dan XML,

atau lebih dikenal dengan JSX. Untuk back-end nya React Native

menggunakan fitur Javascript interface untuk menghubungkan API yang

biasa dikenal dengan istilah fetch. Aplikasi akan dibangun menggunakan

komponen asli dari UI mobile, sehingga akan tampak seperti aplikasi mobile

pada umumnya. (Eisenman, 2016, p. 1)

2.1.12.1 Expo

Expo adalah alat yang membantu developer membangun

project React Native. Expo bukanlah milik Facebook ataupun React

Native, namun expo berkembang di sekitar React Native. Dalam

penggunaanyan Expo jauh lebih mudah dan cepat, karena hanya perlu

menggunakan command yang lebih pendek, yaitu “npm start / expo

start”, lalu hasil dari program mobile apps sudah dapat terlihat

(Zammetti, 2018, p. 13)

Page 23: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

31

2.1.12.2 Native Base

Berdasarkan website resmi Native Base (NativeBase, 2020),

Native Base adalah sebuah UI komponen library yang gratis dan open

source untuk membangun mobile apps pada React Native.

2.1.13 Visual Studio Code

Visual Studio Code adalah cross-platform development tool pertama

milik Microsoft dibawah keluarga Visual Studio. Arti dari cross-platform

adalah alat ini berjalan dalam sistem operasi Windows, Linux, dan macOS.

Alat ini gratis dan dapat digunakan bebas atau dapat disebut juga dengan

open source. Visual Code memungkinkan programmer mengedit folder code

atau folder-based project dengan lebih mudah.

Keunggulan Visual Code adalah angka bahasa yang besar dan kaya

akan fitur editing seperti IntelliSense, mencari referensi simbol, dan dengan

cepat mencapai sebuah type definition, dll. (Sole, 2019, p. 2)

2.1.14 Postman

Postman adalah tool yang digunakan untuk melakukan pengujian

API. Postman memiliki GUI yang mudah dipahami, dan dapat mengirimkan

HTTP request. Postman mengijinkan user untuk mengirimkan request

dengan HTTP methods yang berbeda(GET, POST, PUT, DELETE) dan user

dapat melakukan pengecekan respon dari server. Dengan alat ini, user dapat

dengan mudah mengetes API dengan mengirim sebuah request client dan

postman akan langsung mengirimkan HTTP response agar pengecekan dapat

dilakukan lebih cepat. User juga dapat menyimpan kasus atau proyek yang

telah dilakukan pengujian dan mengelompokannya ke dalam koleksi yang

berbeda (Chan, Chung, & Huang, 2019, p. 27)

2.1.15 Database

Database adalah koleksi dari data yang terkait secara logis dengan

deskripsinya dan dirancang untuk memenuhi kebutuhan dari sebuah

organisasi. Database memiliki sifat tunggal, namun memungkinkan adanya

tempat penyimpanan yang besar dan dapat dipakai disaat yang bersamaan

oleh beberapa departemen dan user.

Page 24: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

32

Database digunakan oleh beberapa sumber coorporate yang tidak

digunakan lagi untuk file data redundan, namun digunakan untuk seluruh

data yang terintegrasi dengan duplikat data yang minimum. Untuk

penganalisaan informasi yang dibutuhkan oleh organisasi, diperlukan

identifikasi entity, attribute, relationships. (Connolly & Begg, 2015, p. 63)

Kumpulan database ini dikelola dan dikendalikan oleh Database

Management System (DBMS).

2.1.15.1 DBMS (Database Management System)

DBMS adalah sistem software yang memungkinkan

penggunanya untuk menjelaskan, membuat, memelihara dan

mengontrol akses ke database. (Connolly & Begg, 2015, p. 64)

DBMS menyediakan beberapa fasilitas berupa:

1. Memberikan akses kepada user untuk menjelaskan database

menggunakan Data Definition Language (DDL).

2. Memberikan akses kepada user untuk memasukkan,

memperbarui, menghapus, mengambil data dari database

menggunakan Data Manipulation Language (DML).

3. Memiliki kontrol akses ke database, contohnya:

a. Security system

b. Integrity system

c. Concurrency control system

d. Recovery control system

e. User-accessible catalog

2.1.15.2 Entity-Relationship Diagrams

Entity-Relationship (ER) diagram digunakan untuk

mengidentifikasi data penting berupa entity, dan relationship, serta

merepresentasikannya dalam diagram. Data-data yang ditampilkan

pada diagram ini adalah entity type, relationship type, dan attribute.

(Connolly & Begg, 2015, p. 405)

1. Entity Type

Entity type adalah sekumpulan object dengan karakteristik

dan atau tipe yang sama. Object dapat bersifat physical (object asli)

atau conceptual (object abstrak). Entity type dapat diidentifikasi

dengan nama dan karakteristik. (Connolly & Begg, 2015, p. 406)

Page 25: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

33

Entity type diklasifikasikan dalam dua tipe (Connolly &

Begg, 2015, p. 417), yaitu:

- Strong entity type

Entity type ini bersifat tidak bergantung pada entity type

lainnya. Karakteristik strong entity type adalah setiap entity

dapat diidentifikasikan secara unik menggunakan primary key

attribute dari entity type tersebut.

- Weak entity type

Entity type ini memiliki sifat bergantung pada entity type

lainnya. Karakteristik weak entity type adalah setiap entity

tidak dapat diidentifikasi secara unik hanya menggunakan

attribute yang terkait dengan entity type tersebut. Atau

dapat diidentifikasikan secara unik hanya melalui

hubungan dengan attribute yang memiliki primary key.

2. Relationship type

Relationship type adalah kumpulan hubungan antara entity

type. Setiap tipe hubungan diberikan nama sesuai dengan

fungsinya masing-masing. (Connolly & Begg, 2015, p. 408)

Attributes adalah karakteristik dari sebuah entity atau

relationship type, atau nilai yang dapat mendeskripsikan adanya

entity dan merepresentasikan tujuan utama dari data yang

disimpan pada database. (Connolly & Begg, 2015, p. 413)

Attribute memiliki lima key (Connolly & Begg, 2015, pp. 415-

416), yaitu :

- Candidate key

Candidate key adalah sekumpulan attribute dengan

jumlah yang minimal yang dapat mengidentifikasi

setiap entity type secara unik.

- Primary key

Primary key adalah candidate key yang terpilih untuk

mengidentifikasi setiap entity type secara unik.

- Composite key

Page 26: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

34

Composite key adalah candidate key yang terdiri dari

dua atau lebih attribute.

- Alternate key

Alternate key adalah candidate key yang tidak dipilih

sebagai primary key.

- Foreign key

Foreign key adalah attribute atau sekelompok attribute

dalam satu relasi yang cocok dengan candidate key dari

beberapa relasi yang sama. Biasanya foreign key ini

dipakai untuk merujuk pada primary key atau candidate

key pada attribute lain. (Connolly & Begg, 2015, p. 159)

2.1.15.2.1 Multiplicity

Multiplicity adalah jumlah dan atau kisaran kemungkinan

dari entity type yang berhubungan dengan entity type tunggal

melalui hubungan tertentu. (Connolly & Begg, 2015, pp. 419-

422)

1. One-to-One (1:1) Relationships

Gambar 2. 16 Contoh One-to-One Relationship

(Connolly & Begg, 2015, pp. 419-422)

Page 27: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

35

2. One-to-Many (1:*) Relationships

Gambar 2. 17 Contoh One-to-Many Relationship (Connolly

& Begg, 2015, pp. 419-422)

3. Many-to-Many (*:*) Relationships

Gambar 2. 18 Contoh Many-to-Many Relationship

(Connolly & Begg, 2015, pp. 419-422)

2.1.15.3 Phpmyadmin

Berdasarkan website resmi PhpMyadmin, PhpMyadmin adalah

sebuah software gratis yang berbentuk seperti halaman situs pada web

server. Fungsi dari halaman ini adalah, sebagai administrasi database

MySQL. Beberapa hal yang dapat dilakukan PhpMyadmin adalah

mengelola basis data, tabel, kolom, relasi, indeks, pengguna,

permission, dll ( Phpmyadmin, 2015).

Page 28: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

36

2.1.16 Eight Golden Rules

Eight Golden Rules atau delapan aturan emas adalah istilah dalam

pembuatan sebuah UI, delapan aturan emas ini adalah hal mendasar dalam

perancangan interface yang masih sangat dapat diaplikasikan hingga saat ini,

baik dalam web maupun mobile. Aturan ini dapat digunakan dalam sebuah

sistem yang interaktif dan membutuhkan sebuah validasi dan pengaturan

untuk sebuah tampilan domain yang spesifik. (Indrajani, 2015, p. 20)

8 aturan itu antara lain :

1. Strive for consistency

Konsistensi dilakukan pada urutan tindakan, perintah, dan

istilah yang digunakan pada prompt, menu, serta layar bantuan.

Contohnya konsisten formulir dalam hal alur form, warna, menu,

tampilan, tulisan, dan lainnya.

2. Cater to universal usability

Seorang interface designer harus memperhitungkan jenis

variasi user nya. User yang baru menggunakan aplikasi dan user

yang sudah terbiasa menggunakan aplikasi jelas memiliki

pemahaman yang berbeda. Pada hal ini memungkinkan user untuk

menggunakan shortcut yang berbeda juga. Jika user yang telah

ahli atau terbiasa dan memiliki kecepatan interaksi yang tinggi,

maka memerlukan singkatan dari tombol fungsi, perintah

tersembunyi, dan fasilitas makro tambahan.

3. Offer informative feedback

Untuk setiap tindakan operator, sebaiknya disertakan suatu

sistem umpan balik. Untuk tindakan yang sering dilakukan dan

tindakan tidak terlalu penting dapat diberikan umpan balik yang

sederhana. Namun ketika tindakan berupa hal penting, maka

umpan balik sebaiknya lebih substansial. Misalnya muncul suatu

suara ketika salah menekan tombol atau muncul pesan

menyatakan salah input pada saat data yang dimasukkan salah.

4. Design dialogs to yield closure

Urutan tindakan sebaiknya diorganisir dalam suatu

kelompok dengan bagian awal, tengah, dan akhir. Umpan balik

Page 29: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

37

yang informatif memberikan indikasi bahwa cara yang dilakukan

telah benar dan user dapat menyiapkan tindakan selanjutnya.

5. Prevent errors

Sebisa mungkin sebuah sistem dirancang tanpa membuat

user melakukan kesalahan besar/fatal. Jika kesalahan terjadi,

sistem dapat mendeteksi kesalahan dengan cepat dan memberikan

mekanisme sederhana dan mudah dipahami untuk penanganan

masalah. Hal ini juga akan menghindari user yang bosan dan

jenuh, sehingga tingkat penggunaan aplikasi akan lebih baik.

6. Permit easy reversal of actions

Mengurangi kekhawatiran user karena mengetahui

kesalahan yang dilakukan dapat dibatalkan, sehingga user dapat

mengeksplorasi pilihan-pilihan lain yang belum bisa digunakan

secara bebas. Contoh paling sederhana dalam kasus ini adalah

membeli produk di toko online.

7. Support internal locus of control

Aturan ini memungkinkan user yang sudah terbiasa

menggunakan sebuah aplikasi dapat memodifikasi tampilan, agar

tampilan dapat disesuaikan dengan keinginan dari user. Sebaiknya

sistem dirancang sedemikian rupa, sehingga user menjadi inisiator

daripada hanya menjadi responden.

8. Reduce short-term memory load

Keterbatasan ingatan manusia membutuhkan tampilan

yang sederhana agar memudahkan penggunaan aplikasi oleh user.

User tidak perlu lagi mengingat data yang harus di-input ke

sistem, karena informasi mengenai data tersebut sudah disimpan

dan disediakan oleh sistem.

2.1.17 Application Programming Interface (API)

Application Programming Interface (API) menyediakan abstrak untuk

masalah dan mengspesifikasi bagaimana user harus berinteraksi dengan

komponen software (software library) yang mengimplementasikan solusi

tersebut dan dapat digunakan dalam beberapa aplikasi. Atau dapat dikatakan

sebagai berikut, API adalah interface yang baik dan dapat menyediakan

Page 30: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

38

spesifik bantuan untuk software lainnya. Banyak dari aplikasi modern saat ini

dibangun dengan menggunakan konsep API dibaliknya. (Reddy, 2011, p. 1)

Gambar 2. 19 konsep API sebagai dasar application code (Reddy, 2011, p. 1)

Konsep API yang ditunjukkan seperti Gambar 2.19 dapat di analogikan

(Gambar 2.20) dengan kontraktor yang ingin membangun sebuah rumah. Blueprint

atau rancangan rumah tersebut yang menggunakan satu atau lebih dari satu pekerja

adalah software program yang ingin dibuat, dan developer atau pekerja yang

membangun rumah tersebut adalah API dengan banyak kegunaan dan kemampuan.

(Reddy, 2011, pp. 2-4)

Gambar 2. 20 Analogi konsep API (Reddy, 2011, pp. 2-4)

Page 31: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

39

Kelebihan dari API:

1. Robust code

Memudahkan dalam coding karena memiliki banyak keuntungan lain,

seperti:

- Mengurangi duplikasi kode

- Kemudahan dalam perubahan pengimplementasian

- Kemudahan dalam optimasi

2. Code reuse

API menyediakan mekanisme untuk menggunakan kode sebuah

software yang telah ada dan dikembangkan lagi menjadi software baru

3. Parallel development

Dapat digunakan dengan mudah jika developer terdiri dari lebih dari

satu orang

2.1.18 Black Box Testing

Pengujian fungsional adalah pengujian yang hanya mengobservasi

output dari beberapa nilai yang di input dengan tidak menganalisa kode yang

menghasilkan output tersebut, dan struktur internal program tersebut akan di

abaikan. Oleh sebab itu pengujian fungsional ini mengacu pada black box

testing yang dimana isi dari black box tersebut tidak diketahui, namun

fungsinya dapat dipahami seutuhnya dalam hal input dan output. (Agarwal,

Tayal, & Gupta, 2010, p. 175 )

Black box testing berfokus pada kebutuhan secara fungsional pada

sebuah software, dan dapat menggunakan kumpulan input untuk menjalankan

sebuah software. Tester hanya akan mengetahui input apa yang akan

diberikan ke sistem, dan output yang akan di respon oleh sistem berikan.

Black box testing dapat dikategorikan menjadi (Agarwal, Tayal, &

Gupta, 2010, p. 176) :

- Positive functional testing

Pengujian ini dilakukan dengan mengeksekusi aplikasi dengan

input yang benar dan valid, dan memverifikasi kebenaran output.

- Negative functional testing

Page 32: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

40

Pengujian ini dilakukan dengan mengeksekusi aplikasi dengan

input yang salah dan tidak valid untuk mengidentifikasi kondisi

operasi yang tidak diharapkan dan atau kondisi lainnya.

Gambar 2. 21 Contoh black box testing (Agarwal, Tayal, &

Gupta, 2010, p. 177)

Pada Gambar 2.21 terdapat ilustrasi dari sebuah sistem yang dapat

diasumsikan sebagai black box testing. Tester memasukkan data ke

sistem dan memeriksa hasil output. Jika hasil output tidak sesuai dengan

prediksi maka pengujian ini mendeteksi sebuah masalah pada software.

(Agarwal, Tayal, & Gupta, 2010, p. 177)

Keuntungan menggunakan black box testing (Agarwal, Tayal, &

Gupta, 2010, p. 178) :

- Hasil dari pengujian ini tidak ambigu, karena tester dan developer

independen satu sama lain

- Tester tidak memerlukan pengetahuan secara mendalam mengenai

bahasa pemrograman

- Pengujian ini dilakukan dari sudut pandang user, bukan dari

developer

Page 33: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

41

2.1.19 Lima Faktor Manusia Terukur

Menurut Shneiderman & Plaisant (2010, pp. 33-34), terdapat lima

faktor manusia terukur:

1. Time to learn

Faktor ini menjelaskan waktu yang dibutuhkan oleh seorang user

mempelajari cara penggunaan dan pemahaman sebuah aplikasi

2. Speed of performance

Faktor tentang berapa waktu yang dibutuhkan sebuah fungsi

dapat berjalan dan dilakukan oleh sistem

3. Rates of errors by users

Mendefinisikan seberapa banyak kesalahan yang dilakukan oleh user

untuk menggunakan sistem, serta jenis kesalahan yang dilakukan sebagai

tolak ukur untuk pengembangan aplikasi di masa yang akan datang

4. Retention over time

Menjelaskan berapa lama waktu yang dibutuhkan user untuk

mempertahankan pengetahuan dalam penggunaan aplikasi. Frekuensi

penggunaan aplikasi dan waktu untuk memahami sebuah aplikasi menjadi

peran penting pada faktor ini.

5. Subjective satisfaction

Mendefinisikan kepuasan user dengan berbagai aspek aplikasi.

Faktor ini dapat dibuktikan dengan melakukan survei, dan atau wawancara

kepada para user.

2.1.20 Penelitian terdahulu

2.1.20.1 Model – View – Controller (MVC)

1. Menurut Diana (2017, p. 13) dalam (Implementasi Model-View-

Controller (MVC) pada Aplikasi Doa Harian untuk Anak Muslim

Berbasis Android) model – view- controller (MVC) adalah konsep

yang diperkenalkan oleh Trygve Reenskaug (penemu Smalltalk)

untuk mengenkapsulasi data bersama dengan pemrosesan (model),

mengisolasi proses manipulasi (controller), dan tampilan (view)

untuk direpresentasikan pada interface.

Definisi arsitektur MVC dibagi menjadi tiga, yaitu:

Page 34: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

42

a. Model

Model digunakan untuk mengelola informasi dan

memberitahukan adanya perubahan informasi. Model ini

mengandung data dan function yang berhubungan langsung

dengan pemrosesan data.

b. View

View digunakan untuk pemetaan grafis sebuah perangkat.

c. Controller

Controller bertugas menerima input dari user dan

mendistribusikan model dan view untuk mengerjakan tugas

berdasarkan input tersebut, dan bertanggung jawab atas hasil

output dan respon aplikasi terhadap user.

Gambar 2. 22 Bagian MVC

Model, view, dan controller harus merujuk satu sama lain,

karena ketiganya berkaitan sangat erat seperti pada gambar

2.22. Arsitektur ini memiliki salah satu manfaat, yaitu

memisahkan antara model dan view yang memungkinkan

beberapa view memiliki model yang sama. Hingga membuat

komponen model dalam sebuah aplikasi dapat lebih mudah

diterapkan, diuji, dan dirawat karena akses model berjalan

melalui komponen ini.

2. Menurut Simanjuntak & Kasnady (2016, p. 58) dalam

“Analisis Model View Controller (MVC) pada Bahasa PHP”

menjelaskan bahwa pola MVC membagi sebuah aplikasi

menjadi tiga bagian, yaitu model, view, controller.

Page 35: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

43

Model adalah logika bisnis dari aplikasi dan inti dari

sebuah aplikasi. View adalah user interface dari controller,

sedangkan controller adalah muka umum untuk respon event

user. Alur yang digunakan antara view dan model adalah salah

satu pengimplementasian dari komponen controller.

Secara arsitektur penjelasannya adalah:

a. Model

Model menyimpan lebih dari sekedar data dan function

yang beroperasi didalamnya, pendekatan yang digunakan

untuk komputer model atau abstraksi adalah beberapa

proses dunia nyata yang tidak hanya menangkap keadaan

proses atau sistem, namun bagaimana sistem tersebut

bekerja.

b. View

Memiliki hubungan satu-satu (1-1) dengan sebuah layar

dan mengetahui cara pembuatannya. View memproses isi

model ke layar, dan ketika model melakukan perubahan,

view dengan otomatis akan memuat ulang bagian layar

yang mengalami perubahan. Ada kemungkinan jika

beberapa view ada pada model yang sama dan masing-

masing view memproses isi model dan menampilkan

tampilan yang berbeda.

c. Controller

Controller memiliki tugas untuk menentukan respon yang

akan ditampilkan oleh aplikasi, karena controller

menerima input dari user dan memberi perintah kepada

model dan view untuk menjalankan tugas.

3. Arianto, Munir, & Khotimah (2016) pada “Analisis dan

Perancangan Representational State Transfer (REST) Web

Service Sistem Informasi Akademik STT Terpadu Nurul Fikri

menggunakan YII Framework” menjelaskan bahwa MVC

adalah pola desain memampukan developer membagi kode

menjadi tiga kategori:

a. Model untuk pengelolaan data

Page 36: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

44

b. View untuk menampilkan data tersebut dan elemen

user interface

c. Controller yang bertugas menangani user events,

dimana user events ini mempengaruhi model dan view.

Gambar 2. 23 Konsep Hubungan MVC

Developer memungkinkan membuat multiple views dan

controllers untuk banyak model tanpa harus mengubah desain model

karena pemisahan tiga kat egori ini. Pemisahan ini juga memudahkan

pengelolaan, portable, dan pengorganisasian aplikasi.

MVC pertama kali digagas oleh peneliti XEROX PARC yang

menggunakan bahasa pemrograman Smalltalk dalam pekerjaannya

pada tahun 1970-1980an. Smalltalk menggunakan konsep orientasi

pada object, tipe yang dinamis, dan bahasa pemrograman yang

reflektif.

Proses pengembangan MVC ditandai dengan munculnya

sistem operasi dan software NeXT. Developer NeXT menemukan

cara yang lebih baik untuk membuat view dan controller. NeXT

adalah perusahaan Steve Jobs pada akhir tahun 1980 yang dibeli oleh

Apple pada tahun 1990.

Implementasi MVC adalah produk Django, struts, dan Ruby

on Rails. Perangkat Ruby on Rails memungkinkan tim developer

membuat aplikasi web dengan waktu singkat dan proses pengujiannya

Page 37: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

45

pun sedikit. Selain itu memiliki interface yang rapi dan bagus, URL

yang mudah dipahami, lebih lengkap dan lebih aman.

2.1.20.2 Application Programming Interface (API)

1. Saputro, Purnomo, & Somya (2015) dalam “Penerapan

RESTFull Web Service dan JSON pada Application

Programming Interface (API) Sistem Informasi

Perkembangan Ayam Broiler Berbasis Kemitraan” memberi

penjelasan, yaitu API atau antarmuka pemrograman aplikasi

adalah kumpulan perintah, function, dan protokol yang

dapat digunakan saat membangun software untuk sistem

operasi tertentu.

Manfaat menggunakan API adalah tidak perlu adanya

penyesuaian pada platform yang telah ada dengan platform

yang baru. Platform menjadi lebih efisien karena API

mempunyai standar dan aturan yang baku dalam mengerjakan

sebuah tugas yang akhirnya menjadi lebih efisien. Jika

mengalami perubahan, maka API server akan merubah

pemrosesan data yang terjadi pada API server. Kelebihn

memakai API adalah keamanan dan hak akses yang dapat

diatus dan terbuka bagi developer lain secara publik.

2. Arianto, Munir, & Khotimah (2016, p. 3) pada “Analisis dan

Perancangan Representational State Transfer (REST) Web

Service Sistem Informasi Akademik STT Terpadu Nurul Fikri

menggunakan YII Framework” memberikan penjelasan bahwa

API adalah software interface yang terdiri dari kumpulan

perintah / command dan disimpan dalam bentuk library, serta

menjelaskan interaksi satu software dengan software lain.

3. Menurut Gae, Triyanto, & Suhardi (2019 dalam “Rancangan

Bangun Sistem Pemantauan dan Notifikasi Otomatis pada

Keamanan Rumah mengunakan Teknologi Wireless Sensor

Network Berbasis Website” API adalah kumpulan perintah dan

Page 38: BAB 2 TINJAUAN REFERENSIlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/RS1...Gambar 2. 11 Contoh notasi alt frame (Satzinger, Jackson, & Burd, 2012, p. 130) 2.1.2 Android Android merupakan

46

protokol yang digunakan untuk membangun aplikasi software.

API bertugas untuk mengirimkan pesan yang juga menerima

input dari user dan memerintahkan sistem untuk melakukan

sesuatu, dan kemudian memberikan respon yang sesuai

dengan input.

4. Rucita & Oktivasari(2016, p. 50) dalam

“Aplikasi FindKos Berbasis iOS” menjelaskan bahwa API

adalah sekumpulan perintah, fungsi, dan protokol yang

digunakan oleh programmer saat membangun software untuk

sistem operasi tertentu. Programmer dapat menggunakan

fungsi standar untuk berinteraksi dengan sistem operasi lain.

Dalam API terdapat perintah untuk menggantikan bahasa yang

digunakan dalam system calls dengan bahasa yang mudah

dimengerti dan lebih terstruktur oleh programmer, fungsi ini

akan kemudian memanggil system calls sesuai dengan sistem

operasinya.