9

BAB 2

LANDASAN TEORI

2.1 Teori Umum

Teori umum merupakan landasan utama yang menjadi dasar penelitian.

Teori umum dipakai sebagai landasan yang digunakan dalam penelitian dan

pembuatan aplikasi.

2.1.1 Internet

Mengacu pada pendapat (Gunawan, 2010, p7) Internet berasal

dari kata interconnection networking yang mempunyai arti hubungan

berbagai computer dengan berbagai tipe yang membentuk sistem

jaringan yang mencakup seluruh dunia (jaringan computer global)

dengan melalui jalur telekomunikasi.

2.1.2 Delapan Aturan Emas untuk Perancangan Antarmuka

Menurut pendapat (Shneiderman et al., 2010) Delapan aturan

emas merupakan salah satu pedoman dalam merancang antarmuka

dari sebuah aplikasi. Berikut ini adalah aturan-aturan yang tertera

pada delapan aturan emas :

1. Konsistensi

Konsisten terhadap urutan tindakan dan rancangan antarmuka

sehingga pengguna dapat lebih mudah dan terbiasa menggunakan

aplikasi.

10

2. Kegunaan yang universal

Mengenal kebutuhan dari berbagai pengguna yang berbeda dan

mendesain konten yang dinamis sesuai kebutuhan. Memahami

perbedaan antara pemula dengan ahli, perbedaan usia, kondisi

pengguna, dan perbedaaan teknologi dalam melakukan desain.

3. Memberikan umpan balik yang informatif

Memberikan umpan balik kepada pengguna ketika melakukan aksi

misalnya memberikan kotak dialog peringatan dan suara ketika

terjadi kesalahan.

4. Memberikan dialog untuk penutupan

Urutan aksi harus terorganisir menjadi beberapa bagian seperti

bagian awal, bagian tengah dan bagian akhir. Dari bagian tersebut

seharusnya diberikan umpan balik sehingga pengguna dapat

mengetahui hasil dari aksi dan melanjutkan ke tahap berikutnya.

5. Adanya penanganan kesalahan

Sistem yang dibuat sebaiknya dapat mendeteksi kesalahan supaya

pengguna tidak melakukan kesalahan yang fatal dan memberikan

solusi untuk kesalahan tersebut.

6. Mudah kembali ke tindakan sebelumnya

Adanya fitur untuk membatalkan tindakan sebelumnya untuk

menghilangkan kekhawatiran pengguna ketika mengetahui adanya

kesalahan.

11

7. Mendukung pusat pengendalian internal

Pengguna ahli biasanya ingin menjadi pengontrol sistem bukan

sebaliknya. Sehingga sistem sebaiknya dirancang seakan-akan

pengguna adalah pihak memulai aksi bukan perespon.

8. Mengurangi beban ingatan jangka pendek

Pengguna memiliki keterbatasan kapasitas dalam memproses

informasi dan mengingatnya dalam jangka pendek sehingga

aplikasi yang dikembangkan sebaiknya tidak membuat pengguna

harus mengingat informasi layar-layar sebelumnya.

2.1.3 Unified Modeling Language (UML)

Menurut (Whitten dan Bentley, 2007), UML (Unified

Modeling Language) merupakan kumpulan konvensi pemodelan

untuk menggambarkan fungsi-fungsi yang disediakan oleh sistem

tersebut.

2.1.3.1 Class Diagram

Class diagram adalah sebuah diagram yang

menggambarkan tentang objek-objek bernama kelas yang

menyusun suatu sistem dan juga hubungan antar kelas-kelas

tersebut (Whitten & Bentley., 2007).

12

Gambar 2.1 Contoh Class Diagram

Terdapat tiga bagian pada suatu class, yakni :

1. Nama kelas

Nama kelas terdapat di bagian pertama class yang

merepresentasikan nama dari class tersebut.

2. Atribut kelas

Atribut kelas terdapat di bagian tengah class yang

merepresentasikan tipe data yang dimiliki.

3. Operasi

Operasi terdapat di bagian bawah class yang

merepresentasikan kegiatan-kegiatan yang akan dilakukan

oleh class tersebut.

13

Adapun notasi-notasi yang terdapat pada class diagram,

seperti :

1. Visibility

Visibility digunakan untuk menentukan apakah atribut atau

operasi dari sebuah kelas dapat digunakan oleh kelas yang

lain.

Tabel 2.1 Deskripsi Simbol Visibility

Visibility Simbol Deskripsi

Private - Hanya dapat hanya dapat digunakan

oleh kelas yang mendefinisikan

Protected # Dapat digunakan oleh kelas yang

mendefinisikannya dan turunan dari

kelas tersebut

Public + Dapat digunakan oleh semua kelas

yang berhubungan

2. Multiplicity

Multiplicity digunakan untuk menentukan banyaknya kelas

yang berhubungan dengan kelas yang dimaksud.

Tabel 2.2 Deskripsi Simbol Multiplicity

Multiplicity Deskripsi

0…1 Nol atau satu

1 Satu

14

0…* Nol atau lebih

1…* Satu atau lebih

3. Generalisasi

Generalisasi digunakan untuk merepresentasikan

inheritance dalam class diagram dengan menggambarkan

hubungannya melalui superclass dan subclass. Superclass

adalah bentuk umum dari sebuah subclass, dan subclass

adalah bentuk spesifik dari sebuah superclass. Subclass

memiliki semua properti yang dimiliki oleh superclass.

Gambar 2.2 Contoh Notasi Pada Class Diagram

15

4. Asosiasi

Asosiasi digunakan untuk menggambarkan adanya

hubungan antar kelas dengan memberikan keterangan

relasi dan multiplicity. Hubungan asosiasi dibedakan

menjadi dua jenis, yaitu:

a. Uni-directional

Hubungan Uni-directional merupakan hubungan

dimana dua kelas saling terhubung tetapi hanya salah

satu yang memiliki peran dalam hubungan tesebut.

b. Bi-directional

Hubungan Bi-directional merupakan hubungan

dimana dua kelas saling terhubung dan keduanya

memiliki peran dalam hubungan tesebut.

5. Agregasi

Agregasi digunakan untuk menggambarkan hubungan

dimana sebuah kelas merupakan bagian dari kelas lain,

tetapi bukan merepresentasikan inheritance.

6. Komposisi

Komposisi merupakan bentuk lain dari agregasi tetapi

hubungan antar kelas komposisi lebih erat dibandingkan

agregasi karena kelas A yang merupakan bagian dari kelas

B tidak akan ada jika kelas B tidak ada.

16

2.1.3.2 Use Case Diagram

Use case diagram adalah sebuah diagram yang

menggambarkan interaksi antara sistem dengan pengguna.

Jadi, use case diagram menggambarkan siapa yang akan

berinteraksi atau menggunakan sistem tersebut (Whitten &

Bentley., 2007).

Gambar 2.3 Contoh Use Case Diagram

Use case diagram dideskripsikan oleh use case

narrative yang menggambarkan bagaimana user berinteraksi

dengan untuk menyelesaikan pekerjaannya.

Tabel 2.3 Deskripsi Use Case Narrative

Elemen Keterangan

Nama use case Nama use case harus merepresentasikan

tujuan yang ingin dicapai oleh use case

tersebut dan diawali dengan kata kerja.

17

Aktor Aktor yang menjalankan use case.

Event yang

dijalankan

Langkah-langkah yang harus dilakukan

untuk menyelesaikan

Precondition Kondisi yang harus dipenuhi sebelum

menjalankan use case.

Postcondition Hasil yang dicapai setelah use case berhasil

dijalankan.

Hubungan-hubungan pada use case diagram:

a. Asosiasi

Asosiasi menggambarkan adanya interaksi antara use case

dengan aktor. Asosiasi digambarkan dengan simbol garis

yang bisa mempunyai anak panah atau tanpa anak panah.

Asosiasi dengan anak panah yang berasal dari aktor

menunjuk ke use case menandakan bahwa aktor inisiator

use case tersebut. Asosiasi tanpa anak panah menandakan

interaksi antara use case dengan aktor penerima.

18

Gambar 2.4 Contoh Asosiasi pada Use Case Diagram

b. Extends

Extends digunakan ketika fungsi use case terdiri dari

beberapa tahap yang sulit sehingga mudah dimengerti.

Extends akan menghasilkan use case baru yang mewakili

fungsi dari use case awal.

Gambar 2.5 Contoh Extends pada Use Case Diagram

19

c. Includes/uses

Includes digunakan ketika use case melakukan beberapa

langkah yang sama yang menjadi sebuah entitas baru

dengan sebutan use case abstrak sehingga mengurangi

redundansi dalam use case diagram.

Gambar 2.6 Contoh Includes pada Use Case Diagram

20

d. Depends on

Depends On digunakan untuk menggambarkan hubungan

use case dimana suatu use case tidak dapat dilakukan

apabila use case yang lain belum dilakukan.

Gambar 2.7 Contoh Depends on pada Use Case Diagram

21

e. Inheritance

Inheritance digunakan untuk menggambarkan hubungan

dua atau lebih aktor dalam satu sistem dengan sebuah aktor

abstrak untuk menyederhanakan diagram karena aktor

abstrak memiliki langkah yang dimiliki aktor lain.

Gambar 2.8 Contoh Inheritance Pada Use Case Diagram

22

2.1.3.3 Sequence Diagram

Sequence diagram menggambarkan model logika dari

sebuah use case dengan pesan yang dikirimkan antar objek

dalam waktu tertentu (Whitten & Bentley., 2007).

Gambar 2.9 Contoh Sequence Diagram

23

Berikut elemen-elemen pada sequence diagram :

1. Aktor

Aktor merupakan simbol yang digunakan untuk mewakili

pengguna dalam berinteraksi dengan objek kelas interface.

2. Objek

Objek merupakan simbol yang digunakan untuk mewakili

kelas-kelas pada class diagram.

3. Aktivasi

Aktivasi merupakan simbol yang digunakan untuk

menggambarkan lamanya waktu dari objek saat digunakan.

4. Pesan

Pesan merupakan simbol yang digunakan untuk

menyampaikan method dari setiap objek yang ada.

5. Self-call

Self-call merupakan simbol yang digunakan untuk

menunjukkan bahwa sebuah objek mengirimkan pesan

kepada objek itu sendiri.

6. Return

Return merupakan simbol yang digunakan untuk

menandakan respon dari pesan yang disampaikan oleh

suatu objek.

24

7. Frame

Frame merupakan simbol yang digunakan untuk

menandakan area yang mengalami perulangan, seleksi,

atau ketentuan.

2.1.3.4 Activity Diagram

Activity diagram merupakan gambaran mengenai alur

sebuah proses bisnis, langkah dalam sebuah use case, dan

logika sebuah tindakan objek (Whitten & Bentley, 2007).

Gambar 2.10 Contoh Activity Diagram

Elemen-elemen pada activity diagram:

1. Initial node

Initial node merupakan simbol yang merepresentasikan

mulainya

25

2. Action

Action merupakan simbol yang merepresentasikan suatu

aktivitas yang digambarkan sesuai urutan actions.

3. Flow

Flow merupakan simbol yang merepresentasikan jalur dari

satu aktivitas ke aktivitas lain

4. Decision/Merge

Decision/Merge merupakan simbol yang

merepresentasikan keadaan kondisional. Decision

mengindikasikan kondisi untuk memilih salah satu alur

aktivitas sedangkan merge mengindikasikan bergabungnya

alur aktivitas yang dipisahkan oleh decision sebelumnya.

5. Fork/ Join

Fork merupakan simbol yang mengindikasikan adanya dua

atau lebih actions yang berlangsung secara bersamaan

sedangkan join mengindikasikan berakhirnya sebuah

proses paralel.

6. Activity final

Activity final merupakan simbol yang merepresentasikan

akhir sebuah proses.

26

2.1.4 World Wide Web (WWW)

Berdasarkan pendapat (McLeod, 2004, p4) World Wide Web

atau WWW mendefinisikan informasi yang diakses melalui internet

dimana dokumen hypermedia disimpan dan dapat diambil dengan

skema pengalaman yang unik. Internet menyediakan arsitektur

jaringan pada web menyediakan metode untuk penyimpanan dan

pengambilan dokumen.

1. Website

Sebuah computer yang terhubung dengan internet yang

mengangung hypermedia yang dapat di akses oleh computer lain

dalam jaringan dengan penghubung hypertext.

2. Hypertext link

Sebuah penunjuk dari teks atau grafis yang digunakan untuk

mengakses hypertext yang tersimpan oleh Website lain.

3. Web Page

Sebuah file hypermedia yang tersimpan dengan alamat Website

yang unik.

4. Home Page

Halaman pertama pada sebuah Website. Halaman lain dapat

diakses melalui Home Page.

27

5. Browser

Perangkat lunak yang dirancang untuk menemukan dan membaca

file pada internet yang dituliskan dalam Hyper Text Markup

Language (HTML).

6. URL (Uniform Resource Locator)

Mengacu pada alamat dari sebuah website.

7. Protocol

Sebuah aturan standar yang memerintahkan komunikasi data.

HTTP adalah protocol untuk hypertext. Protocol lain pada web

adalah FTP (File Transfer Protocol).

8. Domain Name

Alamat dari Website dimana web page disimpan.

2.1.5 Software Engineering

Menurut (Roger S. Pressman , 2009, p5) adalah penggunaan

dan pembentukan dalam prinsip – prinsip rekayasa suara dimana yang

berfungsi untuk mendapatkan suatu software yang ekonomis sehingga

dapat bekerja secara efisien pada mesin nyata.

28

2.1.6 JavaScript

Menurut (Abdul Kadir, 2011, p13, p15) JavaScript adalah

kode untuk menyusun halaman web yang memungkinkan di jalankan

di sisi pengguna. Karena dijalankan di sisi pengguna, maka JavaScript

dapat digunakan untuk membuat tampilan lebih bersifat dinamis.

Menampilkan jam lokal secara terus – menerus, melakukan

perhitungan terhadap data dalam formulir, mengubah – ubah warna

pada baris tertentu dalam suatu tabel dapat dikerjakan dengan

menggunakan JavaScript.

Contoh tag JavaScript :

Gambar 2.11 Script JavaScript

(Abdul Kadir, 2011, p13, p15)

29

2.1.7 Waterfall Model

Menurut (Pressman, 2010, p39) Waterfall Model disebut juga

dengan Classic Life Cycle, menyediakan sebuah pendekatan

sistematik dan sekuensial pada pengembangan software yang dimulai

dengan spesifikasi kebutuhan customer dan berlangsung melalui

planning, modeling, construction, deployment, dan terakhir ongoing

support pada software yang telah jadi.

Gambar 2.12 Model Proses Waterfall

(S.Pressman, 2010:39)

2.1.7.1 Communication

Dalam tahap ini terdiri dari dua, yaitu Project Initiation

dan Requirements Gathering. Requirements Gathering yang

dilakukan harus secara intensif dan difokuskan kepada

software.

30

2.1.7.2 Planning

Setelah Communication, maka akan masuk ke tahap

berikutnya yaitu Planning. Terdiri dari tiga, yaitu Estimating,

Scheduling, Tracking. Pada tahap ini software engineer

melakukan penjadwalan untuk menyelesaikan tahap – tahap

pembuatan software berdasarkan waktu yang telah

dijadwalkan.

2.1.7.3 Modeling

Setelah Planning, maka akan masuk ke tahap

berikutnya yaitu Modeling. Terdiri dari 2, yaitu Analysis dan

Design. Pada tahap Design akan focus pada empat atribut

program yaitu Data Structure, Software Architecture, Interface

Representation, and Algorithm Detail. Pada tahap ini

mengubah requirements menjadi software representation

sebelum penulisan code dimulai.

2.1.7.4 Construction

Setelah Modeling, maka akan masuk ke tahap

berikutnya yaitu Construction. Terdiri dari 2, yaitu Code dan

Test. Pada tahap ini Design akan diubah ke dalam bentuk

bahasa yang dimengerti oleh mesin. Setelah penulisan code

sudah selesai, maka program tersebut akan diuji. Pengujian ini

dilakukan agar segala bentuk kesalahan dapat dibetulkan dan

31

juga agar input yang dimasukkan dapat menghasilkan keluaran

yang sesuai.

2.1.7.5 Deployment

Setelah Construction, maka akan masuk ke tahap

berikutnya, yaitu Deployment. Terdiri dari tiga, yaitu Delivery,

Support, Feedback. Pada tahap ini Software Engineer

menyediakan dokumentasi untuk semua fitur dan fungsi yang

ada dalam program yang sudah dibuat sehingga memudahkan

user dalam menggunakan program tersebut. Dan juga

Software Engineer mendapat umpan balik dari user terhadap

software yang dibuat untuk perbaikan yang lebih baik dengan

modifikasi fungsi dan fiturnya.

2.1.8 Designing Relational Database

Menurut (Satzinger, Jackson & Burd, 2005, p409) Designing

Relational Database merupakan perancangan basis data relasional

(Database Relational) dari sebuah class diagram. Terdapat beberapa

langkah dalam merubah sebuah class diagram menjadi Relational

Database.

2.1.8.1 Membuat tabel untuk setiap class.

Merupakan langkah pertama dalam membuat database

relasional, dengan membuat tabel untuk setiap class pada

class diagram. Nama atribut dari tabel akan disamakan

32

dengan yang sudah didefinisikan dalam class diagram. Untuk

mencegah kebingungan, nama tabel dan nama atribut

disamakan dengan class diagram dan kamus data.

2.1.8.2 Memilih primary key untuk setiap class.

Primary key untuk setiap tabel. Bila dalam sebuat

tabel sudah ada sebuat atribut yang unik, maka atribut tersebut

dapat dipilih sebagai primary key.

2.1.8.3 Tambahkan foreign key menunjukan hubungan one-to-one

Setiap foreign key menunjukkan hubungan antar tabel

yang memiliki foreign key dengan tabel yang menggunakan

key yang sama sebagai primary key. Saat menunjukkan

hubungan one-to-one, foreign key tidak menjadi bagian dari

primary key dari table tersebut.

2.1.8.4 Buat tabel baru untuk menunjukan many-to-many.

Bila terdapat suatu hubungan many-to-many antar

tabel, maka tabel tersebut harus dipisahkan menjadi beberapa

tabel dan memiliki lebih darisatu primary key.

2.1.8.5 Mempresentasikan hirarki dari class.

Hirarki dari class ditunjukkan dengan hubungan parent

class dengan child class, dimana parent class menurunkan

beberapa atau seluruh atribut dan method ke child class. Ada

dua (2) cara untuk merepresentasikannya:

33

1. Mengkombinasikan seluruh tabel ke dalam sebuah tabel

yang memiliki seluruh atribut dari semua child class.

2. Menggunakan beberapa tabel untuk merepresentasikan

child class dengan menggunakan primary key dari parent

class sebagai primary key dari child class.

2.1.8.6 Mendefinisikan batasan referensi integritas.

Di atas sudah dijelaskan mengenai bagaimana foreign

key digunakan untuk merepresentasikan suatu hubungan antar

tabel. Pada bagian ini, dijelaskan sebuah hubungan konsisten

antara nilai foreign key dengan primary key. Setiap foreign key

mereferensikan sebuah primary key dari tabel lain. Namun

pada suatu kondisi tertentu, terdapat sebuah nilai foreign key

yang muncul di suatu tabel dan juga berperan sebagai primary

key pada tabel yang bersangkutan, yang biasa disebut

referencial integrity constraint.

2.1.8.7 Mengevaluasi kualitas skema dan membuat perbaikan bila

diperlukan.

Setelah pembuatan sekumpulan tabel, desainer

database harus meninjau kualitas skema yang telah dibuat.

Sebuah data model yang memiliki kualitas yang bagus harus

mempunyai beberapa fitur seperti:

1. Keunikan suatu set baris pada tabel dan primary key.

2. Data tidak redundan.

34

3. Kemudahan dalam modifikasi model data di masa yang

akan datang.

2.1.8.8 Memilih tipe data yang sesuai dan batasan nilai untuk

setiap kolom bila diperlukan.

Pada tahap akhir, setiap atribut yang ditulis ke dalam

database relasional, diberi tipe data yang sesuai dan batasan-

batasan yang diperlukan untuk setiap atribut.

2.1.9 Rancangan Layar (Storyboard)

Menurut (Dastbaz, 2003, p165), Storyboard adalah sebuah

cara untuk merancang sebuah sistem multimedia dengan menggambar

semua unsur dan elemen yang akan dibuat dan berisi informasi

mengenai sketsa yang akan diimplementasi. Storyboard harus

memberikan informasi mengenai elemen yang digunakan dalam

multimedia, dalam memilih media sebaiknya harus berhati – hati

karena untuk menunjukan kenyamanan dalam melakukan presentasi.

Storyboard digunakan agar diharapkan mendapatkan feedback dari

rancangan yang akan dibuat, sehingga semua ide dan masukan dapat

terlaksana dengan baik.

35

2.2 Teori Khusus

Teori khusus merupakan teori yang berhubungan dengan topik yang

dibahas dalam penelitian ini. Teori ini menjadi pendukung dalam penyusunan

penelitian.

2.2.1 PHP (Hypertext Preprocessor)

Menurut (Kadir 2008,p11) PHP merupakan sebuah sebuah

bahasa pemrograman berbasis web berbentuk script yang ditempatkan

dan di proses dalam server. PHP merupakan bahasa pemrograman

yang bersumber dari perl merupakan pengembangan dari bahsa C.

oleh karena itu, struktur pemrograman sama dengan yang ada di C.

PHP mempunyai banyak keunggulan dibandingkan dengan

bahasa pemrograman berbasis web yang lain. Seperti open source

software . PHP mampu berintegrasi dengan berbagai macam jenis

database. Database yang paling umum digunakan dalam PHP adalah

MySQL.

2.2.2 MySQL

Menurut (Welling dan Thompson , 2008, p3-4) MySQL

berarti sebuah sistem manajemen hubungan antar basis data yang

sangat cepat dan sempurna. MySQL merupakan alat bantu untuk

manipulasi basis data, sehingga basis data dapat dengan mudah diisi,

diambil, disusun, dan diubah datanya. Server MySQL pun dapat

36

mengatur kontrol akses dari data, sehingga beberapa pengguna dapat

sekaligus bekerja pada waktu yang bersamaan.

Beberapa kelebihan MySQL, dibandingkan dengan sistem

basis data sejenis seperti Microsoft SQL Server, Oracle :

1. Kemampuan tinggi.

2. Tidak membutuhkan biaya untuk mendapatkan MySQL.

3. Mudah untuk konfigurasi dan dipelajari.

4. Dapat dijalankan pada beberapa sistem operasi seperti sistem Unix

dan Microsoft Windows.

2.2.3 XAMPP

Menurut pendapat (Betha Sidik, 2012, p72-73) XAMPP

(X(Windows/Linux) Apache MySQL PHP dan Perl) merupakan paket

server web PHP dan database MySQL yang paling populer di

kalangan pengembang web dengan menggunakan PHP dan MySQL

sebagai database-nya.

Paket XAMPP, sesuai dengan kepanjangannya, X yang berarti

Windows atau Linux, pengguna bisa memilih paket yang diinginkan

untuk Windows atau Linux.

XAMPP termasuk paket server yang paling mudah digunakan

sebagai paket untuk pengembangan aplikasi web. XAMPP termasuk

juga paket yang paling bagus update-nya, sehingga paling baik dipilih

untuk digunakan oleh development atau pun untuk produksi. XAMPP

37

dapat diperoleh dari http://xampp.org atau http://apachefriends.org.

XAMPP memiliki paket yang bisa diunduh dalam bentuk :

• Installer

• File ZIP

• USB

Paket dalam bentuk USB disediakan oleh XAMPP agar

pengembang dapat membawa-bawa paket ini dengan dipasang di USB

agar pengembang dapat dengan mudah melakukan pengembangan di

komputer mana pun.