J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 545

PENERAPAN E-COMMERCE UNTUK PENJUALAN ROKOKELEKTRIK (VAPE) MENGGUNAKAN CONTENT MANAGEMENT

SYSTEM WORDPRESS PADA TOKO VAPE GRANDE

Estri Wulandari1), Grace Gata2)

1Sistem Informasi, Fakultas Teknologi Informasi, Universitas Budi Luhur1,2Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260

E-mail : estriwulandari13 @gmail.com 1), grace.gata@budiluhur.ac.id2)

AbstrakKegiatan jual-beli online atau E-Commerce menjadi salah satu transaksi yang sedang ramai digunakan, karenatransaksi jual beli online sangat mempermudah transaksi. Sebagai contoh, transaksi yang ada pada toko VapeGrande, toko yang menjual liquid vape dan juga berbagai macam vaping stuff. Vape merupakan rokok elektrikyang pembakarannya berasal dari pemanasan baterai yang ada di dalam vape, dan sebagai perasa vape diisioleh liquid yang memiliki varian rasa tertentu. Pembuatan laporan hasil penjualan toko Vape Grandemenggunakan pembukuan yang kemudian dipindahkan kedalam Microsoft excel yang menyebabkan laporantidak akurat. Peneliti menggunakan tools Unified Modelling Language (UML) yang didalamnya terdapatactivity diagram, usecase diagram, class diagram, dan sequence diagram. Peneliti telah membuat penjualandengan penerapan E-Commerce menggunakan Content Management Sytsem (CMS) Wordpress untukmempermudah penjualan pada toko Vape Grande yang memiliki konsep E-Commerce agar toko dapat memilikicakupan penjualan yang lebih luas dan lebih berkembang, yang juga dapat memudahkan akses informasikepada pembeli atau pelanggan. Dengan adanya website E-commerce ini pelanggan lebih mudah mengetahuiupdate produk terbaru dan infromasi terbaru yang ada pada toko vape grande.

Kata kunci: E-Commerce, Rokok Elektrik, Content Management System

1. PENDAHULUANPengertian dari E-commerce adalah merupakan

website yang dipergunakan untuk transaksipenjualan, ada juga yang memiliki pengertian lainyaitu electronical data interchange. Salah satupengertian yang dapat memberikan presentasipengertian E-commerce, yaitu adalah perangkat dariteknologi yang bersifat dinamis, yang didalamnyaberisi aplikasi dan juga proses bisnis yang dapatmembantu menghubungkan perusahaan, pelanggandan juga suatu komunitas atau kelompok melaluitransaksi elektronik, yang juga melakukan transaksielektronik barang, jasa, dan informasi. [1].

Vape Grande adalah sebuah toko rokok elektrikyang biasa dikenal dengan sebutan vape, mengapadisebut rokok elektrik karena pembakaran rokoknyatersebut tidak menggunakan api melainkanmenggunakan panas yang dihasilkan oleh aliranlistrik yang berasal dari baterai yang berada didalamrokok elektrik. Pada toko Vape Grande menjualperalatan aksesoris yang berhubungan dengan rokokelektrik, seperti kapas, kawat, baterai vape sertamenjual liquid atau cairan untuk perasa pada rokokelektrik dan juga mod. Kisaran harga liquid padatoko Vape Grande terbilang terjangkau dan tidakberbeda jauh dengan toko lain. Media promosi ataupemasaran pada toko ini yaitu melalui media sosialinstagram yang hanya melakukan promosi saja atauhanya di jadikan katalog untuk pembeli agar dapat

melihat dan memilih sebelum membeli. Pembelitidak dapat melakukan pemesanan melalui mediasosial instagram. Sehingga pembeli hanya dapatdatang ke toko Vape Grande untuk melakukanpembelian, namun bagi pembeli yang sudah kenalatau yang sudah langganan biasanya akanmenghubungi penjual via telepon lalu melakukanpemesanan, kemudian penjual akan mengirimkanpesanan kepada pembeli. Penjual juga memiliki grupdan forum antar sesama penjual maupun penggunarokok elektrik, grup dan forum tersebutdipergunakan sebagai media informasi untukkegiatan yang akan dilakukan sesama penjual rokokelektrik. Dengan begitu transaksi jual beli toko VapeGrande pada saat ini hanya dapat dilakukan viatelepon dan juga datang langsung ke toko.Pembuatan laporan keuangan barang masih belumotomatis terbarui dan tersimpan karena penjualmemindahkan data yang tertulis di kertas keMicrosoft excel, sehingga data tidak otomatistersimpan setelah terjadi transaksi. Sehingga bisadikatakan pengeluaran dan pemasukan menjadikurang terkontrol. Dengan adanya peran E-commerce diharapkan dapat membantumempermudah transaksi maupun manajemen yangberada pada toko Vape Grande serta pulameningkatkan promosi toko agar pemasaran menjadilebih luas. Maka dari itu peneliti merancang danmengembangkan website berbasis E-commerce

J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 546

sebagai salah satu solusi atas permasalahan padatoko Vape Grande.

Adapun tujuan dan manfaat dari penulisan inisebagai berikut :

1) Membuatkan website sehingga pembelidapat melihat dan memilih produk dan jugalangsung membeli di website tersebut tanpaharus ke toko.

2) Dibuatkan website penjualan untukmemperluas pemasaran dan menjangkaupembeli dari luar kota.

3) Menyediakan keranjang pembelian yangdapat secara otomatis akan menyimpan datapembelian barang sehingga lebihmenghasilkan laporan yang tepat danakurat.

Adapun manfaat dari penulisan diharapkandapat memberikan masukan dan pertimbangankepada manajemen Toko Vape Grande dalam teknikpemasaran dan penjualan dengan penerapan e-commerce.

1.1. Content Management System (CMS)CMS merupakan singkatan dari Content

Management System. CMS adalah sebuah aplikasiyang berbasis web yang biasa digunakan sebagaiaplikasi untuk mengatur konten website. Hampirpada semua website memiliki CMS yang mengaturkonten, kecuali website statis. Sebuah aplikasi CMSlebih sering memiliki kemampuan untukmemperbarui artikel, mengubah halaman website,menata menu dan tampilan pada website [2].

1.2. WordpressWordpress merupakan suatu perangkat lunak

CMS pembuatan website akan terus berkembangdari waktu ke waktu, akan selalu terupdate. Padasaat ini wordpress telah memasuki ke versi yangterbaru dimana akan semakin tepat dan sesuai danjuga banyak fitur-fitur baru [3].

1.3. Penelitian SebelumnyaGalih Budhi Setiyo melakukan penelitian yang

berjudul “Analisa Sistem E-Commerce PadaPerusahaan Jual Beli Online Lazada Indonesia” .Dari hasil Penelitian tersebut menjabarkan LazadaIndonesia merupakan toko belanja online yangsering digunakan di Indonesia dan juga dalam hallayanan terhadap pelanggan dapat dikatakan sangatekstra. Lazada Indonesia mempunyai kekuatan dankekurangan, kekuatan yang dimiliki adalah ketikamembeli melalui website Lazada Indonesia makapelanggan mendapatkan promo dan diskon tertentu,dengan adanya konsep atau tanpa konsep promotertentu. Lalu kekurangan dari belanja pada websiteLazada yaitu memiliki resiko bagi pelanggan yang

masuk kedalam situs Lazada merasa tidak yakinpada kepada toko E-commerce yang ada, karenamerasa nomor telepon yang ada tidak valid ataubohong. [4]

2. METODE PENELITIANUntuk melakukan penelitian ini peneliti

menggunakan metode penelitian sebagai berikut :

Berikut gambar 1. Metode Penelitianmerupakan penjelasan mengenai:

2.1. Masalaha. Kesulitan pembeli yang harus datang ke toko

untuk melakukan pemesanan.b. Pencatatan laporan masih dilakukan dengan

pembukuan yang dipindahkan ke Microsoftexcel.

c. Media pemasaran yang di gunakan saat iniinstagram, namun instagram hanya dijadikansebagai katalog.

2.2. TindakanToko Vape Grande memerlukan system

penjualan berbasis E-Commerce yang dapatdijadikan tempat pemasaran sekaligus transaksipenjualan.

2.3. TujuanUntuk membuat toko lebih efisien dalam

pengelolaan dan juga membuat toko lebih dikenalmasyarakat luas..

2.4. HasilDengan adanya penjualan berbasis E-

Commerce, dapat dijadikan sebuah inovasi dan jugadapat menjadi solusi atas permasalahan yang adapada toko Vape Grande.

Gambar 1. Metode Penelitian

J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 547

2.5. PerancanganDalam tahap perancangan sistem menggunakan

tools unified modeling language (UML) yang terdiridari activity diagram, usecase diagram, classdiagram, dan sequence diagram.

2.6. PemrogramanDalam penelitian peneliti menggunakan

pemrograman CMS (content management system)menggunakan wordpress dengan pluginwoocommerce untuk membuat program.

2.7. Pemahaman Model BisnisPada Peneltian peneliti menggunakan business

model canvas sebagai gambaran yang dapatmenjelaskan atau mendeskripsikan pengelolaan tokoVape Grande.

2.8. PendekatanPendekatan yang digunakan oleh peneliti dalam

melakukan penelitian yaitu dengan cara wawancara,observasi, dan studi pustaka.

3. HASIL DAN PEMBAHASAN3.1. Business Model Canvas

Peneliti menggunakan Business Model Canvassebagai penjelasan dan juga gambaran aktivitaspenjualan yang terjadi pada toko Vape Grande,dibawah ini merupakan Business Model Canvasyang telah peneliti buat.

Berikut penjelasan mengenai gambar 2.Business Model Canvas :

a. Customer SegementsBlok ini menjelaskan target atau sasaran

pelanggan pada toko Vape Grande, sasaran pelanganyaitu pria dan wanita yang sudah berumur lebih dari18 tahun.

b. Customer RelatioshipPada blok ini menjelaskan bagaimana

perusahaan membangun hubungan dengan

pelanggan, yaitu dengan cara memberikan diskonatau promo sebagai bentuk menarik perhartian targetpelanggan.

c. Value PropositionsBlok ini menjelaskan mengenai penawaran

produk yang mempunyai keunggulan atau nilai lebihyang dimiliki oleh toko vape grande, keunggulanyang dimiliki yaitu desain mod lebih menarik danmodern, memiliki banyak varian rasa liquid vape,tersedia kapas vape organic, charger khusus bateraivape yang tidak mudah panas saat di charge.

d. Key ActivitiesBlok ini menjelaskan aktivitas kunci atau hal-

hal penting yang dilakukan perusahaan agar modelbisnis dapat berjalan dengan baik. Yang toko vapegrande lakukan yaitu melakukan pemasaran ataupromosi produk, melakukan penjualan produk danaksesoris vape, dan juga melakukan coiling ataupemasangan kawat vape.

e. Key Partnerships Pada blok ini menjelaskan hubungan antara

pihak kedua atau partner utama perusahaan agarbisnis model bisnis dapat berjalan dengan baik, vapegrande memiliki distributor yang menjadi partnerutama sebagai pemasok liquid maupun aksesorisvape lain, dan juga ada brewer sebagai penyuplailiquid vape yang khusus hanya memproduksi liquidvape.

f. Key ResourcesBlok ini menjelaskan tentang aset penting yang

diperlukan agar model bisnis dapat berfungsi. Asetyang dimiliki toko vape grande yaitu mesin EDC(electronic data capture), laptop, tenagakerja/karyawan, toko.

g. ChannelsBlok ini menjelaskan bagaimana perusahaan

menjalin komunikasi dengan customer segments danmenjangkau mereka. Pada toko vape grande sebagaimedia komunikasi dengan pelanggan yaitu melaluigrup whatsapp, media sosial instagram, dan website.

h. Cost StructureBlok ini menjelaskan semua biaya yang

dikeluarkan untuk mengoperasikan model bisnis.Biaya yang dikeluarkan oleh toko vape grande yaituuntuk gaji karyawan, biaya operasional toko, danjuga ongkos kirim baranng dari distributor menujutoko maupun pengiriman dari toko cabang satu kecabang yang lain.

i. Revenue StreamsPada Blok ini menjelaskan pendapatan yang

dihasilkan perusahaan dari segmen pelanggan, intidari blok ini menggambarkan bagaimana perusahaanmenghasilkan uang. Untuk vape grande penghasilanberdasarkan hasil penjualan produk vape yaitu liquidmaupun aksesoris lain, dan juga penghasilan berasaldari coiling atau pemasangan kawat vape.

Gambar 2. Business Model Canvas

J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 548

3.2. Activity DiagramActivity Diagram adalah gambaran dari tiap-

tiap aktifitas yang terdapat pada sistem. Padaaktifitas sistem yang mewakili sebuah activitydiagram [5] .

a. Proses Pendaftaran Pelanggan membuka website kemudian

pelanggan dapat memilih menu my account, didalammenu my account terdapat form login dan formregister, untuk mendaftar pelanggan perlu mengisiform register kemudian klik tombol register. Lalusistem akan memeriksa email atau username sudahpernah di gunakan atau belum, bila sudah makapengunjung perlu mengisi form register denganemail atau username lain. Bila belum pernahdigunakan maka sistem akan menyimpan datapelanggan, kemudian sistem akan mengirimkannotifikasi kepada pelanggan bahwa akun telahdibuat. Seperti yang dapat dilihat pada gambar 3.Activity Diagram Proses Pendaftaran .

Pada Gambar 3. Activity Diagram ProsesPendaftaran berisi tentang penjelasan mengenai tatacara pendaftaran pelanggan.

b. Proses LoginUntuk login pelanggan masuk kedalam website

vape grande kemudian pelanggan pilih menu myaccount, dalam menu my account terdapat dua formyaitu form login dan registrasi, untuk login isi formlogin dengan memasukkan username dan passwordyang telah terdaftar pada website kemudian kliktombol login. Setelah itu sistem akan memeriksaapakah username dan password sudah benar ataubelum. Bila password atau username belum tepatmaka pelanggan akan mengisi form login kembali.Bila benar maka sistem akan menyimpan datapelanggan. Seperti yang dapat dilihat pada gambar 4.Activity Diagram Proses Login .

Pada gambar 4. Activity Diagram Proses Loginberisi tentang proses login yang dilakukan olehpelanggan.

c. Proses PemesananPelanggan dapat melakukan login pada website

vape grande, kemudian pelanggan pilih menu shopsetelah itu pelanggan pilih kategori dan jenis baranglalu sistem akan menampilkan gambar produk.Setelah sudah menentukan pilihan barang,pelanggan klik tombol add to chart, jika masih inginberbelanja produk yang lain pelanggan dapatkembali klik tombol shop dan memilih kategoriproduk. Jika sudah selesai belanja pelanggan dapatmelakukan proses checkout dengan menekan tombolproceed to checkout setelah itu pelanggan mengisibilling details, di dalam billing details pelanggandapat memilih ekpedisi yang di inginkan, lalu sistemakan menampilkan total yang harus dibayarkan olehpelanggan. Kemudian pelanggan dapat mengklikplace order untuk menyelesaikan proses pemesanan,lalu pelanggan akan mendapatkan pemberitahuanmelalui email bahwa pesanan telah diterima. Setelahitu sistem akan menyimpan data pesanan pelanggan.

Seperti yang dapat dilihat pada gambar 5.Activity Diagram Pemesanan .

Pada gambar 5. Activity Diagram Pemesananmenjelaskan tentang proses pemesanan pada websiteVape Grande.

Gambar 3. Activity Diagram Proses Pendaftaran

Gambar 4. Activity Diagram Proses Login

Gambar 5. Activity Diagram Pemesanan

J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 549

d. Proses Pembayaran Dalam proses ini pelanggan terlebih dahulu

melakukan pembayaran melalui bank, setelah itupelanggan dapat membuka website vape grandekemudian pilih menu confirm payment, lalu sistemakan menampilkan form confirm payment yang perludi isi lengkap oleh pelanggan, kemudian pelangganupload bukti pembayaran atau transaksi, setelah ituklik submit. Jika sudah maka sistem akanmenyimpan data pembayaran. Seperti yang dapatdilihat pada gambar 6. Activity DiagramPembayaran .

Pada gambar 6. Activity Diagram Pembayaranmenggambarkan tentang proses pembayaran yangdilakukan oleh pelanggan.

e. Proses Laporan Dalam proses Laporan admin terlebih dahulu

login, kemudian admin memilih menu laporan.Setelah itu pilih laporan penjualan, laporan potonganharga, laporan barang terlaris, laporan pengirimandan laporan rekapitulasi yang akan diserahkankepada pemilik toko. Seperti yang dapat dilihat padagambar 7. Activity Diagram Laporan .

Pada gambar 7. Activity Diagram Laporanberisi tentang laporan yang dimiliki toko VapeGrande.

3.3. Use Case DiagramUse Case Diagram adalah gambaran aktifitas

yang dapat dilakukan oleh actor atau sebagaipengguna yang ada pada use case diagram. UseCase Diagram juga memiliki tujuan yaitumenjelaskan konsep hubungan antara sistem dengandunia luar [6]. Berikut adalah Use Case Diagramyang dibuat oleh peneliti :

a. Use case diagram master Berikut merupakan Use Case Diagram master

yang telah dibuat oleh peneliti :

Pada gambar 8. Use Case Diagram masterterdapat dua actor yaitu pelanggan dan admin, padause case tersebut admin dapat melakukan registrasi,edit data pelanggan, dan juga login. Kemudian actoradmin dapat melakukan login, input kategori, inputproduk, dan juga hapus pelanggan.

b. Use Case Diagram Transaksi Berikut ini merupakan Use Case Diagram

Transaksi :

Pada gambar 9. Use Case Diagram Transaksiberisi dua actor yaitu pelanggan dan admin, padaactor pelanggan dapat melakukan add to cart,checkout, dan konfirmasi pembayaran. Lalu padaactor admin dapat melakukan validasi konfirmasipemesanan, validasi pemesanan, input resi.

c. Use Case Diagram Laporan Berikut ini adalah Use case Diagram Laporan

yang telah dibuat oleh peneliti :

Gambar 6. Activity Diagram Pembayaran

Gambar 7. Activity Diagram Laporan

Gambar 8. Use Case Diagram Master

Gambar 9. Use Case Diagram Transaksi

J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 550

Pada gambar 10. Use Case Diagram Laporanterdapat dua actor yaitu admin dan pemilik toko,kedua actor sama-sama dapat mengakses ataupunmencetak laporan yang ada seperti laporanpenjualan, laporan potongan harga, laporanpemesanan, laporan rekapitulasi, dan juga laporanpengiriman.

3.4. Struktur Tampilan (Menu)a. Struktur Tampilan Menu Front EndBerikut ini merupakan struktur tampilan menu

pelanggan yang ada pada toko Vape Grande :

Pada gambar 11. Struktur tampilan menu frontend menggambar tampilan menu pelanggan, sepertiyang dapat dilihat pada gambar terdapat menuberanda, shop, cart, checkout, confirm payment, myaccount. Didalam menu shop terdapat submenuyaitu liquids, mod, atomizer, baterai/charge, cotton.

b. Struktur Tampilan Menu Back End Pada gambar 12. Struktur tampilan menu back

end merupakan struktur tampilan menu admin yangada pada toko Vape Grande :

Berdasarkan gambar 12. Struktur tampilanmenu back end menggambarkan tentang tampilanmenu admin. Terdapat menu dasbor, woocommerce,products, confirm payment. Pada menuwoocommerce terdapat submenu order, coupons,export order, report. Pada menu products terpadatsubmenu all products, categories, dan jugaattributes.

3.5. Tampilan Layar a. Tampilan Website E-commerce Berikut ini merupakan tampilan dari website

toko Vape Grande :

Pada Gambar 13. Tampilan website E-commerce merupakan tampilan beranda dari websitetoko Vape Grande.

b. Tampilan Order CompleteBerikut ini adalah gambar 14. Tampilan order

complete yang diterima oleh pelanggan dari hasiltransaksi yang ada pada toko Vape Grande :

Pada Gambar 14. Tampilan order completemerupakan hasil transaksi yang diberikan kepadapelanggan dalam bentuk pemberitahuan bahwatransaksi telah selesai dilakukan.

c. Tampilan Laporan Potongan HargaBerikut ini merupakan tampilan dari laoran

potongan harga yang ada pada toko Vape Grande :

Gambar 10. Use Case Diagram Laporan

Gambar 11. Struktur Tampilan Menu. Front End

Gambar 12. Struktur Tampilan Menu Back End

Gambar 13. Tampilan Website E-commerce

Gambar 14. Tampilan Order Complete

J u r n a l I D E A L I S V o l . 3 N o . 1 , J a n u a r i 2 0 2 0 | 551

Pada Gambar 15. Tampilan laporan potonganharga berisi laporan potongan harga atau discountyang diberikan oleh pemilik toko untuk memberbaru yang mendaftar pada website Vape Grande.

d. Tampilan Laporan PemesananBerikut ini merupakan dari laporan pemesanan

yang ada pada website Vape Grande :

Pada gambar 16. Tampilan Laporan Pemesananmerupakan hasil laporan dari setiap pemesanan yangdilakukan oleh pelanggan yang ada pada toko VapeGrande .

4. KESIMPULANSetelah peneliti melakukan penelitian dan

peneliti membuat website E-commerce, maka dapatdiberikan kesimpulan dan juga saran sebagai bentukbagian tahap akhir atau disebut sebagai penutup darilaporan penelitian ini, yaitu dengan diterapkannyaE-commerce pada toko vape grande sebagai mediapemasaran dan juga media informasi kepadapelanggan yang diharapkan dapat mempermudahproses transaksi dalam penjualan. Website E-commerce yang ada akan mempermudah pemiliktoko atau pemilik usaha untuk mengetahui laporanpenjualan, laporan pengiriman, laporan pemesanan,laporan potongan harga dan juga laporan rekapitulasidalam setiap bulan. Ketiga sekaligus yang terakhiryaitu dengan adanya website E-commerce inipelanggan lebih mudah mengetahui update produkterbaru dan informasi terbaru yang ada pada tokoVape Grande.

5. DAFTAR PUSTAKA[1] Efendi Jonaedi, Kamus Istilah Hukum Populer.

Jakarta:Prenadamedia Group, 2016.

[2] Abdulloh Rohi, Trik Mudah Membuat CMS Websitedari Nol. Jakarta:PT Elex Media Komputindo, 2016.

[3] Rahman Su.. Mahir WordPress 4 Plus. Jakarta:PTElex Media Komputindo, 2015.

[4] Budhi G. S., Analisis Sistem E-Commerce PadaPerusahan Jual-Beli Online LAZADA Indonesia.Jurnal Electronics, Informatics, and VocationalEducation (ELINVO), 1(2), 78–82. Retrieved fromhttps://journal.uny.ac.id/index.php/elinvo/article/download/10880/8990, 2016.

[5] Azminuddin, Fundamental Perusahaan. Yogyakarta:Deepublish, 2019.

[6] Mulyani Sri, Metode Analisis dan PerancanganSistem. Bandung:Abdi Sistematika, 2016.

Gambar 15. Tampilan Laporan Potongan Harga

Gambar 16. Tampilan Laporan Pemesanan