Vol. 12 No. 2, pISSN: 2303-0577 eISSN: 2830-7062              http://dx.doi.org/10.23960/jitet.v12i2.4173

## RANCANG  BANGUN  FRONTEND  WEBSITE  UNTUK PEMUNGUTAN  SUARA  DENGAN  MENGGUNAKAN REACT.JS
Muhammad  Bintang  Pramadipta 1 ,  Muhammad  Nauval  Saiholau 2 ,  Wahyu  Eko Sulistiono 3 , Deny Budiyanto 4
1, 2, 3, 4 Jurusan Teknik Elektro Universitas Lampung, Bandar Lampung
Riwayat artikel:
Received: 27 Februari  2024 Accepted: 30 Maret 2024 Published: 2 April  2024

## Keywords:
Online Voting,  Online Voting System, Iterative Development Model, React.Js. Corespondent Email:
pramadiptabintang26@gmail. com
Abstrak. Pemungutan  suara  secara  tradisional  memiliki  kelemahan,  seperti risiko  kesalahan,  biaya  tinggi,  dan  waktu  lama.  Oleh  karena  itu,  diperlukan sistem pemungutan suara online yang lebih modern dan efisien. Penelitian ini bertujuan untuk merancang dan membangun frontend situs web pemungutan suara  bernama  Pilihgeh  yang  aman,  valid,  dan  fleksibel.  Metode  penelitian yang  digunakan  adalah  metode Iterative Development Model .  Tahapan penelitian  meliputi  analisis,  desain  sistem, coding , testing ,  dan deployment . Situs  web  ini  memiliki  fitur-fitur  seperti  fitur  autentikasi,  fitur menyelenggarakan  dan  melaksanakan  pemungutan  suara,  fitur  mengelola pemungutan  suara  sebagai  admin,  fitur  mengelola  profil,  dan  fitur  enkripsi.
Kesimpulan yang didapatkan adalah rancang bangun berhasil mengembangkan frontend situs  web  pemungutan  suara  yang  bernama PilihGeh  yang  telah  diuji  dengan  menggunakan  76  skenario  dan  metode pengujian UEQ dengan mendapatkan hasil baik ( good ).
Abstract. Traditional voting systems have several drawbacks, such as the risk of errors, high costs, and long time. Therefore, a more modern and efficient online voting system is needed. This study aimed to design and build a secure, valid, and flexible frontend web application for voting named Pilihgeh. The research  method  used  was  the  Iterative  Development  Model.  The  research stages included analysis, system design, coding, testing, and deployment. The system  has  features  such  as  authentication,  voting  management,  admin management, profile management, and encryption. The system was tested with 76 scenarios and UEQ testing method, and obtained a good result. The system was deployed using Vercel service.

## 1. PENDAHULUAN
Pada  saat  ini,  pemungutan  suara  adalah suatu  kegiatan  yang  berperan  penting  dalam pengambilan keputusan untuk sesuatu hal yang demokratis  di  dalam  suatu  organisasi  maupun instansi.  Hingga  saat  ini  khususnya  di Indonesia,  masih  banyak  yang  melakukan kegiatan  pemungutan  suara  dengan  cara tradisional.  Cara  tradisional  adalah  cara  yang menggunakan metode manual seperti menggunakan  kertas  suara,  kotak  suara,  dan
melakukan penghitungan secara manual. Cara- cara tersebut memiliki kelemahan di antaranya terdapat risiko kesalahan dalam hal perhitungan suara,  memerlukan  tenaga  yang  banyak, menggunakan  biaya  yang  tinggi,  waktu  yang cukup lama untuk menghitung suara jika dalam skala  besar,  dan  sangat  tidak  efisien. Berdasarkan  permasalahan  di  atas,  diperlukan pembuatan sistem pemungutan suara yang lebih modern  dan  efisien  dengan  memanfaatkan teknologi saat ini.
Salah satu bentuk
penyelesaian permasalahan  yang  dapat  digunakan  saat  ini adalah  melakukan  pemungutan  suara  secara Online dengan menggunakan media situs web.
Keuntungan  dalam  menggunakan  pemungutan suara secara online adalah menggunakan biaya yang lebih rendah, dapat melakukan perhitungan suara dengan cepat, dan mengurangi  risiko  terjadinya  kesalahan  dalam menghitung  suara.  Pemungutan  suara  secara online juga  memudahkan  bagi  pemilih  untuk menggunakan  hak  pilihnya  tanpa  harus menghadiri  tempat  pemungutan  suara  secara onsite jika berhalangan.
Sebelumnya,  terdapat  beberapa  penelitian yang  dilakukan  untuk  membangun  berbagai sistem pemungutan suara secara online . Sistem ini  memiliki  fitur-fitur  untuk  pengguna  User yaitu login , logout , melihat profil kandidat, dan memilih  kandidat.  Kemudian  fitur-fitur  untuk pengguna  Admin  yang  banyak  terdapat  pada situs  web  tersebut  di  antaranya  fitur login , logout , mengubah profil kandidat, menambahkan  data  pemilih,  dan  melihat  hasil perhitungan  suara  yang  telah  dipungut  [1]  [2] [3]  [4].  Pada  situs  web  tersebut  juga  terdapat fitur-fitur  tersendiri  yang  membedakan  antara situs web satu dengan lainnya. Pada penelitian [1]  [4],  terdapat  fitur real  count yang  tidak hanya  dapat  dilihat  pada  pengguna  admin, tetapi juga dapat dilihat dengan pengguna User. Kemudian, fitur lainnya seperti pada penelitian [2]  [3],  terdapat  fitur  untuk  pengguna  admin yang  dapat  melihat  jumlah  calon  pemilih, jumlah  siswa  yang  sudah  memilih  dan  belum memilih.  Fitur  tersebut  dapat  mempermudah pengawasan dari pihak admin kepada pemilihnya. Namun, pada penelitian [1] [2] [3] [4],  terdapat  kelemahan-kelemahan  seperti tidak  mengedepankan  pengamanan  data,  situs web  tidak  menggunakan  desain responsive website dan  hanya  berfokus  pada  pengguna desktop/laptop.  Dan  juga  situs  web  kurang fleksibel dikarenakan situs web terlalu berfokus pada penggunaan di suatu organisasi.
Oleh  karena  itu,  untuk  menyelesaikan permasalahan di atas, diperlukan situs web yang dapat menjalankan fitur-fitur untuk melakukan pemungutan  suara  secara online ,  tetapi  juga berfokus  pada  keamanan  data  pemilih,  suara yang  valid,  menjamin  pemilih  mendapatkan haknya, situs web dapat digunakan oleh banyak organisasi dengan nyaman, dan situs web dapat
digunakan  pada  masyarakat  luas  dengan menjangkau device yang  berbeda-beda  untuk meningkatkan kenyamanan pengguna. Pilihgeh merupakan  situs  web  pemungutan  suara  yang dapat mengatasi permasalahan tersebut.

## 2. TINJAUAN PUSTAKA
2.1. Iterative Development Model Iterative Development Model menyelesaikan  permasalahan  yang  terdapat pada Waterfall Model .  Yang  di  mana  adanya tuntutan  untuk  pembuatan  metode  baru  untuk pembuatan  sistem  yang  dapat  menyediakan hasil  yang  lebih  cepat,  tidak  memerlukannya banyak informasi detail pada awal developing , dan menyediakan fleksibilitas. Iterative development model adalah  model  yang membagikan  suatu project menjadi  bagian kecil.  Dengan  pembagian  tersebut  dapat memudahkan  tim  untuk  dapat  menunjukkan hasil lebih cepat saat berproses dan mendapatkan feedback dari pengguna. Kemudian  informasi  yang  didapatkan  dari feedback tersebut  digunakan  untuk  memutar kembali  fase  iterasi  hingga  mendapatkan  hasil yang  diinginkan.  Dalam  metode  ini  juga, produk software yang  dihasilkan  pada  setiap akhir  dari  fase  iterasi,  dapat  langsung  menuju fase production untuk  di deploy sebagai incremental release [5]. Berikut adalah gambar ilustrasi  proses  dari  penggunaan iterative development model.
Gambar 1. Ilustrasi Proses Metode Iterative Development Model
2.2. Unified Modelling Language
Unified Modelling Language (UML) adalah suatu  metode  dalam  pemodelan  secara  visual yang  digunakan  sebagai  sarana  perancangan
suatu sistem berorientasi objek. UML memiliki fungsi  untuk  membantu  pendeskripsian  dan desain  sistem  perangkat  lunak,  khususnya sistem yang di bangun menggunakan pemrograman  berorientasi  objek  [6].  UML yang digunakan pada rancang bangun ini adalah Use Case Diagram , dan Activity Diagram . Use Case Diagram adalah salah satu jenis diagram UML  yang  menggambarkan  hubungan  antara aktor  dengan  sistem  [7]. Use  Case  Diagram juga  dapat  mendeskripsikan  sebuah  interaksi antara satu atau aktor yang lebih banyak dengan sistem  yang  dibuat. Activity  diagram adalah diagram  yang  memodelkan  proses-proses  atau disebut  juga  sebagai flow pada  suatu  sistem.
Activity  Diagram juga  berfungsi  untuk menggambarkan aliran kerja atau aktivitas dari sebuah sistem yang ada pada perangkat lunak. Diagram  aktivitas  menggambarkan  aktivitas sistem bukan apa yang dilakukan oleh aktor [8].

## 2.3. JavaScript
JavaScript  adalah  bahasa  pemrograman berbentuk kumpulan script yang berjalan pada suatu  dokumen  HTML  [9].  JavaScript  adalah bahasa pemrograman web yang bersifat Client Side  Programming  Language. Client  Side Programming  Language adalah  tipe  bahasa pemrograman  yang  pemrosesannya  dilakukan oleh client .  Aplikasi client yang  dimaksud merujuk  kepada  web  browser  seperti  Google Chrome,  Mozilla  Firefox,  Opera  Mini  dan sebagainya.

## 2.4. REST
REST  ( Representational  State  Transfer ) merupakan seperangkat prinsip arsitektur yang melakukan  transmisi  data  melalui  antarmuka yang  ter  standarisasi  seperti  HTTP  .  Untuk dapat  mengakses resource ,  diperlukan  URI
( Uniform Resource Identifier) sebagai pengenal ketika  melakukan request ke  HTTP.  Terdapat beberapa  HTTP method seperti GET,  PUT, DELETE,  POST. REST  dapat  menghasilkan responses berupa JSON atau XML [10].
2.5. ReactJS
ReactJS  adalah library  front-end yang dikembangkan  oleh  Facebook.  ReactJS  sering digunakan  sebagai  pendukung  dari  web- framework . ReactJS memiliki beberapa keunggulan  yang  dapat  diberikan  seperti menambah kecepatan, simplicity , dan
scalability . ReactJS
memungkinkan pengembang  situs  web  dapat  membangun komponen UI yang lebih interaktif, stateful , dan reusable [11]. Dalam rancang bangun situs web ini  menggunakan  ReactJS  untuk  sebagai framework dari bahasa pemrograman JavaScript, sehingga dapat dengan mudah untuk merancang dan membangun situs web ini.

## 2.6. Next.Js
Next.js merupakan framework atau kerangka kerja dari ReactJS yang saat ini telah diimplementasikan di puluhan ribu situs web di dunia. Next.js mempunyai beberapa keunggulan  seperti automatic  code  splitting yang  berfungsi  sebagai  pemecah code agar lebih  cepat  saat  memuat  halaman,  Next.js memiliki konsep SSR ( Server Side Rendering ) yang  akan  membantu  untuk  memudahkan dalam  menggunakan  SEO (Search  Engine Optimization ). Next.js juga memiliki directory pages yang  akan  sangat  memudahkan  pada proses routing dan  dapat  dimodifikasi  sesuai dengan kebutuhan. [12].

## 2.7. Data Fetching
Data  fetching  adalah  fitur  yang  berfungsi untuk  menjalankan  mekanisme  pengambilan data  tergantung  dengan  kebutuhan  sistemnya. Mekanisme  data  fetching  yang  dipakai  adalah Client-Side-Rendering (CSR). Mekanisme CSR menggunakan useEffect pada React Hooks untuk  menjalankan  pengambilan  data  dari client-side .  Dengan  menggunakan  CSR,  data yang berasal dari API akan diambil setiap kali page request terjadi  dari client-side (Jadi pengambilan  data  akan  berjalan  ketika page sudah rendered sepenuhnya) [13].

## 2.8. Bootstrap
Bootstrap adalah framework frontend website yang berfungsi untuk mempercepat dan mempermudah pengembangan antarmuka situs web. Bootstrap menyediakan komponen antarmuka  dalam  bentuk  HTML,  CSS,  dan JavaScript  yang  dapat  digunakan  dengan langsung  dan  juga  komponen  tersebut  dapat dikembangkan lagi oleh pengembang situs web. Bootstrap  merupakan  salah  satu framework yang dapat digunakan untuk desain web secara responsif.  Yang  berarti,  tampilan  situs  web yang  menggunakan  komponen  dari  Bootstrap dapat menyesuaikan ukuran layar dari browser
yang  digunakan,  baik di  desktop,  tab, maupun smartphone [14].

## 2.9. Kriptografi
Secara  umum,  kriptografi  dapat  diartikan sebagai  suatu  bidang  ilmu  yang  memiliki kesenian dalam menjaga kerahasiaan dari suatu data atau informasi. Terdapat dua istilah dalam kriptografi  yaitu plainteks (pesan  asli)  dan cipherteks (pesan yang telah diacak). Terdapat 2  proses  yang  terdapat  dalam  kriptografi  yaitu enkripsi dan dekripsi. Enkripsi yaitu mengubah pesan asli menjadi pesan yang susah dimengerti sedangkan dekripsi merupakan proses mengubah pesan yang tidak dimengerti menjadi pesan bermakna atau pesan asli [15].
Enkripsi yang dipakai pada rancang bangun ini adalah enkripsi asimetris. Enkripsi asimetris adalah enkripsi yang menggabungkan dua kata kunci  yang  berbeda  antara  adanya  proses enkripsi  dan  dekripsi. Key yang  digunakan untuk  mengenkripsi  disebut public  key , sedangkan key untuk  mendekripsi  disebut private key .  Contoh  algoritma  yang  memakai enkripsi asimetris adalah algoritma RSA.
2.10. User Experience Questionnaire (UEQ) UEQ  atau user  experience  questionnaire adalah salah satu kuesioner yang hasilnya dapat digunakan  dalam usability  testing ,  yang bertujuan  untuk  mengukur  tingkat user experience dari suatu produk dengan cepat [16], dalam  rancang  bangun  ini  berarti  ingin mengukur user  experience dari  situs  web PilihGeh.  Pada  UEQ  terdapat  6  skala  dengan total 26 elemen yang dikategorikan berdasarkan skala  pengukuran  yang  terdapat  pada  UEQ, skala-skala tersebut adalah sebagai berikut:
a. Attractiveness (Daya tarik): Kesan terhadap  situs  web.  Apakah  pengguna menyukai atau tidak menyukai situs web? Seberapa  besar  daya  tarik  dari  sebuah produk.  Misal:  bagus  atau  jelek,  atraktif atau tidak atraktif. [16]
b. Efficiency (Efisiensi):  Kemungkinan  pada situs  web  dapat  digunakan  dengan  cepat dan  efisien.  Seberapa  besar  pengguna dapat menyelesaikan tugasnya tanpa usaha yang  besar  atau  efisien.  Misal:  cepat  atau lambat, praktis atau tidak praktis. [16]
c. Perspicuity (Kejelasan): Apakah memungkinkan  menggunakan  situs  web ini?  Apakah  mudah  bagi  pengguna  untuk
membiasakan diri menggunakan situs web ini?  Seberapa  besar  kejelasan  dari  sebuah situs  web.  Misal:  mudah  dipahami  atau sulit dipahami. [16]
d. Dependability (Ketepatan): Apakah pengguna merasa dalam kontrol interaksi? Apakah  interaksi  dengan  situs  web  aman dan  dapat  diprediksi?  Seberapa  besar ketepatan  yang  dirasakan  oleh  pengguna melalui kontrol yang ia miliki. Misal: dapat diprediksi  atau  tidak  dapat  diprediksi, mendukung atau menghalangi. [16]
e. Stimulation (Stimulasi):  Apakah  menarik dan menyenangkan untuk pengguna dalam menggunakan situs web tersebut? Apakah pengguna  merasa  termotivasi  untuk  terus menggunakan  situs  web?  Seberapa  besar motivasi  untuk  menggunakan  situs  web. Misal: bermanfaat atau kurang bermanfaat, menarik atau tidak menarik. [16]
f. Novelty (Kebaruan):  Apakah  desain  situs web inovatif dan kreatif? Apakah situs web mampu mendapatkan perhatian pengguna? Seberapa  kreatif  atau  besar  kebaruan  dari situs web. [16]
Kemudian, enam skala tersebut dikelompokkan  lagi  menjadi  tiga  aspek,  yaitu terdapat aspek daya tarik ( attractiveness ), aspek pragmatic quality, dan aspek hedonic qualitiy . Aspek pragmatic quality berkaitan  dengan manfaat yang dirasakan, efisiensi dan kemudahan digunakan. Kejelasan ( perspicuity ), efisiensi ( efficiency )
dan ketepatan ( dependability )  termasuk  kedalam pragmatic quality aspect . Aspek hedonic quality berkaitan dengan  stimulasi  ( stimulation )  dan  kebaruan ( novelty ) [16]. Kemudian, data yang didapatkan dari  UEQ  dapat  diolah  dengan  menggunakan UEQ tool analysis .

## 3. METODE PENELITIAN
Metode  penelitian  yang  digunakan  dalam pelaksanaan dan pengerjaan rancang bangun ini adalah  metode Iterative  Development  Model . Metode ini adalah metode yang pengembangan situs  webnya  difokuskan  dengan  memecahkan proses  pengembangan  situs  web  menjadi bagian-bagian  kecil,  yang  bagian  kecil  itu disebut  sebagai  iterasi  [17].  Berikut  adalah gambar diagram metode Iterative Development Model :
Gambar 2. Diagram Metode Iterative Development Model
Metode Iterative Development Model ini terdiri dari  lima  tahapan  dalam  pengerjaannya,  di antaranya:

## 3.1. Analisis
Langkah  pertama  pada  metode  ini  adalah analisis kebutuhan situs web. Analisis dilakukan dengan cara menganalisis dari jurnal dan  skripsi  terdahulu,  kemudian  diteliti kelebihan  dan  kekurangannya,  sehingga  akan mendapatkan hasil berupa penentuan kebutuhan fungsional  dan  non-fungsional  dari  situs  web ini.

## 3.2. Desain Sistem
Langkah  kedua  dalam  metode  ini  adalah pembuatan desain sistem situs web pemungutan suara.  Rancang  bangun  situs  web  di  desain dengan menggunakan Unified Modeling Language  Diagram yaitu Use  Case  Diagram dan Activity Diagram.
3.3. Coding
Setelah  melaksanakan  pembuatan  desain sistem,  selanjutnya  adalah  pembuatan  kode program dengan menggunakan bahasa
JavaScript  dengan Library React.Js  dengan
Framework
React Bootstrap, dengan menggunakan software code editor yaitu Visual Studio  Code  untuk  melaksanakan  rancang bangun situs web ini.

## 3.4. Testing
Proses pengujian ini dilakukan berdasarkan dua  tahapan,  tahapan  pertama  yaitu  pengujian fungsional  untuk  mengetahui  apakah  fungsi-
fungsi pada rancang bangun situs web ini sudah sesuai  dengan  analisis  kebutuhan  seperti kebutuhan  fungsional  dan  non-fungsional. Pengujian  ke  dua  adalah  pengujian user experience ,  untuk  mengetahui  bagaimana tanggapan pengguna dalam menggunakan situs web.

## 3.5. Deployment
Proses deployment ini  dilakukan  setelah iterasi  pengembangan  situs  web  selesai  dan situs  web  dianggap  stabil  dan  siap  untuk digunakan  oleh  pengguna  situs  web.  Pada proses  ini,  situs  web  akan  di deploy dengan menggunakan layanan Vercel.

## 4. HASIL DAN PEMBAHASAN

## 4.1. Analisis
Berikut  adalah  kebutuhan  fungsional  dan non-fungsional dari situs web ini:

## 4.1.1. Kebutuhan Fungsional
Berikut  adalah  kebutuhan  fungsional  dari situs web ini:
• Pengguna  dapat  melakukan  autentikasi berupa login, daftar  dan logout pada  situs web
• Pengguna dapat
menyelenggarakan
pemungutan suara dan melaksanakan pemungutan suara
• Pengguna dapat mengubah profil akun
• Pengguna  dapat  melihat  detail  pemungutan suara sebagai pemilih maupun admin
• Pengguna dapat mendaftarkan dan mengelola kandidat
• Pengguna dapat menambahkan dan mengelola timeline untuk  mengatur  jadwal pemungutan suara
• Pengguna  dapat  menambah  dan  mengelola calon pemilih
• Pengguna  dapat  menambah  dan  mengelola admin
• Pengguna dapat menerima ajakan mengikuti pemungutan suara yang sedang berlangsung sebagai admin
• Pengguna dapat menerima ajakan mengikuti pemungutan suara yang sedang berlangsung sebagai pemilih
• Pengguna  dapat  verifikasi  ulang  data pemungutan  suara  yang  di input oleh pemilih
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062 Bintang dkk
• Pengguna dapat men- takedown pemungutan suara
• Sistem  dapat  enkripsi  data  penting  seperti data login dan daftar

## 4.1.2. Kebutuhan Non Fungsional
Berikut  adalah  kebutuhan  non-fungsional dari situs web ini:
• Situs  web  harus  terhubung  ke  koneksi internet
• Website menggunakan  desain responsive website
• Situs  web  dapat  menjamin  perlindungan data  yang  memadai  dalam  sisi  kerahasiaan dan keamaan dengan menggunakan enkripsi.

## 4.2. Desain Sistem
Desain sistem merupakan proses merancang konsep, perencanaan, dan spesifikasi hal teknis pada suatu sistem dengan memerhatikan aspek kebutuhan  pengguna,  batasan  teknis,  serta tujuan  dan  persyaratan  sistem  yang  akan dibangun. Desain sistem terdiri dari komponen yang  saling  berinteraksi  untuk  mendapatkan hasil tertentu. Desain sistem dilakukan dengan menggunakan Unified  Modelling  Language (UML).  Diagram  yang  akan  digunakan diantaranya use  case  diagram dan activity diagram.
4.2.1. Use Case Diagram
Use  case  diagram adalah  sebuah  diagram yang  dapat  digunakan  untuk  menggambarkan interaksi  antara  sistem  dengan  aktor  yang terlibat dalam situs web ini. Use case diagram dapat dilihat pada gambar berikut.
Gambar 3. Use Case Diagram Pengguna Setelah Login
Gambar 4. Use Case Diagram Pengguna Admin
Gambar 5. Use Case Diagram Pengguna
Pemilih
4.2.2. Activity Diagram
Activity  diagram adalah  salah  satu  jenis diagram yang dapat digunakan untuk menggambarkan alur atau urutan aktivitas yang terjadi  dalam  suatu  proses.  Diagram  ini  dapat memudahkan  dalam  memvisualisasikan step- by-step yang harus dilakukan dalam suatu alur proses.  Berikut  adalah  beberapa activity diagram yang ada pada situs web.
a. Activity Diagram Login
Berikut  adalah activity  diagram aktivitas login pada situs web ini.
Gambar 6. Activity Diagram Login
b. Activity Diagram
Menyelenggarakan
Pemilihan
Berikut  adalah activity  diagram untuk menyelenggarakan  pemilihan  pada  situs  web ini.
Gambar 7. Activity Diagram
Menyelenggarakan Pemilihan
c. Activity Diagram Melaksanakan Pemilihan
Berikut  adalah activity  diagram untuk melaksanakan pemilihan yang sedang berlangsung pada situs web ini.
Gambar 8. Activity Diagram Melaksanakan Pemilihan d. Activity Diagram Memverifikasi Suara Berikut adalah alur dari memverifikasi suara yang telah masuk pada situs web ini.
Gambar 9. Activity Diagram Memverifikasi Suara
4.3. Pengodean (Coding)
Situs web PilihGeh dibangun menggunakan bahasa pemrograman JavaScript dengan framework React.js.  Bahasa  pemrograman JavaScript digunakan untuk membangun bagian frontend situs  web,  sedangkan framework React.js digunakan untuk membangun komponen-komponen frontend situs web. Situs web  terdiri  dari  berbagai  fitur,  di  antaranya adalah fitur autentikasi, fitur menyelenggarakan dan  melaksanakan  pemungutan  suara,  fitur mengelola  pemungutan  suara  sebagai  admin, fitur mengelola profil, dan fitur enkripsi.
a. Fitur  autentikasi  pada  situs  web  PilihGeh dibagi  menjadi  tiga,  yaitu  fitur login ,
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062 Bintang dkk
daftar,  dan logout .  Fitur login digunakan untuk masuk ke situs web, sedangkan fitur daftar  digunakan  untuk  membuat  akun baru. Fitur logout digunakan untuk keluar dari  situs  web.  Fitur login dan  daftar menggunakan  algoritma  enkripsi  AES- 256-CBC  untuk  mengamankan  data pengguna. Algoritma ini digunakan untuk mengenkripsi  data  pengguna,  seperti email , password , dan kode OTP. b. Fitur menyelenggarakan dan melaksanakan  pemungutan  suara  pada situs  web  PilihGeh  dibagi  menjadi  dua, yaitu fitur menyelenggarakan pemungutan suara  dan  melaksanakan  pemungutan suara.
Fitur
menyelenggarakan pemungutan suara digunakan untuk membuat pemungutan suara baru. Fitur ini membutuhkan  data  pemungutan  suara, seperti  nama  pemungutan  suara,  nama organisasi, dan deskripsi. Fitur
melaksanakan pemungutan suara digunakan  untuk memilih  kandidat  dalam pemungutan suara. Fitur ini membutuhkan foto pemilih dan token untuk memverifikasi pemilih.
c. Fitur mengelola pemungutan suara sebagai admin  dibagi  menjadi  tujuh  fitur,  di antaranya yaitu terdapat fitur add dan edit kandidat,  fitur real  time  count, fitur add dan edit timeline , fitur manage voters, fitur manage admin, fitur manage vote, dan fitur mengelola pemungutan suara.
d. Fitur  mengelola  profil  digunakan  untuk memperbarui  data  profil  pengguna.  Fitur ini  membutuhkan  data  pengguna,  seperti nama,  email,  nomor  telepon,  jenis  data pribadi, ID data pribadi, dan agensi.
Berikut  adalah  hasil  implementasi  dari pengodean yang sudah dilakukan.
Gambar 10. Hasil Impelementasi Pengodean pada Login Page
Gambar 11. Hasil Impelementasi Pengodean pada Halaman Beranda
Gambar 12. Hasil Impelementasi Pengodean pada Halaman Detail Pemungutan Suara
Sebagai Pemilih

## 4.4. Testing

## 4.4.1. Pengujian Fungsionalitas
Pada  tahap  pengujian  ini,  dilakukan pengujian  sistem  secara  langsung  pada perangkat  PC  dengan  menggunakan  metode blackbox  testing .  Pengujian  ini  dilakukan dengan tujuan untuk dapat menguji fungsionalitas dari situs web agar sesuai dengan kebutuhan. Pengujian dilakukan dengan menguji 76 skenario yang didapatkan berdasarkan  kebutuhan  fungsionalitas,  dengan hasil sesuai yang diharapkan.

## 4.4.2. Pengujian User Experience
Tahap  pengujian  ini  dilakukan  dengan menggunakan User  Experience  Questionnaire (UEQ) untuk mengevaluasi pengalaman pengguna  ( user  experience )  terhadap  aplikasi web.  Proses  pengujian  sistem  menggunakan kuesioner  dalam  bentuk  Google  Form  yang akan  disebarkan  kepada  responden.  Jumlah responden  yang  mengisi  kuesioner  adalah sebanyak  32  responden.  Berdasarkan  diagram pengelompokan responden, Terdapat 4 responden  yang  berusia  di  bawah  18  tahun, terdapat 4 responden yang berusia 19-24 tahun,
dan  terdapat  24  responden  yang  berusia  lebih dari  24  tahun.  Pada  responden  tersebut  juga terdapat  4  responden  sebagai  siswa/siswi,  4 responden  sebagai  mahasiswa/mahasiswi,  dan terdapat  24  responden  sebagai  masyarakat umum.
Gambar 13. Diagram Pengelompokkan Usia Responden

## Gambar 14. Diagram Pengelompokkan
Responden Berdasarkan Status
Data yang diperoleh dari kuesioner tersebut dimasukkan ke dalam tabel UEQ data analysis, yang  kemudian  akan  didapatkan  hasil  akhir benchmark seperti gambar berikut.

## Gambar 15. Hasil Perbandingan Nilai Rata-
Rata dengan Skala Benchmark
Pada  gambar  di  atas,  dapat  terlihat  bahwa berdasarkan  hasil  perbandingan  dengan  skala benchmark ,  aspek-aspek  seperti  daya  tarik, kejelasan,  efisiensi,  ketepatan,  stimulasi,  dan kebaruan mendapatkan hasil baik ( Good ). Hasil tersebut  menunjukkan  bahwa  situs  web PilihGeh  ini  sudah  cukup  baik,  namun  masih perlu  adanya  upaya  untuk  memperbaiki  situs web ini untuk dapat meningkatkan aspek daya tarik, pragmatic quality ,  dan hedonic quality menjadi  lebih  baik  lagi  dengan  menyediakan fungsi  atau  fitur-fitur  yang  dapat  membantu pengguna dalam melakukan pemungutan suara,
sehingga  nilai  rata-rata  hasil  UEQ  bisa mendapatkan hasil excellent .

## 4.5. Deployment
Situs web PilihGeh saat ini sudah siap untuk digunakan sebagai situs web untuk pemungutan suara yang dapat digunakan untuk masyarakat, baik mahasiswa, siswa, dan masyarakat umum. Situs  web  yang  dirancang  bangun  sudah dilakukan deployment di layanan Vercel dengan link https://pilih-geh.vercel.app/.

## 5. KESIMPULAN
Berdasarkan hasil dan rancang bangun yang telah  disampaikan,  didapatkan  kesimpulan sebagai berikut: 1. Rancang  bangun  yang  dilakukan  berhasil mengembangkan frontend situs web pemungutan  suara  yang  bernama  PilihGeh dengan  menggunakan  metode iterative development  model menggunakan library
React js. 2. Rancang  bangun  yang  dilakukan  berhasil menyediakan fitur-fitur yang telah direncanakan pada tahap perencanaan yaitu memiliki fitur autentikasi,
fitur menyelenggarakan dan melaksanakan pemungutan suara, fitur mengelola pemungutan  suara  sebagai  admin,  fitur mengelola profil, dan fitur enkripsi.
3. Situs  web  tersebut  telah  diuji  dalam  aspek fungsionalitas dengan menggunakan metode blackbox  testing dengan  menguji  76 skenario dengan hasil sesuai yang diharapkan.  Kemudian,  situs  web  diuji dalam  aspek user  experience dengan responden  yang  berasal  dari  lingkungan sekolah, lingkungan kampus, dan lingkungan masyarakat dengan menggunakan  metode  pengujian  UEQ, dengan mendapatkan hasil baik ( good ).
4. Situs  web  PilihGeh  telah  berhasil  di deployment dengan  menggunakan  layanan Vercel  dengan link situs  web  https://pilih- geh.vercel.app/.

## DAFTAR PUSTAKA
[1]   A.  Azis,  I.  Setiawan  dan  A.  Risqiantoro, “Aplikasi  E-Voting  Untuk  Pemilihan  Kepala Desa  Berbasis  Website,” JOISM  :  Jurnal  Of
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062 Bintang dkk
Information  System  Management, vol.  1,  pp.
1-7, 2019.
[2]   A.  Yulianto,  D.  H.  Yusuf  dan  Firmansyah, “Penerapan  E-Voting  Dengan  Metode Waterfall  Untuk  Pemilihan  Ketua  Osis  Pada SMP PGRI Parung Panjang Bogor,” Riset dan E-Jurnal Manajemen Informatika, vol.  3, pp. 66-73, 2019.
[3]   F. Setyawan, Pratama dan F. Indra, “Rancang Bangun  Sistem  E-Voting  Pemilihan  Ketua Osis  SMA  Mardisiswa  Semarang  Berbasis Web,” Jurnal  Informatika  dan  Rekayasa Perangkat Lunak, vol. 2, pp. 154-160, 2020.
[4]   A.  T.  Siahaan  dan  H.  N.  Irmada,  “Aplikasi Sistem  e-Voting  Ketua  Umum  UPN  Band Veteran  Jakarta  Berbasis  Website,” Seminar Nasional  Mahasiswa  Ilmu  Komputer  dan Aplikasinya, pp. 742-751, 2021.
[5]   M. Ali, N. Mohammed dan A. Govardhan, “A Comparison  Between  Five  Models  Of Software  Engineering,” IJCSI  International Journal of Computer Science, vol. 7, no. 5, pp. 94-101, 2010.
[6]   Nistrina, Khilda, Sahidah dan Lisna, “Unified Modelling Language (UML) Untuk Perancangan  Sistem  Informasi  Penerimaan Siswa  Baru  Di  SMK  Marga  Insan  Kamil,”
Jurnal  Sistem  Informasi, vol.  4,  pp.  17-23, 2022.
[7]   Kurniawan dan T. Bayu, “Perancangan Sistem Aplikasi Pemesanan Makanan Dan Minuman Pada  Cafetaria  No  Caffe  Di  Tanjung  Balai Karimun  Menggunakan  Bahasa Pemograman PHP  Dan  Mysql,” Jurnal  TIKAR, vol.  1,  p.
198, 2020.
[8]   N. Musthofa dan M. A. Adiguna,
“Perancangan  Aplikasi  E-Commerce  Spare- Part  Komputer  Berbasis  Web  Menggunakan CodeIgniter  Pada  Dhamar  Putra  Ccomputer Kota  Tangerang,” OKTAL  :  Jurnal  Ilmu Komputer  dan  Science, vol.  1,  pp.  199-207,
2022.
[9]   Mariko dan Selli, “Aplikasi Website Berbasis HTML  Dan  Javascript  Untuk  Menyelesaikan Fungsi Integral Pada Mata Kuliah Kalkulus,”
Jurnal  Inovasi  Teknologi  Pendidikan, vol.  6, p. 84, 2019.
[10]  K.  Wagh  dan  D.  R.  Thool,  “A  Comparative Study  of  SOAP  Vs  REST  Web  Services Provisioning,” Journal of Information
Engineering and Applications, vol. 2, pp. 12- 16, 2012.
[11]  J. Panjaitan dan A. F. Pakpahan, “Perancangan Sistem  E-reporting  Menggunakan  ReactJS
dan Firebase,” Jurnal Teknik Informatika dan Sistem Informasi, pp. 20-34, 2021.
[12]  Vercel, “Create a Next.js App | Learn Next.js,” Next.js, 2023. [Online]. Available: https://nextjs.org/learn/basics/create-nextjs- app. [Diakses 23 Mei 2023].
[13]  D.  A.  Mochammad  Fariz  Syah  Lazuardy, “Modern  Front  End  Web  Architectures  with React.Js and Next.Js,” International Research Journal  of  Advanced  Engineering  and Science, vol. 7, no. 1, pp. 132-141, 2022.
[14]  Suprayogi, Bambang, Rahmanesa dan Abdur, “Penerapan  Framework  Bootstrap  Dalam Sistem  Informasi  Pendidikan  SMA  Negeri  1 Pacet Cianjur Jawa Barat,” TEMATIK - Jurnal Teknologi Informasi Dan Komunikasi, vol. 6,
p. 120, 2019.
[15]  Z.  Aufia,  Turmudi  dan  E.  Alisah,  “Enkripsi dan  Dekripsi  Pesan  Menggunakan  Metode Vigenere  Cipher  dan  Route  Cipher,” Jurnal Riset Mahasiswa Matematika, vol. 1, no. 2, pp.
93-104, 2021.
[16]  S.  R.  Henim  dan  R.  P.  Sari,  “Evaluasi  User Experience  Sistem  Informasi  Akademik
Mahasiswa pada Perguruan Tinggi Menggunakan User Experience Questionnaire,” Jurnal  Komputer  Terapan, vol. 6, no. 1, 2020.
[17]  A. Hanif, Martanto, M. Lilik dan H. Adianto, “Adaptasi  Model  SDLC  Iteratif  Terhadap Pendekatan
Mobile-first Untuk Pengembangan Antarmuka Web Responsive,”
Jurnal Format, vol. 10, pp. 12-27, 2021.