Syntax Literate : Jurnal Ilmiah Indonesia p–ISSN: 2541-0849 e-ISSN : 2548-1398 Vol.4, No.6 Juni 2019

## PERANCANGAN APLIKASI E-COMMERCE PADA TOKO N.R. SHOP
Ponsen Sindu Prawito dan Reza Frahmawan Nurviana Rahim Politeknik Praktisi Bandung Email : ponsen.sp@gmail.com dan reza.frahmawan@gmail.com

## Abstrak
N.R Shop merupakan salah satu toko online (online shop) yang menjual aksesoris- aksesoris  smartphone,  laptop,  kamera  dan  lain-lain.  Dalam  lapotan  ini  penulis melakukan  analisa  mengenai  sistem  penjualan  yang  berjalan  saat  ini.  Sistem penjualan  saat  ini  masih  dirasa  masih  kurang  karena  masih  mengunakan  metode manual  dimana  laporan  stok  barang,  laporan  data  pembeli  dan  laporan transaksinya masih ditulis secara manual oleh sipenjual. Untuk mengatasi masalah ini,  maka  penulis  merancang  sistem  penjualan  online  (E-commerce)    untuk membantu  N.R  Shop  dalam  sistem  penjualannya  menggunakan  bahasa pemrograman PHP dan MySQL.
Kata Sandi : Online shop, E-commerce, N.R Shop, PHP, MySQL.

## Pendahuluan
Kemajuan teknologi menuntut suatu pekerjaan manusia yang masih manual dan kurang  efisien  dapat  dilakukan  dengan  teknologi.  Sebaiknya  lebih  ditingkatkan  lagi menggunakan  sistem  yang  modern.  Sistem  komputerisasi  tersebut  dapat  membantu mempercepat  menyelesaikan  pekerjaan.  Sistem  manual  masih  sering  digunakan  dalam dunia  pekerjaan.  Jika  diamati  sistem  yang  belum  menggunakan    komputerisasi  masih sangat kurang efektif dalam proses kerjanya.
Dalam pembuatan laporan ini mengambil objek penelitian Toko N.R Shop yang merupakan  salah  satu  toko  yang  menjual  berbagai  aksesores  laptop, handphone dan gadget lain yang masih menggunakan metode manual dalam penjualannya.
Karena  masih  menggunakan  metode  manual  dalam  penjualannya  maka  didapat berbagai  permasalahan.  Penulis  mengidentifikasi  permasalahannya  untuk  dijadikan sebagai bahan penelitian agar diperoleh solusi untuk N.R Shop.

## Metode Penelitian
Metode-metode  yang  digunakan  dalam  pengumpulan  data  adalah  sebagai berikut:

## 1. Observasi
Pengumpulan data dengan melakukan pengamatan langsung terhadap obyek yang diteliti  dengan  instansi  terkait  untuk  mengumpulkan  data  dan  informasi  yang berkaitan dengan permasalahan yang ada. Informasi yang berkaitan adalah proses jalannya sistem penjualan di instansi tersebut.

## 2. Wawancara
Pengumpulan  data  dengan  melakukan  tanya  jawab  kepada  manajemen  dalam obyek penelitian. Data diperoleh dari berbagai sumber data baik secara langsung maupun tidak langsung. Sumber data langsung yang dimaksud adalah sumber data yang diperoleh secara langsung di lokasi penelitian seperti data-data barang, harga barang, jenis barang, laporan penjualan, dan sebagainya. Sedangkan sumber data tidak  langsung  adalah  sumber  data  yang  diperoleh  penulis  dalam  bentuk  lisan yaitu tanya jawab dengan staf yang bekerja disana.

## 3. Studi Pusaka
Pengumpulan  data  dengan  menggunakan  atau  mengumpulkan  sumber-sumber tertulis,  dengan  cara  membaca,  mempelajari  dan  mencatat  hal-hal  penting  yang berhubungan  dengan  masalah  yang  sedang  dibahas  guna  memperoleh  gambaran secara teoritis.

## Hasil dan Pembahasan
1) Funcional Design (Rancangan Fungsional)
Rancangan  Fungsional  adalah  suatu  gambaran  dari  informasi  yang  terjadi pada  sistem  yang  bersangkutan.  Perancangan  yang  dilakukan  yaitu  Aplikasi E- commerce pada  toko  N.R  Shop  Dengan  adanya  aplikasi  ini  diharapkan  N.R  Shop bisa menjual dagangannya lebih maksimal lagi dibandingkan dengan menggunakan metode  manual.  Adapun  perancangan  aplikasi  ini  meliputi Use  Case  Diagram , Activity Diagram dan Class Diagram.
a) Use Case Diagram
Use  Case  Diagram menggambarkan  fungsionalitas  yang  diharapkan  dari sebuah  sistem .  Use  Case  Diagram ini  sangat  membantu  bila  kita  sedang menyusun requirement sebuah sistem . Use Case yang teridentifikasi didalam Aplikasi E-commerce , yaitu sebagai berikut :

## Tabel 1 Identifikasi Use Case Diagram
Adapun  perancangan Use  Case  Diagram dari  Aplikasi E-commerce adalah sebagai berikut :
Aktor Keterangan
Merupakan pengguna aplikasi yang berperan sebagai admin dan juga penjual yang memiliki akses input,
edit delete barang dan lain-lain.
Merupakan pengguna yang menggunakan aplikasi dimana sebagai pembeli/pelanggan yang akan memesan/membeli barang.
Aktor yang hanya bisa melihat list barang dan tidak bisa melakukan pembelian atau transaksi
Gambar 2 Use Case Diagram Aplikasi Ecommerce N. Shop
Pengunjung  hanya  bisa  melihat  barang  (tidak  bisa  membeli),  jika  ingin membeli  barang  harus  daftar  terlebih  dahulu  menjadi  pelanggan.  Pelanggan bisa  melihat  barang  dan  membeli  barang  yang  dipilih,  sedangkan  Admin memiliki akses full untuk barang dimana bisa upload, hapus dan edit barang dan juga bisa menghapus data pelanggan. Selain itu admin juga bisa membuat laporan barang, pelanggan dan transaksi secara otomatis.
b) Class Diagram
Class  Diagram digunakan  untuk  menampilkan  kelas  –  kelas  dan  paket  – paket di dalam sebuah sistem. Class Diagram memberikan gambaran sistem secara statis dan relasi antar kelas. Adapun Class Diagram yang terdapat pada aplikasi E-commerce N.R Shop adalah seperti pada gambar dibawah ini :
Gambar 3 Class Diagram Aplikasi Ecommerce N.R Shop
Class admin  berhubungan  dengan  class  barang  dan  transaksi  dimana  satu admin bisa mengelola lebih  dari satu  barang dan bisa melihat dan lebih  dari satu  transaksi. Class barang  berhubungan  dengan  class  pelanggan  dan class transaksi  dan  class  admin  dimana  satu  barang  bisa  depakai  dalam  beberapa transaksi, lebih dari satu barang bisa di pesan oleh lebih dari satu pelanggan dan lebih dari satu barang bisa diakses oleh satu admin. Dan class pelanggan berhubungan  dengan class transaksi  dimana  lebih  dari  satu  pelanggan  bisa melakukan transaksi lebih dari satu.
c) Activity Diagram
Activity  Diagram menggambarkan  fungsionalitas  yang  diharapkan  dari sebuah sistem. Kegiatan atau aktifitas tersebut digambarkan dengan simbol – simbol  tertentu  yang  mendeskripsikan  aktifitas Use  Case  Diagram. Berikut adalah Activity Diagram Aplikasi Ecommerce N.R Shop :
Gambar 4 Activity Diagram Pengunjung melihat barang
Activity  Diagram diatas  menjelaskan  bahwa  pengunjung  melihat  barang dengan  cara  memasuki  halaman  utama web dan  sistem  otomatis  akan menampilkan daftar barang yang dijual.
Dalam  diagram  diatas  dijelaskan  bahwa  pengunjung  bisa  melakukan pendaftaran  dengan  cara  masuk  ke  halaman  pendaftaran  lalu  mengisi  form pendaftaran  yang  sudah  disediakan  oleh  sistem.  Setelah  di  isisi  sistem  akan melakukan validasi username dan email jika username dan atau email sudah terdaftar  sebelumnya  maka  sistem  akan  menolak  dan  memberi  peringatan username atau email sudah terdaftar dan meminta pengunjung untuk mengisi kembali.
Gambar 6 Activity Diagram Login Pelanggan
Pada diagram activity diatas pelanggan diminta untuk login dimana pertama memasuki  halaman  login  dan  mengisi  form login yang  telah  disediakan sistem,  lalu  sistem  melakukan  validasi username dan password ,  jika username dan password  tidak sesuai maka akan  muncul notifikasi username dan password salah dan meminta pelanggan untuk mengisi kemabali.
Gambar 7 Activity Diagram Login Admin
Seperti  halnya  pada  diagram  sebelumnya,  pada  diagram  diatas  dijelaskan bahwa  admin  harus  mengisi  form  login  yang  sudah  disediakan  sistem  lalu sistem  akan  memvalidasi username dan password jika username dan password salah maka akan menampilkan notifikasi dan meminta admin untuk melakukan pengisian ulang.
Gambar 8 Activity Diagram pemesanan barang
Diagram  diatas  menjelaskan  bahwa  pelanggan  memesan  barang  dengan  cara memasuki  halam  utama  lalu  memilih  barang  yang  akan  dipesan,  lalu  sistem  akan menampilkan  detail  barang  yang  akan  dipesan.  Setelah  itu  pemesan  memasukan jumlah  barang  yang  akan  dipesan  lalu  sistem  secara  otomatis  akan  menampilkan halaman pengisian data diri.

## Gambar 9 Activity Diagram Pemesanan Sesuai Kategori
Sama seperti diagram sebelumnya tapi pada diagram kali ini pemesanan dilakukan melalui halaman kategori yang dipilih.
Gambar 10 Activity Diagram Registrasi Pembelian (Pengisian Data Diri) Diagram  diatas  melanjutkan  proses  sebelumnya  (pemesanan  barang)  dimana pelanggan  masuk  ke  halaman  detail  pemesanan  barang  dan  input  data pembelian  lalu  diminta  untuk  mengisi  form  data  diri  untuk  proses pengiriman.  Setelah  itu  sistem  memproses  data  inputan  tadi  dan  langsung menampilkan halaman konfirmasi pembayaran.
Gambar 11 Activity Diagram Input Barang
Activity  diagram  input  barang  menjelaskan  proses  upload  barang  dimana admin  masuk  ke  halaman  tambah  barang  dan  mengisi  form  yang  sudah disediakan  lalu  sisem  akan  memvalidasi  id  (gambar)  jika  id  tersebut  sudah ada  maka  sistem  memunculkan  peringatan  bahwa  nama  untuk  id  sudah  ada dan  meminta  untuk  menggantinya.  Setelah  itu  sistem  akan  menampilkan halaman data barang.

## 2) Rancangan Basis Data
Agar  suatu  sistem  berjalan  dengan  baik,  maka  harus  dirancang  dengan baik  pula.  Rancangan  sistem  berupa  penggambaran  dari  komponen  perangkat lunak  dan  perangkat  keras  pada  suatu  sistem.  Dalam  perancangan  data  di  dalam Aplikasi  Ecommerce  pada  toko  N.R  Shop yang  penulis  buat  adalah  dengan membuat basis data sesuai dengan kebutuhan pada perangkat Aplikasi tersebut.
a. Relasi Tabel
Relasi Tabel merupakan hubungan antar table yang menghubungkan antar objek yang berfungsi mengatur suatu operasi database.
Berikut adalah relasi tabel Aplikasi E-commerce pada Toko N.R Shop :

## Gambar 12 Relasi Tabel
a) Tabel  transaksi,  tabel  ini  merupakan  tabel  transaksi  yang  berisi  data dari semua transaksi.
b) Tabel  daftarpelanggan,  tabel  ini  master  yang  berisi  data  pelanggan yang sudah terdaftar.
c) Tabel  admin,  merupakan  tabel  master  yang  berisi  daftar  digunakan untuk login admin.
d) Tabel  barang,  merupakan  tabel  master  yang  berisi  data  dari  semua barang.
e) Tabel  propinsi,  merupakan  tabel  master  yang  berisi  data  dari  semua provinsi yang ada di indonesia.
f) Tabel kabupaten, merupakan tabel master yang berisi data dari semua kabuoaten di Indonesia.
3) Pengujian Sistem
Pengujian sistem dilakukan untuk memeriksa kekompakan antar komponen sistem  yang  diimplementasikan.  Tujuan  utama  dari  pengujian  aplikasi  adalah untuk  memastikan  bahwa  komponen  –  komponen  dari  sistem  telah  berfungsi sesuai  dengan  yang  diharapkan.  Pengujian  yang  digunakan  pada  penulisan
penelitian kali ini menggunakan metode Pengujian Black Box. Dimana pengujian black  box ini  merupakan  pengujian  aspek  fundamental  sistem  tanpa memperhatikan struktur logika.
1. Kasus dan Hasil Pengujian
Berikut  ini  adalah  kasus  untuk  menguji  perangkat  lunak  yang  sudah dibangun  menggunakan  metode Black  Box berdasarkan  Tabel  1  Rencana Pengujian telah dibuat sebelumnya.

## Tabel 1  Pengujian
No Fungsi yang Diuji Cara Pengujian Hasil Yang Diharapkan Hasil Pengujian 1 Tombol Login Input username dan password . Masuk ke halaman sesuai akun yang diinput Berhasil 2 TextBox Username Tidak terisi Muncul pesan ini isian ini Berhasil 3 Textbox Nama Tidak terisi Muncul pesan ini isian ini Berhasil 4 Textbox email Tidak terisi Muncul pesan ini isian ini Berhasil Diisi oleh format selain email Muncul pesan isi oleh email Berhasil 5 Textbox password  Tidak terisi Muncul pesan ini isian ini Berhasil 6 Tombol daftar Salah satu texbox tidak terisi Muncul pesan ini isian ini Berhasil 7 Combobox kategori Pilih combobox Muncul kategori Berhasil 8 Textbox merk Tidak terisi Muncul pesan ini isian ini Berhasil 9 Textbox Nama barag Tidak terisi Muncul pesan ini isian ini Berhasil 10 Textbox Harga Isi selain angka Muncul pesan isi angka Berhasil 11 Input Button Gambar Tidak di isi Muncul pesan tidak ada berkas terpulih Berhasil 12 Textbox stock Isi selain angka Muncul pesan isi angka Berhasil 13 Textbox keterangan Tidak terisi Muncul pesan ini isian ini Berhasil 14 Tombol simpan Salah satu texbox tidak terisi Muncul pesan ini isian ini Berhasil
15 Menu Home Pilih Menu Home Masuk ke halaman home admin Berhasil 16 Menu tambah barang Pilih Menu tambah barang Masuk ke halaman tambah barang Berhasil 17 Menu Daftar pelanggan Pilih menu daftar pelanggan Masuk ke halaman daftar pelanggan Berhasul 18 Menu daftar barang Pilih menu daftar barang Masuk ke halaman daftar barang Berhasil 19 Menu laporan transaksi Pilih menu laporan transaksi Masuk ke halaman laporan transakski Berhasil 20 Menu about Pilih menu about Masuk ke halaman about Berhasil 21 Tombol Logout Pilih tombol logout Keluar dari menu admin dan dari akun Berhasil 22 Tombol Print laporan Pilih tombol print laporan Masuk ke halaman laporan daftar barang dalam bentuk pdf Berhasil 23 Tombol hapus barang Pilih tombol hapus Muncul notifikasi yakin hapus Berhasil 24 Notifikasi yakin hapus Pilih yes Data terhapus Berhasil Pilih no Data tidak terhapus Berhasil 25 Tombol edit Pilih tombol edit Muncul modals edit stock barang Berhasil 26 Modals edit Stock barang Masukan stock yang diubah Stock terubah Berhasil 27 Tombol Print laporan Pilih tombol print laporan Masuk ke halaman laporan dalam bentuk pdf Berhasil 28 Tombol hapus barang Pilih tombol hapus Muncul notifikasi yakin hapus Berhasil 29 Tombol Print laporan Pilih tombol print laporan Masuk ke halaman laporan dalam bentuk pdf Berhasil 30 Tombol hapus barang Pilih tombol hapus Muncul notifikasi yakin hapus Berhasil 31 Menu Home Pilih Menu Home Masuk ke halaman home Berhasil 32 Menu Best Seller Pilih Menu Best Seller Masuk Ke Halaman Best Seller Berhasil 33 Menu Catergori Piih salah satu kategori Masuk ke halama n kategori yang dipilih Berhasil 34 Menu new Pilih menu new Masuk ke halaman new Berhasil 35 Menu about Pilih menu about Masuk ke halaman about Berhasil 36 Tombol register Pilih tombol Mauk ke halaman Berhasil
register pendaftaran 37 Tombol Sign in Pilih tombl sign in Masuk ke halaman login Berhasil 38 Tombol Login Pilih tombl Login Masuk ke halaman login Berhasil 39 Menu Home Pilih Menu Home Masuk ke halaman home Berhasil 40 Menu Best Seller Pilih Menu Best Seller Masuk Ke Halaman Best Seller Berhasil 41 Menu Catergori Piih salah satu kategori Masuk ke halaman kategori yang dipilih Berhasil 42 Menu new Pilih menu new Masuk ke halaman new Berhasil 43 Menu about Pilih menu about Masuk ke halaman about Berhasil 44 Tombol Logout Pilih tombol logout Keluar dari menu user dan dari akun Berhasil 45 Combobox banyak Pilih combbox banyak Muncul pilihan angka 1-5 Berhasil 46 Tombol beli Pilih tombol beli Masuk ke halaman isi data diri Berhasil 47 Text box nama penerima Tidak terisi Muncul pesan ini isian ini Berhasil 48 Combobox provinsi Pilih combobox Muncul pilihan provinsi berhasil 49 Combobox kota Pilih combobox Muncul pilihan kota/kabupaten Berhasil 50 Textbox alamat Tidak terisi Muncul pesan ini isian ini Berhasil 51 Textbox no telepon Isi selain angka Muncul pesan isi angka Berhasil 52 Textbox kode pos  Isi selain angka Muncul pesan isi angka Berhasil 53 Tombol bayar Pilih tombol bayar Masuk ke halaman konfirmasi pembayaran Berhasil

## Kesimpulan
Dari hasil analisis dan perancangan sistem Aplikasi Ecommerce Pada toko N.R Shop dapat disimpulkan bahwa :
1. Penjual tidak perlu membuka tempat untuk berjualan lagi karena semua transaksi sudah otomatis oleh sistem aplikasi.
2. Dengan menggunakan aplikasi ini penjual bisa memaksimalkan penjualan karena dalam  aplikasi  ini  semua  laporan  transaksi,  pelanggan  dan  barang  sudah  tercatat otomatis dan penjual bisa mencetak laporan dengan mudah.

## BIBLIOGRAFI
Arbie, E., (2000), Pengantar Sistem Informasi Manajemen, Edisi Ke-7, Jilid 1 . Jakarta : Bina Alumni Indonesia.
Balalif,  Nufan, Pengenalan  PHP:  Hypertext  Preprocessor .  [Online].  Available: http://staff.unipdu.ac.id/nufan/2013/04/20/pengenalan-php-hypertext-processor/ [2013, April 20].
Booch,  Grady,  (2005), Object  Oriented  Analysis  and  Design  with  Application  2nd Edition . United States of America.
Fowler, Martin. (2005). UML Distilled Edisi 3 . , Yogyakarta: Andi Yogyakarta.
Haryanto,  Teo, Pengenalan  Bahasa  Pemrograman  C# .  [Online].  Available: https://www.codepolitan.com/pengenalan-bahasa-pemrograman-c-587effa1cb95b [2017, Januari 18].
Herlawati dan Widodo, (2011), Menggunakan UML . Bandung: Informatika
http://www.json.org/json-id.html, diakses oleh Andika R. S., 20 Februari 2017, 09.30
https://id.wikipedia.org/wiki/Microsoft_Visual_Studio,  diakses  oleh  Andika  R.  S.,  20 Februari 2017, 10.05
Indrajit,  (2001), Analisis  dan  Perancangan Sistem Berorientasi  Objek .  Bandung: Informatika,
Jogiyanto, (2005). Sistem Teknologi Informasi . Yogyakarta: Andi
Lasa, (2007), Manajemen Perpustakaan Sekolah . Yogyakarta: Pinus
Meliono, Anton M., (1990). Kamus Besar Bahasa Indonesia . Jakarta: Balai Pustaka
Muhyuzir,  T.D.,  (2001), Analisa  Perancangan Sistem Pengolahan  Data,  Cetakan Kedua . Jakarta: PT. Elex Media Komputindo.
Nugroho.Adi,  (2009). Rekayasa  Perangkat  Lunak  Menggunakan  UML  &  Java ,  , Yogyakarta: Andi Offset.
Priyanto,  Andri, Notepad++,  Teks  Editor  Powerfull  Bagi  Programmer .  [Online]. Available: https://www.codepolitan.com/notepad-plus-plus-teks-editor-bagi- programmer [2015, Februari 6]
Rahman,  Arif, Mengenal  Lebih  Dekat  Tentang  Web  Service ,  [Online].  Available: http://bisakomputer.com/mengenal-lebih-dekat-tentang-webservice/ [2014, November 27].
Robert G, Murdick, dkk, (1991), Sistem Informasi  Untuk Manajemen Modern . Jakarta: Erlangga.
Sidharta, Lani.  (1995). Pengantar  Sistem  Informasi  Bisnis .  Jakarta:  PT.  Elex  Media Komputindo.
Sutabri, Tata. (2005). Sistem Informasi Manajemen . Yogyakarta: Andi.