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,"