Implementasi Progressive Web Application dan Framework CodeIgniter pada Sistem Informasi Lomba Karya Tulis Ilmiah Mahasiswa

(1)

Fakultas Ilmu Komputer

Universitas Brawijaya 3773

Implementasi Progressive Web Application dan Framework CodeIgniter pada Sistem Informasi Lomba Karya Tulis Ilmiah Mahasiswa

Anarya Indika Putra¹, Agi Putra Kharisma², Novanto Yudistira³

Program Studi Teknik Informatika, Fakultas Ilmu Komputer, Universitas Brawijaya Email: ¹[email protected], ²[email protected], ³[email protected]

Abstrak

Efisiensi dan keefektifan penyebaran informasi dan komunikasi berkembang menjadi hal penting saat ini. Sentralisasi informasi yang tersebar untuk memotong usaha dan waktu menjadi salah satu cara mengefisienkan dan mengefektifkan komunikasi dan penyebaran informasi. Sentralisasi informasi dapat diterapkan pada bidang lomba karya tulis ilmiah mahasiswa dengan pembuatan Sistem Informasi Lomba Karya Tulis Ilmiah Mahasiswa yang berperan sebagai pusat informasi. Pusat informasi tersebut dikembangkan dalam bentuk web karena bersifat versatile dan proses pengembangan akan lebih efisien.

Framework CodeIgniter dan progressive web application (PWA) diimplementasikan pada sistem yang dikembangkan. Framework CodeIgniter yang ringan dibantu pemanfaatan caching pada PWA diharapkan dapat memberikan performa pada aspek page load time yang baik. Versatility sistem berbasis web akan lebih optimal dengan pengimplementasian PWA yang memungkinkan diterapkannya fitur- fitur aplikasi native. Pada penelitian ini, pengujian performa dilakukan untuk memberikan gambaran performa sistem. Penelitian ini menghasilkan sistem berbasis web yang mengimplementasikan framework CodeIgniter dan PWA dengan 100% validitas pada pengujian unit, integrasi, dan validasi.

Pengujian performa menunjukkan peningkatan dan penurunan performa terhadap berbagai metrik page load time. Performa metrik first byte, first contentful paint, speed index, dan document complete time meningkat saat kunjungan pertama dan berulang. Performa metrik fully loaded time meningkat saat kunjungan pertama dan menurun saat kunjungan berulang.

Kata kunci: sistem informasi, lomba karya tulis ilmiah, framework CodeIgniter, progressive web application, performa, page load time

Abstract

The efficiency and effectiveness of information dissemination and communication are becoming increasingly important today. Centralization of dispersed information to cut effort and time is one way to streamline and make communication and information dissemination more effective. The centralization of information can be applied to the field of student scientific writing competitions by creating an Information System for Student Scientific Writing Contest which acts as an information center. The information center is developed in the form of a web because it is versatile and the development process will be more efficient. CodeIgniter framework and progressive web application (PWA) are implemented on the developed system. The lightweight CodeIgniter framework assisted by the use of caching in PWA is expected to provide good performance in terms of page load time. The versatility of web-based systems will be optimized by implementing PWA that allows native application features to be implemented. In this study, performance testing was carried out to provide an overview of system performance. This study produces a web-based system that implements the CodeIgniter and PWA frameworks with 100% validity in unit testing, integration, and validation. Performance tests show performance gains and losses against various page load time metrics. Performance metrics of the first byte, first contentful paint, speed index, and document complete time improve on first and repeat visits.

The performance of the fully-loaded time metric increases on the first visit and decreases on repeat visits.

Keywords: information systems, scientific writing competition, CodeIgniter framework, progressive web application, performance, page load time

(2)

1. PENDAHULUAN

Perkembangan teknologi informasi yang cepat berdampak pada kemudahan penyelesaian pekerjaan secara efektif dan efisien (Saputra, et al., 2018). Penelitian yang dilakukan oleh (Carisfian, et al., 2019) pada tahun 2019 mengungkap adanya permasalahan distribusi informasi dan komunikasi pada bidang lomba karya tulis ilmiah mahasiswa yang tidak efisien karena tersebar. Penelitian tesebut memberikan solusi permasalahan tersebut dengan merancang sebuah aplikasi yang dapat berperan sebagai pusat informasi lomba karya tulis ilmiah untuk mahasiswa dan menghasilkan rancangan user experience menggunakan metode human- centered design.

Pengembangan sistem yang dilakukan pada platform web lebih efisien dibandingkan dengan pengembangan pada platform lain karena sistem berbasis web bersifat multi-platform. Proses pengembangan cukup dilakukan satu kali. Selain itu, sistem berbasis web dapat menjangkau cakupan pengguna yang lebih luas. Sistem berbasis web yang bersifat versatile atau serbaguna apabila dimanfaatkan secara maksimal dapat memperluas ruang lingkup dan meningkatan penggunaannya untuk pengguna tanpa biaya tambahan yang perlu dikeluarkan untuk pengembangan multi-platform (Corral, et al., 2012).

Salah satu aspek penting yang memengaruhi user experience sistem yang dikembangkan adalah performa sistem tersebut yang dapat dinilai dengan mengukur lamanya proses pemuatan halaman yang diakses.

Semakin singkat pemuatan halaman tersebut, maka semakin cepat sistem tersebut. Performa sistem berbasis web akn meningkat seiring dengan peningkatan kecepatan sistem tersebut dalam melakukan suatu operasi (Kaur, et al., 2016). Selain itu, pengguna menilai performa sistem berbasis web dari durasi waktu pemuatan halaman yang dimulai dari request halaman yang diakses dikirimkan untuk pertama kalinya hingga proses render halaman tersebut selesai (Manhas, 2013).

Pada penelitian ini, optimalisasi performa sistem dalam aspek waktu pemuatan halaman dilakukan menerapkan framework CodeIgniter dan progressive web application (PWA).

CodeIgniter merupakan framework PHP yang memiliki performa terbaik untuk pengunggahan gambar, pengolahan data kompleks, dan operasi

CRUD dibandingkan dengan Laravel dan CakePHP (Li, et al., 2017). Mayoritas operasi pada sistem yang akan dikembangkan meliputi operasi CRUD dan pengunggahan gambar.

Sehingga, CodeIgniter cocok digunakan pada pengembangan yang akan dilakukan. Selain CodeIgniter, PWA juga diterapkan untuk mengoptimalkan performa sistem yang akan dikembangkan. PWA dapat mengoptimalkan performa melalui pengelolaan cache pada komponen service worker. Sistem berbasis web yang menerapkan PWA memiliki performa yang lebih baik pada aspek waktu respon dibandingkan dengan mobile web setelah penggunaan pertama (Ridho, et al., 2018).

Performa akan meningkat seiring dengan penurunan waktu respon. Selain itu, PWA memungkinkan sistem berbasis web memiliki fitur yang pada dasarnya seperti pada aplikasi native tanpa mengurangi keunggulan yang dimiliki sistem berbasis web (Richard & LePage, 2020).

Penelitian ini akan melakukan pengembangan sistem informasi lomba karya tulis ilmiah mahasiswa untuk mengatasi permasalahan efisiensi distribusi informasi lomba karya tulis ilmiah untuk mahasiwa dan komunikasi antara mahasiswa dan panitia penyelenggara lomba. Pada sistem yang dikembangkan. PWA dan framework CodeIgniter akan diterapkan untuk mengoptimalkan performa sistem yang akan dikembangkan. Penerapan kedua teknologi tersebut akan dianalisis untuk mengetahui apakah terjadi peningkatan atau penurunan performa.

2. LANDASAN KEPUSTAKAAN

Landasan kepustakaan membahas teori, konsep, dan metode yang digunakan dalam penelitian ini.

2.1 Sistem Informasi

Sekumpulan elemen yang melakukan pengambilan, pengolahan, dan penyimpanan data menjadi sebuah informasi dan menyebarkannya dapat disebut sebagai sistem informasi. Elemen-elemen tersebut dapat berupa perpaduan antara manusia, perangkat keras, perangkat lunak, jaringan komunikasi, kebijakan dan prosedur, dan data terstruktur. Kombinasi perangkat keras dan lunak, jaringan komunikasi, dan data merupakan elemen-elemen yang sering digunakan pada sistem informasi moden

(3)

(O'Brien & Marakas, 2010).

2.2 Progressive Web Application

Progressive web application (PWA) merupakan teknologi untuk aplikasi web yang dikembangkan oleh Alex Russel dan Frances Berriman pada tahun 2015.

Gambar 1. Perbandingan kapabilitas dan jangkauan aplikasi native, web, dan PWA

Sumber: (Richard & LePage, 2020)

PWA dapat memberikan kapabilitas, keandalan, dan kemudahan instalasi layaknya aplikasi native terhadap aplikasi web yang dapat berjalan pada berbagai platform. Hal-hal tersebut didapatkan tanpa mengurangi jangkauan aplikasi web (Richard & LePage, 2020). Perbandingan jangkauan dan kapabilitas antara aplikasi native, aplikasi web, dan PWA dapat dilihat pada Gambar 1.

PWA dibangun atas tiga komponen utama yaitu service worker, app shell, dan web app manifest. Service worker merupakan dokumen yang berperan sebagai perantara aplikasi (client) dan server. Tugas dari service worker adalah menangkap request antara aplikasi dan server dan melakukan respons sebagaimana didiefinisikan service worker (Thakur, 2018).

Service worker menyediakan fitur seperti akses offline, push notifications, background update, dan caching (Tandel & Jamadar, 2018).

App shell merupakan struktur antarmuka minimal yang diperlukan sebagai representasi fundamental PWA. App shell akan disimpan pada penyimpanan lokal perangkat yang digunakan untuk mengakses PWA.

Penyimpanan tersebut atau dapat disebut dengan caching memungkinkan PWA dapat dimuat secara instan, memiliki user experience yang

berlangsung dengan baik, dan performa yang baik saat akses berulang (Tandel & Jamadar, 2018). Web app manifest merupakan dokumen yang memuat informasi utama seperti nama, deskripsi, ikon, dan lainnya. Dokumen tersebut bertugas sebagai penyedia informasi yang dibutuhkan ketika PWA di-install pada home screen. Dengan pemasangan tersebut, pengguna dapa mengakses aplikasi dengan lebih cepat.

PWA memiliki kriteria yang harus dipenuhi agar dapat dijalankan. Kriteria tersebut yaitu berjalan pada protokol HTTPS, memiliki web app manifest dan service worker.

2.3 CodeIgniter

Dalam pembangunan aplikasi web, penggunaan framework dapat mempermudah dan mempercepat pengembangan. CodeIgniter merupakan framework bahasa pemrograman PHP yang digunakan untuk pengembangan aplikasi web. CodeIgniter dapat mengurangi penulisan kode untuk tugas tertentu sehingga pengembang dapat memusatkan perhatian pada kreativitas pengembangan aplikasi (British Columbia Institute of Technology, 2019).

Framework ini dibangun berdasarkan konsep model-view-controller (MVC). Namun, penerapan konsep tersebut bersifat tidak ketat karena penggunaan komponen model bersifat opsional. Selain itu, CodeIgniter memberikan pengembang fleksibilitas terhadap pengembangan aplikasi dengan memungkinkan integrasi skrip serta mengembangkan library inti tersendiri dan mengintegrasikannya (British Columbia Institute of Technology, 2019).

Komponen-komponen pengelola alur data yang membangun framework CodeIgniter dapat dilihat pada Gambar 2.

Gambar 2. Komponen dan alur data pada framework Codeigniter

Sumber: (British Columbia Institute of Technology, 2019)

Framework CodeIgniter memiliki tujuan untuk mengoptimalkan performa maksimum, kapabilitas, dan fleksibilitas dengan ukuran paket sekecil dan seringan mungkin (British Columbia Institute of Technology, 2019).

2.4 Page Load Time

(4)

Page load time merupakan waktu yang dihitung sejak request pertama pengguna dikirimkan hingga kesuluruhan halaman tersebut selesai ditampilkan oleh browser. Page load time merupakan representasi performa website dari sudut pandang pengguna (Manhas, 2013).

Page laod time dipengaruhi oleh beberapa faktor, diantaranya lokasi server hosting, desain, jumlah ukuran elemen-elemen halaman yang diakses, lokasi pengaksesan, serta jaringan, perangkat, dan browser yang digunakan saat pengaksesan (Gibb, 2016). Page load time terbagi menjadi dua, yaitu backend time dan frontend time.

Pada backend time, tahapan-tahapan yang terdapat di dalamnya terjadi pada server.

Tahapan-tahapan tersebut yaitu DNS time, TCP connect time, TLS connect time, dan time to first byte (TTFB). TTFB merupakan waktu yang dihitung sejak request pertama dikirim hingga browser menerima byte pertama dari server (Catchpoint, 2021).

Kemudian, frontend time merupakan tahapan yang terjadi pada browser. Tahapan- tahapan yang dapat dikategorikan ke dalam frontend time diantaranya base page time, start render atau first paint (FP), first contentful paint (FCP), time to visually ready atau visually complete, load time (onload), time to interactive (TTI), dan fully loaded time. FCP adalah waktu yang dibutuhkan hingga terdapat konten ditampilkan. Konten pada FCP mengacu pada teks, gambar, elemen <svg>, atau elemen

<canvas> non-putih (Walton, 2021). Visually complete adalah waktu dimana pengguna mempersepsikan elemen visual sudah ditampilkan seluruhnya (Punz, 2017). Load time (onload) adalah waktu dimana pemuatan halaman dan pengunduhan resource halaman selesai dilakukan (Catchpoint, 2021). Fully loaded time adalah waktu dimana tidak terdapat lagi aktivitas jaringan selama dua detik setelah load time (Catchpoint, 2021). Tahapan pada page load time dapat dilihat pada Gambar 3.

Gambar 3. Tahapan page load time Sumber: (Dean, 2019)

2.5 Pengujian Performa

Pengujian performa adalah pengujian yang dilakukan dengan mengukur aspek tertentu seperti kestabilan, kecepatan, atau scalability untuk mengetahui gambaran performa aplikasi yang diuji (Guru99, 2020). Selain itu, menurut (Pressman, 2010) pengujian performa dilakukan untuk menemukan masalah pada aspek performa dan berdampak pada turunnya performa aplikasi yang diuji. Dalam melakukan pengujian performa, metode atau proses yang dilakukan dapat bervariasi. Namun, secara umum pengujian performa dilakukan dengan proses sebagai berikut:

1. Melakukan identifikasi lingkungan pengujian.

2. Melakukan identifikasi kriteria minimum kelulusan pengujian.

3. Merancang kasus pengujian.

4. Melakukan konfigurasi lingkungan pengujian.

5. Menerapkan hasil rancangan pengujian.

6. Menguji sistem.

7. Menganalisis hasil pengujian.

(5)

3. METODOLOGI PENELITIAN

Gambar 4. Alur penelitian

Penelitian implementasi framework CodeIgniter dan progressive web application pada sistem informasi lomba karya tulis ilmiah mahasiswa bersifat implementatif pengembangan dengan menerapkan kaidah- kaidah rekayasa perangkat lunak. Model pengembangan perangkat lunak yang digunakan pada penelitian ini adalah model waterfall.

Langkah-langkah yang dilakukan pada penelitian diilustrasikan pada Gambar 4.

3.1 Studi Literatur

Studi literatur dilakukan untuk mengumpulkan dan menganalisis dasar pengetahuan yang dapat digunakan sebagai pendukung penelitian ini. Pengetahuan yang digunakan diperoleh dari jurnal, penelitian, e- book, dokumentasi perangkat lunak, dokumen dari website, dan website.

3.2 Rekayasa Kebutuhan

Rekayasa kebutuhan merupakan tahapan dimana proses pencarian, analisis, dokumentasi, validasi dan verifikasi kebutuhan sistem yang dikembangkan dilakukan. Rekayasa kebutuhan dilakukan dengan beberapa tahap, yaitu:

1. Elisitasi Kebutuhan

Pada tahap ini, proses pencarian kebutuhan dengan tujuan memahami domain sistem yang dikembangkan dilakukan.

2. Identifikasi Aktor

Identifikasi aktor yang dilakukan bertujuan untuk mengidentifikasi siapa saja yang memiliki peran terhadap penggunaan sistem yang dikembangkan.

3. Spesifikasi Kebutuhan

Tahap ini melakukan

pengelompokkan kebutuhan sistem yang didapatkan dari proses elisitasi kebutuhan. Penglompokkan dilakukan berdasarkan fungsionalitas kebutuhan.

Kemudian, kebutuhan yang sudah dikelompokkan dijelaskan secara detail.

4. Pemodelan Kebutuhan

Proses pembuatan model sistem yang berdasar pada kebutuhan yang telah didapatkan dari proses sebelumnya dilakukan pada tahap ini. Pemodelan kebutuhan dilakukan dengan tujuan mempermudah pemahaman sistem dankebutuhan stakeholder. Pemodelan dilakukan dengan pemodelan UML berorientasi objek dengan menggunakan use case diagram dan use case scenario.

Hasil pemodelan dijadikan sebagai dasar perancangan sistem.

3.3 Perancangan Sistem

Perancangan sistem merupakan tahap dimana perancangan berdasarkan hasil yang didapatkan dari rekayasa kebutuhan dilakukan.

Perancangan dilakukan dengan berorientasi objek, sehingga dilakukan perancangan arsitektur, komponen, basis data, dan antarmuka.

3.4 Implementasi Sistem

Implementasi sistem adalah tahap pembangunan sistem berdasarkan hasil perancangan sistem dengan melakukan proses coding atau perubahan hasil perancangan ke dalam bentuk kode program sesuai dengan bahasa pemrograman yang digunakan.

3.5 Pengujian Sistem

Pengujian dilakukan dengan tujuan mencari error atau kesalahan yang kemungkinan terdapat pada sistem yang dikembangkan setelah proses implementasi dilakukan. Pengujian ini juga dilakukan untuk mengetahui kualitas dan sebagai evaluasi sistem yang dikembangkan.

Terdapat beberapa pengujian yang dilakukan untuk mengukur aspek yang berbeda. Pengujian white-box dilakukan dengan strategi pengujian unit dan integrasi. Pengujian black-box

(6)

dilakukan dengan strategi pengujian validasi.

Pengujian kompatibilitas dilakukan dengan menggunakan SortSite untuk mengetahui kompatibilitas sistem pada berbagai browser.

Pengujian performa dengan menggunakan WebPageTest dilakukan untuk mengetahui performa sistem pada aspek page load time.

3.6 Kesimpulan dan Saran

Pada tahap ini dilakukan pengambilan kesimpulan terhadap hasil penelitian yang didapatkan dan pemberian saran sebagai evaluasi terhadap kekurangan penelitian ini yang dapat digunakan untuk penelitian yang melanjutkan penelitian yang telah dilakukan.

4. REKAYASA KEBUTUHAN 4.1 Elisitasi Kebutuhan

Elisitasi kebutuhan dilakukan dengan studi literatur jurnal ilmiah dengan judul

“Perancangan User Experience Aplikasi Informasi Lomba Karya Tulis Ilmiah Mahasiswa Menggunakan Metode Human-Centered Design” yang dilakukan oleh (Carisfian, et al., 2019). Dari proses tersebut didapatkan permasalahan dan solusinya serta kebutuhan- kebutuhan yang akan dispesifikkan pada spesifikasi kebutuhan nantinya.

4.2 Identifikasi Aktor

Pada sistem yang dikembangkan, terdapat tiga aktor yang berperan. Penjelasan ketiga aktor tersebut secara lebih detail dapat dilihat pada Tabel 1.

Tabel 1. Deskripsi aktor

Aktor Deskripsi

Visitor

Visitor adalah pengunjung sistem yang belum melakukan autentikasi log in. Visitor hanya berperan sebagai pencari informasi lomba saja.

Mahasiswa

Mahasiswa adalah pengunjung sistem yang telah melakukan autentkasi log in dan terdaftar sebagai mahasiswa. Mahasiswa berperan sebagai pencari informasi lomba layaknya visitor, tetapi memiliki hak akses terhadap fitur-fitur yang hanya dapat digunakan jika terdaftar.

Panitia

Panitia adalah pengunjung sistem yang telah melakukan autentikasi log in dan terdaftar sebagai panitia. Panitia berperan sebagai penyedia informasi lomba.

4.3 Spesifikasi Kebutuhan

Pada tahap spesifikasi kebutuhan didapatkan 28 kebutuhan fungsional dan satu kebutuhan non-fungsional. Kebutuhan fungsional merupakan kebutuhan determinan layanan sistem yang harus dipenuhi oleh sistem yang dikembangkan dan kebutuhan non- fungsional adalah kebutuhan yang memiliki hubungan dengan karakteristik, batasan, dan kualitas sistem yang perlu dipenuhi. Dari keseluruhan kebutuhan fungsional tersebut, tujuh kebutuhan hanya digunakan untuk visitor, 15 kebutuhan untuk mahasiswa dan panitia, satu kebutuhan yang hanya untuk mahasiswa, dan lima kebutuhan hanya untuk panitia. Kebutuhan non-fungsional yang dibutuhkan termasuk ke dalam kategori kompatibilitas.

4.4 Pemodelan Kebutuhan

Pemodelan kebutuhan yang dilakukan menghasilkan use case diagram dan use case scenario. Use case diagram memberikan gambaran terhadap apa saja yang dapat dilakukan oleh aktor yang telah didefinisikan pada tahap identifikasi aktor terhadap sistem yang dikembangkan. Pada diagram tersebut terdapat 28 use case dan tiga aktor. Use case scenario menggambarkan dengan lebih detail dan terurut interaksi antara aktor dan sistem saat fungsi tertentu dijalankan.

5. PERANCANGAN SISTEM 5.1 Perancangan Arsitektur

Gambar 5. Arsitektur sistem

Sistem yang dikembangkan menerapkan progressive web application (PWA) dan framework CodeIgniter. Platform web dipilih

(7)

karena bersifat multi-platform sehingga dapat mencakup pengguna yang lebih luas dan proses pengembangan dapat dilakukan dengan lebih efisien. PWA digunakan karena memberikan keunggulan terhadap web konvensional pada aspek fitur dan performa. Framework CodeIgniter digunakan karena bersifat ringan sehingga tidak akan memberatkan performa sistem dan memberikan kemudahan terhadap pengembangan sistem. API web push notifications dari OneSignal digunakan untuk menyediakan fitur notifikasi pada sistem yang dikembangkan. Gambaran arsitektur sistem diilustrasikan pada Gambar 5.

5.2 Perancangan Sequence Diagram

Perancangan sequence diagram dilakukan dengan tujuan memberikan gambaran terhadap interaksi objek-objek pada sistem yang dikembangkan. Terdapat empat objek pada sistem yang dikembangkan, yaitu aktor serta model, view, dan controller sebagai representasi dari konsep MVC. Model bertindak sebagai entity atau objek yang merepresentasikan data, view sebagai boundary atau objek yang berinteraksi dengan aktor, dan controller sebagai control atau objek yang bertindak sebagai perantara antara view dan model.

5.3 Perancangan Class Diagram

Perancangan class diagram memodelkan sistem secara struktural atau statis dengan tujuan memberikan gambaran terhadap objek-objek yang terdapat pada sistem. Pola perancangan MVC digunakan pada perancangan class diagram yang dilakukan. Dari class diagram yang dihasilkan, terdapat 11 kelas model, tiga kelas controller, dan delapan kelas view.

5.4 Perancangan Komponen

Perancangan logika proses atau algoritma fungsi yang terdapat pada sistem dilakukan dalam bentuk pseudocode. Hasil perancangan ini digunakan sebagai referensi untuk tahap implementasi yang akan dilakukan.

5.5 Perancangan Basis Data

Perancangan basis data menggunakan conceptual data model sebagai representasi rancangan struktur basis data sistem yang dikembangkan. Terdapat 11 entitas pada conceptual data model yang dihasilkan. Hasil perancangan ini digunakan sebagai referensi

untuk tahap implementasi nantinya.

5.6 Perancangan Antarmuka

Gambar 6. Perancangan antarmuka halaman daftar informasi lomba

Perancangan antarmuka memberikan gambaran terhadap antarmuka sistem yang dikembangkan. Salah satu contoh hasil perancangan antarmuka dapat dilihat pada Gambar 6. Hasil rancangan akan digunakan pada tahap implementasi

6. IMPLEMENTASI SISTEM

Pada tahap ini, hasil dari implementasi sistem berdasarkan hasil perancangan sistem yang telah dilakukan sebelumnya dipaparkan.

Spesifikasi sistem dilakukan terlebih dahulu untuk memberikan gambaran terhadap perangkat yang digunakan untuk implementasi sistem. Tahap ini menghasilkan implementasi komponen dalam bentuk source code, basis data yang dimodelkan dengan physical data model, dan antarmuka. Salah satu hasil implementasi dapat dilihat pada Gambar 7.

Gambar 7. Hasil implementasi antarmuka halaman daftar informasi lomba

(8)

7. PENGUJIAN SISTEM

Pada tahap ini dilakukan beberapa pengujian untuk mencari kesalahan pada sistem, mengetahui kualitas sistem, mengukur aspek tertentu, dan sebagai bahan evaluasi sistem.

Pengujian pertama yang dilakukan adalah pengujian unit yang menguji komponen terkecil pada sistem untuk memastikan komponen berjalan seperti yang telah dirancang. Pengujian unit menggunakan metode basis path testing.

Pengujian unit dilakukan terhadap tiga komponen sampel. Pengujian unit dilakukan dengan merancang flowgraph komponen terlebih dahulu. Kemudian, ditentukan nilai cylomatic complexity untuk mengukur kompleksitas logika program secara kuantitatif.

Selanjutnya, ditentukan jalur independen. Lalu, setiap jalur independen diuji. Hasil pengujian ketiga komponen sampel menghasilkan 100%

validitas.

Pengujian kedua yang dilakukan adalah pengujian integrasi yang menguji integrasi dua komponen sampel yang berbeda untuk mencari kemungkinan cacat pada integrasi komponen tersebut. Pengujian ini menggunakan metode top-down. Pengujian dilakukan dengan merancang flowgraph kedua komponen terlebih dahulu. Kemudian, menentukan cyclomatic complexity dan jalur independen. Selanjutnya, menguji setiap jalur independen dan melihat hasil yang ditampilkan. Pengujian integrasi yang dilakukan menunjukkan tidak terdapat cacat pada komponen yang diuji.

Pengujian ketiga adalah pengujian validasi yang menguji fungsionalitas sistem untuk menentukan apakah fungsionalitas sistem sudah sesuai dengan kebutuhan dan berjalan sesuai ekspektasi. Pengujian dilakukan berdasarkan use case scenario yang telah didefinisikan.

Pengujian ini menghasilkan 100% validitas pada setiap kasus uji.

Pengujian selanjutnya adalah pengujian kompatibilitas sebagai validasi terhadap kebutuhan non-fungsional sistem. Pengujian ini memiliki tujuan untuk memberikan gambaran terhadap kompatibilitas sistem terhadap lingkungan yang berbeda. Browser Chrome, Firefox, dan safari digunakan sebagai

representasi lingkungan yang berbeda untuk sistem berbasis web yang dikembangkan. Ketiga browser tersebut dipilih karena merupakan tiga browser yang memiliki market share tertinggi pada periode Maret 2020 hingga Maret 2021 menurut (Statcounter, 2021). Pengujian dilakukan dengan menggunakan perangkat lunak SortSite. Hasil pengujian yang didapatkan adalah sistem yang dikembangkan tidak mengalami permasalahan yang muncul akibat tidak kompatibelnya sebuah elemen sehingga dapat menyebabkan konten tidak tampil. Hal tersebut menunjukkan sistem yang dikembangkan memenuhi aspek kompatibilitas pada pengujian non-fungsional yang didefinisikan.

Pengujian terakhir yang dilakukan adalah pengujian performa sebagai benchmark sistem yang dikembangkan. Pengujian juga dilakukan

untuk mengetahui dampak

diimplementasikannya PWA terhadap beberapa metrik pada proses pemuatan halaman. Metrik yang diukur diantaranya first byte time, start render, first contentful paint, speed index, document complete time, dan fully loaded time.

Pengujian dilakukan dengan konfigurasi lokasi server, bandwidth koneksi, desain halaman, banyak elemen, lokasi pengaksesan, perangkat, dan browser yang sama pada setiap kasus uji.

Perbedaan hanya terletak pada diaktifkan dan tidak diaktifkannya PWA pada kedua kasus uji.

Pengujian performa dilakukan dengan menggunakan perangkat lunak WebPageTest.

Hasil pengujian menunjukkan terdapat peningkatan performa untuk metrik first byte, first contentful paint, speed index, document complete time saat kunjungan pertama dan berulang serta fully loaded time hanya saat kunjungan pertama. Peningkatan terjadi saat PWA diaktifkan.

Penurunan performa terjadi pada metrik fully loaded time saat kunjungan berulang ketika PWA diaktifkan. Peningkatan dan penurunan yang terjadi tidak signifikan karena hanya berada pada rentang 0-10%. Namun, secara keseluruhan penggunan PWA memberikan keunggulan dibandingkan web konvensional.

Perbandingan nilai median metrik yang diukur dapat dilihat pada Gambar 8.

(9)

Gambar 8. Nilai median metrik yang diukur

8. KESIMPULAN DAN SARAN

Rekayasa kebutuhan menghasilkan 28 kebutuhan fungsional dan satu kebutuhan non- fungsional dengan tiga aktor. Selain itu, didapatkan juga pemodelan kebutuhan berupa use case diagram dan use case scenario.

Perancangan sistem menghasilkan rancangan arsitektur, sequence diagram, class diagram, komponen, basis data, dan antarmuka.

Implementasi sistem menghasilkan sistem berbasis web konvesional dan PWA dengan mengimplementasikan framework CodeIgniter.

Hasil implementasi sesuai dengan hasil perancangan sistem. Pada pengujian sistem pengujian unit, integrasi, dan validasi menunjukkan 100% validitas. Pengujian kompatibilitas menunjukkan aspek kompatibilitas pada kebutuhan non-fungsional sudah terpenuhi dan sistem dapat berjalan baik pada browser yang diuji. Pengujian performa menunjukkan terdapat peningkatan performa saat kunjungan pertama dan berulang ketika PWA aktif pada metrik first byte, first contentful paint, speed index, dan document complete time, serta hanya saat kunjungan pertama pada metrik fully loaded time. Penuruna performa terjadi pada metrik fully loaded time saat repeat view ketika PWA aktif.

Saran yang dapat diberikan untuk penelitian selanjutnya diantaranya menambahkan fitur pendaftaran peserta lomba, pendataan peserta lomba, statistik lomba, dan messaging. Selain

itu, pengembangan selanjutnya dapat menggunakan framework PHP lainnya, mengimplementasikan praktik lain yang bertujuan mengoptimalkan performa sistem dan menganalisa efek yang didapatkan, dan mengembangkan aplikasi yang sama namun tanpa menggunakan PWA dan menganalisa dampaknya.

9. DAFTAR PUSTAKA

British Columbia Institute of Technology, 2019.

CodeIgniter. [Online]

Available at:

https://codeigniter.com/userguide3/over view/appflow.html

[Accessed 27 Juni 2020].

Available at:

https://codeigniter.com/userguide3/over view/at_a_glance.html

Available at:

https://codeigniter.com/userguide3/over view/goals.html

(10)

Available at:

https://codeigniter.com/userguide3/over view/mvc.html

Carisfian, K. R., Kharisma, A. P. & Afirianto, T., 2019. Perancangan User Experience Aplikasi Informasi Lomba Karya Tulis Ilmiah Mahasiswa Menggunakan Metode Human-Centered Design.

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 3(9), pp.

8723-8731.

Catchpoint, 2021. WebPageTest. [Online]

Available at:

https://docs.webpagetest.org/getting- started/

[Accessed 31 Maret 2021].

Corral, L. et al., 2012. Evolution of Mobile Software Development from Platform- Specific to Web-Based Multiplatform Paradigm. Proceedings of the 10th SIGPLAN Symposium on New Ideas, New Paradigms, and Reflections on Programming and Software, pp. 181- 183.

Dean, B., 2019. Backlinko. [Online]

Available at:

https://backlinko.com/page-speed-stats [Accessed 31 Maret 2021].

Gibb, R., 2016. STACKPATH. [Online]

Available at:

https://blog.stackpath.com/page-load- time/

[Accessed 30 Agustus 2020].

Guru99, 2020. Guru99. [Online]

Available at:

https://www.guru99.com/performance- testing.html#1

[Accessed 28 Agustus 2020].

Kaur, S., Kaur, K. & Kaur, P., 2016. An Empirical Performance Evaluation of Universities Website. International Journal of Computer Applications, 146(15), pp. 10-16.

Li, X., Karnan, S. & Chishti, J. A., 2017. An Empirical Study of Three PHP Frameworks. International Conference on Systems and Informatics, Volume IV, pp. 1636-1640.

Manhas, J., 2013. A Study of Factors Affecting Websites Page Loading Speed for

Efficient Web Performance.

International Journal of Computer Sciences and Engineering, I(3), pp. 32- 35.

O'Brien, J. A. & Marakas, G. M., 2010.

Introduction to Information Systems.

15th Edition ed. New York: McGraw- Hill/Irwin.

Pressman, R. S., 2010. Software Engineering: A Practitioner's Approach. 7 ed. New York: McGraw-Hill.

Punz, D., 2017. Dynatrace. [Online]

Available at:

https://www.dynatrace.com/news/blog/

optimize-user-experience-visually- complete-speed-index-

measures/#:~:text=Speed%20index%20 is%20a%20performance,moment%2Di n%2Dtime%20measure.

Richard, S. & LePage, P., 2020. web.dev.

[Online]

Available at: https://web.dev/what-are- pwas/

Ridho, M. R., Pinandito, A. & Dewi, R. K., 2018.

Perbandingan Performa Progressive Web Apps dan Mobile Web Terkait Waktu Respon, Penggunaan Memori dan Penggunaan Media Penyimpanan.

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 2(10), pp. 3483-3491.

Thakur, P., 2018. Evaluation and Implementation of Progressive Web Application.

Tandel, S. & Jamadar, A., 2018. Impact of Progressive Web Apps on Web App Development. International Journal of Innovative Research in Science, Engineering and Technology, VII(9).

Saputra, A. N., Wicaksono, S. A. & Pradana, F., 2018. Pengembangan Sistem Informasi Manajemen Tesis (Studi Kasus:

Program Studi Magister Administrasi Bisnis Fakultas Ilmu Administrasi UB).

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 2(9), pp.

3251-3257.

Statcounter, 2021. Statcounter GlobalStats.

[Online]

(11)

Available at:

https://gs.statcounter.com/browser- market-share

Walton, P., 2021. web.dev. [Online]

Available at: https://web.dev/fcp/