Terbit online pada laman web jurnal: http://journal.ittelkom-pwt.ac.id/index.php/dinda

## Journal of DINDA
Kelompok Keahlian Rekayasa Data Institut Teknologi Telkom  Purwokerto
Vol. 2 No. 2 (2022) 75 - 81
ISSN Media Elektronik: 2809-8064

## Sistem Rekomendasi Desain Website Berdasarkan Tingkat Kemiripan Menggunakan Euclidean Distance
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3 1,2,3* Teknik Informatika, Fakultas Informatika, Institut Teknologi Telkom Purwokerto
1* 17102100@ittelkom-pwt.ac.id, 2 agi@ittelkom-pwt.ac.id, 3 apri@ittelkom-pwt.ac.id

## Abstract
The more internet users, the more interest in creating websites for certain purposes. To create a website that can attract visitors, a good website design is required. Website design is an important element in making a website, because  the  design  of  a  website  will  create  its  own  impression  and  image  for  website  users.  One  of  the technological  developments is artificial intelligence, namely the Recommendation System which is a computer technology that is able to provide recommendations for the layman, in this study a website design recommendation system based on the Euclidean distance assessment resulted in a "good" SUS (System Usability Scale) grade C “good”.
Keywords: euclidean distance, website design, recommendation system

## Abstrak
Semakin meningkatnya pengguna internet, semakin meningkat pula peminat dalam membuat website untuk tujuan tertentu. Untuk membuat website yang dapat menarik pengunjung diperlukan design website yang baik. Design pada website merupakan suatu elemen yang penting dalam pembuatan website , karena design dari suatu website akan  dapat  menimbulkan  kesan  dan  pencitraan  tersendiri  bagi  para  pengguna website .  Salah  satu  dari perkembangan  teknologi  adalah  kecerdasan  buatan  yaitu  Sistem  Rekomendasi  yang  merupakan  teknologi komputer  yang  mampu  memberikan  rekomendasi  untuk  kalangan  awam,  pada  penelitian  ini  adalah  sistem rekomendasi desain website berdasarkan tingkat kemiripan euclidean distance yang menghasilkan SUS (System Usability Scale) tingkat C “baik”.
Kata kunci: euclidean distance, desain website, sistem rekomendasi
© 2022 Jurnal DINDA

## 1. Pendahuluan
Dunia internet menjadi berkembang dengan sangat pesat dan telah menjadi bagian dari hidup masyarakat modern saat ini. Internet secara lengkap menyediakan kebutuhan akan  informasi,  berita  serta  ilmu  pengetahuan[1]. Berdasarkan  laporan  International  Telecomunication Union  (ITU)  yang  merupakan  badan  Perserikatan Bangsa-Bangsa (PBB), jumlah pengguna internet dunia pada  tahun  2018  sebesar  3,9  milyar  melebihi  setengah populasi  dunia.  Kenaikan  itu  juga  dialami  oleh Indonesia.  Hasil  survey  Asosiasi  Penyelenggara  Jasa Internet Indosensia (APJII) pada tahun 2018 mengemukakan  bahwa  jumlah  pengguna  internet  di
Indonesia sebesar 171,2 juta dan naik sebesar 27,9 juta dari tahun lalu yang berjumlah 143,3 juta[2].
Semakin  meningkatnya  pengguna  internet,  semakin meningkat pula peminat dalam membuat website untuk tujuan  tertentu.  Pengertian  dari  website  sendiri  adalah halaman  informasi  yang  disediakan  melalui  jalur internet  sehingga  bisa  diakses  di  seluruh  dunia  selama terkoneksi dengan jaringan internet namun begitu dapat pula  diakses  tidak  menggunakan  jalur  internet melainkan  intranet.  Biasanya  website  menampilkan informasi  data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik  yang  bersifat  statis  maupun  dinamis  yang
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
membentuk satu rangkaian bangunan yang saling terkait dimana  masing-masing  dihubungkan  dengan  jaringan- jaringan halaman (hyperlink).
Untuk membuat website yang dapat menarik pengunjung  diperlukan design  website yang  baik. Design  Web adalah  jenis  desain  grafis  yang  ditujukan untuk  pengembangan  dan styling obyek  lingkungan informasi  Internet  untuk  menyediakan  dengan  fitur konsumen highend dan  kualitas  estetika. Design pada website merupakan  suatu  elemen  yang  penting  dalam pembuatan website ,  karena design dari  suatu website akan dapat menimbulkan kesan dan pencitraan tersendiri bagi  para  pengguna website .  Selain  itu, design  website yang  baik  juga  akan  dapat  membantu  pengguna  untuk mendapatkan informasi yang dibutuhkannya dari konten website dengan cepat[3].
A. Web Desain
Web Desain  adalah  istilah  yang  sering  digunakan untuk  menggambarkan  bagaimana  tampilan  isi suatu website atau situs. Untuk menampilkan suatu desain web atau  isi  dari  suatu website ,  dibutuhkan sebuah browser  web atau software (perangkat lunak) berbasis web . Tujuan dari web desain adalah untuk membuat website yang meliputi sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada web server [4].
B. Sistem Rekomendasi
Sistem  rekomendasi  adalah  sebuah  alat  perangkat lunak  dan  teknik-teknik  yang  menyediakan  saran untuk  item-item  yang  paling  memungkinkan menarik untuk pengguna tertentu[5].

## C. Euclidean Distance
Euclidean  distance merupakan  salah  satu  metode perhitungan jarak yang digunakan untuk mengukur jarak dari 2 (dua) buah titik dalam Euclidean space (meliputi  bidang euclidean dua  dimensi,  tiga dimensi,  atau  bahkan  lebih).  Untuk  mengukur tingkat  kemiripan  data  dengan  rumus euclidean distance digunakan  rumus  berikut[6].  Metode  ini
juga sering disebut Euclidean Distance [7-10].

## Gambar 1. Euclidean Distance
Jarak euclidean merupakan  jarak  yang  paling  umum yang digunakan untuk data numerik, untuk dua titik data x dan y dalam ruang d-dimensi. Bentuk umum euclidean distance (d) dapat diperoleh dengan
𝑥 = 𝑥 1 , 𝑥 2 , … , 𝑥𝑛 𝑦 = 𝑦 1 , 𝑦 2 , … , 𝑥𝑛

## Gambar 2. Contoh Matriks Jarak
Adapun  rumus  yang  digunakan  dalam  perhitungan kedekatan  melalui  pembobotan  atribut  adalah  sebagai berikut:
Rumus Euclidean distance:

## 𝐷𝐸𝑢𝑐𝑙𝑖𝑑𝑒𝑎𝑛(𝑥, 𝑦)
=   √∑ (𝑥 𝑘 − 𝑦 𝑘 ) 2 𝑛 𝑘=1 … … … … … … … … … … … … (1)
Dengan D adalah jarak antara titik pada data x dan titik data y, dimana x = x1, x2,……xi dan y = y1, y2,……yi dan j mempresentasikan nilai atribut serta p merupakan dimensi atribut.
Keterangan:
d = jarak antara x dan y
k = variabel data (setiap data)
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
n = banyak parameter (jumlah data)
x = data testing
y = data training

## 2. Metode Penelitian
Metode penelitian adalah gambaran atau langkahlangkah yang akan dilaksanakan dalam melakukan  penelitian  ini  bertujuan  untuk  supaya penelitian dapat dilakukan dengan terstruktur. Langkah yang  akan  dilakukan  harus  mencakup  mulai  dari mempelajari  sampai  dengan  adanya  suatu  sistem  yang dapat  memberikan  penyelesaian  masalah  yang  sedang diteliti.  Dalam  perancangan  Sistem  Rekomendasi  ini dilakukan beberapa tahapan.
Uraian  langkah  kerja  yaitu  dapat  dilihat  pada gambar 3 yaitu sebagai berikut :
Gambar 3. Tahapan-tahapan penelitian
Peneliti melakukan observasi untuk menggali informasi dilakukan mengenai kebutuhan dari masyarakat umum. Observasi  dilakukan  dengan  melakukan  penyebaran kuesioner terhadap masyarakat umum. Tahap selanjutnya yaitu studi Pustaka.
Pada  tahap  Studi  Pustaka,  pada  tahap  ini  peneliti membaca dan memahami konsep machine learning , dan desain website yang  ada  pada  jurnal,  buku  maupun penelitian sebelumnya.
Tahap  Penggalian  dataset  atau  pengumpulan  dataset dilakukan dalam penelitian ini yaitu dengan melakukan penelusuran  internet  mencari  desain  dari  berbagai macam website yang ada di internet.
Uji  coba  metode  dilakukan  untuk  mencoba  kecocokan metode yang digunakan dengan studi kasus yang ambil. Pada  penelitian  ini  menggunakan  rumus Euclidean distance untuk  mencari  nilai  kedekatan  antara  atribut website yang  berada  di  database  dengan  atribut  yang pengguna  masukan  menggunakan  rumus Euclidean distance.
Pengolahan  data  dilakukan  untuk  mendapatkan  data yang sudah siap untuk diproses sistem. Pengolahan data dilakukan  dengan  bantuan  masyarakat  umum  dimana masyarakat  umum  diminta  mengklasifikasi  desain website yang telah dikumpulkan apakah website tersebut baik  atau  buruk  melalui  media  kuesioner.  Setelah dilakukan  klasifikasi  oleh  masyarakat  umum  dataset dikonversi ke tipe numerik.
diagram alir tentang bagaimana cara kerja suatu sistem rekomendasi  yang  menggunakan  metode Euclidean distance dalam menyelesaikan masalah yang terjadi.
Mulai Pengguna input kriteria desain website Selesai Mencari nilai kedekatan antara inputan user dengan database website menggunakan rumus euclidean distance Rekomendasi desain website berdasarkan urutan nilai kedekatan terkecil Database website Nilai kedekatan
Gambar 4. Flowchart Sistem Rekomendasi
Gambar  4  merupakan  diagram  alir  menggunakan yang  menggunakan  rumus Euclidean  distance yang menunjukan bagaimana proses mencari nilai kedekatan antara inputan user dengan website yang ada di database.
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
Gambar 5. Flowchart Euclidean Distance
Pada Gambar 5 akan dijelaskan sebagai berikut :
1. Load dataset  (load file CSV kumpulan alamat desain web dan karakteristiknya)
2. Mengarahkan  website  ke  inputan  [bahasanya kurang  baku] user (masuk  ke  menu  input desain)
3. Convert ke angka (hasil inputan dikuantisasi ke dalam bentuk angka sesuai karakteristiknya)
4. Cari website yang cocok berdasarkan angka
5. Tampilkan rekomendasi web
6. Bandingkan dengan metode Euclidean Distance dengan jarak terkecil.

## 3.   Hasil dan Pembahasan
A. Hasil Pengujian Pengujian penelitian ini menggunakan dua hal yang berbeda.  Pertama  dari  kepuasan  pengguna,  dalam kuisioner menggunakan data sampel menggunakan 5 pertanyaan  bersistem  skala  likert  dengan  parameter sangat setuju, setuju, netral, tidak setuju, dan sangat tidak setuju, berdasarkan data yang diperoleh 70,9% menjawab setuju.
Skala  Likert adalah  skala  yang  dapat  dipergunakan untuk  mengukur  sikap,  pendapat,  dan  persepsi seseorang  atau  sekelompok  orang  tentang  suatu gejala  atau  fenomena  pendidikan. Skala  Likert adalah  suatu  skala  psikometrik  yang  umum digunakan  dalam  kuesioner,  dan  merupakan  skala yang  paling  banyak  digunakan  dalam  riset  berupa survei.
Tabel 1.Skala Likert Pertanyaan Sangat setuju setuju netral Tidak setuju Sangat tidak setuju Saya  berpikir akan
menggunakan web ini lagi
5 11 6 0 0 Saya  merasa sistem ini rumit untuk digunakan 0 1 9 12 0 Saya  merasa sistem ini mudah digunakan
3 12 7 0 0 Saya membutuhkan bantuan dari orang lain atau
teknisi  dalam menggunakan sistem ini 1 1 10 9 1 B. Kasus Pencarian Naïve
Model yang dibangun sistem dapat dapat memproses input dari user di mana setiap kolom pada form input user memberikan  hasil  yang  berbeda  berdasarkan inputan  user,  maka  dari  itu  model  dapat  dikatakan berjalan dengan baik. Pada tahap awal, desain dipilih berdasarkan kesesuaian kategori antara inputan user dengan  kategori  desain  yang  ada  di  database.  Fase pencarian ini di sebut dengan pencarian Naïve . Jika tidak  ditemukan,  maka  akan  masuk  ke  pencarian Euclidean  distance  [italic].  Disini  akan  ditampilkan 2 contoh percobaan pencarian Naïve .
a. Kasus: ada gambar, ada keterangan dan judul
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81

## Gambar 6. Inputan User
Pada  gambar  6  berisi  contoh user menginput kriteria yang diinginkan.
Kemudian  akan  menghasilkan  output  seperti gambar dibawah ini :
Gambar 7. Hasil dari Inputan User A
Pada  gambar  7  merupakan  hasil  dari  inputan  user sesuai kriteria yang diinginkan.
b. Kasus: ada gambar, keterangan, menu dan judul
Kemudian  akan  menghasilkan  output  seperti  gambar dibawah ini:
Gambar 8. Hasil Inputan User B
Pada gambar 8 merupakan hasil dari inputan user pada website.
C. Kasus Pencarian Euclidean distance
Jika pada tahap pencarian naïve tidak mendapatkan hasil,  maka  akan  dilanjutkan  pada  tahap  pencarian dengan Euclidean didtance.
a. Kasus: ada gambar dan judul

## Gambar 9. Inputan User Euclidean A
Pada  gambar  9  merupakan  inputan  user  sesuai  kriteria yang diinginkan.
Kemudian  akan  menghasilkan  output  seperti  gambar dibawah ini :
Gambar 10. Hasil Inputan User Euclidean A
Pada gambar 10 merupakan hasil dari inputan user pada website.
b. Kasus: gambar saja tetapi gambar gelap
Kemudian akan menghasilkan output seperti gambar dibawah ini :
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81

## Gambar 11. Hasil Inputan User Euclidean B
Pada  gambar  11  merupakan  hasil  inputan  user  pada website.

## c. Kasus: gambar saja tetapi gambar cerah
Kemudian akan menghasilkan output sebagai berikut :
Gambar 12. Hasil Inputan User Euclidean C
Pada  gambar  12  merupakan  hasil  inputan  user  pada website.

## D. Kecepatan Respon
Menghitung kecepatan respon web sistem rekomendasi diukur  pada  saat  website  menerima  inputan  sampai dengan output rekomendasi desain keluar. Pada tahap ini dilakukan  percobaan  sebanyak  33kali  yang  dimana dibagi  menjadi  2  yaitu  percobaan  yaitu  dengan Euclidean  distance  (percobaan  A,  B  dan  C)  dan percobaan dengan naïve (percobaan D dan C).
Berikut gambar 13 percobaan waktu respon web.
Gambar 13. Percobaan Waktu Respon
Berikut gambar 14 percobaan respon web (ms)

## Gambar 14. Hasil Respon Web
4.   Kesimpulan  dan  Saran  [di  template  tidak  ada tulisan saran, eksplisit saja dalam kesimpulan]
Berdasarkan  hasil  dan  analisis  dari  penelitian  yang gtelah dilakukan, maka kesimpulan yang dapat diambil dari penelitian ini adalah :
1. System  rekomendasi  design  website  berhasil dibangun dengan menggunakan metode
Euclidean distance.
2. System  design  website  dapat  menghasilkan sebuah website berdasarkan inputan dari user.
Adapun  saran  yang  diberikan  untuk  perkembangan penelitian selanjutnya adalah :
1. Dataset  yang  digunakan  dalam  penelitian  ini kurang bervariasi sehingga dapat ditambahkan data baru yang lebih bervariasi.
2. Tampilan user  interface dapat  dilakukan pengeksplorasian  lebih  agar  tampilan  lebih menarik.
3. Data  uji  yang  digunakan  pada  penelitian  ini hanya  dikategorikan  menjadi  5  kategori menghasilkan  output  yang  kurang  bervariasi sehingga dapat ditambahkan data uji yang lebih banyak  agar  output  yang  dihasilkan  lebih beraneka ragam.

## Daftar Rujukan
[1] R.  Hidayat, Cara  Praktis  Membangun  Website Gratis . PT Elex Media Komputerindo, 2010.
[2] APJII,  “Laporan  Survei  Internet  APJII  2019  – 2020,” Asos.  Penyelenggara  Jasa  Internet Indones. , vol. 2020, pp. 1–146, 2020, [Online]. Available: https://apjii.or.id/survei.
[3] U.  Nazirah  and  S.  Utami,  “Pengaruh  Kualitas Desain  Website  Terhadap  Niat  Pembelian Dimediasi  Oleh Persepsi  Kualitas Produk Pada Lazada. Co. Id,” J. Ilm. Mhs. Ekon. Manaj. , vol.
Cahyani Ainun Awaliyah 1* , Agi Prasetyadi 2 , Apri Junaidi 3
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
Journal of DINDA ( Data Science, Information Technology, and Data Analytics ) Vol . 2 No. 2 (2022) 75 – 81
2,  no.  3,  pp.  55–69,  2018, [Online].  Available: http://seminar.bsi.ac.id/simnasiptek/index.php/s imnasiptek-2017/article/view/139.
[4] Saluky, Design  Web  Template  dengan  Artiser . CV. CONFIDENT, 2016.
[5] Salamun,  “Penerapan  Algoritma  Nearest Neighbor  dan  CBR  pada  Expert  System Penyimpangan  Perilaku  Seksual,” J.  Online Inform. ,  vol.  2,  no.  2,  pp.  63–70,  2017,  doi: 10.15575/join.v2i2.97.
[6] C. S. D. Prasetya, “Sistem Rekomendasi Pada E- Commerce
Menggunakan K-Nearest
Neighbor,” J.  Teknol.  Inf.  dan  Ilmu  Komput. , vol.  4,  no.  3,  p.  194,  Sep.  2017,  doi: 10.25126/jtiik.201743392.
[7] N.  Shodik,  N.  Neneng,  and  I.  Ahmad,  “Sistem Rekomendasi Pemilihan
Smartphone
Snapdragon 636 Menggunakan Metode Simple Multi  Attribute  Rating  Technique  (Smart),” J. Nas. Pendidik. Tek. Inform. , vol. 7, no. 3, p. 219,
2019, doi: 10.23887/janapati.v7i3.15727.
[8] Fadlil, Junaidillah, and Wayan Firdaus Mahmudy.  "Pembuatan  Sistem  Rekomendasi Menggunakan  Decision  Tree  dan  Clustering." Jurnal Ilmiah Kursor 3.1 (2007).
[9] Suwirmayanti,  Ni  Luh  Gede  Pivin.  "Penerapan Metode  K-Nearest  Neighbor  Untuk  Sistem Rekomendasi  Pemilihan  Mobil."  Techno.  Com 16.2, 120-131. 2017.
[10] Badriyah,  Tessy,  Ronny  Fernando,  and  Iwan Syarif.  "Sistem  Rekomendasi  Content  Based Filtering  Menggunakan  Algoritma  Apriori." Konferensi  Nasional  Sistem  Informasi  (KNSI) 2018.