Syntax Literate: Jurnal Ilmiah Indonesia p–ISSN: 2541-0849 e-ISSN: 2548-1398 Vol. 5, No. 12, Desember 2020

## PERANCANGAN  SISTEM  INFORMASI  TOKO  ONLINE  BERBASIS  WEB DENGAN MENGGUNAKAN LARAVEL DAN API RAJAONGKIR

## Ponsen Sindu Prawito dan Rahadi
Politeknik Praktisi Bandung Jawa Barat, Indonesia Email: ponsen@praktisi.ac.id dan rahadirpl@gmail.com

## Abstract
This research aims to design information systems for an online store based on the WEB.  The  design  of  information  systems  is  done  by  paying  attention  to  the development of the growing business world using digital devices, such as e-business, e-commerce,  e-learning,  e-banking  and  so  on.  Therefore  in  the  design  of  this information system, the author uses the WEB as a digital device. In this study, the authors use the Rapid Application Development (RAD) methodology, thus facilitating the creation and design of new systems. In addition to facilitate the author's planning using Laravel framework and back-end API RajaOngkir, so it becomes faster in its planning.  This  research  produces  something  new  that  is  the  ease  in  changing  the structure of product sales, which was previously offline, so that with this information system buyers can see all kinds of products sold without having to come to visit the store.
Keywords:  information  system;  WEB;  digital  devices;  e-commerce;  rapid  application

## development; laravel framework; back-end API rajaongkir

## Abstrak
Penelitian ini  bertujuan  melakukan  perancangan  sistem informasi  untuk  suatu  toko online  dengan  berbasis  WEB.  Perancangan  sistem  informasi  dilakukan  dengan memperhatikan  perkembangan  dunia  bisnis  yang  marak  menggunakan  perangkat digital, seperti e-bussiness, e-commerce, e-learning, e-banking dan sebagainya. Oleh karena  itu  dalam  perancangan  sistem  informasi  ini,  penulis  menggunakan  WEB sebagai  sebuah  perangkat  digitalnya.  Dalam  penelitian  ini,  penulis  menggunakan metodologi Rapid Application Development (RAD), sehingga mempermudah dalam pembuatan  dan  perancangan  sistem  yang  baru.  Selain  itu  untuk  memudahkan perancangan  penulis  menggunakan  framework  Laravel  dan  back-end  API RajaOngkir,  sehingga  menjadi  lebih  cepat  dalam  perancangannya.  Penelitian  ini menghasilkan  sesuatu  yang  baru  yaitu  kemudahan  dalam  mengubah  struktur penjualan  produk,  yang  sebelumnya  dengan  cara  offline,  sehingga  dengan  adanya sistem  informasi  ini  pembeli  bisa  melihat  segala  macam  produk  yang  dijual  tanpa perlu lagi harus datang mengunjungi toko.
Kata kunci: sistem informasi; WEB; perangkat digital; e-commerce, rapid application development, framework laravel; back-end API rajaongkir

## Pendahuluan
Perkembangan  internet  memang  cepat  dan  memberi  pengaruh  signifikan  dalam segala  aspek  kehidupan  kita.  Internet  membantu  kita  sehingga  dapat  berinteraksi, berkomunikasi, bahkan melakukan perdagangan dengan orang dari segala penjuru dunia dengan  murah,  cepat  dan  mudah.  beberapa  tahun  terakhir  ini  dengan  begitu  maraknya media internet menyebabkan banyaknya perusahaan yang mulai mencoba menawarkan berbagai macam produknya dengan menggunakan media ini. Dan salah satu manfaat dari keberadaan  internet  adalah  sebagai  media  promosi  suatu  produk.  Suatu  produk  yang dijalankan  melalui  internet  dapat  membawa  keuntungan  besar  bagi  pengusaha  karena produknya dikenal di seluruh dunia.
Menurut  (Jogiyanto,  2005)  sistem  adalah  suatu  jaringan  kerja  dari  prosedur- prosedur yang saling berhubungan, berkumpul bersama untuk melakukan suatu kegiatan atau  menyelesaikan  suatu  sasaran  yang  tertentu. Menurut  (Tata  Sutabri,  2005)  secara sederhana  sistem  dapat  diartikan  sebagai  suatu  kumpulan  atau  himpunan  dari  unsur, komponen, yang terorganisasi, saling berinteraksi, saling tergantung satu sama lain dan terpadu.
Menurut  (Kristanto,  2018)  bahwa  sistem  informasi  merupakan  kumpulan  dari perangkat  keras  dan  perangkat  lunak  komputer  serta  perangkat  manusia  yang  akan mengolah  data  menggunakan  perangkat  keras  dan  perangkat  lunak  tersebut.  Selain  itu data  juga  memegang  peranan  yang  penting  dalam  sistem  informasi.  Data  yang  akan dimasukkan  dalam  sebuah  sistem  informasi  dapat  berupa  formulir-formulir,  prosedur- prosedur dan bentuk data lainnya. Menurut (Hidayat, 2008) ada beberapa kelebihan yang dimiliki e-commerce dan  tidak  dimiliki  oleh  transaksi  bisnis  yang  dilakukan  secara offline .
Menurut (Laudon & Laudon, 1998) E-Commerce adalah suatu proses membeli dan menjual  produk  -  produk  secara  elektronik  oleh  konsumen  dan  dari  perusahaan  ke perusahaan  dengan  komputer  sebagai  perantara  transaksi  bisnis.  Media  yang  dapat digunakan dalam aktivitas e-commerce adalah world wide web internet . Menurut (Meier &  Stormer,  2009)  mekanisme  perdagangan  di  sistem e-commerce dijelaskan  melalui rantai  nilai  dalam e-commerce sebAagai  berikut E-Products dan E-Services , E- Procurement, E-Marketing, E-Contracting, E-Distribution, E-Payment dan E-Customer Relationship Management.
Metode Pembayaran E-Commerce Menurut (Prihatna, 2005) dalam transaksi yang menggunakan e-commerce terdapat 3 metode pembayaran yang dapat digunakan Online Processing Credit Card , Money Transfer dan Cash on Delivery . Menurut (Palil, 2005) berikut  beberapa  manfaat  yang  didapat  dalam  menggunakan e-commerce ,  yaitu menyediakan harga yang kompetitif, menyediakan jasa pembelian yang tanggap, cepat dan ramah, menyediakan informasi barang dan jasa yang lengkap dan jelas, memberikan perhatian  khusus  seperti  usulan  pembelian,  menyediakan  rasa  komunitas  untuk berdiskusi, masukan dari pelanggan, dan lain-lain, mempermudah kegiatan perdagangan, meningkatkan  mutu  layanan,  menarik  konsumen  untuk  tetap  bertahan,  dan  melayani konsumen tanpa batas waktu.
Menurut  (Husein,  2013) Bootstrap merupakan Framework ataupun Tools untuk membuat  aplikasi  web  ataupun  situs  web  responsive  secara  cepat,  mudah  dan  gratis. Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Typography, Table, Form, Navigation, dan lain-lain. Di dalam Bootstrap juga sudah terdapat jQuery plugins  untuk  menghasilkan  komponen  UI  yang  cantik  seperti Transitions,  Modal, Dropdown,  Scrollspy,  Tooltip,  Tab,  Popover,  Alert,  Button,  Carousel dan  lain-lain. Dengan  bantuan Bootstrap ,  kita  bisa  membuat  responsive  website  dengan  cepat  dan mudah  dan  dapat  berjalan  sempurna  pada  browser-browser  populer  seperti  Chrome, Firefox, Safari, Opera dan Internet Explorer.
Menurut  (Agus,  2011)  “PHP  merupakan  suatu  bahasa  pemograman  yang  hanya dapat  berjalan  pada  sisi  server  ( Server  Side  Scripting )”.  Artinya  proses  yang  dibuat dengan php tidak akan berjalan tanpa menggunakan web server. PHP digunakan untuk membangun  aplikasi  berbasis  web  agar  web  tersebut  dapat  digunakan  secara  dinamis, seperti menambah, mengubah, membaca, serta menghapus suatu konten.
Menurut  (Agus,  2011)  “MySQL  merupakan  perangkat  lunak  yang  juga  bersifat open source. Sesuai namanya, bahasa standar yang digunakan adalah SQL singkatan dari Structure Query Language , yang merupakan bahasa standar untuk pengolahan database”. Menurut (Naista, 2016) Laravel adalah sebuah MVC web development framework yang  didesain  untuk  meningkatkan  kualitas  perangkat  lunak  dengan  mengurangi  biaya pengembangan dan perbaikan serta meningkatkan produktifitas pekerjaan dengan sintak yang  bersih  dan  fungsional  yang  dapat mengurangi  banyak  waktu  untuk  implementasi (Widodo & Purnomo, 2016) Lavarel merupakan framework dengan versi PHP yang up- to-date, karena Laravel mensyaratkan PHP versi 5.3 keatas.
Menurut (Sibero, 2013) “Javascript adalah bahasa skrip ( Scripting Language) , yaitu kumpulan instruksi perintah yang digunakan untuk mengendalikan beberapa bagian dari sistem operasi”. Bentuk bahasa skrip dari javascript mengambil model penulisan pada pemograman C dan JAVA, yang terdiri dari variabel, fungsi dan lainnya.
Menurut (Yulianto, 2019), Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform , artinya  tersedia  juga  untuk  versi  Linux,  Mac,  dan  Windows.  Teks  editor  ini  secara langsung  mendukung  bahasa  pemrograman  JavaScript,  Typescript,  dan  Node.js,  serta bahasa  pemrograman  lainnya  dengan  bantuan  plugin  yang  dapat  dipasang  via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java, dan lain-lain).
Menurut (Abdulloh, 2015) CSS singkatan dari cascading style sheets , yaitu skrip yang  digunakan  untuk  mengatur  desain  website.  Walaupun  HTML  mempunyai kemampuan untuk mengatur tampilan website, namun kemampuannya sangat terbatas. Fungsi  CSS  adalah  memberikan  pengaturan  yang  lebih  lengkap  agar  struktur  website yang dibuat dengan HTML terlihat lebih rapi dan indah.
Melihat  pangsa  pasar,  peluang  serta  kemudahan  yang  dihadirkan  oleh  sistem penjualan  online,  hal  ini  menjadi trend di  masyarakat  kita  sekarang,  kita  bisa  lihat bagaimana kegemaran masyarakat kita terhadap belanja online dari yang menengah ke bawah  terlebih  lagi  dari  yang  kalangan  atas.  Maka  dari  itu  penulis  merancang  sistem
informasi yang nantinya akan menggantikan sistem yang lama, hal ini berlaku bagi toko yang  masih  menggunakan  cara  konvensional  ( offline )  dalam  menjual  serta mempromosikan  produknya  dan  juga  dalam  masalah  yang  berkaitan  dengan  segala macam pencatatan yang masih menggunakan cara yang kurang efisien. Untuk kemudahan dalam  pengembangan  sistem  toko  online,  penulis  menggunakan  Laravel  dan  API RajaOngkir dalam perancangan sistem informasi ini.
Dua dari permasalahan tersebut akan dikembangkan menjadi sebuah website toko online dimana penulis berusaha mengimplementasikan sistem tersebut ke dalam bentuk penulisan jurnal.

## Metode Penelitian
Dalam  penelitian  ini,  penulis  menggunakan  metodologi Rapid  Application Development (RAD), sehingga mempermudah dalam pembuatan dan perancangan sistem yang baru.
Menurut (Whitten & Bentley, 1997) Rapid Application Development (RAD) adalah sebuah strategi pengembangan sistem yang menekankan kecepatan dalam pengembangan melalui keterlibatan pengguna dalam pembangunan secara cepat, iteratif, dan incremental dari suatu serangkaian prototype dari suatu sistem yang dapat berkembang menjadi suatu sistem akhir atau versi tertentu.

## Gambar 1 Rapid Application Development
Sumber: RAD vs Agile Methodology

## Hasil dan Pembahasan
A. Functional Design (Rancangan Fungsional)
1. Use Case Diagram
Adapun perencanaan Use Case Diagram dari Sistem Informasi Toko Online sebagai berikut:
Gambar 2

## Use Case Diagram
2. Class Diagram
Hasil  rancangan  Use  Case  Diagram  tersebut  penulis  kembangkan  menjadi sebuah Class Diagram. Berikut adalah class Diagram yang diusulkan penulis.

## 3. Rancangan Basis Data
Rancangan  basis  data  adalah  proses  untuk  menentukan  isi  dan  pengolahan data  yang  dibutuhkan  untuk  mendukung  sebagai  rancangan  sistem.  Dalam perancangan data di dalam Sistem Informasi Toko Online yang penulis buat adalah merancangan  basis  data  sesuai  dengan  kebutuhan  sistem  informasi  yang  akan dibangun.

## Gambar 4
Relasi Tabel
4. Implementasi Basis Data
Pembuatan  basis  data  dilakukan  dengan  menggunakan  DBMS  MySQL. Implementasi basis data dalam bahasa SQL adalah sebagai berikut :
Tabel 1 Users
Tabel 2
Categories Tabel 3 Products Tabel 4 Transactions
5. Rancangan Keluaran Dashboard
Rancangan  Dashboard  ini  digunakan  sebagai  halaman  awal  ketika  user Admin mengakses login, maka secara otomatis ketika berhasil login sistem akan mengarahkan kepada halaman Dashboard yang menjadi halaman awal bagi user admin, rancangannya sebagai berikut:

## Gambar 5
Rancangan Keluaran Admin - Dashboard

## 6. Rancangan Keluaran Admin Category
Rancangan  Admin  Category  yaitu  di  mana  semua  data  kategori  akan ditampilkan  sekaligus  dengan  form  penginputan  yang  disediakan  dalam  satu halaman, rancangannya sebagai berikut:

## Gambar 6 Rancangan Keluaran Admin – Category
7. Rancangan Keluaran Admin – List Products
Rancangan Admin – List Products, yaitu di mana semua hasil data inputan produk akan ditampilkan seluruhnya di dalam halaman ini listnya, rancangannya sebagai berikut :
Gambar 7
Rancangan Keluaran Admin - List

## 8. Rancangan Keluaran Admin Transactions
Rancangan  Admin  Transactions,  yaitu  halaman  di  mana  user  admin  akan mengatur  perubahan  yang  terjadi  pada  transaksi  pembelian  produk  yang dilakukan  oleh  pembeli  dengan  cara  pembeli  mengupload  bukti  transfernya kepada admin, rancangannya sebagai berikut:

## Gambar 8 Rancangan Admin Transactions
9. Rancangan Keluaran Admin List User
Rancangan Admin List User, yaitu halaman yang akan menampilkan semua data user yang tertera menjadi sebuah list, rancangannya sebagai berikut :
Gambar 9 Rancangan Keluaran Admin List User 10. Rancangan Dialog Layar
Struktur Tampilan

## Gambar 10 Struktur Tampilan

## Kesimpulan
Berdasarkan hasil analisis dan pembahasan data, penulis memperoleh kesimpulan yang dapat diambil dari penelitian mengenai “Perancangan Sistem Informasi Toko Online Berbasis  Web  dengan  menggunakan  Laravel  dan  API  RajaOngkir”,  bahwa  hasil  dari penelitian ini bisa menghasilkan sesuatu yang baru dan begitu mengubah dalam struktur penjualan  produk,  yang  sebelumnya  hanya  bisa  dilakukan  dengan  cara offline ,  tetapi dengan  adanya  sistem  informasi  ini  pembeli  bisa  melihat  segala  macam  produk  yang
dijual  tanpa  perlu  lagi  harus  datang  ke  tokonya,  dan  dari  sisi  kemudahan  bagi parahyangan  komputer  yaitu  berupa  kemudahan  promosi  dan  pencatatan.  Selain  itu kemudahan dalam mengkustomisasi setiap produk yang akan diperjual belikan.

## BIBLIOGRAFI
Abdulloh,  Rohi.  (2015). Web  Programming  Is  Easy .  Jakarta:  PT.  Elex  Media Komputindo, 7.
Agus,  Saputra.  (2011). Trik  dan  Solusi  Jitu  Pemrograman  PHP. Jakarta:  Elex  Media Komputindo.
Hidayat, Taufik. (2008). Panduan Membuat Toko Online dengan OSCommerce . Jakarta: Media Kita.
Husein,  Alatas.  (2013). Responsive  Web  Design  dengan  PHP  &  BOOTSTRAP.
Yogyakarta: Lokomedia.
Jogiyanto, Hartono Mustakini. (2005). Sistem Teknologi Informasi. Yogyakarta: Andi.
Kristanto, Andri. (2018). Perancangan Sistem Informasi  dan Aplikasinya . Yogyakarta: Gava Media
Laudon, Kenneth C., & Laudon, Jane P. (1998). Management Information Systems: New Approaches to Organization and Technology. Researchgate.
Meier, Andreas, & Stormer, Henrik. (2009). e-Business & e-Commerce: Managing The Digital Value Chain . Newyork: Springer Science & Business Media.
Naista,  David.  (2016). Bikin  Framework PHP  Sendiri  dengan  Teknik  OOP  dan  MVC.
Jakarta: Lokomedia.
Palil,  Mohd  Rizal.  (2005).  The  Effect  of  E-commerce  on  Malaysian  Tax  System:  an Empirical  Evidence  From  Academicians and  Malaysian  Tax  Practitioners. Jurnal Akuntansi dan Keuangan , 6 (1), 1-9
Prihatna,  Henky.  (2005). Kiat  Praktis  Menjadi  Webmaster  Profesional. Jakarta:  Elex Media Komputindo.
Sibero,  Alexander  F.  K.  (2013). Web  Programming  Power  Pack. Yogyakarta: MediaKom.
Whitten, Jeffrey L., & Bentley, Lonnie D. (1997). Systems Analysis and Design Methods .
McGraw-Hill Professional
Widodo,  Bagas  Prakoso,  &  Purnomo,  Hindriyanto  Dwi.  (2016).  Perancangan  Aplikasi Pencarian  Layanan  Kesehatan  Berbasis  HTML  5  Geolocation. Jurnal  Sistem Komputer . 6 (1). 44-51
Yulianto,  Rian.  (2019). Ekstensi  dan  Tema  Visual  Studio  Code  Yang  Saya  Gunakan . Dipetik dari: https://medium.com.