Rancang Bangun Aplikasi E-Learning Berbasis Progressive Web Apps Untuk Menunjang Pembelajaran Online dengan Metode Prototyping
Dini Agnia Hardianty 1 , Indra Yustiana 2 , Somantri 3 1,2,3 Universitas Nusa Putra, Indonesia e-mail: 1 dini.agnia_ti17@nusaputra.ac.id, 2 indra.yustiana@nusaputra.ac.id,
3 somantri@nusaputra.ac.id

## Abstract
Covid-19  pandemic  has  an  impact  on  the  Indonesian  education  system  which  makes  the learning process from offline to online. This is what prompted Hayyatan Thayyibah High School to create an  E-Learning application to support  the online learning process, apart from being used for online learning, the Hayyatan Thayyibah High School E-learning application was also used  to  share  information  and  take  attendance  for  reading  the  Qur'an  (Tallaqi).  The  E- Learning  application  was  built  using  the  Prototyping  method,  from  the  results  of  usability testing,  an  average  score  of  80%  showed  that  the  application  could  be  used  well  by  students and the teacher.
Keywords : Covid-19, E-Learning, Metode Prototyping
Abstrak
Adanya pandemi Covid-19 berdampak pada sistem pendidikan indonesia yang membuat proses belajar  dari  offline  menjadi  daring  (online).  Hal  inilah  yang  mendorong  SMA  Hayyatan Thayyibah  membuat  aplikasi  E-Learning  untuk  mendukung  proses  belajar  online  tersebut, selain  digunakan  untuk  pembelajaran  online  aplikasi  E-learning  SMA  Hayyatan  Thayyibah juga  digunakan  untuk  membagikan  informasi  dan  melakukan  absensi  Bacaan  Al-Qur’an (Tallaqi).  Aplikasi  E-Learning  dibangun  menggunakan  metode  Prototyping,  dari  hasil pengujian usability didapatkan nilai rata-rata sebesar 80% yang menunjukan aplikasi dapat digunakan dengan baik oleh siswa dan pihak sekolah.
Kata kunci : Covid-19, E-Learning, Metode Prototyping

## 1. PENDAHULUAN
Adanya  pandemi  Covid-19  berdampak  pada  sistem  pendidikan indonesia yang membuat  proses belajar dari offline menjadi daring ( online ) menggunakan  teknologi  komunikasi[1].  Salah  satu  metode  pembelajaran online yang  sering  digunakan  adalah  E- Learning ,  E- Learning metode penerapan  teknologi  informasi  dalam  bidang  pendidikan  menggunakan internet[2].  Dengan  E- Learning proses  pembelajaran  dapat  dilakukan  dari jarak  jauh  menggunakan  komputer  gadget  masing-masing  sehingga memungkinkan siswa untuk belajar di rumah tanpa harus hadir tatap muka secara  langsung[3].  Dalam  melaksanakan  E- Learning digunakan  berbagai platform  seperti  google  classroom,  zoom  meeting,  whatsapp,  google  meet dan  sebagainya[4].  Pada  perkembangan  nya  pelaksanaan  E- Learning Memiliki  Keunggulan  dan  kelemahan  salah  satu  keunggulan  E- Learning adalah  penggunaan  smartphone  dan  internet  yang  sudah  cukup  tinggi
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
mencapai  88%[1].  Adapun  kelemahan  dari  E- Learning adalah  kurangnya kesiapan  guru  dalam  menyiapkan  pembelajaran online [5].  SMA  Hayatan Thayyibah  merupakan  salah  satu  sekolah  yang  berada  di  kabupaten sukabumi  yang  harus  melaksanakan  proses  pembelajaran online selama pandemi covid-19. Dalam melaksanakan proses pembelajaran online di SMA Hayatan  Thayyibah  digunakan  platform online seperti  whatsapp, berdasarkan  penelitian  Mirzon  Daheri  prosentase    efektivitas  penggunaan whatsapp hanya 25,5%[6].

## 2. METODOLOGI PENELITIAN
Penyusunan  penelitian    ini  mereferensi    pada  beberapa    penelitian sebelumnya  yang memiliki  keterkaitan dengan  permasalahan yang  diteliti. Referensi    ini  digunakan    sebagai  perbandingan    antara  penelitian    yang sedang  dikerjakan dan  penelitian sebelumnya.
Tabel 1. Penelitian Sebelumnya No Peneliti Judul Hasil 1  Sari, Indra Kartika (2021) Blended Learning sebagai Alternatif Model Pembelajaran Inovatif  di Masa  Post- Pandemi di Sekolah  Dasar Kelebihan dari blended Learning adalah: siswa memiliki motivasi belajar, lebih mandiri dalam belajar, pembelajaran menjadi lebih menyenangkan, menarik dan dapat meningkatkan keterampilan berpikir kritis. Kelemahan blended Learning adalah siswa tidak secara online dan kurang diawasi secara langsung oleh guru[1]. Persamaan: Mengkaji Penggunaan pembelajaran online  di  masa pandemi Perbedaan Sistem Berbentuk blended learning 2  Mario Stefanus, johanes andry (2020) Pengembangan Aplikasi E- Learning Berbasis Web Menggunakan Model Waterfall Pada proses belajar secara tradisional dan terbatasnya penyampaian materi ajar sehingga menurunkan Persamaan : Sistem Berbentuk E- Learning Perbedaan: a) Menggunaka n
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
No Peneliti Judul Hasil Smk Strada 2 Jakarta minat belajar siswa untuk mengatasi masalah tersebut dikembangkan sistem E-Learning yang dibangun menggunakan metode waterfall hasil penelitian menunjukan aplikasi E- Learning dapat memfasilitasi proses belajar secara online[2]. b) Metode Waterfall c) Sistem Berbasis Web 3  Ade Winarni, Yafri Reno Kurniawan (2017) Aplikasi E- Learning Pada Smk Negeri Kundur Berbasis Web E-Learning dapat membantu para guru dalam mendistribusikan bahan ajar mereka tanpa harus berada di kelas, dari aplikasi E- Learning yang dibangun pada SMK Negeri Kundur memiliki fitur pemberian upload/download materi pelajaran, upload file tugas, dan pengumuman online dari sekolah[3] Persamaan : Sistem Berbentuk E- Learning Perbedaan: a) Menggunak an  Metode Waterfall b) Sistem Berbasis Web 4  Ferdiansyah, Handy N, Zulkifli Yakub, Rahman H, Agussalim (2021) Penggunaan Model Blended Learning terhadap Hasil Belajar di masa Pandemi Covid-19 kebutuhan akan penggunaan model Blended Learning terhadap hasil belajar di masa pandemi Covid 19 khususnya di mata kuliah pengantar usaha berawal dari kondisi atau Persamaan : Penelitian terhadap pembelajaran online  di  masa pandemi Perbedaan: Penelitian bersifat pengamatan
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
No Peneliti Judul Hasil situasi pandemi Covid 19 dan adanya banyak sekali aturan dari pemerintah akan Work From Home proses pembelajaran memakai model Blended Learning memang sudah selayaknya diterapkan. karena selain berasal himbauan asal pemerintah, pemerintah pula sangat mendukung menggunakan adanya pembagian kuota perdeo baik dosen juga mahasiswa Penggunaan contoh Blended Learning terhadap hasil belajar di masa pandemi Covid 19 memenuhi kriteria kepraktisan sesuai penilaian asal dosen serta mahasiswa dengan kategori Sangat praktis[4]. 5  Mukhlishoh Syaukati Robbi, Yulianti (2019) Rancangan Aplikasi E- Learning Berbasis Web dengan Model Prototype pada SMPN 7 Kota Tangerang Selatan Rancangan Aplikasi E- Learning Berbasis Web dengan Model Prototype pada SMPN 7 Kota Tangerang Selatan” menyatakan Persamaan: a) Membangun Aplikasi. b) Sistem  yang dibangun adalah E- learning. c) Menggunak an  metode
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
No Peneliti Judul Hasil proses pembelajaran di SMPN & Kota Tangerang Selatan yang masih tradisional dan dilaksanakan dengan sistem tatap muka dan belum menerapkan teknologi informasi berdampak pada pemahaman materi yang belum maksimal, dengan dibangunnya aplikasi E- Learning berbasis website membuat proses belajar tetap berlangsung meski diluar jam sekolah dan memudahkan siswa yang ketinggalan materi pelajaran meski berhalangan hadir[7] prototyping Perbedaan: Sistem diterapakan  di tingkat SMP

## 2.1. Landasan Teori

## a) E-Learning
E- Learning adalah    metode    pembelajaran    jarak    jauh    menggunakan internet  yang  siswa  belajar  di  tempat  masing-masing  menggunakan perangkat  komputer[3].dengan  adanya    E- Learning dapat    membantu memudahkan    guru  untuk    mendistribusikan    materi    pelajaran    kepada siswa,  E- Learning juga  dapat  dijadikan  media  diskusi  materi  pelajaran [3].
b) Progressive Web Apps
Progressive Web  Apps (PWA)  adalah  konsep  penerapan pembuatan website  yang  menerapkan  teknologi  service  worker,  web manifest, dan cache  API[10].  Proses    instalasi    PWA    sangat  mudah,  hanya    dengan mengakses  website PWA  yang  diinginkan  kemudian  memilih  opsi  install,
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
maka  icon  aplikasi PWA akan muncul di home screen [11]. Sebuah aplikasi PWA harus dibuat seringan mungkin  agar  dapat  menghasilkan  pengalaman pengguna    dengan  baik,  agar  website    tidak    melakukan    proses    loading terlalu  lama.
c) Framework Laravel
Laravel adalah framework  PHP  dan  merupakan  kerangka  kerja  yang populer  dalam  beberapa  tahun  terakhir  untuk  pengembangan  perangkat lunak  karena    memungkinkan    siapapun    untuk    membuat    struktur    MVC tanpa    memiliki  pengetahuan    sebelumnya    tentang    cara    kerja    kerangka pemrograman, Laravel dilengkapi dengan Artisan yang bisa digunakan untuk packaging bundle melalui terminal[10].

## 2.2. Metode prototyping
Metode Prototyping adalah  metode  pengembangan    sistem    di    mana prototipe  dibangun,  diuji,  dan  kemudian    dikerjakan    ulang    seperlunya sampai  hasil  yang  dapat  diterima  dicapai    dari  mana    sistem    atau    produk yang  lengkap  dapat  dikembangkan.  Metode  ini  bekerja  paling    baik    dalam skenario di mana tidak semua persyaratan  proyek  diketahui  secara  rinci sebelumnya.    Ini    adalah    proses  berulang,  coba-coba    yang    terjadi    antara pengembang  dan pengguna[13]. Metode ini bergantung  pada  penggunaan prototipe  dengan  pengetahuan  bahwa  mereka perlu  diubah.  Metode  ini juga  digunakan untuk mengembangkan  sistem atau komponen yang  lebih kecil dalam sistem  yang lebih besar. Setelah prototipe selesai dan  telah diuji, pengembang dapat  mulai  merancang komponen  atau subsistem baru  dari basis    kerja,  dan  komponen  baru  ini  akan  memiliki  pengetahuan  penuh tentang  arsitektur  sistem  saat  ini  berdasarkan  pekerjaan  pengembangan sebelumnya.

## 3. HASIL DAN PEMBAHASAN 3.1. Usecase Diagram
Gambar 1. Usecase Diagram
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
Tabel 2. Keterangan Usecase Diagram No Use Case Keterangan 1 Permission Berfungsi untuk mengelola hak akeses untuk setiap menu aplikasi 2 Roles Berfungsi untuk mengelola Tugas/Jabatan yang akan digunakan oleh user 3 User Berfungsi untuk mengelola data pengguna 4 Talaqqi Kategori Berfungsi untuk membuat tugas tallaqi yang, case ini hanya dapat diakses oleh guru tallaqi 5 Tallaqi Berfungsi untuk menginputkan tugas tallaqi 6 Kelas Berfungsi untuk mengelola data kelas 7 Pelajaran Berfungsi untuk mengelola data pelajaran 8 Info Berfungsi untuk menginputkan info/berita yang ditampilkan di dashboard 9 Materi Berfungsi untuk menginputkan materi pelajaran 10 Kuis Berfungsi untuk mengerjakan kuis
3.2. Activity Diagram
Gambar 2. Manajemen Materi
Gambar 3. Manajemen Tugas
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
Gambar 4. Manajemen Talaqqi

## 3.3. Squence Diagram
Gambar 5. Squence Diagram
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti

## 3.4. Database
Gambar 6. Database

## 3.5. Implementasi Sistem
Pada Prototyping tahap ke-1 dibuat fitur login, menu user , menu kelas, menu  pelajaran,  menu  materi,    menu    kuis,    menu Tallaqi dan  beberapa menu  lainnya,  pada  tahap  ini  prototype  hanya  berfokus    pada    pembuatan CRUD  yang  dapat  melakukan  operasi  database    tanpa  membedakan  hak akses user . Berikut tampilan pada prototype tahap ke-1.
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
Gambar 7. Implementasi untuk sistem Login, Daftar Pelajaran, Daftar Materi, Daftar Kuis, Dashboard Utama , Kuisdan Daftar Tugas Talaqqi
Tabel 3. Pengujian Black Box Proses Kasus Pengujian Harapan Hasil Pengujian Prototype Tahap 1 User melakukan login Masukan email dan password kemudian klik ‘tombol’ login Masuk sistem jika username dan password benar ,sistem menampilkan halaman sesuai dengan role pengguna OK Mengakses Halaman daftar pelajaran User mengakses halaman daftar user melalui sidebar Berhasil menampilkan halaman daftar pelajaran OK Menambah pelajaran baru Admin Menambahkan data pelajaran baru melalui form tambah pelajaran Data berhasil diinputkan ke database dan ditampilkan di halaman daftar pelajaran OK Mengakses Halaman Kuis Guru dan siswa mengakses halaman kuis melalui sidebar Berhasil menampilkan halaman daftar kuis OK Menambahkan Kuis Guru menambahkan kuis baru melalui halaman tambah kuis Berhasil menambahkan kuis baru ke database dan data tampil di halaman daftar kuis OK Mengerjakan Kuis Siswa Mengerjakan Kuis melalui halaman detail kuis Berhasil mengerjakan kuis data disimpan ke database dan halaman diarahkan ke daftar kuis OK Pengujian Prototype Tahap 2 Mengakses User mengakses Berhasil menampilkan OK
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
Halaman Dashboard halaman dashboard melalui sidebars halaman dashboard yang berisi data grafik Mengakses Materi Pelajaran Dalam Bentuk PDF, dan Video User Mengakses halaman detail materi pelajaran dan melihat tampilan PDF dan Video Berhasil menampilkan halaman detail materi pelajaran dalam bentuk PDF dan Video OK Mengakses Halaman Quiz User Mengakses Halaman Quiz Berhasil Mengakses halaman quiz dan mengerjakan quiz OK Menambahkan data Tallaqi Guru Menambahkan data Tallaqi baru melalui halaman tambah Tallaqi baru Berhasil menginputkan data Tallaqi baru ke database dan data Tallaqi tampil di halaman daftar Tallaqi OK Mengakses Halaman Daftar Tallaqi Guru Tallaqi dan Siswa mengakses halaman daftar Tallaqi melalui sidebar Berhasil mengakses daftar Tallaqi OK

## 4.  SIMPULAN
Berdasarkan  hasil  perancangan,  pembangunan  dan  pengujian  sistem maka dapat disimpulkan bahwa aplikasi E- Learning SMA Hayyatan Thayibah proses  belajar online dapat  dikelola  oleh  guru  secara  langsung  dan  dapat diakses oleh siswa dimanapun dan kapanpun. Manajemen materi E- Learning dapat dilakukan langsung oleh guru dan data materi yang diinputkan terarsip di database sehingga dapat diakses kembali.

## DAFTAR PUSTAKA
[1]      K.  Sari,  “Blended  Learning  sebagai  Alternatif  Model  Pembelajaran Inovatif di Masa Post-Pandemi di Sekolah Dasar,” J. Basicedu , vol. 5, no. 4, pp. 2156–2163, Jul. 2021, doi: 10.31004/BASICEDU.V5I4.1137.
[2] J. Andry and M. Stefanus, “Pengembangan Aplikasi E-learning Berbasis Web  Menggunakan  Model  Waterfall  Pada  SMK  Strada  2  Jakarta,” J.
Fasilkom , vol. 10, no. 1, pp. 1–10, 2020, doi: 10.37859/jf.v10i1.1878.
[3] A. Winarni, Yafri, and Reno Kurniawan, “Aplikasi E-Learning pada SMK Negeri Kundur Berbasis Web,” J. Bangkit Indones. , vol. 6, no. 2, pp. 222– 227, 2017, doi: 10.52771/bangkitindonesia.v6i2.173.
[4] H. Ferdiansyah, Z. N, R. Yakub, and A. H, “Penggunaan Model Blended Learning  terhadap  Hasil  Belajar  di  masa  Pandemi  Covid-19,” Edumaspul  J.  Pendidik. ,  vol.  5,  no.  2,  pp.  329–334,  2021,  doi: 10.33487/edumaspul.v5i2.2075.
[5] A.  V.  Islami  and  M.  A.  Sunni,  “Pelatihan  Blended  Learning  Sebagai Alternatif  Pembelajaran  Selama  Pandemi,” Selaparang  J.  Pengabdi.
Masy.  Berkemajuan ,  vol.  4,  no.  3,  pp.  883–887,  2021,  [Online].
Available: http://journal.ummat.ac.id/index.php/jpmb/article/view/5401.
Jurnal Sains Komputer & Informatika (J-SAKTI) Volume 6 Nomor 2, September 2022, pp. 754-765 ISSN: 2548-9771/EISSN: 2549-7200 https://tunasbangsa.ac.id/ejurnal/index.php/jsakti
[6] M.  Daheri,  J.  Juliana,  D.  Deriwanto,  and  A.  D.  Amda,  “Efektifitas WhatsApp sebagai Media Belajar Daring,” J. Basicedu , vol. 4, no. 4, pp. 775–783, 2020, doi: 10.31004/basicedu.v4i4.445.
[7] M.  S.  Robbi,  “Perancangan  Aplikasi  E-Learning  Berbasis  Web  dengan Model Prototype pada SMPN 7 Kota Tangerang Selatan,” vol. 2, no. 4, pp. 148–154, 2019.
[8] Hikmat,  E.  Hermawan,  Aldim,  and  Irwandi,  “Efektivitas  Pembalajaran Daring Selama Masa Pandemi Covid-19 : Sebuah Survey Online,” Digit. Libr. UIN SUnan Gung Djati, Bandung , pp. 1–7, 2020, [Online]. Available: http://digilib.uinsgd.ac.id/30625/.
[9] A. Setiani, “Efektivitas Proses Belajar Aplikasi Zoom di Masa Pandemi dan  Setelah  Pandemi  Covid-19,” Pros.  Semin.  Nas.  Pascasarj.  UNNES , vol. 2, pp. 523–530, 2020, [Online]. Available: http://www.academia.edu/download/64015904/M Darul Aksan F.pdf.
[10]  L.  Adi,  R.  J.  Akbar,  and  W.  N.  Khotimah,  “Platform  e-Learning  untuk Pembelajaran  Pemrograman  Web  Menggunakan  Konsep  Progressive Web Apps,” J. Tek. ITS , 2018, doi: 10.12962/j23373539.v6i2.24291.
[11]  W.  D.  Astika,  A.  H.  Brata,  and  K.  C.  Brata,  “Perancangan  Aplikasi Asistensi  Skripsi  Mahasiswa  berbasis  Progressive  Web  App  dengan Metode Prototyping,” vol. 3, no. 11, 2019.
[12]    S. Sinha, Beginning Laravel Build Websites with Laravel 5.8 . 2019.
[13]  R. A.S and M. Shalahuddin, Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek. Bandung : Informatika . Bandung: Informatika, 2016.