## pISSN: 2442-3386  eISSN: 2442-4293
Vol 9 No1 Jan – Jun 2023, 53 - 62

## RANCANG BANGUN SISTEM E-COMMERCE BERBASIS WEBSITE PADA TOKO KOSMETIK BELIA COLLECTION
Eka Dinata Permata Putra 1 , Maslihah 2
1,2 Program Studi Informatika Fakultas Teknik Universitas Wijaya Kusuma Surabaya eka.dinatapermata@gmail.com , lika.btr@gmail.com

## Abstrak
Dalam era teknologi yang sangat cepat berkembang pada saat ini, banyak proses penjualan dan pembelian sudah berkembang menggunakan  sistem informasi.  Belia Collection adalah usaha  yang menjual berbagai  jenis produk kosmetik.  Proses  penjualan  pada  Belia Collection masih  dilakukan  dengan  cara  konsumen  datang  ke  toko. Pencatatan transaksi, persediaan produk dan pembuatan laporan masih menggunakan pencatatan pada buku atau dengan cara manual.  Dengan tujuan  menyelesaikan permasalahan  Belia Collection, peneliti membuat  Sistem E- Commerce Berbasis Website yang dapat melakukan penjualan dan pembuatan laporan secara otomatis. Metodologi yang digunakan yaitu metode waterfall . Sistem ini dibangun menggunakan bahasa pemrograman HTML, PHP dan MySQL sebagai database nya. Hasil dari pengujian sistem diuji menggunakan metode blackbox testing dan sistem dapat  menjalankan  transaksi  penjualan,  menampilkan  stok,  laporan  pergudangan,  laporan  penjualan,  data konsumen.
Kata Kunci: Penjualan, Belia Collection , E-Commerce .

## Abstract
In  the  age  of  rapidly  developing  technology,  many  sales  and  buying  processes  have  developed  with  the  help  of information systems. Belia Collection is a company that sells several different types of cosmetics. The sales process at  Belia  Collection  is always done through  consumers  coming  into  the  shop.  The  recording of  transactions,  the inventory of products and the reporting of uses are always recorded in the books or manually system   . To resolve the Belia Collection problem, researchers are creating a website-based e-commerce system that can make sales and generate reports automatically. The method employed is the waterfall method. This system was built using the HTML, PHP and MySQL programming languages as the database. The results of system testing were tested using the black box testing method and the system can carry out sales transactions, display stock, warehousing reports, sales reports, customer data.
Keywords: Sales, Belia Collection, E-Commerce.

## I. PENDAHULUAN
Dalam  situasi  teknologi  yang  cepat  berkembang  saat ini,  banyak  proses  penjualan  dan  pembelian  sudah berkembang  menggunakan  sistem  informasi.  Sistem informasi  mempermudah  mencari  semua  kebutuhan yang  dibutuhkan  oleh  manusia  dan  dijual  melalui website atau  aplikasi e-commerce . E-commerce merupakan  proses  penjualan  dan  pembelian  yang dilakukan  tanpa  tatap  muka  atau  dilakukan  melalui jaringan internet. E-commerce memudahkan konsumen dalam pemesanan produk, bertransaksi dan memudahkan  pengusaha  dalam  memasarkan  produk melalui  internet  serta  meningkatkan  penjualan  toko tersebut.
Belia Collection yang berada di kota Surabaya adalah usaha  yang  menjual  berbagai  jenis  produk  kosmetik yang telah terdaftar pada BPOM. Proses penjualan pada Belia Collection masih  dilakukan  dengan  cara konsumen  datang  ke  toko  untuk  membeli  maupun sekedar melihat produk yang ada pada Belia Collection . Kegiatan  mempromosikan  produknya  sendiri  masih dilakukan  secara  mulut ke  mulut,  sehingga  jangkauan promosi  masih  terbatas  pada  area  Surabaya  saja. Pencatatan transaksi, persediaan produk dan pembuatan
laporan  masih  menggunakan  pencatatan  pada  buku yang membutuhkan waktu lama.
Berdasarkan hal diatas, maka peneliti membuat sistem e-commerce berbasis  website  yang  dapat  melakukan penjualan, pembayaran dan pembuatan laporan secara otomatis.  Maka  peneliti  mengusulkan  sebuah  sistem yang berjudul “Sistem E-Commerce Berbasis Website pada  Belia Collection ”.  Sistem  ini  nantinya  akan terfokus  menggunakan  model Business  to  Customer (B2C). B2C merupakan aktivitas bisnis yang dilakukan pelaku  bisnis  kepada  konsumen  secara  langsung. Diharapkan  dengan  penerapan  sistem e-commerce ini dapat memudahkan Belia Collection dalam melakukan transaksi penjualan dengan konsumennya.

## II. METODE
Penelitian  ini  bertujuan  bagaimana  merancang  dan membangun suatu Ecommerce yang dapat diguanakan oleh belia cosmetic berbasiss WEB untuk memperbaiki metode penjualan yang lama yaitu dengan menggunakan metode manual
Merancang dan membangun sesuatu yang baru adalah langkah  pertama  dalam  membuat  gambar  atau  sketsa yang  mencapai  hasil  yang  diinginkan  [1].  Pengertian

## Melek IT

## Information Technology Journal. Vol 9 No 1 Jan - Jun 2023, 54 - 62
lain  rancang  bangun  adalah  Kegiatan  menganalisis kebutuhan  dan  mendeskripsikan  semua  komponen yang  terlibat  dengan  sistem  akan  dilanjutkan  dengan pembuatan sistem  berdasarkan  kebutuhan  dan komponen yang telah dianalisis [2].
Sistem adalah jaringan objek yang berkolaborasi untuk mencapai  tujuan  bersama  [3].  Pengertian  lain  sistem adalah  kumpulan  dari  komponen-komponen  yang saling  berhubungan  untuk  mencapai  tujuan  bersama. Input dan output diproses secara teratur [4].
E-Commerce adalah  proses  membeli,  menjual, mentransfer  atau  bertukar  produk,  layanan,  dan informasi  secara online [5]. E-commerce adalah penggunaan  internet  dan  jaringan  internal  untuk membeli,  menjual,  atau  memperdagangkan  barang secara  elektronik  [6]. E-commerce dapat  dilihat  dari beberapa perspektif, diantaranya dari perspektif bisnis, e-commerce adalah  aplikasi teknologi menuju otomatisasi  transaksi  bisnis  dan workflow .  Dari beberapa perspektif, e-commerce dapat dilihat sebagai cara  untuk  mengotomatisasi  transaksi  bisnis  dan  alur kerja,  mengurangi  biaya  dengan  menggunakan teknologi,  dan  menyediakan  platform online untuk menjual dan membeli produk dan informasi [7].
Website adalah kumpulan halaman situs, yang masing- masing  dirangkum dalam domain yang berbeda, yang terletak di internet. Halaman web adalah dokumen yang ditulis dalam format HTML yang dapat diakses melalui HTTP, yang merupakan protokol yang digunakan oleh situs web untuk berkomunikasi dengan browser [8].
PHP berasal dari bahasa Hypertext Preprocessor , yaitu bahasa pemrograman serbaguna yang dapat digunakan untuk  membuat  dan  mengembangkan website [12]. Pengertian  lain  PHP  adalah  bahasa  skrip  open  source yang cocok untuk pengembangan situs web, dan dapat diintegrasikan  ke  dalam  Hypertext  Markup  Language (HTML).  Apa  yang  membedakan  PHP  dari  produk serupa  lainnya  adalah  bahwa  kode  dieksekusi  di  sisi server, yang berarti klien tidak akan dapat mengetahui jenis pemrograman apa yang akan dibuat [13].
XAMPP  adalah  platform  perangkat  lunak  gratis  yang dapat  digunakan  untuk  menjalankan  beberapa  sistem operasi  dan  melayani  halaman  web  melalui  Apache HTTP  Server. Database MySQL  dan  terjemahan bahasa pemrograman  PHP ditulis  pada  sistem operasi Apache,  MySQL,  dan  PHP.  XAMPP  sendiri  adalah singkatan  dari  empat  program  perangkat  lunak,  yaitu Apache, MySQL, PHP, dan Perl. Program ini tersedia secara  gratis  dan  merupakan  web  server  yang  mudah digunakan yang dapat menampilkan halaman web yang dinamis [15].

## 2.1. Bootstrap
Bootstrap adalah  kerangka  kerja  yang  menggunakan HTML,  CSS,  dan  JavaScript  untuk  memberikan tampilan  situs  web  yang  modern  dan  menarik.  Selain itu bootstrap juga  memiliki  fitur  grid  yang
memudahkan  dalam  menyusun  layout  yang  dapat digunakan dengan cepat [16].

## 2.2. System Development Life Cycle
System  Development  Life  Cycle  (SDLC)  membantu perancang  membuat  sistem  yang  paling  cocok  untuk kelompok  orang  tertentu.  Berikut  adalah  7  tahapan dalam siklus SDLC menurut [17] :
1.  Mengidentifikasi masalah, peluang dan tujuan.
Pada  tahap  pertama  ini,  analis  memperhatikan dengan  benar  masalah  yang  diidentifikasi, peluang, serta tujuannya. Tahap ini sangat penting untuk  kesuksesan  proyek  berikutnya.  Orang- orang yang terlibat diantaranya adalah pengguna, analis, dan manajer koordinator sistem proyek ini.
2.  Menentukan informasi yang dibutuhkan oleh user.
Tahapan selanjutnya adalah analis akan menggunakan metode langsung seperti wawancara, sampel, investigasi data dan kuesioner  untuk  menentukan  informasi  yang dibutuhkan.  Orang-orang  yang  terlibat  adalah pengguna,  manajer  operasi  khusus  dan  staf operasi.
3.  Menganalisa kebutuhan sistem.
Tahapan  selanjutnya  adalah  sistem  analis melakukan  analisa  sistem  yang  dibutuhkan. Beberapa  alat  dan  bantuan  teknis  membantu analis  membuat  penentuan  kebutuhan.  Alatnya berupa  aktivitas  diagram  untuk  memperlihatkan urutan kejadian, ilustrasi  sistem yang terstruktur dan form grafik.
4.  Mendesain sistem yang telah direkomendasikan.
Pada  titik  ini,  analis  sistem  menggunakan informasi  yang  telah  dikumpulkan  di  masa  lalu untuk memenuhi persyaratan desain sistem.
5.  Membangun dan mendokumentasikan software.
Pada  tahap  ini,  analis  bersama  programer  untuk membangun  software  yang  dibutuhkan  Selama fase  ini,  analis  bekerja  untuk  mengembangkan dokumentasi  yang  efektif  untuk  perangkat  lunak dan  mendistribusikannya  ke  pengguna,  seperti instruksi  manual,  bantuan  online,  dan  situs  web Pertanyaan yang Sering Diajukan (FAQ).
6.  Menguji dan memperbaiki sistem.
Sebelum  sistem  informasi  dapat  digunakan, sistem  tersebut  harus  diuji  dan  diperbaiki. Pengujian mencakup pekerjaan pemrogram, serta pemeriksaan  dokumentasi  sistem  oleh  analis sistem  dengan  pemrogram.  Peningkatan  sistem dan  dokumentasinya  merupakan  proses  yang berkelanjutan  selama  pengembangan  sistem informasi.
7.  Menjalankan serta mengevaluasi sistem.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 9 No1 Jan – Jun 2023, 55 - 62
Pada tahap terakhir, analis membantu menjalankan  sistem  informasi.  Tahap  ini  juga termasuk  training  kepada  pengguna  dalam menjalankan  sistem.  Evaluasi  lebih  mengarah kepada  diskusi,  sebenarnya  evaluasi  selalu dilakukan dalam tiap tahapan. Kriteria yang harus dipenuhi adalah apakah pengguna membutuhkan sistem tersebut.

## 2.3. Blackbox Testing
Blackbox testing adalah  jenis  pengujian  perangkat lunak  yang  menekankan  persyaratan  fungsional  dan sedikit  memperhatikan  pengetahuan  domain  [18]. Blackbox testing adalah teknik pengujian  sistem yang berfokus  pada  spesifikasi  fungsional  dari  sebuah program perangkat lunak. Penguji dapat menggunakan sekumpulan data input yang ditentukan untuk menguji fungsionalitas program [19]. Pengertian lain blackbox testing,  juga  disebut  pengujian  perilaku,  pengujian perilaku  adalah  teknik  pengujian  yang  melihat bagaimana suatu program bekerja di dunia nyata. Cara pengujian ini memungkinkan Anda menemukan semua persyaratan  yang  dibutuhkan  program  untuk  bekerja dengan benar [20].
Belia  Collection  merupakan  sebuah  usaha  perorangan yang  menjual  berbagai  jenis  produk  kosmetik  seperti lipstik,  serum, blush  on,  concealer,  foundation, eyeshadow ,  maskara  dan  lainnya.  Belia Collection berlokasi di kota Surabaya, Jawa Timur.

## 2.4. Tahapan Penelitian
Metode penelitian yang diterapkan pada penelitian ini terdapat  beberapa  tahapan.  Berikut  adalah  gambaran tahapan-tahapannya  :  Identifikasi  masalah,  Analisis kebutuhan, Desain Sistem , Membangun Sistem, Hasil dan pembahasan

## 1) Identifikasi Masalah
Pada  tahap  ini  penulis  menentukan  masalah  yang menjadi alasan dibuatnya sistem dengan menggunakan metode  pengumpulan  data  wawancara  dan  observasi yang  dilakukan  secara  langsung  dengan  Belia Collection sebagai  sumber  data  primer,  serta  studi literatur sebagai sumber data sekunder. Dari wawancara dan  observasi  yang  telah  dilakukan  didapatkan permasalahan yaitu :
1. Proses  penjualan  masih  dilakukan  dengan  cara konsumen datang ke toko.
2. Promosi  produk  masih  dilakukan  dari  mulut  ke mulut sehingga jangkauan promosi terbatas pada area Surabaya.
3. Pencatatan  transaksi,  persediaan  barang  dan pembuatan laporan penjualan masih
menggunakan buku yang memakan waktu cukup lama

## 2) Analisa Kebutuhan
Langkah  selanjutnya  adalah  menganalisa  kebutuhan yang  digunakan  dalam  sistem  meliputi  kebutuhan fungsional,  kebutuhan  non  fungsional,  diagram berjenjang dan DFD Level 0 (Diagram konteks)

## a. Kebutuhan Fungsional
Kebutuhan  fungsional  mencakup  respon  sistem terhadap  input  tertentu  dan  bagaimana  seharusnya merespon  ketika  menerima  respon.  Berikut  adalah kebutuhan fungsional yang ada pada sistem ini :
1. Pengguna  sistem  dibagi  menjadi  3  yaitu  admin, customer  dan  pemilik.  Admin  memiliki  fitur untuk  mengelola  data  produk  serta  memvalidasi pembayaran yang masuk. Customer memiliki fitur untuk  melihat  dan  memilih  produk  yang ditampilkan. Pemilik memiliki fitur untuk melihat laporan penjualan dan laporan stok produk.
2. Sistem  dapat  melakukan  pembayaran  melalui bank.
3. Sistem dapat membuat laporan penjualan, laporan laporan stok produk.
4. Admin dapat mengolah semua data yang ada pada sistem.
5. Sistem  memiliki  keamanan  yang  baik  dengan menggunakan username dan password saat login serta dapat membedakan hak akses pada tipe user.

## b. Kebutuhan Non Fungsional
Kebutuhan  non  fungsional  tidak  terkait  dengan  fitur tertentu dari sistem, melainkan batasan pada apa yang dapat dilakukan sistem. Berikut adalah kebutuhan non fungsional yang dibutuhkan untuk membangun sistem ini :
1. Perangkat  keras  seperti  laptop  atau  personal computer  (PC)  dengan  sistem  operasi  minimal Windows XP atau lebih.
2. Software  untuk  mengakses  website  (Google Chrome, Mozilla Firefox, Operan dan lain-lain).
3. Perangkat  lunak  untuk  melakukan  pengkodean (Microsoft Visual Studio Code).
4. Software web server seperti XAMPP.

## 3) Desain Sistem
Pada  tahap  ini  penulis  mulai  membangun  sistem menggunakan DFD, Diagram Berjenjang, Perancangan Data Base menggunakan CDM, PDM, perangkat lunak Microsoft  Visual  Studio  Code  versi  1.53.2  dengan memakai bahasa pemrograman HTML, PHP, CSS dan MySQL  sebagai database nya.  Program  XAMPP  juga digunakan sebagai penghubung MySQL dengan bahasa pemrograman PHP.

## Melek IT
Data  Flow  Diagram (DFD)  digunakan  untuk menggambarkan  dari  mana  data  berasal  dan  kemana perginya, serta proses yang dihasilkannya.

## Tabel 1 Simbol DFD
Pada  DFD  level  akan  terjadi  penurunan  level  dimana diharuskan  untuk  mempresentasikan  proses  dalam spesifikasi proses yang jelas [10].
Diagram Konteks (DFD Level 0)
Berikut adalah rancangan diagram konteks :
Gambar 1 .  Diagram Konteks
Pada  gambar  1  diatas  dapat  dilihat  memiliki  tiga pengguna yaitu Admin, Customer dan Owner. Dimana admin  menginputkan  data  username  dan  password admin,  data  user,  data  kategori,  data  produk,  data gambar  produk,  data  rekening,  data  konfigurasi,  data konfirmasi  pembayaran  dan  data  perubahan  status pesanan.  Admin  mendapatkan output berupa  laporan stok produk dan data pembayaran. Owner
menginputkan data username dan password owner dan mendapatkan output laporan  penjualan,  laporan  stok barang dan laporan customer. Customer menginputkan data customer, data username dan password customer, data  pesanan,  data  pembayaran  dan  data  transaksi. Customer mendapat output berupa informasi perubahan status pesanan dan bukti transaksi.

## Diagram Berjenjang
Diagram berjenjang merupakan diagram yang menggambarkan  urutan-  urutan  proses  yang  terdapat atau  yang  telah  digambarkan  pada  diagram  konteks sistem.
Diagram  berjenjang  pada  sistem  dapat  dilihat  pada gambar berikut :
Gambar 2 . Diagram Berjenjang
Pada gambar 2 diatas dapat diketahui bahwa sistem e- commerce Belia Collection memiliki  7  proses,  yaitu pendaftaran, login ,  kelola  data,  penjualan  produk, pembayaran produk, perubahan status dan laporan.
Pada  proses login terdapat  proses login customer dan login user. Pada proses kelola data terdapat proses data user,  data  produk,  data  kategori,  data  rekening,  data gambar  dan  data  konfigurasi.  Pada  proses  penjualan produk terdapat proses cart dan checkout . Pada proses pembayaran produk terdapat proses upload pembayaran dan konfirmasi  pembayaran.  Pada  proses laporan  terdapat  proses  bukti  transaksi,  laporan  stok barang, laporan penjualan dan laporan customer

## Data Base
Database  adalah  suatu  sistem  yang  menyimpan informasi  agar  mudah  diakses  dengan  menggunakan program  komputer. Database merupakan  kumpulan informasi  yang  terorganisasi  dengan  baik  dan  dapat diakses  dengan  mudah  untuk  memenuhi  kebutuhan orang-orang  tertentu  [9].  Pengertian  lain database adalah kumpulan data yang terorganisir dan terhubung untuk memenuhi kebutuhan organisasi [7].
Basisdata  sistem  pemesanan  dan  penjualan  barang menggunakan DBMS (Database Majamenent System) MySQL.  MySQL  didasarkan  pada  konsep  database

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 9 No1 Jan – Jun 2023, 57 - 62
yang  sudah  ada, Structured  Query  Language (SQL). SQL  memungkinkan  komputer  untuk  dengan  mudah melakukan  manipulasi  data  [14].  Basis  data  ini digunakan untuk menyimpan data-data yang digunakan pada  sistem.  Rancangan  logis  basis  data  yang menunjukkan relasi antar entitas dimodelkan
menggunakan  CDM  (conceptual  Data  Model)  yang ditunjukan  oleh  gambar  3.  Sedangkan  implementasi tabel-tabel fisik pada  basis  data  dimodelkan menggunakan PDM (Physical Data Model),
ditunjukkan oleh Gambar 4 .
Gambar 3. CDM (Conceptual Data Model )
Gambar 4 . PDM (Physical Data Model)
2.5. . Membangun Sistem
Pada  tahapan  membangun  sistem  ini  dijelaskan  1. mengenai  setiap  langkah-langkah  algoritma  kegiatan yang    berada  dalam  sistem  ini  untuk  menyelesaikan penelitian yang diilustrasikan dalam bentuk flowchart. 2. Software yang digunakan

## 1. Flowchart Login
Flowchart adalah  representasi  grafis  dari  langkah- langkah dan urutan prosedur suatu program. Flowchart dapat  membantu  memecah  masalah  menjadi  segmen
yang  lebih  kecil  dan  menganalisis  alternatif  dalam operasi [11].
Alur flowchart  login  customer ini  dapat  dilihat  pada gambar 5 Flowchart Login . Alurnya dimulai dari saat customer ingin  melakukan  login,  apabila  tidak  punya akan masuk ke halaman registrasi dan memasukkan
Gambar 5 Flowchart Login
nama,  email,  password,  telepon  dan  alamat  untuk mendaftar  sebagai customer setelah  selesai  mendaftar akan  muncul  notifikasi  bahwa  registrasi  berhasil  dan kemudian  akan  dialihkan  ke  halaman  login  untuk memasukkan  email  dan  password  apabila  data  login sesuai  maka  akan  dialihkan  ke  halaman  dashboard, apabila data  tidak  sesuai akan  tetap berada dihalaman login  dan  jika customer lupa  akan  passwordnya  akan dialihkan  ke  halaman  lupa  password  kemudian customer memasukkan email, selanjutnya akan terjadi proses mereset password dan password akan dikirim ke email, kemudian akan dialihkan ke halaman login.

## 2. Flowchart Penjualan Produk
Alur flowchart penjualan produk ini dapat dilihat pada gambar 6 Flowchart Penjualan Produk. Pada alur ini

## Melek IT

## Information Technology Journal. Vol 9 No 1 Jan - Jun 2023, 58 - 62
Gambar 6 Flowchart Penjualan Produk
customer memilih  produk  yang  akan  dibeli  dan memasukkan  produk  dan  jumlah  produk  ke  dalam keranjang, jika customer ingin melakukan belanja lagi maka  akan  dialihkan  ke  proses  memilih  produk,  jika tidak customer wajib memasukkan data penerima dan metode  pengiriman,  jika  data  benar  akan  lanjut  ke proses checkout dan mendapat informasi pesanan telah ditambahkan,  jika  tidak  akan  dikembalikan  ke  proses memasukkan data penerima dan metode pengiriman.

## 3. Flowchart Pembayaran Produk
Alur flowchart pembayaran  produk  ini  dapat  dilihat pada gambar 7 Flowchart Pembayaran Produk dibawah ini.  Pada flowchart pembayaran  produk  ini customer mulai  masuk  ke  halaman  pembayaran  dan  memilih metode pembayaran kemudian mengisi data pembayaran  jika  data  tidak  benar  akan  kembali  ke proses mengisi data pembayaran, jika data sudah benar customer melakukan  proses submit pembayaran  dan mendapatkan informasi status pesanan.
Gambar 7 Flowchart Pembayaran Produk
4. Flowchart Laporan Penjualan
Alur flowchart laporan  penjualan  ini  dapat  dilihat pada  gambar  8 Flowchart Laporan  Penjualan.  Pada alur  data  ini  admin  dan owner mulai  masuk  ke halaman  laporan  penjualan  dan  melakukan  input tanggal awal dan tanggal akhir, kemudian sistem akan menampilkan  laporan  penjualan  berdasarkan  input tanggal  awal  dan  tanggal  akhir,  apabila  ingin mencetak  laporan  penjualan  akan  dialihkan  ke tampilan  cetak  laporan  penjualan  dan  menampilkan hasil cetak.
5. Flowchart Laporan Customer
Alur flowchart laporan customer ini dapat dilihat pada gambar  9 Flowchart Laporan Customer .  Pada  alur data  ini  admin  dan owner mulai  masuk  ke  halaman laporan customer dan melakukan input tanggal awal dan tanggal akhir, kemudian sistem akan menampilkan  laporan customer berdasarkan  input tanggal  awal  dan  tanggal  akhir,  apabila  ingin mencetak  laporan customer akan  dialihkan  ke
tampilan  cetak  laporan customer dan  menampilkan hasil cetak.
Gambar 8 Flowchart Laporan Penjualan
Gambar 9 Flowchart Laporan Customer
6. Flowchart Laporan Stok Produk
Alur flowchart laporan customer ini  dapat  dilihat pada  gambar  10 Flowchart Laporan  Stok  Produk. Pada alur data ini admin dan owner mulai masuk ke halaman  laporan  stok  produk  dan  sistem  akan menampilkan  laporan  stok  produk,  apabila  ingin mencetak  laporan  stok  produk  akan  dialihkan  ke tampilan cetak laporan stok produk dan menampilkan hasil cetak.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 9 No1 Jan – Jun 2023, 59 - 62
Pada  tahap  ini  software  yang  digunakan  untuk membangun  sistem  menggunakan  perangkat  lunak Microsoft  Visual  Studio  Code  versi  1.53.2  dengan memakai bahasa pemrograman HTML, PHP, CSS dan MySQL  sebagai database nya.  Program  XAMPP  juga digunakan sebagai penghubung MySQL dengan bahasa pemrograman PHP.

## III. HASIL DAN PEMBAHASAN
Pada  tahapan  implementasi  sistem  ada  beberapa  hal yang  perlu  disiapkan  untuk  membangun  sistem  yaitu, perencanaan  sistem,  membuat  rancangan  antarmuka, pengkodean menggunakan Visual Studio Code sebagai editor  penulisan  bahasa  pemrograman  yang  berfungsi untuk  membangun  sebuah  web  dan  menggunakan MySQL Database sebagai  penyimpanan  data  yang digunakan serta Google Chrome sebagai web browser.

## 3.1. Implementasi Database
Tahap  ini  bertujuan  untuk  merancang  desain  sistem yang  akan  digunakan  dalam  melakukan  penyimpanan data yang dibutuhkan oleh sistem.

## 1) Database Users
Pada  database  users  terdapat  beberapa  atribut  yang meliputi  id_user,  atribut  nama,  atribut  email,  atribut username,  atribut  password,  atribut  akses_level  dan atribut tanggal_update.

## 2) Database Kategori
Pada database rekening terdapat beberapa atribut yaitu id_rekening, atribut
Dalam database kategori  terdapat  beberapa  atribut yang meliputi id_kategori, atribut slug_kategori, atribut nama_kategori,  atribut  urutan,  atribut  gambar  dan atribut tanggal_update.

## 3) Database Produk
Pada database produk memiliki beberapa atribut yang meliputi id_produk, atribut id_user, atribut id_kategori,  kode_produk,  nama_produk,  atribut slug_produk,  atribut  keterangan,  atribut  keywords, atribut  harga,  atribut  stok,  atribut  gambar,  atribut ukuran, atribut status_produk, atribut tanggal_post dan atribut tanggal_update.
4) Database Gambar
Pada database gambar  terdapat  beberapa  atribut yaitu meliputi id_gambar, atribut id_produk, atribut judul_gambar, atribut gambar dan atribut tanggal_update.
5) Database Rekening
Pada database rekening  terdapat  beberapa  atribut yaitu id_rekening, atribut id_user, atribut nama_bank, atribut nomor_rekening, atribut nama_pemilik, atribut gambar dan atribut tanggal_post.
6) Database Pelanggan
Pada database pelanggan terdapat beberapa atribut yaitu id_pelanggan, atribut status_pelanggan, atribut nama_pelanggan, atribut email, atribut password, atribut telepon, atribut alamat, atribut tanggal_daftar dan atribut tanggal_update.

## 7) Database Transaksi
Pada database transaksi  terdapat  beberapa  atribut yaitu  id_transaksi,  atribut  id_pelanggan,  atribut kode_transaksi,  atribut  id_produk,  atribut  harga, atribut jumlah, atribut total_harga, atribut tanggal_transaksi dan atribut tanggal_update.
Tujuan  pada  tahap  ini  untuk  menampilkan  hasil pengerjaan UI berdasarkan desain yang telah dibuat.

## 3.2. Halaman Utama
Pada halaman utama ini berisi tampilan produk
Gambar 11.  Halaman Utama
berdasarkan kategori serta banner yang telah dikelola oleh admin untuk ditampilkan pada halaman utama.

## 3.3. Halaman Registrasi Customer
Pada halaman ini berisi form yang digunakan untuk melakukan  registrasi  akun  untuk  dapat  mengakses website lebih  jauh  lagi  pada  tahap  ini customer diwajibkan mengisi nama, email, password, telepon dan  alamat  dan  terdapat  tombol  submit,  reset  untuk mereset isi form dan login untuk mengakses halaman login .
Gambar 12 .  Halaman Registrasi Customer
3.4. Halaman Login Customer
Pada halaman ini customer diwajibkan mengisi email

## Melek IT

## Information Technology Journal. Vol 9 No 1 Jan - Jun 2023, 60 - 62
Gambar 13. Halaman Login Customer
dan password yang telah didaftarkan untuk mengakses web.

## 3.5. Halaman Login Admin
Pada  halaman  ini  digunakan oleh  admin  dan owner untuk  melakukan login agar  dapat  mengakses halaman khusus untuk admin dan owner.
Gambar 14. Halaman Login Admin
3.6. Halaman Dashboard Admin
Pada halaman ini berisi menu dashboard , transaksi,produk, konfigurasi, pengguna, data pelanggan, data rekening, laporan transaksi, laporan stok produk dan laporan customer .
Gambar 15 .  Halaman Dashboard Admin

## 3.7. Halaman Kelola Data Kategori
Pada  halaman  ini  admin  mengelola  kategori  untuk ditampilkan  kepada customer, berisi  tampilan  data kategori serta menu tambah data, edit data dan hapus data.
Gambar 16. Halaman Kelola Data Kategori

## 3.8. Halaman Kelola Data Produk
Pada  halaman  ini  admin  mengelola  produk  untuk ditampilkan  kepada customer ,  berisi  tampilan  data produk serta menu tambah data, edit data dan hapus data.
Gambar 16. Halaman Kelola Data Produk

## 3.9. Halaman Transaksi
Pada  halaman  ini  admin  mengelola  transaksi  yang telah  dilakukan  oleh customer, berisi  data  pesanan produk dan menu konfirmasi pesanan, hapus pesanan serta cetak bukti transaksi.
Gambar 18 .  Halaman Transaksi
Gambar 19 .  Uji Coba Halaman Kategori
3.10. Hasil Uji Coba Sistem
Pada tahap ini dilakukan uji coba pada sistem.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 9 No1 Jan – Jun 2023, 61 - 62

## Uji Coba  ke 1
Uji coba pertama, yaitu membuat sistem e-commerce yang dapat menampilkan informasi produk berdasarkan kategori produk yang dipilih.
1. Langkah  pertama, customer masuk  ke  halaman kategori  dan  memilih  jenis  kategori  yang  ingin ditampilkan.
2. Setelah  memilih  kategori customer akan diarahkan  menuju  halaman  produk  berdasarkan kategori.
Gambar 20 .  Uji Coba Halaman Produk
3. Langkah terakhir yaitu customer memilih produk yang ingin dilihat dan ditampilkan rincian produk tersebut.
Gambar 21. Uji Coba Halaman Detail Produk

## Uji Coba 2
Uji  coba  kedua,  yaitu  membuat  sistem e-commerce yang  dapat  membuat  laporan  penjualan,  laporan  stok produk dan laporan customer .
1. Langkah  pertama, owner masuk  ke  halaman laporan  penjualan  dan  kemudian  memilih rentang tanggal awal dan akhir.
Gambar 22 .  Uji Coba Laporan Penjualan Step 1
2. Kemudian  langkah  kedua,  yaitu owner menekan tombol filter untuk menampilkan data transaksi  yang  terjadi  dari  tanggal  awal  dan tanggal akhir.
Gambar 23 .  Uji Coba Laporan Penjualan Step 2
IV. PENUTUP

## Kesimpulan
Dari  hasil  penelitian  rancang  bangun  sistem e- commerce berbasis website pada  toko  kosmetik  Belia Collection yang telah dilakukan maka dapat dijabarkan dalam beberapa poin yang tertera berikut ini :
1. Sistem  dapat  melakukan  transaksi  penjualan, pembayaran  dan  pembuatan  laporan  penjualan, laporan stok barang, laporan castemer.
2. Sistem  berhasil  menampilkan  informasi  produk berdasarkan kategori yang dipilih.
3. Sistem  dapat  melakukan  filter  data  dan menampilkan  laporan  sesuai  dengan  data  yang diinputkan,  sistem  juga  dapat  mencetak  laporan yang telah difilter.

## DAFTAR PUSTAKA
[1]  A. N. Nurhayati, A. Josi, and N. A. Hutagalung, “Rancang  Bangun  Aplikasi  Penjualan  Dan Pembelian Barang Pada Koperasi Kartika Samara Grawira Prabumulih,” J. Teknol. dan Inf. , vol. 7, no. 2, pp. 13–23, 2018, doi:
10.34010/jati.v7i2.490.
[2]  U. S. Ratulangi, B. A. Kasaedja, R. Sengkey, and O.  A.  Lantang,  “Rancang  Bangun  Web  Service Perpustakaan Universitas Sam Ratulangi,” J. Tek. Elektro  dan  Komput. ,  vol.  3,  no.  3,  pp.  38–50, 2014, doi: 10.35793/jtek.3.3.2014.5332.
[3]  C.  Aprillia,  E.  Astuti,  and  R.  Dewantara,  “ Analisis Sistem Informasi Reservasi Hotel (Studi Pada Sistem Informasi Reservasi Dewarna Hotel Letjen Sutoyo Malang),” J. Adm. Bisnis S1 Univ. Brawijaya , vol. 44, no. 1, pp. 111–117, 2017.
[4]  D.  Andrean  Nur  Wicaksono  and  H.  Ed  Dien, “Rancang  Bangun  E-Commerce  Berbasis  Web menggunakan  PHP  dan  Mysql  di  CV.  Sumber Raya Jember,” Semin. Inform. Apl. Polinema , p. 2021, 2021.
[5]  E. Turban and D. King, Electronic Commerce: A Managerial Perspectivee . 2008.
[6]  M.  Faris  and  A.  Wisaksono,  “Pengembangan Aplikasi E-Commerce Untuk Pemasaran Biji dan Bubuk Kopi Berbasis Web (Studi Kasus D’Votee

## Melek IT

## Information Technology Journal. Vol 9 No 1 Jan - Jun 2023, 62 - 62
Coffee) Development of E-Commerce
Application for Web-Based Marketing of Coffee Seeds  and  Powder  (Case  Study  of  D’Votee Coffee),” J. Janitra Inform. dan Sist. Inf. , vol. 1, no. 1, pp.
61–72, 2021,
doi:
10.25008/janitra.v1i1.116.
[7]  L.  A.  Utami  and  S.  N.  Khasanah,  “Sistem Informasi  Penjualan  Kerajinan  Tempurung Kelapa  Berbasis  Web  Pada  Butik  ‘Wood  & Coconut,’” J.  Penelit.  Tek.  Inform. ,  vol.  2,  no. April 2018, p. 2, 2018.
[8]  J. William, J. Pengabdian, K. Masyarakat, and F. I.  Komputer,  “Sistem  Informasi  Ukm  Berbasis Website Pada Desa Sumber Jaya,” J. Teknol. Inf. dan  Bisnis  Pengabdi.  Masy.  Darmajaya ,  vol.  1, no. 1, pp. 1–16, 2015.
[9]  E.  Helmud,  “Optimasi  Basis  Data  Oracle Menggunakan  Complex  View  Studi  Kasus :  Pt.
Berkat Optimis Sejahtera (Pt.Bos) Pangkalpinan,” J. Inform. , vol. 7, no. 1, pp. 80– 86, 2021.
[10]  M.  Christianti  and  T.  Handoko,  “Aplikasi Pemesanan  Kamar  Serta  Pengelolaan  Data Kamar Secara Mobile pada Hotel Le Beringin,” J. Sist. Inf. , vol. 5, no. 2, pp. 123–140, 2012.
[11]  Ilham  Akhsanu  Ridlo,  “Pedoman  Pembuatan Flowchart,” Academia.Edu ,  p.  14,  2017, [Online]. Available: https://www.academia.edu/34767055/Pedoman_ Pembuatan_Flowchart.
[12]  A.  Josi,  “Penerapan  Metode  Prototyping  Dalam Membangun  Website  Desa  (Studi  Kasus  Desa Sugihan Kecamatan Rambang),” Jti , vol. 9, no. 1, pp. 50–57, 2017.
[13]  E.  Ernawati,  A.  Johar,  and  S.  Setiawan, “Implementasi  Metode  String  Matching  Untuk
Pencarian  Berita  Utama  Pada  Portal  Berita Berbasis  Android  (Studi  Kasus:  Harian  Rakyat Bengkulu),” Pseudocode , vol. 6, no. 1, pp. 77–82,
2019, doi: 10.33369/pseudocode.6.1.77-82.
[14]  S.  Lestanti  and  A.  D.  Susana,  “Sistem Pengarsipan  Dokumen  Guru  Dan  Pegawai Menggunakan Metode Mixture Modelling Berbasis  Web,” Antivirus    J.  Ilm.  Tek.  Inform. , vol.  10,  no.  2,  pp.  69–77,  2016,  doi: 10.35457/antivirus.v10i2.164.
[15]  S.  Sarwindah,  “Sistem  Pendaftaran  Siswa  Baru Pada  SMP  N  1  Kelapa  Berbasis  Web Menggunakan Model UML,” J. Sisfokom (Sistem Inf.  dan  Komputer) ,  vol.  7,  no.  2,  pp.  110–115, 2018, doi: 10.32736/sisfokom.v7i2.573.
[16]  R.  Sanjaya  and  S.  Hesinto,  “Rancang  Bangun Website  Profil  Hotel  Agung  Prabumulih Menggunakan Framework Bootstrap,” J. Teknol. dan  Inf. ,  vol.  7,  no.  2,  pp.  57–64,  2018,  doi: 10.34010/jati.v7i2.758.
[17]  K. E. Kendall and J. E. Kendall, Systems Analys And Design . 2014.
[18]  D.  Devianty,  R.  N.  Ibrahim,  and  H.  Wahyudi, “Perancangan  Sistem  E-Arsip  Menggunakan Subject  Filing  System  Berbasis  Framework CodeIgniter  (Studi  Kasus  STMIK  Mardira Indonesia),” vol. 15, no. 2, pp. 100–107, 2021.
[19]  D.  S.  Perbawa  and  G.  S.  Nurohim,  “Pengujian Aplikasi  Berbasis  Website  Dengan  Black  Box Testing  Metode  Boundary  Value  Analysis  Dan Responsive  Testing,” J.  Speed–Sentra  Penelit.
Eng. dan Edukasi , vol. 12, no. 4, pp. 1–5, 2020.
[20]  R.  S.  Pressman, Software  Engineering:  A Practitioner’s Approach. 7th Edition. New York : McGraw-Hill. 2010.