## Pembuatan Online Shop Tera Computer Menggunakan Framework Laravel
Joni Evendi a,1,* , Donna Setiawati a,2 , Fera Tri Wulandari a,3
a Universitas Boyolali, Jl. Pandanaran No.405 Winong, Boyolali, Boyolali, Jawa Tengah 57315, Indonesia
1 jonievendi@gmail.com *; 3 jitudonna@gmail.com ; 4 fera3w@gmail.com * Korespondensi penulis
Submission 23/11/2023 , Revision 07/5/2024 , Accepted 30/5/2024

## Abstract
Tera Computer promotes products through social media. Although transactions via social media require contact with admins and raise consumer confidence concerns regarding  unclear product  names, online businesses allow them to reach distant customers. This website-based online shop system aims to promote the shop, simplify sales and reduce operational costs. Consumers can make transactions and search for goods  without  needing  to  contact  the  seller,  with  easy  access  via  the  website  without  installing  an application. The Tera Computer online shop system uses the Laravel framework which makes it easier to create programs, integrated with Midtrans and Raja Ongkir. Integration with Vue Js creates interactive displays, Midtrans makes automatic transactions easier, while RajaOngkir helps calculate shipping costs. This system makes it easier for customers to make transactions and procure goods and helps sellers with promotions and operational savings.
Keywords: online shop, website marketing, Laravel, Vue Js, automatic transactions

## Abstrak
Tera Computer mempromosikan produk melalui media sosial. Meskipun  transaksi  melalui media sosial memerlukan  kontak  dengan  admin  dan  memunculkan  kekhawatiran  kepercayaan  konsumen  terkait ketidakjelasan  nama  barang,  bisnis  online  memungkinkan  mereka  menjangkau  pelanggan  yang  jauh. Sistem online shop berbasis website ini bertujuan mempromosikan toko, mempermudah penjualan, dan mengurangi  biaya  operasional.  Konsumen  dapat melakukan  transaksi  dan  pencarian  barang  tanpa perlu menghubungi penjual, dengan akses mudah melalui website tanpa instalasi aplikasi. Sistem online shop Tera Computer menggunakan framework Laravel yang mempermudah pembuatan program, diintegrasikan dengan  Midtrans  dan  Raja  Ongkir.  Integrasi  dengan  Vue  Js  membuat  tampilan  interaktif,  Midtrans memudahkan transaksi otomatis, sementara RajaOngkir membantu perhitungan ongkos kirim. Sistem ini mempermudah pelanggan dalam transaksi dan pengadaan barang dan membantu penjual dalam promosi dan penghematan operasional.
Kata kunci: online shop, website marketing, Laravel, Vue Js, transaksi otomatis
This is an open access article under the CC BY-SA license.

## 1. Pendahuluan
Teknologi dan penggunaan internet semakin berkembang pesat di era globalisasi ini. Hampir semua orang pada zaman modern menggunakan teknologi dan internet, sehingga perkembangan bisnis melalui media internet  juga  semakin  meningkat, terutama  di  Indonesia. Sebagai  generasi  muda, kita  harus memanfaatkan kemajuan teknologi dan penggunaan internet dengan baik. Muncul ide untuk memanfaatkan peluang bisnis berbasis  online,  yaitu  online  shop,  karena  kemudahan  berbelanja  dan  berbagai  jenis  produk  dan  jasa  yang ditawarkan. Bisnis melalui media online semakin meningkat dan menjadi salah satu sarana promosi produk yang prospeknya sangat baik, karena penjual dapat menjangkau konsumen secara luas [1].
Banyak bisnis saat ini yang dijalankan hanya melalui media sosial atau online shop , tanpa memiliki toko  fisik.  Tera  Computer  adalah  toko  yang  bergerak  di  bidang  penjualan  alat  komputer,  CCTV  ( Closed Circuit Television ) dan jasa servis komputer, yang telah berdiri sejak tahun 2008 dan sekarang memiliki empat karyawan. Toko ini sering mempromosikan hasil penjualannya melalui Instagram, Facebook, atau WhatsApp,
serta  lewat  Shopee,  tetapi  akun  Shopee-nya  sering  diblokir  sehingga  sekarang  hanya  menggunakan  media sosial untuk pemasaran onlinennya. Transaksi melalui media sosial cukup merepotkan karena pembeli harus menghubungi  admin  melalui  kontak  person  untuk  menanyakan  produk  yang  lebih  spesifik  dan  melakukan transfer, tetapi menjalankan bisnis secara online memungkinkan untuk mencapai jarak yang tidak terjangkau oleh toko fisik. Namun, kendala yang dihadapi adalah sulitnya mendapatkan kepercayaan dari calon konsumen karena tidak ada nama barang yang jelas ketika akan melakukan transaksi.
Dalam era teknologi yang semakin canggih ini, keberadaan online shop memudahkan pembeli dalam mencari  produk  yang  diinginkan  tanpa  perlu  menghabiskan  waktu  dan  tenaga  untuk  datang  ke  toko  fisik. Online  shop adalah  sebuah  platform  digital  yang  digunakan  oleh  perusahaan  atau  individu  untuk  menjual produk mereka secara online. Konsep online shop memungkinkan penjual untuk melakukan transaksi tanpa harus bertatap muka langsung dengan pembeli, melainkan hanya perlu melakukan kesepakatan di antara kedua belah pihak melalui internet. Dalam online shop , pembeli dapat  melakukan pembelian dengan lebih mudah dan cepat, karena dapat mencari barang yang diinginkan secara langsung melalui internet. Hal ini membuat online shop semakin populer dan menjadi pilihan utama bagi banyak orang untuk berbelanja [2].
Framework  Laravel  telah  digunakan  pada  pengembangan  sistem  informasi  pelatihan  [3],  aplikasi penjualan online Butik Chaniago Jambi [4], aplikasi penjualan Emiracase [5], website knowledge management system di BPSDMD  Jawa Tengah  [6],  sistem penjualan alat instrumentasi listrik [7],  perancangan backend website startup Manawa [8],  aplikasi penyedia jasa freelance SMKN 3 Mataram [9], sistem informasi program studi  Teknik  Informatika  UNUSIA  [10],  sistem  informasi  manajemen  aktivitas  pembelajaran  [11],  sistem informasi pemberkasan perkuliahan [12] dan sistem informasi Sekolah Luarbiasa Matahati Jakarta [13].
Laravel menyediakan berbagai fitur yang memudahkan developer dalam membuat aplikasi web, seperti routing , authentication , dan database migration [14]. Midtrans adalah perusahaan finansial berbasis teknologi yang menyediakan layanan payment gateway untuk pelaku usaha yang ingin melakukan transaksi online [15]. Laravel  juga  pernah  digunakan  untuk  membuat  sistem  informasi  sekolah  di  Sekolah  Luarbiasa  Matahati Jakarta  dengan  metode waterfall terbukti  berhisil  berjalan  dengan  baik  [16].  Metode waterfall merupakan pendekatan yang bersifat sekuensial atau sistematis, yang memudahkan penulis untuk melakukan penelitian bertahap.  Laravel  pernah  digunakan  dalam  pembuatan  sistem  informasi  pemberkasan  perkuliahan  dengan menggunakan metode pengujian black box testing sehingga dapat membuat sistem berjalan baik. Black box testing adalah tahapan pengujian software atau perangkat lunak yang bertujuan  untuk mengevaluasi kinerja sistem dan tampilannya, sehingga dapat dilakukan pengembangan yang baik pada sistem tersebut.
Berdasarkan  masalah  di  Tera  Computer  sebelumnya,  peneliti  akan  mengembangkan  sebuah  sistem online shop berbasis website. Sistem ini diharapkan dapat membantu dalam mempromosikan toko tersebut, membatu proses penjualan, mengurangi biaya operasional. Dengan sistem yang dibangun, diharapkan dapat mempermudah  konsumen  dalam  melakukan  transaksi  dan  pencarian  barang  yang  diinginkan  tanpa  harus menghubungi penjual serta mudah diakses dimana saja dan tidak perlu install aplikasi karena online shop ini berbasis website. Sistem ini akan menggunakan framework Laravel karena banyak penelitan yang sebelumnya berhasil membuat sistem website menggunakan Laravel serta menggunakan payment gateway Midtrans yang mendukung manajemen bisnis seperti dashboard untuk memantau transaksi dan menganalisis data penjualan. Penelitian  ini  juga  akan  mengintegrasikan  RajaOngkir  API  untuk  menghitung  perkiraan  biaya  pengiriman untuk  setiap  pesanan.  RajaOngkir  adalah  sebuah  layanan  web service (API)  yang  menyediakan  informasi mengenai ongkos kirim dari berbagai jasa ekspedisi di Indonesia.

## 2. Metode
Metode  yang  digunakan  dalam  pengumpulan  data  yaitu  metode  penelitian  kualitatif  yaitu  dengan observasi  lapangan  dan  wawancara  secara  langsung  dengan  karyawan  Tera  Computer.  Dari  hasil  observasi lapangan dan wawancara diperoleh data yaitu data produk meliputi nama produk, jumlah stok, dan harga produk dan data profil perusahaan Tera Computer.

## 2.1. Prosedur Kerja Penelitian
Metode yang digunakan dalam pembuatan online shop Tera Computer dengan framework Laravel yaitu menggunakan  metode waterfall . Tahapan  prosedur  yang  dilakukan  berdasarkan  Gambar  1, yaitu  tahap  studi literatur  akan  membantu  penulis  dalam  melakukan  penelitian  dan  mendukung  teori  untuk  penelitian  dengan mengambil  referensi  dari  berbagai  sumber  seperti  jurnal  ilmiah,  buku,  ataupun  situs  resmi.  Tahap  analisis kebutuhan adalah tahap kedua dalam melakukan penelitian terdahadap kebutuhan yang dibutuhkan oleh sistem informasi  yang  akan  dibuat  dengan  cara  wawancara.  Tahap  perancangan  adalah  tahap  dimana  peneliti merancangan  sistem  yang  digambarkan  dengan  arsitektur  website,  use  case  diagram,  dan  design  database. Setelah  perancangan  selesai,  dilakukan  implementasi  program  menggunakan  database  MySQL,  framework Laravel, Vue Js dan Boostrap, serta melakukan integrasi dengan payment gateway Midtrans dan RajaOngkir API  untuk  melengkapi  proses  transaksi.  Tahap  pengujian  dilakukan  setelah  implementasi  sistem  selesai. Pengujian  dilakukan  dengan  cara black  box  testing untuk  memastikan  sistem  yang  dirancang  sesuai  dengan sistem yang  diimplementasikan.  Peneliti  menggunakan black  box  testing karena  pada  penelitian  sebelumnya terbukti  efektif  untuk  pengujian  sebuah  sistem  website.  Tahap  terakhir  adalah  penarikan  kesimpulan  yang dilakukan setelah pengujian dan analisis selesai dilakukan.
Gambar 1. Prosedur Kerja

## 2.2. Metode Analisis dan Desain
Analisi  dan  desain  website  online  shop  Tera  Computer  dilakukan  untuk  mengimplementasikan arsitektur Model View Controller dengan menggunakan Unified Modelling Language (UML). Pemodelan dimulai dari desain arsitektur website, use case diagram, dan design database. Pemodelan perangkat lunak menggunakan UML dan direncanakan terlebih dahulu dengan pemilik toko Tera Computer agar sistem yang dibangun selaras dengan bisnis yang sedang berjalan dan memberikan kepuasan bagi pemilik dan pengguna. Dengan  adanya feedback positif  dari  pengguna,  sistem  yang  direncanakan  dapat  memenuhi  kebutuhan pemilik toko dan pengguna. Arsitetur website terlihat pada gambar dan pemodelan ini menjadi titik awal perancangan yang disesuaikan dengan keinginan user.
Gambar 2. Arsitektur Website
Pada Gambar 2, terlihat arsitektur website yang digunakan pada online shop Tera Computer. Pengguna dapat mengakses website melalui browser dengan jaringan internet. Ketika pengguna melakukan request melalui
alamat  URL  yang  diakses,  framework  Vue  Js  sebagai  presentation  akan  melakukan  response  dengan menampilkan halaman beranda website. Data untuk halaman tersebut berasal dari response RESTful API yang ada pada backend framework Laravel, kemudian diteruskan ke model view controller (MVC) untuk diproses lebih lanjut ke bagian model , melakukan request server dan request ke database. Data hasil request tersebut akan dikembalikan dalam bentuk response oleh controller dan ditampilkan dalam bentuk view atau presentation .

## Gambar 3. Use Case
Untuk melakukan pemesanan barang di Online Shop Tera Computer, pengguna harus membuat akun terlebih dahulu. Setelah berhasil membuat akun, pengguna dapat login menggunakan fitur Auth yang akan ditangani oleh Json Web Token untuk menghasilkan kode token yang digunakan untuk hak akses keamanan yang dikelola oleh controller pada framework Laravel. Sementara itu, visitor hanya dapat mengakses website untuk melihat dan mencari  produk  tanpa  harus  melakukan register dan login pada  website.  Namun, visitor dapat  melakukan r egister pada website dengan memasukkan nama, email, dan password. Setelah berhasil register dan memiliki akun, visitor dapat melakukan login dan melakukan order produk pada website. Untuk owner hanya bisa login dan  mengakases  dashboard  serta mengontrol  pesanan  dan juga mengontrol produk untuk  mendownload  data yang ada pada sistem online shop.
Pada  Gambar  4,  menunjukkan  diagram design  database hubungan entitas ,  dengan  tabel-tabel  yang menunjukkan relasi antara penyimpanan dan data pada website online shop Tera Computer.  Relasi antara tabel- tabel tersebut menggambarkan bagaimana data disimpan dalam sistem website online shop Tera Computer dan Laravel juga membantu dalam desain database.
Gambar 4. Desain Database
3. Hasil dan Pembahasan
3.1. Hasil
Hasil penelitian ini berupa sistem online shop Tera Computer yang dibuat dengan framework Laravel, diintegrasikan dengan Midtrans dan Raja Ongkir, serta diintegrasikan dengan Vue Js. Dalam membuat sistem online shop Tera Computer, Framework Laravel memudahkan programmer dalam membuat sebuah program, sedangkan  Vue  Js  digunakan  untuk  membuat  tampilan  pelanggan  menjadi  lebih  interaktif.  Midtrans  akan memudahkan  pelanggan  maupun  penjual  dalam melakukan transaksi  secara otomatis,  sementara  RajaOngkir memudahkan  perhitungan  ongkos  kirim.  Dengan  adanya  sistem  ini,  pelanggan  dapat  dengan  mudah mendapatkan barang yang ingin dibeli serta mempermudah proses transaksi, sedangkan bagi penjual, sistem ini memudahkan dalam melakukan promosi dan menghemat operasional.
Gambar 5. Tampilan Login
Dalam  sistem online  shop Tera  Computer terdapat  4  pengguna yaitu visitor , customer memiliki  halaman sendiri sedangkan admin dan owner juga memiliki halaman sendiri. Untuk admin dan owner untuk memasuki halaman harus login terlebih dahulu seperti desain use case sebelumnya.
Gambar 6. Halaman Admin
Pada Gambar 5, merupakan tampilan login untuk admin dan owner yang dibuat dengan fitur laravel authentication ,  fitur  ini  memudahkan  dalam  proses login sehingga  tidak  perlu  membuat  kodingan login dari awal karena dalam laravel sudah tersedia fitur authentication yang memudahkan membuat program login .
Pada Gambar 6, merupakan halaman admin terdapat 6 menu antara lain Menu Dashboard untuk halaman menampilkan  status  pesanan,  statusnya  otomatis  diatur  oleh  Midtrans  dan  menampilkan  laporan  penjualan. Menu Produk terdapat sub menu kategori untuk mengatur kategori produk yang dimiliki dan sub menu produk untuk  mengelola  produk  yang  dimiliki.  Menu Orders untuk  mengelola  pesanan  dari customer yang  masuk. Menu Customer untuk mengelola data customer yang mendaftar. Menu Slider untuk mengelola banner promosi yang ingin ditampilkan dalam website. Menu Profile untuk mengelola pengaturan akun admin .
Pada Gambar 7, merupakan tampilan menu terdapat menu produk didalamnya ada  sub menu kategori, dalam membuat menu atau sub menu Laravel memiliki fitur templeting blade yang membantu untuk membuat tampilan website dengan mudah. Dalam templeting blade bisa membuat tampilan secara terpisah tapi saling terhubung misalnya header , footer , isi menu dashboar , isi menu kategori dll. Dengan templating blade bisa mengubungkan semua menu dan juga memudahkan pengelolaannya jika ingin mengedit tampilannya dan peneliti juga dibantu dengan Boostrap dalam membuat warna, tataletak, dan responsive webnya. Dalam sub menu kategori admin bisa menambah, mengedit, mencari dan menghapus kategori produk yang dibutuhkan dalam sistem. Dalam pembuatannya Laravel memiliki fitur routing resource yang membantu dalam  membuat  program  tambah,  edit  dan  hapus  sehingga  memudahkan  dalam  pengelolaan  pembuatannya terdapat  sub  menu  produk, admin dapat  menambahkan  produk  secara  manual  satu  satu  atau  dengan  import menggunakan excel sekaligus, jika import menggunakan excel harus hati-hati karena bisa jadi data terduplikasi jika data yang diimport di excel sudah diinputkan sebelumnya disarankan menggunakan tambah produk yang
Gambar 7. Tampilan Menu
Vol. 8, No. 1, Mei 2024, pp. 41-51
manual.  Dalam  sub  menu  produk  admin  juga  dapat  mengedit,  menghapus  serta  mencetak  PDF  sehingga memudahkan dalam pengelolaannya.
Dalam menu order, admin dapat mengecek data customer yang order atau pesan produk, status akan berganti  otomatis  jika customer melakukan  pembayaran  di  Midtrans  dan  grand  total  sudah  ditambahkan perhitungan yang dihitung dengan RajaOngkir dan dapat mencetaknya kedalam PDF. Dalam menu customers , admin dapat mengelola data customer yang mendaftar didalam sistem dan dapat menamfaatkan data email untuk promosi marketing dan juga dapat mencetaknya dalam PDF. Menu sliders, admin dapat mengupload gambar promosi agar para customer atau visitor dapat melihat promo yang ada di Tera komputer dalam sistem online shop.  Menu  profile,  admin  dapat  mengelola  akun  pribadi  terkait  mengubah  nama,  email  dan  mengganti password. Untuk akun owner tampilannya hampir sama dengan Gambar 6, hanya saja terdapat perbedaan yaitu dalam dashboard dapat memantau pendapatan orderan yang masuk dan juga dapat mengatur akun admin dan owner , dalam akun owner juga dapat mengontrol menu produk dan order untuk memantau pengelolaan produk dan  order  dan juga dapat  mencetak laporan dalam format PDF  dan juga bisa mengakses menu profile  untuk mengedit akun pribadi seperti pada akun admin .
Gambar  8  merupakah  halaman  utama  untuk visitor atau customer ,  dimana  terdapat  banner  promo.  Menu kategori, menu keranjang dan menu dashboard , untuk menu keranjang dan dashboard harus punya akun dahulu, bisa daftar dahulu kemudian dapat login dan memasuki menu tersebut. Halaman tersebut dibuat memnggunakan Vue Js agar tampilan lebih interaktif dan cepat.
Gambar 9 merupakan meu lanjutan dari menu utama, pelanggan terdapat pilihan produk dan dapat melakukan pencarian produk. Tombol lihat produk untuk melihat halaman detail produk dimana terdapat informasi terkait produk  terkait  berat,  stok  dan  keterangan  produk,  pelanggan  juga  dapat  menambahkan  ke  keranjang  produk tersebut setelah login terlebih dahulu.
Gambar  8. Halaman Utama Onlie Shop
Gambar 9.  Lanjutan Halaman Utama
Gambar 10 merupakan halaman keranjang yang berisikan barang yang akan di order oleh pelanggan, disini menggunakan fitur Rajaongkir yaitu secara otomatsi melakukan perhitungan ongkos kirim sesuai dengan alamat di formnya dan sesuai berat dari barang tersebut dalam satuan gram.
Gambar 11 merupakan halaman detail order yang menggunakan fitur Midtrans sebagai media pembayarannya, bisa  melakukan  pembayaran  melalui  media  yang  disediakan  oleh  Midtrans  dan  terdapat  waktu  limit pembayarannya dan akan secara otomatis mengkonfirmasi lunas jika suda membayar.

## 3.2. Pembahasan
Implementasi website toko online terdiri dari dua halaman yaitu halaman backend atau halaman admin dashboard dan  halaman frontend atau  halaman customer atau  pelanggan.  Halaman backend dibuat  dengan menggunakan framework Laravel, sementara halaman frontend dibuat dengan Vue Js. Kedua halaman tersebut terhubung  dengan  adanya  RESTful web  service yang  berfungsi  untuk  proses  pertukaran  data  antara  kedua halaman tersebut. Sistem ini menggunakan payment gateway Midtrans mengelola transaksinya sehingga secara otomatis untuk mengelola transaksinya dan juga dibantu RajaOngkir API perhitungan biaya pengiriman untuk setiap pesanan.
Sistem toko online ini memiliki fitur banner yang terdapat pada Gambar 8, Fitur ini berfungsi sebagai media  promosi  baik  untuk  promosi  bulanan  maupun  acara  tertentu,  sehingga  pelanggan  dapat  mengetahui promo-promo yang ada di Tera Computer dengan mengecek langsung di website mereka. Pengelolaan promosi juga  mudah  seperti  yang terlihat  pada  Gambar  7, pada  menu  slider, admin dapat  menambah  atau  mengganti gambar  yang  dipromosikan.  Selain  itu, admin juga  dapat  memberikan  harga  promo  dengan  menambahkan diskon pada menu produk.
Sistem ini memudahkan pelanggan dalam mencari barang yang diinginkan karena dilengkapi dengan fitur  pencarian  barang,  seperti  yang  terlihat  pada  Gambar  9.  Selain  itu,  pelanggan  juga  dapat  mengetahui deskripsi, harga, dan stok produk, dengan mengklik detail produk. Dengan begitu, pelanggan dapat menghemat waktu karena tidak perlu pergi ke toko fisik untuk mencari barang yang diinginkan. Selain itu, pelanggan juga
Gambar 10. Halaman Keranjang
Gambar 11. Detail Order
tidak perlu melakukan chatting dengan admin dan menunggu balasan untuk menanyakan ketersediaan barang yang diinginkan.
Dengan integrasi Midtrans dalam sistem ini, pelanggan dapat melakukan transaksi langsung dari mana saja dan kapan saja dengan masuk ke website toko online Tera Computer. Pelanggan dapat checkout  barang yang diinginkan dan melakukan transfer melalui menu pembayaran yang disediakan oleh Midtrans, seperti yang terlihat  pada  Gambar  11.  Hal  ini  memudahkan  transaksi  pelanggan  tanpa  perlu  melakukan chatting dengan admin dan menunggu balasan dari admin. Sebelumnya, pelanggan harus melakukan chatting dengan admin dan menunggu balasan, yang memakan waktu cukup lama tergantung pada admin .
Dalam sistem ini, menu-menu disusun dengan rapi dan terbagi dengan baik, sebagaimana terlihat pada Gambar  6.  Hal  ini  memudahkan admin dalam  mengelola  sistem  online,  baik  itu  untuk  mengelola  kategori, produk, transaksi, pelanggan, banner, atau pengaturan akun. Dengan tata letak yang terstruktur, sistem ini dapat digunakan dan dipelajari oleh siapa saja tanpa perlu kebingungan. Pengguna tidak perlu merasa pusing dalam menggunakan sistem tersebut.
Dengan sistem ini, toko tersebut dapat  beroperasi secara online selama 24 jam  sehingga tidak perlu menambah karyawan  untuk  bekerja  dalam  tiga  shift.  Toko  online Tera  Komputer  tetap  buka meskipun toko fisiknya  sudah  tutup,  sehingga  dapat  meningkatkan  pendapatan  jika  ada  orang  yang  berbelanja  online  pada malam hari. Dengan menggunakan sistem ini, toko dapat mencakup seluruh wilayah Indonesia secara online dan tidak perlu membuka cabang di kota tertentu untuk mencapai wilayah tersebut. Dengan demikian, sistem ini dapat menghemat biaya operasional.
Dalam  hal  pemrograman  atau  pembuatan  sistem online  shop ini,  Laravel  sangat  memudahkan  para programmer dalam mengembangkan sistem online shop Tera Computer. Salah satu fitur yang sangat berguna adalah  fitur migrate ,  yang  memudahkan  dalam  pembuatan  struktur  database.  Selain  itu,  terdapat  juga  fitur Laravel authentication seperti yang dijelaskan pada Gambar 5 , yang mempermudah para programmer dalam membuat  sistem login dan  menghemat  banyak  waktu.  Selanjutnya,  dengan  adanya  fitur middleware dalam Laravel seperti yang dijelaskan pada hasil sebelumnya, programmer dapat dengan mudah membuat multiuser. Fitur templating blade juga sangat membantu dalam pembuatan tampilan website dengan mudah, seperti yang dijelaskan  pada  hasil  sebelumnya.  Selain  itu,  fitur controller Laravel  juga  membantu  dalam validasi input , seperti  memastikan  bahwa  input  tidak  boleh  kosong,  memastikan  nama  kategori  tidak  boleh  sama  untuk mencegah duplikasi, dan membatasi input file.

## 3.3. Uji Coba Sistem
Pengujian  yang  dilakukan  untuk  memastikan  semua  fungsi  website  dapat  berjalan  sesuai  dengan kebutuhan dengan metode black box testing . Adapun tabel pengujian black box testing , adalah sebagai berikut:
Tabel 1. Pengujian Halaman Pelanggan
Tabel 2. Pengujian Halaman Admin
Kelas Skenario Hasil yang diharapkan Hasil Halaman Login Admin Input  username  dan  password  yang  telah terdaftar  di  database  akan  mengalihkan pengguna ke halaman dasboard Masuk  kedalam  halaman  dashboard admin. Sesuai Halaman Dasbor Admin Admin dapat melihat langsung data pendapatan  dan  transaksi  yang  terjadi  di sistem
Dapat mengecek transaksi yang masuk dan pendapatan yang diterima perbulan, tahun dan semuanya
Sesuai Halaman Kategori Admin  dapat  menambahkan,  mengedit, menghapus dan mencari kategori Data kategori bertambah jika ditambahkan, berubah jika di edit dan Sesuai
Kelas Skenario Hasil yang diharapkan Hasil Halaman Register Pelanggan Pelanggan membuat akun dengan memasukkan email dan password Masuk  kedalam  halaman  dashboard Pelanggan Sesuai Halaman Login Pelanggan Pelanggan memasukkan email dan password yang telah didaftarkan sebelumnya Masuk  kedalam  halaman  dashboard Pelanggan Sesuai Halaman Dashboard Pelanggan melihat data transaksi dan nota di menu halaman dashboard Pelanggan dapat melihat data transaksi dan nota di menu halaman dashboard Sesuai Halaman Utama Pelanggan  dapat  mencari  produk,  melihat detail produk terkait harga, stok dan deskripsi produk, serta dapat menambahkan kekeranjang bagi yang sudah login Semua fitur dapat dijalankan termasuk Fitur  search  bar  ,  nomor  halaman, detail  produk  dan  tombol  tambah keranjang. Sesuai Halaman Keranjang Pelanggan  dapat  order  dengan  memasukkan data nama no hp serta alamat, pelanggan juga dapat menghapus data produk yang tidak jadi di order. Fitur hapus data keranjang berhasil dan fitur  order  berhasil  dan  fitur  order secara  otomatis  menghitung  ongkos kirim sesuai alamat Sesuai Halaman Detail Order Pelanggan  dapat  mengecek  data  order  dan melakukan pembayaran di menu pilihan yang tersedia. Pembayaran  otomatis  secara  online langsung  dengan  payment  gatway midtrans Sesuai
Kelas Skenario Hasil yang diharapkan Hasil terhapus jika dihapus dan dapat dicari berdasarkan nama Halaman Produk Admin  dapat  menambahkan,  mengedit, menghapus dan mencari produk,serta mencetak laporan Data produk bertambah jika ditambahkan, berubah jika di edit dan terhapus jika dihapus dan dapat dicari atau filter serta dapat dicetak PDF Sesuai Halaman Slider Admin  dapat  menambahkan  dan  menghapus banner promosi Data  slider  promosi  bertambah  jika ditambahkan dan terhapus jika dihapus Sesuai Halaman Customer Admin  dapat  mengecek  dan  mencetak laporan customer. Data customer dapat tampil dan dicari serta dapat di cetak PDF Sesuai Halaman Order Admin  dapat  mengecek  transaksi  pelanggan dan mencetak laporan Data transaksi dapat tampil dan dicari serta dapat di cetak PDF Sesuai Halaman Pribadi Admin  dapat  mengubah  akun  nama  dan password pribadi Data akun pribadi nama dan password berubah Sesuai Tabel 3. Pengujian Halaman Owner Kelas Skenario Hasil yang diharapkan Hasil Halaman Login Owner Input  username  dan  password  yang  telah terdaftar  di  database  akan  mengalihkan pengguna ke halaman dasboard Masuk  kedalam  halaman  dashboard Owner Sesuai Halaman Dasbor Owner Owner dapat melihat langsung data pendapatan  dan  transaksi  yang  terjadi  di sistem dan mengedit dan menambahkan akun admin dan owner Dapat mengecek transaksi yang masuk dan pendapatan yang diterima perbulan,  tahun  dan  semuanya,  serta dapat  menambah  dan  mengedit  akun admin dan owner Sesuai Halaman Produk Owner dapat memonitoring data produk,serta mencetak laporan Data  produk  dapat  dimonitoring dengan  cara  dicari  dan  filtering  serta dapat dicetak PDF Sesuai Halaman Order Owner  dapat  mengecek  transaksi  pelanggan dan mencetak laporan Data transaksi dapat tampil dan dicari serta dapat di cetak PDF Sesuai Halaman Pribadi Owner  dapat  mengubah  akun  nama  dan password pribadi Data akun pribadi nama dan password berubah Sesuai
Hasil  pengujian black  box menunjukkan  bahwa  semua  kebutuhan  fungsional  telah  memenuhi persyaratan, sehingga sistem dapat digunakan dengan baik. Penelitian ini juga mendukung dengan penelitian sebelumnya  yaitu  penelitian  [3]  dan  [7]  yang  menggunakan  pengujian black  box  testing dalam  pengujian sistemnya  sehingga  sistem  berjalan  sesuai  dengan  kebutuhan  fungsionalnya.  Penelitian  ini  mendukung  oleh penelitian [3] [4] dan [5] yang berhasil menerapkan Midtrans dalam Laravel sebagai media pembayaran untuk mempermudah  proses  transaksi.  Perbedaan  antara  penelitian  penulis  dengan  penelitian  sebelumnya  adalah penggunaan framework Laravel yang diintegrasikan dengan Midtrans dan RajaOngkir. Hal ini membantu dalam perhitungan  ongkos  kirim  yang  lebih  efisien.  Selain  itu,  penulis  juga  mengintegrasikan  Vue  js  untuk menciptakan tampilan website yang lebih interaktif dan responsif khusus untuk pelanggan.

## 4. Kesimpulan
Berdasarkan  pembahasan  mengenai  pembuatan Online  shop Tera  Computer  dengan  framework  Laravel, terlihat  bahwa  sistem  ini  memberikan  kemudahan  bagi programmer dalam  menciptakan  sistem  yang memudahkan  pelanggan  untuk  mendapatkan  barang  yang  diinginkan,  memperlancar  proses  transaksi,  dan memungkinkan transaksi dilakukan di mana saja. Selain itu, sistem ini juga membantu admin dalam mengelola produk, menghemat  operasional,  serta  menjadi  sarana  promosi  dan  penjualan yang  efektif. Pengujian  sistem dilakukan menggunakan metode pengujian black box , yang bertujuan untuk menguji implementasi kebutuhan fungsional yang telah diimplementasikan. Hasil dari pengujian black box menunjukkan bahwa semua kebutuhan fungsional  telah  terpenuhi,  sehingga  sistem  dapat  digunakan  dengan  baik.  Framework  Laravel  yang diintegrasikan dengan Midtrans, Raja Ongkir, dan Vue Js berhasil memenuhi kebutuhan, memperluas penjualan, dan mempermudah proses transaksi.
Penulis memberikan saran bagi pengembang online shop Tera Computer yaitu perlu menambah fitur live komunikasi  di website ,  keuangan,  khususnya  untuk  mengelola  pengeluaran,  fitur  transaksi  offline  dan  fitur bayar ditempat sehingga pelayanan kepada pelanggan dapat lebih maksimal.
5. Daftar Pustaka
[1]  B. R. Prabowo, I. Arwani, and D. Pramono, “Pengembangan website toko online baju bekas (Studi Kasus : Toko Gudang Juma),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 5, no. 12, pp. 5413– 5420, 2021, [Online]. Available: https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/10246
Vol. 8, No. 1, Mei 2024, pp. 41-51
[2]  R. Mohamad Olii, M. H. Pratiknjo, and J. N. Matheosz, “Online Shop Sebagai Alternatif Berbelanja Masyarakat Kota Manado,” J. Holistik , vol. 13, no. 4, pp. 1–18, 2020.
[3]  R.  Somya  and  T.  M.  E.  Nathanael,  “Pengembangan  Sistem  Informasi  Pelatihan  Berbasis  Web Menggunakan Teknologi Web Service Dan Framework Laravel,” J. Techno Nusa Mandiri , vol. 16, no. 1, pp. 51–58, 2019, doi: 10.33480/techno.v16i1.164.
[4]  Lisdarti  and  R.  Hidayat,  “Perancangan  Aplikasi  Penjualan  Online  Untuk  Meningkatkan  Omset Penjualan (Studi Kasus : Butik Chaniago Jambi),” FORTECH (Journal Inf. Technol. , vol. 6, no. 1, pp. 38–43, 2022, doi: 10.53564/fortech.v6i1.876.
[5]  A. Nurhidayah and S. Kosasi, “Perancangan Perangkat  Lunak Penjualan Berbasis Website Dengan Framework Laravel Pada Emiracase,” e-Jurnal JUSITI (Jurnal Sist. Inf. dan Teknol. Informasi) , vol. 11, no. 01, pp. 24–35, 2022, doi: 10.36774/jusiti.v11i1.908.
[6]  A. K. Nugraha and R. Somya, “Perancangan Website Knowledge Management System Menggunakan Framework Laravel  Di Bpsdmd  Jawa Tengah,” J.  Pendidik.  Teknol. Inf. ,  vol.  5,  no.  2,  pp.  23–30, 2022, doi: 10.37792/jukanti.v5i2.523.
[7]  M. A. Suherman and R. E. Nainggolan, “PEMANFAATAN FRAMEWORK LARAVEL DALAM PEMBANGUNAN  SISTEM  PENJUALAN  ALAT  INSTRUMENTASI  LISTRIK  Utilization  of Laravel  Framework  in  Electrical  Instrumentation  Sales  System  Development,” J.  Inf.  Technol. Unimor , pp. 11–18, 2021.
[8]  F. Muhammad, R. Andreswari, S. Fajar, S. Gumilang, F. R. Industri, and U. Telkom, “Perancangan Backend Website Dengan Kerangka Kerja Vue Js Dan Laravel Pada Startup Manawa Dengan Metode Waterfall,” e-Proceeding Eng. , vol. 7, no. 2, pp. 7122–7130, 2020.
[9]  A. E. Noor and P. Irfan, “Implementasi Progressive Web Apps (PWA) Menggunakan Laravel Dan Vue.Js dalam Pembuatan Aplikasi Penyedia Jasa Freelance,” JTIM : Jurnal Teknologi Informasi dan Multimedia , vol. 2, no. 3. pp. 174–180, 2020. doi: 10.35746/jtim.v2i3.109.
[10] H. Fernandy and Arifin A Abd Karim, “Rancang Bangun Sistem Informasi Website Program Studi Teknik Informatika Unusia Menggunakan Metode Waterfall Dan Framework Laravel,” J. Publ. Ilmu Komput. dan Multimed. , vol. 1, no. 1, pp. 11–21, 2022, doi: 10.55606/jupikom.v1i1.230.
[11] P.  Setiawati,  P.  M.  Akhirianto,  and  M.  A.  Suardana,  “Penerapan  Framework  Laravel  Pada  Desain Sistem  Informasi  Akademik  SMK  Fajar  Sentosa,” ICIT  J. ,  vol.  9,  no.  1,  pp.  1–13,  2023,  doi: 10.33050/icit.v9i1.2638.
[12] T. Tanjung, “Perancangan Sistem Informasi Pemberkasan Arsip Dinamis Berbasis Web (Studi Kasus: PT.  Griya  Indah  Persada),” OKTAL  J.  Ilmu  Komput.  dan  Sains ,  vol.  2,  no.  2,  pp.  600–610,  2023, [Online].
Available:
https://journal.mediapublikasi.id/index.php/oktal/article/view/830%0Ahttps://journal.mediapublikasi .id/index.php/oktal/article/download/830/961
[13] S.  Akbar  and  F.  Latifah,  “Implementasi  Framework  Laravel  Pada  Sistem  Informasi  Sekolah Menggunakan Metode Waterfall Berbasis Web,” Jisamar , vol. 3, no. 4, pp. 45–53, 2019.
[14] F. A. Fauzi and F. Darmawan, “Pembangunan Aplikasi E-Commerce berbasis Website Menggunakan Laravel,” Pasinformatik , vol. 2, no. 6, pp. 1–7, 2023.
[15] F. gilang P. Ramadhan and M. Marlindawati, “Perancangan Website Pada Kantor Camat Mulak Ulu Kabupaten  Lahat  Dengan  Metode  Waterfall  Menggunakan  Framework  Laravel,” J.  Nas.  Ilmu Komput. , vol. 3, no. 3, pp. 93–106, 2022, doi: 10.47747/jurnalnik.v3i3.852.
[16] A. C. Praniffa, A. Syahri, F. Sandes, U. Fariha, Q. A. Giansyah, and M. L. Hamzah, “Pengujian Black Box  Dan  White  Box  Sistem  Informasi  Parkir  Berbasis  Web  Black  Box  and  White  Box  Testing  of Web-Based Parking Information System,” J. Test. dan Implementasi Sist. Inf. , vol. 1, no. 1, pp. 1–16, 2023.