e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang
Perancangan Sistem E-Learning Berbasis Responsive Web Di Universitas Islam Syekh Yusuf Tangerang
1 Diah Rahmawati, 2 Sukrim
1,2 Jurusan Teknik Informatika TI Universitas Islam Syekh-Yusuf Jln. Maulana Yusuf No 10 – Babakan  Kota Tangerang
1 drahmawati@unis.ac.id
2 sukrim@unis.ac.id

## Abstract
Sejak Indonesia dinyatakan sebagai negara terjangkit virus Corona (COVID-19), penerapan social distancing  sebagai  upaya  pencegahan  penyebaran  virus  menyebabkan  perubahan  metode  belajar konvensional menjadi belajar online. Penggunaan smartphone dimanfaatkan oleh berbagai instansi pendidikan  sebagai  media  belajar  yang  modern,  praktis,  dan  ekonomis.  Pada  dasarnya  sistem  e- learning atau online learning bukanlah hal baru di dunia pendidikan. Sayangnya Universitas Islam Syekh  Yusuf  Tangerang  belum  memiliki  sistem  e-learning  yang  memanfaatkan  fleksibilitas smartphone.  Penelitian  ini  bertujuan  untuk  membuat  rancangan  sistem  e-learning  berdasarkan permasalahan yang dikaji di Universitas Islam Syekh Yusuf Tangerang. Proses perancangan sistem menggunakan  metode  berorientasi  objek  dengan  UML.  Hasil  yang  diperoleh  dari  perancangan aplikasi  e-learning  ini  diharapkan  dapat  diterapkan  dan  diimplementasikan  guna  membantu meningkatkan kualitas kegiatan pembelajaran di Universitas Islam Syekh Yusuf Tangerang.
Keywords: E -learning , online  learning, pembelajaran  melalui  smartphone,  UML, perancangan sistem.

## A. Pendahuluan
Wabah  virus  Corona  (COVID-19)  tengah  melanda  123  negara  sejak  ditetapkan  oleh WHO  sebagai  pandemi  global.  Indonesia  sebagai  salah  satu  negara  terjangkit  mulai membatasi berbagai aktivitas sosial sejak Maret 2020 sebagai upaya dalam menanggulangi penyebaran  virus  COVID-19.  Akibat  dari  penerapan social  distancing ,  sekolah  harus menghentikan kegiatan belajar mengajar di lingkungan Sekolah dan menggantinya dengan sistem belajar daring ( online learning ).
Penetapan peraturan social distancing di lingkup pendidikan yang tiba-tiba menimbulkan berbagai reaksi bagi pendidik maupun peserta didik. Bagi instansi pendidikan yang sudah menerapkan online learning dengan  mudah  secara  sistematis  memindahkan  ruang  belajar mereka  ke  dalam  sistem e-learning .  Akan  tetapi  bagi  instansi  pendidikan  yang  belum pernah menerapkan online learning , terpaksa menuntut pendidik dan peserta didik untuk beradaptasi secepat mungkin dengan berbagai platform yang tersedia di smartphone seperti whatsApp, Google Classroom, Google Meet, dsb.
Pada  dasarnya e-learning bukanlah  hal  baru  di  dunia  pendidikan. [1] Istilah e-learning digunakan  sebagai  istilah  untuk  segala  teknologi  yang  digunakan  untuk  mendukung
usaha-usaha  pengajaran  lewat  teknologi  elektronik  internet,  sehingga  kebutuhan  yang berkaitan  dengan  pembelajaran  diperoleh  secara online melalui  sistem e-learning .  Dengan adanya e-learning [2] peserta  didik  dapat  saling  berbagi  informasi  dan  dapat  mengakses bahan  belajar  setiap  saat  dan  berulang-ulang,  dengan  kondisi  yang  demikian  itu  peserta didik  dapat  lebih  memantapkan  penguasaannya  terhadap  materi  pembelajaran.  Banyak penyelenggara  pendidikan  telah  menerapkan e-learning sebagai  inovasi  teknologi  sistem pendidikan yang praktis dan ekonomis.
Meskipun  penggunaan smartphone sudah  menjadi  konsumsi  publik  setiap  hari  nyaris tanpa henti, manfaatnya dalam pendidikan baru benar-benar dirasakan selama masa social distancing . Smartphone sebagai  salah  satu  media  yang  diandalkan  dalam online  learning sebab dimiliki hampir seluruh masyarakat. Untuk itu perlu sekali menghadirkan e-learning dalam smartphone guna menunjang produktifitas belajar sehari-hari.
Universitas  Islam  Syekh  Yusuf  saat  ini  belum  memiliki  media  pembelajaran online . Meskipun  dalam  kegiatan  belajar  mengajar  konvensional  juga  memiliki  kekurangan. Selama ini dosen dan mahasiswa melakukan proses belajar mengajar hanya pada saat jam perkuliahan  di  kampus,  sehingga  ketika  dosen  berhalangan  hadir  maka  perkuliahan terpaksa ditiadakan. Kendala yang dihadapi ketika ingin mengganti perkuliahan pada hari lain adalah sulitnya menentukan jadwal luang yang cocok antara mahasiswa dan dosen.
Pandemi ini seharusnya dapat menjadi pengingat bagi civitas di Universitas Islam Syekh Yusuf  tentang  pentingnya  penerapan  sistem e-leraning dalam  dunia  pendidikan.  Bukan hanya  untuk  digunakan  selama  masa social  distancing , e-learning juga  bermanfaat  untuk meningkatkan  kualitas  kegiatan  belajar  mengajar  di  Universitas  Islam  Syekh  Yusuf. Berdasarkan permasalahan diatas penulis bermaksud untuk membuat Perancangan Sistem E-learning Berbasis Responsive Web di Universitas Islam Syekh Yusuf Tangerang.

## B. Teori Terkait
1. Perancangan
Langkah  awal  dalam  membuat  sistem  adalah  perancangan  dari  sistem  tersebut. Perancangan  merupakan  proses  penerapan  berbagai  teknik  dan  prinsip  yang  bertujuan untuk  mendefinisikan  sebuah  peralatan,  satu  proses  atau  satu  sistem  secara  detail  yang membolehkan dilakukan realisasi fisik. Dengan menggunakan satu atau sejumlah metode perancangan,  fase  perancangan  akan  menghasilkan  perancangan  data,  perancangan antarmuka, perancangan arsitektur dan perancangan prosedur.
2. Sistem
Menurut  Jogiyanto,  sistem  adalah  suatu  jaringan  kerja  dari  prosedur-prosedur  yang saling  berhubungan,  berkumpul  bersama-sama  untuk  melakukan  suatu  kegiatan  atau untuk  tujuan  tertentu. [5] O’Brien  &  Marakas  (2010)  juga  menyatakan  bahwa  sistem didefinisikan  sebagai  perangkat  komponen  yang  saling  terkait,  dengan  batas  yang  jelas, bekerja  sama  untuk  mencapai  tujuan  dengan  menerima  input  dan  menghasilkan  output dalam porses transformasi terorganisir.
Universitas Islam Syekh-Yusuf Tangerang

## 3. Responsive Web
Web  responsive  design pertamakali  diperkenalkan  oleh  Ethan  Marcotte  pada  artikelnya yang sangat menginspirasi dengan judul ”Web Responsive Design”. [6] Sebuah pendekatan menunjukkan  bahwa  desain  dan  pengembangan  harus  menanggapi  perilaku  dan lingkungan  pengguna  berdasarkan  pada  ukuran,  platform,  dan  orientasi  layar. Sebagaimana  diketahui  bahwa  saat  ini  sudah  banyak  pengguna  laptop  yang  beralih  ke tablet  maupun  smartphone,  sehingga  website  harus  memiliki  teknologi  untuk  secara otomatis  merespon  preferensi  pengguna  yang  didasarkan  pada  layar gadget yang digunakan.
4. E-learning Dalam  Bahasa  Inggris  dikenal  istilah  ‘ online  learning ’,  ‘ e-learning ’,    ‘ web-based  learning ’ yang  pada  dasarnya  menunjuk  kepada  ‘pembelajaran  dalam  jaringan’. [7] Numiek mendefinisikan e-learning sebagai  salah satu bentuk model pembelajaran  yang difasilitasi dan  didukung  pemanfaatan  teknologi  informasi  dan  komunikasi. E-learning menggabungkan  berbagai  macam  kegiatan  pendidikan  yang  dilakukan  baik  secara individu  atau  kelompok,  secara online atau offline ,  dan  secara synchronous (pada  waktu yang sama) atau asynchronous (pada waktu yang berbeda).
5. Konsep Pembelajaran E-learning
Clark & Mayer menyebutkan ciri-ciri yang dimiliki e-learning , antara lain:  (1) Memiliki konten yang relevan dengan tujuan pembelajaran; (2) Menggunakan metode instruksional, misalnya  penyajian  contoh  dan  latihan  untuk  meningkatkan  pembelajaran;  (3) Menggunakan  elemen-elemen  media  seperti  kata-kata  dan  gambar-gambar  untuk menyampaikan materi pembelajaran; (4) Memungkinkan pembelajaran langsung berpusat pada  pengajar  ( synchronous  e-learning )  atau  di  desain  untuk  pembelajaran  mandiri ( asynchronous e-learning ); dan (5) Membangun pemahaman dan keterampilan yang terkait dengan  tujuan  pembelajaran  baik  secara  perseorangan  atau  meningkatkan  kinerja pembelajaran kelompok.
6. Literatur Review
a. Penelitian yang dilakukan oleh [9] Agus Putranto dengan judul Perancangan Sistem E-learning Berbasis  Web  Dengan  Analsis  SWOT  Pada  Sekolah  Menengah  Umum. Menyimpulkan  bahwa  SMU  Regina  Pacis  Bogor  sebaiknya  melakukan  strategi pengembangan produk termasuk pengembangan proses belajar mengajar (materi, metode, sumber  daya  manusia),  salah  satunya  dengan  penerapan  teknologi  sistem  informasi e- learning .
b. Penelitian yang dilakukan oleh [10] Siti Khotijah dengan judul Perancangan Database E-Learning Manajemen  System  untuk  Pembelajaran  Pada  Sekolah  Menengah  Pertama. Menemukan  bahwa  suatu E-Learning Manajemen  System  membutuhkan  perancangan database karena database yang   salah akan mengakibatkan informasi yang   ingin dirancang tidak tersampaikan, dan fasilitas  kerjasama  online  yang  dimiliki E-Learning Manajemen System memudahkan berlangsungnya proses transfer informasi dan komunikasi.
e-ISSN: 2656-0860
c. Penelitian  yang  dilakukan  oleh [11] Yaena  Setiawan  dengan  judul  Perancangan E- learning Berbasis  Moodle  untuk  SMP  N  1  Surakarta.  Menunjukkan  bahwa  berdasarkan hasil  uji  statistik  97,14%  responden  sepakat  e-learning  membantu  dalam  proses pembelajaran.  Sebanyak  94,28%  responden  juga  setuju  bahwa  aplikasi  ini  dapat meningkatkan keinginan untuk mendalami materi.

## C. Metodologi Penelitian

## 1. Metode Pengumpulan Data
Metode pengumpulan data yang dilakukan dalam penelitian ini yaitu:
1) Metode Observasi. Penulis  melakukan  pengamatan  langsung  secara  sistematis  terkait  permasalahan  yang diambil.
2) Metode Kepustakaan
Penulis  menghimpun  data  dan  informasi  melalui  berbagai  sumber  yang  berhubungan dengan topik permasalahan yang diambil.

## 3) Metode Wawancara
Penulis  mengumpulkan  informasi  melalui  tatap  muka  dan  tanya  jawab  dengan narasumber  terkait  permasalahan.  Metode  wawancara  dilakukan  kepada  Dosen  dan Mahasiswa.
4) Metode Pengumpulan Data
Metode ini merupakan yang paling startegis dalam penelitian, karena tujuan utama dari penelitian adalah mendapatkan data.

## 2. Analisis Kebutuhan Sistem
Proses analisis dilakukan terhadap hasil tahapan pengumpulan data dengan wawancara, observasi, dan studi pustaka untuk mendapatkan spesifikasi kebutuhan sistem yang akan dikembangkan.
Dalam membangun sistem e-learning dibutuhkan data, diantaranya:
1) Data dosen
2) Data mahasiswa
3) Data matakuliah
4) Data kelas
Berdasarkan data tersebut, diharapkan sistem e-learning mampu mengelola beberapa hal berikut:
1) Kelola kelas online
2) Kelola modul/materi belajar
3) Kelola tugas
4) Kelola soal esai dan pilihan ganda
5) Kelola nilai

## 3. Perancangan Sistem
Perancangan  sistem  dilakukan  dengan  pemodelan  proses  untuk  mengilustrasikan aktivitas yang dilakukan dan bagaimana data berpindah oleh kativitas tersebut. Teknik yang digunakan adalah metode Perancangan Berorientasi Obyek menggunakan UML.

## D. Hasil dan Pembahasan

## 1. Proses Bisnis Sistem Berjalan
Dalam  sistem  pembelajaran  di  Universitas  Islam  Syekh  Yusuf  saat  ini  masih menggunakan  sistem  manual  dan  belum  memiliki  perangkat  lunak  sendiri.  Berikut proses penjadwalan kelas sampai penilaian mahasiswa:

## 1) Pengelolaan Jadwal Kelas
Jadwal  kelas  diatur  oleh  Kepala  Program  Studi,  disetujui  oleh  Dekan  Fakultas, kemudian di upload ke sistem informasi akademik (SINA) sehingga dapat dilihat oleh Dosen dan Mahasiswa. Mahasiswa memilih kelas secara bebas sesuai batas SKS yang dapat diambil berdasarkan IPK.
2) Pengelolaan Tugas dan Ujian
Mahasiswa menerima tugas maupun soal ujian dari Dosen dalam bentuk lembar soal sesuai format ISO 9001:2015, dikerjakan oleh mahasiswa dalam lembar jawaban atau bentuk makalah hardcopy . Dalam satu semester Dosen wajib memberikan minimal 2 tugas (Evaluasi Konpetensi Terstruktur), UTS dan UAS.
3) Pengelolaan Nilai
Nilai tugas/UTS/UAS dikoreksi oleh dosen dan di upload ke dalam sistem informasi akademik paling lambat 14 hari setelah UTS/ UAS.

## 2. Analisis Permasalahan
Berdasarkan  studi  yang  telah  dilakukan  terhadap  sistem  berjalan  saat  ini,  terdapat beberapa permasalahan, diantaranya:
1) Dalam  satu  kelas  terdapat  mahasiswa  dari  berbagai  tingkat  semester  karena  sistem pengambilan matakuliah yang sepenuhnya diserahkan kepada mahasiswa. Sehingga apabila  dosen  ingin  melakukan  penggantian  jadwal  karena  berhalangan  hadir, seringkali jadwal mahasiswa yang satu dan lainnya saling berbenturan. Hal tersebut selain  menyulitkan  dosen  untuk  mengatur  jadwal  pengganti  juga  dapat  merugikan mahasiswa.
2) Dosen  membuat  soal  dalam  bentuk softcopy dan  memperbanyak  soal  sesuai  jumlah mahasiswa.  Hal  ini  dirasa  tidak  efisien  karena terjadi  pemborosan  kertas dan  biaya fotocopy , padahal nantinya lembar soal maupun lembar jawaban tidak digunakan lagi baik oleh dosen maupun mahasiswa.
3) Kewajiban  mengajar  dosen  sebanyak  12  –  16  SKS  membuat  dosen  sekurang- kurangnya mengajar di 3 (tiga) kelas atau lebih. Dalam satu kelas rata-rata terdapat 30  (tiga  puluh)  mahasiswa.  Proses  mengkoreksi  tugas/UTS/UAS  menjadi  beban
tersendiri  bagi  dosen  terlebih  lagi  waktu  menginput  nilai  dibatasi  oleh  sistem informasi akademik (SINA).

## 3. Rancangan Sistem Usulan
Perancangan sistem usulan bertujuan untuk  memperbaiki  atau  menggantikan  sistem lama  serta memberikan gambaran-gambaran sistem  yang jelas tentang desain sistem e- learning .

## 1) Diagram Konteks
Diagram  konteks  adalah  suatu  diagram  yang  terdiri  dari  satu  proses,  mewakili seluruh  sistem.  Diagram  ini  meggambarkan  input  dan  output  dari  sistem  terhadap ruang lingkupnya.
Gambar 1. Diagram Konteks Sistem E-learning
2) Data Flow Diagram (DFD)
Merupakan  model  logika  data  atau  proses  yang  dibuat  untuk  menggambarkan darimana asal data, kemana tujuan data yang keluar, dimana data disimpan, proses apa yang dihasilkan oleh data tersebut dan interaksi antara data dengan proses dan entitas.
Gambar 2. Data Flow Diagram/ Diagram Alur Data (DFD) Sistem E-learning

## 3) Use Case Diagram
Pemodelan dengan use case diagram menggambarkan interaksi aktor dengan sistem, untuk  memahami  fungsi  apa  saja  yang  ada  di  dalam  sistem.  Berikut  ini  beberapa konsep  use  case  untuk  sistem e-learning ,  dimana  sistem  ini  memiliki  3  (tiga)  aktor yaitu staff akademik, dosen, dan mahasiswa.
Gambar 3. Use Case Diagram Staff Akademik sebagai Pengguna
Gambar 4. Use Case Diagram Dosen sebagai Pengguna
Universitas Islam Syekh-Yusuf Tangerang

## Gambar 5. Use Case Diagram Mahasiswa sebagai Pengguna

## 4) Class Diagram
Berikut  adalah class diagram  yang  menggambarkan  struktur class dan  hubungan antar class dalam sistem.
Universitas Islam Syekh-Yusuf Tangerang

## Gambar 6. Class Diagram

## 5) Rancangan tampilan
Untuk  menghasilkan  tampilan  yang responsive ,  proses  pengkodean  menggunakan Bootstrap  sebagai  framework  HTML,  CSS  dan  JS  yang  paling  popular.  Berikut  ini adalah rancangan tampilan untuk sistem e-learning.
Gambar 7. Rancangan tampilan Login pada Laptop
Gambar 8. Rancangan tampilan Login pada Smartphone
Gambar 9. Rancangan tampilan Beranda pada Laptop
Universitas Islam Syekh-Yusuf Tangerang
Gambar 10. Rancangan tampilan Beranda pada Smartphone
Gambar 11. Rancangan tampilan laman Kelas pada Laptop
Gambar 12. Rancangan tampilan laman Kelas pada Smartphone
Gambar 13. Rancangan tampilan laman Modul pada Laptop
Gambar 14. Rancangan tampilan laman Modul pada Smartphone
Gambar 15. Rancangan tampilan laman Tugas pada Laptop
Gambar 16. Rancangan tampilan laman Tugas pada Smartphone
Gambar 17. Rancangan tampilan laman Pengerjaan Tugas Pilihan Ganda pada Laptop

## E. Kesimpulan
Berdasarkan analisis dan perancangan terhadap sistem, dapat disimpulkan bahwa:
1) Sistem e-learning yang telah dirancang digunakan oleh 3 aktor, yaitu Staff Akademik, Dosen dan Mahasiswa.
2) Dosen  dapat  mengelola  kelas  online  untuk  melaksanakan  perkuliahan  jarak  jauh dengan  metode asynchronous sehingga  tidak  mengganggu  jadwal  perkuliahan konvensional,  modul  materi  kuliah  maupun  tugas  dapat  diakses  kapan  saja  dan dimana saja.
3) Dosen  dapat  mengunggah  modul  kuliah,  menyimpan  soal-soal  dan  memberikan tugas  kepada  mahasiswa  berupa  pilihan  ganda  maupun  esai  berdasarkan  soal-soal yang sudah tersimpan dalam sistem. Tugas harus diakses dan dikerjakan mahasiswa sebelum deadline yang ditentukan.
4) Sistem  akan  menghitung  otomatis  nilai  dari  tugas  yang  berbentuk  pilihan  ganda. Sistem  juga  menyajikan  informasi  nilai  yang  dapat  diunduh  dalam  format  yang sudah  disesuaikan  dengan  sistem  informasi  akademik  kampus  (SINA)  sehingga memudahkan dosen dalam penginputan nilai.
5) Sistem  yang  didesain  dengan responsive web  dapat  beradaptasi  secara  optimal diperangkat  apapun.  Penyesuaian  desain  tampilan  dengan  layar  memberikan kenyamanan  bagi  pengguna  sehingga  memudahkan  sistem e-learning untuk  diakses kapan saja dan dimana saja.

## Referensi
[1] Rohmah.  L.,  “Konsep  E-Learning  Dan  Aplikasinya  Pada  Lembaga  Pendidikan Islam.An-Nur”, 2016.
[2] Muntihana.  Vimila,  “Analisis  dan  Perancangan  Sistem  Informasi  Berbasis  Web  dan Android pada Klinik Gigi Lisda Medica Di Kabupaten Bulukumba Sulawesi Selatan,” S.Kom skripsi, Universitas Islam Negeri Alauddin Makassar, 2017.
[3] Jogiyanto, Pengantar Sistem Informasi YAKUB , Jakarta: Rineka Cipta, 2012.
[4] O’Brien  and  Marakas, Introduct  ion  to  Information  System .  New  York  :  McGraw- Hill/Irwin, 2010.
[5] Songko. James Stevan K., dan Wahyono. Teguh, “Perancangan Aplikasi Pembelajaran Berbasis  Responsive  Web  Desain  Studi  Kasus  pada  Universitas  Tadulako,”  S.Kom skripsi, Universitas Kristen Satyawacana, Salatiga, 2014.
[6] Hanum. Numiek Sulistyo, “Keefektifan E-learning Sebagai Media Pembelajaran (Studi Evaluasi  Model  Pembelajaran  E-learning  SMK  Telkom  Sandhy  Putra  Purwokerto)”, Jurnal Pendidikan Vokasi, Vol. 3, Nomor 1, 90 – 102, 2013.
[7] Putranto. Agus, “Perancangan Sistem E-learning Berbasis Web Dengan Analisis SWOT Pada Sekolah Menengah Umum,” ComTech Vol.2 No.2, Des. 2011
[8] Khotijah.  Siti,  “Perancangan  Database E-Learning Manajemen  System  untuk Pembelajaran pada Sekolah Menengah Pertama,” Jurnal String Vol. 1 No. 1, ISSN: 2527 – 9661, 2016.
[9] Setiawan.  Yaena,  “Perancangan  E-Learning  Berbasis  Moodle  Untuk  Smp  N  1 Surakarta,” S.Kom skripsi, Universitas Muhammadiyah Surakarta, 2017.