## INFOTECH journal
ISSN : 2460-1861 (Print),  2615-4250 (Online) Vol. 9 No. 2, pp. 319-330

## PENGEMBANGAN FRONTEND E-COMMERCE BERBASIS MOBILE WEB PADA KOPERASI KIKA
Andrea Helena Angeline 1 , Safaruddin Hidayat Al-Ikhsan 2 , Hersanto Fajri 3
1,2,3 Teknik Informatika, Fakultas Teknik dan Sains, Universitas Ibn Khaldun Email: andreahelenaa93@gmail.com

## ABSTRACT
Access to e-commerce web-based product buying and selling for KIKA cooperatives is still not evenly distributed in the Ibn Khaldun University, Bogor, even though cooperatives KIKA previously had an e-commerce web, it’s just that the display on mobile web is still not optimal. Therefore we need a solution to make it aesier for all people who are in the Ibn Khaldun University environment Bogor to be able to order products easily and with a beautiful appearance better. The purpose of this research is to develop an e-commerce interface KIKA cooperative based on mobile web that is able to provide information and buy goods online. System development methodology used in this study is the Waterfall Method which consists of needs analysis, system design, coding and testing. Data used in making a mobile web-based e-commerce system is dara provided by a third party Bogor Ibn Khaldun University (KIKA) cooperative. This research was successful presents a better view of mobile web-based e-commerce that Previously owned bye the Bogor Ibn Khaldun University cooperative (KIKA) with the information it contains such as product categories, transactions ever done, about us, order detail and how to shop on e-commerce this mobile web-based commerce there is no login for admin because e-commerce this mobile web-based commerce can only be used by users.
Keywords: E-commerce, Cooperatives, UIKA, Waterfall, Mobilr web

## ABSTRAK
Akses  jual  beli  prodak  berbasis  web  e-commerce  terhadap  koperasi  KIKA  masih  belum  merata  di  lingkungan Universitas Ibn Khaldun Bogor, padahal koperasi KIKA sebelumnya sudah memiliki web e-commerce, hanya saja tampilan  pada  mobile  web masih  belum maksimal.  Oleh  sebab  itu  diperlukan  suatu  solusi  untuk  memudahkan semua kalangan yang berada di lingkungan Universitas Ibn Khaldun Bogor agar dapat memesan produk dengan mudah dan dengan tampilan yang lebih baik. Tujuan dari peneliatian ini mengembangkan tampilan e-commerce koperasi  KIKA  berbasis  mobile  web  yang  mampu  memberikan  informasi  serta  membeli  barang  secara  online. Metodologi pengembangan sistem yang digunakan dalam penelitian ini adalah Metode Waterfall yang terdiri dari analisis kebutuhan, desain sistem, pengkodean dan pengujian. Data yang digunakan dalam pembuatan sistem e- commerce berbasis mobile web adalah data yang diberikan oleh pihak koperasi Universitas Ibn Khaldun Bogor (KIKA). Penelitian ini berhasil menyajikan tampilan yang lebih baik dari e-commerce berbasis mobile web yang sebelumnya pernah dimiliki oleh koperasi Universitas Ibn Khaldun Bogor (KIKA) dengan informasi yang ada di dalamnya  seperti  kategori  produk,  transaksi  yang  pernah  dilakukan,  tentang  kami,  detail  pemesanan  dan  cara belanja  pada  e-commerce  berbasisi  mobile  web  ini  tidak  ada  login  untuk  admin  karena  e-commerce  berbasis mobile web ini hanya bisa digunakan oleh pengguna saja.
Kata Kunci: E-commerce, Koperasi, UIKA, Waterfall, Mobile web
Riwayat Artikel  : Tanggal diterima  : 25-06-2023
Tanggal revisi : 03-07-2023
Tanggal terbit : 04-07-2023
DOI :
https://doi.org/10.31949/infotech.v9i2.5840
INFOTECH journal by Informatika UNMA is licensed under CC BY-SA 4.0
Copyright © 2023 By Author
1. PENDAHULUAN
1.1. Latar Belakang
Internet telah menjadi bagian dari kehidupan saat ini. Bahkan menjadi kebutuhan penting bagi sebagian orang. Salah satu peran internet adalah bidang bisnis. E-commerce adalah pengembangan dari transaksi jual beli yang biasanya dilakukan secara konvensional yaitu pembeli datang ke penjual untuk membeli apa yang dibutuhkan. Dengan perkembangan internet saat ini, pembeli dimanjakan dengan sebuah website yang menampilkan produk-produk yang dijual sehingga pembeli bebas memilih produk tanpa harus datang ke penjualnya terlebih dahulu. Dengan adanya electronic commerce (e-commerce), transaksi jual beli pun semakin mudah dimana penjual dan pembeli di tempat yang berbeda akan saling terhubung untuk melakukan transaksi. Calon pembeli dapat mengetahui info produk yang dipasarkan melalui website. Hal tersebut tentunya akan sangat membantu pembeli dalam melakukan pembelian (Prabowo, 2015 : 23). Website merupakan salah satu jenis layanan/fasilitas yang disediakan oleh internet yang paling banyak digunakan disamping layanan- layanan yang lainnya. Kelebihan website dibandingkan dengan fasilitas internet yang lainnya adalah karena website mampu menyajikan informasi berupa teks, gambar, suara ataupun video yang interaktif, Website merupakan sarana untuk mengenalkan perusahaan dan produknya kepada masyarakat secara lebih detil, baik menyangkut struktur organisasi, visi dan misi yang ingin dicapai, sejarah dan latar belakang perusahaan, jenis jasa atau produk yang ditawarkan, lowongan pekerjaan dan informasi lainnya yang berhubungan dengan perusahaan atau produknya (Soejono, Setyanto & Sofyan, 2018 : 30).
Menurut Triton dalam Huda & Priyatna (2019 : 83) mengatakan, “e-commerce adalah perdagangan elektronik dimana bentuk transaksi perdagangan baik membeli maupun menjual dilakukan melalui elektronik pada jaringan internet”. Sedangkan menurut Siregar (2010) dalam Irmawati (2011 : 97), “e-commerce adalah proses pembelian, penjualan atau pertukaran produk, jasa dan informasi melalui jaringan komputer”.
Koperasi mempunyai peran yang cukup besar dalam menyusun usaha bersama dari orang-orang yang mempunyai kemampuan ekonomi terbatas. Dalam rangka usaha untuk memajukan kedudukan rakyat yang memiliki kemampuan ekonomi terbatas tersebut (Oktaviani, Sarkawi & Priadi 2018 : 9). Koperasi di era revolusi industri ke-4 sudah seharusnya beradaptasi dan mampu bertransformasi untuk menghadapi lingkungan yang dinamis. Langkah awal yang diperlukan dalam transformasi koperasi ialah membangun karakter kreatif dan inovatif bagi insan penggerak koperasi tersebut (Dwipradnyana, Pratiwi & Diatmika, 2020 : 112) Salah satu koperasi yang memanfaatkan perkembangan teknologi serta jaringan internet adalah koperasi Universitas Ibn Khaldun (KIKA).
KIKA adalah sebuah koperasi yang bergerak di bidang penjualan kebutuhan sehari-hari dan berdiri sejak tahun 1980 namun baru aktif kembali padatahun 2015. Pendiri sekaligus pemilik koperasi KIKA ini adalah para anggota koperasi yang terdiri dari semua karyawan dan dosen yang ada di lingkungan Universitas Ibn Khaldun Bogor. Sejak tahun 2015 hingga sekarang proses transaksi yang digunakan adalah transaksi manual, jika pelanggan ingin membeli suatu barang maka pelanggan harus mendatangi koperasi KIKA secara langsung, proses promosi koperasi ini juga dilakukan hanya dengan memanfaatkan kekuatan word of mouth atau yang biasa disebut dengan promosi dari mulut ke mulut. Namun sebelumnya KIKA sudah memiliki website e-commerce hanya saja website yang di miliki oleh KIKA belum dapat operasikan secara maksimal
1.2. Tinjuan Pustaka

## 1. Website
Menurut  Arief  dalam  Nofyat,  Ibrahim  &  Ambarita (2018  :  12)  Pengertian Website adalah  ”kumpulan dari  halaman web yang  sudah  dipublikasikan  di jaringan  internet  dan  memiliki  domain/URL ( Uniform  Resource  Locator )  yang  dapat  diakses semua  pengguna  internet  dengan  cara  mengetikan alamatnya.  Hal  ini  dimungkinkan  dengan  adanya teknologi World  Wide  Web (WWW)  Halaman website  biasanya  berupa  dokumen  yang  ditulis dalam  format Hyper  Text  Markup  Language (HTML), yang bisa diakses melalui HTTP, HTTPS adalah suatu protokol yang menyampaikan berbagai informasi  dari  server website untuk  ditampilkan kepada para user atau pemakai melalui web browser
2. E-Commerce
Menurut  Sarwono  dalam  Hermiati,  Asnawati  & kanedi  (2021  :  54) E-Commerce adalah  proses membeli  dan  menjual  atau  tukar  menukar  produk, jasa  dan  informasi  melalui  komputer.  Dalam E- Commerce terjadi  proses  pembelian  dan  penjualan jasa  atau  produk  antara  dua  belah  pihak  melalui Internet  atau  pertukaran  dan  distribusi  informasi antara  dua  pihak  didalam  satu  perusahaan  dengan menggunakan  Internet.  Menurut  Turban  dalam Hermiati,  Asnawati  &  kanedi  (2021  :  54 )  E- commerce adalah  penggunaan  internet  dan  web untuk  transaksi  bisnis  atau  transaksi  perdagangan yang  dimungkinkan  secara  digital  antar  organisasi dengan  organisasi  atau  antar  individu.  Dari pengertian para ahli di atas, maka dapat disimpulkan bahwa E-commerce adalah suatu  kegiatan membeli atau menjual secara electronik yang dilakukan pada jaringan  internet. E-commerce terlihat  lebih  nyata, dengan adanya kebutuhan penjual dan pembeli untuk melakukan transaksi.
3. Koperasi
Definisi koperasi mengalami perkembangan sejalan dengan  perubahan  zaman.  Definisi  dini  umumnya menekankan  bahwa  koperasi  adalah  wadah  bagi golongan  ekonomi  lemah,  seperti  definisi  yang
diberikan  oleh  Dr.  Fay  (1908),  yang  menyatakan bahwa  koperasi  adalah  suatu  perserikatan  dengan tujuan  berusaha  selalu  dengan  semangat  tidak memikirkan  diri  sendiri  sedemikian  rupa,  sehingga masingmasing  sanggup  menjalankna  kewajibannya sebagai  anggota  dan  mendapat  imbalan  sebanding dengan pemanfaatan mereka terhadap organisasi. Di samping  menunjukkan  adanya  unsur  ―untuk golongan ekonomi lemah‖, definisi dari Dr. Fay juga mengandung unsur-unsur kerja sama, tidak mementingkan kepentingan diri  sendiri  dan adanya unsur demokrasi, yang dapat dilihat dari pernyataan bahwa imbalan jasa kepada anggota diberikan sesuai dengan  jasa-jasa  atau  partisipasi  anggota  dalam perkumpulan (Isa & Hartawan, 2017 : 40).

## 4. PHP
Menurut  tim  EMS  dalam  Hermiati,  Asnawati  & kanedi  (2021  :  55)  PHP  adalah  bahasa  pelengkap HTML  yang  memungkinkan  dibuatnya  aplikasi dinamis  yang  memungkinkan  adanya  pengolahan data  dan  pemrosesan  data.  Semua  sintax  yang diberikan  akan  sepenuhnya  dijalankan  pada  server sedangkan  yang  dikirimkan  ke browser hanya hasilnya  saja.  Kemudian  merupakan  bahasa berbentuk script yang ditempatkan dalam server dan diproses  di  server.  Hasilnya  akan  dikirimkan  ke client , tempat pemakai menggunakan browser . PHP dikenal  sebagai  sebuah  bahasa scripting ,  yang menyatu  dengan  tag-tag  HTML,  dieksekusi  di server, dan digunakan untuk membuat halaman web yang  dinamis  seperti  halnya Active  Server  Pages (ASP)  atau Java  Server  Pages (JSP).  PHP merupakan sebuah software Open Source .
5. UI/UX
Menurut  tim  EMS  dalam  Hermiati,  Asnawati  & kanedi  (2021  :  55)  PHP  adalah  bahasa  pelengkap HTML  yang  memungkinkan  dibuatnya  aplikasi dinamis  yang  memungkinkan  adanya  pengolahan data  dan  pemrosesan  data.  Semua  sintax  yang diberikan  akan  sepenuhnya  dijalankan  pada  server sedangkan  yang  dikirimkan  ke browser hanya hasilnya  saja.  Kemudian  merupakan  bahasa berbentuk script yang ditempatkan dalam server dan diproses  di  server.  Hasilnya  akan  dikirimkan  ke client , tempat pemakai menggunakan browser . PHP dikenal  sebagai  sebuah  bahasa scripting ,  yang menyatu  dengan  tag-tag  HTML,  dieksekusi  di server, dan digunakan untuk membuat halaman web yang  dinamis  seperti  halnya Active  Server  Pages (ASP)  atau Java  Server  Pages (JSP).  PHP merupakan sebuah software Open Source .
5.1 UI
User  Interface (UI)  UI atau User  Interface adalah ilmu tentang tata letak grafis suatu web atau aplikasi. Cakupan  UI  adalah  tombol  yang  akan  diklik  oleh pengguna, teks, gambar, text entry fields , dan semua item yang berinteraksi dengan pengguna. Termasuk layout, animasi, transisi, dan semua interaksi  kecil. UI  mendesain  semua  elemen  visual,  bagaimana pengguna berinteraksi dengan halaman web dan apa
yang  ditampilkan  di  halaman  web.  Elemen  visual yang  ditangani  oleh  seorang  desainer  UI  adalah skema  warna,  menentukan  bentuk  tombol,  serta menentukan  jenis  font  yang  digunakan  untuk  teks. Desainer  UI  harus  bisa  membuat  tampilan  bagus yang akan meningkatkan kesetiaan pengguna.

## 5.2 UX
User  Experience  (UX) Definisi UX atau user experience menurut  Borrys  Hasian  ada  bermacam- macam. Berdasarkan apa yang dikerjakan, desainer UX  adalah  orang  yang  membuat  produk  yang bermanfaat  dan  memvisualisasi user  flow menjadi desain  produk  yang  teruji  dan  indah.  Desainer  UX akan  bekerja  sama  dengan  tim-tim  lain  untuk mencari  titik  temu  antara  kebutuhan  pengguna, tujuan  bisnis  dan  kemajuan  teknologi.  Titik  temu tersebut  kemudian  dijadikan  sebuah  produk  yang bermakna,  berguna,  dan  menyenangkan.  Seperti namanya, desain yang dibuat oleh desainer UX akan menentukan  mudah  atau  sulitnya user  experience atau interaksi dengan web. Membuat wireframe atau mendesain  mockup  adalah  salah  satu  kemampuan dasar yang harus dimiliki oleh seorang desainer UX.
6. Laravel
Laravel  adalah sebuah framework PHP  yang dirilis di  bawah  lisensi  MIT,  dibangun  dengan  konsep MVC  ( model  view  controller ).  Laravel  adalah pengembangan  website  berbasis  MVP  yang  ditulis dalam  PHP  yang  dirancang  untuk  meningkatkan kualitas  perangkat  lunak  dengan  mengurangi  biaya pengembangan  awal  dan  biaya  pemeliharaan,  dan untuk  meningkatkan  pengalaman  bekerja  dengan aplikasi dengan menyediakan sintaks yang ekspresif, jelas dan menghemat waktu (Hermanto, Yusman & Nagara, 2019 : 19)

## 7. MODEL WATERFALL
Model waterfall atau yang biasa disebut siklus hidup klasik atau model air terjun, model sekuensial linier menyarankan  pendekatan  sistematis  dan  berurutan untuk pengembangan perangkat lunak yang dimulai padatingkat sistem dan berkembang melalui analisis, desain,  pengkodean,  pengujian,  dan  dukungan. mengilustrasikan  model  sekuensial  linier  untuk rekayasa  perangkat  lunak.  (Pressman,  2001).  Alur Alur model waterfall akan ditampilkan pada Gambar
1.
Gambar 1. Contoh Model Waterfall

## 8. UML
Unified Modelling Language (UML) adalah sebuah “bahasa” yang telah menjadi standar dalam industri untuk visualisasi merancang dan
mendokumentasikan  sistem  piranti  lunak.  UML menawarkan sebuah standar untuk merancang model sebuah  sistem.  Dengan  menggunakan  UML  dapat dibuat  model  untuk  semua  jenis  aplikasi  piranti lunak, dimana aplikasi  tersebut dapat  berjalan pada piranti  keras,  sistem  operasi  dan  jaringan  apapun, serta  ditulis  dalam  bahasa  pemrograman  apapun. Tetapi  karena  UML  juga  menggunakan  class  dan operation dalam konsep dasarnya, maka lebih cocok untuk  penulisan  piranti  lunak  dalam  bahasa berorientasi objek seperti C++, Java, atau VB. NET. (Sulistyorini, 2009 : 23-24).

## 9. Use Case Diagram
Use  case diagram  menggambarkan  fungsionalitas yang  diharapkan  dari  sebuah  sistem.  Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana”. Sebuah use case merepresentasikan  sebuah  interaksi  antara  aktor dengan  sistem .  Use  case merupakan  sebuah pekerjaan tertentu, misalnya login ke sistem, meng- create sebuah  daftar  belanja,  dan  sebagainya. Seorang/sebuah aktor adalah sebuah entitas manusia atau  mesin  yang  berinteraksi  dengan  sistem  untuk melakukan pekerjaan-pekerjaan tertentu
(Dharwiyanti & Wahono, 2003 : 4). Contoh use case diagram ditampilkan pada Gambar 2.
Gambar 2. Contoh Use Case Diagram

## 10. Activity Diagram
Activity diagrams  menggambarkan  berbagai  alir aktivitas  dalam  sistem  yang  sedang  dirancang, bagaimana  masing-masing  alir  berawal,  decision yang  mungkin  terjadi,  dan  bagaimana  mereka berakhir. Activity diagram juga dapat menggambarkan  proses  paralel  yang  mungkin terjadi  pada  beberapa  eksekusi. (Dharwiyanti  &
Wahono,  2003  :  7).  Contoh  activity  diagram ditampilkan pada Gambar 3.
Gambar 3. Contoh Activity Diagram
11. Class Diagram
Class adalah  sebuah  spesifikasi  yang  jika diinstansiasi  akan  menghasilkan  sebuah  objek  dan merupakan  inti  dari  pengembangan  dan  desain berorientasi  objek. Class menggambarkan  keadaan (atribut/properti) suatu sistem, sekaligus menawarkan  layanan  untuk  memanipulasi  keadaan tersebut (metoda/fungsi). Class diagram menggambarkan  struktur  dan  deskripsi  class, package dan objek beserta hubungan satu sama lain seperti  containment,  pewarisan,  asosiasi,  dan  lain- lain.  (Dharwiyanti  &  Wahono,  2003  :  5).  Contoh class diagram ditampilkan pada Gambar 4.
Gambar 4. Contoh Class Diagram

## 12. Sequence Diagram
Sequence  diagram  menggambarkan  interaksi  antar objek  di  dalam  dan  di  sekitar  sistem  (termasuk pengguna, display, dan sebagainya) berupa message yang  digambarkan  terhadap  waktu.  Sequence diagram  terdiri  atar  dimensi  vertikal  (waktu)  dan dimensi  horizontal  (objek-objek  yang  terkait). Sequence diagram biasa digunakan untuk menggambarkan  skenario  atau  rangkaian  langkah- langkah yang dilakukan sebagai respons dari sebuah event  untuk  menghasilkan  output  tertentu.  Diawali dari  apa yang men-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan  output  apa  yang  dihasilkan.  (Dharwiyanti  &
Wahono,  2003  :  8).  Contoh sequence  diagram ditampilkan pada Gambar 5
Gambar 5. Contoh Sequence Diagram
13. Component Diagram
Component  diagram menggambarkan  struktur  dan hubungan  antar  komponen  piranti  lunak,  termasuk ketergantungan (dependency) di antaranya,
Komponen  piranti  lunak  adalah  modul  berisi  code, baik  berisi  source  code  maupun  binary  code,  baik library maupun executable, baik yang muncul pada compile time, link time , maupun run time. Umumnya komponen  terbentuk  dari  beberapa class dan/atau package, tapi  dapat  juga dari komponen-komponen yang  lebih  kecil.  Komponen  dapat  juga  berupa interface ,  yaitu  kumpulan  layanan  yang  disediakan sebuah komponen untuk komponen lain. (Dharwiyanti  &  Wahono,  2003  :  9-10).  Contoh sequence diagram ditampilkan pada Gambar 6.
Gambar 6. Contoh Component Diagram

## 1.3. Metodologi Penelitian
Tahapan  Penelitian  yang  dilakukan  dapat  dilihat pada Gambar 7.
Mulai Pengumpulan Data Data Primer Dan Data Sekunder Kelembagaan Koperasi UIKA (KIKA) Analisis Kebutuhan Perancangan Sistem Implementasi Pengujian Sistem Bekerja Sesuai Dengan Fungsinya? Ya Keluaran Sistem Selesai Tidak Gambar 7. Metode Penelitian

## 1. Pengumpulan Data
Proses  pengumpulan  data  merupakan  tahap  yang dilakukan untuk memperoleh data terkait kebutuhan dari penelitian ini. Tahapan tersebut dibagi menjadi dua bagian diantaranya :

## a. Pengumpulan Data primer
Data  primer  merupakan  data  yang  diperoleh langsung  dari  responden  yang  menjadi  sasaran penelitian  (Khurun,  2019  :  5)  Teknik  yang digunakan  untuk  mengumpulkan  informasi  adalah dengan observasi dan diperoleh data terkait koperasi Universitas Ibn Khaldun Bogor (KIKA) yang berisi data kumpulan-kumpulan produk yang di jual yang kemudian data tersebut akan menjadi mobile web e- commerce.
b. Pengumpulan Data Sekunder
Data Sekunder adalah data yang diperoleh selain dari objek  penelitian  dari  berbagai  sumber  dengan  cara studi  literatur  dan  studi  dokumentasi  terkait hubungannya  dengan  perancangan mobile  web E- commerce dari  berbagai  sumber,  seperti  jurnal, e- book, laporan dan lain-lain.
2. Analisis Arsitektur Sistem
Arsitektur  sistem  dibuat  dengan  tujuan  untuk menggambarkan  hubungan  antar  komponen  yang dibutuhkan pada pengembangan website e-
commerce. Komponen-komponen  yang  ada  pada sistem  arsitektur  tersebut  antara  lain  yaitu User , Website  E-commerce ,  internet  dan database yang digunakan untuk perancangan user interface.
User Response Request Database Website E-commerce Response Request Internet Request Response Gambar 8. Analisis Arsitektur Sistem Koperasi

## KIKA

## 3. Analisis Sistem yang Berjalan
Analisis sistem yang berjalan merupakan gambaran mengenai sistem sebelumnya. Pada sistem sebelumnya tampilan pada mobile web masih belum maksimal,  mulai  dari  penempatan  produk,  kategori produk,  gambar  pada  produk  dan  lainnya.  Hasil analisis terkait sistem yang berjalan ini dapat dilihat pada  Lampiran  2  terkait  hasil  wawancara,  Analisis sistem  yang  berjalan  yaitu  proses  bisnis  Sistem mobile  web  e-commerce KIKA  yang  ditunjukan pada Gambar 9.
Proses Bisnis yang berjalan
Pengguna Sistem Mulai Login Database Menampilkan Beranda Melihat Halaman Kategori, Keranjang, Cari Belanjaan footer, dan logout Melihat Produk, checkout dan Datail Produk Selesai
Gambar 9. Analisis Sistem yang Berjalan

## 4. Analisis Sistem yang diusulkan
Analisis sistem yang diusulkan merupakan gambaran  mengenai  sistem  baru  yang  akan  dibuat. Analisis  sistem  yang  diusulkan  berguna  agar perancangan  sistem  dapat  terarah  kepada  fungsi- fungsi  utama.  Analisis  sistem  yang  diusulkan  yaitu proses bisnis Sistem mobile web e-commerce KIKA yang ditunjukan pada Gambar 10.
Proses Bisnis yang diusulkan
Pengguna Sistem Mulai Login Database Menampilkan Beranda Melihat Halaman Kategori, Produk Terbaru, Keranjang, Cari Belanjaan dan Tengang Kami Menampilkan
Transaksi Melihat Halaman Belanja dan Riwayat Transaksi Menampilkan Belanja Melihat Kategori, menu Produk, Keranjang, dan Cari Belanjaan Melihat Produk, checkout dan Datail Produk Melihat Halaman Detail Transaksi Menampilkan Profil Melihat Halaman Edit Profil, List Transaksi, Ubah Password dan logout Melihat Produk, checkout dan Datail Produk Selesai Melihat Konfirmasi Pesanan Melihat Konfirmasi Pesanan

## 5. Perancangan Sistem
Use Case Diagram Use Case Diagram merupakan Teknik gembaran grafis fungsional yang digunakan untuk mempresentasikan  hubungan  antara  pengguna sistem dan fungsi-fungsinya. Use Case Diagram secara umum pada sistem ini dapat  dilihat pada gambar 11.
Melihat halaman Beranda Melihat Halaman Kategori Pengguna Melihat Halaman Belanja Login Logout Melihat Halaman Transaksi Melihat Halaman Profil Melihat Menu produk Terbaru Melihat Halaman Keranjang Melihat Menu cari Belanjaan Melihat Halaman Tentang Kami Melihat Halaman Pesanan Melihat Halaman Riwayat Transaksi Melihat Halaman Detail Transaksi Melihat Halaman Kategori Melihat Menu produk Melihat Halaman Keranjang Melihat Menu cari Belanjaan Melihat Halaman Edit Profil dan Ganti Password Melihat Halaman List Transaksi Melihat Halaman Detail Transaksi Melihat Halaman Pesanan Melihat Halaman Riwayat Transaksi Melihat Halaman Cara Belanja Melihat Halaman Checkout Melihat Halaman Checkout Melihat Halaman Detail Produk Melihat Halaman Detail Produk Daftar <<include>> <<include>> <<include>> <<include>> Gambar 11. Use Case Diagram

## 2. PEMBAHASAN
Implementasi  sistem  merupakan  penerapan  dari desain  sistem  yang  telah  dilakukan.  Implementasi sistem  dari  pengembangan frontend  e-commerce berbasis mobile web koperasi KIKA adalah sebagai berikut:
2.1 Login
Pada halaman ini menampilkan form login, Halaman ini  bisa  di  akses  oleh  pengguna  untuk  masuk kedalam  sistem.  Hal  perta,a  yang  akan  dilakukan Ketika melakukan aktivitas login adalah memasukan username dan password yang  telah  dibuat sebelumnya. Adapun tampilan dari login Website E- commerce Koperasi Universitas Ibn Khaldun Bogor (KIKA) Halaman login ditunukan pada Gambar 12.
Gambar 12. Halaman Login

## 2.2 Halaman Beranda
Halaman  Beranda merupakan  halaman  utama  dari Website  E-commerce Koperasi  Universitas  Ibn Khaldun  Bogor  (KIKA).  Dalam  tampilan Home menampilkan  informasi  serta  data  atau  jumlah produk  yang  tersedia  yang  ada  di  koperasi  KIKA. Halaman Beranda ditunjukan pada Gambar 13.

## Gambar 13. Halaman Beranda

## 2.3 Halaman Transaksi
Halaman  transaksi  merupakan  halaman  yang menunjukan  aktivitas  transaksi  yang  telah  di selesaikan oleh pengguna dalam pembelian produk. Halaman transaksi ditunjukan pada Gambar 14.

## Gambar 14. Halaman Transaksi

## 2.4 Halaman Belanja
Halaman  Belanja  merupakan  halaman  yang menunjukan  semua  produk  yang  tersedia  pada koperasi  KIKA.  Halaman  belanja  ditunjukan  pada Gambar 15.

## Gambar 15. Halaman Belanja
2.5 Halaman Proil
Halaman  akun  ini  menunjukan  informasi  dan  data terkait pengguna, terdapat beberapa halaman lainnya
seperti  transaksi,  notifikasi,  kontak  penjual  dan keluar, halaman akun ditunjukan pada Gambar 16.

## Gambar 16. Halaman Profil

## 2.6 Halaman Keranjang
Halaman  keranjang  untuk  pengguna  yang  telah memasukan  produk  yang  akan  dibeli.  Halaman keranjang ditunjukan pada Gambar 17.

## Gambar 17. Halaman Keranjang

## 2.7 Halaman Checkout
Halaman Checkout ini merupakan halaman yang di buat jika pengguna akan membeli produk yang tersedia pada koperasi KIKA dan pada halaman ini pengguna harus mengisi data untuk pengiriman produk seperti pilih pengiriman, pilih pembayaran, nama penerima, telpon penerima dan alamat penerima. Halaman checkout ditunjukan pada Gambar 18.
Gambar 18. Halaman Checkout

## 2.8 Halaman Tentang Kami
Halaman tentang kami ini merupakan halaman yang dibuat  jika  ada  pengguna  yang  ingin  mengetahui informasi  terkait  koperasi  KIKA,  pada  halaman  ini berisikan  informasi  seperti  alamat  koperasi  KIKA
UIKA,  nomor WhatsApp KIKA,  alamat  email KIKA,  akun facebook KIKA,  akun twitter KIKA, akun instagram KIKA  dan  tampilan  alamat  di google  maps. Halaman  tentang  kami  ditunjukan pada Gambar 19.

## Gambar 19. Halaman Tentang Kami

## 2.9 Pengujian Sistem
Pengujian  sistem  dimaksudkan  untuk  pengujian tahapan  terhadap  sistem  yang  telah  dibangun. Pengujian yang dilakukan yaitu pengujian Blackbox . Pengujian Blackbox dilakukan  dengan  pengujian validasi  hasil  yang  dikeluarkan  oleh  sistem  saat suatu perintah diberikan terhadap sistem. Pengujian Blackbox terhadap aplikasi mobile web e-commerce KIKA ditunjukkan pada Tabel 1.
Tabel 1. Pengujian Sistem Modul Skenario Hasil Login Uji  coba login dan pengaturan hak akses terhadap pengguna Pengecekan Login berhasil dilakukan  tanpa ada bug  error Peserta  hak  akses User berjalan sesuai. Beranda Uji coba fungsi view, beranda, dapat melihat halaman beranda, kategori produk produk terbaru keranjang belanjaandan tentang kami Fungsi view , halaman  beranda berjalan  dengan baik  serta  dapat ditampilkan tanpa ada bug error . Transaksi Uji Coba view, transaksi, dapat melihat halaman pesanan dan riwayat Fungsi view , halaman transaksi berjalan  dengan baik  serta  dapat ditampilkan tanpa ada bug error . Belanja Uji coba view, belanja, dapat melihat kategori produk, produk dan keranjang belanjaan Fungsi view, halaman  belanja dengan  baik  serta dapat ditampilkan tanpa  ada bug error. Modul Skenario Hasil Profil Uji coba view, profil, dapat melihat edit  profil,  ganti password, list transaksi, cara belanja dan logout Fungsi view, halaman profil dengan  baik  serta dapat ditampilkan tanpa  ada bug error. Kategori Uji coba view, kategori, dapat melihat semua produk, produk sabun, produk susu, produk  kebersihan badan, produk tissue, produk minuman, produk obat,  produk  ATK, produk  kebersihan rambut, produk kebersihan  mulut, produk  kebersihan ruangan dan produk snack&biscuit Fungsi view, halaman  kategori dengan  baik  serta dapat ditampilkan tanpa  ada bug error. Produk Terbaru Uji coba view, produk terbaru yang tersedia pada koperasi KIKA Fungsi view, halaman  produk terbaru dengan baik  serta  dapat ditampilkan tanpa ada bug error.
Keranjang  Uji coba view, keranjang dan melihat produk yang  akan  di  beli oleh pengguna Fungsi view, halaman keranjang  dengan baik  serta  dapat ditampilkan tanpa ada bug error. Checkout Uji coba view, checkout Fungsi view, halaman checkout dengan  baik  serta dapat ditampilkan tanpa  ada bug error.

## 3. ALGORITMA ATAU PROGRAM
@extends('layout') @section('title_page',$title) @section('content') <div class="container mb-4" > <section id="cover" class="align-self- center " style="z-index:999; position:relative;"> <br/> </section> <h5>Shopping Cart</h5> <br/> @if(Session::has('cart')) @php $price=0; @endphp @forelse($cart as $vcart) @php $product  = DB::table('portal_product')->where('id', $vcart['id'])->first();
@endphp <div class="card p-3 mb-3"> <a class="text-dark" href="{{ url('belanja/detail/'.$product->id) }}">{{ $product->judul }}</a>
<div class="row no-gutters mt- 2"> <div class="col-auto"> <img src="{{ URL::to('assets/images/produk/'.$product- >images) }}" style="width:50px; height:50px: border-radius:50% !important;" alt=""> </div> <div class="col"> <div class="card-block pl-2"> <span style="font- size:14px !important;"><i class="fa fa- cart-plus pr-2"></i>Qty {{ $vcart['qty'] }} </span> <h6 class="card- title"><i class="fa fa-barcode"></i> Rp. {{ number_format($product->price) }} </h6> </div> </div> <div class="col"> <div class="card-block pl-2 text-right"> <span class="badge badge-primary">Total : Rp. {{ number_format($product- >price*$vcart['qty']) }}</span> <a href="{{ url('delete-item/'.$vcart['id']) }}" class="btn btn-secondary mt-2 btn-sm">Hapus Item</a> </div> </div> </div> </div> @php $price+=$product- >price*$vcart['qty']; @endphp @empty <center> <img src="{{ URL::to('assets/images/cart.png') }}" style="width:250px;" alt=""> <h5>Keranjang Masih kosong</h5> </center> @endforelse @else <center> <img src="{{ URL::to('assets/images/cart.png') }}" style="width:250px;" alt=""> <h5>Keranjang Masih kosong</h5> </center> @endif
@if(Session::get('cart')) <form action="{{ url('checkout/page') }}"> @csrf <div class="row mt-5"> <div class="col-6 " > <span style="font- size:13px;">  Total Harga</span><br/> <h5>Rp. {{ number_format($price) }} </h5> </div> <div class="col-6"> <button type="submit" class="btn btn-primary btn-block mt- 2">Checkout sekarang</button> </div> </div> </form> @endif <br/> <br/> <br/>
<center>
<div id="cover-caption" class="p- 4"> <a class="text-danger" href="{{ url('profile') }}"><i class="fa fa-caret- left"></i> Kembali</a> </div> </center> </div> <br/> <br/> <br/> <br/> @endsection
@section('javascript')
@endsection
@extends('layout') @section('title_page',$title)
@section('content')
<div class="container mb-4" > <section id="cover" class="align-self- center " style="z-index:999; position:relative;"> <br/> </section> <h5>Checkout</h5> <br/> @php $price=0; @endphp @foreach($cart as $vcart) @php $product  = DB::table('portal_product')->where('id', $vcart['id'])->first();
@endphp <div class="card p-3 mb-3"> <a class="text-dark" href="{{ url('belanja/detail/'.$product->id) }}">{{ $product->judul }}</a>
<div class="row no-gutters mt-2"> <div class="col-auto"> <img src="{{ URL::to('assets/images/produk/'.$product- >images) }}" style="width:50px; height:50px: border-radius:50% !important;" alt=""> </div> <div class="col"> <div class="card-block pl- 2"> <span style="font- size:14px !important;"><i class="fa fa- cart-plus pr-2"></i>Qty {{ $vcart['qty'] }} </span> <h6 class="card- title"><i class="fa fa-barcode"></i> Rp. {{ number_format($product->price) }} </h6> </div> </div> <div class="col"> <div class="card-block pl-2 text-right"> <span class="badge badge-primary">Total : Rp. {{ number_format($product- >price*$vcart['qty']) }}</span>
</div> </div>
</div>
</div>
@php $price+=$product-
>price*$vcart['qty']; @endphp
@endforeach
<br/>
<form action="{{ url('checkout') }}" method="POST"> <h5>Alamat Pengiriman</h5> <div class="form-group mb-2"> <label for="">Pengiriman</label> <select name="status" class="form-control rounded" id="status" required> <option value="">Pilih Pengiriman</option> <option type="ambil" value="Ambil">Ambil</option> <option type="kirim" value="Kirim">Kirim (Grab,Gojek)</option> </select> </div> <div class="form-group mb-2"> <label for="">Pembayaran</label> <select name="pembayaran" class="form-control rounded"  required> <option value="">Pilih Pembayaran</option> <option value="Transfer">Transfer</option> <option value="Payroll">Payroll</option> </select> </div> <div class="form-group mb-2"> <label for="">Kirim Ke alamat</label> <select name="" id="alamat_kirim" class="form-control rounded"  required> <option value="">Pilih Alamaat</option> <option type="baru" value="baru">Baru</option> <option type="lama" value="lama">Yang sudah ada</option> </select> </div> <div class="form-group mb-2"> <label for="">Nama penerima</label> <input type="text" class="form- control rounded" name="name_customer" id="nama_penerima" required> </div> <div class="form-group mb-2"> <label for="">Telepon penerima</label> <input type="text" class="form- control rounded" name="phone" id="phone" required> </div> <div class="form-group mb-2" id="alamat" > <label for="">Alamat penerima</label> <textarea name="alamat"class="form-control rounded" id="alamat_penerima" cols="30" rows="5"></textarea> </div> @csrf <div class="row mt-5"> <div class="col-6 " > <span style="font- size:13px;">  Subtotal    </span><br/> <h5>Rp. {{ number_format($price) }} </h5> </div> <div class="col-6">
<button type="submit" class="btn btn-primary btn-block mt- 2">Selesai</button> </div> </div> </form> <br/> <br/> <br/>
<center> <div id="cover-caption" class="p- 4"> <a class="text-danger" href="{{ url('cart') }}"><i class="fa fa-caret- left"></i> Kembali</a> </div> </center> </div>
<br/> <br/> <br/> <br/> @endsection @section('javascript') <script>
$('#status').on('change',function(){ var abstract =
$('#status').find(":selected").attr('type') ;
if(abstract == "ambil"){ $('#alamat').hide(); } else if(abstract == "kirim"){ $('#alamat').show(); } else{ $('#alamat').show(); } })
$('#alamat_kirim').on('change',function(){ var addrs = $('#alamat_kirim').find(":selected").attr(' type'); if(addrs == "baru"){
$("#nama_penerima").val('');
$("#phone").val('');
$("#alamat_penerima").val('');
} else if(addrs == "lama"){
$("#nama_penerima").val('{{ $member-
>name }}'); $("#phone").val('{{
$user->phone }}');
$("#alamat_penerima").val('{{ $member->address }}'); } else{ $("#nama_penerima").val(''); $("#phone").val(''); $("#alamat_penerima").val(''); } }) </script> @endsection
@extends('layout') @section('title_page',$title)
@section('content') <div class="container mb-4" > <section id="cover" class="align-self- center " style="z-index:999; position:relative;">
<br/> </section> <h5>Konfirmasi pemesanan</h5> <br/> <center> <img src="{{ URL::to('assets/images/confirm.png') }}" style="width:250px;" alt=""> <br/>
<h6 class="mt-2 mb-4">Silahkan hubungi admin untuk mengonfirmasi pengambilan atau pengiriman barang</h6> <h5><a href="https://wa.me/{{$value- >phone}}?text=Konfirmasi pemesanan: NO TRANSAKSI {{ $trx_num }} TANGGAL: {{ $trx- >tgl_pesan }}" target="_blank" title="klik untuk chat admin" class="font-weight-bold btn btn-primary" style="font- size:20px;"><span class="fa fa-whatsapp "></span> Klik untuk chat via whatsapp</a></h5> </center> <br/> <br/> <br/> <center> <div id="cover-caption" class="p- 4"> <a class="text-danger" href="{{ url('/transaksi') }}"><i class="fa fa- caret-left"></i> Kembali</a> </div> </center> </div> @endsection
@section('javascript') <script>
$('#status').on('change',function(){ var abstract = $('#status').find(":selected").attr('type') ; if(abstract == "ambil"){
$('#alamat').hide(); } else if(abstract == "kirim"){ $('#alamat').show(); } else{ $('#alamat').show(); } })
</script> @endsection <div class="col-sm-10 offset-sm-1 ">
<center> <div style="border-radius:50%; width:140px; height:140px;"> <img src="{{ $profile->photo ? URL::to('assets/images/member/'.$profile- >photo) : URL::to('assets/images/member/default.png') }}"   class="rounded-circle " style="object-fit:cover; width:100%; height:100%;" alt=""> </div> <br/> <b>{{ $profile->realname }}</b> </center> </div> @extends('layout') @section('title_page',$title) @section('content') <div class="bg" style="width:100%; background:#007bff; height:80px; z-index:0; position:absolute;"></div>
<div class="container"> <section id="cover" class="align-self- center " style="z-index:999; position:relative;"> <div id="cover-caption">
<div class="row"> @include('profile.image- component',['photo' => $profile->photo]) </div> <br/> <br/> <h5 class="pl-3">Akun</h5> <ul class="list-group list-group- flush " >
<li class="list-group-item d- flex justify-content-between align-items- center mb-2" style="border:0px !important;"> <a href="{{ url('profile/detail') }}" class="text- dark">Edit Profil</a> <span class="badge "><i class="fa fa-caret-right"></i></span> </li>
<li class="list-group-item d- flex justify-content-between align-items- center  mb-2" style="border:0px !important;"> <a href="{{ url('transaksi') }}" class="text-dark">List Transaksi</a> <span class="badge "><i class="fa fa-caret-right"></i></span> </li>
<li class="list-group-item d- flex justify-content-between align-items- center mb-2" style="border:0px !important;"> <a href="{{ url('profile/password') }}" class="text- dark">Ganti Password</a> <span class="badge "><i class="fa fa-caret-right"></i></span> </li> </ul> <h5 class="pl-3 mt-4">Lainnya</h5> <ul class="list-group list-group- flush " > <li class="list-group-item d- flex justify-content-between align-items- center mb-2" style="border:0px !important;"> <a href="{{ url('cara- berbelanja') }}" class="text-dark">Cara Berbelanja</a> <span class="badge "><i class="fa fa-caret-right"></i></span> </li> <li class="list-group-item d- flex justify-content-between align-items- center  mt-2 text-danger" style="border:0px !important;"> <a href="#" class="text- danger" id="logout"><b>Logout</b></a> </li>
</ul> </div> </section> </div> @endsection @section('javascript') <script>
$("#logout").on("click", function() { swal.fire({
title: 'Apakah anda yakin?', text: "Anda akan keluar dari akun ini!", type: 'warning', showCancelButton: true, confirmButtonText: 'Ya, Keluar!', cancelButtonText: 'Tidak, Batalkan!', reverseButtons: true }).then(function(result){ if (result.value) { $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf- token"]').attr('content') }, url: '<?php echo url("/signout"); ?>', type: "get",
success: function() { swal.fire("Signout!", "", "success"); window.location.reload(); }, error: function (xhr, ajaxOptions, thrownError) { swal.fire("Error Signout!", "Please try again", "error"); } });
} else if (result.dismiss === 'cancel') { swal.fire( 'Dibatalkan!', 'Anda tidak jadi keluar dari akun ini :)',
'error' ) }
}); })
</script>
@endsection

## 4. KESIMPULAN
Pengembangan frontend website E-commerce koperasi Universitas Ibn Khaldun Bogor (KIKA) telah dilakukan dan diimplementasikan kedalam bentuk mobile web yang dapat menampilkan data produk yang terdapat pada koperasi KIKA, serta informasi yang ada di dalamnya, terdapat penambahan fitur pada mobile web e-commerce KIKA yang telah dikembangkan seperti halaman transaksi, halaman belanja, halaman profil, menu produk terbaru, menu filter, menu edit profil, menu ganti password, slidder banner dan halaman konfirmasi pesanan.

## PUSTAKA
Al-Faruq , M. N. M., Nur’aini, S., & Aufan, M. H.
(2022). ‘Perancangan Ui/Ux Semarang Virtual Tourism Dengan Figma’. Walisongo Journal of Information Technology , vol. 10, no. 2, hh. 210.
Dharwiyanti, S., & Wahono, R. S. (2003). ‘Pengantar Unified Modeling Language
(UML)’. IlmuKomputer . hh. 4-10.
Haryanti, S. (2010). ‘Rancang Bangun Sistem Informasi E-Commerce Untuk Usaha Fashion Studi Kasus Omah Mode Kudus’. Speed- Sentra Penelitian Engineering dan Edukasi , vol. 3, no. 1, hh. 8-11.
Hastanti, R. P., & Purnama, B. E. (2015). ‘Sistem penjualan berbasis web (e-commerce) pada tata distro kabupaten pacitan’. Bianglala Informatika , vol. 3, no. 2, hh. 1-5.
Hermanto, B. (2019). Sistem Informasi Manajemen Keuangan pada PT. Hulu Balang Mandiri Menggunakan Framework Laravel. Jurnal Komputasi , 7 (1), 17-26.
Hermiati, R., Asnawati, A., & Kanedi, I. (2021). ‘Pembuatan E-Commerce Pada Raja Komputer Menggunakan Bahasa Pemrograman Php Dan Database Mysql’. Jurnal Media Infotama , vol. 17, no.1, hh. 54-55.
Huda, B., & Priyatna, B. (2019). ‘Penggunaan Aplikasi Content Management System (CMS) untuk Pengembangan Bisnis Berbasis E- commerce’. Systematics , vol. 1, no. 2, hh. 83..
Ibrahim, A., & Ambarita, A. (2018). ‘Sistem Informasi Pengaduan Pelanggan Air Berbasis Website Pada PDAM Kota Ternate’. IJIS- Indonesian Journal On Information System , vol. 3, no. 1, hh. 12. Penyakit, P., & Bakteri, L. (2016). Otih Rostiana . January 2007 , 76– 100.
Isa, I. G. T., & Hartawan, G. P. (2017). Perancangan Aplikasi Koperasi Simpan Pinjam Berbasis Web (Studi Kasus Koperasi Mitra Setia). Jurnal Ilmiah Ilmu Ekonomi (Jurnal Akuntansi, Pajak dan Manajemen) , vol. 5, no. 10, hh. 40.
Prabowo, D. (2015). ‘Website E-Commerce Menggunakan Model View Controller (MVC) Dengan Framework Codeigniter Studi Kasus: Toko Miniatur’. Data Manajemen dan Teknologi Informasi (DASI), vol. 16, no. 1, hh. 23.
Rejeki, R. S. A., & Utomo, A. P. (2011). ‘Perancangan dan pengaplikasian sistem penjualan pada “Distro Smith” Berbasis E- commerce’. Dinamik ,vol.  16, no. 1, hh. 150- 152.
R. S. Pressman, Software Quality Engineering: A Practitioner’s Approach Fifth Edition. 2015.
Y Soejono, A. W., Setyanto, A., & Sofyan, A. F. (2018). ‘Evaluasi Usability Website UNRIYO Menggunakan System Usability Scale (Studi Kasus: Website UNRIYO)’.
Respati , vol. 13, no. 1, hh.30.
Sulistyorini, P. (2009). ‘Pemodelan visual dengan menggunakan uml dan rational rose’. Dinamik , vol. 14, no. 1, hh, 23-24 .