History: Received  : 25 April 2023 Revised  : 10 Juni 2023 Accepted : 23 Jul8 2023 Published : 15 Agustus 2023
Publisher: LPPM Universitas Darma Agung
Licensed: This work is licensed under Attribution-NonCommercial-No Derivatives 4.0 International (CC BY-NC-ND 4.0)

## Jurnal Darma Agung
Volume: 31, Nomor: 4, (2023), Agustus: 617 - 630 https://dx.doi.org.10.46930/ojsuda.v31i4.3215

## PENGEMBANGAN FRONT-END APLIKASI PENDAFTARAN ENGLISH PROFICIENCY TEST WIDYATAMA BERBASIS WEB
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2)
Fakultas Teknik Universitas Widyatama, Bandung, Indonesia 1,2)
Corresponding Author : mualwanrifqi@gmail.com 1) , aripurnowahyuwibowo@gmail.com 2)

## Abstrak
Pada Lembaga Bahasa Widyatama memiliki sistem pendaftaran dan pendataan bagi para peserta dan admin English  Proficiency  Test (EPT)  dinilai  masih  kurang  efektif  karena  dalam  proses  pendaftaran maupun  pendataannya  masih  manual  serta  tidak  adanya  sistem  informasi  yang  memadai.  Karena alasan  tersebut  penulis  membuat  aplikasi  pendaftaran English  Proficiency  Test Widyatama  berbasis web ini  ditujukan  untuk  memudahkan  pihak  Lembaga  Bahasa  Widyatama  dalam  melakukan pendataan, pengelolaan dan pengolahan data peserta secara efisien serta memudahkan bagi  peserta untuk mendaftar English Proficiency Test . Metode penelitian yang di gunakan dalam pengembangan aplikasi pendaftaran English Proficiency Test ini menggunakan salah satu model yaitu waterfall . Dalam pengembangan  aplikasi  pendaftaran English  Proficiency  Test ini,  penulis  menggunakan  bahasa pemograman  HTML,  CSS,  JavaScript  serta framework Codeigniter  dan  Bootstrap.  Melalui  aplikasi berbasis web ini  diharapkan  bagi  para  peserta  dan  admin  dapat  dipermudah  kedepannya  dalam melakukan proses pendaftaran maupun pendataan.
Kata Kunci: Web, HTML, CSS, JavaScript, Codeigniter, Bootstrap, Waterfall

## Abstract
The  English  Proficiency  Test  (EPT)  admin  is  seen  as  inefficient  since  a  registration  and  data  collection procedure is still manual and there is no sufficient information system. The Widyatama Language Institute has a  registration  and  data  collection  system  for  participants.  As  a  result,  the  author  created  this  web-based Widyatama  English  Proficiency  Test  registration  application  to  assist  the  Widyatama  Language  Institute  in collecting data, managing and processing participant data efficiently, and making it easier for participants to register  for  the  English  Proficiency  Test.  The  research  method  used  in  the  development  of  the  English Proficiency  Test  registration  application  uses one of  the  models,  namely  waterfall.  In  the  development  of  this English  Proficiency  Test  registration  application,  the  author  used  HTML,  CSS,  JavaScript  programming languages as well as the Codeigniter and Bootstrap frameworks. Through this web-based application, it is hoped that participants and admins can be facilitated in the future in carrying out the registration and data collection process.
Keywords: Web, HTML, CSS, JavaScript, Codeigniter, Bootstrap, Waterfall

## PENDAHULUAN
Perkembangan teknologi saat ini mengalami kemajuan yang begitu pesat. Seperti banyaknya  aplikasi  yang  sudah  ada  saat  ini,  dimana  semua  aspek  membutuhkan aplikasi  untuk  membantu  memudahkan  kinerja  dalam  menyelesaikan  tugas-tugas. Program  yang  diperlukan  tidak  hanya  program desktop  saja ,  tetapi  juga  program yang  berbasis web (Padeli  et  al.,  2020) . Dengan  akses  mudah  ke  Internet,  pengaruh program web bisa  sangat  berguna  untuk  menyelesaikan  tugas-tugas  yang sebelumnya  dilakukan  secara  manual.  Apalagi  perkembangan  teknologi
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
mempengaruhi  hampir  setiap  bidang  kehidupan,  salah  satunya  adalah  dunia pendidikan melalui internet. Dalam dunia pendidikan, media pembelajaran berbasis online hampir ada  dimana-mana, termasuk ujian. Ujian dilakukan secara online dan offline . Jika ujian akan diselenggarakan, peserta harus terdaftar sebelum ujian.
Universitas  Widyatamaa  adalah  Universitas  swasta  di  Indonesia  yang menawarkan  gelar  di  bidang  ekonomi,  teknik,  bahasa,  desain,  dan  gelar  magister manajemen.  Ada  beberapa  jenis  layanan  di  lingkungan  Universitas  Widyatama, diantaranya  adalah  Lembaga  Bahasa  Widyatama.  Lembaga  Bahasa  Widyatama adalah  lembaga  yang  ada  di  Universitas  Widyatama  yang  menaungi  dua  jurusan yaitu  Bahasa  Inggris  dan  Bahasa  Jepang.  Lembaga  Bahasa  Widyatama  ini memfasilitasi mahasiswa untuk memenuhi persyaratan kelulusannya. Fasilitas yang disediakan yaitu seperti English proficiency test. English Proficiency Test ini dirancang untuk  mengukur  semua  aspek  kecakapan  bahasa  Inggris,  terutama  untuk  tujuan akademis.  Selain  itu, English  Proficiency  Test menjadi  salah  satu  persyaratan  bagi mahasiswa untuk mengambil ijazah kelulusan. English Proficiency Test dilaksanakan secara online (berbasis web ) dan offline (berbasis kertas).
English  Proficiency  Test biasanya  dilakukan  secara offline .  Artinya,  ujian dilaksanakan  langsung  di  kampus  Widyatama.  Saat  pandemi  melanda  pihak  dari Lembaga  Bahasa  mengubah  yang  tadinya  tes offline menjadi  tes online .  Sejak pandemi  mereda,  Lembaga  Bahasa  Widyatama  menyelenggarakan English Proficiency  Test secara offline dan online .  Sistem  pendaftaran  tes  yang  dioperasikan oleh  Lembaga  Bahasa  Widyatam  masih  manual  dan  menggunakan platform yang sudah ada seperti Microsoft Excel.
Karena permasalahan tersebut penulis mendapat topik yang bertemakan tentang pengembangan aplikasi pendaftaran untuk mengikuti English Proficiency Test secara online dan offline berbasis web .  Pengembangan  aplikasi  ini  ditujukan  untuk membantu  peserta  maupun  admin  dalam  melakukan  pendaftaran  dan  pendataan secara  efisien.  Aplikasi  pendaftaran  berbasis web ini  mempunyai  fitur  yang bermanfaat  bagi  peserta English  Proficiency  Test maupun  admin  Lembaga  Bahasa Widyatama.  Aplikasi  ini  akan  membantu  peserta  untuk  mendapatkan  informasi tentang petunjuk pendaftaran dan formulir untuk mendaftar English Proficiency Test dengan  mudah.  Dan  aplikasi  ini  membantu  admin  mengolah  data  peserta  lebih efisien  dan  efektif  dibanding  manual,  dan  dapat  memfilter  data  sesuai  dengan kebutuhkan Lembaga Bahasa maupun Universitas Widyatama.
Melalui aplikasi berbasis web ini diharapkan bagi para peserta dapat dipermudah kedepannya dalam melakukan proses pendaftaran. Selain itu juga, diharapkan bagi admin  saat  proses  mengolah  data  dapat  dipermudah  dengan  sistem  yang terintergrasi langsung ke database .

## A. Pengembangan Aplikasi
Pengembangan  aplikasi  yaitu  rangkaian  proses  yang  dilaksanakan  oleh  seorang atau sekelompok programmer yang menciptakan urutan proses dari desain aplikasi
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
awal,  pembuatan prototype aplikasi,  penyebaran,  pengujian  akhir  aplikasi,  hingga penyelesaian dan kesiapan aplikasi (Sari, 2020).
Selama  pengembangan  aplikasi,  beberapa  fase  dirancang  sesuai  dengan kebutuhan  sehingga  dapat  membangun  aplikasi  dengan  cara  yang  telah  dirancang dan  terstruktur  dengan  baik.  Fase-fase  ini  adalah  pengumpulan  data,  desain, pengembangan  dan  pemeliharaan.  Langkah  ini  adalah  langkah  penting  bagi programmer untuk membuat aplikasinya. Bahkan, terdapat macam-macam  metode pengembangan  aplikasi  yang  biasa  diterapkan  oleh  programmer  seperti  metode waterfall , spiral , extreme  programming ,  kanban,  pengembangan agile , prototype ,  dan scrum .  Pada  penelitian  ini,  penulis  mendeskripsikan  metode  yang  diterapkan  yaitu waterfall .

## B. Front-End
Front-end adalah  segala  sesuatu  yang  menyambungkan  pengguna  ke back-end . Pada user  interface ,    pengguna  biasanya  dapat  berinteraksi  dengan  sistem. Pengembang front-end fokus pada pembuatan user interface dan desain grafis.

## C. Hypertext Markup Language
Hypertext Markup Language yaitu bahasa script yang bersifat client-side yang dapat menampilkan  data  dalam  jenis  teks,  grafik  dan  multimedia  serta    untuk menyambungkan antar halaman web ( hyperlink ).
Hypertext Markup Language memiliki arti, antara lain :
• Hypertext yaitu text yang  ketika  ditekan,  mengalihkan  dari  satu  halaman  ke halaman lainnya .
• Markup yaitu  tag  (sejenis  code)  yang  mendefinisikan  tata  letak  dan  desain visual yang  dilihat di web , termasuk jenis font , warna teks, gambar, dan banyak lagi.
• Language  adalah  pointer  bahwa  HTML  merupakan  sejenis scripting pemrograman.

## D. Cascading Style Sheets
Cascading  Style  Sheet merupakan  bahasa stylesheet yang  diterapkan  untuk mengubah desain pada web , maupun tata letaknya, jenis fontnya, warna, dan segala sesuatu  yang  berkaitan  dengan  desain.  Pada  umumnya, Cascading  Style  Sheet digunakan untuk memformat halaman web yang ditulis menggunakan HTML atau XHTML.

## E. Javascript
Javascript adalah bahasa  dalam bentuk satu set script yang tujuannya dijalankan pada  file  HTML,  pada  sejarah  Internet  itu  merupakan  bahasa script pertama  untuk web.  Javascript  merupakan  bahasa  pemrograman  yang  dapat  menambahan  bahasa HTML  dengan  memungkinkan  sintaks  dijalankan  di  sisi  pengguna,  yaitu  di  sisi peramban dan bukan di sisi halaman web.
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
Javascript  berbasis browser (navigasi)  memanggil  halaman web yang  berisi  kode Javascript,  dan  kode  ini  tentu  saja  tersembunyi  dalam  file  HTML.  Javascript  juga tidak  membutuhkan  kompiler  khusus  untuk  menjalankannya.  Javascript  berbeda dari  bahasa  "Java"  (di  mana  JavaScript  selalu  dibandingkan)  yang  membutuhkan kompiler khusus untuk menerjemahkannya di sisi pengguna.

## F. Bootstrap
Bootstrap  merupakan framework siap  pakai  untuk  membuat interface  user  pada suatu web .  Bootstrap  dibuat  untuk  menyederhanakan  proses  desain web untuk berbagai tingkat pengguna, mulai dari pemula hingga yang berpengalaman.
Paket  Bootstrap  berisikan  sekumpulan  file  yang  terdiri  dari  CSS,  font,  dan JavaScript  yang  kemudian  siap  diintegrasikan  ke  dalam  suatu  dokumen  HTML. Hasil dari dokumen HTML tersebut secara dinamis akan ditampilkan dalam layout yang disesuaikan dengan ukuran layar pengguna.

## G. Codeigniter
Codeigniter  yaitu framework PHP.  Framework  ini  merupakan  suatu  kerangka yang  berisikan  sekumpulan  folder  yang  didalamnya  terdapat  data-data  php  yang berisikan class libraries, helpers, plugins dan masih banyak lagi.

## H. Metode Waterfall
Metode waterfall adalah  model  SDLC  yang  paling  banyak  digunakan  pada pengembangan  aplikasi.  Model waterfall menggunakan  pendekatan  sistematis  dan berurutan.  Langkah-langkah  model waterfall meliputi  persyaratan,  desain, implementasi,  verifikasi,  dan  pemeliharaan.  Keuntungan  menggunakan  metode waterfall dalam pengembangan aplikasi adalah kualitas yang diperoleh dari metode ini akan lebih baik karena urutannya dilakukan secara bertahap.

## METODE PENELITIAN
Metode  yang  digunakan  pada  penelitian  ini  bersifat  deskriptif.  Informasi  yang didapatkan  akan  dijelaskan  secara  kualitatif.  Penelitian  yang  bersifat  deskriptif bertujuan  untuk  memberikan  gambaran  yang  sistematis,  berbasis  fakta  dan  akurat tentang  apa  yang  terjadi  di  wilayah  tertentu  dan  sifat  populasinya.  Data  kualitatif yang  didapatkan  akan  memberikan  hasil  atas  penelitian  yang  telah  dilakukan. Penelitian  ini  dilakukan  dengan  menggunakan  metode waterfall sebagai  metode pengembangan aplikasi .

## HASIL dan PEMBAHASAN
A. Perancangan Sistem
Pemodelan  desain front  end program  menggunakan  UML  ( Unified  Modeling Language ).  UML  yaitu  salah  satu  bahasa  standar  yang  sering  digunakan  dalam industri  untuk  mendeskripsikan  persyaratan,  melakukan  analisis  dan  desain,  dan
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
menggambarkan  arsitektur  dalam  pemrograman  berorientasi  objek.  UML  terdiri dari flowchart , use case diagram dan activity diagram.
a. Flowchart
Flowchart mewakili  aliran  proses  menggunakan  anotasi  bidang  geometris seperti  lingkaran,  persegi  panjang,  kotak,  elips,  dll.  untuk  menunjukkan langkah-langkah aktivitas dan urutannya dengan menghubungkannya dengan panah [11]. Berikut adalah flowchart dari Aplikasi Pendaftaran EPT Widyatama berbasis web di Lembaga Bahasa Widyatama:
Gambar 1. Flowchart User dan Admin Aplikasi Pendaftaran EPT Widyatama
b. Use Case
Use  case adalah  teknik  analisis  yang  sering  diterapkan  pada  pengembangan aplikasi  menggunakan  metode  terstruktur. Use  case didalamnya  tedapat  satu atau  lebih  skenario  yang  menjelaskan  bagaimana  cara  sistem  berhubungan dengan aktor atau sistem yang lain untuk meraih suatu tujuan. Berikut adalah use  case dari  Aplikasi  Pendaftaran  EPT  Widyatama  berbasis web di  Lembaga Bahasa Widyatama:
Gambar 2. Use Case Aplikasi Pendaftaran EPT Widyatama
Tabel 1. Skenario Use Case Login Admin

## Identifikasi
Nama Login Admin Tujuan Memberi akses admin untuk melakukan  input,  edit,  hapus  dan menyimpan  data  peserta,  tanggal dan score . Worker Staff Lembaga Bahasa Widyatama Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi Pendaftaran EPT sebagai admin
2. Memasukan username dan password
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
3. Verifikasi username dan password
4. Masuk ke dashboard
Tabel 2.  Skenario Use Case Memilih Tanggal Registrasi Identifikasi Nama Memilih Tanggal Registrasi Tujuan Memilih  tanggal  registrasi  untuk melakukan tes EPT Worker Peserta EPT Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi Pendaftaran EPT sebagai
user
2. Menampilkan dashboard

## 3. Memilih tanggal registrasi yang diinginkan
4. Melanjutkan ke form registrasi
Tabel 3. Skenario Use Case Melakukan Registrasi

## Identifikasi
Nama Melakukan Registrasi Tujuan Melakukan  registrasi agar  terdaftar  sebagi peserta EPT Worker Peserta EPT Skenario Aksi Aktor Tanggapan sistem 1. Mengisi form registrasi 2. Klik syarat dan ketentuan 3. Menampilkan syarat dan  ketentuan  yang berlaku 4. Klik setuju & daftar 5.  Menyimpan  data peserta EPT
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
6.  Mengirim feedback berupa email
Tabel 4. Skenario Use Case Menambahkan Tanggal Registrasi Identifikasi Nama Menambahkan Tanggal Registrasi Tujuan Menambahkan  tanggal registrasi untuk peserta tes EPT Worker Staff  Lembaga  Bahasa Widyatama Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi pendaftaran EPT sebagai admin
2. Input tanggal registrasi
3.  Menyimpan  data tanggal  registrasi  ke database 4. Data tanggal registrasi berhasil ditambahkan Tabel 5. Skenario Use Case Menambahkan Score Identifikasi Nama Menambahkan Score Tujuan Menambahkan score agar peserta bisa melihat score EPT-nya Worker Staff  Lembaga  Bahasa Widyatama Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi pendaftaran EPT sebagai admin
2. Import data score berupa file excel
3.  Menyimpan  data score ke database
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
4.  Data score berhasil ditambahkan
Tabel 6. Skenario Use Case Mencari Score Identifikasi Nama Mencari Score Tujuan Mencari score yang didapatkan  dari  hasil tes EPT Worker Peserta EPT Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi Pendaftaran EPT sebagai user 2. Menampilkan dashboard

## 3. Memasukkan NPM/Nama
4.  Menampilkan score peserta
Tabel 7. Skenario Use Case Mengelola Data Peserta Identifikasi Nama Mengelola Data Peserta Tujuan Mengelola  data  seperti menghapus, mengubah data peserta Worker Staff  Lembaga  Bahasa Widyatama Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi pendaftaran EPT sebagai admin 2. Menghapus / mengedit data peserta 3.  Menghapus  data peserta  /  menyimpan data peserta yang telah diedit ke database 4. Data peserta
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
berhasil  dihapus  /
diedit
Tabel 8. Skenario Use Case Membuat Laporan Data Identifikasi Nama Membuat Laporan Data Tujuan Mencetak semua data Worker Staff  Lembaga  Bahasa Widyatama Skenario Aksi Aktor Tanggapan sistem 1. Mengakses web aplikasi Pendaftaran EPT sebagai admin
2. Pilih menu laporan
3. Pilih laporan yang ingin dicetak
4. Klik tombol sesuai format diinginkan
5. Mencetak laporan
Tabel 9. Skenario Use Case Backup & Restore Database Identifikasi Nama Backup & Restore Database Tujuan Mem Backup &  me Restore database untuk mengantisipasi masalah pada server / database Worker Staff Lembaga Bahasa Widyatama Skenario Utama Aksi Aktor Tanggapan 1. Mengakses web aplikasi pendaftaran EPT sebagai
admin
2. Memilih menu backup & restore database
3.  Klik  tombol backup /  masukkan  file  sql  lalu  klik tombol restore
4.  File  sql  telah  terdownload  / database telah di Restore
c. Activity Diagram
Activity Diagram  merupakan  teknik  yang  digunakan  untuk  menggambarkan logika  prosedural,  proses  bisnis,  dan  alur  kerja  pada  banyak  kasus. Activity
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
diagram  bertindak  selayaknya flowchart .  Perbedaan  dengan flowchart yaitu bahwa activity diagram  dapat  mendukung  tindakan  paralel,  sedangkan flowchart tidak  bisa.  Berikut  adalah activity diagram  dari  Aplikasi  Pendaftaran EPT Widyatama berbasis web Di Lembaga Bahasa Widyatama:
Gambar 3. Activity Diagram Registrasi
Gambar 4. Activity Diagram Menambah Tanggal Registrasi
Gambar 5. Activity Diagram Mencari Score
Gambar 6. Activity Diagram Menambahkan Score
Gambar 7. Activity Diagram Mengubah Data
Gambar 8. Activity Diagram Backup & Restore
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
Gambar 9. Activity Diagram Laporan Data

## B. Hasil Perancangan
Pengimplementasian  dilakukan  berdasarkan  hasil  perancangan  sistem  serta skema waterfall .  Pengimplementasian  memerlukan  beberapa  alat  pengembangan aplikasi antara lain Visual Studio Code, Codeigniter framework , dan XAMPP dengan kebutuhan  yang  telah  dirumuskan  untuk  menunjang  keberhasilan  pengembangan aplikasi ini.
Berikut  hasil  pengimplementasi  perancagan front-end pada  Aplikasi  Pendaftaran EPT Widyatama berbasis website yaitu sebagai berikut:
a. Login Admin

## Gambar 10. Hasil
Form Login
Pada  Gambar  10  memperlihatkan  hasil form  login yang  menampilkan  kolom username , password dan button sign in serta background dan logo perusahaan.
b. Dasboard Admin
Gambar 11. Hasil Dashboard Admin
Pada  Gambar  11  memperlihatkan  hasil dashboard admin  yang  menampilkan navbar  yang  berisi  data  pendaftar,  data  tanggal,  data  peserta,  score  EPT, laporan, backup & restore serta background , judul dan jumlah data.
c. Data Pendaftar
Gambar 12. Hasil Data Pendaftar
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
Pada  Gambar  12  memperlihatkan  hasil  data  pendaftar  yang  menampilkan tabel  data  pendaftar  yang  berisi  no,  tanggal  tes,  tipe test ,  waktu, venue ,  nama lengkap,  status,  NPM/NIK,  email,  no  hp,  fakultas,  prodi  serta  terdapat  juga button delete .
d. Data Tanggal
Gambar 13. Hasil Data Tanggal
Pada  Gambar  13  memperlihatkan  hasil  data  tanggal  yang  menampilkan  tabel data tanggal yang berisi no, tanggal tes, status, waktu, venue , kuota, sisa kuota, aktifkan  tanggal test serta  terdapat  juga button tambah  tanggal  tes, edit dan delete .
e. Laporan
Gambar 14. Hasil Data Laporan
Pada  Gambar  14  memperlihatkan  hasil  data  laporan  yang  menampilkan seluruh  tabel  data  peserta  yang  sudah  bisa  langsung  dicetak  dengan  format yang tersedia.
f. Landing Page
Gambar 15. Hasil Landing Page
Pada  Gambar  15  memperlihatkan  hasil landing  page yang  menampilkan informasi  seputar  Lembaga  Bahasa  Widyatama  sekaligus  menjembatani peserta untuk mendaftar dan mencari score EPT.
g. Jadwal Register
Gambar 16. Hasil Jadwal Register
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
Pada  Gambar  16  memperlihatkan  hasil  jadwal register yang  menampilkan jadwal registrasi yang tersedia serta terdapat button detail yang berfungsi untuk menampilkan data peserta yang terdaftar pada tanggal yang dipilih.
h. Form Register
Gambar 17. Hasil Form Register
Pada  Gambar  17  memperlihatkan  hasil form  register yang  menampilkan form untuk mendaftar tes serta pada form register dibatasi waktu untuk mengisi.
i. Cek Score
Gambar 18. Hasil Cek Score
Pada Gambar 18 memperlihatkan hasil cek score yang menampilkan data score peserta  yang  telah  mengikuti  EPT  sesuai  keyword  yang  dimasukkan  berupa NPM / nama.

## SIMPULAN
Dari  hasil  penelitian  mengenai  pengembangan front-end Aplikasi  Pendaftaran English Proficiency Test Widyatama menghasilkan aplikasi Pendaftaran EPT berbasis web dengan fitur dan juga menu yang akan membantu admin dalam mengelola data peserta EPT, score peserta EPT dan menambahkan jadwal EPT. Untuk sisi user yaitu dapat  memudahkan  dalam  mendapatkan  informasi  terkait  EPT,  melakukan pendaftaran  dan  yang  terakhir  dapat  melihat  hasil score EPT  dengan  mudah.

## DAFTAR PUSTAKA
Alamsyah, A. (2003). Pengantar javascript. Kuliah Umum IlmuKomputer. Com, 40. Arhandi,  P.  P.  (2016).  Pengembangan  Sistem  Informasi  Perijinan  Tenaga  Kesehatan dengan  Menggunakan  Metode  Back  End  dan  Front  End.  Jurnal  Teknologi Informasi: Teori, Konsep, Dan Implementasi, 7(1).
Artina,  N.  (2006).  Penerapan  Analisis  Kebutuhan  Metode  Use  Case  pada  Metode Pengembangan Terstruktur. @ lgoritma, 2(3), 1-6.
Enterprise, J. (2015). HTML 5 Manual Book. Elex Media Komputindo.
Hasugian,  H.,  &  Shidiq,  A.  N.  (2012).  Rancang  bangun  sistem  informasi  industri kreatif bidang penyewaan sarana olahraga. Semantik, 2(1).
Lt, G. U., Umum, K. P., Rakyat, P., Daud, I. N., ST, A. M., Ikhsan, F., ... & Sampul, D. Buku  Pedoman  Teknis  Pengelolaan  Aplikasi  Dan  Dashboard  Perhitungan Demand MPK Dan Nilai Capaian TKDN Berbasis Web Melalui SIMPK.
Padeli,  P.,  Ramadhan,  G.  K.  H.,  &  Aprilyani,  U.  T.  (2020).  Perancangan  Sistem
Rifqi Mualwan 1) , Ari Purno Wahyu Wibowo 2) , Pengembangan Front-End Aplikasi Pendaftaran English Proficiency Test...
Informasi Penilaian Siswa Berbasis Web Pada  SMK Al-Husna Kota Tangerang. Technomedia Journal , 4 (2 Februari), 155 – 169.
Putra,  D.  W.  T.,  &  Andriani,  R.  (2019).  Unified  modelling  language  (uml)  dalam perancangan  sistem  informasi  permohonan  pembayaran  restitusi  sppd.  Jurnal Teknoif Teknik Informatika Institut Teknologi Padang, 7(1), 32-39.
Ridlo,  I.  A.  (2017).  Panduan  pembuatan  flowchart.  Fakultas  Kesehatan  Masyarakat,
11(1), 1-27.
Rozi, Z. A. (2015). Bootstrap design framework. Elex Media Komputindo. Sari,  A.  D.  (2020). Perancangan  Prototype  Aplikasi  Deaf  Care  untuk  Menunjang Aksesibilitas  Pendamping  dalam  Memenuhi  Kebutuhan  Anak  Tuna  Rungu Menggunakan Metode User Centered Design .
Sofwan,  A.  (2003).  Belajar  PHP  dengan  Framework  Code  Igniter.  Dipetik  Oktober, 13, 2014.
Sovia,  R.,  &  Febio,  J.  (2017).  Membangun  Aplikasi  E-Library  Menggunakan  Html, Php Script, Dan Mysql Database. Jurnal Processor, 6(2).
Suryana, T. (2021). Bab 8. Mengenal Cascading Style Sheet.
Wahid,  A.  A.  (2020).  Analisis  Metode  Waterfall  Untuk  Pengembangan  Sistem Informasi. J. Ilmu-ilmu Inform. dan Manaj. STMIK, no. November, 1-5.