View of PENGEMBANGAN FRONT-END APLIKASI PENDAFTARAN ENGLISH PROFICIENCY TEST WIDYATAMA BERBASIS WEB

(1)

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)

https://dx.doi.org.10.46930/ojsuda.v31i4.3215 E-ISSN:2654-3915

PENGEMBANGAN FRONT-END APLIKASI PENDAFTARAN ENGLISH PROFICIENCY TEST WIDYATAMA BERBASIS WEB

Rifqi Mualwan ¹⁾, Ari Purno Wahyu Wibowo ²⁾

Fakultas Teknik Universitas Widyatama, Bandung, Indonesia ^1,2)

Corresponding Author : [email protected] ¹⁾, [email protected] ²⁾

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

(2)

618 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

(3)

619 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.

(4)

620 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

(5)

621 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

(6)

622 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

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

Skenario

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

(7)

623 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

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

1. Mengakses web aplikasi pendaftaran EPT sebagai admin 2. Import data score berupa file excel

3. Menyimpan data score ke database

(8)

624 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

Skenario

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

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

(9)

625 berhasil dihapus / diedit

Tabel 8. Skenario Use Case Membuat Laporan Data Identifikasi

Nama Membuat Laporan Data

Tujuan Mencetak semua data

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 MemBackup & meRestore 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

(10)

626 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

(11)

627 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

(12)

628 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

(13)

629 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

(14)

630 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.