BAB 2 TINJAUAN PUSTAKA -...

34
7 BAB 2 TINJAUAN PUSTAKA 2.1 Teori Utama 2.1.1 Website Menurut Bud E. Smith dan Arthur Bebak (2007, pp. 13) Website adalah sebuah kumpulan Web page yang memiliki tema dan tujuan yang sama dan pada umumnya pengguna mengakses melalui halaman home page situs. Web page adalah sebuah teks dokumen yang diterbitkan pada sebuah Web server yang memiliki tag HTML di dalamnya, hampir selalu memuat hypertext links, dan biasanya mencakup grafis. Ketika Anda mengklik tombol back di Web browser Anda, Anda akan pindah ke Web page yang sebelumnya Anda sudah kunjungi. Sedangkan Home page adalah Web page pertama yang dikunjungi pada saat pertama kali mengakses sebuah Website. Anda membiarkan orang mengetahui URL (alamat) dari home page Anda dan mencoba untuk mendapatkan pencipta Web page lainnya untuk menyediakan link ke sana. 2.1.2 HTML Menurut David R. Brooks (2007, pp. 10) HTML merupakan singkatan dari HyperText Markup Language yang merupakan fondasi dari segala konten yang ada di World Wide Web (WWW). HTML menurut David R. Brooks (2007, pp. 10) bukan merupakan bahasa pemrograman melainkan lebih seperti sebuah kumpulan instruksi tentang bagaimana cara menampilkan sebuah konten. Untuk menampilkan hasil instruksi HTML diperlukan sebuah program untuk menerjemahkan yaitu Web browser. Kata Markup memiliki arti yang sama seperti pada industri penerbitan buku dimana, sebelum sebuah buku dicetak editor terlebih

Transcript of BAB 2 TINJAUAN PUSTAKA -...

Page 1: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

7

BAB 2

TINJAUAN PUSTAKA

2.1 Teori Utama

2.1.1 Website

Menurut Bud E. Smith dan Arthur Bebak (2007, pp. 13)

Website adalah sebuah kumpulan Web page yang memiliki tema dan

tujuan yang sama dan pada umumnya pengguna mengakses melalui

halaman home page situs. Web page adalah sebuah teks dokumen

yang diterbitkan pada sebuah Web server yang memiliki tag HTML di

dalamnya, hampir selalu memuat hypertext links, dan biasanya

mencakup grafis. Ketika Anda mengklik tombol back di Web browser

Anda, Anda akan pindah ke Web page yang sebelumnya Anda sudah

kunjungi. Sedangkan Home page adalah Web page pertama yang

dikunjungi pada saat pertama kali mengakses sebuah Website. Anda

membiarkan orang mengetahui URL (alamat) dari home page Anda

dan mencoba untuk mendapatkan pencipta Web page lainnya untuk

menyediakan link ke sana.

2.1.2 HTML

Menurut David R. Brooks (2007, pp. 10) HTML merupakan

singkatan dari HyperText Markup Language yang merupakan fondasi

dari segala konten yang ada di World Wide Web (WWW). HTML

menurut David R. Brooks (2007, pp. 10) bukan merupakan bahasa

pemrograman melainkan lebih seperti sebuah kumpulan instruksi

tentang bagaimana cara menampilkan sebuah konten. Untuk

menampilkan hasil instruksi HTML diperlukan sebuah program untuk

menerjemahkan yaitu Web browser.

Kata Markup memiliki arti yang sama seperti pada industri

penerbitan buku dimana, sebelum sebuah buku dicetak editor terlebih

Page 2: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

8

dahulu harus mengecek isi dari buku tersebut. Jika ada hal yang

kurang sesuai dengan penilaian sang editor maka editor akan

memberikan sebuah tanda diatasnya. Dengan tanda-tanda inilah, maka

sang editor konten dapat mengetahui teks apa yang harus diubah dan

format apa yang harus digunakan untuk memperbarui teks tersebut.

Sebuah dokumen HTML sederhana paling tidak terdiri dari

empat element berikut:

<html> … </html>

<head> … </head>

<title> … </title>

<body> … </body>

Setiap element HTML terdiri dari dua tags yaitu tag pembuka

dan tag penutup. Kedua tags tersebut juga berfungsi sebagai pembatas

scope dari element tersebut. Kedua tag memiliki syntax yang hampir

sama yaitu diawali dengan simbol “<” lalu nama dari element lalu

diakhiri dengan simbol “>” akan tetapi khusus untuk tag penutup

diawali dengan simbol “</”. Setiap element memiliki fungsi yang

berbeda, sebagai contoh element “p” yang berfungsi untuk teks

paragraf, element “title” yang berfungsi untuk judul halaman.

2.1.3 CSS

Menurut Ian Pouncey dan Richard York (2011, pp. 3)

Cascading Style Sheets (CSS) merupakan bahasa yang dirancang

untuk menjelaskan penampilan dari sebuah dokumen yang ditulis

dengan markup language seperti HTML. Dengan menggunakan CSS

programmer dapat mengubah ukuran teks, warna teks, bentuk dari

sebuah button, dan lain lain. Salah satu keuntungan dari menggunakan

CSS adalah dapat digunakan di beberapa page berbeda dengan

menggunakan code yang sama. CSS dapat ditulis dengan teks editor

apapun seperti Windows Notepad, Notepad++, dan lain lain. CSS

Page 3: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

9

memiliki file extension .css. Berikut ini adalah contoh dari sebuah

code CSS sederhana:

body {

width: 650px;

margin: auto;

color: #FFF;

}

Setiap code CSS diawali dengan memilih element / class

(.nama class) / id (#nama id) yang disebut selector. Setelah selector

diikuti oleh simbol “{ }”, simbol ini berfungsi sebagai pembatas scope

atau biasa disebut declaration block. Di dalam declaration block

berisi deklarasi dari CSS atau disebut declaration. Sebuah declaration

terdiri dari sebuah property, simbol “:”, sebuah value, dan diakhiri

dengan simbol “;”. Property dalam contoh di atas adalah width,

margin, dan color. Sedangkan value dalam contoh di atas adalah

650px, auto, dan #FFF.

2.1.4 JavaScript

Menurut Jeremy Mcpeak dan Paul Wilton (2015, pp. 2),

JavaScript adalah bahasa scripting yang memungkinkan Anda untuk

meningkatkan aplikasi web statis menjadi dinamis, personalisasi, dan

konten interaktif. Bahasa pemrograman ini dirancang untuk

penggunaan pada client side. Penggunaan JavaScript dapat dilakukan

pada file HTML.

Kode JavaScript dituliskan pada file HTML. Terdapat dua cara

untuk menuliskan kode-kode JavaScript agar dapat ditampilkan pada

halaman HTML, yaitu:

- JavaScript ditulis pada file yang sama

Page 4: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

10

Untuk penulisan dengan cara ini, perintah yang

digunakan adalah

<script language =”JavaScript” >

Program javascript here

</script>

Perintah tersebut biasanya diletakkan diantara Tag

<body>…</body>

Contoh Penulisan:

<html>

<head> <tittle>………</ tittle > </head>

<body>

<script language=”Javascript”>

code JavaScript here

</script>

code html here

</body>

</html>

- Javascript ditulis pada file terpisah

Kode JavaScript bisa juga kita buat dalam file terpisah

dengan tujuan agar dokumen HTML isinya tidak terlalu

panjang. Atribut yang digunakan adalah

<script src=”namefile.js”>…</ script >

Diantara tag <script …> dan </script> tidak

diperlukan lagi kode JavaScript-nya karena sudah dibuat

Page 5: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

11

dalam file terpisah. File yang mengandung kode JavaScript

berekstensi .js

2.1.5 PHP

Menurut Steve Suehring, Tim Converse, dan Joyce Park

(2009, pp. 3) PHP merupakan bahasa pemogramman web yang dibuat

oleh dan untuk web developers. PHP merupakan singkatan dari PHP:

Hypertext Preprocessor. PHP adalah server-side scripting language

yang biasanya digunakan untuk membuat web applications yang

dikombinasikan dengan sebuah web server seperti Apache. PHP juga

dapat digunakan untuk membuat command-line scripts yang mirip

dengan Perl atau shell scripts. Dokumen PHP memiliki file extension

.php.

Menurut Brett McLaughlin (2013, pp. 2) PHP bermula sebagai

sebuah set alat untuk melakukan tugas-tugas sederhana yang

berhubungan dengan Web. PHP pertama kali muncul dalam Web pada

tahun 1994. Awalnya, PHP tidak melakukan apa pun selain melacak

kunjungan ke halaman Web tertentu (resume online Rasmus Lerdorf-

penemu PHP). PHP kemudian dikembangkan untuk berinteraksi

dengan database, serta menyediakan toolset untuk buku tamu online

dan pengolahan form HTML. Seiring berjalannya waktu, PHP

menjadi sangat populer sebagai alternatif untuk bahasa yang kurang

web-friendly seperti C.

Menurut Robin Nixon (2015, pp. 6) dengan PHP,

memasukkan dynamic activity di halaman Web menjadi sangatlah

mudah. Ketika anda memberikan ekstensi .php pada suatu halaman,

halaman tersebut memiliki akses instan ke bahasa scripting. Dari

sudut pandang developer, yang harus Anda lakukan adalah menulis

kode seperti berikut:

Page 6: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

12

<?php echo "Today is". date ("l"). "."; ?>

Here's the latest news.

Tag pembuka <?php memberitahu Web server untuk

mengizinkan program PHP untuk menafsirkan semua kode hingga tag

?>. Di luar tag ini, semuanya dikirim ke client sebagai HTML biasa.

Jadi teks “Here's the latest news.” hanya dioutput ke Browser. Dalam

tag PHP, fungsi built-in date menampilkan hari apa hari ini sesuai

dengan waktu sistem server. Hasil akhir dari dua output akan terlihat

seperti berikut:

Today is Wednesday. Here's the latest news.

2.1.6 Framework

2.1.6.1 Bootstrap

Menurut Jake Spurlock (2013, pp. ix) Bootstrap

adalah front-end framework untuk membangun Website

yang responsif. Baik itu application frameworks, blog, atau

aplikasi CMS lainnya, Bootstrap dapat menjadi pilihan

terbaik yang Anda inginkan. Kombinasi dari HTML, CSS,

dan JavaScript membuat mudah untuk membangun Website

yang kuat tanpa menambahkan banyak kode. Dengan sistem

default grid, layout menyatu dengan mudah, dan styling

tombol, navs, dan tabel membuat markup dasar tampak

bagus. Plugin JavaScript yang tersedia dalam Bootstrap

memudahkan Anda menambahkan elemen interaktif ke

Website Anda.

Bootstrap merupakan sebuah produk open source dari

Mark Otto dan Jacob Thornton yang, ketika awal dirilis,

keduanya merupakan karyawan di Twitter. Ketika itu ada

kebutuhan untuk membakukan frontend toolsets milik

Page 7: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

13

developer di seluruh perusahaan. Sejak Bootstrap

diluncurkan pada Agustus 2011, popularitas Bootstrap

meroket. Bootstrap telah berkembang dari sebuah CSS-

driven project hingga memasukkan sejumlah plugin

JavaScript dan ikon yang sesuai dengan form dan tombol.

2.1.6.2 jQuery

jQuery adalah JavaScript library open source yang

menyederhanakan interaksi antara dokumen HTML, atau

lebih tepatnya Document Object Model (DOM) dan

JavaScript. Script jQuery dibuat untuk memudahkan

pengaturan dokumen seperti menyeleksi object dengan

elemen DOM dan membuat aplikasi dengan AJAX.

jQuery juga menyediakan layanan atau support para

developers untuk membuat plug-ins di dalam bahasa

Javascript tentunya. Sehingga memungkinkan para

developer website untuk membuat website lebih interaktif

dengan animasi, efek – efek, tema dan widget.

jQuery mudah untuk digunakan. Sama seperti dengan

perpustakaan lainnya seperti JavaScript, masukkan pada

bagian atas pada halaman HTML antara <head> </ head>

tag. Berikut adalah cara untuk menyertakan perpustakaan

jQuery

<head>

<script type=”text/javascript” src=”jquery-

1.4.2.js”> </script>

</head>

Page 8: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

14

2.1.6.1 Codeigniter

Menurut Ibnu Daqiqil (2011, pp. 3) Codeigniter

adalah web application framework yang bersifat open source

yang digunakan untuk membangun aplikasi php dinamis.

Tujuan utama pengembangan Codeigniter adalah untuk

membantu developer untuk mengerjakan aplikasi lebih cepat

dari pada menulis semua kode dari awal dan juga

menyediakan berbagai macam library yang dapat

mempermudah dalam pengembangan. Codeigniter dibangun

dengan menggunakan konsep Model-View–Controller

(MVC) development pattern. Codeigniter sangat ringan,

terstruktur, mudah dipelajari, dokumentasi lengkap dan

dukungan yang luar biasa dari forum Codeigniter.

Gambar 2.1 Aliran Codeigniter

(Sumber: Sebuah panduan dan Best Practice Framework

Codeigniter, Ibnu Daqiqil, 2011, pp. 6).

Page 9: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

15

2.1.7 Database

Database menurut Thomas M. Connolly dan Carolyn E. Begg

(2005, pp. 15) adalah Kumpulan data bersama yang terkait secara

logis dengan deskripsi data yang dirancang untuk memenuhi

kebutuhan informasi sebuah organisasi. Data yang terhubung secara

logis dalam Database terdiri dari:

- Entity

Entity adalah objek yang berbeda (orang, tempat,

benda, konsep, atau event) dalam organisasi yang akan

diwakili dalam sebuah database.

- Attribute

Attribute adalah sebuah property yang menjelaskan

beberapa aspek dari objek yang kita ingin merekam/

simpan.

- Relationship

Relationship adalah hubungan antara entity. Dalam

relational database, kolom (column) disebut attribute,

sedangkan baris (row) disebut tuple.

Gambaran relasi secara lengkap terdapat juga tiga

macam relasi dalam hubungan atribute dalam satu file.

1. One to one relationship

2. One to many relationship

3. Many to many relationship

Dalam merancang sebuah database, ada tiga fase yaitu:

- Conceptual database design

Conceptual database design merupakan proses

membangun model data yang digunakan dalam suatu

perusahaan yang independen dari semua pertimbangan

fisik yang ada.

Page 10: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

16

- Logical database design

Logical database design adalah proses untuk

membangun model data yang digunakan dalam suatu

perusahaan berdasarkan pada model data yang spesifik,

tetapi independen dari DBMS tertentu dan pertimbangan

fisik lainnya.

- Physical database design

Physical database design merupakan proses

memproduksi sebuah deskripsi dari implementasi database

pada penyimpanan sekunder yang menjelaskan hubungan

dasar, organisasi file dan indeks yang digunakan untuk

mencapai akses yang efisien ke data, setiap integrity

constraints terkait dan langkah-langkah keamanan.

2.1.8 Database Management System (DBMS)

Database Management System (DBMS) menurut Thomas M.

Connolly dan Carolyn E. Begg (2015, pp. 64) adalah sebuah sistem

software yang memungkinkan penggunanya untuk mendefinisikan,

membuat, memelihara, dan mengontrol akses ke database. DBMS

adalah software yang digunakan untuk berinteraksi dengan program

aplikasi pengguna dan database. Biasanya, sebuah DBMS

menyediakan fasilitas sebagai berikut:

- Memungkinkan pengguna untuk mendefinisikan sebuah

database, biasanya melalui Data Definition Language (DDL).

DDL dapat memungkinkan pengguna untuk menentukan tipe

data, struktur, dan batas pada data yang akan disimpan ke

dalam sebuah database.

- Memungkinkan pengguna untuk memasukkan, memperbarui,

menghapus, dan mengambil data dari database, biasanya

melalui Data Manipulation Language (DML). Dengan

memiliki sebuah repositori pusat untuk semua data dan

Page 11: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

17

deskripsi data memungkinkan DML untuk memberikan

fasilitas permintaan umum untuk data ini, yang biasa disebut

sebagai query language. Penyediaan query language

mengurangi permasalahan yang terkait dengan file-based

systems dimana pengguna harus bekerja dengan sebuah set

queries yang tetap atau ada pertambahan program, yang dapat

menyebabkan software management problems. Query

language yang paling umum adalah Structured Query

Language (SQL) yang sekarang merupakan standar bahasa

yang formal dan de facto untuk relational DBMS.

- Menyediakan akses terkontrol ke database. Sebagai contoh,

dapat menyediakan:

- Sistem keamanan, yang mencegah pengguna yang

tidak memiliki akses untuk mengakses database.

- Sistem integritas, yang mempertahankan konsistensi

data yang disimpan.

- Sistem concurrency control, yang memungkinkan

akses bersama ke database.

- Sistem recovery control, yang mengembalikan

database ke kondisi sebelumnya jika mengalami

kegagalan hardware atau software.

- Sebuah katalog yang dapat diakses oleh pengguna,

yang berisi deskripsi dari data yang tersedia di dalam

sebuah database.

2.1.9 UML (Unified Modelling Language)

Menurut Whitten dan Bentley (2007), UML (Unified

Modeling Language) merupakan kumpulan konvensi pemodelan

untuk menentukan atau menggambarkan suatu sistem piranti lunak

yang berhubungan dengan objek.

Page 12: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

18

2.1.9.1 Use Case Diagram

Menurut Whitten dan Bentley (2007), Use Case

Diagram dipakai untuk menggambarkan relasi antara sistem

dan sistem eksternal dan pengguna, dengan kasus yang

disesuaikan dengan langkah-langkah yang telah ditentukan.

Use Case Diagram merupakan cara /metode yang cocok

untuk digunakan untuk dapat menggambarkan interaksi yang

jelas antara sistem dengan pengguna.

- Use Cases

Use case menjelaskan fungsi sistem dari

perspektif eksternal pengguna dan secara

terminologi agar dapat dimengerti oleh

pengguna.

Gambar 2.2. Use Cases

(Sumber: System Analysis & Design Method,

Whitten dan Bentley, 2007, pp. 246)

- Actors

Actor merupakan sesuatu yang perlu

untuk berinteraksi dengan sistem agar dapat

bertukar informasi. Actors tidak harus berupa

manusia, tetapi dapat berupa suatu organisasi

atau sistem informasi.

Page 13: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

19

Gambar 2.3. Actors

(Sumber: System Analysis & Design Method,

Whitten dan Bentley, 2007, pp. 247)

- Relationships

Sebuah relasi antar sistem dan sistem

atau user dan sistem digambarkan dengan

sebuah garis di antara keduanya. Arti relasi

yang digambarkan bisa beragam tergantung

pada bagaimana garis itu digambarkan dan apa

yang mereka hubungkan. Ada beberapa macam

relasi, antara lain associations, extends, dan

uses.

• Associations

Associations adalah sebuah relasi

antara seorang actor dengan sebuah use

case di mana terjadi interaksi antar

mereka. Asosiasi dengan panah

tertutup (1) di ujung yang menyentuh

use case mengindikasikan bahwa actor

di ujung yang satu lagi melakukan use

case tersebut. Sedangkan asosiasi tanpa

panah (2) mengindikasikan sebuah

interaksi dari use case ke actor yang

menerima hasil dari use case tersebut.

Page 14: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

20

Gambar 2.4. Associations dalam

Use Case Diagram

(Sumber: System Analysis & Design Method,

Whitten dan Bentley, 2007, pp. 248)

• Extends

Bertujuan untuk menyederhanakan

use case dengan fungsionalitas yang

kompleks seperti beberapa langkah

yang perlu dilakukan menjadi lebih

mudah dipahami.

Gambar 2.5. Extends dalam Use Case

Diagram

(Sumber: System Analysis & Design Method,

Whitten dan Bentley, 2007, pp. 249)

Page 15: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

21

• Uses/Include

Uses bertujuan untuk mengurangi

redundansi di antara dua use case atau lebih

dengan menggabungkan langkah-langkah

yang sama tersebut.

Gambar 2.6. Uses dalam

Use Case Diagram

(Sumber: System Analysis & Design Method,

Whitten dan Bentley, 2007, pp. 249)

2.1.9.2 Activity Diagram

Menurut Carol Britton & Jill Doake (2005, pp. 202),

Activity Diagram dibuat untuk menggambarkan aliran proses

yang kompleks. Activity diagram menunjukkan aktivitas-

aktivitas pada use case diagram secara lebih rinci. Activity

diagram juga dapat mengilustrasikan aktivitas-aktivitas baik

yang berurutan maupun berjalan secara paralel. Berikut

elemen-elemen pada activity diagram:

Page 16: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

22

1. Activity

Activity, digambarkan dengan rounded-

rectangle, menyatakan aktivitas yang dijalankan

sistem.

Gambar 2.7 Simbol Activity

(Sumber: A Student Guide To Object-Oriented

Development, Carol Britton & Jill Doake, 2007, pp.

203)

2. Start State

Start state, menyatakan awal dari alur proses

yang dijalankan. Hanya ada satu start state pada

tiap activity diagram ataupun subdiagramnya.

Gambar 2.8 Simbol Start State

(Sumber: A Student Guide To Object-Oriented

Development, Carol Britton & Jill Doake, 2007, pp.

203)

Page 17: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

23

3. Stop State

Stop state, menyatakan akhir dari alur kerja

suatu diagram. Dalam satu diagram bisa

terdapat beberapa stop state.

Gambar 2.9 Simbol Stop State

(Sumber: A Student Guide To Object-Oriented

Development, Carol Britton & Jill Doake, 2007, pp.

203)

4. Transition

Transition, menyatakan transisi dari satu

aktivitas ke aktivitas lain.

Gambar 2.10 Simbol Transition

(Sumber: A Student Guide To Object-Oriented

Development, Carol Britton & Jill Doake, 2007, pp.

203)

5. Decision

Decision, menyatakan awal atau akhir

percabangan alur yang bergantung pada suatu

kondisi tertentu.

Page 18: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

24

Gambar 2.11 Simbol Decision

(Sumber: A Student Guide To Object-Oriented

Development, Carol Britton & Jill Doake, 2007, pp.

203)

6. Join

Join, menyatakan awal atau akhir

percabangan alur yang berjalan paralel.

Gambar 2.12 Simbol Join

(Sumber: A Student Guide To Object-Oriented

Development, Carol Britton & Jill Doake, 2007, pp.

203)

Page 19: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

25

Gambar 2.13 Activity Diagram

(Sumber: A Student Guide To Object-Oriented Development, Carol Britton & Jill Doake, 2007, pp. 212)

Page 20: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

26

2.1.9.3 Sequence Diagram

Menurut Whitten dan Bentley (2007). Sequence

Diagram adalah sebuah diagram yang menggambarkan

interaksi antara aktor dan sistem untuk skenario dari use case.

Diagram ini mengilustrasikan bagaimana pesan dikirim dan

diterima antara objek dan urutan yang seperti apa. Diagram ini

lebih detail dalam penggambaran aliran data, termasuk data

yang dikirim ataupun diterima.

Gambar 2.14 Sequence Diagram

(Sumber: System Analysis & Design Method,

Whitten dan Bentley, 2007, pp. 395)

Page 21: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

27

Berikut elemen-elemen pada sequence diagram:

1. Actor

Actor, merupakan simbol yang digunakan

untuk actor pada usecase

2. System

System, merupakan kotak untuk menunjukkan

sistem yang bersangkutan secara keseluruhan.

3. Lifelines

Lifelines, garis vertikal putus-putus yang

mengindikasikan masa hidup sistem/aktor.

4. Activation Bars

Activation bars merupakan balok yang

bergantung pada Lifelines yang menggambarkan masa

waktu interaksi aktif.

5. Input message

Input message merupakan garis horizontal

berbentuk panah dari actor menuju kanan untuk

mengindikasikan pesan masuk.

6. Output message

Output message merupakan garis horizontal

berbentuk panah terputus-putus dari kiri untuk

mengindikasikan pesan balik.

2.1.9.4 Class Diagram

Menurut Whitten dan Bentley (2007, pp. 373-381),

Class Diagram digunakan untuk menggambarkan

pengorganisasian obyek-obyek bisnis dan asosiasinya

terhadap satu sama lain pada sebuah sistem. Dalam hal

ini, obyek bisnis disebut sebagai class. Di dalam class

diagram, class – class yang ada dapat dihubungkan

satu sama lain menggunakan garis lurus. Di dalam

Page 22: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

28

sebuah class, terdapat elemen berupa nama, attribute,

dan operation.

Berikut adalah beberapa jenis hubungan di dalam

class diagram menurut Whitten dan Bentley (2007, pp.

373-381):

1. Multiplicity

Multiplicity adalah indikator yang

menunjukkan banyaknya hubungan antar

class.

Tabel 2.1 Jenis-Jenis Multiplicity

Multiplicity Deskripsi

1 Hanya satu.

0..1 Nol atau satu

* Nol atau lebih.

1..* Satu atau lebih.

x..y Antara jumlah x dan jumlah y

2. Association

Association adalah hubungan antara dua

class atau lebih di dalam sebuah class

diagram. Pada setiap association terdapat

multiplicity. Terdapat dua jenis hubungan

association di dalam class diagram, yaitu:

a. Bi-directional

Adanya hubungan antar

class dimana kedua class sama-

Page 23: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

29

sama memiliki peran terhadap

satu sama lain. Hubungan bi-

directional digambarkan dengan

garis lurus tanpa tanda panah

yang menghubungkan kedua

class.

b. Uni-directional

Adanya hubungan antar

class dimana hanya salah satu

class memiliki peran dalam

hubungan tersebut. Hubungan

uni-directional digambarkan

dengan garis lurus yang

memiliki tanda panah di salah

satu ujungnya.

Gambar 2.15 Contoh Association Bi-Directional dan

Uni-Directional Class Diagram

3. Generalization dan Specialization

Generalization dan Specialization adalah

hubungan antar class dimana terdapat super

class, yaitu sebuah class yang merupakan

Page 24: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

30

hasil pengelompokan class-class berdasarkan

attribute dan behavior yang sama

(generalization), dan sub class, yaitu class-

class yang mendapatkan attribute dan

behavior turunan dari sebuah super class

namun dapat memiliki attribute dan behavior-

nya sendiri (specialization).

Gambar 2.16 Contoh Generalization/Specialization

Class Diagram

(Sumber: System Analysis and Design Method –

Whitten dan Bentley, 2007, pp. 375)

4. Aggregation dan Composition

Aggregation dan Composition adalah

hubungan antar class dimana sebuah class

merupakan bagian dari class lainnya.

Page 25: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

31

Gambar 2.17 Contoh Aggregation Class Diagram

(Sumber: System Analysis and Design Method –

Whitten and Bentley, 2007, pp. 379)

Perbedaan antara composition dan

aggregation adalah pada composition terdapat

hubungan yang lebih erat antar class. Misalnya,

jika class A adalah bagian dari class B, maka

class B tidak akan bisa berdiri sendiri tanpa

class A. Pada UML 2.0 notasi aggregation

tidak lagi digunakan karena fungsinya kurang

terlihat perbedaannya dengan bentuk

association dengan multiplicity satu atau lebih

(one or more). Hal ini menyebabkan beberapa

praktisi menganggap aggregation tidak

memiliki arti penting pada penggunaannya.

Page 26: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

32

Gambar 2.18 Contoh Composition Class Diagram

(Sumber: System Analysis and Design Method - Whitten and

Bentley, 2007, pp. 379)

Gambar 2.19 Contoh Class Diagram

(Sumber: System Analysis and Design Method –

Whitten and Bentley, 2007, pp 406)

2.1.10 ERD (Entity Relationship Diagram)

Menurut Whitten dan Bentley (2007, pp. 271), ERD adalah

sebuah model data yang memanfaatkan beberapa notasi untuk

menggambarkan data dalam beberapa ketentuan dari entitas-entitas

Page 27: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

33

dan hubungan-hubungan yang dideskripsikan oleh data tersebut. Dari

pengertian diatas, dapat disimpulkan bahwa Entity Relationship

Diagram (ERD) adalah model data yang menggunakan beberapa

notasi untuk menggambarkan hubungan antara satu entitas dengan

entitas yang lain.

Adapun komponen-komponen yang membentuk Entity

Relationship Diagram:

1. Entity

Entity adalah sebuah kelas dari orang, tempat,

objek, kejadian atau konsep yang perlu diambil dan

disimpan datanya (Whitten dan Bentley, 2007, pp.

271)

2. Attribute

Attribute adalah sebuah elemen-elemen

penjelas dari karakteristik sebuah entity dan juga

berupa serpihan-serpihan data yang spesifik yang

kita ingin simpan dari sebuah entity. (Whitten dan

Bentley, 2007, pp. 272).

3. Relationship

Relationship adalah bisnis alami yang ada di

antara satu atau lebih entitas. Relationship dapat

mewakili suatu peristiwa yang menghubungkan

entitas atau hanya pertalian logis yang ada antara

entitas (Whitten dan Bentley, 2007, pp. 272).

2.1.11 Eight Golden Rules

Menurut Schneiderman dan Plaisant (2010) dalam merancang

antarmuka terdapat Eight Golden Rules (Delapan Aturan Emas) yang

sering digunakan, antara lain:

Page 28: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

34

- Upayakan untuk konsisten, seperti dalam penggunaan

petunjuk, menu, screen help, warna, jenis harus dan yang

lainnya harus konsisten.

- Memungkinkan pengguna dapat menggunakan shortcut

untuk mendapatkan informasi yang dibutuhkan sehingga

dapat mempermudah pengguna.

- Memberikan umpan balik yang informatif kepada

pengguna dalam setiap aksi yang dilakukannya.

- Merancang dialog untuk menghasilkan suatu penutupan

akhir dari suatu proses.

- Memberikan pencegahan kesalahan serta penanganan

kesalahan yang sederhana.

- Memungkinkan pengguna untuk dapat kembali pada aksi

yang sebelumnya (bersifat reversible).

- Dapat menjadikan pengguna sebagai pusat kendali dari

sistem antarmuka. Sehingga pengguna dapat dengan bebas

bernavigasi sesuai dengan yang dikehendaki.

- Mengurangi beban ingatan jangka pendek, dengan cara

merancang sistem antarmuka yang sederhana dengan tidak

terlalu banyak perintah yang dapat menyebabkan

kebingungan oleh pengguna.

2.1.2.12 Lima Faktor Manusia Terukur

Menurut Schneiderman dan Plaisant

(2010, pp.32), dalam merancang sistem sebelumnya

harus memperhatikan 5 faktor berikut:

1. Waktu untuk belajar

Berapa lama waktu yang diperlukan

bagi pengguna untuk belajar menggunakan

perintah.

Page 29: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

35

2. Kecepatan kinerja

Berapa lama waktu yang diperlukan

untuk melaksanakan tugas.

3. Tingkat kesalahan oleh pengguna

Berapa banyak dan apa saja jenis

kesalahan yang membuat pengguna untuk

melakukan tugas-tugas.

4. Retensi dari waktu ke waktu (daya ingat)

Seberapa baik pengguna memelihara

pengetahuan yang telah mereka pelajari.

5. Kepuasan subjektif

Seberapa besar ketertarikan pengguna

aplikasi terhadap aspek- aspek interface aplikasi

tersebut.

-

2.1.13 Scrum

Menurut James (2015), Scrum merupakan sebuah menagemen

kerangka kerja dengan pengembangan produk satu atau lebih lintas

fungsional. Scrum menggunakan fixed-length iterations, yang disebut

dengan Sprint, yang biasanya memiliki waktu pengerjaan selama dua

minggu atau 30 hari.

Page 30: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

36

Gambar 2.20 Tahap-tahap dalam metode perulangan (iteration)

Sumber: http://scrumreferencecard.com/scrum-reference-

card/

Prinsip Scrum sesuai dengan prinsip-prinsip metode

pengembangan piranti lunak secara cepat (Agile) yang digunakan

untuk menuntun kegiatan pengembangan piranti lunak yang terdiri

dari 6 tahap didalam metode perulangan (iteration), yaitu:

1. Evaluation/Prioritization

2. Detailed Requirements

3. Design & Analysis

4. Implementation & Developer Testing

5. QA/Acceptance Testing

6. Deployment

Di setiap tahap pengembangan, terjadi aktivitas kerja yang

terlingkup di dalam suatu pola proses yang dinamakan sprint.

Setiap pola proses yang terjadi, akan terdapat seperangkat

kegiatan berikut:

Project Start

Iteration 1

QA / Acceptance Testing

Design & Analysis

Implementation & Developer Testing

Evaluation / Prioritization

Detailed Requirements ) Deployment (

Iteration Detail

Iteration 2 Iteration 3 Iteration 4

Project End Vision Continue

Page 31: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

37

• Sprint Planning Meeting

Sprint planning merupakan rapat perencanaan

tujuan sprint antar semua tim untuk bernegosiasi

perkara proyek yang akan dikerjakan. Didalam sprint

planning membuat sprint backlog yaitu daftar dari

pekerjaan yang akan dilakukan selama sprint. Sprint

backlog merupakan bagian product backlog yang

didetailkan.

• Daily Scrum meeting

Daily Scrum merupakan rapat harian yang

dilakukan tim pengembang dengan batasan waktu

maksimal 15 menit. Daily Scrum bertujuan untuk

meninjau perkembangan dari proyek yang dikerjakan

serta rencana pengerjaan selama 24 jam kedepan.

• Sprint review meeting

Sprint review meeting merupakan rapat

peninjauan aktivitas penyelesian sprint yang berakhir.

Tim Scrum serta stakeholder berkolaborasi membahas

pengerjaan apa saja yang telah di dikerjakan. Serta

mempersiapkan pekerjaan untuk sprint berikutnya

sehingga dapat mengoptimalkan nilai product.

• Sprint Retrospective meeting

Sprint Retrospective merupakan sebuah

kesempatan bagi Tim Scrum untuk meninjau dirinya

sendiri dan membuat perencanaan mengenai

peningkatan yang akan dilakukan di Sprint berikutnya.

Sprint Retrospective dilangsungkan setelah Sprint

Review selesai dan sebelum Sprint Planning

berikutnya. Ini adalah acara dengan batasan waktu

maksimum selama tiga jam untuk Sprint yang

berdurasi satu bulan. Untuk Sprint yang lebih pendek,

batasan waktunya biasanya lebih singkat.

Page 32: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

38

Gambar 2.21 Scrum Flow

Sumber: http://scrumreferencecard.com/scrum-

reference-card/

2.1.13.1 Tim Scrum

Tim Scrum terdiri dari Product Owner, Tim

Pengembang dan Scrum Master. Tim Scrum mengatur diri

mereka sendiri dan berfungsi antar-lintas. Tim Scrum

menghantarkan produk secara berkala dan bertahap untuk

memperbesar kesempatan mendapatkan masukan.

• Product Owner

Product Owner merupakan satu-satunya orang

yang bertanggung-jawab untuk mengelola Product

Backlog. Peran dari Product Owner antara lain:

Sprint Planning Meeting

Daily Scrum

Sprint Review Meeting

Sprint Retrospective

Meeting

Backlog ReÞ nement

Meeting

Page 33: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

39

- Satu orang atau beberapa orang yang

bertanggung jawab untuk memaksimalkan Return

On Invesment (ROI) dari upaya pembuatan

produk.

- Bertanggung jawab untuk visi produk.

- Menerima atau menolak setiap penambahan

produk.

- Dapat memprioritaskan Product Backlog,

menyesuaikan harapan jangka panjang seperti

rencana rilis.

- Dapat berkontribusi sebagai anggota tim.

- Memiliki peran kepemimpinan.

• Scrum Master

Scrum Master bertanggung jawab untuk

memastikan Scrum telah dipahami dan dilaksanakan.

Scrum Master melakukannya dengan memastikan Tim

Scrum mengikuti teori, praktik, dan aturan main Scrum.

Scrum Master adalah seorang pemimpin yang melayani

Tim Scrum. Peran dari scrum master antara lain:

- Memfasilitasi proses Scrum.

- Membantu menyelesaikan hambatan.

- Menciptakan lingkungan yang kondusif untuk tim

- Memiliki peran kepemimpinan

• Tim Pengembang

Tim Pengembang terdiri dari para profesional

yang bekerja untuk menghasilkan suatu produk. Tim

Pengembang dibentuk dan didukung oleh organisasi

untuk mengatur dan mengelola pekerjaannya secara

mandiri. Karakteristik dari tim pengembang antara lain:

Page 34: BAB 2 TINJAUAN PUSTAKA - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2015-1-00839-IF Bab2001… · dengan menggunakan konsep Model-View–Controller (MVC) development

40

- Memiliki otonomi tentang bagaimana untuk

mencapai komitmen

- Terdiri dari ± 2 anggota.

- Memiliki peran kepemimpinan.

- Melakukan negosiasi komitmen dengan Product

Owner, satu sprint dalam satu waktu.