7

BAB II

LANDASAN TEORI

Pengertian Aplikasi

Menurut Kusnadi, tujuan akhir dari penggunaan komputer adalah membantu

pekerjaan. Karena keperluan manusia sangat beragam maka komputer dirancang

untuk membantu berbagai macam aktivitas manusia. Untuk mencapai tujuan ini

maka komponen perangkat lunak lainnya ada yaitu program aplikasi1.

Menurut bahasa, Aplikasi adalah sebuah program komputer dengan tampilan,

yang memungkinkan manusia menggunakan komputer sebagai alat untuk

menyelesaikan tugas tertentu. Word, excel dan software komunikasi adalah contoh

dari aplikasi2.

Mengacu dua pengertian diatas penulis mendifinisikan, aplikasi adalah

program yang ditulis oleh seorang programmer yang diinstal dalam sebuah

perangkat keras (hardware) baik PC ataupun smarthphone, bertugas untuk

1
Kusnadi, Sistem Operasi, (Yogyakarta:Andi, 2008 ), cet 3, hal.15

2
Houghton Mifflin, http://www.dictionary.com/browse/application, diakses 2 Mei 2017, jam 2:39
 8

melakukan tugas khusus dalam rangka membantu berbagai macam aktifitas

manusia.

Dashboard

Pengertian Dashboard

Menurut Stephen Few, Dashboard adalah suatu tampilan visual berisi

informasi penting yang dibutuhkan dalam rangka mencapai satu tujuan atau

lebih, yang tersusun dalam satu tampilan sehingga informasi tersebut dapat

termonitor dan dimengerti secara mudah3. Tampilan visual harus dirancang

dengan baik agar mudah dipahami, berikut adalah hal yang harus diketahui oleh

desainer Dashboard:

1. Mengetahui kebutuhan pengguna;

2. Bagimana Dashboard dapat digunakan;

3. Bagaimana parameter yang akan digunakan;

4. Seberapa sering pengukuran akan dilakukan;

5. Bagaimana sebuah dashboard akan diupdate;

6. Bagaimana menjaga keseragaman dalam desain, jika memungkinkan.

3
Stephen Few, “Dashboard Confusion”, dalam Harold Kerzner, “Project Management Metrics KPI

and Dhasboard Edition 2”, (New Jersey: John Wiley & Sons, Inc,2013), hal. 248
 9

Harold Kerzner menyatakan bahwa dashboard memiliki beberapa

manfaat, yaitu4:

1. Repersentasi secara visual dari ukuran kinerja

2. Dashboard digunakan untuk menyampaikan informasi kinerja suatu

individu atau organisasi, secara visual dengan grafik, chart dan warna.

Sehingga informasi yang dilihat dapat mudah dimengerti.

3. Mampu mengidentifikasi dan mengoreksi tren negative

4. Dashboard digunakan untuk memantau tren, yang menggambarkan

pencapaian setiap jam, harian, mingguan ataupun bulanan. Dashboard

membuat Manajer ataupun eksekutif akan lebih mudah

mengidentifikasi pencapaiannya dan menyesesuaikan pelaksanaan

strategi kedepan.

5. Mengukur Efisiensi dan Inefisiensi

6. Dashboard mampu mengukur efesiensi dan inefisiensi strategi dan

parameter yang digunakan dalam mengukur kinerja dari sebuah

organisasi.

7. Mampu membuat detail laporan dan menampilkan tren baru

8. Dasbhoard mempunyai menu untuk menampilkan laporan detail dari

summary informasi yang ada di dashboard, sehingga data yang muncul

di dashboard dapat diketahui detailnya. Dashboard juga mampu

4
Wayne W. Eckerson, Deploying Dahboards and Scorecards, (Chatsworth, CA.: 1105 Media, Inc,

2008), Hal 5
 10

menampilkan tren terbaru dari data-data detail yang degenerate oleh

sistem.

9. Mampu membuat keputusan lebih tepat berdasarkan hasil dari

penelitian

10. Informasi didalam dashboard adalah hasil dari analisa dan penelitian

mendalam para pakar. Informasi tersebut dapat dijadikan landasan

manajer dan eksekutif dalam membuat sebuah keputusan.

11. Menyelaraskan strategi dan tujuan

12. Dashboard menyelaraskan strategi dan tujuan dari suatu organisasi.

13. Menghemat waktu menjalankan beberapa laporan

14. Semua laporan tersedia di dashboard, sehingga pengguna tidak perlu

lama mencari laporan tersebut.

15. Mendapatkan semua informasi secara instan

16. Dashboard adalah gabungan dari beberapa informasi penting yang

ditampilkan secara ringkas dalam satu layar. Sehingga mempermudah

pengguna melihat semua informasi tersebut.

Karakteristik Dashboard

Menurut Beuschel ada 3 karakteristik penting dari Dashboard yaitu5:

5
Beuschel,”Encyclopedia of Decision Making and Decision Support Technologies” dalam jurnal,

Wiliam Suahidir dan Dana Indra Sensue, “Perancangan Digital Dashboard System Untuk
 11

1. Visualisasi, semua jenis informasi ditampilan dalam bentuk visualisasi

seperti grafik, gauge, grafik garis ataupun batang, warna dan lain-

lainnya, sehingga seorang pengguna bisa menterjemahkan dengan

mudah informasi tersebut. Contohnya seperti speedometer yang

melambangkan pencapaian dari suatu organisasi, chart batang yang

melambangkan informasi pencapaian harian atau bulanan, lampu

lalulintas melambangkan kondisi dari suatu organsasi dalam mencapai

tujuannya, misal warna hijau yang melambangkan organisasi dalam

keadaan baik, kuning dalam keadaan kurang baik atau medium

sedangkan merah dalam keadaan tidak baik. Tujuan utama dari

pembuatan visualisasi tersebut untuk mempermudah memahami tren

positif maupun negatif dari perusahaan.

2. Pemilihan data yang relevan, sistem informasi mendapat data yang

sangat banyak dari berbagai sumber dari suatu perusahaan. Setiap data

yang akan ditampilkan dalam dashboard harus data-data yang penting

dan relevan dengan kondisi perusahaan saat ini. Dashboard secara

umum bertujuan untuk memadatkan informasi yang kompleks menjadi

representasi yang lebih sederhana. Semua data-data rinci tidak

dimunculkan dalam dashboard hanya data yang sudah dirangkum

yang ditampilkan. Hal ini sudah memberikan gambaran mengenai

Menyajikan Sensitivity Analysis Kinerja Keuangan Perusahaan Studi Kasus: PT. XYZ”,(96 Journal

of Information System Volume 6:2010), Hal 98

 12

keadaan suatu perusahaan secara umum. Melihat penjelasan diatas

mengindikasikan bahwa dashboard bukan sistem yang berdiri sendiri,

melainkan hanya tampilan awal yang menggambarkan sistem-sistem

kompleks dibelakangnya.

3. Pengawasan dan interaksi, Dashboard dapat menampilkan rangkuman

kumpulan data sangat besar yang berasal dari berbagai macam sistem

software maupun hardware. Rincian yang ditampilkan disesuaikan

dengan arah dan tujuan bisnis suatu organisasi. Proses reduksi data

yang sangat besar menggunakan algoritma. Hal ini memerlukan

kuantifikasi dan kualifikasi data yang ada selama masa pengembangan

sistem. Ini merupakan proses yang senstif dan tergantung end user.

Perusahaan maupun organisasi harus melakukan pengawasan terhadap

kinerja agar data-data yang ditampilkan akurat. Dashboard yang

membaik memiliki interaksi dengan real-time database untuk

memberikan peringatan dan informasi yang akurat tepat pada

waktunya.

Profil Indosat

Indosat adalah perusahaan penyedia jasa telekomunikasi di Indonesia.

Produk yang dijual adalah layanan telepon, sms, paket data dan PPOB.
 13

Pengertian Canvasser

Canvasser adalah sales person Indosat yang bertanggung jawab atas

distribusi, ketersediaan, dan edukasi produk Indosat ke Mitra Outlet Indosat.6

Pengertian Outlet

Outlet adalah tempat dimana pelanggan dapat membeli produk Indosat dan

melakukan pembayaran tagihan layanan milik pihak lain melalui PPOB. Dalam

pengertian Outlet termasuk milik sendiri dan Outlet Mitra.7

Pengertian Starter Pack (SP)

Starter Pack (SP) atau yang disebut Kartu Perdana adalah kartu SIM

(Subscriber Identity Module) digunakan sebagai alat komunikasi yang ditaruh

didalam telepon genggam, tiap-tiap SP mempunyai nomor atau identitias yang

berbeda-beda8.

Pengertian Cluster

Cluster adalah suatu wilayah pemasaran dan penjualan Indosat terkecil,

dengan batas geografis tertentu yang telah diatur oleh pihak Indosat yang

6
Indosat, “Kebijakan Standarisasi Enforcement Nomor: 417/G00-G0A0/SLS/15”, Juni 2015, Hal 4.

7
Indosat, “Kebijakan Standarisasi Enforcement Nomor: 417/G00-G0A0/SLS/15”, Juni 2015, Hal 4

8
Indosat, “Kontrak Kerja Sama Indosat Periode 2015-2017”, hlm 1
 14

dikelola oleh Indosat. Tipe cluster dibagi menjadi tiga: Gold, Silver dan

Bronze. Tiap-tiap cluster mempunyai tipe cluster berbeda sesuai dengan

business volumenya.

Key Performance Indicator (KPI)

Pengertian KPI

Menurut Arini, Key Performance Indicator (KPI) atau Indikator Kinerja

Utama adalah serangkaian indikator kunci yang bersifat terukur dan

memberikan informasi sejauh mana sasaran strategis yang dibebankan kepada

suatu organisasi sudah berhasil dicapai. Unsur-unsur yang terdapat dalam KPI

terdiri atas tujuan strategis, Indikator kunci yang relevan dengan sasaran

strategis tersebut, sasaran yang menjadi tolok ukur, dan kerangka waktu atau

periode diberlakukan KPI tersebut9.

Menurut Harold, Key Performance Indicator (KPI) dapat didefinisikan

sebagai ukuran (nyata atau abstrak) yang menunjukkan kinerja dalam

hubungan dengan mencapai target dan tujuan10.

9
Arini T. Soemohadiwidjojo, “Panduan Praktis Menyusun KPI cetakan 3”,(Jakarta: Raih Asa

Sukses, 2015), hlm 28.

10
Harold Kerzner, “Project Management Metrics, KPIs, and Dashboard Edition 2”, (New Jersey:

John Wiley & Sons, Inc, 2013), hal. 260

 15

Menurut Parmenter David KPI merupakan suatu metode yang digunakan

untuk mengukur kinerja anggota dalam suatu organisasi atas pencapaian yang

telah dilakukkan. KPI berkaitan dengan strategi organisasi yang akan

digunakan, pembuatan KPI harus unik karena setiap perusahaan mempunyai

visi dan misi yang berbeda11.

Merujuk pendapat diatas penulis menyimpulkan KPI adalah serangkaian

indikator kunci terukur dan relevan dengan sasaran strategis perusahaan yang

menujukan sejauh mana sasaran dan tujuan suatu organisasi dalam mencapai

target dan tujuan.

Tujuan Pembuatan KPI

Sebagai salah satu perangkat utama manajemen organisasi, tujuan utama

dari penetapan KPI sebagai berikut12.

1. Sebagai alat penguhubung visi misi, strategi organisasi dan sasaran

kinerja dalam sebuah organisasi dengan aktifitas yang dilakukan dalam

rangka mencapai sasaran kinerja yang diinginkan.

11
Parmenter David dalam Jurnal, Yenny Vebrianna-Liem Yenny Bendatu,”Perancangan Key

Performance Indicator Operator dan Foreman Departemen Quality Control di PT.X”,(Jurnal Tirta,

Vol 2, No. 2: 2014) Hal 170.

12
Arini T. Soemohadiwidjojo, “Panduan Praktis Menyusun KPI cetakan 3”,(Jakarta: Raih Asa

Sukses, 2015), hlm 28

 16

2. Untuk mengukur tren kinerja organisasi dan/atau divisi apakah

terdapat kenaikan atau terjadi penurunan yang signifikan. Pemilihan

KPI secara tepat akan menjadi pemberi sinyal bagi organiasi yang

memberikan gambaran mengenai area kinerja yang memerlukan

perbaikan, peluang perbaikan kinerja, dan mengetahui efektivitas

upaya perbaikan yang telah dilakukan. Pemilihan KPI secara tepat juga

membantu organisasi membatasi jumlah indicator dan data yang

diperlukan sehingga organisasi bisa lebih focus dalam memonitor

kinerja organisasi.

3. Untuk membandingkan kinerja terkini dengan historis organisasi, atau

membandingkan dengan organisasi lainnya. Sehingga organisasi

mendapat gambaran mengenai keunggulan atau kelemahan organisasi

dibandingkan pesaing, serta mengetahui peluang-peluang untuk

menciptakan nilai tambah.

4. KPI organisasi digunakan sebagai dasar penetapan KPI atau sasaran

kerja divisi dan individu.

5. Hasil pencapaian KPI menjadi dasar untuk memberikan penghargaan

dan konsekuensi sehingga KPI juga bermanfaat untuk mendorong

motivasi bekerja dan perilaku yang baik dari karyawan.

KPI Canvasser Indosat

KPI Canvasser Indosat adalah serangkaian Indikator kunci untuk

mengukur kinerja Canvasser yang ada di Indosat. Ada 4 paramater umum

dalam perhitungan KPI Canvasser yaitu:

 17

1. Outlet Promoter Index (OPI)

Outlet promoter Index, indikator keberhasilan promo produk indosat

di Outlet. OPI ini adalah gabungan dari dua parameter yaitu:

a) Availability Visibily Advocacy (AVA)

AVA adalah penilaian terhadap Availability produk Indosat,

Visibility Branding dan Advocacy Frontliner dari outlet terhadap

penjualan produk Indosat13. Nilai AVA hanya di level cluster dan

berbentuk percentage setiap canvasser mempunyai nilai AVA sama

jika di cluster yang sama. Maksimum nilai AVA adalah 100%.

b) Outlet Satisfaction Indosat (OSAT)

Outlet Satisfaction Indosat (OSAT) adalah penilaian tingkat

kepuasan outlet terhadap pelayanan Canvasser Indosat 14. Sama

halnya dengan AVA nilai OSAT hanya dilevel cluster dan berbentuk

percentage setiap canvasser mempunyai nilai OSAT sama jika di

cluster yang sama. Maksimum nilai OSAT adalah 100%.

13
Indosat, “Kebijakan Traditional Channel dan Komisi MPC per Q1 Januari 2017”,Januari 2017,

Hal 13

14
Indosat, , “Kebijakan Traditional Channel dan Komisi MPC per Q1 Januari 2017”,Januari 2017,

Hal 14
 18

2. Outlet Performance Index (OPI)

Outlet Performance Index (OPI) adalah indikator pencapaian dari

masing masing outlet dalam melakukan transaksi dari canvasser ke

outlet atau outlet keplanggan, adapun OPI terdiri dari:

a) Outlet SP Transaction (OST)

Outlet SP Transaction (OST) adalah aktivitas Canvasser Indosat

melakukan penjualan SP ke outlet (Sell in SP yang belum aktif)

dengan aplikasi sales SIS dan outlet menjual ke pelanggan (Sell out

SP yang sudah aktif) 15. Berikut SP Sell in dan Sell Out pada tabel

2.1:

Tabel 2.1 Target SP Sell in dan Sell Out.

Platinum Gold Bronze

Sell in/out 20 12 6

SP Pcs/Bulan Pcs/Bulan Pcs/Bulan

Berikut penjelasannya:

15
Indosat, “Kebijakan Traditional Channel dan Komisi MPC Nomor: 0549/G00-G0A/SLS/16”, hlm

12
 19

Setiap outlet akan dianggap sukses jika sell in dan sell out nya

terpenuhi. Contoh perhitungan OST:

OST = Total Outlet sukses / Target Outlet.

b) Outlet Voucher Transaction (OVT)

Outlet Voucher Transaction (OST) adalah aktivitas Canvasser

Indosat melakukan penjualan Voucher(Pulsa) (Sell in Voucher) ke

outlet dan outlet menjual Voucher ke pelanggan (Sell out Voucher)

16
. Berikut Voucher Sell in dan Sell Out pada tabel 2.2:

2.2 Target Voucher Sell in dan Sell Out.

Platinum Gold Bronze

Sell in/out 10x/Bulan 7x/Bulan 5x/Bulan

Berikut penjelasannya:

Setiap outlet akan dianggap sukses jika sell in dan sell out nya

terpenuhi. Contoh perhitungan OVT:

OVT = Total Outlet sukses / Target Outlet.

16
Indosat, “Kebijakan Traditional Channel dan Komisi MPC Nomor: 0549/G00-G0A/SLS/16”, hlm

12
 20

3. Spreeding Ending Balance

a) Sellin Mobo

Sell in MOBO Indosat dihitung berdasarkan aktivitas canvasser

melakukan penjualan Saldo MOBO Indosat 171 ke outlet-outlet,

sehingga outlet memiliki Ending Balance Saldo MOBO Indosat ≥

Rp10.000,-17. Berikut perhitungannya:

Sell in MOBO = Total outlet sukses(>10rb)/Total target outlet

b) Sellin PPOB

Definisi Sell in PPOB adalah aktivitas canvasser di cluster MPC

dengan melakukan penjualan Saldo PPOB kepada outlet dengan

minimal penjualan saldo sebesar Rp. 50.000,- per outlet dalam satu

bulan18. Berikut perhitungannya:

Sell in PPOB = Total outlet sukses (>50rb)/Total target outlet

4. Addon MOBO

17
Indosat, “Kebijakan Traditional Channel dan Komisi MPC per Q1 Januari 2017”, Januari 2017,

Hal. 12

18
Indosat, “Kebijakan Traditional Channel dan Komisi MPC per Q1 Januari 2017”. Januari 2017,

Hal. 12
 21

Addon MOBO adalah besarnya jumlah outlet yang memenuhi

transaksi paket data Indosat, minimal transaksi paket data adalah Rp.

100.000,- per outlet dalam satu bulan. Berikut perhitungannya:

Addon MOBO = Total outlet sukses(>100rb)/Total target outlet

Berikut dibawah ini adalah parameter-parameter perhitungan KPI canvasser

Indosat pada gambar 2.1:

Gambar 2.1: Parameter-parameter perhitungan KPI Canvasser Indosat

 22

Perangkat Lunak Implementasi Sistem

Hyper Text Markup Language 5 (HTML 5)

Hyper Text Markup Language 5(HTML 5) adalah sebuah markah untuk

menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah

teknologi inti dari internet. HTML 5 adalah revisi kelima dari HTML (yang

pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML 4, pada

tahun 1997) dan hingga sekarang HTML5 sudah banyak digunakan. Tujuan

dari HTML 5 adalah mendukung teknologi HTML agar mendukung teknologi

multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti

mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua

(World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa

markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML.

HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1

yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda

oleh banyak perangkat lunak pembuat web.

Fitur baru HTML 5:

1. Unsur kanvas untuk menggambar.

2. Video dan elemen audio untuk media pemutaran.

3. Dukungan yang lebih baik untuk penyimpanan secara offline.

4. Elemen-konten yang lebih spesifik, seperti artikel, footer, header,

navigation, section.
 23

5. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL,

search.

Beberapa kelebihan yang dijanjikan pada HTML 5:

1. Unsur kanvas untuk menggambar.

2. Video dan elemen audio untuk media pemutaran.

3. Dukungan yang lebih baik untuk penyimpanan secara offline.

4. Elemen konten yang lebih spesifik, seperti artikel, footer, header,

navigation, section.

5. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL,

search.

Saat ini HTML 5 sudah disupport disemua jenis browser terbaru, baik itu

Google Chrome, Mozila Firefox, Opera dll19.

PHP: Hyepertext Preprocessor 7

PHP: (Hypertext Preprocessor) atau PHP, merupakan bahasa

pemograman web yang dikembangan pada tahun 1995 oleh Rasmus Ledrof,

dan sekarang dikelola oleh The PHP Group. PHP bersifat serverside, artinya

bahasa berbentuk script yang disimpan dan dijalankan di komputer server

19
Hari Aspriyono, “http://dosen.unived.ac.id/hari/2013/03/03/html-xhtml-dan-html5/”, diakses

tanggal 11 Mei 2017 jam 16.00

 24

(WebServer) sedangkan hasilnya yang dikirimkan ke komputer client

(WebBrowser) dalam bentuk script HTML20.

Berikut dibawah ini gambar cara kerja php :

WEB SERVER
Permintaan URL

BROWSER

Tanggapan HTTP (URL)

KODE HTML

Gambar 2.2 Cara Kerja PHP

Dari gambar diatas diuraikan sebagai berikut:

1. Server menerima permintaan dari user.

2. Kemudian dilanjutkan untuk mencari halaman atau page pada server.

3. Server melakukan instruksi yang di berikan oleh PHP untuk

melakukan modifikasi pada halaman atau page.

4. Selanjutnya hasil modifikasi tersebut akan dikembalikan kepada klien

atau browser.

20
Khairil, M. Kom,“Modul 1 Pengantar PHP dan WebServer” (Universitas Dahesan

Benguku:2013) Hal 2
 25

Kelebihan-kelebihan PHP diantaranya21:

1. Kecepatan akses yang cukup tinggi.

2. Skrip-skrip bisa berjalan dalam web server yang berbeda dan dalam

sistem operasi yang berbeda pula. PHP dapat berjalan disistem operasi

Unix, Windows, dan Machintosh.

3. PHP diterbitkan secara gratis.

4. PHP termasuk bahasa embedded (bisa ditempel atau diletakan dalam

tag HTML)

5. PHP termasuk server side programming.

Versi yang penulis gunakan dalam penelitian ini adalah PHP 7.

Dibandingkan versi sebelumnya PHP 7 versi terbaru dari PHP mempunyai

beberapa keunggulan diantaranya:

1. Kinerja PHP 7 lebih baik dari sebelumnya. Penambahan fitur

merupakan bagian dari peningkatan kinerja PHP 7.

2. Skalar Type Hints & Return Types.

3. Operator Spaceship ().

4. Fitur tambahan

5. Abstrak Syntax Tree: - perubahan besar pada inti. Kemungkinan besar

akan terlihat oleh pengembang. Hal ini memudahkan pengembang

21
KM. Syarif Haryana, “Pengembangan perangkat lunak dengan menggunakan PHP”,(Jurnal

Computech & Bisnis:2008),Hal 14-15

 26

untuk kode parsing php, mengurangi kesalahan, dan cara untuk

membangun hal-hal yang lebih baik kedepannya.

6. Closure::call(): - ini adalah metode baru yang ditambahkan ke dalam

inti. Hal ini memungkinkan variabel mengikat pada saat pemanggilan

yang bukan pra-mengikat.

7. Null Coalesce Operator: - Operator menyatu atau ?? ditambahkan ke

inti, yang mengembalikan operan pertama adalah ada atau nol.

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) adalah bahasa pemograman yang berfungsi

membuat tampilan web menjadi lebih menarik dan terstruktur. CSS sendiri

dapat mengubah warna tabel, tata letak, ukuran tulisan, jenis tulisan atau

sebuah efek. Cukup dengan membuat satu file CSS, bisa menyimpan banyak

Class CSS didalamnya dan dapat digunakan disetiap file PHP yang nanti akan

ditampilkan dalam browser22.

Sebagai seorang webprogramming dituntut untuk menguasai CSS.

Terlebih lagi bagi webdesginer. CSS saat ini dikembangkan oleh World Wide

Web Consortium (W3C) dan menjadi bahasa standar dalam pembuatan web.

CSS difungsikan sebagai penopang atau pendukung, dan pelengkap dari file

html yang berperan dalam penataan kerangka dan layout.

22
Roki Aditama, “S.I. Akademik Kampus Berbasis Web dengan PHP”, Lokomedia, 2012, Hal .37
 27

CSS sendiri dapat digunakan diberbagai platform sistem operasi, misal

Android, Windows, Machintos atau Linux. Versi terbaru dari CSS sekarang

adalah CSS 3, berikut dibawah ini adalah perbedaan CSS dari awal sampai ke

CSS 3:

1. CSS-1, dikembangkan dan berpusat pada formatting dokumen HTML.

2. CSS-2, dikembangkan untuk bisa memenuhi kebutuhan terhadap

format dokumen supaya bisa ditampilkan di printer. Pada CSS-2 ini

mendukung juga dalam penentuan posisi konten, downloadable, font,

table-layout, dan media type printer.

3. CSS-3, merupakan versi pengembangan dari sebelumnya. Pada versi

ini terdapat beberapa tambahan dan mengarah pada efek animasi23.

MySQL

MySQL adalah nama database server. Database Server adalah server

yang berfungsi untuk menangani database. Database adalah suatu

pengorganisasian data dengan tujuan memudahkan penyimpanan dan

pengaksesan data. Dengan menggunan MySQL, kita bisa menyimpan data dan

kemudian data bisa diakses dengan cara yang mudah dan cepat. MySQL

tergolong sebagai database relational. Pada model ini, data dinyatakan dalam

23
Nazruddin Safaat H, Android, Informatika, Edisi Revisi, 2012, hal .456
 28

bentuk dua dimensi yang secara khusus dinamakan tabel. Tabel tersusun atas

baris dan kolom24.

MySQL merupakan database yang digunakan diberbagai platform, salah

satunya Windows. MySQL ini mudah dipelajari karena banyaknya tutorial

tetang MySQL.

MySQL bekerja sebagai Database Management System yang mempunyai

dua perintah dasar yaitu perintah Data Definition Language (DDL) dan Data

Manipulating Language (DML)25.

Data Definition Statements, yaitu perintah dasar MySQL untuk

mengelolah database dan tabel didalamnya. Dulu perintah ini sering disebuh

dengan istilah Data Definition Language (DDL), tapi sekarang jika kita

membacara manual MySQL terbaru, istilahnya telah dirubah menjadi DDS

(Data Defnition Statements)26.

24
Abdul Kadir, “Pemograman Database MySQL Untuk Pemula”,(Yogyakarta: MediaKom 2013)

Hal. 15

25
Bunafit Nugroho, “Dasar Pemograman Web PHP – MySQL dengan Dreamweaver Studi Kasus:

Sistem Penerimaan Siswa Baru (PSB Online)”,(Yogyakarta:Gava Media 2013), Hal. 26

26
Bunafit Nugroho, “Dasar Pemograman Web PHP – MySQL dengan Dreamweaver Studi Kasus:

Sistem Penerimaan Siswa Baru (PSB Online)”,(Yogyakarta:Gava Media 2013), Hal. 32

 29

Perintah dalam dalam DDS diantaranya create untuk membuat database

baru dan membuat tabel baru, alter berfungsi untuk memperbaiki tabel dan

drop berfungsi untuk menghapus database dan tabel.

Data Manipulating Statements (DMS), yaitu perintah dasar SQL untuk

memanipulasi atau memanjemen data didalam database. Adapun perintah dasar

tersebut adalah INSERT (untuk menambahkan data), SELECT (digunakan

untuk melakukan pengamilan data), UPDATE (digunakan untuk melakukan

perubahan data) dan DELETE (digunakan untuk melakukan penghapusan

data)27.

JQuery

JQuery user interface (JQuery UI) adalah pustaka yang dibangun di atas

JQuery/Java-Script yang berguna untuk memudahkan pengembang dalam

mewujudkan aplikasi web yang interaktif.28

27
Bunafit Nugroho, “Dasar Pemograman Web PHP – MySQL dengan Dreamweaver Studi Kasus:

Sistem Penerimaan Siswa Baru (PSB Online)”,(Yogyakarta:Gava Media 2013), Hal. 40

28
Abdul Kadir, “Pemograman Database MySQL Untuk Pemula”,(Yogyakarta: MediaKom 2013)

Hal. 348.
 30

JQuery bertujuan untuk mempermudah penggunaan Java Script disebuah

website. Jquery menyederhanakan banyak hal yang rumit dari Javascript

seperti panggilan AJAX dan manipulasi DOM29.

Pustaka jQuery berisi beberapa fitur berikut:

1. Manipulasi HTML/DOM

2. Manipulasi CSS

3. Event Method HTML

4. Ajax

5. Utilities

Selain itu jQuery mempunyai plugin untuk semua jenis tugas.

Notepad ++

Notepad ++ adalah aplikasi editor kode gratis yang menggantikan Notepad

(Aplikasi Bawaan Windows) mendukung beberapa bahasa, yaitu PHP, HTML,

Javascript maupun CSS. Notepad++ berjalan dalam sistem operasi Windows

dan penggunaan diatur oleh lisensi GPL30.

29
W3School, “https://www.w3schools.com/jquery/jquery_intro.asp”, diakses tanggal 11 Mei 2017

jam 20.22.

30
Notepad plus plus, “https://notepad-plus-plus.org/” diakses tanggal 11 Mei 2017 jam 22.34
 31

XAMPP

XAMPP adalah paket program web lengkap yang dapat digunakan untuk

belajar pemograman web, khususnya PHP dan MySQL. XAMPP dapat

didownload secara gratis dan legal. Dalam penelitian ini penulis menggunakan

XAMPP versi 3.2.2 karena sudah support PHP 7. Didalam XAMPP terdapat 5

aplikasi yaitu: Apache, MySQL, FileZilla, Mercury dan Tomcat. 31

WEB Browser

Web browser adalah susatu program atau perangkat lunak yang digunakan

sebagai alat penjelajah internet atau untuk mencari informasi dari suatu

halaman web. Awalnya web browser hanya menampilkan gambar dan text

seiring berjalannya waktu web browser mampu menampilkan file multimedia

dan suara. Web browser juga dapat mengirim data lewat email, mengelola

HTML, sebagai input dan menjadikan halaman web sebagai hasil output yang

informatif 32.

Berikut dibawah ini adalah contoh dari web browser

31
Bunafit Nugroho, “Dasar Pemograman Web PHP – MySQL dengan Dreamweaver Studi Kasus:

Sistem Penerimaan Siswa Baru (PSB Online)”, (Yogyakarta:Gava Media 2013), Hal. 1

32
Elya Safitri, “http://ichaelysaa.mhs.narotama.ac.id/2015/10/06/pengertian-web-browser-dan-

jenis-jenis-browser/”, diakses tanggal 11 Mei 2017 jam 21.21

 32

1. Mozilla Firefox

2. Google Chrome

3. Opera

4. Internet Explorer

5. Dll

Aplikasi yang digunakan dalam penelitian ini Google Chrome.

Website

Website atau situs juga dapat diartikan sebagai kumpulan halaman yang

menampilkan informasi data teks, data gambar diam atau gerak, data animasi,

suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun

dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana

masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).

Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi

informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi

informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah

berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi

profil perusahaan, sedangkan website dinamis adalah seperti Friendster,

Multiply, dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate

oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna

maupun pemilik.
 33

Kerangka Berfikir Pembuatan Dashboard

Kerangka berfikir yang digunakan dalam penelitian ini dilakukan tiga hal,

yaitu33:

1. Identifikasi parameter yang tepat

Mengidentifikasi parameter yang tepat dan sesuai dengan sasaran dan

tujuan organisasi atau perusahaan.

2. Identifikasi user requirement yang tepat

Mengidentifikasi kriteria user yang menggunakan Aplikasi Dashboard

KPI Canvasser, karena masing-masing user mempunyai hak akses yang

berbeda-beda.

3. Desain user interface yang baik

Desain dashboard harus baik sesuai dengan pedoman teori-teori yang

terdapat pada ilmu Interaksi Manusia dan Komputer. Hal tersebut

bertujuan agar terjadi interaksi positif antara user dan aplikasi.

Setelah ketiga hal tersebut dilakukan langka selanjutnya adalah melakukan uji

coba. Proses uji coba ini bertujuan untuk mengetahui dan menjawab apakah KPI

33
Wiliam Suhaidir – Dana Indra Sensuse, “Perancangan Digital Dashboard System Untuk

Menyajikan Sensitivity Analysis Kinerja Keuangan Perusahaan Studi Kasus: PT. XYZ”,(96 Journal

of Information System Volume 6:2010), Hal 98

 34

yang ditampilkan dalam aplikasi ini apakah sesuai dengan rumus perhitungan KPI

Canvasser Indosat.

Tools Pengembangan Perangkat Lunak

Data Flow Diagram (DFD)

Menurut Kristanto, Data Flow Diagram (DFD) disebut juga dengan

Diagram Arus Data (DAD) adalah: sebuah model logika atau proses yang

dibuat untuk menggambarkan darimana asal data, dan kemana tujuan data yang

keluar dari sistem, dimana data tersebut disimpan, proses apa yang

menghasilkan data tersebut, dan interaksi antara data yang tersimpan, dan

proses yang dikenakan pada data tersebut34.

Menurut S. Pressman, DFD memperlihatkan gambaran tentang input-

proses-output dari suatu aplikasi atau perangkat lunak, yaitu objek-objek data

yang mengalir dalam perangkat lunak kemudian ditransformasi oleh elemen-

34
Kristanto dalam jurnal, Rita Afyenni, “Perancangan Data Flow Diagram Untuk Sistem Informasi

Sekolah (Studi Kasus pada SMA Pembangunan Laboratorium UNP)”, (Padang: Jurnal TEKNOIF

Vol 2 No. 1: 2014) Hal 35.

 35

elemen pemrosesan, dan obyek-obyek data hasilnya akan mengalir keluar dari

aplikasi/perangkat lunak35.

Obyek-obyek data dalam penggambaran DFD biasanya dipresentasikan

menggunakan tanda panah berlabel, dan transformasi-transformasi biasanya

dipresentasikan menggunakan lingkaran-lingkaran yang sering disebut

gelembung-gelembung36.

digambarkan ke dalam level-level yang menggambarkan peningkatan

aliran informasi atau data dan fungsinya secara terperinci, yaitu :

1. Diagram Konteks. Suatu diagram alir tingkat tinggi yang

menggambarkan seluruh jaringan, masukan dan keluaran. Sistem

yang dimaksud untuk menggambarkan sistem yang sedang

berjalan.

2. DFD Level 0. Merupakan dekomposisi (decomposition) level lebih

rendah dari diagram konteks.

35
S. Pressman dalam jurnal, Rita Afyenni, “Perancangan Data Flow Diagram Untuk Sistem

Informasi Sekolah (Studi Kasus pada SMA Pembangunan Laboratorium UNP)”, (Padang: Jurnal

TEKNOIF Vol 2 No. 1: 2014) Hal 35.

36
Rita Afyenni, “Perancangan Data Flow Diagram Untuk Sistem Informasi Sekolah (Studi Kasus

pada SMA Pembangunan Laboratorium UNP)”, (Padang: Jurnal TEKNOIF Vol 2 No. 1 : 2014) Hal

36.
 36

3. DFD Level 1. Merupakan dekomposisi (decomposition) level lebih

rendah dari DFD Level 0.

4. DFD Level 2, 3. Merupakan dekomposisi (decomposition) level

lebih rendah dari level-level sebelumnya.

Data Flow Diagram mempunyai 4 simbol, menurut Gane/Sarson. Berikut

ini adalah daftarnya37:

Tabel 2.3 Simbol Data Flow Diagram

Simbol Keterangan

Kesatuan Luar / External Entity.

Merupakan sumber/tujuan data atau suatu

bagian/orang yang berada diluar sistem tapi

berhubungan dengan sistem tersebut, baik

itu input ataupun output data.

Proses. Orang / unit mempergunakan

atau melakukan transformasi data

komponen fisik tidak diidentifikasikan.

37
aksitubondo,”http://www.aksitubondo.ac.id/downlotmateri.php?file=Apsi7.ppt.pdf”, diakses tgl

14 Mei 2017 jam 8.32

 37

Penyimpanan Data / Data Store.

Penyimpnan data atau tempat data direfer

oleh proses.

Aliran Data. Aliran data dengan arah

khusus dari sumber ketujuan.

Flowchart

Flowchart adah bagan-bagan yang mempunyai arus yang menggambarkan

langkah-langkah penyelesaian suatu masalah, flowchart merupakan cara

penyajian suatu algoritma. Tujuan utama dari flowchart adalah

menggambarkan suatu tahapan penyelesaian masalah secara sederhana, terurai,

rapi, dan jelas menggunakan symbol-simbol standar38.

6. Bagan Alir Sistem (system flowchart)

Merupakan bagan yang menunjukkan arus pekerjaan secara

keseluruhan dari sistem. Bagan ini menjelaskan urutan dari prosedur -

prosedur yang ada didalam sistem.

7. Bagan alir program

38
Endah,”http://endah_ks.staff.gunadarma.ac.id/Downloads/files/52145/2.+Definisi+dan+simbol

+Flowchart.pdf.”, diakses tgl 14 Mei 2017 jam 8.42

 38

8. Merupakan bagan yang menjelaskan secara rinci langkah – langkah

dari proses program. Bagan alir program dibuat dari derivikasi bagan

alir sistem.

Tabel 2.4 Simbol Bagan Alir Sistem

Simbol Keterangan

Dokumen

Mendefinisikan masukan dan keluaran

baik itu manusia ataupun komputer.

Proses Manual

Pemrosesan yang dilakukan oleh

komputer

Proses Berbasis Komputer

Pemrosesan yang dilakukan komputer

Proses Pradefinisi

File simpanan

Multi Dokumen Kondisi

Lebih dari satu rangkap

Dokumentasi

Mendefinisikan penyimpanan arsip

 39

Key In

Menunjukan pemasukan data secara

manual atau melalui keyboard

Hardisk

Menunjukan pemasukan atau

penyimpanan data pada hardisk

Tabel 2.5 Simbol Bagan Alir Diagram

Simbol Keterangan

Dokumen

Mendefinisikan dokumenmasukan dan

keluaran baik untuk proses manual

maupun komputer

Proses Manual

Pemrosesan yang dilakukan oleh

komputer

Proses Berbasis Komputer

Pemrosesan yang dilakukan oleh

komputer

Proses Pradefinisi
 40

Menunjukan penyeleksian kondisi baik

untuk operasi manual maupun komputer

Kondisi

Menunjukan penyeleksian kondisi baik

untuk operasi manual maupun komputer

Dokumentasi

Mendefinisikan penyimpanan arsip

Key In

Menunjukan pemasukan data secara

manual atau melalui keyboard

Hardisk

Menunjukan pemasukan atau

penyimpanan data pada hardisk

Simbol garis

Digunakan untuk menunjukkan arus dari

proses

Entity Relation Diagram (ERD)

Entity Relation Diagram (ERD) adalah suatu diagram untuk

menggambarkan desain konseptual dari model konseptual suatu basis data

relasional. ERD juga merupakan gambaran yang merelasikan antara objek yang
 41

satu dengan objek yang lain dari objek di dunia nyata yang sering dikenal

dengan hubungan antar entitas. Sebagai contoh jika membuat ERD dari Sistem

Perpustakaan maka bahan sebagai objek ERD bisa berupa anggota, buku,

peminjaman, pengembalian dan sebagainya. ERD terdiri dari 3 Komponen

Utama, yaitu39:

1. Entitas

Entitas adalah suatu objek di dunia nyata yang dapat dibedakan dengan

objek lainnya. Entitas bisa berupa orang atau benda ataupun hal

lainnya. Entitas digambarkan dalam bentuk persegi panjang. Dilihat

dari jenisnya entitas terbagi atas dua yaitu.

a) Entitas Kuat (Strong Entity)

b) Entitas Lemah (Weak Entity)

2. Atribut

Atribut merupkan semua informasi yang berkaitan dengan entitas.

Atribut sering dikenal dengan property dari suatu entitas atau objek.

Atribut digambarkan dalam bentuk elips, berikut macam-macam

atribut:

39
Robi Yanto, M. Kom, “Manajemen Basis Data Menggunakan

MySQL”,(Sleman:Deepublish:2016),Hal 32-39
 42

a) Atribut Sederhana (Composit Atribut)

b) Atribut Bernilai Tunggal (Single Values Attribute)

c) Atribut Bernilai Banyak (multivalues Attribute)

d) Atribut Turunan (Derived Attribute)

e) Atribut Identitas (Key Attribute)

Jenis-jenis atribut Identitas:

 Super Key

 Candidate Key

 Primary Key

 Alternative Key

 Foreign Key

3. Relationship

Relationship dalam ERD adalah suatu hubungan antara entitas-entitas,

ada tiga macam relasi menurut derajatnya, yaitu derajat relasi unary,

derajat relasi binary dan derajat relasi ternari.

Derajat kardinalitas merupakan penjabaran dari hubungan antarentitas.

Derajat kardinalitas dibagi atas 3 bagian diantaranya40:

40
Robi Yanto, M. Kom, “Manajemen Basis Data Menggunakan MySQL”,(Sleman:Deepublish

2016),Hal 40-41
 43

a. Derajat kardinalitas One to one (1:1) - Hubungan yang

menjelaskan satu ke satu.

b. Derajat kardinalitas One To Many Relationship (1:M) - Hubungan

yang menjelaskan satu ke banyak.

c. Derajat kardinalitas Many To Many Relationship (M:M) -

Hubungan yang menjelaskan banyak ke banyak.

Simbol-simbol yang digunakan dalam Entity Relationship Diagram

sebagai berikut ini:

Tabel 2.6 Simbol Entity Relationship Diagram

SIMBOL KETERANGAN

Entity. Simbol yang menyatakan

himpunan entitas ini bisa berupa : suatu

elemen lingkungan, sumber daya, atau

transaksi, yang begitu pentingnya bagi

perusahaan sehingga didokumentasikan

dengan data.

Attribute. Simbol terminal ini untuk

menunjukkan nama-nama atribut yang ada

pada entiti.

Primary Key Attribute. Simbol atribut

yang digarisbawahi, berfungsi sebagai key

(kunci) di antara nama-nama atribut yang ada

pada suatu entiti.

 44

Relationship. Simbol ini menyatakan

relasi ini digunakan untuk menunjukkan

hubungan yang ada antara entiti yang satu

dengan entiti yang lainnya.

Link. Simbol berupa garis ini digunakan

sebagai penghubung antara himpunan relasi

dengan himpunan entitas dan himpunan

entitas dengan atributnya.

Normalisasi

Normalisasi merupakan tahapan pengelompokan komponen data yang

menjadi tabel yang menunjukkan entitas pada suatu relasi. Dengan normalisasi

kita akan merancang sebuah set data yang memenuhi syarat dalam basis data

diantaranya41:

a) Terdiri dari data utama

b) Redudancy

c) Akomodasi Multi Value

d) Memberikan ijin untuk melakukan perubahan data yang efisien dalam

basis data.

41
Robi Yanto, M. Kom, “Manajemen Basis Data Menggunakan MySQL”,(Sleman:Deepublish

2016),Hal 55
 45

e) Tidak terjadi kehilangan data dalam basis data.

Secara umum proses normalisasi dibagi menjadi tiga tahap, yaitu tahap

tidak normal, normalisasi tahap 1, normalisasi tahap 2, normalisasi tahap 3.

Pada tahap ketiga biasanya sudah akan diperoleh tabel yang optimal42.

1. Bentuk normal tahap 1 (1st Normalized Form)

Pada tahap ini, dibentuk tabel-tabel yang menampung data yang ada dan

dikelompokan berdasarkan suatu karakteristik tertentu. Pada tahap ini

usahakan tidak ada set atribut yang berulang, telah ditentukan primary

keynya dan tiap atribut hanya boleh memiliki satu pengertian.

2. Bentuk normal tahap 2 (2nd Normalized Form)

Tabel dikatakan normalisasi kedua jika telah memenuhi syarat

normalisasi pertama dan semua atribut bukan kunci bergantung pada

semua atribut kunci pada satu tabel.

3. Bentuk normal tahap 3 (3rd Normalized Form)

Tabel dikatakan normalisasi kedua jika telah memenuhi syarat

normalisasi kedua dan dalam satu tabel terdapat atribut tidak ada

ketergantungan transitif artinya setiap atribut dapat menjadi atribut pada

42
Robi Yanto, M. Kom, “Manajemen Basis Data Menggunakan

MySQL”,(Sleman:Deepublish:2016),Hal 56-57
 46

suatu relasi tetap menjadi kunci pada relasi lain. Setiap tabel yang bukan

kunci harus ketergantungan pada primary key.

Kamus Data

Menurut Prof. Dr. Jogianto Kamus data adalah katalog fakta tentang fakta

dan kebutuhan informasi dari suatu sistem dengan mendefinisikan data yang

mengalir pada suatu sistem secara lengkap. Kamus data dibuat berdasarkan

arus data yang ada di DAD. Isi yang ada didalam kamus data, diantaranya

adalah43:

1. Nama arus data

Dalam membaca DAD diperlukan penjelasan lebih lanjut tentang

aliran data maka dari itu nama alir data dicata pada kamus data.

2. Alias

Alias ditulis untuk menyatakan nama lain dari data elemen atau data

store yang sebenarnya sudah ada.

3. Bentuk Data

43
Prof. Dr. Jogianto, “Analisis & desain sistem pendekatan terstruktur teori dan praktek aplikasi

bisnis”,(Yogyakarta: Andi 2010) edisi 4, Hal 725.

 47

Bentuk data dari yang mengalir dapat berupa dokumen dasar atau

formulir, dokumen hasil cetakan komputer, laporan tercetak, tampilan

layar di monitor, field-field.

4. Arus Data

Arus data menunjukan darimana data mengalir dan ke mana data akan

menuju, keterangan arus data perlu dicatat di kamus data untuk

memudahkan mencari arus data di DAD.

5. Struktur Data

Struktur data menunjukan harus data yang dicatat di kamus data

terdiridari item - item data apa saja.