PERANCANGAN KUISIONER EVALUASI MUTU BERBASIS

MOBILE WEB APPLICATION MENGGUNAKAN PWA

(Progressive Web App) (Studi Kasus : simutu.umm.ac.id)

Tugas Akhir

Diajukan Untuk Memenuhi

Persyaratan Guna Meraih Gelar Sarjana Strata 1

Teknik Informatika Universitas Muhammadiyah Malang

GRANODIO DAEGAL WIBOWO

(201310370311247)

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG

Oktober 2017

i

LEMBAR PERSETUJUAN

Skripsi Dengan Judul :

PERANCANGAN KUISIONER EVALUASI MUTU BERBASIS

MOBILE WEB APPLICATION MENGGUNAKAN PWA

(Progressive Web App) (Studi Kasus : simutu.umm.ac.id)

Diajukan Oleh:

Granodio Daegal Wibowo

201310370311247

Telah Memenuhi Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang

Menyetujui,

Dosen Pembimbing I

Galih Wasis W, S.Kom., M.Cs NIDN. 0723028801

Dosen Pembimbing II

Wildan Suharso, S.Kom., M.Kom NIDN. 0730038405

ii

LEMBAR PENGESAHAN

PERANCANGAN KUISIONER EVALUASI MUTU BERBASIS MOBILE

WEB APPLICATION MENGGUNAKAN PWA (Progressive Web App)

(Studi Kasus : simutu.umm.ac.id)

TUGAS AKHIR

Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata 1

Teknik Informatika Universitas Muhammadiyah Malang

Disusun Oleh:

GRANODIO DAEGAL WIBOWO

201310370311247

Tugas Akhir ini telah diuji dan dinyatakan lulus melalui sidang majelis penguji

pada tanggal 31 Oktober 2017

Menyetujui,

Penguji I

Gita Indah Marthasari, ST.,M.Kom. NIP. 108.0611.0442

Penguji II

Wahyu Andhyka K, S.Kom, M.Kom.

NIP. 108.1410.0543

Mengetahui Ketua Jurusan Teknik Informatika

Yuda Munarko, S.Kom., M.Sc. NIP. 108.0611.0443

iii

LEMBAR PERNYATAAN

Yang bertanda tangan dibawah ini:

NAMA : GRANODIO DAEGAL WIBOWO

NIM : 201310370311247

FAK/JUR : TEKNIK/TEKNIK INFORMATIKA

Dengan ini saya menyatalan bahwa Tugas Akhir dengan judul

“PERANCANGAN KUISIONER EVALUASI MUTU BERBASIS MOBILE

WEB APPLICATION MENGGUNAKAN PWA (Progressive Web App)

(Studi Kasus : simutu.umm.ac.id)” beserta seluruh isinya adalah karya saya

sendiri dan bukan merupakan karya orang lain, baik sebagian maupun seluruhnya,

kecuali dalam bentuk kutipan yang telah saya sebutkan sumbernya.

Demikian surat pernyataan ini saya buat dengan sebebnar-benarnya.

Apabila kemudian ditemukan adanya pelanggaran terhadap etika keilmuan dalam

karya saya ini, atau ada klaim dari pihak lain terhadap keaslian karya saya ini maka

saya siap menanggung segala bentuk resiko/sanksi yang berlaku.

Malang, Oktober 2017

Yang Menyatakan

Granodio Daegal Wibowo NIM: 201310370311247

Mengetahui,

Dosen Pembimbing I

Galih Wasis W, S.Kom., M.Cs NIDN. 0723028801

Dosen Pembimbing II

Wildan Suharso, S.Kom., M.Kom NIDN. 0730038405

iv

LEMBAR PERSEMBAHAN

Puji syukur kepada Allah SWT atas rahmat dan karunia nya sehingga

penulis dapat menyelesaikan Tugas Akhir ini. Selama penulisan skripsi ini tentunya

penulis mendapat banyak bantuan dari berbagai pihak yang telah mendukung dan

membimbing penulis. Penulis menyampaikan ucapan terima kasih yang sebesar

besar nya kepada :

1. Allah SWT yang selalu memberikan kesehatan dan petunjuk dalam

pengerjaan tugas akhir ini.

2. Kedua orangtua saya, Ramadi Seno dan Susilowati yang tak pernah henti

memberikan semangat, dukungan, serta do’a. Sebagai tanda cinta dan rasa

terimakasih yang tiada terhingga saya persembahkan karya kecil saya ini

untuk kalian.

3. Kekasih saya Nur Wildania Sholichah yang tidak pernah lelah memberi

dukungan dan motivasi saat bersama – sama menempuh skripsi untuk

memperoleh gelar sarjana.

4. Dosen pembimbing Bapak Galih Wasis W dan Bapak Wildan Suharso yang

selalu sabar memberikan bimbingan dan arahan.

5. Bapak Ir. Sudarman, M.T selaku Dekan Fakultas Teknik Universitas

Muhammadiyah Malang.

6. Bapak Yuda Munarko, S.Kom.,M.sc selaku Ketua Jurusan Teknik

Informatika Universitas Muhammadiyah Malang.

7. Pihak Dosen Pengajar yang telah memberikan ilmunya, beserta Staff TU

Jurusan Teknik Informatika.

8. Teman-Teman IT-F 2013 dan seluruh angkatan 2013 terimakasih telah

bersedia untuk berbagi suka dan duka selama 4 tahun ini.

9. Teman – teman dari kecil geng Seng Penting Mlaku terimakasih selalu

mendukung dan menyemangati saya.

10. Teman seperjuangan saya di kelas Mentari Mas’ama Safitri , Adam

Rachman dan teman – teman kontrakan, atas dukungan dan

kebersamaannya.

v

KATA PENGANTAR

Dengan memanjatkan puji syukur kehadirat Allah SWT atas limpahan rahmat dan

hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul :

Perancangan Kuisioner Mutu Berbasis Mobile Web Application

Menggunakan PWA (Progressive Web Application) (Studi Kasus :

simutu.um.ac.id)

Di dalam tulisan ini disajikan pokok-pokok bahasan yang meliputi Web

Application, JSON, Service Worker, Single Page Apllication dan Sistem Informasi

Mutu UMM sebagai studi kasus nya. Selain itu, juga akan disampaikan mengenai

pengujian-pengujian yang dilakukan dalam penelitian ini.

Peneliti menyadari masih banyak kekurangan dan keterbatasan dalam penulisan

tugas akhir ini. Untuk itu, penulis sangat mengharapkan saran yang membangun

agar tulisan ini dapat berguna untuk perkembangan ilmu pengetahuan kedepan.

Malang, 22 Desember 2017

Penulis

Granodio Daegal Wibowo

vi

ABSTRAK

Perguruan Tinggi (PT) atau Universitas memiliki kewajiban untuk

melaksanakan aktivitas penjaminan mutu secara otonom, sebagai bagian dari

upaya meningkatkan dan mengendalikan penyelenggaraan pendidikan tinggi yang

berkualitas. Sistem Informasi Manajemen Mutu (SIMUTU) merupakan

implementasi SPMI di Universitas Muhammadiyah Malang yang dilaksanakan

oleh Badan Kendali Mutu Akademik (BKMA). Pada penelitian sebelumya SIMUTU

menggunakan SOAP untuk kecepatan pertukaran data masih lambat dibanding

dengan menggunakan SPA (Single Page Applcation). Untuk mempermudah dalam

pengaksesan SIMUTU penulis memanfaatkan Progressive Web App (PWA) yang

menggunakan teknologi REST API agar pertukaran data lebih cepat tanpa loading

yang lama pada jaringan buruk sekalipun. Mahasiswa dapat mengakses SIMUTU

di smartphone maupun laptop tanpa harus menginstal aplikasi dan menghabiskan

banyak ruang penyimpanan, serta dapat diakses secara offline. Berdasarkan

penjelasan diatas penulis mengambil tema dalam Tugas Akhir ini dengan judul

“Perancangan Kuisioner Evaluasi Mutu Berbasis Mobile Menggunakan PWA

(Progressive Web App)”. Dengan sistem ini diharapkan dapat membantu

mahasiswa agar dapat mengakses SIMUTU dengan mudah.

Kata Kunci : REST API, web service, AJAX, Single Page Application.

vii

ABSTRACT

The University has an obligation to perform autonomous quality assurance

activities, as part of efforts to improve and control the implementation of higher

education quality. Quality Management Information System (SIMUTU) is an

implementation of SPMI at the University of Muhammadiyah Malang implemented

by Academic Quality Control Board (BKMA). In previous studies SIMUTU using

SOAP for data exchange rate is still slow compared to using SPA (Single Page

Applcation). To make it easier in accessing SIMUTU the author utilizes Progressive

Web App (PWA) that uses REST API technology to exchange data faster without

loading the old one on bad network though. Students can access SIMUTU on

smartphones or laptops without having to install the app and spend a lot of storage

space, and can be accessed offline. Based on the above explanation the authors take

the theme in this Final Project with the title "Designing Questionnaire Evaluation

of Mobile Based Quality Using PWA (Progressive Web App)". With this system is

expected to help students to access SIMUTU easily.

Keywords: REST API, web service, AJAX, Single Page Application.

viii

DAFTAR ISI

LEMBAR PERSETUJUAN............................................................................. i

LEMBAR PENGESAHAN ............................................................................. ii

LEMBAR PERNYATAAN ............................................................................. iii

LEMBAR PERSEMBAHAN .......................................................................... iv

KATA PENGANTAR ..................................................................................... v

ABSTRAK ....................................................................................................... vi

DAFTAR ISI .................................................................................................... viii

DAFTAR GAMBAR ....................................................................................... xi

DAFTAR TABEL ............................................................................................ xiii

BAB I PENDAHULUAN ................................................................................ 1

1.1 Latar Belakang ...................................................................................... 1

1.2 Rumusan Masalah ................................................................................. 3

1.3 Tujuan .................................................................................................... 3

1.4 Batasan Masalah .................................................................................... 3

1.5 Metodologi Penelitian ........................................................................... 4

1.6 Sistematika Penulisan ............................................................................ 6

BAB II LANDASAN TEORI

2.1 Sistem Informasi Manajemen Mutu ...................................................... 7

2.2 Web Service .......................................................................................... 8

2.2.1 Pengertian Web Service ................................................................. 8

2.2.2 Komponen Web Service ................................................................ 9

2.2.3 REST Web Service ........................................................................ 10

2.3 Progressive Web Appplication .............................................................. 11

2.3.1 Hybrid Application ........................................................................ 11

2.3.2 Sngle Page Application ................................................................. 12

2.3.3 Application Shell Architecture ...................................................... 13

2.3.4 Service Worker .............................................................................. 14

2.3.5 Pengenalan JSON .......................................................................... 18

BAB III ANALISA DAN PERANCANGAN SISTEM

3.1 Pengumpulan Data ................................................................................ 21

ix

3.2 Analisa Data .......................................................................................... 22

3.3 Analisa Kebutuhan Fungsional ............................................................. 22

3.3.1 Use Case Diagram SIMUTU ......................................................... 23

3.3.2 Sequence Diagram ......................................................................... 24

3.3.3 Activity Diagram .......................................................................... 25

3.4 Analisa Kebutuhan Non Fungsional...................................................... 27

3.4.1 Arsitektur Sistem ........................................................................... 28

3.4.2 Perancangan Database ................................................................... 28

3.4.3 Bisnis Proses .................................................................................. 29

3.4.4 Integrasi Sistem ............................................................................. 31

3.5 Desain Antarmuka ................................................................................. 32

3.4.1 Desain Halaman Login .................................................................. 32

3.4.2 Desain Halaman Evaluasi Pembelajaran ....................................... 32

3.4.3 Desain Halaman Isi Kuisioner ....................................................... 33

3.6 Rancangan Pengujian Sistem ................................................................ 34

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1 Implementasi Sistem ............................................................................ 35

4.1.1 Implementasi Database .................................................................. 35

4.1.2 Implementasi REST Web Service ................................................. 36

4.1.3 Implementasi Service Worker ....................................................... 36

4.1.3.1 Sinkronisasi Service Worker ............................................. 37

4.1.4 Implementasi Like Apps ................................................................ 38

4.2 Implementasi Interface .......................................................................... 39

4.2.1 Halaman Login .............................................................................. 40

4.2.2 Halaman Evaluasi Pembelajaran ................................................... 40

4.2.3 Halaman Isi Kuisioner ................................................................... 41

4.3 Pengujian Sistem ................................................................................... 41

4.4 Rencana Pengujian ................................................................................ 42

4.4.1 Pengujian Fungsional .................................................................... 42

4.4.2 Pengujian Method JSON pada REST API..................................... 43

4.3.2 Pengujian Kecepatan Akses Web Service (Restfull) ..................... 45

x

BAB V PENUTUP

5.1 Kesimpulan ............................................................................................ 48

5.2 Saran ...................................................................................................... 48

DAFTAR PUSTAKA ...................................................................................... 50

LAMPIRAN

xi

DAFTAR GAMBAR

Gambar 2.1 Komponen Web Service............................................................... 9

Gambar 2.2 Web Tradisional vs Single Page Application ............................... 12

Gambar 2.3 Gambaran Application Shell ........................................................ 13

Gambar 2.4 Alur Kerja Service Worker .......................................................... 14

Gambar 2.5 Object JSON ................................................................................. 15

Gambar 2.6 Larik JSON ................................................................................... 16

Gambar 2.7 String JSON.................................................................................. 16

Gambar 2.8 Angka JSON ................................................................................. 16

Gambar 3.1 Bagan Perancangan Sistem .......................................................... 18

Gambar 3.2 Use Case Diagram SIMUTU........................................................ 20

Gambar 3.3 Sequence Diagram Login ............................................................. 21

Gambar 3.4 Sequence Diagram Isi Kuisioner .................................................. 22

Gambar 3.5 Activity Diagram Login ............................................................... 23

Gambar 3.6 Activity Diagram Isi Kuisioner .................................................... 23

Gambar 3.7 Arsitektur Sistem Menggunakan PWA ........................................ 24

Gambar 3.8 Bagan Database Prototype SIMUTU ........................................... 26

Gambar 3.9 Bussines Process SPMI dan Evaluasi Standar PT ........................ 27

Gambar 3.10 Integrasi Sistem .......................................................................... 27

Gambar 3.11 Pengaturan Instrumen Evaluasi .................................................. 28

Gambar 3.12 Desain Halaman Login ............................................................... 28

Gambar 3.13 Desain Halaman Evaluasi Pembelajaran .................................... 28

Gambar 3.14 Desain Halaman Isi Kuisioner.................................................... 30

Gambar 3.15 Tampilan Pertanyaan Pada User ................................................ 30

Gambar 4.1 Tabel Database ............................................................................. 32

Gambar 4.2 Request Data Ke Web Apps ......................................................... 33

Gambar 4.3 Implementasi Service Worker ...................................................... 34

Gambar 4.4 Langkah Membuat Shortcut Apps di Chrome.............................. 34

Gambar 4.5 Hasil Dari Like Apps.................................................................... 35

Gambar 4.6 Halaman Login ............................................................................. 35

Gambar 4.7 Halaman Evaluasi Pembelajaran .................................................. 36

xii

Gambar 4.8 Halaman Isi Kuisioner .................................................................. 37

Gambar 4.9 Pengujian (Method GET) pada REST API .................................. 38

Gambar 4.10 Pengujian (Method POST) pada REST API .............................. 39

Gambar 4.11 Pengujian Response Time Online (detik)................................... 40

Gambar 4.12 Pengujian Response Time Offline (detik) .................................. 40

xiii

DAFTAR TABEL

Tabel 2.1 Fitur Evaluasi SIMUTU ................................................................... 7

Tabel 3.1 Kebutuhan Data SIMUTU ............................................................... 21

Tabel 4.1 Tabel Database ................................................................................. 32

Tabel 4.2 Jenis Http Method AJAX dan REST API ........................................ 38

Tabel 4.3 Pengujian Response Time Online (detik) ........................................ 40

Tabel 4.4 Pengujian Response Time Offline (detik) ........................................ 40

xiv

DAFTAR PUSTAKA

[1] Adib Luqman Azhari.,Radius Tanone. 2017. ”Penerapan Single Page

Application Menggunakan Teknologi AJAX dan REST API (Studi Kasus :

Sistem Informasi Reservasi Wisma Tamu UKSW)”.Universitas Kristen Satya

Wacana.

[2] Galih Wicaksono., Andi Al-Rizki., Peningkatan Kuaitas Evaluasi Mutu

Akademik Universitas Muhammadiyah Malang Melalui Sistem Informasi

Mutu (SIMUTU). 12.

[3] Sopingi.2016.”Sistem Informasi Donasi Berbasis Hybrid Mobile

Menggunakan Web Service Pada Yayasan Solo Peduli”. STMIK Duta Bangsa

Surakarta.

[4] Kathleen Buttner.,Anna M. Simmons.,"Mobile Web and Native Apps: How

One Team Found a Happy Medium,"

[5] Nicolas Serrano.,Josune Hernantes.,Gorka Gallardo.,"Mobile Web Apps,"

[6] Russel.,Alex.,"Progressive Web Apps: Escaping Tabs Without Losing Our

Soul,"

[7] "Your First Progressive Web App | Web Fundamentals - Google Developers,"

https://developers.google.com/web/fundamentals/getting-

started/codelabs/your-first-pwapp/?hl=en diakses pada Sabtu, 11 Maret 2017.

[8] W3C.,"Web App Manifest," https://www.w3.org/TR/appmanifest/ diakses

pada Senin,13 Maret 2017.

[9] Y. Chen et al., "Adapting Web Pages for Small Screen Devices," IEEE

[10] Jason H Christensen.,"Using RESTful Web-Services and Cloud Computing to Create Next Generation Mobile Application,"