## RANCANG BANGUN APLIKASI REKOMENDASI SMARTPHONE MENGGUNAKAN TEKNOLOGI RESPONSIVE WEB DESIGN DENGAN FRAMEWORK BOOTSTRAP
Farkhan Adfiansyah, Haris Yuana, Sabitul Kirom Program Studi Teknik Informatika, Universitas Islam Balitar farkhan.belajar@gmail.com

## ABSTRAK
Dengan pertumbuhan teknologi yang pesat, smartphone telah menjadi kebutuhan utama bagi setiap individu. Sebagai akibatnya, setiap merek smartphone menawarkan variasi fitur yang beragam. Permasalahan yang terjadi yaitu  pembeli l menja l di  bingung  da l la l m  memilih  smartphone  yang  semakin  beragam  dan  banyak  faktor  yang menjadi  pertimbangan  dalam  memilih smartphone terutama  pada  harga  dan  spesifikasinya.  Penelitian  ini bertujuan  untuk  mempermudah  calon  pembeli  dalam  memilih smartphone melalui  aplikasi  rekomendasi smartphone serta  bertujuan  untuk  mengimplementasikan  teknologi Responsive  Web  Design (RWD)  dengan menggunakan framework Bootstrap pada aplikasi, sehingga dapat memudahkan pembeli dalam mengakses dan memilih smartphone yang sesuai dengan kebutuhan mereka melalui berbagai perangkat. Metode Simple Additive Weighting (SAW) digunakan untuk menentukan peringkat smartphone berdasarkan kriteria seperti harga, ukuran layar,  versi  Android,  RAM,  memori  internal,  dan  resolusi  kamera.  Aplikasi  rekomendasi smartphone dikembangkan menggunakan metode pengembangan waterfall . Berdasarkan penelitian maka hasil yang diperoleh adalah  10  perancangan  sistem  menggunakan framework CSS  Bootstrap,  HTML,  PHP  dan  j avascript didalam aplikasi  rekomendasi smartphone yang  menampilkan  halaman home ,  rekomendasi smartphone ,  tentang, perankingan, login , dashboard admin, tambah smartphone , alternatif, kriteria dan hitung. Serta hasil pengujian black  box dan  validasi  sistem  menghasilkan  kategori  "Sangat  Layak"  dengan  presentase  keseluruhan  sebesar 88,5% dengan pengujian black box memperoleh presentase 95% dan validasi memperoleh presentase 82,42%.
Kata kunci: Bootstrap, Responsive Web Design, Rekomendasi Smartphone, Simple Additive Weighting, Waterfall

## 1. PENDAHULUAN
Denga l n  pertumbuha l n  teknologi  ya l ng  pesa l t, sma l rtphone tela l h menja l di kebutuha l n uta l ma l ba l gi setia l p individu.  Ha l l  ini  bertujua l n  untuk  mempermuda l h kegia l ta l n seha l ri-ha l ri. Seba l ga l i a l kiba l tnya l , setia l p  merek sma l rtphone mena l wa l rka l n  ba l nya l k va l ria l si denga l n  fitur ya l ng bera l ga l m. Ba l nya l k fa l ktor ya l ng ha l rus dipertimba l ngka l n sa l a l t membeli sma l rtphone , terma l suk harga da l n spesifika l si ya l ng sesua l i denga l n kebutuha l n. Peneliti membuat aplikasi rekomendasi smartphone karena bebebapa alasan, antara lain untuk membantu  merekomendasikan smartphone sesuai dengan kriteria yang diinginkan, dapat mempermudah pelanggan/customer  dalam  mengakses  aplikasi  web dari  berbagai  perangkat  karena  dengan  adanya teknologi responsive  web  design website  dapat menyesuaikan  ukuran  resolusi  tanpa  merubah  isi didalam website.
Responsive Web Design (RWD) a l da l la l h pendeka l ta l n  pengemba l nga l n  web  ya l ng  mencipta l ka l n peruba l ha l n  dina l mis  pa l da l ta l mpila l n  situs  web, berga l ntung pa l da l ukura l n da l n orienta l si la l ya l r pera l ngka l t ya l ng diguna l ka l n untuk  meliha l tnya l [1].  Ha l l  ini sa l nga l t penting  menginga l t  pera l ngka l t  ya l ng  diguna l ka l n  untuk menga l kses a l plika l si web sa l a l t ini sa l nga l t bera l ga l m, mula l i da l ri la l ya l r ya l ng kecil seperti ponsel hingga l la l ya l r ya l ng besa l r seperti desktop.
A l plika l si rekomenda l si sma l rtphone da l pa l t menyedia l ka l n informa l si mengena l i spesifika l si sma l rtphone terma l suk  fitur  da l n  ha l rga l .  Pembeli l da l pa l t
menentuka l n kriteria l ya l ng diinginka l n seperti harga/ budget ,  ukuran  layar,  versi  a l ndroid,  ka l pa l sita l s RA l M , kapasitas memori interna l l dan ukura l n ka l mera l . Kemudia l n  a l plika l si  a l ka l n  memberika l n  rekomenda l si sma l rtphone ya l ng sesua l i denga l n kriteria l tersebut.
Peneliti  memilih  lokasi  di  B2  Cell  karena masalah  pembeli/ customer yang  masih  mengalami kendala  dalam  memilih smartphone yang  sesuai dengan  kriteria  yang  diinginkan.  Pembeli l juga  ha l rus mema l stika l n  ba l hwa l pembelia l n  ya l ng  dila l kuka l n  tida l k merugika l n diri sendiri denga l n sa l la l h  membeli produk ya l ng  tida l k  sesua l i  denga l n  kebutuha l n.  Jadi  penulis melakukan  studi  kasus  di  B2  Cell  dan  memberikan solusi atas kendala tersebut dengan merancang aplikasi rekomendasi smartphone berbasis website untuk membantu dalam merekomendasikan smartphone.
B2 Cell merupakan sebuah usaha yang bergerak dalam  bidang perdagangan jual beli smartphone baru dan  bekas,  serta  beberapa  aksesoris smartphone. Bisnis  ini  didirikan  pada  tahun  2012  oleh  Pak Bambang  dan  pada  tahun  2017  pindah  ke  alamat  di Jalan  Raya  Sidodadi  RT.01/RW.05  Dusun  Sidodadi, Desa Kemloko, Kecamatan Garum, Kabupaten Blitar.
Untuk  mengatasi  permasalah  ini,  penulis melakukan  penelitian  dan  membangun  “Aplikasi Rekomendasi Smartphone Menggunakan  Teknologi Responsive Web Design Dengan Framework Bootstrap”. Aplikasi ini dirancang dengan memanfaatkan  metode  perhitungan Simple  Additive Weighting (SAW)  dika l rena l ka l n  memberika l n  nila l i
a l lterna l tif tertinggi da l n memberika l n ha l sil pera l ngkinga l n ya l ng terba l ik.
Metode Simple  Additive  Weighting (SAW) digunakan  untuk  menentukan  nilai  bobot  dari  setiap kriteria, yang kemudian dilakukan proses perangkingan untuk menentukan alternatif terbaik dari sejumlah alternatif terbaik lainnya [2].
Dalam proses pengembangan aplikasi ini, penulis menerapkan  metode  pengembangan  sistem  dengan pendekatan waterfall dalam System Development Life Cycle (SDLC)  untuk  memastikan  aplikasi  berfungsi dengan baik. Selain itu, penelitian ini juga melibatkan pengujian black  box untuk  memastikan  aplikasi berjalan  sesuai  yang  diharapkan  tanpa  adanya kesalahan atau bug yang berarti. Dengan dibangunnya aplikasi ini, diharapkan bisa membantu B2 Cell dalam merekomendasikan smartphone yang  tepat  kepada pelanggan dan untuk mengetahui bagaimana teknologi Responsive  Web  Design menggunakan framework Bootstrap dapat diterapkan dalam aplikasi rekomendasi smartphone .
2. TINJAUAN PUSTAKA
2.1. Rancang Bangun
Pera l nca l nga l n  sistem  a l ta l u  juga l disebut  ra l nca l ng ba l ngun merupa l ka l n sera l ngka l ia l n proses menerjema l hka l n  ha l sil  sebua l h sistem ke da l la l m  ba l ha l sa l pemrogra l ma l n,  tujua l nnya l ya l itu  untuk  menjela l ska l n seca l ra l rinci  ba l ga l ima l na l komponen-komponen  ya l ng a l da l diimplementa l sika l n [3].
2.2. Responsive Web Design
RWD (Responsive  Web  Design) merupa l ka l n sekumpula l n teknik ya l ng diguna l ka l n da l la l m mengemba l ngka l n sa l tu website tungga l l dima l na l website menyesua l ika l n  dirinya l pa l da l pera l ngka l t  ya l ng  berbeda l da l n  ma l mpu  membentuk  kemba l li interfa l ce sesua l i ukura l n  la l ya l r,  resolusi  da l n  orienta l si  da l ri  pera l ngka l t terbesa l r  seperti  televisi  pinta l r  untuk  menja l di  ya l ng terkecil seperti pera l ngka l t seluler pinta l r [4].
2.3. Framework Responsive Web Design framework adalah  sebutan  untuk  sebuah kerangka kerja yang digunakan para developer aplikasi atau software untuk  mempermudah  mereka  dalam membuat  maupun  mengembangkan  sebuah software atau  aplikasi  [5].  Salah  satu framework yang digunakan  dalam  penggunaan  teknologi responsive web design adalah framework Bootstrap. Bootstra l p a l da l la l h sebua l h libra l ry fra l mework CSS ya l ng dibua l t khusus untuk ba l gia l n pengemba l nga l n front- end  website . Bootstra l p juga l merupa l ka l n  sa l la l h  sa l tu fra l mework HTML,  CSS  da l n ja l va l script ya l ng  pa l ling populer  di  ka l la l nga l n web  developer ya l ng  diguna l ka l n untuk mengemba l ngka l n sebua l h website ya l ng responsive . Sehingga l ha l la l ma l n website na l ntinya l da l pa l t menyesua l ika l n  sesua l i  denga l n  ukura l n  monitor device (desktop,  ta l blet,  ponsel)  ya l ng  diguna l ka l n  disa l a l t menga l kses website-website da l ri browser [6].
2.4. Simple Additive Weighting metode  SA l W  a l da l la l h  metode  penjumla l ha l n terbobot.  Konsep  da l sa l r  da l ri  metode Simple  A l dditive Weighting a l da l la l h  menca l ri  pejumla l ha l n  terbobot  da l ri ra l ting kinerja l pa l da l setia l p a l lterna l tif pa l da l semua l a l tribut. Metode  SA l W  membutuhka l n  proses  norma l lisa l si ma l trik  keputusa l n  (X)  ke  ska l la l ya l ng  da l pa l t diperba l ndingka l n denga l n semua l ra l ting  a l lterna l tif  ya l ng a l da l .  Metode Simple  A l dditive  Weighting disa l ra l nka l n untuk  menyelesa l ika l n  ma l sa l la l h  penyeleksia l n  da l la l m sistem ya l ng memiliki ba l nya l k a l tribut [7].
𝑟 𝑖𝑗 = { 𝑥𝑖𝑗 𝑀𝑎𝑥 𝑥𝑖𝑗 𝐽𝑖𝑘𝑎 𝑗 𝑎𝑑𝑎𝑙𝑎ℎ 𝑎𝑡𝑟𝑖𝑏𝑢𝑡 𝑘𝑒𝑢𝑛𝑡𝑢𝑛𝑔𝑎𝑛 (𝑏𝑒𝑛𝑒𝑓𝑖𝑡)
𝑀𝑖𝑛 𝑥𝑖𝑗 𝑥𝑖𝑗 𝐽𝑖𝑘𝑎 𝑗 𝑎𝑑𝑎𝑙𝑎ℎ 𝑎𝑡𝑟𝑖𝑏𝑢𝑡 𝑏𝑖𝑎𝑦𝑎 (𝑐𝑜𝑠𝑡) (1) Keterangan: 𝑟 𝑖𝑗 = Rating kinerja tenormalisasi
𝑀𝑎𝑥 𝑖 = Nilai maksimum setiap baris dan kolom 𝑀𝑖𝑛 𝑖 = Nilai minimum dari setiap baris dan kolom 𝑋 𝑖𝑗 = Baris dan kolom dari matriks
𝐵𝑒𝑛𝑒𝑓𝑖𝑡 = Jika nilai terbesar adalah yang terbaik
Cost  = Jika nilai terkecil adalah terbaik Dima l na l 𝑟 𝑖𝑗 a l da l la l h  ra l ting  kinerja l ternorma l lisa l si da l ri  a l lterna l tif 𝐴𝑖 pa l da l a l tribut 𝐶𝑗 ;  i=1,2,…,m  da l n j=1,2,…,n. Nila l i preferensi untuk setia l p a l lterna l tif ( 𝑉𝑖 ) diberika l n seba l ga l i :
𝑉𝑖 =   ∑ 𝑤 𝑗 𝑟 𝑖𝑗 𝑛 𝑗=1 (𝟐) Ketera l nga l n: 𝑉 𝑖 = Ra l ngking untuk setia l p a l lterna l tif
𝑊 𝑗 = Nila l i bobot da l ri setia l p kriteria l 𝑟 𝑖𝑗 = Nila l i ra l ting kinerja l ternorma l lisa l si Nila l i 𝑉𝑖 ya l ng  lebih  besa l r  mengindika l sika l n ba l hwa l a l lterna l tif 𝐴𝑖 lebih terpilih.
2.5. Metode Waterfall Metode wa l terfa l ll a l ta l u  a l ir  terjun  a l da l la l h  model ya l ng  dikemba l ngka l n  untuk  pengemba l nga l n  pera l ngka l t luna l k.  Model  ini  berkemba l ng  seca l ra l sistema l tis  da l ri sa l tu ta l ha l p ke ta l ha l p la l in da l la l m mode seperti a l ir terjun. Model wa l terfa l ll ini  mengusulka l n  sua l tu  pendeka l ta l n kepa l da l pengemba l nga l n softwa l re ya l ng  sistema l tik  da l n sekuensia l l  mula l i  da l ri  tingka l t  kema l jua l n  sistem  pa l da l seluruh  a l na l lisis,  desa l in,  kode,  pengujia l n,  da l n pemeliha l ra l a l n  [8].  Berikut  terdapat  5  tahap  dalam metode pengembangan waterfall:
1) Requirement
2) Design
3) Implementation
4) Verification
5) Maintenance

## 2.6. PHP
PHP  adalah  singkatan  rekursif  untuk  "PHP: Hypertext  Preprocessor".  PHP  a l da l la l h  sua l tu  ba l ha l sa l denga l n  ha l k  cipta l terbuka l a l ta l u  ya l ng  juga l dikena l l denga l n open source ya l itu pengguna l da l ta l mengemba l ngka l n kode-kode fungsi sesua l i
kebutuha l nnya l [9]. PHP a l da l la l h ba l ha l sa l script sisi server ya l ng  dira l nca l ng  untuk  diguna l ka l n    da l la l m  a l plika l si berba l sis web [10].

## 2.7. Black Box Testing
Pengujian blackbox  testing merupakan  metode perancangan data uji yang didasarkan pada spesifikasi perangkat lunak.  Data uji dieksekusi pada perangkat lunak dan kemudian keluar dari perangkat lunak dicek apakah telah sesuai yang diharapkan [11].

## 3. METODE PENELITIAN

## 3.1. Tahap-Tahap Penelitian
Metode  pengembangan  yang  digunakan  dalam penelitian  ini  adalah  pengembangan  sistem  dengan pendekatan waterfall dalam System Development Life Cycle (SDLC).  Langkah-langkah  pengembangan sistem  mengikuti  tahapan  yang  ditunjukkan  pada gambar 1.
Gambar 1. Metode Waterfall
1. Requirement
Untuk  membuat  sebuah  aplikasi  diperlukan kebutuhan sistem. Kebutuhan sistem yang diperlukan dalam  pembuatan  aplikasi  ini  adalah  laptop  merek Asus  tipe  X450J  dengan processor Intel  Core  i7- 4700HQ, RAM 8GB, dan sistem operasi Windows 11 pro 64bit. Serta aplikasi software antara lain:
a) Microsoft  Office,  untuk  keperluan  penulisan dalam proses pengembangan sistem.
b) Adobe Photoshop, digunakan untuk keperluan mendesain layout aplikasi.
c) Visual  Studio  Code,  digunakan  sebagai  editor kode dalam membuat program.
d) Google  Chrome,  sebagai browser untuk mencari  referensi  dan  menyelesaikan  masalah coding.
e) XAMPP, sebagai plaltform untuk menjalankan server lokal dalam pengembangan sistem.
2. Design
Tahap ini adalah tahap desain perangkat lunak, di mana  akan  dilakukan  perancangan flowchart ,  DFD (Data  Flow  Diagram),  ERD  (Entity  Relationship Diagram).
a) Flowchart admin
Gambar 2. Flowchart Admin
b) Flowchart user
Gambar 3. Flowchart customer
c) ERD (Entity Relationship Diagram )
d) DFD ( Data Flow Diagram ) Gambar 5. DFD level 0
Gambar 6. DFD level 1
3. Implementation
Pada tahap ini akan dilakukan pengubahan desain dari fase-fase sebelumnya menjadi kode pemrograman yang  dapat  dieksekusi  oleh  komputer.  Menggunakan HTML,  PHP  ( Hypertext  Prepocessor ), JavaScript , framework CSS Bootstrap, dan JQuery. 4. Verification
Pada  tahap  ini,  sistem  dilakukan  verifikasi  dan pengujian  apakah  sistem  sepenuhnya  atau  sebagian memenuhi persyaratan sistem. Melalui pengujian, kita dapat mengidentifikasi dan memperbaiki bug, masalah kinerja,  atau  kelemahan  lainnya  yang  dapat mempengaruhi pengalaman pengguna.
5. Maintenence
Pemeliharaan  diperlukan  untuk  memastikan bahwa  aplikasi  tetap  berfungsi  dengan  baik  dan mengatasi  masalah  atau error kecil  yang  mungkin muncul setelah aplikasi digunakan secara aktif. Selain itu,  pemeliharaan  juga  mencakup  pengembangan lanjutan  untuk  meningkatkan  fitur-fitur  yang  ada dalam  aplikasi  atau  menambah  fitur  baru  sesuai dengan kebutuhan baru.
3.2. Kriteria Simple Additive Simple (SAW) Model metode SAW dalam prosesnya memerlukan kriteria sebagai dasar perhitungan dalam perangkingan.  Dalam  konteks  ini,  variabel  C diinisialisasi sebagai identitas untuk merepresentasikan  kriteria smartphone di  B2  CELL. Kriteria yang menjadi pertimbangan dalam rekomendasi smartphone seperti  yang  tercantum dalam tabel 1 dibawah ini:
Tabel  1 Keterangan Kriteria No Kriteria Keterangan Cost 1 C1 Harga Benefit 2 C2 Ukuran Layar Benefit 3 C3 Versi Android/ OS Benefit 4 C4 RAM Benefit 5 C5 Memori Internal Benefit 6 C6 Resolusi Kamera Cost
4. HASIL DAN PEMBAHASAN 4.1. Halaman Home
Gambar 7. Halaman home
Pada  gambar  7  menunjukkan  antar  muka halaman home . Halaman ini menampilkan penjelasan mengenai  apa  itu  aplikasi  rekomendasi smartphone serta  terdapat  tombol  navigasi  untuk  mengakses  ke beberapa halaman yang ada dalam aplikasi.
Gambar 8. Katalog smartphone
Pada  bagian  ini  terdapat  tampilan  koleksi smartphone  yang  berisi  tampilan  macam  jenis smartphone yang ada pada aplikasi web.
Gambar 9. Detail koleksi terbuka
Ketika  tombol  navigasi open  spesification di click maka  akan  menampilkan detail dari  spesifikasi smartphone tersebut (gambar 9).
4.2. Halaman Rekomendasi Smartphone
Pada  gambar  10  menunjukkan  antar  muka halaman  rekomendasi smartphone .  Pada  halaman  ini digunakan  oleh  pelanggan/ customer untuk  memulai proses  dari  rekomendasi.  Pengguna  dapat  memilih nilai bobot untuk setiap kriteria yang relevan. Terdapat penjelasan  singkat  mengenai  kriteria  yang  dipilih.
Selain  itu,  pengguna  akan  dihadapkan  pada  konsep Benefit dan Cost .  yang  akan  membantu  pengguna dalam  menilai  tingkat  kepentingan  dari  tiap  kriteria, apakah  kriteria  tersebut  memberikan  manfaat  positif atau memberikan biaya negatif.
Gambar 10. Halaman rekomendasi smartphone

## 4.3. Halaman Tentang
Gambar 11. Halaman tentang
Pada  gambar  11  menunjukkan  antar  muka halaman  tentang.  Menampilkan  informasi  mengenai B2  CELL,  meliputi  detail  lokasi  B2  CELL menggunakan  Google  Maps,  nomor  yang  bisa dihubungi,  alamat  detail  lokasi  serta  terdapat  daftar pertanyaan  umum  seputar  B2  CELL  beserta  dengan jawaban yang mungkin akan membantu customer/user dalam menggunakan aplikasi.

## 4.4. Halaman Perankingan

## Gambar 12. Halaman perankingan
Pada  gambar  12  menunjukkan  antar  muka halaman perankingan pada berbagai device . Menampilkan output dari  proses  perhitungan  yang telah dilakukan pada aplikasi. Terdapat container yang memuat  keterangan  nilai  bobot  yang  telah  dipilih
sebelumnya.  Serta  tombol  navigasi  yang  bisa digunakan  untuk  kembali  ke  halaman  rekomendasi atau melihat lebih detail dari perhitungan SAW.
Gambar 13. Hasil perankingan website
Hasil  perankingan  ditampilkan  dengan  memuat tampilan  gambar  lengkap  dengan  spesifikasinya  dari setiap smartphone dan  juga  menyertakan  hasil  skor dari  setiap smartphone yang  diperoleh  dari  hasil perhitungan SAW (gambar 13) . Hasil dari perangkingan  diurutkan  dari  nilai  skor  terbesar  ke yang terkecil.

## 4.5. Halaman Login
Gambar 14. Halaman login
Pada  gambar  14  menunjukkan  antarmuka halaman  login.  Fungsi  dari  halaman login ini  adalah memvalidasi  identitas  pengguna  dengan  memeriksa kombinasi username atau  email  dan password yang dimasukkan. Jika data yang dimasukkan sesuai, admin akan diarahkan ke dashboard .

## 4.6. Halaman Dashboard Admin
Gambar 15. Halaman dashboard admin
Pada gambar 15 menunjukan antarmuka halaman dashboard admin.  halaman dashboard admin  bisa diakses apabila sudah berhasil login . Pada halaman ini terdapat  kalimat  selamat  datang  serta  beberapa informasi  mengenai  cara  penggunaan  dari  beberapa menu-menu yang terdapat pada sistem admin.

## 4.7. Halaman Tambah Smartphone
Gambar 16. Halaman tambah smartphone
Pada gambar 16 menunjukan antarmuka halaman tambah smartphone .  Halaman  tambah smartphone digunakan  untuk  menambahkan  tipe smartphone dan brand  smartphone yang  belum  ada  dalam database . Admin  memiliki  kemampuan  untuk  menambahkan tipe smartphone baru  dan  menambahkan brand smartphone sebagai alternatif yang akan dipertimbangkan dalam rekomendasi.

## 4.8. Halaman Alternatif
Gambar 17. Halaman alternatif
Pada gambar 17 menunjukan antarmuka halaman alternatif.  Halaman  alternatif  digunakan  oleh  admin untuk  menambahkan  data  alternatif  yang  masih kosong.  Data  alternatif  pada  halaman  ini  berisi spesifikasi smartphone mulai  dari  harga  hingga  tipe processor .

## 4.9. Halaman Kriteria
Pada gambar 18 menunjukan antarmuka halaman kriteria.  Halaman  kriteria  akan  digunakan  untuk menentukan  bobot  nilai  dari  setiap  kriteria  sebelum dilakukannya  perhitungan  dalam  aplikasi.  Admin dapat memilih bobot untuk setiap kriteria dalam skala dari sangat rendah hingga sangat tinggi.
Gambar 18. Halaman kriteria

## 4.10. Halaman Hitung
Gambar 19. Halaman hitung
Pada gambar 19 menunjukan antarmuka halaman hitung.  Pada  halaman  hitung  berfungsi  untuk menampilkan output dari hasil perhitungan menggunakan metode  SAW  ( Simple  Additive Weighting ).  Terdapat  beberapa  tabel  yang  penting dalam proses perangkingan smartphone :
a. Tabel  "Nilai  Bobot  Kepentingan"  memuat  nilai bobot  untuk  setiap  kriteria  yang  telah  ditentukan sebelumnya.
b. Tabel "Hasil Matrix X" menampilkan nilai matriks X  dari  setiap  alternatif smartphone dan  kriteria yang telah dinormalisasi.
c. Tabel  "Normalisasi"  berisi  nilai  hasil  normalisasi dari  matriks  X.  Normalisasi  ini  bertujuan  untuk memastikan  bahwa  semua  data  memiliki  skala yang sama dan adil dalam proses perhitungan.
d. Tabel  "Nilai  Preferensi"  menampilkan  nilai preferensi  dari  setiap  alternatif smartphone .  Nilai preferensi dihitung berdasarkan bobot kepentingan dan nilai normalisasi dari masing-masing kriteria.
e. Tabel  "Perankingan"  menampilkan  peringkat  dari setiap alternatif smartphone yang sudah diurutkan dari nilai terbesar hingga terkecil.
Hasil  perankingan  ini  akan  menunjukkan alternatif smartphone mana  yang  memiliki  nilai tertinggi  dan merupakan  rekomendasi  terbaik berdasarkan  kriteria  yang  telah  ditentukan.  Hasil perangkingan  ini  adalah  hasil  final  dari  perhitungan SAW (gambar 20).

## Gambar 20. Hasil Perangkingan
4.11. Tampilan Responsive Web Design

## Gambar 21. Tampilan aplikasi rekomendasi
smartphone dalam berbagai perangkat
Hasil  dari  perancangan  aplikasi  rekomendasi smartphone yang  menerapkan  teknik responsive  web design diupload  dengan  alamat https://bit.ly/b2cell . Aplikasi  ini  dapat  diakses  menggunakan  berbagai macam  perangkat  mulai  dari computer sampai  pada perangkat  genggam  seperti smartphone dan  tablet. Tampilan  aplikasi  rekomendasi smartphone dalam berbagai  perangkat  seperti  yang  ditunjukkan  pada Gambar 21.

## 4.12. Pengujian Black Box
Hasil  keseluruhan  dari  presentase  hasil pengujian  dari  10  skenario  yang  diujikan  dapat dihitung menggunakan rumus dibawah ini:
𝑥 = 950% 10 × 100% = 95%
Jadi  hasil  presentase blackbox  testing secara keseluruhan adalah sebesar 95%.

## 4.13. Validator
Setelah dilakukan implementasi dan pengujian, berbagai tahap pengujian telah dilakukan dan hasilnya divalidasi oleh beberapa pihak. Pengujian melibatkan pihak validator, yang terdiri dari dosen, ahli IT, admin dan  pengguna  (user).  Validator  pertama  dari  ahli  IT yaitu Rizki Dwi Romadhona, S.ST., M.Tr.T. Validator kedua  dari  ahli  IT  yaitu  Youngky  Takisawa, S.Tr.Kom.  Validator  ketiga  adalah  pemilik  dari  B2 CELL  yaitu  pak  Bambang,  dan  Validator  keempat, kelima,  keenam  dari  pengguna  (user)  yaitu  Ahmad
Dwiki  Setiawan,  Ulfatul  Hani’ah,  Agus  Wahyu Utomo.  Hasil  kuesioner  yang  diperoleh  sebagai berikut:
Tabel  2. Hasil kuesioner No. Pertanyaan Penilaian SS S C K T 1. Bagaimana pendapat anda mengenai tampilan antar muka aplikasi rekomendasi smartphone ini? 2 4 - - - 2. Pendapat anda mengenai informasi yang ada pada aplikasi web ini? 1 3 2 - - 3. Pendapat anda mengenai penggunaan bahasa dan kata pada aplikasi web ini? - 6 - - - 4. Pendapat anda mengenai tampilan dashboard admin pada aplikasi web ini? 1 4 1 - - 5. Pendapat anda mengenai tampilan menu pada aplikasi web ini? 1 5 - - - 6. Pendapat anda tentang hasil output perankingan perhitungan saw? 5 1 - - - 7. Pendapat anda mengenai proses CRUD pada aplikasi web ini? 1 5 - - - 8. Informasi yang ditampilkan sudah sesuai dengan apa yang diinginkan? 1 5 - - - 9. Aplikasi sudah responsif dan dapat digunakan di berbagai device 3 3 - - - 10. Apakah aplikasi ini mudah digunakan? - 2 4 - - 11. Aplikasi ini dapat membantu merekomendasikan smartphone - 6 - - - JUMLAH 15 44 7 0 0
Tabel 1  merupakan  jumlah kategori untuk setiap pertanyaan,  yang  akan  digunakan  untuk  menghitung total keseluruhan  nilai kategori  yang telah diisi.  Total dari  tabel  di  atas  digunakan  dalam  proses  penilaian kelayakan aplikasi yang telah dikembangkan.
Tabel  3. Hasil tabulasi kuesioner
Nilai Penilaian Jumlah Penilaian Total (Skala × Jumlah) 5 15 75 4 44 176
Nilai Penilaian Jumlah Penilaian Total (Skala × Jumlah) 3 7 21 2 0 0 1 0 0 Total Skor 272 Skor Maksimum 330 Keterangan : 4 : Sangat Baik / 3 : Baik / 2 : Cukup / 1 : Kurang
𝑃𝑟𝑒𝑠𝑒𝑛𝑡𝑎𝑠𝑒 𝑠𝑘𝑜𝑟 𝑡𝑜𝑡𝑎𝑙 (%) = 272 330 × 100%
= 82,42%
Berdasarkan  Hasil  pengolahan  data  yang  telah dilakukan  dari  hasil  kuisioner,  maka  diperoleh  hasil perhitungan secara keseluruhan yaitu 82,42%.
Tabel  4. Standar kelayakan sistem No Presentasi Skor Interpretasi 1 0% - 20% Sangat Tidak Layak 2 21% - 40% Tidak Layak 3 41% - 60% Cukup Layak 4 61% - 80% Layak 5 81% - 100% Sangat Layak 𝑃𝑟𝑒𝑠𝑒𝑛𝑡𝑎𝑠𝑒  (%) = 𝑛𝑖𝑙𝑎𝑖 𝑦𝑎𝑛𝑔 𝑑𝑖𝑝𝑒𝑟𝑜𝑙𝑒ℎ 𝑛𝑖𝑙𝑎𝑖 𝑚𝑎𝑘𝑠𝑖𝑚𝑢𝑚 × 100% 𝑃𝑟𝑒𝑠𝑒𝑛𝑡𝑎𝑠𝑒  (%) = 95% + 82,42 200 × 100% 𝑃𝑟𝑒𝑠𝑒𝑛𝑡𝑎𝑠𝑒  (%) = 177,42 200 × 100%
𝑃𝑟𝑒𝑠𝑒𝑛𝑡𝑎𝑠𝑒  (%) = 88,5%
Hasil  perhitungan  persentase  kelayakan  sistem dari  keseluruhan  hasil  pengujian,  memperoleh persentase  88,5%  tersebut  dikategorikan  sebagai sistem yang “Sangat Layak”.

## 5. KESIMPULAN DAN SARAN
Dalam  penelitian  ini,  aplikasi  rekomendasi smartphone berhasil  membantu  pembeli/customer dalam memilih smartphone berdasarkan kriteria yang diinginkan. Sehingga pengguna mendapatkan spesifikasi  terbaik  sesuai  dengan  kriteria  yang diinginkan. Pada penerapan teknologi responsive web design pada  aplikasi  rekomendasi smartphone juga berhasil  diterapkan  pada  aplikasi,  menunjukkan performa yang baik dalam menyesuaikan diri dengan berbagai perangkat keras (gambar 21). Hasil pengujian pengujian  dari  aplikasi  rekomendasi  smartphone menggunakan black box untuk menilai fungsionalitas aplikasi, menunjukkan kinerja yang baik dengan nilai persentase  sebesar  95%.  Serta  hasil  pengujian kelayakan  ini  didukung  berdasarkan  hasil  pengujian dari  6  validator  melalui  kuesioner  yang  memperoleh hasil  82,42%.  Dengan  menggabungkan  semua  hasil pengujian,  sistem  ini  mencapai  tingkat  kelayakan sebesar 88,5%, sehingga dapat dikategorikan sebagai sistem yang “Sangat Layak”.

## DAFTAR PUSTAKA
[1]  N.  Ramsari  and  A.  Rifaldi,  “Rancang  Bangun aplikasi Penjadwalan Kegiatan Akademik Disertai  Sistem  Reminder  Berbasis  Responsive Web  Design,” Fiki ,  vol.  IX,  no.  1,  pp.  1–11, 2018.
[2]  F.  P.  Hutagaol,  Mesran,  and  J.  H.  Lubis, “Penerapan Metode Simple Additive Weighting (SAW)  dalam  Pemilihan  Handphone  Bekas,” Bull. Inf. Technol. , vol. 2, no. 2, pp. 63–68, 2021.
[3]  A.  Surahman,  A.  Tri  Prastowo,  and  L.  Ashari Aziz,  “Rancang  Alat  Keamanan  Sepeda  Motor Honda  Beat  Berbasis  Sim  Gsm  Menggunakan Metode  Rancang  Bangun,” J.  Univ.  Teknokr. Indones. , vol. 3, no. 1, pp. 17–24, 2022.
[4]  R.  Darnis  and  Y.  Handayani,  “Perancangan  E- Learning  Berbasis  Responsive  Web,” J.  Tek. Inform.  dan  Desain  Komun.  Vis.  Univ.  Selamat Sri , vol. 1, pp. 94–100, 2022.
[5]  B.  Suprayogi  and  A.  Rahmanesa,  “Penerapan Framework  Bootstrap  Dalam  Sistem  Informasi Pendidikan  Sma  Negeri  1  Pacet  Cianjur  Jawa Barat,” Tematik , vol. 6, no. 2, pp. 23–30, 2019, doi: 10.38204/tematik.v6i2.244.
[6]  A.  Sopian,  R.  Agustino,  and  A.  Wiyatno, “Perancangan  Aplikasi  Surat  Menggunakan Framework  Codeigniter  Dan  Bootstrap  Pada LPPM Universitas Mohammad Husni Thamrin,” J. Teknol. Inform. dan Komput. , vol. 6, no. 2, pp. 47–62, 2020, doi: 10.37012/jtik.v6i2.297.
[7]  Priatno,  W.  S.  Partawijaya,  and  M.  Ryansyah, “Pemilihan  Pegawai  Terbaik  Menggunakan Metode  Simple  Additive  Weighting  di  Asisten
Deputi Pengembangan Staf Aparatur
Kementerian  Pariwisata  Jakarta,” J.  Perspekt. , vol. 17, no. 2, pp. 119–125, 2019.
[8]  Y.  D.  Wijaya  and  M.  W.  Astuti,  “Sistem Informasi Penjualan Tiket Wisata Berbasis Web Menggunakan  Metode  Waterfall,” Semin.  Nas. Teknol. Inf. dan Komun. , pp. 273–276, 2019.
[9]  B. Erdani, F. D. Aditia, S. Rodiah, Ciptyasih, and I.  H.  Santi,  “Application  System  Dictionary  of PHP Programming Language Terms Using Brute Force Algorithm,” Multimed. Artif. Intell. , vol. 3, no.  1,  pp.  1–8,  2019,  [Online].  Available: https://jurnal.itats.ac.id/wp- content/uploads/2015/10/6.-Anita-T.- Kurniawati-Afrilyan-Ruli-Dwi- Rama_EDITED.pdf
[10]  W.  Widiyaningsih  and  M.  Lailasari,  “Rancang Bangun  Website  Pencucian  Dan  Perawatan Sepatu  Menggunakan  PHP  dan  Framework Codeigniter,” J. Nas. Teknol. Komput. , 2022.
[11]  A. Fahrezi, F. N. Salam, G. M. Ibrahim, and R. Rahman,  “Pengujian  Black  Box  Testing  pada Aplikasi Inventori Barang Berbasis Web di PT . AINO  Indonesia,” J.  Ilmu  Komput.  dan Pendidik. , vol. 1, no. 1, pp. 1–5, 2022.