## E-COMMERCE GOODY BAG SPUNBOND MENGGUNAKAN QR CODE BERBASIS WEB RESPONSIF
Rizkysari Meimaharani Fakultas Teknik, Program Studi Teknik Informatika Universitas Muria Kudus Email: rizkyumk12@gmail.com
Diana Laily Fakultas Teknik, Program Studi Sistem Informasi Universitas Muria Kudus Email: dila_fitri@yahoo.com

## ABSTRAK
Pemasaran  merupakan  salah  satu  hal  yang  terpenting  bagi  pelaku  bisnis.  Tanpa  pemasaran  yang baik,  maka  akan  sulit  membuat  usaha  lebih  maju.  Hal  ini  juga  dialami  oleh  satu  satu  pelaku  bisnis  di kudus,  yaitu  vantacy  shop.  Vantacy  shop  merupakan  salah  satu  usaha  yang  menjual goody  bag (tas). Tidak hanya menjual tetapi juga mendesain sendiri tas tersebut. Pemasaran yang sudah dilakukan adalah door  to  door ,  artinya  pemasaran  konvensional.  Dengan  perkembangan  teknologi  sekarang  ini,  dalam penelitian  ini  ingin  mencoba  mengangkat  vantacy  shop  dengan  menciptakan  pemasaran  secara online . Penjualan online ini  akan  dilengkapi  dengan  penyebaran  informasi  mengenai goody  bag menggunakan QR Code .QR Code merupakan teknologi yang sudah banyak diaplikasikan pada system operasi android. Jadi dengan adanya QR Code ini diharapkan konsumen lebih mudah memperoleh informasi mengenai apa yang  ditawarkan  dari  vantacy  shop.  Selain  itu website penjualan  online  ini  berbasis web  responsive , sehingga dapat diakses menggunakan semua gadget yang dimiliki oleh konsumen dengan tampilan yang baik.
Kata kunci : web responsive, QR code , pemasaran

## ABSTRACT
Marketing  is  one  of  the  most  important  things  for  business.  Without  good  marketing,  it  will  be difficult  to  make  the  effort  more  advanced.  It  is  also  experienced  by  one  of  the  businesses  in  the sanctuary, which is vantacy shop. Vantacy shop is a business that sells a goody bag (bag). Not only sell but  also  the  design  your  own  bag.  Marketing  has  been  done  is  door  to  door,  meaning  conventional marketing. With the current technological developments, the author would like to try to lift vantacy shop by creating online marketing. Online sales will be equipped with the dissemination of information about Goody Bag uses QR Code Code.QR is a technology that has been widely applied to the android operating system. So with the QR Code is expected consumers more easily obtain information about what is on offer from vantacy shop. In addition, this online websitepenjualan responsive web-based, so it can be accessed using all the gadgets that are owned by the consumer with a good view.
Keywords : web responsive, QR code , marketing

## 1. PENDAHULUAN
Vantacy  Shop  merupakan  salah  satu  toko  yang  menjual  aneka goody  bag dari  bahan spunbond . Persaingan  bisnis  penjualan goody  bag sekarang  ini  sangat  ketat,  oleh  karena  itu  dibutuhkan  terobosan baru yang dapat meningkatkan penjualan. Dengan perkembangan teknologi sekarang ini, penjualan tidak lagi  bersifat  konvensional  saja,  tapi  sudah  berkembang  ke  media online .  Terobosan  tersebut  sangat bermanfaat,  karena  dengan  adanya  penjualan  secara online ( E-Commerce ),  diharapkan  dapat meningkatkan jangkauan pemasaran dan peningkatan income .
Website merupakan salah satu media untuk penjualan online . Sekarang dikembangkan lagi menjadi Responsive  Web  Design (RWD),  yang  dapat  mengoptimalkan  kegunaan  dari  website  penjualan  itu sendiri. Karena dengan menggunakan web responsive , pengguna bisa leluasa mengakses website tersebut menggunakan beraneka macam gadget ( PC , Laptop, Smartphone, Tablet , dll) [1]. Web responsive design
pertama  kali  diperkenalkan  oleh  Ethan  Marcotte  pada  artikelnya  yang  sangat  inspiratif Web  Responsive
Design.  Semakin  banyaknya  perangkat  yang  muncul  dengan  berbagai  ukuran,  maka  sebuah  situs  perlu untuk mengenali ukuran perangkat pengguna. Ketika masih berpikir saat ada perangkat baru yang dirilis dan  akan  memperbarui  situs  agar  sesuai,  maka  harus  mencari  solusi  yang  lebih  efektif  dan  responsif bagaimana  cara  agar  situs  hanya  mengakui  lebar  browser  saja  tanpa  melakukan  pembaruan  yang  lebih spesifik.  Yang  membedakan web  responsive dengan  website  yang  lain  yaitu  penggunaan  W3C  CSS3 media dengan cairan proporsi berbasis grid , sehingga dapat fleksibel diterapkan diberbagai gadget yang ada seperti yang di gambarkan pada Gambar1 [2].
Gambar 1. Responsive web design (RWD)
QR-code adalah jenis barcode yang berbentuk dua dimensi yang dikembangkan oleh Denso Wave, sebuah divisi Denso Corporation , sebuah perusahaan di Jepang, yang dipublikasikan pada tahun 1994 [3]. QR  merupakan  singkatan  dari  Quick  Response  (respon  /  tanggapan  cepat),  sehingga  fungsi  atau  tujuan utama  dari  teknologi  ini  adalah  penyampaian  informasi  dengan  cepat  dan  mendapat  tanggapan  atau respons yang cepat pula.  Oleh  karena itu QR-code dapat dengan  mudah dibaca oleh  pemindai.  Berbeda dengan barcode biasa yang berbentuk satu dimensi dan menyimpan informasi secara horizontal , QR-code mampu  menyimpan  informasi  secara  horisontal  dan  vertikal. QR-code juga  mampu  menyimpan  teks alfanumerik,  kanji,  kana,hiragana,  simbol,  biner,dan  control  code.  Adapun  model  dari QR  Code yang dituangkan dalam gambar 2 dan 3.

## Gambar 2. QR code model 1

## Gambar 3. QR code model 2
Dengan  beberapa  analisa  masalah  yang  telah  diuraikan,  pemasaran  toko  dapat  lebih  optimal  jika dilakukan menggunakan teknologi sekarang ini. Dan dilengkapi dengan informasi yang terkemas dalam QR Code dan tampilan berbasis web responsive [4].

## 2. METODOLOGI
Pengembangan web  responsive ini  didukung  dengan  metode  pengembangan  system  yang menggunakan  waterfall.  Waterfall  model  adalah  model  yang  paling  populer  dan  sering  dia  anggap sebagai  pendekatan  klasik  dalam  daur  hidup  pengembangan  sistem.  Adapun  tahapannya  seperti  yang digambarkan  pada  Gambar  4 adalah  communication,  planning,  modeling,  construction dan deployment [5].
Gambar 4. Waterfall model
Tahapan Penelitian ini meliputi beberapa tahapan antara lain :
a. Perencanaan Penelitian
Pada tahap ini dilakukan perencanaan penelitian yang akan di lakukan di Universitas Muria Kudus.
b. Pengumpulan Data
Untuk  mendapatkan  data  yang  akurat  maka  dalam  penelitian  ini  pengumpulan  data  dilakukan dengan cara sebagai berikut :
1. Observasi
Observasi penelitian ini melalui pengamatan dan pencatatan secara langsung di vantacy shop. Sehingga diketahui masalah yang ada.
2. Interview
Pada  tahapan  pengumpulan  data  ini,  dilakukan  dengan  cara  interview  secara  langsung  dan tanya jawab dengan pemilik vantacy shop, yang berhubungan dengan penelitian.
3. Studi Pustaka
Pada  tahap  studi  pustaka  ini  mencari  teori  yang  dapat  digunakan  sebagai  landasan  teori  / kerangka  dalam  penelitian  seperti  teori web  responsive , QR  Code ,  jurnal  yang  membahas mengenai web  responsive ,  jurnal  mengenai  pemasaran  online,  jurnal  penelitian  yang membahas  mengenai  pengembangan  system,  untuk  mencari  metodologi  yang  sesuai  dengan membandingkan antara teori yang ada dengan fakta yang ada di lapangan.
c. Analisa Kebutuhan Sistem
Pada  tahap  ini  dilakukan  analisa  terhadap  kebutuhan  rancang  bangun  penjualan  online  yang dilengkapi dengan QR Code berbasis web responsive.
d. Desain Sistem
Desain  system  merupakan  tahapan  inti  dari  sebuah  rancang  bangun  sebuah  proses.  Pada  tahap  ini dilakukan penyusunan rancang bangun penjualan online goody bag menggunakan QR Code berbasis web responsive.
e. Implementasi Sistem
Pada  tahan  implementasi  system  ini  dilakukan  pembuatan  aplikasi  penjualan online  goody bag menggunakan QR Code berbasis web responsive.
Adapun  langkah  dari  penelitian  ini  meliputi  langkah  pengumpulan  data,  analisis  dan  identifikasi kebutuhan penelitian, desain pelaksanaan penelitian dan implementasi penelitian. Masing-masing tahapan memiliki  kebutuhan  dan  pelaksanaan  sesuai  dengan  tahapan  tersebut.  Secara  detail  tahapan  penelitian dijelaskan pada gambar 5.
Gambar 5. Alur kegiatan penelitian dosen pemula 2013

## 3. HASIL DAN PEMBAHASAN
Hasil dari penelitian ini menghasilkan sebuah website penjualan yang dilengkapi dengan QR Code sebagai salah satu.
Desain  tampilan  dari  penelitian  ini  berbasis web  responsive. Pada  gambar  6  merupakan  tampilan menu  login  dari  administrator web penjualan  ini.  Halaman  menu  dari  administrator web penjualan  ini ditunjukkan pada gambar 7.
Gambar 6. Halaman Login administrator
Gambar 7. Halaman menu utama administrator
Aplikasi penjualan ini memiliki beberapa menu, antara lain katalog produk dari vantacy shop yang terlihat pada gambar 7 dan diperjelas untuk masing-masing produk terlihat pada gambar 8.
Gambar 8. Katalog produk pada aplikasi

## Gambar 9. Halaman detail produk
Di dalam aplikasi penjualan online ini, memiliki menu keranjang yang berfungsi merekap pesanan dari pelanggan/customer. Halaman keranjang terisi jika pelangan sudah melakukan pemilihan produk dari vantacy shop, seperti yang terlihat pada gambar 9.
Gambar 10. Halaman keranjang belanja
Gambar 11. Halaman alamat kirim
Gambar 12.  Format total pemesanan
Dari  halaman  keranjang,  pengunjung  diminta  login  dengan  akun  yang  pernah  didaftarkan  atau menggunakan akun baru. Hal ini dipergunakan untuk pengiriman produk yang telah dipilih sebelumnya dan dilengkapi dengan notifikasi email ke pengunjung mengenai detail pemesanan dari produk tersebut. Terlihat pada gambar 12 menunjukkan notifikasi melalui email telah terkirim.

## Gambar 13. Tagihan pemesanan yang masuk pada email pembeli
Pada aplikasi penjualan ini dilengkapi dengan kontak kami, halaman ini berguna jika ada pertanyaan yang ditujukkan pada admin web . Detail dalam halaman kontak kami seperti terlihat pada gambar 13.
Gambar 14. Halaman kontak kami
QR  Code yang  telah  disediakan  di web www.vantacy-shop.com.  Dengan  melakukan  scanning menggunakan aplikasi QR Droid, hasilnya terlihat pada Gambar 14.

## Gambar 15. Hasil Scanning QR Code menggunakan QR Droid
Hasil Scanning akan  memasukkan  produk  yang  telah  dipilih  langsung  masuk  ke  keranjang pembelian, hal ini diperlihatkan pada Gambar 15.
Gambar 16.  Produk yang discanning masuk pada Keranjang Pembelian
Pengujian  aplikasi  “ E-Commerece  Goody  Bag  Spunbond Menggunakan QR  Code Berbasis Web Responsive ”  ini,  diuji  pada  2 smartphone yang  berbeda  Sistem  Operasi.  Sistem  Operasi  yang  dipakai menggunakan Sistem Operasi Android Kitkat dan Blackberry OS 10.

## Tabel 1. Pengujian aplikasi
Device              : Sony Z1 Compact Sistem Operasi : Android Kitkat 4.4.4 Device              : Blackberry Q5
Sistem Operasi : Blackberry OS 10 Aplikasi Scanner Keranjang
Kesimpulan  Hasil scanner QR  Code langsung masuk ke keranjang belanja Hasil  scanner QR  Code tidak  langsung masuk ke keranjang belanja namun harus di klik  terlebih  dahulu  link  yang  ada  (open browser)
Table  1  menjelaskan  pebedaan  penggunaan scanner  QR  Code pada    Device    Sony  Z1 Compact , sistem operasi Android Kitkat 4.4.4 dengan device Blackberry Q5 sistem operasi Blackberry OS 10

## 4. KESIMPULAN
Berdasarkan  hasil  pelaksanaan  dari  penelitian  ini  dapat  diambil  beberapa  kesimpulan  sebagai berikut:
1) Menghasilkan  analisa  dan  perancangan  sistem  menggunakan  UML  (  United  Modelling  Language  ) dalam mempromosikan Goody Bag yang berbasis web .
2) Aplikasi E-Commerce yang dikembangkan merupakan sebuah kebutuhan yang selama ini diinginkan oleh Vantacy Shop  untuk dapat membantu mempromosikan Goody Bag berbasis Web responsive.
3) Menggunakan teknologi QR Code untuk mempermudah pihak Vantacy Shop dalam pendataan Barang masuk dan barang keluar.
4) Pembaca QR Code berbeda beda dalam proses scanning dan hasilnya. Hal ini dikarenakan perbedaan aplikasi pembaca QR Code pada beberapa sistem operasi yang berbeda.

## UCAPAN TERIMA KASIH
Terima  kasih  kepada  Direktorat  Jenderal  Pendidikan  Tinggi,  Kementerian  Pendidikan  dan Kebudayaan yang telah membiayai penelitian ini melalui program hibah penelitian dosen pemula 2014.

## DAFTAR PUSTAKA
[1] Alatas,  Husein.  (2013). Responsive  Web  Design  dengan  PHP  dan  Bootstrap. Yogyakarta:  Loko Media, 2013. 978-602-14306-1-3.
[2] Marcotte,Ethan, Responsive Web Design dalam http://www.alistapart.com/articles/ responsive-web- design.
[3] Law, Ching Yin, So, Wing Wah Simon,. 2010, “QR Codes in Education ”. Journal of Educational Technology Development and Exchange vol. 3 no 1, pp 85-100.
[4] Nugraha,  Pasca.  2011.  “Pengembangan  Aplikasi  QR  Code  Generator  dan  QR  Code  Reader  Dari Data Berbentuk Image”. Konferensi Nasional Informatika KNIF 2011 .
[5] Pressman,  Roger  S.  (2010). Software  Engineering  a  Practitioner's  Approach. s.l. :  McGraw-Hill Higher Education.