Vol. 3 No. 2 (2023) 104 – 110 ISSN Media Elektronik: 2807–8152

## Aplikasi Toko Online Berbasis Web Studi Kasus pada Cilla Shop
Pitri 1 , M. Syafiuddin Usman 2 1,2 Universitas Teknologi Digital, Bandung, Indonesia Email: 1* pitrizaisuw@gmail.com, 2 syaifusman@gmail.com

## ABSTRACT
Cilla shop stores that are engaged in sales, promotions and technology as well as waiters that make it easier for customers to make transactions can be a supporting factor in achieving sales success. In order to facilitate it all can be  realized  with  an  online  store  (E-Commerce).  The built  online  store application  aims  to  help  the  "Cilla Shop" store in terms of product marketing and sales. The process of making this program begins by analyzing the existing system in the store, then creating UML (Unified Modeling Language) and the necessary tables followed by designing the interface and making the program. This online shop application uses the programming language PHP, MySQL as a database, Sublime Text as an HTML editor. This application has three main functions. First, for customers/general users, each website visitor can view the product catalog, use website services, but cannot place product orders. The  second  is members  who  can order products. Finally,  the administrator can manage product data, manage orders and obtain reports.
Keywords: E-Commerce, Web Based, Online Shop, Cilla Shop, Web-Based Online Store.

## ABSTRAK
Cilla  shop  yang  bergerak  di  bidang  penjualan,  promosi  dan  teknologi  juga  pelayan  yang  memudahkan  para pelanggan dalam melakukan transaksi dapat menjadi faktor pendukung dalam mencapai keberhasilan penjualan. Guna memfasilitasi itu semua dapat direalisasikan dengan toko online (E-Commerce). Aplikasi toko online yang dibagun  ini  bertujuan  untuk  membantu  toko  “Cilla  Shop”  dalam  hal  pemasaran  dan  penjualan  produk.  Proses pembuatan program ini dimulai dengan menganalisis sistem yang telah ada di toko tersebut, kemudian dibuat UML (Unified  Modeling  Language  )  dan  tabel  tabel  yang  di  perlukan  dilanjutkan  dengan  mendesain  interface  dan memmbuat programnya. Aplikasi toko online ini menggunakan bahasa pemrograman PHP,MySQL sebagai basis data , Sublime Text  sebagai editor HTML . Aplikasi ini memiliki tiga fungsi utama. Pertama yaitu untuk custumor/ user umum, setiap pengunjung website bisa melihat katalog produk, menggunakan layanan website , tetapi tidak bisa melakukan pemesanan produk. Kedua adalah anggota yang bisa melakukan pemesanan produk. Terakhir yaitu administrator yang bisa melakukan pegelolaan data produk, mengelola pesanan dan memperoleh laporan.
Kata Kunci: E-Commerce , Berbasis Web, Toko Online, Cilla Shop,Toko Online Berbasis Web.

## 1. Pendahuluan
Internet adalah jaringan global yang sangat penting saat ini  dimana  penyebaran  informasi  dapat  dilakukan dengan  sangat  cepat.  Diera  4.0  Internet  digunakan sebagai  satu  satunya alternative untuk  melakukan penyebaran informasi dan transaksi yang tidak dibatasi oleh waktu dan tempat.
Didorang    dengan  adanya    masa  pandemik  yang  telah lalu  dimana  orang-  orang  tidak  dapat  melakukan kegiatan  ekonomi  secara  leluasa  karena  adanya  ppkm, pengunaan internet untuk melakukan kegiatan meningkat  pesat  sehingga  semua  kegiatan  ekonomi dapat di lakukan dari rumah.
Salah  satu  hikmah  dari  masa  pendemi  kemarin banyaknya  bermunculan  bisnis  bisnis  atau store  up yang  memanfaat  kan  jaringan  iternet  sebagai  media promosi  dan  transaksi  seperti  ,bermunculannya  toko- toko online dan jasa online.
Dan  salah  satu  perubahan  gaya  hidup  adalah  cara konsumen dalam melakukan pembelian, yaitu dengan belanja online yang sekarang telah menjadi alternative dari  belanja  secara  konvensional.alasan  mendasar berpindahnya alternative belanja dari offline ke online ini  adalah  dikarenakan  banyaknya  kemudahan  yang ditawarkan oleh online shop.
Mengikuti tren yang ada sekarang salah satu toko Cilla Shop  yang  ada  cianjur    ingin  mencoba  untuk mempromosikan  dan  menjual  produk    mereka  secara
SATESI (Jurnal Sains Teknologi dan Sistem Informasi) Vol. 3 No. 2 (2023) 104 – 110
global yang tidak dibatasi oleh waktu dan tempat, Selain itu  persaingan  saat  ini  lebih  cendrung  di  aktivitas promosi dan jual beli secara elektronik.  penjualan yang tidak    mengikuti  tren  saaat  ini  akan  cendrung  mundur karena  kalah  saing.  Ini  di  sebabkan  oleh  menurunnya pembelian  oleh  pelangan  atau  konsumen  yang  engan lagi berbelanja secara offline. Ini lebih tepatnya transisi perilaku  manusia  dari  yang  biasanya  berbelanja langsung, tatap muka, ofline saat ini beralih ke online .
Berdasarkan uraian di atas, maka rumusan masalah yang mendasari  penelitian  ini  adalah  Bagaimana  membuat sebuah aplikasi toko online yang dapat mempromosikan produk serta mengelola dan melakukan transaksi? Dan dengan  tujuan  untuk  mempromosikan  serta  mengelola dan melakukan transaksi penjualan.

## 2. Metode Penelitian
Pengerjaan/Pengembangan  terdiri  dari  3  bagian  utama yaitu  model  pengembangan  perangkat  lunak,  metode penelitian,  dan  tools  (alat  bantu  dalam  analisis  dan merancang sistem infrmasi).
a) Model pengembangan perangkat lunak Model Waterfall
b) Metode  penelitian  dalam  pengembangan  perangkat lunak
Metode  Berorientasi  obyek  ,  Metode  berorientasi data
c) Alat bantu pengembangan sistem Unified Modelling Languange (UML)
Model yang digunakan untuk menyelesaikan permasalahan  yang  dihadapi  di  lapangan  dengan menggunakan  Model  Waterfall  dimana  dalam  model tersebut  masih  mempunyai  bagian-bagian,  diantaranya yaitu  :  analisis  kebutuhan,  pengumpulan  data, perancangan  sistem,  pembuatan  sistem,  pengujian sistem  dan  pembuatan  naskah  publikasi  dan  Model Prototype dimana model  proses pembuatan sistem yang dibuat  secara  terstruktur  dan  memiliki  beberapa  tahap- tahap yang harus di lalui.
Gambar 1. Waterfall Model
Metode Berorientasi obyek , Metode berorientasi data Dalam  sub  bab  ini  terdapat  beberapa  diagram  yang akan menggambarkan sistem secara keseluruhan yaitu scenario  use  case,  use  case  diagram,  class  diagram, activity diagram , dan sequence diagram.
3. Hasil dan Pembahasan
3.4.1 UML (Unified Modelling Language)
1. Skenario keberjalanan aplikasi Sknario use case merupakan gambaran alur dari use case  yang  telah  di  buat  untuk  memudahkan  user dalam memahami jalan atau alur dari sistem yang akan diusulkan
a) Aktor Admin
Admin mempunyai akses lebih dalam menjalankan aplikasi. Namun untuk mendaptkan  hak  akses  tersebut  ,  admin  harus login  terlebih dahulu setelah login admin baru akan bisa mengakses fitur eksklusif diantaranya , kelola kategori, kelola data produk, kelola data costumer, kelola data transaksi \ pesanan , dan laporan
b) Aktor Customor
Setalah  membuka  sistus  web  store  maka customor di  arahkan  untuk  login  bagi  yang sudah  memiliki  akun  sedangkan  yang  belum memiliki  akun  makan  akan  diharuskan mendaftar  terlebih  dahulu  kemudian  baru  bisa login, setelah itu customor bebas untuk melihat dan  mebeli  produk  yang  ada  di  tokoh  dimana pun dan kapanpun
2. Use Case Diagram Use  case  diagram  merupakan  pemodelan  untuk melakukan (behavior) sistem informasi yang akan di buat.
a) Use case diagram (Admin, Customo r)
Gambar 2. Use Case Diagram
SATESI (Jurnal Sains Teknologi dan Sistem Informasi) Vol. 3 No. 2 (2023) 104 – 110
3. Class Diagram Class  diagram  memberikan  gambaran  hubungan antara tabel-tabel yang ada dalam data base masing- masing  class  memiliki  atribute  dan  metode  atau fungsi sesui dengan proses yang terjadi.
4. Aktivity Diagram Aktivity  diagram  digunakan  untuk  megambarkan
aliran kerja dari suatu sistem.
a) Aktivity Diagram Login Admin
Aktivity  diagram  login  admin  menggambarkan aktifitas  admin  ketika  hendak  masuk  ke dashboard  admin,  ynag  hanya  bisa  di  lakukan oleh admin
Gambar 4. Use Case Diagram Login Admin
b) Aktivity  Diagram    Kelola  Kategori  (Aktor
Admin)
Aktivity diagram kelola kategori mengambarkan aktivitas  admin  untuk  mengelola  kategori  pada produk  yang hanya bisa dilakukan oleh admin
Gambar 5. Use Case Diagram Kelola kategori
c) Aktivity  Diagram  Kelola  Data  Produk  (Aktor Admin) Aktivity diagram kelola data produk menggambarkan aktivitas admin untuk mengelola segala data produk yang hanya bisa di lakukan oleh admin
Gambar 6. Use Case Diagram Kelola data Produk
d) Aktivity Diagram Kelola Data Custumer (Aktor
Admin)
Aktivity  diagram  kelola  data  custumer menggambarkan  segala  aktivitas  admin  untuk mengelola  data  custumer  yang  hanya  bisa  di lakukan oleh admin
Gambar 7. Use Case Diagram Kelola Data Customor
e) Aktivity  Diagram  Kelola  Transaksi  /  Pesanan (Aktor Admin)
Aktivity  diagram  kelola  transaksi  /  pesanan mengambarkan  segala  aktivitas  admin  untuk mengelola transaksi / pesanan yang hanya bisa dilakukan oleh admin
SATESI (Jurnal Sains Teknologi dan Sistem Informasi) Vol. 3 No. 2 (2023) 104 – 110

## Gambar 8.  Use Case Diagram Kelola Transaksi/Pesanan
f) Aktivity  Diagram  Kelola  Data  Laporan  (Aktor
Admin) Aktivity diagram kelola data laporan menggambarkan  segala  aktivitas  admin  untuk mengelola  data  laporan  penjualan  yang  hanya bisa dilakukan oleh admin.
Gambar 9. Use Casa Diagram Kelola Data Laporan
g) Aktivity  Diagram  Login  Costumer  (  Aktor
Costumer ) Aktivity diagram login cotumer menggambarkan segala  aktivitas  costumer  ketika  hendak  login, costumer yang belum memiliki akun maka akan di arah kan utuk mendaftar terlebih dahulu guna untuk  agara  bisa  melakukan  pembelanjaan  di toko hal ini hanya bisa dilakuan oleh costumer.
Gambar 10. Use Case Diagram LoginCustomer
h) Aktivity  Diagram  Pilih  Produk  (  Aktor Costumer)
Aktivity  diagram  pilih  produk  menggambar aktivitas  costumer  yang  hendak  belanja  yang dilkaukan oleh costumer.
Gambar 11. Use Case Diagram Pilih Produk
i) Aktivity Diagram Belanja (Aktor Costumer) Aktivity diagram belanja menggambar akativitas costumer setalah melakukan pemilihan  produk  dan  telah  terdaftar  menjadi costumer, bagi costumer yang belum memiliki akun maka tidak bisa melakukan belanja, hal ini hanya bisa di lakukan oleh costumer.

## Gambar 12. Use Case Diagram Belanja
4. Pembahasan
4.1  Konfigurasi    Perangkat  Iunak  dan  Perangkat Keras
Untuk  Memenuhi  Pengelolaan  data  guna  penyajjian informasi  pendukung  dalam  prosedur  perjalanan  di atas dengan menggunakan komputr, maka di butuhkan seperangkat komputer dengan konfigurasi antara lain :
a. Perangkat Lunak yang di butuhkan untuk membangun aplikasi ini, adalah : 1. Sistem operasi : Microsoft windows 10 2. Bahasa pemrograman : PHP 3. Database : MySql
SATESI (Jurnal Sains Teknologi dan Sistem Informasi) Vol. 3 No. 2 (2023) 104 – 110
b. Perangakat Keras yang dibutuhkan untuk membangun aplikasi ini, adalah :
1. PC pentium yang tinggi
2. Ruang  Hardisk kosong minimal 15 GB
3. RAM minimal 132 MB
4. Output Device : Monitor / Printer
5. Input Device
:Keyboard Standard 6. Poniting Device :Mouse
4.2 Implementasi

## a. From Menu Utama
Gambar 13. From Menu Utama
b. From Login Admin
Gambar 14. From Login Admin
c. From Dashboard Admin
Gambar 15. From Dashboard Admin
d. From login Custumor
Gambar 16. From Login Custumor

## e. From Pendaftaran Customor Baru
Gambar 17. From Pendaftaran Customor Baru
f. From Keranjang Belanja
Gambar 18. From Keranjang Belanja
g. From HalamanFooter
Gambar 19. From halaman Footer
h. From  Buat Pesanan
SATESI (Jurnal Sains Teknologi dan Sistem Informasi) Vol. 3 No. 2 (2023) 104 – 110
i. From Dashboard Customor
Gambar 21. From Dasboard Customor
j. From Produk
Gambar 22. From Produk
k. From  Kelola Kategori
Gambar 23. From  Kelola Kategori
l. From kelola Produk
Gambar 24. From kelola Produk

## m. From Kelola Data Customor
Gambar 25. From Kelola Data Customor
n. From Kelola Transaksi / Pesanan
Gambar 26. From Kelola Transaksi / Pesanan
o. From Kelola Data Laporan
Gambar 27. From Kelola Data Laporan
p. From Data admin
Gambar 28. From Data Admin
SATESI (Jurnal Sains Teknologi dan Sistem Informasi) Vol. 3 No. 2 (2023) 104 – 110
q. From Ganti Passwoard

## Gambar 29.  From Ganti Passwoard

## 5. Kesimpulan
Berdasarkan  hasil  pembuatan  Aplikasi  Toko  Online Berbasis  Web  di  Cilla  Shop,  maka  penulis  dapat mengambil kesimpulan yaitu : 1. Adanya Aplikasi Toko Online  Berbasis  Web  di  harapkan  Cilla  Shop  di  kenal kepada  masyarakat  luas  sebagai  media  promosi  dan sekaligus sebagai pelayanan memesan produk dari Cilla Shop online .  2.  Dengan  meningkatnya  penggunaan internet  di  kalangan  masyarakat,  Cilla  Shop    mencoba melakukan inovasi yaitu belanja lewat online, maka dari itu  penulis  selaku  pembangun  website  cilla  shop menawarkan  website  ecommerce  sebagai  sarana promosi dan penjualan online.

## SUMBER RUJUKAN Referensi
[1] Mujiyana, Ingge Elissa (2003) Analisa faktor-faktor Yang Mempengaruhi  Keputusan  Pembeli  Via  Internet  Pada Toko  Online.  vol,VII  ,  Fakultas  Ekonomi  Universitas
Gunadarma [2]  Wahidin  Abbas  (2013)  Analisa  Kepuasan  Mahasiswa Terhadap  Website  (UNY)  ISNB,  978-602-99334-2-0 Universitas Negeri Yogyakarta (UNY) [3] Graifhan Ramadhani,“Modul Pengenalan Internet”http://dhani.shingcat.com/ ,hlm.2- 3
[4]  Randi  V.  Palit.  (2015)  Rancangan  Sistem  Informasi Keuanagan Gereja Berbasis Web Di Jemaat GMM Bukit Moria  Melayang.  E-jurnal  Teknik  Elektronik  dan Komputer vol. 4 no.7 ISSN : 2301-8402
[5]  Diana  Effendi,  Bella  Hardiyana  (2019)  Rancangan Aplikasi Pembelajaran  Angklung Untuk SLB Bagian B Tuna Rungu Berbasis Androiid. vol. 4 No.1
[6]  Wawan  Saputra,Bambang    Eka  Purnama  (2012) Pengembang Multi Media Pembelajaran Interaktif Untuk Mata Kuliah Organisasi Komputer. Vol.4 No 2
[7]Victor  Marudut  Mulia  Siregar  (2018)  Sistem  Informasi Pendapatan Logistik Aktiva Tetap PT. Bank Sentra Asia, Tbk  kantor  Cabang  Pematangsiantar.  Vol.7  No  3  E- ISSN: 2540-9719.ISSN : 2302-8149
[8] Johni S Pasaribu (2017) Penerapan Framework,Yii Pada Pembagunan  Sistem  PPDB  SMP  BPPI  Baleendah Kabupaten  Bandung.  Volume  III,  No  2,  ISSN  :  2407  – 3911
[9]  Budi  Raharjo  (2011),  Belajar  Pemrograman  WEB, Modula . cetakan Pertama. ISBN : 978-602-8759-17-5