BAB II

TINJUAN REFERENSI

2.1. Teori Aplikasi berbasis Web

Aplikasi berbasis web merupakan sebuah aplikasi yang menggunakan teknologi browser

untuk menjalankan aplikasi dan di akses melalui jaringan computer(Remick; 2011).

Sedangkan menurut (Rouse; 2011) aplikasi web adalah sebuah program yang di simpan di

Server dan dikirim melalui internet dan diakses melalui antarmuka browser.

Dari pengertian diatas dapat disimpulkan aplikasi web merupakan aplikasi yang diakses

mengunakan web browser melalui jaringan internet atau intranet. Aplikasi web juga

merupakan suatu perangkat lunak komputer yang dikodekan dalam bahasa pemrograman

yang mendukung perangkat lunak berbasis web seperti HTML, JavaScript, CSS, Ruby,

Python, Php, Java dan bahasa pemrograman lainnya. Adapun Gambaran rincian aplikasi

web adalah sebagai berikut :

Gambar 2.1 Rincian Aplikasi Web

Sumber : http://strukturkode.blogspot.com/2013/04/pengertian-aplikasi-web.html
2.2. PHP
Menurut [ CITATION Roh16 \l 1033 ]PHP singkatan dari Hypertext Preprocessor yang
merupakan server-side programing, yaitu bahasa pemrograman yang diproses di sisi
server. Fungsi utama PHP dalam membangun website adalah untuk melakukan pengolahan
data pada database.
Menurut [ CITATION Put16 \l 1033 ] bahasa pemrograman PHP merupakan bahasa
pemrograman yang dikategorikan kepada Server Side Programing, yang artinya bahasa
pemrograman ini memerlukan penerjemah dalam hal ini web server untuk
menjalankannya. Kelebihan dari bahasa pemrograman PHP antara lain sebagai berikut:
1. PHP adalah bahasa multiplatform yang artinya dapat berjalan di berbagai mesin dan
sistem operasi (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara
runtime melalui console serta juga dapat menjalankan perintah-perintah sistem
lainnya.
2. PHP bersifat open source yang berarti dapat digunakan oleh siapa saja secara gratis.
3. Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai
apache, IIS, Lighttpd, nginx, hingga Xitami dengan konfigurasi yang relatif mudah
dan tidak berbelit-belit, bahkan banyak yang membuat dalam bentuk et atau
package (PHP, MySQL dan Web Server).
4. Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis. Komunitas
dan developer yang siap membantu dalam pengembangan
5. Dalam sisi pemahaman, PHP adalah bahasa scripting yang paling mudah karena
memiliki referensi yang banyak.
6. Dapat mendukung banyak database, seperti MySQL, Oracle, MS-SQL, dan
seterusnya.

Dari sekian banyak kelebihan yang dimiliki oleh bahasa pemrograman PHP, tentu tidak
berarti tidak ada kekurangannya. Berikut ini kekurangan bahasa pemrograman web PHP,
yaitu:
1. PHP tidak mengenal Package.
2. Jika tidak di-encoding, maka kode PHP dapat dibaca semua orang dan untuk meng-
encoding-nya dibutuhkan tool dari Zend yang mahal sekali biayanya.
3. PHP memiliki kelemahan keamanan. Jadi programmer harus berhati-hati dalam melakukan
pemrograman dan konfigurasi PHP.

2.3. Hypertext Markup Language 5 (HTML5)

Menurut Syafrizal (2018, p. 8) HTLM5 adalah sebuah bahasa markah untuk
menstrukturkan dan menampilkan isi dari WWW (world wide web) sebuah teknologi inti
dari internet. HTML5 adalah revisi kelima dari HTML yang pertama kali diciptakan pada
tahun 1990. HTML5 merupakan salah satu karya World Wide Web Consortium (W3C)
untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML
ataupun XHTML. Salah satu kelebihan dari HTML5 adalah mendukung untuk
penyimpanan secara offline.
Adapun salah satu fitur yang ada pada HTML5 yaitu Canvas, dan menurut Alfaiz
(2017, p.46) HTML5 Canvas adalah bagian pada HTML5 yang merupakan bitmapped
area dan dapat dimanipulasi dengan menggunakan Javascript. HTML5 Canvas dapat
digunakan untuk mengolah dan menampilkan data dalam bentuk grafik pada HTML

2.4. Cascading Style Sheets (CSS)

Menurut penjelasan Tutorialspoint.com, Cascading Style Sheets (CSS) adalah bahasa
desain sederhana yang bertujuan untuk menyederhanakan proses pembuatan halaman web
yang rapi. CSS dapat mengontrol warna teks, gaya font, jarak antar paragraf, bagaimana
ukuran kolom dan tata letak, gambar latar atau warna apa yang digunakan, serta berbagai
efek lainnya.
Sedangkan menurut (Kadir, 2014), Cascading Style Sheets (CSS) adalah suatu bahasa
stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam
bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman
web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat
dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS
diatur oleh World Wide Web Consortium (W3C). CSS digunakan oleh penulis maupun
pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek
tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang
ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis
dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak
keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan
pada stuktur isi. Berikut adalah contoh dari kodingan CSS

2.5. MySQL
Menurut [ CITATION Rah11 \l 1033 ], MySQL merupakan RDBMS (atau server
database) yang mengelola database dengan cepat menampung dalam jumlah sangat besar
dan dapat diakses oleh banyak user.
Adapun menurut [ CITATION Hav16 \l 1033 ], MySQL adalah nama database server.
Database server adalah server yang berfungsi untuk menangani database. Dengan
menggunakan MySQL, kita bias menyimpan data dan kemudian data biasa di akses dengan
cara yang mudah dan cepat. MySQL tergolong sebagai database relasional. Pada model ini,
data dinyatakan dalam bentuk dua dimensi yang secara khusus dinamakan table. Dan table
tersusun atas baris dan kolom
Kesimpulan dari pendapat diatas bahwa MySQL merupakan suatu program yang
bersifat open source digunakan untuk membuat sebuah database.

2.6. Laravel
Laravel adalah satu-satunya framework yang membantu anda untuk memaksimalkan
penggunaan PHP di dalam pengenmbangan website.

PHP menjadi bahasa pemograman yang sangat dinamis, tapi semenjak adanya Laravel, dia
menjadi lebih powerful, cepat, aman, dan simpel. Setiap rilis versi terbaru, Laravel selalu
memunculukan teknologi baru di antara framework PHP lainnya.

Laravel diluncurkan sejak tahun 2011 dan mengalami pertumbuhan yang cukup
eksponensial. Di tahun 2015 , Laravel adalah framework yang paling banyak mendapatkan
bintang di Github. Sekarang framework ini menjadi salah satu yang popular di dunia, tidak
terkecuali di Indonesia.

Laravel fokus di bagian end-user,yang berarti fokus pada kejelasan dan kesederhanaan,
baik penulisan maupun tampilan, serta menghasilkan fungsionalitas aplikasi web yang
bekerja sebagaimana mestinya. Hal ini membuat developer maupun perusahaan
menggunakan framework in untuk membangun apapun, mulai dari proyek kecil hingga
skala perusahaan kelas atas.

Laravel mengubah pengembangan website menjadi lebih elegan, ekspresifm dan

menyenangkan, sesuai dengan jargonnya “The PHP Framework For Web Artisans”. Selain
itu, Laravel juga mempermudah proses pengembangan website dengan bantuan beberapa
fitur unggulan, seperti Template Engine, Routing, dan Modularity.
Manfaat Laravel untuk Proses pengembangan Website

1. Website menjadi lebih scalable(mudah dikembangkan)

2. Terdapat namespace dan tampilan yang membantu anda untuk
mengorganisir dan mengatur sumber daya website
3. Proses pengembangan menjadi lebih cepat sehingga menghemat waktu
karena Laravel dapat dikombinasikan dengan beberapa komponen dari
framework lain untuk mengembangkan website.

2 Tools Andalan Laravel

1. Composer
Composer merupakan tool yang di dalamnya terdapat dependencies dan
kumpulan library. Seluruh dependencies disimpan menggunakan format
file composer.json sehingga dapat ditempatkan didalam folder utama
website. Inilah mengapa composer terkadang dikenal dengan
dependencies management.

2. Artisan
Artisan merupakan command line interface yang dimiliki oleh Laravel.
Artisan mencakup sekumpulan perintah yang membantu anda untuk
membangun sebuah website atau aplikasi web.

Kumpulan perintah Artisan juga termasuk penggabungan dengan

framework Symphony yang menghasilkan fitur add-on di Laravel 5.1.
Dengan adanya fitur add-on, anda bisa menambahkan berbagai macam
fitur baru ke Laravel.

2.7. Progressive Web Apps (PWA)

PWA adalah aplikasi yang berjalan layaknya aplikasi native,notifikasi dan UX seperti
aplikasi native namun PWA tetap merupakan website biasa yang dijalankan melalui
browser [6]. Ada beberapa kriteria yang dapat mewakili PWA yang akan saya jelaskan
dibawah ini :
 Instant Loading, teknologi yang mampu membuat PWA ini bisa digunakan offline
bahkan pada koneksi yang terburuk ialah karena service worker. Teknologi service worker
memiliki mekanisme untuk mengontrol asset yang akan di simpan di chace serta
menyediakan custom permintaan ke jaringan sehingga dapat memberikan pengalaman
akses offline bagi pengguna [6]. Namun untuk dapat menggunakannya pertama kali
pengguna harus mengakses website terlebih dahulu. Setelah semua asset ter-chace oleh
service worker, sekalipun koneksi terputus pengguna akan tetap bisa membuka website
tersebut.

Add to homescreen, salah satu yang membuat PWA seperti native yaitu mempunyai
kemampuan untuk menambahkan icon ke layer homescreen [6]. Jadi pengguna lebih
mudah untuk membuka kembali aplikasi web tanpa harus mengakses URL-nya kembali
melalui browser. Google menyediakan web app manifest yang berisi pengaturan tampilan
agar ketika dibuka aplikasi web terbuka full screen tanpa menampilkan addres bar lagi.

Secure (aman), untuk dapat menggunakan service worker web haruslah sudah
menggunakan protocol HTTPS. HTTPS akan menyandikan atau mengenkripsi data sesi
menggunakan protocol SSL (Secure Socket Layer) atau protocol TLS (Transport Layer
Security). Jadi data diantara server web dan pengguna aka lebih aman.

2.7.1 Instan Loading

Progressive web apps sudah menggunakan service worker dengan cukup baik, jadi
website ini mampu loading dalam keadaan offline sekalipun. Tekonologi service worker
memiliki kemampuan untuk dapat mengontrol asset yang akan dicache. Teknologi ini juga
menyediakan custome permintaan jaringan sehingga dapat memberikan layanan meski dalam
keadaan offline. Namun untuk dapat menggunakan aplikasi ini tetap harus mengakses website
terlebih dahulu. Setelah program cache terbaca maka selanjutnya tetap dapat menikmati layanan
meski dalam keadaan offline sekalipun.

2.7.2 Add to HomeScreen

Dapat dikatakan bahwa Progressive Web App ini sebuah apliksi native karena dapat
menambahkan icon aplikasi pada home screen layar utama. Anda dapat mengakses PWA ini
dengan mudah dan cepat. Tidak peduli dengan kelancaran jaringan yang pelan atau cepat.
 Semua aktivitas terbaru dari situs tersebut tetap dapat dinikmati dengan cara yang
menyenangkan. Selain itu, Anda masih dapat melihat notifikasi sekaligus mengatur tanpa harus
masuk lagi melalui adreest bar lagi. Anda juga tidak perlu memasukkan URL sudah dapat
membuka dan melebarkan aplikasi dengan mudah. Pastikan bahwa Anda sudah lebih dahulu
masuk secara hybrid, kemudian PWA tinggal merekam dan memasukkan beragam data yang
sudah ada.

2.7.3 Notifikasi

Sejak munculnya chrome 42, google sudah mendukung notifkasi secara penuh pada
beberapa aplikasi agar lebih memudahkan pengguna dalam menggunakan layanannya. Namun
rupanya hal ini menyulitkan para developer web sebab harus memberi koding satu per satu agar
lebih memudahkan dalam proses aplikasi. Apabila apple, mozila, google dan microsof sepakat
menentukan standar API maka hal tersebut akan membuat pekerjaan para developer semakin
mudah dalam memberikan koding aplikasi. Progressive Web App ini sudah dapat memberikan
notifikasi secara aktif dan terkini.

2.7.4 Cepat

Harapan dari adanya Progressive Web App ini dapat membuat pengguna semakin mudah
dalam menggunakan aplikasi ini. Apabila sebuah situs tidak mengandalkan jaringan sebagai
modal utama, tentu selanjutnya tinggal menentukan isi konten yang jelas dan berani. Jelas dalam
memberikan informasi dan berani dalam memberikan wacana baru yang menarik.  Agar tulisan
web tetap terjaga dengan baik, Anda perlu memperhatikan html, javascript dan css yang
ditangani pada tiap browser. Karena tiap koding browser ini memiliki beragam perbedaan. Inilah
yang patut diperhatikan oleh pengusaha developer web dalam membuat produk yang mereka
berikan. Meski sudah banyak aplikasi yang sesuai dengan standar mobile. Tetap saja keberadaan
PWA ini masih dapat dikatakan belum stabil. Sebagai pengguna, Anda harus memperhatikan
agar aplikasi tersebut tetap dapat berjalan dengan baik

2.7.5 Aman

Untuk dapat menggunakan service worker web dengan baik, Anda harus menggunakan
protokol HTTPS. Protocol ini akan menyandikan data sesi menggunakan SSL (Secure Soket
Layer) atau TLS (Transport Layer Security). Dengan adanya 2 protokol ini akan membuat data
server dan data pengguna menjadi lebih aman. Apabila tidak terproteksi dengan baik, maka
penysup dapat mengambil data melalui browser pengguna. Akan ada gambar, cookie dan scrip
dapat diekploitasi dengan mudah. Gangguan dapat terjadi pada setiap gangguan jaringan
termasuk computer pengguna, ISP dan hotspot wifi. HTTPS membantu mencegah penyusup dari
gangguan komunikasi antara website.

Di Indonesia, ISP banyak digunakan untuk menginjek iklan ketika membuka sebuah web.
Beberapa penyusup akan memberikan virus atau mengelabui pengguna agar menginstal malware
secara tidak langsung.  Ada beberapa pihak yang sengaja menyuntikkan iklan pada beberapa web
untuk diambil data dan memecah pengalaman pengguna. Sejak tahun 2014 google sudah
menggunakan HTTPS ini dan memberikan prioritas sinyal peringkat pada mesin pencarinya.
Kehadiran Progressive Web App ini sudah cukup aman dan terpercaya.

2.7.6 Responsive

Google sangat mendukung responsive ini dengan cukup baik. Di era yang semakin
canggih ini banyak pengguna yang bergeser menggunakan destop ke aplikasi mobile. Tentu saja
sebuah Progressive Web App sangat responsive terhadap berbagai aplikasi baik berupa
smartphone, mobile, destop dan tablet. Keberadaan PWA ini memang memberi kabar baik bagi
pecinta dunia maya yang haus akan teknologi baru yang terbarukan. Selain dapat dikatakan
hemat kuota, menggunakan PWA ini juga dapat melayani pembaca dengan sangat baik.

2.8. Model View Controller (MVC)

Menurut Tutorialspoint.com Model-View-Controller (MVC) adalah pola arsitektur yang
memisahkan aplikasi menjadi tiga komponen logis utama: model, tampilan, dan pengontrol.
Masing-masing komponen ini dibangun untuk menangani aspek pengembangan spesifik
aplikasi. MVC adalah salah satu kerangka kerja pengembangan web standar industri yang
paling sering digunakan untuk membuat proyek yang dapat diperluas.

Gambar 2. 1 Struktuk MVC

(Sumber: https://www.tutorialspoint.com/mvc_framework/, diakses 8 Oktober
2018)
1. Model
Komponen Model dapat mewakili data yang akan ditransfer antara komponen View
dan Controller atau data yang terkait dengan logika relasi lainnya. Misalnya, objek
pelanggan akan mengambil informasinya dari database, memanipulasinya dan
memperbarui datanya kembali ke database atau menggunakannya untuk ditampilkan
datanya.
2. View
Komponen View digunakan untuk semua logika user interface (UI) dari aplikasi.
Misalnya, tampilan pelanggan akan mencakup semua komponen UI seperti kotak teks,
dropdown, dan lain-lainnya.
3. Controller
Controller bertindak sebagai antarmuka antara Model dan komponen View untuk memproses
semua logika relasi dan permintaan yang masuk, memanipulasi data menggunakan komponen
Model dan berinteraksi dengan Views untuk menampilkan hasil akhir. Misalnya, Controller
Pelanggan akan menangani semua interaksi dan input dari View Pelanggan dan memperbarui
basis data menggunakan Model Pelanggan.

2.9. UML
“Unified Modelling Language(UML) adalah bahasa spesifikasi standar yang dipergunakan
untuk mendokumentasikan, menspesifikasikan dan membangun perangkat lunak. UML
merupakan metodologi dalam mengembangkan system berorientasi objek dan juga
merupakan alat untuk mendukung pengembangan system”(Windu dan Grace, 2013).

Unified Modelling Language(UML) adalah sebuah bahasa yang berdasarkan grafik atau
gambar untuk memvisualisasi, menspesifikasikan, membangun, dan pendokumentasikan
dari sebuah sistem pengembangan software berbasis OO(Object-Oriented). UML sendiri
juga memberikan standar penulisan sebuah sistem blue-print, yang meliputi konsep bisnis
proses, penulisan kelas-kelas dalam bahasa program yang spesifik, skema database, dan
komponen-komponen yang diperlukan dalam sistem software (http://www.omg.org).
Diagram Unified Modelling Language (UML). (Siti Fatima, 2015) antara lain sebagai
berikut:
1) Use Case Diagram
Use Case Diagram menggambarkan external view dari sistem yang akan
kita buat modelnya (Prabowo Pudjo Widodo, 2011) Model use case dapat
dijabarkan dalam diagram use case, tetapi perlu diingat, diagram tidak
identik dengan model karena model lebih luas dari diagram. (Pooley,
2003:15). Use case harus mampu menggambarkan urutan faktor yang
menghasilka nilai terukur(Prabowo Pudjo Widodo, 2011).

2) Class Diagram

Kelas sebagai suatu set objek yang memiliki atribut dan perilaku yang sama,
kelas kadang disebut kelas objek (Whitten, 2004:410). Class memiliki tiga
area pokok yaitu :

a) Nama, kelas harus mempunyai sebuah nama.

b) Atribut, adalah kelengkapan yang melekat pada kelas. Nilai dari
suatu kelas hanya bisa diproses sebatas atribut yang dimiliki.
c) Operasi, adalah proses yang dapat dilakukan oleh sebuah kelas,
baik pada kelas itu sendiri ataupun kepada kelas lainnya.

3) Activity Diagram

Diagram Activity menunjukkan aktivitas sistem dalam bentuk kumpulan

aksi-aksi, bagaimana masing-masing aksi tersebut dimulai, keputusan yang
mungkin terjadi hingga berakhirnya aksi. Activity Diagram juga dapat
menggambarkan proses lebih dari suatu aksi dalam waktu bersamaan.
“Diagram Activity adalah aktifitas-aktifitas, objek, state, transisi state dan
event. Dengan kata lain kegiatan diagram alur kerja menggambarkan
perilaku sistem untuk aktivitas.”(Haviluddin, 2011).

4) Sequence Diagram
 “Secara mudahnya sequence diagram adalah gambaran tahap demi tahap,
termasuk kronologi (urutan) perubahan secara logis yang seharusnya
dilakukan untuk menghasilkan sesuatu sesuai dengan use case
diagram.”(Haviluddin, 2011).

2.10 Java Script

Pengertian JavaScript JavaScript adalah bahasa pemrograman yang sederhana karena

bahasa ini tidak dapat digunakan untuk membuat aplikasi ataupun applet. Dengan
JavaScript kita dapat dengan mudah membuat sebuah halaman web yang interaktif.
ProgramJavaScript dituliskan pada file HTML (*.htm*.html). (Dhewiberta Hardjono,
2006 : 4)

2.11 Software Testing

Software Testing adalah pengujian yang dilakukan pada sistem dengan tujuan untuk
verifikasi apakah sistem telah berlaku sebagaimana telah ditetapkan, mendeteksi error
dan validasi apakah sistem sudah memenuhi keinginan atau kebutuhan dari pengguna.
Terdapat dua metode dalam software testing yaitu :  White Box Testing White box
testing adalah pengujian yang dilakukan dengan melihat kode – kode program yang ada
untuk memastikan 49 software beroperasi berdasarkan spesifikasi dan desain yang sudah
ditetapkan . Manfaat pengujian software dengan white box adalah untuk memastikan : 1.
Semua path independen di eksesuksi minimal satu kali 2. Semua keputusan logika
dieksekusi baik untuk path benar dan salah 3. Loop dieksekusi pada nilai batasnya 4.
Semua struktur data internal dicoba untuk memastikan ke validan dari software  Black
Box Testing Black box testing adalah pengujian perangkat lunak yang tidak meneliti
kode program dari software tersebut. Blackbox testing memfokuskan pada kebutuhan
fungsional dari software . Black box testing berusaha menemukan kesalahan dalam
kategori : 1. Fungsionalitas software yang tidak benar 2. Kesalahan interface 3.
Kesalahan dalam struktr data atau akses database.
2.12 Portable Toilet

Portable Toilet adalah sebuah alat untuk kebutuhan sanitary yang digunakan ketika wc
permanen tidak ada, seperti sedang melakukan kegiatan event-event, proyek dan lain-
lain.

Pemasangan sangat mudah, tinggal di alirkan ke pipa pembuangan dan bias langsung
di alirkan ke selokan atau kali terdekat, karena hasil limbah yang dikeluarkan dari
portable toilet kami tidak lagi mencemari lingkungan.

2.13 Interaksi Manusia Komputer(IMK)

 Pada tahun 1970 mulai dikenal istilah antarmuka pengguna(user interface)

Yang juga dikenal dengan istilah Man-Machine Interface(MMI), dan mulai menjadi
topik perhatian bagi peneliti dan perancang system.
 Perusahaan computer mulai memikirkan aspek fisik dari antarmuka pengguna
sebagai faktor penentu keberhasilan dalam pemasaran produknya.
 Istilah human-computer interaction (HCI)mulai muncul pertengahan tahun 1980-an
sebagai bidang studi yang baru.
 Istilah HCI mengisyaratkan bahwa bidang studi ini mempunyai fokus yang lebih
luas,tidak hanya sekedar perancangan antarmuka secara fisik.

Definisi IMK

 Sekumpulan proses, dialog, dan kegiatan dimana melaluinya pengguna

memanfaatkan dan berinteraksi dengan computer
 Suatu disiplin ilmu yang menekankan pada aspek desain, evaluasi, dan
implementasi dari sistem komputer interaktif untuk kegunaan manusia dengan
mempertimbangkan fenomena-fenomena disekitar manusia itu sendiri
 Suatu studi ilmiah tentang masyarakat didalam lingkungan kerjanya
 HCI didefinisikan sebagai disiplin ilmu yang berhubungan dengan perancangan,
evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh
manusia dan studi tentang fenomena di sekitarnya.
 HCI pada prinsipnya membuat agar sistem dapat berdialog dengan penggunanya
seramah mungkin.