11

BAB 2

TINJAUAN REFERENSI

2.1 Proof of Concept

Proof of Concept (PoC) adalah sebuah cara untuk mengevaluasi gagasan

tentang bagaimana sebuah prototipe dapat memenuhi kebutuhan dari stakeholder

suatu perusahaan yang sebelumnya belum dapat terpenuhi (EPICS, 2014). Dalam

Proof of Concept (PoC) ada beberapa tujuan yang harus dicapai, tujuan tersebut

diantaranya:

1. Memiliki dokumen tertulis yang menjelaskan Prototipe dan bagaimana hal

tersebut akan memenuhi kebutuhan pemangku kepentingan.

2. Mengkomunikasikan tujuan yang telah ditetapkan dari proyek atau produk

yang telah ditentukan dalam spesifikasi untuk proyek kepada para

pemangku kepentingan dan mitra proyek. Harapan untuk produk harus

didefinisikan secara jelas dan anda tidak harus menjanjikan lebih dari apa

yang dapat Anda berikan secara reaList is.

3. Tentukan viabilitas dan kegunaan prototipe dan lihat dalam tindakan.

4. Uji kegunaan dan viabilitas prototipe dengan kriteria terukur.

Dalam Proof of Concept (PoC) ada beberapa langkah yang harus diikuti,

langkah tersebut diantaranya:

1. Tentukan persyaratan dasar - Tentukan parameter proyek. Ini akan mencakup

beberapa hal berikut:

a. Deskripsi Produk termasuk dimensi, foto atau Diagram, Spesifikasi dan

penting karakteristik.

b. Jelaskan tujuan produk termasuk tujuan dan sasaran.

c. Tentukan Kriteria Sukses

d. Cantumkan bahan yang digunakan, batasan bahan dan toleransi

tersebut.

e. Tujuan dari bukti prototipe konsep - Apa yang Anda harapkan dapat

ditentukan melalui penciptaan prototipe dan pengujiannya?

f. Manfaat Prototipe - Apa manfaat dan kemungkinan risiko pengujian

prototip jika ada?

12

2. Prioritaskan spesifikasi - Tentukan spesifikasi apa yang merupakan prioritas

tertinggi.

3. Tentukan strategi Anda - Bagaimana Anda akan menguji prototipe Anda?

a. Siapa yang akan menguji prototipenya?

b. Berapa lama waktu yang dibutuhkan pengujian?

c. Apa saja fitur prototipe yang akan diuji dan siapa yang bertanggung

jawab? (Ini akan berhubungan kembali dengan spesifikasi anda. Ini

mungkin termasuk namun mungkin tidak terbatas pada: keamanan,

daya tahan, kekuatan, berat, aksesibilitas, dimensi fisik.)

d. Mengembangkan Prosedur Pengujian - Langkah apa yang akan Anda

ambil untuk mengukur satu spesifikasi itu?

e. Anda telah mengidentifikasi masalah tersebut?

f. Apa kriteria yang dapat diukur yang akan Anda gunakan dalam

protokol pengujian ini?

2.2 Aplikasi Web

Aplikasi Web merujuk pada aplikasi yang diakses melalui Web Browser

melalui jaringan dan dikembangkan dengan menggunakan bahasa yang didukung

Browser (misalnya, HTML, Java Script). Untuk dapat dieksekusi, aplikasi Web

bergantung pada Web Browser dan mencakup banyak aplikasi yang familiar seperti

penjualan online, lelang online, dan Webmail (Al-Fedaghi 2011).

Berikut ini adalah atribut-atribut yang ditemukan dalam aplikasi Web

(Pressman, 2010):

• Network Intensiveness: Suatu aplikasi Web yang berdampingan dengan

jaringan harus melayani kebutuhan komunitas atau klien.

• Concurrency: Jumlah pemakai aplikasi Web dapat dalam jumlah yang banyak

pada suatu waktu.

• Unpredictable Load: Jumlah pengguna aplikasi Web dapat berubah-ubah

dalam hari ke hari.

• Performance: Pengguna aplikasi Web tidak harus menunggu lama untuk

waktu pemrosesan.

13

• Avaliability: Walaupun asumsi 100 persen itu tidak masuk akal, pengguna

aplikasi Web populer umumnya meminta akses yang berbasiskan 24/7/365

(Siklus kerja 24 jam, 7 hari dalam satu tahun).

• Data Driven: Fungsi utama dari beberapa aplikasi Web adalah untuk

menggunakan hypermedia untuk mempresentasikan gambar, teks, audio,

video pada User.

• Content Sensitive: Kualitas dan estetika konten tetap menentukan kualitas

dari aplikasi Web.

• Continuous Evolution: Tidak seperti aplikasi konvensional yang berkembang

melalui rangkaian release yang terencana dan kronologis, aplikasi Web

berkembang secara terus menerus.

• dan detail (algoritma) prosedural Tahapan ini akan menghasilkan dokumen

yang disebut Software requirement.

4. Construction

Construction merupakan proses membuat kode. Coding atau pengkodean

merupakan penerjemahan desain dalam bahasa yang bisa dikenali oleh

komputer. Programmer akan menerjemahkan transaksi yang diminta oleh

User. Tahapan inilah yang merupakan tahapan secara nyata dalam

mengerjakan suatu Software , artinya penggunaan komputer akan

dimaksimalkan dalam tahapan ini. Setelah proses pengkodean selesai maka

akan dilakukan Testing terhadap sistem yang telah dibuat tadi. Tujuan

Testing adalah menemukan kesalahan-kesalahan terhadap sistem tersebut

untuk kemudian bisa diperbaiki.

5. Deployment

Tahap ini bisa dikatakan sebagai tahap final dalam pembuatan Software atau

sistem. Perangkat lunak yang sudah jadi, dijalankan dan digunakan oleh User.

Setelah digunakan apabila terdapat bug dan penambahan fitur akan dijalankan

pada proses ini yang tidak ditemukan pada langkah sebelumnya.

14

2.4 Object-Oriented Programming

Object-Oriented Programming adalah sebuah pendekatan pengembangan

Software dimana struktur dari Software tersebut berdasarkan pada interaksi antar

object satu sama lain untuk menyelesaikan tugas tertentu. Di dalam Object-Oriented

Programming terdapat beberapa karakteristik yang perlu kita pahami, antara lain :

(Clark, 2013, p. 1)

2.5 Object

Object adalah sebuah struktur untuk menggabungkan data yang akan

dikelola dan prosedur-prosedur untuk bekerja dengan data tersebut. Object-object

ini diimplementasikan sebagai fungsi dari sebuah Object-Oriented Programming

(Clark, 2013, p. 3).

2.5.1 Class

Sebuah Class mendefinisikan struktur dan metode yang akan

terkandung dalam sebuah object berdasarkan Class tersebut. Sebuah Class

bertanggung jawab dalam mengatur data yang ada. Ketika mendefinisikan

struktur dari sebuah Class, kita harus menentukan data apa yang akan

dikelola oleh Class tersebut. Atribut dari Class mengidentifikasikan

informasi dari data yang ditangani oleh Class (Clark, 2013, p. 16).

2.5.2 Encapsulation

Encapsulation adalah proses dimana akses langsung pada suatu data

tidak diberikan, namun disembunyikan. Apabila kita ingin mendapatkan

akses terhadap suatu data, kita harus berinteraksi dengan object yang

bertanggung jawab terhadap data tersebut. Dengan adanya encaplsulation

terhadap suatu data, kita membuat data yang kita miliki lebih aman dan dapat

diandalkan karena kita mengetahui bagaimana suatu data dapat diakses dan

operasi apa yang sedang bekerja pada data tersebut (Clark, 2013, p. 4).

2.5.3 Polymorphism

Polymorphism adalah kemampuan dua object berbeda untuk

menanggapi pesan permintaan yang sama dengan cara unik dari masing-

masing object tersebut. Dalam OOP, kita bisa mengimplementasikan

15

Polymorphism ini melalui sebuah proses yang dinamakan overloading, yang

memungkinkan kita untuk mengimplementasikan method yang berbeda dari

sebuah object yang memiliki nama yang sama (Clark, 2013, p. 4).

2.5.4 Inheritance

Inheritance digunakan di OOP untuk mengklasifikasi object-object

dalam program kita yang memiliki karakteristik dan fungsi yang sama. Hal

ini membuat kinerja melalui object-object yang ada lebih mudah. Selain itu,

proses pemrograman lebih mudah karena ini memungkinkan kita untuk

menggabungkan karakteristik umum ke parent object dan menurunkan

karakteristik tersebut ke child object (Clark, 2013, p. 5).

2.6 Java Script

JavaScript merupakan object-oriented, bahasa Scripting dan diketik secara

dinamis. Di dalam buku tersebut, disebutkan bahwa User sendiri dapat menambah

bahasa Scripting pada sisi client. Walaupun di dalam nama JavaScript terdapat nama

Java, namun JavaScript dan Java merupakan bahasa programming yang berbeda dan

penggunaannya yang berbeda satu sama lain. Java merupakan bahasa pemograman

yang object oriented dan dikompilasi secara penuh, dimana Java terkenal untuk

kemampuannya di platform apapun menggunakan Java Virtual Machine yang telah

terpasang. Untuk sebaliknya, JavaScript merupakan satu dari bahasa pemograman

yang paling terkenal di

2.7 HTML

HTML didefinisikan sebagai bahasa markup. Bahasa markup adalah suatu

cara untuk memberikan keterangan / catatan di sebuah dokumen dengan cara yang

membuat teks yang ditambahkan tersebut dapat diketahui. Bahasa markup seperti

HTML, Tex, XML, dan XHTML mengizinkan penggunanya untuk mengontrol

bagaimana teks dan elemennya diletakkan dan diperlihatkan ke pengguna. Masa

tersebut datang dari hari untuk melakukan cetakan, ketika editor menulis instruksi di

halaman manuScript yang dapat berupa instruksi untuk melakukan revisi ke penulis.

Dalam arti yang lebih mudah, markup adalah sebuah cara untuk mengindikasikan

informasi mengenai konten yang berbeda dari konten tersebut.

16

Informasi dalam konten tersebut di HTML diimplementasikan menggunakan

tag. Tag di HTML di tandai dengan “< >”, contoh : <button> yang diartikan sebagai

tombol. Dalam menspesifikasikan informasi dalam sebuah konten, banyak bahasa

markup yang dapat membuat tampilan informasi berbeda sesuai keinginan

programmer untuk dapat ditampilkan ke pengguna. Tampilan tersebut bisa berupa

pembuatan tulisan yang menjadi lebih tebal, bold, format font yang berbeda.

(Connolly & Hoar, 2015, p. 53)

2.8 CSS

CSS (Cascading Style Sheets) merupakan standar W3C untuk

menggambarkan tampilan dari elemen-elemen yang ada di HTML. Salah satu cara

paling umum dalam menjelaskan fungsi CSS adalah CSS digunakan untuk

mendefinisikan presentasi dari dokumen HTML Dengan CSS, User dapat mengatur

font (bentuk tulisan), warna, ukuran, border, latar gambar, hingga posisi suatu

elemen di dalam sebuah halaman.CSS dapat ditambahkan langsung ke semua elemen

HTML menggunakan atribut style di dalam elemen <head> di HTML atau dengan

membuat file terpisah yang berisikan CSS tersebut, namun masih mempunyai

hubungan dengan halaman HTML tersebut. (Connolly & Hoar, 2015, p. 96)

Keuntungan dari CSS, yaitu:

1. Meningkatkan control terhadap formatting gampang.

2. Meningkatkan pemeliharaan Website.

3. Meningkatkan aksesibilitas.

4. Meningkatkan kecepatan download pada

halamanMeningkatkan fleksibilitas output.

17

Gambar 2.3 Syntax dan contoh CSS

2.4 Unified Modeling Language (UML)

Unified Modeling Language (UML) adalah suatu kumpulan model atau

konsep yang digunakan untuk mendeskripsikan atau menggambarkan sebuah sistem

perangkat lunak (Software ) dalam bentuk objek. (Whitten, Jeffrey L and Bentley,

Lonnie D, 2007). Dengan penggunaan UML akan mempermudah dalam pemahaman

sistem dari perangkat lunak tersebut. Pada UML 2.0 terdapat 13 jenis Diagram yaitu

Use Case, Activity , Class , object, state machine, composite structure, Sequence ,

communication, interaction overView , timing, component, deployment, dan package.

(Whitten, Jeffrey L and Bentley, Lonnie D, 2007).

2.4.1 Use Case Diagram

Use Case Diagram mengidentifikasi dan mendeskripsikan mengenai

keseluruhan fungsionalitas suatu sistem yang dapat dimengerti dari sudut

pandang pengguna eksternal. (Whitten, Jeffrey L and Bentley, Lonnie D,

2007). Dengan kata lain, Use Case Diagram menggambarkan siapa saja yang

akan menggunakan sistem dan apa tujuan yang dapat dia lakukan pada sistem

tersebut. Dalam Use Case Diagram, komponen-komponen yang ada

didalamnya adalah Use Case, actor, dan Relationship.

Gambar 2.1 Contoh Use Case Diagram

2.4.2 Use Case

Use Case direpresentasikan dengan sebuah lingkaran elips horizontal

yang berisikan dengan nama Use Case di dalam ataupun di luar elips. Sebuah

Use Case merepresentasikan satu tujuan dari sistem dan menjelaskan urutan

18

dari aktivitas dan interaksi dari pengguna untuk menyelesaikan tujuan tersebut.

(Whitten, Jeffrey L and Bentley, Lonnie D, 2007). Simbol Use Case dapat

dilihat pada gambar 2.3 dibawah ini.

19

Gambar 2.2 Simbol Use Case

2.4.3 Actors

Use Case dapat berjalan dengan adanya interaksi dari external Users

yang disebut Actors. Actor merupakan segala sesuatu yang dapat berinteraksi

dengan sistem untuk bertukar informasi. Actor tidak harus manusia, melainkan

dapat berupa organisasi, sistem informasi lain, dan external Device. (Whitten,

Jeffrey L and Bentley, Lonnie D, 2007). Actor digambarkan dengan simbol

yang berbentuk seperti manusia (stickman), seperti yang dapat dilihat pada

gambar 2.4.

Gambar 2.3 Simbol Actor

2.4.4 Relationship

Relationship atau hubungan digambarkan dengan garis yang

menghubungkan antara dua simbol pada Use Case Diagram. Arti dari

Relationship tersebut dapat berbeda-beda tergantung bagaimana garis tersebut

digambarkan dan tipe dari simbol yang saling terhubung. (Whitten, Jeffrey L

and Bentley, Lonnie D, 2007). Terdapat lima Relationship, diantaranya yaitu:

1. Association

Association atau asosiasi merepresentasikan tentang hubungan antara aktor

dan sebuah Use Case. Asosiasi digambarkan dengan garis utuh yang

menghubungkan keduanya. Jika asosiasi digambarkan dengan anak panah

yang berasal dari aktor, maka aktor tersebut merupakan penggerak

terjadinya Use Case. Sedangkan jika asosiasi tidak terdapat anak panah,

20

menandakan interaksi antara Use Case dan eksternal Server atau aktor

penerima. (Whitten, Jeffrey L and Bentley, Lonnie D, 2007).

Gambar 2.4 Contoh Association Relationship

2. Extends

Extends dapat digunakan pada saat Use Case memiliki beberapa

fungsionalitas kompleks yang terdiri dari beberapa tahapan yang dapat

membuat sebuah logika Use Case menjadi sulit dimengerti. Oleh karena itu,

extends digunakan untuk menyederhanakan Use Case yang rumit. Sehingga

langkah-langkah yang rumit dapat dipisahkan ke dalam extension Use Case.

Extends Relationship direpresentasikan dengan garis anak panah dimulai

dari ekstensi Use Case, mengarah ke Use Case yang di extend. Setiap

extends Relationship diberi label yaitu “<<extends>>”. (Whitten, Jeffrey L

and Bentley, Lonnie D, 2007).

Gambar 2.5 Contoh Extends Relationship

3. Uses (Includes)

Abstract Use Case atau includes adalah pemisahan langkah-langkah umum

ke dalam Use Case terpisah. Biasanya kita dapat menjumpai dua atau lebih

Use Case yang melakukan tahapan fungsinya secara identik. Oleh karena

itu, abstract Use Case dapat digunakan untuk mengkombinasikan tahapan

tersebut sebagai Use Case yang terpisah. Abstract Use Case dapat menjadi

alat bantu untuk mengurangi redundansi antara Use Case. Uses Relationship

disimbolkan dengan garis anak panah dimulai dari original Use Case,

21

mengarah ke Use Case yang digunakan, dan diberi label “<<uses>>”.

(Whitten, Jeffrey L and Bentley, Lonnie D, 2007).

Gambar 2.6 Contoh Uses Relationship

4. Depends On

Depends on menggambarkan adanya ketergantungan antara satu Use Case

dengan Use Case lainnya, sehingga sebuah aktivitas hanya bisa dilakukan

apabila aktivitas sebelumnya sudah berjalan. Sebagai contoh dalam bisnis

bank, Use Case penarikan uang tidak dapat dilakukan jika aktor tidak

melakukan deposit terlebih dahulu. Dan untuk melakukan deposit, aktor

juga harus membuat akun tabungan bank. Setiap penggunaan depends on

diberi label “<<depends on>>”. (Whitten, Jeffrey L and Bentley, Lonnie D,

2007).

22

Gambar 2.7 Contoh Depends On Relationship

5. Inheritance

Inheritance digunakan pada saat dua aktor atau lebih berinteraksi dengan Use

Case yang sama, maka akan lebih baik untuk mengarahkan Use Case tersebut

ke sebuah abstract actor baru dengan tujuan untuk mengurangi komunikasi

yang redundan dalam sistem. (Whitten, Jeffrey L and Bentley, Lonnie D,

2007).

Gambar 2.8 Contoh Inheritance Relationship

2.4.5 Use Case Narrative

Menurut Whitten dan Bentley (2007, p. 246), Use Case narrative

adalah deskripsi tertulis dari business event dan bagaimana User akan

berinteraksi dengan sistem untuk menyelesaikan tugas-tugasnya. Berikut

adalah bagian-bagian dari Use Case narrative:

23

1. Author adalah nama dari individu yang berkontribusi terhadap

penulisan Use Case dan yang menyediakan informasi tambahan

mengenai Use Case.

2. Date adalah tanggal terakhir kali Use Case dimodifikasi.

3. Version adalah versi terkini dari Use Case.

4. Use Case name adalah nama Use Case yang merepresentasikan

tujuan yang ingin dicapai Use Case. Nama Use Case harus dimulai

dengan kata kerja.

5. Use Case type adalah jenis dari Use Case yang dibuat. Misalnya

business requirement Use Case berfokus pada visi strategis dan tujuan

dari berbagai stakeholder. Jenis Use Case ini berorientasi pada bisnis

dan merefleksikan pandangan high-level dari sistem yang diinginkan.

Business requirement Use Case menyediakan pemahaman umum

mengenai permasalahan dan cakupannya, namun tidak meliputi detail

yang diperlukan untuk berkomunikasi dengan developer mengenai

apa yang harus dilakukan sistem.

6. Use Case ID adalah tanda pengenal Use Case yang bersifat unik.

7. Priority adalah prioritas yang mengkomunikasikan pentingnya Use

Case mulai dari low, medium, sampai high.

8. Source adalah sumber yang mendefinisikan entitas yang memicu

pembuatan Use Case. Dalam hal ini dapat berupa requirement,

dokumen yang spesifik atau stakeholder.

9. Primary business actor adalah stakeholder sebagai primary business

actor yang mendapat keuntungan dari eksekusi Use Case dengan

menerima sesuatu nilai yang dapat diukur.

10. Other participating Actors adalah aktor yang ikut berpartisipasi pada

Use Case untuk mencapai suatu tujuan. Other participating Actors

terbagi atas aktor yang memulai, aktor yang memfasilitasi, aktor yang

bertindak sebagai receiver/Server , dan aktor secondary.

11. Interested stakeholder(s) adalah stakeholder yang mempunyai

kepentingan pada perkembangan dan operasi dari sistem Software .

Dalam hal ini dapat berupa orang yang mempunyai kepentingan

dalam tujuan dari Use Case.

24

12. DeScription adalah deskripsi berupa kesimpulan singkat yang terdiri

dari atas beberapa kalimat yang mengandung garis besar dari tujuan

Use Case dan aktivitasnya.

Gambar 2.9 Contoh Use Case Narrative

2.4.6 Activity Diagram

Menurut Whitten dan Bentley (2007, pp. 390-391), Activity Diagram

adalah Diagram yang digunakan untuk penggambaran grafis alur dari sebuah

proses bisnis, proses-proses dari sebuah Use Case, atau logika dari behavior

object (method). Setidaknya untuk satu Use Case dapat menghasilkan satu

Activity Diagram, tetapi jika Use Case-nya panjang maka dapat menghasilkan

lebih dari satu Activity Diagram. Berikut adalah notasi-notasi yang digunakan

dalam Activity Diagram:

1. Initial Node

Untuk menandakan awal atau dimulainya suatu proses. Digambarkan

dengan bentuk lingkaran solid.

2. Action

Untuk menunjukkan sebuah aktivitas. Alur dari banyak action

membangun keseluruhan aktivitas yang terdapat pada Diagram.

Digambarkan dengan bentuk persegi panjang dengan ujung yang

melingkar.

3. Flow

Untuk menunjukkan jalur antar aktivitas, dari sebuah aktivitas ke

aktivitas lainnya. Digambarkan dengan bentuk panah.

4. Decision

25

Untuk menunjukkan kondisi yang dapat dipilih. Digambarkan dengan

bentuk seperti berlian dan memiliki satu flow yang masuk dan dua

atau lebih flow yang mengarah keluar decision dengan memberikan

keterangan untuk memberitahu kondisinya.

5. Merge

Untuk menunjukkan adanya penggabungan flow yang terpisah.

Digambarkan dengan bentuk berlian dan memiliki dua atau lebih flow

yang masuk dan satu flow yang mengarah keluar.

6. Fork

Fork ditandakan dengan simbol garis hitam dengan satu flow yang

masuk dan dua atau lebih flow yang mengarah keluar. Yang

menunjukkan adanya dua atau lebih actions yang dapat berjalan

dengan urutan atau secara bersamaan.

7. Join

Join ditandakan dengan simbol garis hitam dengan dua atau lebih

flow yang masuk dan satu flow yang mengarah keluar, yang

menandakan akhir dari proses

yang berjalan bersamaan. Semua actions yang menuju ke join harus

selesai sebelum proses berlanjut.

8. Activity Final

Untuk menandakan akhir dari proses. Digambarkan dengan lingkaran

solid disertai dengan lingkaran kosong pada bagian luarnya.

26

Gambar 2.10 Contoh Activity Diagram

Swimlane process diagram adalah sebuah diagram flow proses yang

menggambarkan interaksi dari beberapa bagian yang berbeda yang terlibat dalam

sebuah lini proses bisnis. Diagram ini menggunakan format jalur hubungan

(swimlane), adapun menggambarkannya dilakukan dengan cara menampilkan

stakeholder pada baris diagram serta kerangka waktu pada kolom diagram; dan

kemudian aktivitasnya ditampilkan menggunakan simbol flowchart. Swim Lane

Process Diagram adalah diagram yang menggambarkan aktivitas dari setiap

stakeholder yang terlibat di dalam kegiatan bisnis perusahaan; diagram ini

merepresentasikan flow proses yang menggambarkan interaksi dari beberapa bagian

yang berbeda dan bagaimana perkembangan proses melalui beberapa phase yang

berbeda. Swimlane process diagram yaitu bagan yang menggambarkan setiap

Stakeholder yang ada di Line Of Business(LOB) perusahaan tersebut, yang

digambarkan dengan symbol dari flowchart. Dengan demikian

Swimlane process diagram merupakan Activity diagram dari para stakeholder

yang memperlihatkan stakeholder yang terlibat di dalam proses line of business

(LOB), dan waktu pada interaksinya.

Swimlane adalah elemen visual yang digunakan dalam diagram alir proses

yang menggambarkan siapa bekerja pada subset tertentu dari sebuah proses (Meilia,

27

F. 2014). Swimlane tersebut diatur baik horisontal maupun vertikal dan digunakan

untuk mengelompokkan sub-proses sesuai dengan tanggung jawab mereka.

Flowchart swimlane berbeda dengan diagram alur lain. proses dan

pengelompokannya digambarkandengan menempatkannya pada jalur. Garis paralel

menjadi jalur untuk pengeolompokan orang atau subproses. Jalur diberi label untuk

menunjukkan bagaimana bagan di kelola. Elemen-elemen yang terdapat dalam

swimlane diagram adalah: (a) Process: Aktual proses dan flow, (b) Actors: Orang,

groups, teams, yang melakukan tahapan proses. (c) Phases: Menunjukkan tahapan

dari project. (d)Symbols: Simbol fisik yang digunakan menggambarkan apa yang

terjadi pada setiap tahapan dari proses.

Format standar sebuah swimlane diagram adalah sebagai berikut:

Gambar 2.12 Swimlane Diagram

28

Swimlane diagram, sering disebut juga “Deployment Process Map” atau

“Cross Functional Flowchart” adalah sebuah diagram yang merepresentasikan

flow proses yang menggambarkan interaksi dari beberapa bagian yang berbeda

dan bagaimana perkembangan proses melelui beberapa phase yang berbeda.

Diagram Stakeholder Activity menunjukkan stakeholder (orang yang

secara pribadi berminat dalam enterprise) yang terlibat dalam proses lini bisnis,

dan ketepatan dari interaksi. Diagram menggunakan format swim lane untuk

mengatur stakeholder dengan baris, dan kerangka waktu dengan kolom,

kemudian menggambarkan aktivitas menggunakan simbol bagan alir.

Swimlane diagram adalah sebuah diagram yang merepresentasikan flow proses

yang menggambarkan interaksi dari beberapa bagian yang berbeda dan

bagaimana perkembangan proses melelui beberapa phase yang berbeda.

Swimlane membagi aktivitas dalam beberapa kelompok dimana setiap

kelompok yang telah dibagi dibuat untuk dapat merepresentasikan organisasi

yang bertanggung jawab untuk aktivitas tersebut. Setiap swimlane memiliki

nama dan juga setiap aksi/aktivitas hanya berada di 1 swimlane saja.

Berikut merupakan contoh swimlane process diagram pada payroll

proses dimana terdiri dari beberapa stakeholder yang terlibat, yaitu: human

resources, employee, manager, payroll, dan payroll vendor.

Gambar 2.13 Swimlane Process Diagram

29

2.4.7 Class Diagram

Class Diagram digunakan untuk menggambarkan struktur dari sebuah

sistem, yang menunjukkan Class object dan hubungannya dengan Class object

lainnya (Whitten, Jeffrey L, and Bentley, Lonnie D, 2007). Sebuah Class

Diagram tersusun atas 3 bagian, yaitu:

1. Object (Nama)

Merupakan identitas atau nama pada sebuah Class untuk membedakan

antara satu Class dengan Class lainnya.

2. Attribute

Merupakan data atau property yang berada pada Class tersebut.

3. Operation (Method)

Merupakan fungsi atau operasi yang dimiliki Class tersebut.

Gambar 2.14 Bagian Class Diagram

2.4.8 Association dan Multiplicity

Association merupakan bentuk hubungan antara satu Class dengan Class

lainnya. Baik keduanya saling ketergantungan atau

tidak. Multiplicity merupakan jumlah minimum dan maksimum kejadian dari

suatu object untuk satu kejadian untuk Class object yang berhubungan.

30

Gambar 2.11 Contoh Association pada Class Diagram

Gambar 2.15 Contoh Multiplicity pada Class Diagram

2.4.9 Generalization / Specialization

Generalization / Specialization merupakan teknik dimana atribut

dan method yang sama dibeberapa Class digabungkan menjadi Class

tersendiri yang disebut supertype. Sedangkan atribut dan method yang

diturunkan dari supertype disebut subtype.

31

Gambar2.16 Contoh Generalization / Specialization pada Class Diagram

2.4.9.1 Aggregation dan Composition

Aggregation merupakan hubungan dimana sebuah object utama

memiliki satu atau lebih object yang lebih kecil.

Sedangkan Composition adalah bentuk dari Aggregation dimanaobject utama

yang menentukan pembuatan ataupun penghancuran object yang lebih kecil.

Jika object utama hancur, maka object kecil lainnya juga akan ikut hancur.

32

Gambar 2.17 Contoh Aggregation pada Class Diagram

Gambar 2.18 Contoh Composition pada Aggregation

2.4.9.2 Sequence Diagram

Sequence Diagram adalah Diagram yang memodelkan logika yang

terdapat dalam Use Case dengan menggambarkan interaksi antar obyek

melalui pesan yang disusun berdasarkan urutan waktu (Whitten & Bentley,

2007).

33

Gambar 2.19 Sequence Diagram

(Sumber: Whitten dan Bentley, 2007, Hal. 659)

Berikut penjelasan komponen yang terdapat dalam Sequence Diagram pada

Gambar 2.19:

1. Actor, individu yang melakukan interaksi dengan sistem.

Interface Class, kotak yang menunjukkan kelas yang digunakan dalam

tampilanpengguna. Untuk membedakannya, interface Class diberi label

2. <<interface>>. Tanda titik dua (:) merupakan standar yang digunakan dalam

Sequence Diagram untuk menandakan instance dari kelas. Garis putus-

putus vertikal yang memanjang ke bawah menandakan masa hidupnya.

3. Controller Class , setiap Use Case akan memiliki satu atau lebih kelas

controller. Controller Class digambarkan dengan notasi yang sama dengan

interface Class tetapi ditulis dengan label <<controller>>.

4. Entitiy Class , kotak untuk setiap entitas yang akan berperan di dalam

serangkaian urutan langkah.

5. Messages, panah horizontal yang menandakan pesan yang menandakan

masukkan yang dikirimkan ke dalam kelas.

6. Activation bars, balok yang berada di antara lifelines yang menunjukkan

masa hidup instansi obyek.

7. Return message, garis putus-putus horizontal yang menandakan pesan

balikan dari sistem.

9. Self call, obyek yang memanggil method di dalam dirinya sendiri.

34

10. Frame, sebuah kotak digunakan untuk menunjukkan bahwa controller

melakukan perulangan terhadap semua hal yang terdapat di dalamnya.

2.5 Java Server Page (JSP)

JSP ( Java Server Pages ) adalah suatu bahasa pemrograman Web

(Scripting)yang bersifat Server side yang menggabungkan HTML dengan Scripting

tag dan program Java . Suatu dokumen JSP ditandai dengan berkas ekstensi .jsp.

Java Server Pages (JSP) merupakan sebuah teknologi servlet-based yang digunakan

pada Web tier untuk menghadirkan dinamik dan statik content. JSP merupakan text-

based dan kebanyakan berisi template text HTML yang digabungkan dengan spesifik

tags dynamic content (Prakoso, 2008).

2.6 Bootstrap

Bootstrap merupakan sebuah framework css yang memudahkan pengembang

untuk membangun Website yang menarik dan responsif. Tidak konsistensinya

terhadap aplikasi individual membuat sulitnya untuk mengembangkan dan

pemeliharaannya. Bootstrap adalah css tetapi dibentuk dengan LESS, sebuah pre-

prosessor yang memberi fleksibilitas dari css biasa. Bootstrap memberikan solusi

rapi dan seragam terhadap solusi yang umum, tugas interface yang setiap

pengembang hadapi. Bootstrap dapat dikembangkan dengan tambahan lainnya

karena ini cukup fleksibel terhadap pekerjaan design butuhkan (Otto, 2011).

2.7 Entity Relationship Diagram (ERD)

Menurut (Connolly & Begg, 2015, p. 405) Entity-Relationship Modeling

merupakan pendekatan top-down dalam perancangan database yang dimulai dengan

mengidentifikasi data penting yang disebut dengan Entity (entitas) dan Relationship

(relasi) antara data yang harus direpresentasikan dalam bentuk model. Entity-

Relationship Modeling bertujuan agar designers, programmers dan end-Users

memiliki satu pandangan yang sama dalam merancang database sehingga rancangan

database sesuai dengan Requirements yang didapat. Entity-Relationship Diagram

(ERD) merupakan gambaran dari kumpulan entitas beserta dengan relasi antara

entitas. ERD digunakan untuk mendokumentasikan struktur logis dari database.

35

Gambar 2.5 Contoh Entity Relationship Diagram

(Connolly & Begg, 2015, p. 64)

36

2.7 Database Management system (DBMS)

Connolly & Begg (2010, p66) mengutarakan "DBMS adalah Software yang

berinteraksi dengan database". DBMS menyediakan fasilitas berikut ini :

• Memungkinkan User menentukan database melalui Data Defenition

Language (DDL). DDL memungkinkan User menentukan tipe data,

struktur serta constraints untuk data yang disimpan dalam database.

• Memungkinkan User melakukan insert, Update , delete, dan retrieve dari

database itu sendiri melalui Data Manipulation Language (DML). DML

memungkinkan permintaan umum untuk data yang biasa disebut query

Language . Query Language yang paling umum adalah Structured Query

Language (SQL).

• Menyediakan akses kontrol ke database.

2.7 MySQL

MySQL merupakan sebuah Relational database Management system yang

kuat dan mempunyai akses yang cepat. MySQL Server mengontrol akses ke data

untuk memastikan bahwa User dalam jumlah banyak dapat bekerja dengan MySQL

secara bersamaan, untuk menyediakan akses cepat, dan untuk memastikan bahwa

hanya pihak berwenang yang mendapatkan akses itu. Dengan demikian, MySQL

bersifat multiUser, multireaded Server . MySQL menggunakan SQL sebagai standar

bahasa query untuk database (Welling and Thompson, 2009).

2.8 Pendekatan Software Testing

Software Testing adalah aktivitas yang ditujukan untuk mengevaluasi atribut

atau kemampuan dari program dan memastikan bahwa program itu sesuai dengan

hasil yang diinginkan. Gagasan dasar dari Testing melibatkan eksekusi dari

Software dan observasi dari behaviour atau outcome. Jika kegagalan diamati,

execution record dianalisa untuk mengetahui dan membenahi masalah yang membuat

kegagalan itu (Tian, 2008, p67).

2.8.1 Manfaat Testing

Tian (2008, p67-68) menambahkan bahwa tidak berbeda pada beberapa

sistem fisikal dan produk, manfaat dari Testing adalah untuk meyakinkan

bahwa Software system s bekerja sebagaimana diharapkan saat digunakan oleh

37

User. Karena fleksibilitas dari Software , yang mana masalah dapat dibenahi

dengan lebih mudah daripada proses manufacturing tradisional atau produk

fisikal dan sistem, keuntungan ini dapat dimanfaatkan dari pengujian dengan

membenahi masalah yang teramati saat proses pengembangan. dengan

demikian Testing menjadi sangat berarti untuk mendeteksi dan membenahi

kecacatan Software dalam lingkungan pengembangan.Sehingga dengan

singkatnya Testing memenuhi dua tujuan berikut ini :

• Mendemonstrasikan kualitas atau behaviour yang sesuai

• Mendeteksi dan membenahi masalah.

2.8.2 Aktivitas Utama Dalam Testing

Tian (2008, p68) menjabarkan aktivitas utama Testing mengikuti

langkah kronologis berikut ini :

• Tes Planning and preparation, yang didalamnya menentukan sasaran dari

Testing , memilih strategi Testing , dan mempersiapkan Test cases dan

prosedur umum pengujian.

• Test Execution dan aktivitas yang berhubungan, yang juga meliputi

observasi dan pengukuran dari product behaviour.

• Analysis and follow-up, yang meliputi pemeriksaan dan analisis untuk

menentukan jika kesalahan teramati, dan jika ada, aktivitas follow-up

dilakukan dan diawasi untuk memastikan penghilangan dari penyebab

kesalahan.

2.8.3Test Strategies Untuk WebApps

Strategi pengujian untuk WebApps mengadopsi prinsip dasar dari

semua Software Testing dan mengaplikasikan strategi dan taktik yang

digunakan untuk sistem object-oriented. Langkah-langkah berikut ini

meringkaskan pendekatan strategi ini

(Pressman, 2010, p532) :

• Content model untuk WebApp ditinjau ulang untuk menemukan

errors.

• Interface model ditinjau untuk memastikan bahwa semua usecase

terakomodasi.

• Design model untuk WebApp ditinjau untuk menemukan errors pada

38

navigasi.

• User Interface diuji untuk menemukan errors pada presentasi dan/atau

mekanika navigasi.

• Setiap komponen fungsi diuji

• Navigasi pada arsitektur diuji

• Performance Test dilakukan

• WebApp diuji oleh end-Users yang dikontrol dan diawasi.

2.8.4 Functional atau Black Box Testing (BBT)

Functional Testing memverifikasi handling yang benar untuk external

function dari Software . karena Software diperlakukan seumpama black-box,

dengan external behaviour diamati lewat input, output, dan karakteristik yang

dapat diamati lainnya, maka Testing ini sering disebut dengan black-box

Testing (BBT). (Tian 2008, p75) Dari kutipan diatas, dapat disimpulkan

bahwa black-box Testing adalah pengujian

external behaviour dari sistem dengan menguji sistem lewat sekumpulan input

dan melihat output dari hasil proses input itu.

2.9 Interaksi Manusia Dan Komputer

Dalam perancangan Web application perlu dipertimbangkan interaksi manusia

dan komputer. Pembangunan aplikasi yang interaktif membutuhkan Implementasi

dasar dari ilmu interaksi manusia dan komputer yang benar (Tian 2008).

2.9.1 Usability Requirements

Interface yang efektif memberikan rasa positif akan sukses, kemampuan,

penguasaan, dan kejelasan pada komunitas User (User). (Shneiderman et al.

2017)

Untuk mendapatkan sistem yang bersifat User-friendly perancang dapat fokus

pada sasaran-sasaran (goals) yang spesifik yang menyertakan system

engineering yang telah ditetapkan faktor manusia (human fActors) yang

terukur secara jelas. U.S Military Standard for Human Engineering Design

Criteria menambahkan:

Peroleh performa yang dibutuhkan oleh operator, kontrol, dan personil

pemelihara (maintenance)

39

• Menimalisir skill dan personel yang dibutuhkan saat waktu training

• Peroleh kehandalan (reliability) yang diperlukan oleh kombinasi

personil perlengkapan

• Pelihara standarisasi perancangan pada keseluruhan system

Berikut ini adalah sasaran-sasaran (goals) yang ada dalam Requirements

analysis.

• Menentukan tugas

Langkah awal adalah mengetahui kebutuhan User, task dan subtask

apa yang harus diselesaikan. Tugas yang bersifat frequent atau sering

dilakukan mudah ditentukan, tetapi tugas-tugas yang bersifat

occasional, tugas khusus untuk keadaan darurat, dan tugas

pembenahan error pada penggunaan interface lebih susah ditemukan.

• Pastikan ada kehandalan

Langkah kedua yang vital adalah memastikan sistem itu handal,

action harus berfungsi sebagaimana ditentukan, data yang ditampilkan

harus merefleksikan isi dari database, dan pembaharuan (Update s)

harus diaplikasikan secara benar. Kepercayaan User pada sistem itu

rapuh; jika User mengalami kejadian data yang salah atau hasil yang

tidak terduga dari sistem akan mengurangi keinginan User untuk

menggunakan sistem itu untuk waktu yang lama.

• Standarisasi, integrasi, konsistensi, dan protabilitas

Standarisasi mengacu ke User interface yang sudah umum dikenali,

sehingga memungkinkan User untuk memudahkan User untuk

mengenali dan mempelajari aplikasi. Integrasi di seluruh paket

aplikasi dan Software tools adalah kunci dari prinsi perancangan.

Konsistensi mengacu pada aksi umum urutan, kondisi, unit, susunan,

warna, typography, dan sebagainya pada keseluruhan aplikasi atau

program. Protabilitas sendiri mengacu ke potensi konversi data dan

untuk memberikan User interface pada beberapa lingkungan Software

dan hardware.

• Jadwal dan anggaran

Prencanaan matang dan manajemen yang tepat sangat dibutuhkan

agar pengembangan dapat diselesaikan tepat waktu dan dalam batasan

anggaran yang

40

tepat.

2.9.2 Usability Measures

Perkiraan yang matang dari komunitas User dan patokan dari tugas-tugas

adalah basis untuk memungkinkan tercapainya sasaran pada masalah human

factor. Berikut ini adalah faktor-faktor pada pengukuran Usability

(Shneiderman et al. 2017) :

Waktu untuk belajar berapa lama waktu yang dibutuhkan untuk mempelajari

penggunaan command yang relevan dengan tugas-tugas yang dilakukan?

• Kecepatan performa

Berapa lama waktu yang diperlukan untuk menyelesaikan tugas-tugas

patokan (benchmark tasks)?

• Angka kesalahan (errors) dari User

Berapa banyak dan jenis error apa yang User lakukan biasanya saat

mengerjakan benchmark tasks?

• Daya ingatan jangka lama

Sebaik apa User dapat mempertahankan ingatan mereka setelah

beberapa jam, hari, atau minggu? Hal ini berhubungan dengan butir

ke-1, yaitu waktu untuk belajar.

• Kepuasan subjektif

Sepuas apakah User saat menggunakan sistem? wawancara atau

survei tertulis dapat dilakukan untuk melihat kepuasan subjektif ini.

2.10 Delapan Aturan Emas Perancangan Antar Muka (8 Golden Rules

Interface Design)

(Shneiderman & Plaisant, Designing the User Interface: Strategies for

Effective Human-Computer Interaction, 5th Edition, 2010) dalam perancangan

desain antar muka terdapat delapan aturan emas (Eight Golden Rules) yang harus

diperhatikan, yaitu:

1. Berusaha untuk konsisten

Pentingnya bagi antarmuka pemakai untuk tetap konsisten agar User tidak

kebingungan dalam mencari sebuah informasi. Contoh, tampilan layar harus

konsisten dari yang satu dengan yang lainnya.

41

2. Melayani Usability universal

Mengenali kebutuhan pengguna yang beragam dan desain untuk plasticity,

memfasilitasi transformasi pemberitahuan konten ke perbedaan ahli, rentang

usia, cacat, dan keragaman masingmasing teknologi memperkaya spektrum

persyaratan desain panduan itu. Menambahkan fitur bagi para pemula, seperti

penjelasan, dan

fitur untuk para ahli, seperti shortcut dan aksi balik lebih cepat, dapat

memperkaya desain antarmuka dan meningkatkan persepsi kualitas sistem.

3. Berikan umpan balik (feedback) yang informatif

Untuk setiap User melakukan aksi, maka harus ada umpan balik agar membuat

User menjadi terarah dan tidak tersesat dalam pencarian informasi.

4. Merancang dialog yang memberikan penutupan (Keadaan akhir).

Berinteraksi dengan komputer sama seperti berdialog. Aksi yang berurutan harus

diorganisasi dan memiliki awal, tengah, maupun akhir. Penting bagi User untuk

mengetahui kapan aksi tersebut berakhir. Umpan balik yang informatif pada saat

sekumpulan aksi telah dilakukan memberikan User suatu kepuasan, rasa lega,

dan indikasi bahwa User boleh melakukan aksi yang selanjutnya.

5. Mencegah Terjadinya Error

Sebanyak mungkin menghindari kesalahan pada perancangan sistem sehingga

pengguna tidak dapat membuat kesalahan serius, misalnya field item yang harus

diisi oleh User yang tidak mengizinkan karakter abjad dalam pengisian data

numerik. Jika User membuat kesalahan, interface harus mendeteksi kesalahan

dan menawarkan instruksi sederhana, konstruktif, dan khusus untuk proses

perbaikan kesalahan. Misalnya, User tidak perlu mengetik ulang bentuk seluruh

nama-alamat jika mereka memasukkan kode pos tidak valid, melainkan harus

diarahkan untuk memperbaiki.

6. Mungkinkan adanya aksi pembalikan yang mudah (Undo)

User harus dapat kembali pada aksi yang telah dilakukan sebelumnya, baik itu

ada kesalahan maupun tidak.

7. Mendukung pusat kendali internal.

Kepuasan User akan tinggi jika User merasakan bahwa dia telah memegang

kendali sedangkan kepuasan User akan rendah jika komputer yang memegang

kendali.

42

8. Mengurangi beban ingatan jangka pendek.

Ingatan jangka pendek manusia sangatlah terbatas. Lakukan apa saja yang

memungkinkan User tidak perlu mengingat apa pun. Sebagai contoh, daripada

meminta unser untuk mengetik nama file yang akan diterima, lebih balik apabila

User diminta untuk menampilkan daftar dari file yang tersedia.

43