bab 2 tinjauan referensi...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2....

48
BAB 2 TINJAUAN REFERENSI 2.1. Event Management 2.1.1. Pengertian Event Management Menurut Goldblatt (Goldblatt, 2013, p. 12), event management adalah kegiatan profesional mengumpulkan dan mempertemukan sekelompok orang untuk tujuan perayaan, pendidikan, pemasaran, dan reuni, serta bertanggung jawab mengadakan riset, membuat desain kegiatan, dan melakukan perencanaan dan melaksanakan koordinasi serta evaluasi untuk merealisasikan kehadiran sebuah kegiatan. Event Management juga dapat didefinisikan sebagai sebuah kegiatan yang diorganisasi dengan baik dan dikelola secara profesional, sistematis, efisien, dan juga efektif. Jadi agar sebuah event dapat berjalan dengan baik dan sukses maka diperlukan persiapan yang matang dari semua orang yang terlibat dalam event tersebut. Semua orang yang terlibat harus memiliki visi yang sama dan bekerja keras agar event yang direncanakan dan dikelola dapat berjalan sesuai dengan harapan. Kekompakan dan kerja sama merupakan kunci utama yang harus dimiliki oleh semua orang yang terlibat dalam tim. Untuk bisa menghasilkan sebuah event yang dapat berjala dengan lancar, efektif, dan efisien tentu tidaklah mudah dan diperlukan persiapan yang sangat matang dari jauh-jauh hari sebelum event tersebut dilaksanakan mulai dari saat merencanakan konsep event hingga saat hari pelaksanaan event. Terdapat lima tahap yang harus dilakukan untuk menghasilkan special event yang efektif dan efisien menurut (Goldblatt, 2013, p. 45) yaitu riset, desain, perencanaan, koordinasi, dan evaluasi. Selain itu event management juga 11

Upload: others

Post on 05-Dec-2020

12 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

BAB 2

TINJAUAN REFERENSI

2.1. Event Management

2.1.1. Pengertian Event Management

Menurut Goldblatt (Goldblatt, 2013, p. 12), event

management adalah kegiatan profesional mengumpulkan dan

mempertemukan sekelompok orang untuk tujuan perayaan,

pendidikan, pemasaran, dan reuni, serta bertanggung jawab

mengadakan riset, membuat desain kegiatan, dan melakukan

perencanaan dan melaksanakan koordinasi serta evaluasi

untuk merealisasikan kehadiran sebuah kegiatan. Event

Management juga dapat didefinisikan sebagai sebuah kegiatan

yang diorganisasi dengan baik dan dikelola secara profesional,

sistematis, efisien, dan juga efektif. Jadi agar sebuah event

dapat berjalan dengan baik dan sukses maka diperlukan

persiapan yang matang dari semua orang yang terlibat dalam

event tersebut. Semua orang yang terlibat harus memiliki visi

yang sama dan bekerja keras agar event yang direncanakan

dan dikelola dapat berjalan sesuai dengan harapan.

Kekompakan dan kerja sama merupakan kunci utama yang

harus dimiliki oleh semua orang yang terlibat dalam tim.

Untuk bisa menghasilkan sebuah event yang dapat

berjala dengan lancar, efektif, dan efisien tentu tidaklah mudah

dan diperlukan persiapan yang sangat matang dari jauh-jauh

hari sebelum event tersebut dilaksanakan mulai dari saat

merencanakan konsep event hingga saat hari pelaksanaan

event. Terdapat lima tahap yang harus dilakukan untuk

menghasilkan special event yang efektif dan efisien menurut

(Goldblatt, 2013, p. 45) yaitu riset, desain, perencanaan,

koordinasi, dan evaluasi. Selain itu event management juga

11

Page 2: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

12

bisa dikategorikan sebagai sebuah sarana komunikasi dan

pemasaran sama seperti dengan periklanan dan promosi

(Kusuma, 2016, p. 3). Oleh karena itu event management juga

bisa dijadikan sarana untuk berbisnis.

2.1.2. Event Organizer

Pada pelaksanaannya ada banyak sekali istilah yang

sering digunakan untuk penyebutan di dalam event

management yaitu (Kusuma, 2016, p. 4):

1. Event Organizer (EO)

2. Production House (PH) atau rumah produksi

3. Communication

4. Agency/biro jasa

5. Panitia Pelaksana

6. Organizing Committee

Event Organizer atau biasa disebut EO berasal dari dua

kata dalam Bahasa Inggris, yaitu event dan organizer. Kata

event memiliki arti sebuah kejadian atau peristiwa (Oxford

Universities Press, 2019). Sedangkan kata organizer memiliki

arti mengadakan, mengatur, dan mengorganisir (Oxford

Universities Press, 2019). Maka event organizer dapat

diartikan sebagai pihak yang mengatur sebuah acara, atau

untuk lebih lengkapnya dapat diartikan sebagai usaha yang

bergerak dibidang jasa yang secara resmi dipilih atau ditunjuk

oleh klien atau pihak yang ingin pengadaan acara untuk

mengorganisir segala rangkaian acara yang bersangkutan

mulai dari sisi kreatif, persiapan acara, pelaksanaan acara

hingga acara selesai yang bertujuan untuk menyukseskan dan

mewujudkan tujuan acara yang diharapkan oleh klien.

Event Organizer memegang peranan yang sangat

penting dalam suksesnya sebuah event. Berikut adalah peran-

peran yang dimiliki oleh event organizer (Kusuma, 2016, p.

9):

Page 3: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

13

1. Membantu mewujudkan tujuan atau harapan dari klien.

2. Merangkai seluruh kerangka event mulai dari proses

pembuatan konsep event, persiapan tempat event, perizinan

tempat dilaksanakannya event, perlengkapan pendukung,

artis dan talent yang mengisi event tersebut, dokumentasi,

hingga seluruh jalannya acara atau biasa disebut dengan

rundown.

2.2. E-Marketplace

2.2.1. Pengertian E-marketplace

Pada zaman yang sudah modern ini segala hal dapat

dilakukan secara daring tidak terkecuali membeli barang

secara daring atau belanja secara daring. Belanja secara online

dapat dilakukan melalui sebuah wadah yang bernama E-

marketplace. E-marketplace merupakan media daring yang

berbasis internet (web based) yang berfungsi sebagai wadah

melakukan kegiatan bisnis dan transaksi antara penjual dan

pembeli. Di sini pembeli dapat mencari supplier sebanyak

mungkin sesuai dengan kriteria yang diinginkan oleh pembeli

sampai pembeli menemukan harga pasar dan puas dengan

harga yang didapatnya. Sedangkan untuk penjual atau supplier

mereka dapat mengetahui perusahaan atau lembaga apa saja

yang sedang membutuhkan produk atau jasa yang mereka

tawarkan atau jual.

Menurut Brunn, Jensen, dan Skovgaard, e-marketplace

dapat didefinisikan sebagai sebuah wadah komunikasi bisnis

yang bersifat interaktif secara elektronik yang menyediakan

pasar di mana perusahaan dapat mengambil bagian dalam B2B

(business to business) dalam perdagangan elektronik atau

kegiatan e-business lainnya (Brunn, Jensen, & Skovgaard,

2014). Dari berbagai definisi yang didapatkan maka dapat

disimpulkan bahwa e-marketplace adalah sebuah wadah

komunikasi bisnis interaktif baik secara elektronik dan aplikasi

Page 4: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

14

yang didalamnya terdapat pasar yang berisi perencanaan dan

pelaksanaan konsepsi, distribusi, penetapan harga baik berupa

barang atau jasa yang bertujuan untuk memuaskan atau

memenuhi kebutuhan individu atau sebuah organisasi tertentu.

2.2.2. Komponen e-marketplace

Menurut Rany, Aliffida, dan Putri ada dua komponen

yang dimiliki oleh e-marketplace (Pebrian, Kholifanti, &

Kiansih, 2018):

1. Penjual

Penjual terdiri dari tiga bagian yaitu front end, back end,

dan intermediaries.

2. Front End

Merupakan bagian dari penjual yang berkomunikasi

langsung dengan calon pembeli. Contohnya seorang

admin toko online.

3. Back End

Merupakan bagian dari penjual yang berada di balik

layar dan bertugas untuk mengurus hal-hal seperti

logistic, pengemasan produk, dan pengiriman produk.

4. Intermediaries

Merupakan pihak ketiga yang mendukung kegiatan

penjualan.

5. Pembeli

Merupakan pembeli produk berupa barang atau jasa. Di

e-marketplace produk yang dibeli bisa dalam bentuk

digital.

2.2.3. Keuntungan e-marketplace

Berjualan dan berbelanja di e-marketplace memiliki

keuntungan baik dari segi penjual maupun dari segi pembeli

yaitu:

Page 5: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

15

2.2.3.1. Keuntungan Pembeli

1. Mudah untuk mencari dan membandingkan produk

yang diinginkan, lengkap beserta informasi dari sisi

kualitas dan harga dari beberapa supplier.

2. Pembeli bisa mendapatkan harga yang paling baik.

3. Mengurangi biaya pengadaan barang.

2.2.3.2. Keuntungan Penjual

1. Mudah mencari pembeli baru.

2. Memperluas jangkauan pasar.

3. Dapat mempermudah promosi produk.

4. Dapat digunakan oleh semua kalangan baik industri

kecil hingga besar.

5. Mudah untuk melakukan pemantauan dan

menganalisis supply dan demand dari pasar.

2.3. Web Application

Salah satu sumber daya internet yang paling berkembang dan

banyak digunakan adalah web. Cara pendistribusian informasi web

dilakukan dengan pendekatan hyperlink di mana suatu teks, gambar,

ataupun objek menjadi sebuah acuan untuk membuka halaman-

halaman yang lain. Dengan pendekatan seperti ini maka pengguna

web dapat memperoleh informasi dengan cara menjelajah dari satu

halaman ke halaman yang lainnya (Kadir, 2014, p. 305).

Aplikasi web merupakan aplikasi yang dapat diakses melalui

jaringan dan dikembangkan dengan bahasa pemrograman yang

didukung oleh web browser, seperti HTML dan JavaScript. Eksekusi

dari sebuah aplikasi web sangat bergantung pada kemampuan web

browser dan kemampuan jaringan. Pada zaman yang sudah sangat

modern ini penerapan dari aplikasi web amatlah diperlukan khususnya

dalam bidang yang membutuhkan banyak interaksi antar jaringan.

Page 6: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

16

Terlebih lagi jika kedua pihak sangat sulit atau mengalami kesulitan

untuk bisa bertemu secara langsung atau tatap muka dikarenakan oleh

keterbatasan jarak dan waktu. Di sini aplikasi web dapat menjadi

perantara bagi kedua pihak untuk dapat berkomunikasi dan saling

bertukar informasi penting secara cepat tanpa mengharuskan kedua

pihak untuk bertemu secara langsung (Al-Fedaghi, 2011, p. 57).

Salah satu keunggulan dari aplikasi berbasis web adalah

aplikasi tersebut relatif ringan dan dapat diakses dengan cepat melalui

browser melalui koneksi internet atau intranet ke sebuah server.

Maksudnya adalah pengguna dapat mengakses data atau informasi

yang diinginkan melalui laptop, smartphone, atau alat elektronik

lainnya yang memiliki browser dan dapat terkoneksi ke internet

dengan sangat mudah dan tidak perlu untuk melakukan instalasi

perangkat lunak atau aplikasi. Karena keuntungan dan kemudahan

yang diberikan oleh aplikasi berbasis web maka aplikasi berbasis web

telah banyak diadopsi oleh perusahaan sebagai bagian dari strategi

teknologi informasinya dikarenakan oleh beberapa alasan:

1. Akses informasi yang relatif mudah.

2. Setup server lebih mudah.

3. Informasi mudah untuk didistribusikan.

4. Informasi dapat disajikan oleh web browser pada semua sistem

operasi karena adanya standar dokumen berbagai tipe data.

2.4. Mobile Application

Menurut (Fernandes & Ferreira, 2016, p. 90) mobile

application adalah salah satu jenis dari aplikasi perangkat lunak yang

dikembangkan secara khusus untuk perangkat mobile, dengan harapan

mudah dibawa, digenggam, dan digunakan. Biasanya aplikasi yang

dirancang untuk perangkat mobile memiliki pengaturan dan

konfigurasi yang berbeda dengan aplikasi yang biasa dijalankan di

komputer. Aplikasi mobile cenderung memiliki mekanisme antarmuka

yang unik dan hanya tersedia di platform mobile.

Page 7: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

17

Mobile application itu mudah dibangun, mudah digunakan,

murah, dapat diunduh dan dijalankan di sebagian besar telepon seluler

baik yang mahal maupun yang entry level. Mobile application

memiliki kegunaan yang luas seperti untuk panggilan, pengolahan

pesan, browsing, obrolan, komunikasi jaringan sosial, mendengarkan

musik, menonton video, sampai bermain game. Dalam sejumlah besar

ponsel, beberapa aplikasi bersifat pre-installed dan pengguna dapat

mengunduh dan menginstalasi aplikasi lain dari internet

2.5. Unified Modelling Language (UML)

Unified Modelling Language (UML) adalah seperangkat

model konstruksi dan notasi yang dibentuk dalam pengembangan

sistem yang berorientasi kepada objek (Satzinger, Jackson, & Burd,

Systems Analysis And Design In A Changing World, 2012, p. 46).

UML pertama kali di populerkan oleh Grady Booch dan James

Rumbaugh pada tahun 1994 untuk mengombinasikan dua metodologi

terkenal yaitu Booch dan OMT, kemudian Ivar Jacobson, yang

menciptakan Object Oriented Software Engineering (OOSE) ikut

bergabung. Standar UML dikelolah oleh Object Management Group

(OMG) (Mulyani, 2017). Beberapa contoh UML yang paling banyak

digunakan diantaranya adalah Use case diagram, Class diagram,

Sequence diagram, Communication diagram, dan State machine

diagram.

2.5.1. Use Case Diagram

Use Case adalah sebuah aktivitas yang dilakukan oleh

sistem yaitu berupa respon terhadap permintaan pengguna juga

hubungan antara aktor-aktor pengguna di dalam sistem.

Sedangkan use case diagram adalah sebuah model yang

digunakan untuk menunjukan sebuah use case dan

hubungannya dengan user secara grafis (Satzinger, Jackson, &

Burd, Systems Analysis And Design In A Changing World,

2012, p. 78).

Page 8: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

18

Gambar 2.1 Use Case Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis And

Design In A Changing World, 2012, p. 81)

Penjelasan notasi gambar yang digunakan di dalam use

case diagram:

1. Actor

Actor digambarkan dengan figur stik yang

melambangkan orang yang menggunakan sistem.

Gambar 2.2 Actor – Use Case Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 81)

2. Use Case

Use Case merupakan aktivitas yang dilakukan

oleh sistem yang berfungsi untuk memberi tanggapan

terhadap sebuah permintaan oleh user.

Page 9: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

19

Gambar 2.3 Use Case – Use Case Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 81)

3. Relationship

Relationship merupakan sebuah hubungan yang

ada di dalam use case. Ada 3 jenis relationship yaitu

association, <<includes>> relationship, dan

<<extend>> relationship.

Gambar 2.4 Garis Association – Use Case Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 81)

Garis Association berfungsi untuk

menghubungkan use case dengan actor.

Gambar 2.5 <<includes>> relationship – Use Case

Diagram

Page 10: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

20

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 84)

<<includes>> relationship adalah hubungan

antara use case di mana sebuah use case berada di

dalam use case lainnya.

4. Automation Boundary

Automation Boundary berfungsi sebagai batas

antara aplikasi yang terkomputasi dan pengguna

aplikasi. Biasa dilambangkan dengan garis kotak yang

memiliki use case di dalamnya.

Gambar 2.6 Automation Boundary – Use Case

Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 84)

5. Generalization

Generalization atau generalisasi pada use case

menggambarkan hubungan antara use case yang

bersifat umum ke yang lebih spesifik.

Page 11: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

21

Gambar 2.7 Generalization – Use Case Diagram

Sumber (Satzinger, Jackson, & Burd, System Analysis

and Design with the Unified Process. USA: Course

Technology, Cengage Learning., 2010, p. 242)

2.5.2. Class Diagram

Class diagram adalah sebuah diagram yang berisi class

dan hubungan atau asosiasinya dengan class yang lainnya

(Satzinger, Jackson, & Burd, Systems Analysis And Design In

A Changing World, 2012, p. 101).

Gambar 2.8 Class Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 243)

Berikut adalah beberapa notasi yang biasa digunakan

di dalam class diagram:

1. Class Name

Page 12: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

22

Customer adalah nama dari sebuah class. Letak

nama dari suatu class berada pada baris paling atas di

sebuah class diagram.

Gambar 2.9 Class Name – Class diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 243)

2. Attributes

Attributes merupakan sebuah potongan

informasi deskriptif mengenai suatu objek atau benda.

Letak attributes berada pada baris kedua di sebuah

class diagram, dan di bawah nama class.

Gambar 2.10 Attributes – Class Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 243)

3. Method

Method merupakan sebuah operasi yang dapat

dilakukan oleh suatu class. Letak penulisan method di

bagian attributes atau pada baris ketiga.

Page 13: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

23

Gambar 2.11 Method – Class Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 243)

4. Generalization/Specialization Relationship

Generalization/Specialization merupakan

hubungan hierarki di mana class yang berada di

bawahnya merupakan bagian dari objek class yang

berada di atasnya.

Gambar 2.12 Garis Generalization/Specialization –

Class Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 243)

5. Multiplicity

Multiplicity merupakan sebuah ukuran angka

yang menghubungkan satu objek dengan objek lainnya

dalam sebuah asosiasi. Zero or One dapat

dilambangkan dengan “0..1” yang memiliki arti boleh

tidak ada instance sama sekali atau hanya satu instance

saja. Zero or More dapat dilambangkan dengan “0..*”

yang memiliki arti boleh tidak ada instance sama sekali

atau instance boleh lebih dari satu. One and Only dapat

dilambangkan “1” atau “1..1” yang memiliki arti hanya

boleh memiliki satu instance. One or More dapat

dilambangkan dengan “1..*” yang artinya minimal

harus terdapat satu instance atau bisa lebih dari satu.

Page 14: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

24

Gambar 2.13 Multiplicity – Class Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 102)

2.5.3. Use Case Description

Use case description merupakan penjelasan secara

rinci mengenai proses dari sebuah use case atau bisa juga

disebut sebagai daftar kasus penggunaan diagram use case

yang memberikan gambaran dari semua penggunaan kasus

untuk sebuah sistem. Informasi rinci mengenai setiap kasus

penggunaan dilambangkan dengan menggunakan deskripsi

sebuah kasus (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 121).

Page 15: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

25

Gambar 2.14 Contoh Use Case Description

Sumber (Satzinger, Jackson, & Burd, Systems Analysis And

Design In A Changing World, 2012, p. 123)

Berikut ini penjelasan mengenai komponen yang

terdapat pada use case description.

1. Use case name & scenario

Komponen ini berfungsi untuk

mengidentifikasi use case dan skenario-skenario yang

terjadi di dalam use case yang sedang didokumentasi.

2. Trigering Events

Komponen ini berfungsi untuk

mengidentifikasi event yang memicu terjadinya suatu

use case.

3. Brief Description

Page 16: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

26

Komponen ini berfungsi untuk menjelaskan

deskripsi singkat tentang sebuah use case atau

skenario.

4. Actors

Komponen ini berfungsi untuk mengidentifikasi actor.

5. Related Use Case

Komponen ini berfungsi untuk

mengidentifikasi use case lain yang berkaitan.

6. Stakeholders

Komponen ini berfungsi untuk menjelaskan

stakeholder yang tertarik.

7. Preconditions

Komponen ini berfungsi untuk

mengidentifikasi kondisi awal sebuah sistem harus

seperti apa agar sebuah use case dapat dimulai.

8. Postconditions

Komponen ini berfungsi untuk kondisi akhir

sebuah sistem harus seperti apa setelah use case selesai

dijalankan.

2.5.4. Activity Diagram

Activity diagram merupakan sebuah diagram yang

menjelaskan aktivitas dari user atau sistem, siapa saja yang

melakukan aktivitas, dan urutan pengerjaan aktivitas tersebut

(Satzinger, Jackson, & Burd, Systems Analysis And Design In

A Changing World, 2012, p. 57).

Page 17: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

27

Gambar 2.15 Activity Diagram Order Fulfillment

Sumber (Satzinger, Jackson, & Burd, Systems Analysis And

Design In A Changing World, 2012, p. 59)

Gambar 2.16 Contoh Activity Diagram

Page 18: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

28

Sumber (Satzinger, Jackson, & Burd, Systems Analysis And

Design In A Changing World, 2012, p. 58)

Notasi gambar yang digunakan di dalam activity

diagram:

1. Activity

Activity dapat dilambangkan dengan oval yang

merepresentasikan aktivitas individu di dalam

workflow.

Gambar 2.17 Activity

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 58)

2. Start Point & End Point

Titik bulat berwarna hitam atau start point

menandakan awal atau start point dari sebuah aktivitas.

Gambar 2.18 Start Point

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 58)

Page 19: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

29

Lingkaran putih dengan titik bulat berwarna

hitam di tengah menandakan akhir atau end point dari

sebuah aktivitas.

Gambar 2.19 End Point

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 58)

3. Decision Point/Decision Activity

Lingkaran berwarna putih dengan titik bulat

berwarna hitam di tengah menandakan end point yang

menandakan akhir dari sebuah aktivitas.

Gambar 2.20 Decision Point/Decision Activity

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 58)

Decision point atau decision activity

dilambangkan dengan gambar diamond dan berfungsi

untuk merepresentasikan alur dari sebuah proses

mengikuti satu jalur atau jalur yang lainnya.

4. Synchronization Bar

Synchronization bar berfungsi untuk

memisahkan sebuah jalur menjadi jalur yang

Page 20: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

30

dijalankan secara bersamaan atau menggabungkan

jalur yang dijalankan bersamaan menjadi satu jalur

saja.

Gambar 2.21 Synchronization Bar

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 58)

5. Swimlane Heading

Swimlane heading berfungsi untuk

merepresentasikan actor yang menjalankan sebuah

aktivitas dan digunakan untuk membagi workflow

aktivitas menjadi sebuah grup yang dapat

menunjukkan actor mana yang sedang mengerjakan

suatu aktivitas.

Gambar 2.22 Swimlane Heading

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 58)

2.5.5. Sequence Diagram

Page 21: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

31

Sequence diagram merupakan diagram yang berfungsi

untuk menunjukkan bagaimana objek-objek berinteraksi dan

berkolaborasi untuk menjalankan tugasnya.

Gambar 2.23 Contoh Sequence Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis And

Design In A Changing World, 2012, p. 334)

Notasi gambar yang digunakan dalam sequence

diagram:

1. Actor

Actor berfungsi untuk merepresentasikan

pengguna yang berinteraksi dengan sistem.

Page 22: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

32

Gambar 2.24 Actor – Sequence Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 334)

2. Message

Message merupakan sebuah pesan yang

dilabelkan untuk memberi deskripsi alasan dan input

data yang dikirimkan.

Gambar 2.25 Message – Sequence Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 334)

3. Lifelines

Lifelines merupakan perpanjangan dari objek

dengan objek maupun actor selama use case tersebut.

Tujuan dari lifelines adalah untuk mengindikasikan

urutan suatu pesan yang dikirim dan diterima oleh

actor dan objek yang bersangkutan.

Page 23: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

33

Gambar 2.26 Lifelines – Sequence Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 243)

4. Activation Lifeline

Activation lifeline mewakili sebuah eksekusi

dari suatu objek. Panjang kotak berbanding lurus

dengan durasi aktivasi sebuah operasi.

Gambar 2.27 Activation Lifeline – Sequence

Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 334)

Page 24: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

34

5. Return Message/Value

Return message/value merupakan sebuah pesan

yang mengindikasikan sebuah respons atau jawaban

dari pesan awal yang dikirimkan.

Gambar 2.28 Return Message/Value – Sequence

Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 334)

6. Loop Frame/fragment

Loop frame merupakan sebuah notasi yang ada

di dalam sequence diagram yang digunakan untuk

menampilkan pesan yang diulang (loop).

Gambar 2.29 Loop frame/fragment – Sequence

Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 128)

7. Alternative frame/fragment

Alternative frame merupakan sebuah notasi

yang digunakan untuk menunjukan logika if-then-else.

Page 25: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

35

Gambar 2.30 Alternative frame/fragment – Sequence

Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 130)

8. Optional frame/fragment

Optional frame merupakan sebuah notasi yang

digunakan untuk menunjukkan pesan yang bersifat

opsional.

Gambar 2.31 Optional frame/fragment – Sequence

Diagram

Sumber (Satzinger, Jackson, & Burd, Systems Analysis

And Design In A Changing World, 2012, p. 130)

2.6. Presentasi

Presentasi merupakan sebuah kegiatan aktif di mana seorang

pembicara menyampaikan dan mengkomunikasikan ide serta

informasi kepada sekelompok audiensi (Sutomo, 2007, p. 1).

Berlandaskan teori tersebut maka dapat disimpulkan bahwa presentasi

Page 26: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

36

merupakan suatu bentuk komunikasi yang bersifat verbal dan

berfungsi untuk menyampaikan pesan kepada pihak lain melalui

tulisan dan lisan. Penyampaian dalam bentuk lisan dan tulisan ini

dilakukan dengan harapan audiensi dapat menerima informasi yang

diberikan oleh presenter dengan baik.

Cara melakukan presentasi dengan baik (Kasali, 2004, p. 1):

1. Tidak tergantung dengan teks dan gunakan pointer.

2. Mempelajari terlebih dahulu siapa audiensi yang mendengarkan

presentasi. Pelajari siapa audiensi, latar belakang, pendidikan, dan

jabatan audiensi.

3. Jangan membicarakan hal-hal yang sudah mereka ketahui atau

yang tidak ingin mereka dengar, sajikan hal-hal yang bersifat

orisinal.

4. Jangan membiarkan audiensi jenuh. Atur volume dan suara agar

tidak terdengar monoton. Gunakan sedikit humor sebagai pencair

suasana.

5. Humor yang diberikan tidak berlebihan.

6. Periksa ruangan dan fasilitas sebelum melakukan presentasi

termasuk mikrofon yang digunakan.

7. Bersikap interaktif, beri kesempatan audiensi untuk menjawab,

melakukan aktivitas tertentu, dan tertawa.

8. Latihan yang cukup sebelum melakukan presentasi.

9. Perhatikan bahasa tubuh, kurangi gerakan yang tidak perlu.

10. Berpakaian rapi dan sopan.

2.7. SCRUM Agile Development

Agile software development merupakan sebuah metode yang

dapat memberi respons dan menangani suatu perubahan dengan cepat.

Dengan adanya agile software development, jika terjadi perubahan

requirement maka developer dapat mengadaptasi requirement baru ke

dalam pengembangan yang sedang dikerjakan dengan cepat

(Pressman R. S., 2014, p. 78). Scrum merupakan salah satu jenis agile

Page 27: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

37

software development. Scrum adalah metode pengembangan untuk

peranti lunak secara cepat (Pressman R. S., 2010, p. 82).

Gambar 2.32 Alur Proses Scrum

Sumber (Pressman R. S., 2010, p. 83)

Menurut Pressman pada setiap tahap pengembangan terjadi

aktivitas kerja yang terlingkup dalam suatu pola yang dinamakan

sprints. Setiap pola proses yang terjadi akan terdapat kegiatan-

kegiatan berikut:

1. Backlog

Di aktivitas Backlog dilakukan pendaftaran susunan

prioritas dari daftar kebutuhan- kebutuhan atau fitur yang akan

dilakukan pada aktivitas Sprint.

2. Sprints

Di aktivitas ini, tim akan melaksanakan apa yang telah

direncanakan sebelumnya di aktivitas Backlog dengan batas

waktu yang telah ditentukan.

3. Scrum Meeting

Page 28: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

38

Pada aktivitas ini tim akan

melakukan pertemuan secara periodik untuk membahas

progres apa saja yang telah dikerjakan, dan apa saja yang akan

dikerjakan di hari berikutnya.

4. Sprint Review/Demos

Di aktivitas ini tim akan melakukan demonstrasi

terhadap apa saja yang telah diselesaikan dalam satu sprint.

Tim akan melakukan testing terhadap aplikasi dan melakukan

evaluasi.

2.8. MVC (Model-View-Controller)

Model-View-Controller atau biasa disebut dengan MVC

merupakan model pembuatan sebuah program yang membagi

arsitektur dari sebuah aplikasi menjadi tiga bagian yaitu bagian yang

berisi proses dari program, bagian yang berisi tampilan dari program,

dan bagian yang menghubungkan program dengan database. Tujuan

utama dari penggunaan MVC adalah untuk memisahkan semua proses

bisnis dengan tampilan antarmuka dari sebuah program agar

developer aplikasi bisa lebih mudah untuk mengembangkan salah satu

bagian dari aplikasi dan tidak mempengaruhi bagian aplikasi yang

lainnya (Badiyanto, 2013, p. 49).

MVC memisahkan komponen logika dari suatu program

menjadi tiga bagian yaitu Model, View, dan Controller. Model

menggambarkan kumpulan informasi (data) dan proses bisnis dari

sebuah program. View berisi elemen tampilan antarmuka yang

dimiliki oleh sebuah aplikasi seperti gambar, teks, atau form yang

digunakan sebagai masukan. Sedangkan controller berfungsi untuk

mengatur jalannya komunikasi antara model dengan view.

Tiga komponen yang terdapat dalam konsep MVC:

1. Model

Bagian ini berhubungan langsung dengan database

untuk dapat memanipulasi data dan menangani validasi yang

Page 29: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

39

diberikan di controller. Model tidak bisa langsung terhubung

dengan view.

2. View

Bagian ini berisi logika yang digunakan untuk tampilan

antarmuka dari sebuah aplikasi. Fungsinya adalah untuk

menerima dan mempresentasikan data kepada pengguna

aplikasi. View biasanya diatur oleh controller dan tidak

berhubungan secara langsung dengan model.

3. Controller

Bagian ini berfungsi untuk megatur hubungan antara

model dengan view. Ketika controller menerima request dari

user, ia bertugas untuk menentukan proses apa yang harus

dilakukan oleh aplikasi dan meneruskannya kepada model dan

view.

Gambar 2.33 Arsitektur Model View Controller

Sumber (Wiharto & Irawan, 2016, p. 27)

2.9. Database

2.9.1. Pengertian Database

Database adalah kumpulan dari banyak data yang

saling terhubung secara logis baik dari segi informasi dan

Page 30: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

40

deskripsi yang dirancang untuk menemukan informasi yang

dibutuhkan oleh sebuah organisasi (Connolly & Begg, 2010, p.

65). Sebuah database merupakan tempat penyimpanan data

yang besar di mana data yang ada tidak hanya berisi data

operasional namun juga deskripsi dari data tersebut. Database

akan digunakan sebagai sumber data yang tidak digunakan

oleh satu orang saja, namun database dapat digunakan oleh

seluruh departemen dalam perusahaan yang bersangkutan.

Connolly dan Begg mengatakan bahwa database bukanlah

dimiliki oleh satu departemen saja tetapi merupakan sumber

dari perusahaan yang harus dibagi dan digunakan secara

bersama-sama (Connolly & Begg, 2010, p. 65). Namun untuk

dapat menggunakan database dengan lebih baik dibutuhkan

yang namanya Database Management System (DBMS).

2.9.2. Database Management System (DBMS)

Database Management System atau yang biasa disebut

dengan DBMS adalah sebuah software yang berfungsi untuk

membantu user atau pengguna agar bisa mengakses database.

Dengan adanya DBMS user dapat melakukan manipulasi

terhadap database, misalnya menambah atau menghapus data,

mengubah data, atau sekedar melihat data yang ada di dalam

database. Connolly dan Begg menyebutkan bahwa DBMS

adalah sebuah sistem software yang memungkinkan

penggunanya untuk menjelaskan, membuat, melakukan

pemeliharaan, dan memanipulasi database yang ada (Connolly

& Begg, 2010, p. 66).

2.9.3. Entity Relationship Diagram (ERD)

Entity Relationship Diagram atau yang biasa disebut

dengan ERD adalah sebuah gambar yang memberi informasi

yang dibuat, disimpan, dan digunakan di dalam sistem bisnis

Page 31: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

41

(Dennis, Wixom, & Roth, 2012, p. 224). Elemen-elemen yang

ada pada Entity Relationship Diagram adalah:

1. Entity

Entity atau entitas dapat berupa orang, tempat,

peristiwa, atau hal tentang kumpulan data. Sebuah entitas

dapat digambarkan dengan persegi panjang dan dijelaskan

oleh kata benda tunggal.

2. Attribute

Attribute atau atribut adalah beberapa jenis

informasi yang ditangkap di sekitar sebuah entitas. Dengan

kata lain adalah kata benda yang tercantum dalam suatu

entitas.

3. Relationship

Relationship adalah sebuah asosiasi antar entitas,

dan ditunjukkan oleh garis yang menghubungkan entitas

bersama-sama. Setiap hubungan terdiri dari entitas induk

dan entitas anak. Dalam hubungan entitas, orang tua

menjadi entitas pertama, dan anak menjadi entitas yang

kedua. Ada lima jenis hubungan yaitu one to one, one to

many, one to zero, many to many, many to zero.

Page 32: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

42

Gambar 2.34 Entity Relationship Diagram

Sumber (Dennis, Wixom, & Roth, 2012, p. 239)

2.10. Development Technology

2.10.1. JavaScript

JavaScript merupakan bahasa skrip populer yang

dipakai untuk menciptakan halaman web yang dapat

berinteraksi dengan pengguna dan dapat merespons event yang

terjadi pada sebuah halaman. JavaScript merupakan perekat

yang menyatukan halaman-halaman web. Akan sangat susah

menjumpai halaman web komersial yang tidak memuat kode

JavaScript. Hal ini sesuai dengan yang dikatakan oleh Sunyoto

bahwa Javascript adalah sebuah bahasa scripting yang sangat

popular di internet dan bahasa ini dapat bekerja dan berfungsi

dengan baik hampir di sebagian besar browser yang cukup

popular saat ini seperti Internet Explorer (IE), Mozilla Firefox,

Google Chrome, dan Opera (Sunyoto, 2007, p. 17).

JavaScript pada awalnya dikenal dengan sebutan

LiveScript, dan dikembangkan oleh Brendan Eich di Netscape

pada tahun 1995 yang menjadi bagian terintegrasi di dalam

Netscape Navigator 2.0. Untuk sintak, JavaScript bisa dibilang

mirip dengan C, Perl, dan Java/ JavaScript berhubungan

dengan browser, maka secara otomatis ia akan berhubungan

dengan HTML. Ketika browser memuat sebuah halaman,

server akan mengirim konten utuh dari dokumen, termasuk

HTML dan statement JavaScript. Konten HTML kemudian

akan dibaca dan diinterpretasi baris-demi-baris sampai tag

pembuka JavaScript dibaca, pada saat itu interpreter

JavaScript mengambil alih. Ketika tag penutup JavaScript

diraih, pemrosesan HTML berlanjut (Sianipar & Irwan, 2018,

p. 1).

2.10.2. Webpack

Page 33: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

43

Webpack adalah bundler modul untuk aplikasi

Javascript modern, memfasilitasi kode untuk dirancang,

ditulis, dan diuji secara terstruktur, menggunakan edisi bahasa

ECMAScript (ES) terbaru, seperti ES6. Sebagian besar

browser terkini mendukung ES5, tetapi tidak mendukung

seluruh fitur edisi Javascript ES6 (dan ke atas). Untuk

merealisasikan manfaat pengembangan dengan ES6, penting

untuk mengubah kode ES6 ke ES5 (atau lebih rendah), sebagai

berkas JavaScript monolitik yang dibundel. Ini mudah dicapai

menggunakan Babel bersamaan dengan Webpack (Gillingham

& Cobb, 2017, p. 2).

Selain sebagai module bundler, dengan berbagai loader

dan plugin yang sudah disediakan oleh webpack, webpack bisa

juga digunakan untuk mengubah ES6 (ECMAScript 2015)

menjadi format ES5 (format JavaScript yang biasa dikenal)

yang bisa dibaca oleh browser dan bisa mengubah pre-

processor CSS seperti SASS menjadi sebuah berkas CSS yang

bisa dibaca di browser. Webpack digunakan saat front end

framework yang digunakan adalah VueJS, ReactJS, dan

Angular (Webpack, 2017).

2.10.3. Babel

Tidak semua browser dapat mendukung fitur baru

seperti JavaScript ES6, Babel hadir sebagai perangkat yang

dapat membantu para developer dengan mengompilasi ulang

kode ES6 menjadi ES5 yang sudah dipahami semua browser.

Dengan menggunakan Babel maka pengguna dapat

menggunakan fitur dan sintak dari versi JavaScript yang

paling baru. Hal ini dapat terwujud karena Babel sendiri

merupakan sebuah transpiler yang memiliki fungsi

menerjemahkan sintak-sintak yang tidak didukung menjadi

sintak yang didukung oleh browser atau NodeJS (BabelJS,

2019) .

Page 34: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

44

Gambar 2.35 Contoh Kode Penggunaan Babel

Sumber (BabelJS, 2019)

2.10.4. Vue.js

Vue (dibaca: view) adalah salah satu dari sekian

banyak library yang ada pada bahasa pemrograman

Javascript dan berfungsi untuk membangun tampilan

antarmuka pengguna dari suatu aplikasi berbasis web. Pada

awalnya vue hanya didesain untuk kebutuhan web saja,

namun seiring perkembangan teknologi yang sudah semakin

modern maka saat ini vue juga dapat digunakan untuk

mengembangkan aplikasi berbasis mobile dan desktop. Vue

menggunakan konsep web component dan virtual DOM

seperti React namun memiliki pendekatan yang lebih natural.

Siapa saja yang memiliki pengetahuan dasar

mengenai HTML, Javascript, dan CSS akan dengan mudah

dan cepat menguasai serta menggunakan vue. Saat ini vue

sudah berada pada versi 2.0 dengan berbagai perbaikan dan

penambahan fitur baru. State Management pada vue

didukung secara resmi oleh Vuex (Mukhlasin & Azamuddin,

2018, pp. 12-13).

Kelebihan dari framework Vue adalah sebagai

berikut:

1. Didukung banyak pustaka.

2. Digunakan perusahaan besar.

3. Mudah dipelajari.

4. Mudah diintegrasikan dengan library lain.

Page 35: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

45

5. Dukungan official untuk pengembangan aplikasi

enterprise

2.10.5. Vuex

Pada dasarnya penggunaan state management bisa

menggunakan library apa saja misalnya redux, mobx. Namun

untuk vue telah tersedia versi resmi yang telah mendukung

semua fitur-fitur yang ada di vue secara lebih mendalam lagi

sehingga jika framework yang digunakan adalah vue maka

sangat disarankan menggunakan state management vuex.

Vuex pada pengembangannya terinspirasi dari Flux, Redux,

dan Elm. Namun penggunaan vuex lebih dikhususkan untuk

framework vue.

Library untuk vuex terdiri dari tiga hal yaitu state,

mutation, dan action. Berikut adalah cara kerja vuex:

1. Petama sebuah komponen melakukan pemanggilan

(dispatch) kepada suatu fungsi pada actions.

2. Actions yang terdiri dari kumpulan fungsi tersebut

bertugas untuk memanggil function pada mutation.

3. Fungsi-fungsi yang ada pada mutation bertugas untuk

melakukan update pada state.

4. Perubahan pada state yang bersifat reaktif akan memicu

rendering dari sebuah komponen.

Page 36: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

46

Gambar 2.36 Cara Kerja Vuex

Sumber (Mukhlasin & Azamuddin, 2018, p. 148)

2.10.6. PHP

PHP: Hypertext Preprocessor atau yang biasa disebut

dengan PHP adalah sebuah bahasa pemrograman yang

berfungsi untuk membangun suatu website yang bersifat

dinamis (Saputra, 2011, p. 1). PHP disebut juga dengan bahasa

server slide scripting yang memiliki arti bahwa setiap kali

ingin menjalankan PHP, dibutuhkan adanya web server. PHP

bersifat open source sehingga semua orang dapat dengan

mudah menggunakan secara mudah dan gratis. Selain itu PHP

dapat digunakan lintas platform misalnya Windows, Linux,

MacOS.

PHP memiliki beberapa keunggulan yang membuatnya

sangat digemari dan banyak dipakai untuk mengembangkan

sebuah program yaitu :

1. Mudah dipelajari.

2. Dapat digunakan lintas platform.

3. Hampir semua browser mendukung penggunaan PHP.

4. Bersifat open source dan gratis.

5. Didukung oleh beberapa macam web server seperti

Apache, IIS, Lighttpd, Xitami.

Page 37: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

47

6. Mendukung penggunaan database baik yang bersifat

gratis atau berbayar seperti MySQL, PostgreSQL, mSQL,

Informix, dan Oracle.

Gambar 2.37 Contoh Kode PHP

Sumber (Nixon, 2012, p. 38)

2.10.7. Laravel

Laravel merupakan sebuah framework untuk bahasa

pemrograman PHP yang bersifat open source sehingga semua

orang dapat menggunakannya. Laravel ditulis oleh Taylor

Otwell dan memiliki lisensi resmi dari MIT. Tujuan dibuatnya

Laravel adalah untuk membantu para developer khususnya

web developer agar dapat membuat sebuah web dengan

sintaks yang sederhana, elegan, eskpresif, dan menyenangkan.

Dalam pengembangannya Laravel dapat digabungkan dengan

bahasa lain seperti Ruby on Rails dan ASP.NET (Nugraha,

2014, p. 1).

2.10.8. HTML

Hypertext Markup Language atau yang biasa disebut

dengan HTML merupakan sebuah bahasa untuk membuat

sebuah halaman web dimana bahasa yang digunakan masih

sangat sederhana dan standar. HTML dapat digunakan untuk

membuat tabel, menambahkan sebuah objek, suara, video, dan

animasi (Hidayatullah, Priyanto, & Kawistara, 2017, p. 15).

HTML berisikan dokumen yang memiliki tag, elemen,

dan atribut yang digunakan untuk menampilkan halaman pada

sebuah web browser. File yang merupakan file HTML dapat

Page 38: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

48

dibuka dengan menggunakan sebuah web browser seperti

Google Chrome, Mozilla Firefox, dan Microsoft Internet

Explorer. HTML memiliki struktur tertentu agar dokumen

yang ingin ditampilkan dapat dibaca oleh browser. Ada tiga

bagian utama dari HTML yaitu <html>, <head>, <body>

(Suehring & Valade, 2013, p. 92).

2.10.9. CSS

Cascading Style Sheet atau yang biasa disebut dengan

CSS adalah sebuah bahasa yang didefinisikan untuk

mengkonstruksi kumpulan huruf, warna, dan posisi atau letak

yang digunakan untuk mendeskripsikan bagaimana informasi

pada suatu halaman web dapat dibentuk dan ditampilkan

(Meloni, 2012, p. 46). Ada dua cara menyimpan CSS yaitu

dapat disimpan langsung di dalam halaman HTML atau

disimpan di dalam file terpisah.

Dengan adanya CSS web developer dapat memisahkan

konten utama dengan konten yang berisi tampilan dari sebuah

web, sehingga code yang digunakan akan menjadi lebih sedikit

dan ringan. Selain itu dengan adanya pemisahan ini maka web

developer bisa cukup memuat satu properti saja dan properti

tersebut bisa digunakan oleh elemen lainnya, sehingga tidak

perlu untuk membuat code berulang-ulang.

2.10.10. SCSS

CSS sejatinya ditulis untuk desainer web dengan latar

belakang pemrograman yang terbatas. Dengan demikian, CSS

tidak memiliki beberapa konstruksi pemrograman, seperti

variabel, blok kondisional dan perulangan, dan fungsi. Absen

akan hal ini memengaruhi code reuse secara negatif, dan,

secara konsekutif, pemeliharaan dari styling code. Masalah-

masalah ini adalah alasan utama untuk penampilan alat

preprocessor seperti Sass dan Less. Alat-alat ini

memungkinkan pengembang untuk menggunakan variabel,

Page 39: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

49

loop, fungsi, dan mixin dalam CSS. Secara umum,

preprocessing memiliki bahasa stylesheet-nya sendiri (Sass

dan Less), yang dikonversi menjadi CSS murni (Queirós,

2018, p. 17).

Sass awalnya adalah indented language. Ia memiliki

seluruh konsep yang sama dengan CSS, tetapi sintaksisnya

lebih terinspirasi oleh bahasa Haml daripada CSS. Di

kemudian hari, tim Sass menyadari bahwa sintaks indentasi

sulit dipahami oleh pengguna baru, jadi dibuatlah sintaks

alternatif untuk Sass. Sintaks alternatif ini adalah subset ketat

dari CSS, yang dikenal sebagai SCSS (Sassy CSS). Orang

sering bingung dan berpikir bahwa SCSS adalah proyek atau

bahasa yang sama sekali berbeda dari Sass. Pada

kenyataannya, kedua sintaks didukung, dan keduanya

merupakan bahasa dari Sass. Ketika kita merujuk pada

sintaksis aslinya, kita menyebutnya sebagai indentasi Sass

untuk membuat perbedaan menjadi jelas (Catrlin & Catlin,

2016, pp. 36-38).

2.10.11. PostgreSQL

PostgreSQL adalah sebuah tujuan umum dan objek

relasional database management system serta sebuah database

system yang canggih dan bersifat open source. PostgreSQL

dikembangkan berdasarkan POSTGRES 4.2 oleh fakultas

Computer Science di Universitas California. Pada awalnya

PostgreSQL dirancang untuk berjalan di platform UNIX,

namun seiring perkembangan zaman PostgreSQL juga

dirancang untuk menjadi portable sehingga dapat dijalankan

diberbagai platform lain seperti Mac OS X, Solaris, dan

Windows.

Salah satu keunggulan PostgreSQL adalah aplikasi ini

gratis dan bersifat open source sehingga semua orang dapat

Page 40: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

50

menggunakan PostgreSQL dengan mudah. Untuk me-maintain

PostgreSQL tidak membutuhkan usaha yang terlalu besar

karena PostgreSQL memiliki stabilitas yang baik. Oleh karena

itu jika menggunakan PostgreSQL untuk mengembangkan

sebuah aplikasi maka total biaya yang dikeluarkan akan jauh

lebih kecil jika dibandingkan dengan menggunakan database

management system yang lainnya (Siahaan & Sianipar, 2019,

p. 1).

2.10.12. JSON

JavaScript Object Notation atau yang biasa disebut

dengan JSON merupakan sebuah format serialisasi data. JSON

berfungsi untuk merepresentasikan sebuah objek data dalam

format teks sehingga dapat ditransmisikan dari satu komputer

ke komputer yang lain. Beberapa web service seperti REST

menyandikan data yang mereka kirim dan kemudian

dikembalikan dalam format JSON. Pada penggunaannya

JSON tidak hanya terbatas pada javascript, ia juga

menyediakan format yang lebih ringkas jika dibandingkan

dengan XML saat merepresentasikan data (Connolly & Hoar,

2015, pp. 734-735).

Pertukaran data yang dilakukan JSON dapat terjadi antara

browser dan server, atau bahkan dari server yang satu ke

server yang lainnya.

Berikut ini adalah contoh dari JavaScript Object

Notation (JSON):

Page 41: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

51

Gambar 2.38 Contoh JSON

Sumber (Droettboom, 2019, p. 10)

2.10.13. Bootstrap

Bootstrap adalah sebuah produk yang bersifat open

source yang diluncurkan pada bulan Agustus tahun 2011 oleh

dua karyawan dari aplikasi Twitter yaitu Mark Otto dan Jacob

Thornton. Bootstrap merupakan sebuah kerangka kerja untuk

front end developer dalam merancang sebuah web yang

responsive, yaitu bisa menyesuaikan lebar tampilannya sesuai

dengan media yang digunakan, baik itu ponsel, laptop, atau

PC. Bootstrap akan membagi layar menjadi 12 bagian atau

yang biasa disebut dengan 12 column grid system dengan

tujuan memudahkan web developer untuk melakukan

development dengan bootstrap (Spurlock, 2013, pp. 1-3).

2.10.14. Flutter

Flutter adalah sebuah Software Development Kit (SDK)

yang dikembangkan oleh Google untuk membangun sebuah

aplikasi yang memiliki kinerja tinggi dan dapat berfungsi pada

platform android dan juga iOS dari codebase tunggal. Flutter

menggunakan bahasa yang diciptakan oleh Google yaitu Dart

dan pertama kali diresmikan pada tahun 2015 (Flutter, 2019).

Keunggulan Flutter jika dibandingkan dengan aplikasi

lain adalah:

1. Fitur Hot Reload

Dengan adanya fitur ini akan membuat developer

berasa seperti coding pada website, karena developer tidak

perlu untuk melakukan kompilasi atau build ulang untuk

melihat hasil dari yang sudah dibuat.

2. UI yang ekspresif dan fleksibel

Flutter memiliki banyak fitur yang memungkan user

untuk dapat melakukan kustomisasi secara penuh pada

Page 42: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

52

aplikasi sehingga dapat menghasilkan waktu render yang

cepat, ekpresif, dan desain yang fleksibel.

3. Memiliki performa terbaik untuk aplikasi native

Widgets yang disediakan oleh Flutter memiliki

banyak fungsi seperti melakukan scroll, navigasi antar

halaman, desain icon dan fonts yang beragam, dan semua

fitur ini dapat bekerja baik pada platform android atau iOS.

2.10.15. QR Code

Quick Response Code atau yang biasa disebut dengan

QR Code adalah sebuah gambar berupa matriks dua dimensi

yang memiliki kemampuan untuk menyimpan data di

dalamnya (Wijaya, Adiguna, & A. Gunawan, 2016, p. 17). QR

Code pertama kali dikembangkan oleh Denso Corporation di

Jepang, dan dapat digunakan secara gratis. QR Code

merupakan sebuah evolusi dari kode batang (Barcode) yang

merupakan sebuah simbol penandaan obyek nyata yang

terbuat dari pola batang-batang berwarna hitam dan putih agar

mudah untuk dikenali komputer.

Gambar 2.39 Contoh QR Code

Sumber (Wijaya, Adiguna, & A. Gunawan, 2016, p. 17)

Prosedur pembangkitan QR Code dari sebuah teks adalah

sebagai berikut.

Page 43: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

53

Gambar 2.40 Diagram Alir Proses Pembangkitan QR Code

Sumber (Wijaya, Adiguna, & A. Gunawan, 2016, p. 17)

Langkah-langkah untuk membaca QR Code menjadi teks

aslinya merupakan kebalikan dari langkah-langkah pada

pembangkitan QR Code. Secara umum berikut adalah prosedur

pembacaan QR Code.

Gambar 2.41 Diagram Alir Proses Pembacaan QR Code

Sumber (Wijaya, Adiguna, & A. Gunawan, 2016, p. 17)

Page 44: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

54

2.10.16. Platform as a Service

Platform as a service atau yang biasa disingkat dengan

PaaS merupakan layanan komputasi awan yang menyediakan

platform yang memungkinkan penggunanya untuk

mengembangkan, menjalankan, dan mengelola aplikasi tanpa

kompleksitas membangun dan memelihara infrastruktur yang

biasanya terkait dengan pengembangan dan peluncuran

aplikasi (Butler, 2013). Biasanya PaaS digunakan untuk

pengembangan aplikasi yang berbasis online. PaaS

menyediakan infrastruktur hardware dan software yang sangat

baik sehingga pengguna atau developer tidak perlu lagi untuk

melakukan instalasi hardware atau software tambahan untuk

dapat menjalankan aplikasinya.

Salah satu contoh dari PaaS adalah Heroku. Heroku

merupakan Cloud Platform as a Service (PaaS) yang berbasis

kontainer. User atau developer menggunakan Heroku untuk

menyebarkan, mengelola, serta mengukur aplikasi modern.

Heroku memiliki platform yang elegan, fleksibel, dan juga

user friendly saat digunakan sehingga menawarkan proses

pengembangan aplikasi yang mudah. Heroku memberi

kebebasan kepada pengguna untuk dapat fokus kepada produk

yang dikembangkan tanpa perlu memikirkan gangguan dalam

mempertahankan server, perangkat keras, atau infrastruktur.

2.11. Interaksi Manusia dan Komputer

2.11.1. Delapan Aturan Emas

Delapan aturan emas adalah sebuah tahapan yang harus

dimengerti dan dipahami oleh seorang developer untuk

dijadikan sebagai basis atau landasan dalam perancangan layar

antarmuka sebuah aplikasi (Shneiderman & Plaisant, 2010, pp.

88-89). Berikut adalah delapan aturan emas:

Page 45: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

55

1. Mempertahankan konsistensi

Sebuah aplikasi atau perangkat lunak harus memiliki

tampilan antarmuka yang konsisten. Sering kali developer

mengabaikan aturan ini karena dianggap tidak terlalu

penting namun pada kenyataannya aturan ini sangat

penting dan akan memudahkan pengembangan aplikasi

kedepannya karena adanya konsistensi. Misalnya konsisten

dalam mendesain urutan perintah, tindakan, istilah yang

digunakan, menu, jenis huruf, penggunaan huruf besar, dan

layar bantuan.

2. Memenuhi kegunaan yang universal

Sebuah aplikasi atau perangkat lunak harus memiliki

cara atau jalan pintas untuk dapat melakukan sebuah aksi.

Misalnya dalam beberapa aplikasi word-processing dapat

berpindah fungsi menu dengan shortcut “quick keys” atau

dengan tombol fungsi. Selain itu aplikasi juga harus

mengenali semua kebutuhan pengguna yang sangat

beragam mulai dari desain hingga konten untuk pemula,

perbedaan ahli, rentang usia, cacat, dan keragaman

tekonologi lainnya untuk memperkaya spektrum

kebutuhan yang merancang panduan. Menambahkan fitur

pagi para pemula seperti penjelasan yang lebih rinci, dan

fitur untuk para ahli yang lebih mahir seperti shortcut

untuk langkah yang lebih cepat. Hal ini dilakukan agar

dapat memperkaya desain dari tampilan antarmuka dan

meningkatkan pengalaman pengguna aplikasi.

3. Memberikan umpan balik yang informatif

Sebuah aplikasi harus memiliki pesan umpan balik

yang jelas kepada penggunanya. Daripada menunjukkan

pesan error yang bertuliskan “Error 404” maka alangkah

lebih jelas dan mudah dimengerti jika yang ditampilkan

dan dilihat oleh pengguna adalah “The URL is unknown”.

Selain itu untuk setiap tindakan yang dilakukan oleh user

sebaiknya disertakan umpan balik. Untuk tindakan yang

Page 46: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

56

sering dilakukan dan tidak terlalu penting maka dapat

diberi umpan balik yang sederhana. Namun jika tindakan

yang dilakukan adalah hal penting seperti input data maka

sebaiknya pesan umpan balik yang diberikan lebih jelas

seperti memunculkan pesan kesalahan.

4. Mendesain kotak dialog penutup

Sebuah aplikasi harus memberikan sebuah

pemberitahuan yang jelas kepada pengguna apakah

pengguna sudah menyelesaikan sebuah aksi dengan sukses

dan benar atau masih berada dalam suatu proses dan baru

akan selesai. Misalnya saat user berhasil melakukan

registrasi data maka muncul pemberitahuan “Success

register data”.

5. Pencegahan kesalahan pengguna

Sebuah aplikasi harus sebisa mungkin tidak membuat

pengguna melakukan kesalahan, walaupun kesalahan

pengguna adalah hal yang wajar dan kemungkinan besar

pasti terjadi. Jika terjadi kesalahan maka sistem harus

dapat membantu pengguna untuk dapat memperbaiki

kesalahan yang dilakukan oleh pengguna dengan mudah

dan tidak membingungkan pengguna.

6. Mengijinkan pengguna untuk kembali ketindakan atau

langkah sebelumnya

Sebuah aplikasi harus memiliki fitur sederhana untuk

kembali kepada aksi atau tindakan yang dilakukan oleh

pengguna sebelumnya. Misalnya dengan adanya “Undo

Keys”.

7. Mendukung tempat kendali internal (Internal Locus of

Control)

Pada umunya seorang user atau pengguna pasti lebih

ingin menjadi pengontrol dari sebuah sistem dan bisa

mengatur interaksi yang diinginkan daripada dikontrol

oleh aplikasi tersebut. Maka aturan ini menjelaskan bahwa

sistem harus dirancang sedemikian rupa agar pengguna

Page 47: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

57

bisa menjadi inisiator daripada sekedar menjadi responden

saja.

8. Mengurangi beban pikiran jangka pendek pengguna

Sebuah aplikasi sebaiknya memberikan opsi pilihan

kepada pengguna ketika pengguna ingin melakukan

sesuatu daripada meminta pengguna untuk mengingat

semua pilihan yang ada.

2.11.2. Lima Faktor Manusia Terukur

Interaksi yang dekat dengan pengguna mengarah pada

lima faktor yang berguna untuk langkah-langkah dan tujuan

usability (Shneiderman & Plaisant, 2010, p. 32). Lima faktor

yang menjadi pusat evaluasi yaitu:

1. Waktu belajar

Berapa lama waktu yang dibutuhkan oleh pengguna

atau orang awam untuk dapat mempelajari cara yang

relevan dalam melakukan suatu tugas?

2. Kecepatan performa

Berapa lama waktu yang dibutuhkan agar suatu

tugas atau fungsi dapat dilakukan?

3. Tingkat kesalahan/error

Berapa banyak kesalahan yang terjadi dan

kesalahan-kesalahan apa saja yang dibuat pengguna dalam

menggunakan sistem?

4. Daya ingat

Bagaimana kemampuan pengguna untuk

mempertahankan pengetahuannya tentang sistem yang

telah digunakan dalam jangka waktu tertentu tidak

menggunakan sistem tersebut?

5. Kepuasan subjektif

Bagaimana kesukaan pengguna terhadap berbagai

aspek sistem? Informasi ini dapat diperoleh dengan

Page 48: BAB 2 TINJAUAN REFERENSI...hingga seluruh jalannya acara atau biasa disebut dengan rundown . 2.2. E-Marketplace 2.2.1. Pengertian E-marketplace Pada zaman yang sudah modern ini segala

58

melakukan wawancara secara langsung kepada pengguna

atau dengan melakukan survei.