KLIK: Kajian Ilmiah Informatika dan Komputer ISSN 2723-3898 (Media Online) Vol 4, No 5, April 2024, Hal 2451-2463 DOI 10.30865/klik.v4i5.1792 https://djournals.com/klik

## Rancang Bangun Aplikasi E-Learning Berbasis Mobile Untuk Mengimplementasikan Menu Quiz dengan Metode User Centered Design
Aulia Nugraheni * , Sri Wulandari, RR Hajar Puji Sejati, Agus Suhendar
Fakultas Sains dan Teknologi, Informatika, Universitas Teknologi Yogyakarta, Yogyakarta, Indonesia Email: 1,* Agtlaulia2@gmail.com, 2 Sri.wulandari@staff.uty.ac.id, 3 Hajarsejati@staff.uty.ac.id, 4 Agus.suhendar@staff.uty.ac.id Email Penulis Korespondensi: Agtlaulia2@email.com
Abstrak− Belakangan ini, perkembangan teknologi di dunia sangatlah pesat. Banyak inovasi-inovasi terbaru yang diciptakan untuk membantu manusia dalam menjalankan aktivitasnya, baik aktivitas secara langsung maupun secara virtual. Saat ini, semua layanan dan jasa  sudah  terdigitalisasi.  Proses  digitalisasi  ini  juga  terjadi  di  dunia  pendidikan  di  Indonesia.  Sebagai  lembaga  pendidikan  tingkat menengah pertama, SMPN 1 Rembang memegang peranan penting dalam perkembangan ilmu pengetahuan. SMPN 1 Rembang harus meningkatkan kualitas pendidikan yang diberikannya. Saat ini proses pembelajaran di SMPN 1 Rembang masih bersifat konvensional, sehingga belum dapat memaksimalkan efektifitas dan efisiensi sistem pembelajaran. Banyak siswa yang mengalami kesulitan dalam mengakses  E-Learning  melalui  website  dikarenakan  tampilannya  berbeda  apabila  diakses  menggunakan smartphone .  Ketika  ingin mengakses website E-Learning siswa harus melalui laptop maupun PC. Hal itu dapat menghambat proses pembelajaran karena siswa tidak dapat mengakses website dimanapun dan kapanpun dengan mudah. Proses belajar mengajar antara siswa dan guru hanya dapat dilakukan  dengan  syarat  adanya  pertemuan  antara  siswa  dan  guru  di  dalam  kelas  secara  langsung.  Penelitian  ini  bertujuan  untuk mengembangkan sebuah sistem E-Learning yang disajikan dalam sebuah aplikasi berbasis mobile sehingga dapat digunakan dimana saja dan kapan saja. Sistem ini dikembangkan dengan menggunakan bahasa pemrograman PHP dan database MySQL yang menerapkan Metode User Centered Design (UCD). Metode digunakan untuk menganalisa kebutuhan sistem dan rancangan yang terdiri dari font , tata  letak,  hingga  fitur.  Dengan  adanya  sistem  ini,  SMP  Negeri  1  Rembang  dapat  memberikan  sistem  pembelajaran  kepada  setiap siswanya dengan lebih maju dan modern karena sistem ini mampu menjawab semua kebutuhan belajar mengajar secara efektif dan efisien. Pada penelitian ini menghasilkan aplikasi E-Learning berbasis mobile yang dapat diinstall pada smartphone oleh siswa dan guru, sehingga siswa dan guru bisa mendapatkan informasi dimanapun dan kapanpun.
Kata Kunci: E-Learning; PHP; MySQL; User Centered Design (UCD); SMPN 1 Rembang.
Abstract− Nowadays, the development of technology in the world is very rapid. Many of the latest innovations have been created to help  humans  in  carrying  out  their  activities,  both  in  person  and  virtually.  Currently,  all  services  and  services  are  digitized.  This digitalization process is also happening in the world of education in Indonesia. As an educational institution at the junior secondary level,  SMPN  1  Rembang  plays  an  important  role  in  the  development  of  science.  SMPN  1  Rembang  must  improve  the  quality  of education it provides. Currently, the learning process at SMPN 1 Rembang is still conventional, so it has not been able to maximize the effectiveness and efficiency of the learning system. The teaching and learning process between students and teachers can only be done on condition that there is a meeting between students and teachers in the classroom directly. This research aims to develop an E- Learning system presented in a mobile-based application so that it can be used anywhere and anytime. This system is developed using PHP programming language and MySQL database that applies User Centered Design (UCD) method. This method is used to analyze the needs and design of the system which consists of fonts, layouts, and features. With this system, SMP Negeri 1 Rembang can provide a learning system to each student with a more advanced and modern because this system is able to answer all teaching and learning needs.
Keywords : E-Learning; PHP; MySQL; User Centered Design (UCD); SMPN 1 Rembang.

## 1. PENDAHULUAN
Perkembangan teknologi informasi merupakan media yang efektif dalam menghasilkan dan memperluas informasi yaitu dengan menggunakan media teknologi komputer dalam bisnis [1]. Teknologi banyak memiliki peran dan manfaat yang tersebar  luas  dalam  berbagai  bidang  dan  aspek  kehidupan, salah  satunya  terdapat  pada  bidang  pendidikan.  Teknologi dapat mempermudah siswa-siswi dalam proses pembelajaran atau pencarian materi pembelajaran dan salah satu contoh teknologinya adalah smartphone [2]. Salah satu  pondasi untuk menghasilkan sumber daya yang berkualitas dilakukan dengan sadar dalam suatu rangkaian sistematis dalam bentuk pendidikan  [3]. Institusi pendidikan  tidak  terlepas  dari sistem  pengolahan  data,  hal  ini  dikarenakan  sistem  tersebut  terdiri  dari  sub-sub yang  saling  berkaitan  untuk mengolah  data  yang  berkaitan  dengan  masalah  dan  membantu  organisasi  dalam pengambilan  keputusan [4]. Salah satu  cara  untuk  mengimplementasikan  teknologi  dibidang  pendidikan  adalah  penggunaan  E-Learning.  E-Learning mampu meningkatkan kebermanfaatan teknologi sebagai sarana pendukung siswa dalam belajar terutama pada SMPN 1 Rembang.  SMPN    1  Rembang  memiliki  masalah  dalam  website  E-Learning  yang  pengaksesannya  hanya  disarankan menggunakan laptop maupun PC. Hal itu menjadi masalah karena menghambat efektivitas pembelajaran siswa. Sehingga dibuat aplikasi E-Learning berbasis mobile yang dapat diinstal melalui smartphone . Dengan adanya E-Learning maka penyampaian materi menjadi semakin fleksibel sehingga guru maupun siswa tidak harus berangkat ke sekolah dan masuk kelas, namun dapat dilakukan dimanapun, kapanpun, dan dalam kondisi apapun. Hal itu dapat terjadi apabila fasilitas penunjang pembelajarannya optimal [5]. Perkembangan zaman mengharuskan semua pihak untuk terus berkembang dan meningkatkan kompetensinya [6]. Perkembangan teknologi informasi di era sekarang dalam dunia pendidikan mendorong pemerintah untuk menciptakan proses pembelajaran yang semakin berkualitas, efektif, efisien, dan inovatif [7]
Dalam beberapa penelitian sebelumnya, penerapan E-Learning hanya dapat digunakan dalam bentuk website saja. Hal  itu  berarti  bahwa  banyak  batasan  yang  masih  menjadi  kekurangan  dalam  suatu  sistem.  Kegiatan  pembelajaran
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
merupakan  hal  yang  dilakukan  dengan  tujuan  memperoleh  pengetahuan,  menguasai  kompetensi  tertentu,  serta membentuk  sikap  siswa.  Kegiatan  tersebut  akan  berhasil  apabila  siswa  memiliki  motivasi  untuk  belajar  [8].  Metode diskusi, ceramah, dan demonstrasi dapat digunakan dalam pembelajaran dengan dibantu media yang diperlukan sebagai media untuk menyampaikan informasi dan materi pembelajaran. Media pembelajaran tersebut dapat berupa fisik dan non fisik  [9].  Aplikasi  E-Learning  dapat  menjadi  media  yang  berisi  beberapa  instruksi  yang  terstruktur  sehingga  dapat menghasilkan  masukan  maupun  keluaran  [10].  Aplikasi  E-Learning  memiliki  fungsi  khusus  dan  siap  pakai  untuk menyimpan suatu hal, data, permasalahan, dan pekerjaan [11].
Dalam Penelitian berjudul “Pengembangan Aplikasi E-Learning Dengan Menerapkan Metode Gamification ” [12] dihasilkan  aplikasi  E-Learning  berbasis  website.  Pengembangan  aplikasinya  menggunakan  metode gamification dan waterfall model. Perancangan sistem dari aplikasi website ini menggunakan Class Diagram, Sequence Diagram, ERD, dan User Interface . Framework Codeigniter dan database MySQL digunakan dalam proses pembuatan website . Tahap akhir yakni tahap pengujian menggunakan blackbox testing dan whitebox testing tidak ditemukan kesalahan pada aplikasi E-Learning. Pengujian tersebut membuktikan bahwa kinerja aplikasi baik dan tidak ada kesalahan yang mengganggu.
Pengembangan  aplikasi  E-Learning  pada  SMPN  1  Rembang  dengan  mengimplementasikan  menu  quiz  mampu meningkatkan kualitas proses belajar mengajar di sekolah. Sistem sebelumnya mengimplementasikan quiz menggunakan platform google form. Akan tetapi platform tersebut belum cukup efektif dari aspek penilaian dan objektivitas jawaban siswa. Batasan dalam pendeteksian dan pengontrolan keaslian jawaban siswa tidak dapat diidentifikasi secara tepat [13]. Menu quiz dapat menimbulkan rasa senang karena siswa berinteraksi dengan soal-soal yang  merupakan faktor penting dalam efektivitas pembelajaran [14]. Siswa juga dapat mengeksplor lebih banyak informasi melalui E-Learning tersebut. Sistem dibangun menggunakan bahasa pemrograman PHP. PHP merupakan bahasa berbentuk script yang ditempatkan di dalam server dan diproses oleh server , sehingga hasilnya akan dikirimkan ke client [15]. Penyimpanan data – data yang digunakan  menggunakan database open  source MySQL.  Database  digunakan  untuk  menyimpan  Kumpulan data  yang terorganisisr  oleh  satu  pengguna  maupun  dalam  bentuk  digital.  MySQL  dapat  diandalkan  dalam  hal  kecepatan  dan kemudahan  penggunaannya  sehingga  MySQL  menjadi  database  yang  paling  banyak  dipilih  oleh  para  pengembang perangkat lunak dan aplikasi online maupun desktop  [16] Beberapa fungsi database diantaranya untuk mempermudah identifikasi  data  dengan  mengklasifikannya,  meminimalisir  data  yang  berlipat,  penyimpanan  secara  digital,  serta mempermudah  penggunaan  dalam  berbagai  hal  seperti  menginputan  data  baru  [17].  Dalam  penelitian  ini  dibangun aplikasi dengan metode User Centered Design (UCD) untuk membuat sebuah prototype dari aplikasi E-Learning yang diterapkan di SMPN 1 Rembang.
Pembuatan aplikasi E-Learning yang akan diimplementasikan pada SMPN 1 Rembang berbasis mobile ini selain dapat  memacu  minat  belajar  siswa  melalui  menu  quiz,  namun  juga  dapat  memberikan  kemudahan  bagi  guru  untuk memantau tingkat pengetahuan siswa. Siswa dapat dengan mudah mengakses serta memperoleh informasi terkait materi yang diberikan  di  sekolah.  Siswa  memiliki  akses  untuk  menikmati  manfaat  dari  implementasi  E-Learning  ini.  Hal  itu dapat  menjadi  bukti  nyata  bahwa  belajar  dapat  dilakukan  kapan  saja  dan  dimana  saja.  Dengan  itu,  maka  tujuan  dari pembuatan aplikasi E-Learning pada SMPN 1 Rembang ini telah memenuhi standar efisien dan efektif penggunaannya. Guru juga dapat merasakan manfaat E-Learning seperti kemudahan pendataan nilai-nilai ujian siswa, Kemudahan dalam memberikan materi, serta kemudahan dalam proses mengajar. Menu quiz dapat membantu guru dalam memberikan soal- soal  ujian  kepada  siswa.  Siswa  tidak  akan  merasa  bosan  dan  bahkan  merasa  senang  karena  pembelajaran  menjadi menyenangkan  karena  bisa  dilakukan  menggunakan  smartphone  masing-masing  siswa.  Sehingga  terciptalah  metode pembelajaran  yang  menyenangkan  dan  penuh  kegembiraan.  Dengan  itu,  siswa  dapat  menyerap  ilmu  yang  diberikan dengan maksimal. E-Learning tidak berarti dapat menggantikan pembelajaran di dalam kelas, tetapi memperkuat pada proses perubahan pendidikan melalui pengembangan teknologi [18].

## 2. METODOLOGI PENELITIAN

## 2.1 Jenis Penelitian
Serangkaian tahapan dilakukan dalam penelitian ini dengan melakukan beberapa langkah-langkah yang dilaksanakan dari awal hingga akhir. Tahapan penelitian dijelaskan pada Gambar 1. berikut.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Tahapan - tahapan yang dilakukan dalam penelitian ini melibatkan 6 tahapan. Tahapan tersebut dijelaskan seperti pada Gambar 1 sebagai berikut:
a. Tahapan Pengumpulan Data
Sumber  data  yang  didapat  digunakan sebagai dasar informasi yang relevan dengan penelitian yang dilakukan.
b. Metode Pengembangan Sistem
Tahap  kedua  yaitu  tahap  metode  pengembangan  sistem  yang  menjelaskan  mengenai  metode  pengembangan  yang digunakan untuk mengembangkan aplikasi yang akan dibuat.
c. Analisis Sistem
Analisis sistem menjelaskan kinerja sistem yang masih berjalan dan analisis sistem yang diusulkan disertai analisis kebutuhan fungsional dan non-fungsional.
d. Perancangan Sistem
Pada tahap ke empat menjelaskan perancangan sistem baru menggunakan flowmap dan use case diagram.
e. Pembahasan Aplikasi
Pembahasan Aplikasi  merupakan  tahap  yang menguraikan hasil yang diperoleh selama penelitian
f. Pengujian Aplikasi
Pada tahap inimenjelaskan mengenai metode pengujian blackboxtahapan ini juga merupakan tahapan terakhir yang menjelaskan tentang hasilpengimplementasiansistem

## 2.2 Jenis Penelitian
Pada penelitian ini digunakan metode kualitatif dengan pendekatan studi kasus (case studi research). Penelitian kualitatif merupakan salah satu metode yang melibatkan pengumpulan data di fenomena sekitar, dengan maksud untuk menafsirkan fenomena yang terjadi di mana peneliti merupakan instrument yang penting  [19]. Studi kasus (case study) merupakan penelitian  yang  dilakukan  oleh  peneliti  dalam  suatu  waktu  yang  disertai  aktivitas  untuk  menyelidiki  suatu  fenomena tertentu, dengan menggunakan berbagai metode untuk mengumpulkan informasi secara rinci dan komprehensif selama beberapa periode waktu [20]. Penelitian ini dilakukan di SMP Negeri 1 Rembang yang berada di Kabupaten Purbalingga, Jawa Tengah. Pengembangan sistem yang dilakukan menggunakan metode User Centered Design (UCD). Metode UCD merupakan metode design yang menempatkan satu atau lebih pengguna sebagai pusat dari proses design sistem, sehingga permasalahan pengguna menjadi dasar dalam desain yang dibangun [21].  Sistem yang diterima dapat dibuat dengan cepat dengan berfokus pada masalah yang ada sehingga dapat menghasilkan sebuah solusi berupa prototype design . Prototype akan mengajukan versi dasar yang dapat dikembangkan menjadi lebih besar sesuai dengan kebutuhan pengguna. Tahapan dalam pengembangan sistem menggunakan metode User Centered Design (UCD) dapat dilihat pada Gambar 1. Pada Gambar 1. terdapat UCD method secara garis besarnya. Untuk tahap  – tahapnya dapat dijelaskan sebagai berikut.
a. Fokus pada Pengguna
Peneliti harus berhubungan langsung dengan pengguna sehingga diperlukan tahap yang dilakukan dengan interview serta observasi yang dilakukan pada SMPN 1 Rembang di Jalan Losari Rembang, Kecamatan Rembang, Kabupaten Purbalingga. Pengumpulan kebutuhan dan permasalahan yang ada dilakukan dengan tujuan mendapatkan garis besar secara keseluruhan sistem yang akan dibuat.
b. Perancangan Terintegrasi
Pada tahap ini dilakukan perancangan terhadap sistem mencakup user interface, diagram alir, seta dukungan teknis seperti perangkat lunak dan perangkat keras yang digunakan.
c. Pengujian Pengguna
Tahap ini merupakan satu-satunya oendekatan yang sukses dalam perancangan sistem yang berfokus pada pengguna. d. Perancangan Interaktif
Tahap  ini  menghasilkan  rancangan  yang  kemudian  diserahkan  kepada  pengguna  yang  selanjutnya  dilakukan pengujian sebagai uji coba dan evaluasi.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Berdasarkan metode UCD yang telah dijelaskan, maka dalam penelitian ini akan dilakukan proses sebagai berikut.
a. Pengumpulan data yang diperlukan sistem dengan melakukan wawancara dan observasi pada studi kasus.
b. Membuat flowmap, DAD, dan ERD untuk menentukan kebutuhan pengguna.
c. Membuat rancangan tampilan berupa wireframe untuk tampilan aplikasi berbasis mobile.
d. Penyerahan rancangan berupa prototype kepada pengguna untuk mendapatkan umpan balik. Hal itu bertujuan sebagai evaluasi apabila ada bagian yang harus diperbaiki.

## 2.3. Waktu Pengumpulan Data
Waktu pengumpulan data pada penelitian ini dilakukan sejak kurun waktu kurang lebih 2 (dua) bulan pengumpulan data dan 4 (empat) bulan pengolahan data yang meliputi penyajian dalam bentuk laporan.

## 3. HASIL DAN PEMBAHASAN
Bagian ini mencakup hasil analisis dan perancangan serta pembahasan topik penelitian yang telah direncanakan dalam bab sebelumnya mengenai metodologi penelitian. Analisis dijelaskan dengan rangkaian penjelasan analisis sistem yang sedang berjalan, analisis sistem yang sedang diusulkan, analisis fungsional, analisis non fungsional, serta perancangan dan pembahasan.

## 3.1 Analisis Sistem
Pada tahap analisis sistem ini, akan diuraikan mengenai sistem yang sedang berjalan saat ini serta rancangan sistem yang diusulkan. Analisis sistem adalah suatu proses terstruktur yang digunakan untuk memahami secara menyeluruh sebuah sistem,  baik  itu  sistem  informasi,  proses  pembelajaran,  atau  sistem  pembelajaran.    Tujuan  dari  analisis  sistem  adalah untuk  mengidentifikasi  masalah.  Permasalahan  yang  dihadapi  di  SMP  Negeri  1  Rembang  adalah  kurangnya  interaksi antara guru dengan siswa dalam setiap pertemuan yang harus bertatap muka, sehingga menyebabkan banyak siswa yang kesulitan  dalam  memahami  sistem  pelajaran,  dan  mengusulkan  untuk  merancang  dan  mengembangkan  Aplikasi  E- learning berbasis mobile.

## 3.1.1 Analisis Sistem Berjalan
Sistem pembelajaran yang ada saat ini masih menggunakan cara  konvensional. Hal ini yang menyebabkan kurangnya interaksi  antara  guru dengan siswa  di  setiap  pertemuan  yang harus  saling  tatap muka,  sehingga  menyebabkan  banyak siswa yang mengalami kesulitan untuk memahami materi pelajaran, serta proses belajar  - mengajar yang dibatasi oleh waktu untuk setiap pertemuan antara guru dengan siswa. Jika dibuatkan sebuah sistem, guru bisa memberi tugas, quiz atau materi yang menarik untuk siswa dengan teknologi.

## 3.1.2 Analisis Sistem Yang Diusulkan
Sistem yang diusulkan berupa aplikasi berbasis mobile yang dapat di install oleh guru atau siswa. Penggunaan sistem ini sangat mudah, sebab guru atau siswa hanya perlu mengakses aplikasi, lalu memasukan NIK untuk guru dan NIS untuk siswa serta password, kemudian akan muncul beberapa menu untuk guru mengupload tugas, quiz atau materi, sedangkan untuk siswa itu sendiri akan muncul menu untuk melihat materi dan mengerjakan tugas atau quiz.

## 3.1.3 Analisis Fungsional
Analisis fungsional merupakan proses untuk memahami dan mendefinisikan fungsi-fungsi yang harus dijalankan oleh sistem yang sedang dianalisis. Tujuan dari analisis fungsional adalah untuk mengidentifikasi dan memahami persyaratan fungsional pada sistem.

## 3.1.4 Analisis Non Fungsional
Analisis nonfungsional melibatkan identifikasi, pemahaman, dan penilaian terhadap aspek-aspek nonfungsional dari suatu sistem.aspek nonfungsional mencakup atribut-atribut sistem yang tidak berkaitan langsung dengan fungsionalitas sistem, tetapi  mempengaruhi  kinerja,  keamanan,  skalabilitas,  dan  pengalaman  pengguna.  Berikut  merupakan  kebutuhan perangkat lunak dan perangkat keras dalam membangun aplikasi sebagai berikut:
a. Perangkat Lunak
Perangkat lunak yang digunakan dalam membangun Aplikasi E-learning Berbasis Mobile yang diterapkan pada SMPN  1  Rembang  terdiri  dari  beberapa  software,  diantaranya  seperti  Android  Studio  yang  berfungsi  sebagai  alat pembangunan  aplikasi  hingga  dapat  berjalan.  Kemudian  Visual  Studio  Code  sebagai  teks  editor  dalam  membangun website  untuk  admin.  Figma  sebagai  sarana  untuk  merancang  tampilan  antar  muka  pengguna  dan  memberikan pengalaman antar muka bagi pengguna. MySQL sebagai database juga digunakan untuk menyimpan data dari aplikasi yang dibangun serta mengelola data karena dengan menggunakan MySQL maka dapat dilakukan create, read, update, dan delete (CRUD) data.
b. Perangkat Keras
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Perangkat keras yang digunakan berupa 1 (satu) unit laptop dengan Merek ASUS dengan spesifikasi antara lain, Ukuran  Layar  14  inch  FHD  (1920x1080) IPS,  Prosesor  Intel  Core  i7,  Tipe  Graphics  NVIDIA  Geforce  MX350  2GB, Memori RAM 8GB dengan penyimpanan 512GB SSD.

## 3.2. Perancangan Sistem
Perancangan sistem digambarkan dalam diagram dan antarmuka sesuai dengan model pengembangan sistem yang dibuat. Berikut adalah perancangan dari aplikasi yang dibuat oleh penulis.

## 3.2.1. Arsitektur Model
Arsitektur  model  dijelaskan  sebagai  rancangan  desain  menyeluruh  dari  sebuah  sistem  aplikasi  beserta  infrastruktur pendukungnya  untuk  mendefinisikan  gambaran  utama  yang  digunakan  saat  berinteraksi  atau  digunakan.  Berikut rancangan  arsitektur  model  dari  penelitian  yang  dibuat.  Rancangan  arsitektur  model  dapat  dilihat  pada Gambar  2. dibawah ini.

## Gambar 3. Arsitektur Model
Pada Gambar 3. Arsitektur Model dapat  disimpulkan bahwa Aplikasi E-Learning dapat diakses oleh siswa dan guru. Siswa dan guru memiliki akun untuk masuk dan mengakses E-Learning. Guru dapat menyiapkan materi dan quiz bagi siswa, sehingga siswa dapat dengan mudah mengakses materi dan quiz sesuai pada kelasnya.

## 3.2.2 Flowmap
Flowmap  merupakan  kombinasi  dari  peta  dengan  flowchart  yang  menunjukkan  pergerakan  objek  dari  satu  daerah  ke daerah  lainnya.  Flowmap  membantu  programmer  mengklasifikasikan  masalah  menjadi  beberapa  bagian  yang  lebih sederhana  [22]. Dengan adanya flowmap, maka batasan masalah dari sistem berjalan dapat segera diketahui sehingga dapat memperkuat usulan sistem yang akan dibuat. Berikut dibawah ini adalah flowmap dari beberapa menu yang ada pada aplikasi E-Learning.
a. Usulan Login Siswa dan Login Guru
Pada flowmap usulan alur login siswa, admin menginput username dan password siswa kemudian siswa menerima username dan password tersebut untuk login ke e-learning yang dikonfirmasi oleh database jika username dan password sudah benar maka siswa bisa masuk ke e- learning. Flowmap terkait usulan login siswa dan usulan login guru dapat dilihat pada Gambar 4. dan Gambar 5. sebagai berikut.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Gambar 4. Flowmap Usulan Login Siswa
Flowmap  Login  Siswa  pada  Gambar  4.  dapat  digunakan  oleh  2  user,  yaitu  siswa  dan  admin.  Keduanya  dapat melakukan login kemudian lanjut mengakses aplikasi dengan melewati tools yang ada.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Pada Gambar 5 flowmap usulan login guru, admin menginput username dan password guru dan menyimpan di database kemudian guru menerima username dan password tersebut untuk login ke e-learning yang dikonfirmasi oleh database jika username dan password sudah benar maka guru bisa masuk ke menu e-learning.
b. Proses Mengikuti E-Learning
Pada  flowmap  usulan  mengikuti  e-learning,  guru  login  kemudian  masuk  ke  menu  e-learning  bisa  menambah, menghapus,  atau  mengedit  materi,  quiz,  tugas  atau  hasil  studi  dari  siswa  yang  kemudian  disimpan  didalam  database. Sedangkan  siswa  bisa  melihat  materi,  mengupload  tugas  atau  quiz,  dan  melihat  hasil  studi  yang  diberikan  oleh  guru. Flowmap yang menunjukkan proses E-Learning terdapat pada Gambar 6.
Gambar 6 . Flowmap Proses E-Learning
Pada  Gambar  6.  dapat  disimpulkan  bahwa  siswa  dan  guru  harus  melakukan  login  terlebih  dahulu  sebelum mengakses sistem. Keduanya akan memiliki username dan password. Guru dapat mengelola data berupa materi, quiz, tugas, repost, dan hasil studi dari siswa. Sedangkan siswa dapat mengikuti E-Learning sesuai dengan arahan dari guru.

## 3.2.3 Use Case Diagram
Use Case Diagram digunakan dalam penelitian ini sebagai alat untuk mendeskripsikan sebuah interaksi antara beberapa actor dalam sistem. Diagram digunakan untuk memodelkan sistem sesuai dengan keinginan pengguna. Use Case Diagram dalam penelitian ini menggunakan 2 aktor yaitu siswa dan guru sebagai admin. Berikut adalah diagram siswa yang dapat dilihat pada Gambar 7.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Gambar 7. Use Case Diagram Siswa
Pada Gambar 7. dijelaskan bahwa  melalui E-Learning, siswa dapat mengakses materi, mengerjakan quiz, serta membaca pengumuman.
Gambar 9. Use Case Diagram Guru
Pada Gambar 8. Dijelaskan bahwa guru dapat memasukkan materi pembelajaran, membuat quiz, serta melakukan report sebagai bahan perkembangan siswa di sekolah.

## 3.2.4 Entity Relationship Diagram
Entity Relationship Diagram (ERD) digunakan untuk menggambarkan struktur logika dan komponen basis data, termasuk entitas  (objek  atau  konsep  yang  memiliki  atribut),  hubungan  antara  entitas,  dan  atribut-atribut  yang  dimiliki  entitas. Berikut merupakan gambar dari Entity Relationship Diagram (ERD) yang dirancang dapat dilihat pada Gambar 9.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Gambar 9 . Entity Relationship Diagram
Entity Relationship Diagram pada Gambar 9. memiliki beberapa entity seperti siswa, admin, guru, nilai, jadwal, kelas, dan pelajaran. Entity tersebut saling berkesinambungan dan dihubungkan oleh relationship yang ada.

## 3.2.5 User Interface
User Interface dari aplikasi berupa wireframe dan dibuat menggunakan software whimsical dapat dilihat pada Gambar 10. dibawah ini.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Gambar 10. menjelaskan bahwa User Interface dibuat dengan sebaik mungkin guna untuk memaksimalkan user experience  dari  aplikasi.  Hal  itu  dikarenakan  apabila  user  interface  buruk  dan  dibuat  denga  nasal-asalan  maka  akan berpengaruh  terhadap  pengalaman  pengguna  dalam  menjelajahi  aplikasi,  sehingga  informasi  yang  disampaikan  tidak dapat diterima dengan baik oleh pengguna baik siswa maupun guru [22]. Berikut ini adalah hasil dari perancangan yang telah  dilakukan.  Dalam  gambar  terdapat  beberapa  halaman  dari  aplikasi  yang  diantaranya  seperti  Halaman  Login, Halaman Awal, Halaman Daftar Mata Pelajaran, Halaman Tugas, Halaman Daftar Quiz, Halaman Profile, dan Halaman Pengumuman.

## 3.2 Pembahasan Aplikasi
Bagian  ini  dilakukan  perincian  implementasi  dari  perancangan  aplikasi  yang  telah  dijelaskan  sebelumnya,  serta menguraikan hasil yang telah diperoleh.

## 3.3.1 Halaman Login dan Menu Utama
Tampilan login berupa Menu untuk mulai masuk ke aplikasi dengan memasukkan informasi akun yang berupa NIS dan password yang sudah terdaftar sebelumnya. Kemudian pengguna dapat langsung klik tombol login, maka dapat langsung masuk ke dalam aplikasi. Halaman login dan menu utama dapat dilihat pada Gambar 11. dibawah ini.
Gambar 11 . Halaman Login dan Menu Utama
Pada  Gambar  11.  ,menampilkan  menu  utama  terdapat  menu  mata  pelajaran,  daftar  mapel,  update  profil,  dan pengumuman. Dibagian atas terdapat nama siswa dan foto, sedangkan dibagian bawah ada tombol logout untuk kembali ke menu login.

## 3.3.2 Halaman Menu Mata Pelajaran dan Menu Tugas
Pada  tampilan  Menu  mata  pelajaran  terdapat  beberapa  Menu  yaitu  materi  berisi  materi yang  diberikan  oleh  guru  dan siswa bisa mendownload materi tersebut, tugas yang diupload oleh guru untuk dikerjakan siswa, quiz, dan report hasil studi berisi nilai hasil belajar siswa yang dibagikan oleh guru.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
Pada Gambar 12. tampilan Menu tugas, berisi beberapa tugas yang sudah di upload oleh guru untuk dikerjakan siswa. Guru bisa mengedit, menambah, atau menghapus tugas.

## 3.3.3 Halaman Menu Quiz dan Menu Update Profile
Pada menu quiz, berisi beberapa list quiz yang sudah di upload oleh guru untuk dikerjakan siswa. Guru bisa mengedit soal, menambah jumlah soal dalam quiz, dan menghapus quiz. Tampilan halaman menu quiz dan menu update profile dapat dilihat pada Gambar 13. dibawah ini.
Gambar 13. Halaman Menu Quiz dan Menu Update Profile
Tampilan Profile pada Gambar 13. dapat dilihat berupa menu untuk menampilkan data profil dari pengguna. Data yang ditampilkan berupa nama dan foto dari pengguna. Untuk mengubah data  profil, pengguna dapat secara langsung mengklik  edit  dan  setelah  dilakukan  perubahan  data  dapat  menyimpang  dengan  klik  update.  Jika  ingin  kembali  ke halaman awal makan pengguna hanya perlu  klik tombol back.

## 3.3.4 Halaman Menu Pengumuman
Halaman Menu Pengumuman menampilkan berita terbaru terkait proses pembelajaran pada SMPN 1 Rembang secara up to date . Tampilan halaman menu pengumuman dapat dilihat pada Gambar 14. di bawah ini.

## Gambar 14. Halaman Menu Pengumuman
Pada  Gambar  14.  menampilkan  menu  pengumuman,  terdapat  kalender  dan  kotak  informasi  sebagai  sarana informasi, siswa dapat melihat pengumuman dan kalender akademik yang berkaitan dengan kegiatan sekolah

## 3.4 Pengujian Aplikasi
Setiap  aplikasi  selalu  memerlukan  pengembangan.  Pengembangan  dari  aplikasi  harus  melewati  beberapa  tahapan diantaranya  tahap  pengujian.  Pengujian  dilakukan  dengan  tujuan  untuk  mencari  kesalahan  atau bug yang  ada.  Pada penelitian ini, metode pengujian yang digunakan adalah Black Box Testing . Tujuan dari pengujian ini diantaranya untuk
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
mencari fungsi yang salah ataupun hilang, mengetahui kesalahan user interface , kesalahan dalam database, serta untuk validasi fungsional. Pengujian ini menjadi salah satu yang sering digunakan karena  tidak perlu mengetahui apa isi dari program, penguji cukup melakukan pengujian bagian luarnya saja. Hasil pengujian black box testing dapat dilihat pada Tabel 1 dibawah ini.
Tabel 1. Pengujian Black Box No Item yang Diuji Hasil Kesimpulan 1. Login Menampilkan halaman login pada aplikasi Berhasil 2. Menu Utama Menampilkan halaman utama aplikasi Berhasil 3. Halaman Mata Pelajaran Menampilkan halaman dari menu mata pelajaran Berhasil 4. Halaman Menu Tugas Menampilkan halaman dari menu tugas Berhasil 5. Halaman Menu Quiz Menampilkan halaman menu quiz Berhasil 6. Halaman Update Profil Menampilkan halaman dari menu update profil Berhasil 7. Pengumuman Menampilkan halaman dari menu pengumuman Berhasil
Pada  Tabel  1  terkait  pengujian  black  box  diatas  dijelaskan  bahwa  banyak  item  pada  aplikasi  yang  dilakukan pengujian. Item yang diuji diantaranya seperti menu login, menu utama, halaman mata pelajaran, halaman menu tugas, halaman menu quiz, halaman update profil, dan halaman yang menampilkan pengumuman dari SMPN 1 Rembang secara up  to  date. Dari  pengujian  yang  dilakukan,  item  yang  diuji  menghasilkan  beberapa  output.  Output  yang  dihasilkan selanjutnya  ditampilkan  pada  bagian  kesimpulan.  Berdasarkan  kesimpulan  yang  ada  pada  tabel,  dapat  diperoleh  hasil bahwa  pembuatan  sistem  100%  Berhasil.  Sehingga  batasan-batasan  masalah  yang  menjadi  kendala  pada  SMPN  1 Rembang dapat teratasi.

## 4. KESIMPULAN
Berdasarkan  penelitian  yang  berjudul  “Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk Mengimplementasikan Menu Quiz dengan Metode User Centered Design” serta analisis dan pembahasan pada bab-bab sebelumnya,  maka  dapat  disimpulkan  bahwa  aplikasi  E-Learning  dibangun  sebagai  bentuk  pemanfaatan  teknologi informasi  dan  komunikasi  yang  diterapkan  sebagai  bentuk  pembelajaran  di  SMPN  1  Rembang,  Kecamatan  Losari, Kabupaten  Purbalingga.  Berdasarkan  penelitian  yang  telah  dilakukan,  aplikasi  E-Learning  dibuat  dengan  bahasa pemrograman PHP yang mudah dipejari dan menggunakan database MySQL sebagai pengelola datanya.  Metode User Centered Design (UCD) digunakan dengan memfokuskan pada kebutuhan pengguna. Aplikasi berfungsi untuk mengatasi beberapa masalah yang ada. Sistem pembelajaran terdahulu yang masih bersifat konvensional terkadang membuat proses belajar  mengajar  menjadi  tidak  efektif  dan  efisien.  Dengan  adanya  aplikasi  E-Learning  ini,  maka  guru  dapat  dengan mudah untuk menyampaikan bahan ajar dan tugas kepada siswa. Media pembelajaran juga dapat diterapkan kapanpun dan dimanapun. Sehingga siswa juga terbantu dalam memperoleh informasi, materi, dan tugas saat berhalangan hadir. Setelah melalui serangkaian pengujian menggunakan metode pengujian black box, dapat disimpulkan bahwa penelitian ini  menghasilkan  sebuah  aplikasi  E-Learning  berbasis  Mobile  yang  sudah  dapat  dijalankan  dengan  sangat  baik  serta memenuhi setiap tujuan dari dilakukannya penelitian ini. Hal ini dapat menjadi bukti bahwa aplikasi E-Learning untuk SMAN  1  Rembang  telah  berkinerja  dengan  baik  dan  kompatibel.  Dengan  adanya  teknologi  ini,  diharapkan  sistem Pendidikan di Indonesia dapat menjadi lebih maju sehingga generasi muda akan terus berkembang dan memiliki semangat belajar yang tinggi.

## REFERENCES
[1] I. Y. Sari, Muttaqin, Jamaludin, J. Simarmata, and M. A. Rahman, Keamanan Data dan Informasi, 1st ed. Yayasan Kita Menulis, 2020.
[2] V. A. Bramasta and A. Suhendar, “Aplikasi Mobile Augmented Reality Sebagai Media Pembelajaran Senjata Tradisional Jawa dengan Metode Pengembangan RAD,” KLIK : Kajian Ilmiah Informatika dan Komputer, vol. 4, no. 3, pp. 1424–1436, Dec. 2023.
[3] M. Stafanus and J. F. Andry, “Pengembangan Aplikasi E-Learning Berbasis Web Menggunakan Model Waterfall Pada SMK Strada 2 Jakarta,” Jurnal Fasilkom, vol. 10, no. 1, pp. 1–10, 2020.
[4] Styawati, F. Ariany, D. Alita, and E. R. Susanto, “Pembelajaran Tradisional Menuju Milenial : Pengembangan Aplikasi Berbasis Web  Sebagai  Penunjang  Pembelajaran  E-Learning  pada  Man  1  Pesawaran,”  Journal  Sosial  Science  and  Teknology  for Community Service, vol. 1, no. 2, pp. 10–16, 2020.
[5] T.  H.  Nurgiansah,  “Pemanfaatan  E-Learning  dalam  Pembelajaran  Pendidikan  Kewarganegaraan,”  Journal  of  Information Technology, vol. 2, no. 2, pp. 138–146, Aug. 2021.
[6] T. H. Nurgiansyah, “Build an Attitude of Nationalism Students at SDN 7 Kadipaten with the Method of Discussion in the Subject PPKN,” Jurnal Serunai Pancasila dan Kewarganegaraan, vol. 9, no. 1, pp. 1–11, Mar. 2020.
[7] M.  Japar,  D.  N.  Fadhilah,  and  S.  Syarifa,  “Pelatihan  Penggunaan  Google  Classroom  dan  Kahoot  Untuk  Meningkatkan Profesionalitas Guru Pendidikan Kewarganegaraan di Era Digital,” Jurnal Karya Abdi Masyarakat, vol. 4, no. 1, pp. 18–27, Jun. 2020.
[8] Y.  D.  Puspitarini  and  M.  Hanif,  “Using  Learning  ,edia  to  Increase  Learning  Motivation  in  ELementary  School,”  Anatolian Journal of Education, vol. 4, no. 2, pp. 53–60, Oct. 2019.
Aulia  Nugraheni,  Rancang  Bangun  Aplikasi  E-Learning  Berbasis  Mobile  Untuk  Mengimplementasikan  Menu  Quiz dengan  Metode User Centered Design
[9] Maryadi, M. Hadi, and S. Yustiani, “Pengembangan Aplikasi E-Learning Akuntansi Sektor Publik dengan Metode Prototyping,” Measurement : Jurnal Akuntansi, vol. 16, no. 2, pp. 136–150, Dec. 2022.
[10]  R. Handayani, Z. Rachmat, and W. S, “Perancangan Aplikasi E-Learning Berbasis Website Pada SMP Negeri 3 Watansoppeng,” Jumistik : Jurnal Manajemen Informatika, Sistem Informasi dan Teknologi Komputer, vol. 1, no. 1, pp. 43–54, Dec. 2022.
[11]  G. Sugiyanto, E. Rahajeng, and Z. Rachmat, “Manajemen Sistem Informasi,” Global Eksekutif Teknologi, 2022.
[12]  I.  Suprianto,  F.  Pradana,  and  F.  Bachtiar,  “Pengembangan  Aplikasi  E-Learning  Dengan  Menerapkan  Metode  Gamification,” Jurnal Pengembangan Teknologi Informasi dan Ilm Komputer, vol. 3, no. 2, pp. 1716–1724, Feb. 2019.
[13]  N.  Dahri,  D.  Mallisza,  and  P.  M.  Belsa,  “Perancangan  Sistem  Quiz  Multimedia  Interaktif  Berbasis  Web  Pada  Matakuliah Database,” Journal of Scientech Research and Development, vol. 5, no. 2, Dec. 2023.
[14]  M.  B.  Ismiati  and  L.  Hermawan,  “Online  Quiz  Application  for  Informatics  and  Information  System  Students  (Task  Portal Development),” Journal of Computer Science and Engineering (JCSE), vol. 1, no. 1, pp. 30–39, Feb. 2020.
[15]  R. Hermiati, Asnawati, and I. Kanedi, “Pembuatan E-Commerce Pada Raja Komputer Menggunakan Bahasa Pemrograman PHP dan Database MySQL,” Jurnal Media Infotama, vol. 17, no. 1, Feb. 2021.
[16]  B.  Rawat,  S.  Purnama,  and  Mulyati,  “MySQL  Database  Management  System  (DBMS)  On  FTP  Site  LAPAN  Bandung,” International Journal of Cyber and IT Service Management (IJCITSM), vol. 1, no. 2, pp. 173–179, Oct. 2021.
[17]  R.  F.  Ramadhan  and  R.  Mukhaiyar,  “Penggunaan  Database  MySQL  dengan  Interface  PHPMyAdmin  sebagai  Pengontrolan Smarthome Berbasis Raspberry Pi,” JTEIN : Jurnal Teknik Elektro Indonesia, vol. 1, no. 2, pp. 129–134, 2020.
[18]  D. P. Ayu and R. Amelia, “Pembelajaran Bahasa Indonesia Berbasis E-Learning di Era Digital,” in Prosiding Samasta : Seminar Nasional Bahasa dan Sastra Indonesia, Jakarta: Universitas Muhammadiyah Jakarta, Jun. 2020, pp. 56–61.
[19]  A. Anggito and J. Setiawan, Metodologi Penelitian Kualitatif. CV Jejak (Jejak Publisher), 2018.
[20]  D.  Assyakurrohim,  D.  Ikhram,  R.  A.  Sirodj,  and  M.  W.  Afgani,  “Metode  Studi  Kasus  dalam  Penelitian  Kualitatif,”  Jurnal Pendidikan Sains dan Komputer , vol. 3, no. 1, 2022.
[21]  C. Ravelino and Y. A. Susetyo, “Perancangan UI/UX untuk Aplikasi Bank Jago menggunakan Metode User Centered Design,” Jurnal JTIK (Jurnal Teknologi Informasi dan Komunikasi), vol. 7, no. 1, pp. 121–129, Jan. 2023.
[22]  S.  H.  Putri,  Y. Syahidin,  and  M.  Hidayati,  “Aplikasi  Radien untuk  Pengolahan  Data  Rekam  Medis  dengan Microsoft  Visual Studio 2010,” Jurnal Manajemen Sistem Informasi dan Teknologi, vol. 11, no. 2, p. 113, Dec. 2021.
[23]  Ladjamudin, Analisis dan Desain Sistem Informasi, 1st ed. Yogyakarta: Graha Ilmu, 2013.