## PERANCANGAN APLIKASI M-COMMERCE BERBASIS WEB
(STUDI KASUS : TOKO WARUNG KAOS)
Ratih Wahyuningrum 1) , Aditio 2)
Jurusan Sistem Informasi Fakultas Ilmu Komputer Institut Bisnis Nusantara Jl. Mayjen D.I. Panjaitan Kav.24 By-Pass Jakarta Timur, Indonesia ratihz@gmail.com 1 ) , keciladitio@gmail.com 2 )
Intisari — Sistem m-commerce digunakan sebagai media penjualan online. Dengan m-commerce, memberikan kemudahan informasi lebih  cepat  tersampaikan  kepelangganmelalui  perangkat  mobile  yang  dimilikinya  dan  jangkuan  pemasaran  lebih  luas,  sehingga diharapkan  bisa  meningkatkan  penjualan  dan  konsumen  yang  sibuk  dapatmelakukan  pemesanan  melalui  ponsel.  Oleh  sebab  itu, penelitian dilakukan pada studi kasus toko warungkaos yang merupakan usaha fashionpria yang menjual produk pakaian-pakaian pria tren masa kini. Untuk  merancang sistem m-commerce pada fashionpria, bahasa pemograman menggunakan PHP dan database menggunakan MySQL dengan web server XAMPP v 3.2.1. Adapun metode penelitian menggunakan metode actionresearch dan UML (Unified  Modeling  Language).  Dengan  model  pengembangan  sistem  yaitu  model  waterfall  tahapannya  seperti  analisis,  desain, pengodean dan pengujian. Hasil yang didapat dari penelitian ini adalah bagi pengguna dapat memasarkan produk fashion ke lingkup yang lebih luas, lebih mudah dalam mengelola stok barang dan transaksinya. Dan dapat memberikan kepuasan bagi pelanggan dengan memberikan kemudahan dalam melakukan transaksi jual beli produk fashionpria secara online.
Kata Kunci — M-Commerce,  Metode Waterfall, Usecase Diagram, Activity Diagram, Class Diagram, Sequence Diagram
Abstract— The m-commerce system is used as an online sales medium. With m-commerce, providing information to customers more quickly through their mobile devices and broader marketing reach, which is expected to increase sales and busy consumers can place orders through mobile phones. Therefore, the study was conducted in a case study of warungkaos shop which is a men's fashion business that sells men's clothing products of current trends. To design a m-commerce system in men's fashion, programming languages use PHP and databases use MySQL with the web server XAMPP v 3.2.1. The research method uses action research method and UML (Unified Modeling Language). With the system development model, the waterfall model stages such as analysis,  design, coding and testing. The results obtained from this study are for users to market fashion products to a wider scope, easier to manage goods stock and transactions. And can provide satisfaction for customers by providing convenience in buying and selling men's fashion products online.
Keywords — M-Commerce,  Waterfall Methode, Usecase Diagram, Activity Diagram, Class Diagram, Sequence Diagram

## I. P ENDAHULUAN
Internet  merupakan  sumber  informasi  yang  paling penting  dilihat  dari  banyaknya  orang  yang  mencari informasi-informasi  melalui  media  internet.  Internet  telah memberikan peran besar di dalam memudahkan hubungan antara para pengguna komputer diseluruh dunia. Hubungan dalam bentuk komunikasi dan pertukaran data terjadi setiap saat.  Adanya  interaksi,  yang  kemudian  memunculkan inovasi untuk mengalihkan kegiatan dunia nyata ke dalam dunia internet, salah satunya adalah kegiatan ekonomi. Hal ini  jugalah  yang  memunculkan  bentuk  lain  dari  transaksi konvensional  ke  dalam  bentuk  transaksi  digital,  yang disebut  dengan m-commerce . M-commerce adalah  sebagai sebuah  bentuk  ekspansi  dan  pengembangan  dari e- commerce ke  ranah  mobile,  yang  mana  memiliki  proses bisnis, teknologi-teknologi terbaru, dan layanan (service) di dalamnya.
Warung Kaos merupakan salah satu nama usaha kecil di  bidang fashion Pria  yang  sudah  berdiri  sejak
Agusutus2015.  Sistem  penjualan  yang  digunakan  Warung Kaos  selama  ini  yaitu  memanfaatkan  mediasosial  sebagai sarana  untuk  mempromosikan  dan  memasarkan  produk fashion -nya  yang  sedang trendy saat  ini,  penjualannya disesuaikan  dengan  target  konsumennya.Pemilik  toko merasa  masih  memiliki  beberapa  kendala  dalam  rangka menunjang  proses  transaksi  penjualan  barang  yaitu kurangnya  jangkauan  pemasaran  yang  lebih  luas, pencatatan  transaksi  penjualan  yang  masih  manual,  dan pelanggan  yang  menginginkan  harga  lebih  kompetitif. Berdasarkan  latar  belakang  diatas  maka  penulis  akan merancang  sebuah  aplikasi m-commerce agar  lebih memudahkan  pelanggan  untuk  belanja  produk  tersebut secara online.

## II. BACKGROUNG/L A TAR BELAKANG

## A. Sistem Informasi
Sistem  adalah  kumpulan  elemen,  komponen,  atau subsistem  yang  saling  berintegrasi  dan  berinteraksi  untuk mencapai tujuan tertentu. Supriyanto, 2007[1]
Informasi adalah data yang telah diproses untuk suatu tujuan  tertentu.  Tujuan  tersebut  adalah  untuk  meng- hasilkan  sebuah  keputusan,  sedangkan  menurut  Turban, informasi  adalah  Informasi  adalah  data  yang  diolah sehingga dapat dijadikan dasar untuk mengambil keputusan yang tepat.Budi Mochamad Noviandi, 2012 [2].

## B. Latar Belakang MunculnyaM-Commerce
Menurut  Christiane  Morris  menyatakan  bahwa m- commerce adalah  perkembangan  dari E-Commerce yang memberikan  kemudahan  kepada  konsumen  melalui perangkat mobile yang dimilikinya dan jaringan wireless. I Putu Agus Eka Pratama, 2015[3]
Setidaknya  terdapat  5  poin  utama  yang  melatar belakangi  munculnya M-Commerce. Kelima  poin  utama antara lain meliputi :
1) Perkembangan teknologi komputer, baik  pada perangkat keras ( Hardware ), perangkat lunak ( Software ), maupun keduanya, yang makin pesat
2) Evolusi jaringan komputer dari waktu ke waktu. Bukan saja  bagaimana  peningkatan  kecepatan  akses  dan transfer  data,  peningkatan  kualitas  layanan  di  dalam jaringan  komputer,  tapi  juga  beragam  teknologi  yang ditanamkan didalamnya.
3) Dukungan  berbagai  vendor  yang  menyediakan beragam  produk  dan  layanan.  Mulai  dari  perangkat keras,  perangkat  lunak  komputer,  produk  pendukung lainnya, hingga layanan jasa.
4) Kemudahan  yang  diberikan  oleh  teknologi Mobile Commerce kepada  para  konsumen  dan  penjual,  jika dibandingkan  dengan E-Commerce umumnya.  Cukup dengan  menggunakan  perangkat  mobile  dan  koneksi internet, maka transaksi dapat dilakukan dengan cepat dan mudah.
5) Dukungan  pihak  bank,  baik  di  Indonesia  maupun  di seluruh  dunia,  beserta  dengan  para  penyedia  layanan transaksi  online,  sehingga  makin  menambah  jumlah pilihan layanan M-Commerce yang tersedia saat ini di seluruh dunia secara online.

## C. Sistem Kerja M-Commerce
Setelah  mengetahui  bagaimana  alur  transaksi  pada Mobile  Commerce ( M-Commerce ),  maka  kini  perlu diketahui,  seperti  apakah  sistem  kerja  dari  sebuah M- Commerce ?  Sebuah  aplikasi  dan  layanan M-Commerce memiliki  sistem  kerja  sebagai  berikut  :  I  Putu  Agus  Eka Pratama, 2015[3]
1) Pengguna  mengakses  aplikasi  dan  layanan M- Commerce dari  perangkat  mobile  mereka  dengan koneksi internet. Misalkan menggunakan Smartphone, Handphone,  Tablet,  yang  terhubung  ke  jaringan internet.
2) Pengguna mengakses toko online yang diinginkan dan mencari  produk  yang  diinginkannya,  memasukan  ke keranjang  belanja  virtual,  sebagaimana  halnya E-
Commerce pada umumnya, kemudian melanjutkan ke proses pembayaran secara online.
3) Semua  proses  berbasiskan  koneksi  internet  secara online dan mobile. Informasi lebih singkat, simpel dan To The Point . Mengingat bahwa tampilan mobile pada umumnya  lebih  singkat  dan  terbatas  dibandingkan desktop.

## D. Website
Website merupakan  halaman-halaman  yang  berisi informasi  yang  ditampilkan  oleh browser seperti mozila, firefox,  google  crhome atau  lainnya,  sedangkan internet adalah jaringan yang digunakan untuk mengirim informasi pada website. Rohi Abdulloh, 2015[4] Hosting merupakan  tempat  dalam  server  komputer yang  digunakan  untuk  menempatkan  data  dan  file web, sehingga  data  dan  file web tersebut  dapat  diakses  oleh semua user pengguna internet. Madcoms Madiun, 2011[5]
Domain adalah nama unik atau alamat yang digunakan untuk  menidentifikasi  nama  server  komputer,  seperti web server ,  atau emailserver di  internet. Domain memberikan kemudahan pengguna di internet untuk melakukan akses ke server dibandingkan  harus  mengingat  deretan  nomor  atau yang dikenal IP. Madcoms, 2011[5]

## E. Metodologi Penelitian
Metodologi penelitian action research adalah tata cara yang  lebih  terperinci  mengenai  tahap-tahap  melakukan sebuah penelitian. Guritno suryo sudaryono, 2011[6]
Untuk teknik pengumpulan data biasanya melakukan langkah-langkah sebagai berikut : Sugiyono, 2004[7]
1) Wawancara
Wawancara  dapat  dilakukan  secara  terstruktur  atau tidak  terstruktur.  Dalam  wawancara  terstruktur, pengumpul  data  telah  menyiapkan  instrumen penelitian berupa pertanyaan-pertanyaan yang alternative jawabannya pun telah
disiapkan.Wawancara tidak terstruktur adalah wawancara  yang  bebas  di  mana  peneliti  tidak menggunakan  pedoman  wawancara  yang  telah tersusun  secara  sistematis  dan  lengkap  untuk pengumpulan datanya.
2) Kuisioner (Angket) Kuisioner merupakan teknik pengumpulan data yang dilakukan dengan cara memberi seperangkat pertanyaan atau pernyataan tertulis kepada responden untuk dijawabnya.
3) Observasi Observasi  digunakan  bila,  penelitian  berkenaan dengan  perilaku  manusia,  proses  kerja,  gejala-gejala alam  dan  bila  responden  yang  diamati  tidak  terlalu besar.
4) Studi Pustaka Studi  pustaka  dilakukan  dengan  cara  mempelajari, mendalami  dan  mengutip  teori-teori  atau  konsep- konsep  dari  sejumlah literature baik  buku,  jurnal,
majalah,  koran  atau  karya  tulis  lainnya  yang  relevan dengan topik, fokus atau variabel penelitian

## F. Model Waterfall
Model Waterfall adalahmodel  SDLC  yang  paling sederhana.  Model  ini  hanya  cocok  untuk  pengembangan perangkat  lunak  dengan  spesifikasi  yang  tidak  berubah- ubah. Rosa A.S, 2014[8]
Gambar 1. Model Waterfall
Tahapan-tahapan  Model Waterfall , sebagai berikut : Rosa A.S, 2014[8]
1) Analisis
Proses  pengumpulan  kebutuhan  dilakukan  secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan user .
2) Desain
Desain  perangkat  lunak  adalah  proses  multi  langkah yang fokus pada desain pembuatan program perangkat lunak,  termasuk  struktur  data,  arsitektur  perangkat lunak, representasi antarmuka, dan prosedur pengkodean.
3) Pengkodean Pembuatan  kode  program  yang  dimana  desain  harus ditranslasikan  kedalam  program  perangkat  lunak. Hasil  dari  tahap ini adalah program  komputer sesuai dengan desain yang telah dibuat pada tahap desain.
4) Pengujian Pengujian fokus pada perangkat lunak secara dari segi lojik  dan  fungsional  dan  memastikan  bahwa  semua bagian  sudah  diuji.  Hal  ini  dilakukan  untuk meminimalisir  keluaran  yang  dihasilkan  sesuai dengan yang diinginkan.

## G. Alat Bantu Perancangan Sistem
Alat  yang  digunakan  untuk  merancang  sistem diantaranya
adalah Usecase Diagram ,
Class Diagram,Sequence  Diagram dan Activity  Diagram yaitu  : Rosa A.S, 2014[8]
1) Usecase  Diagram: merupakan  pemodelan  untuk kelakuan  ( behaviour )  sistem  informasi  yang  akan dibuat. Usecase mendeskripsikan  sebuah  interaksi antara  satu  atau  lebih  aktor  dengan  sistem  informasi yang  akan  dibuat.  Secara  kasar, Usecase digunakan untuk  mengetahui  fungsi  apa  saja  yang  ada  di  dalam
sebuah  sistem  informasi  dan  siapa  saja  yang  berhak menggunakan fungsi-fungsi itu.
2) Class  Diagram: menggambarkan  struktur  sistem  dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun  sistem.  Kelas  memiliki  apa  yang  disebut atribut  dan  metode  atau  operasi.Diagram  kelas  dibuat agar  pembuat  program  atau programmer membuat kelas-kelas sesuai rancangan di dalam kelas agar antara dokumentasi perancangan dan perangkat lunak sinkron.
3) Sequence  Diagram: menggambarkan  kelakuan  obyek pada usecase dengan  mendeskripsikan  waktu  hidup obyek dan message yang dikirimkan dan diterima antar obyek.  Oleh  karena  itu  untuk  menggambar  diagram sekuen  maka  harus  diketahui  obyek-obyek  yang terlibat dalam sebuah use case beserta metode-metode yang  dimiliki  kelas  yang  diinstansiasi  menjadi  obyek itu.  Membuat  diagram  sekuen  juga  dibutuhkan  untuk melihat scenario yang ada pada Usecase .
4) Activity  Diagram  : menggambarkan workflow (aliran kerja)  atau  aktivitas  dari  sebuah  sistem  atau  proses bisnis atau menu yang ada pada perangkat lunak. Yang perlu  diperhatikan  disini  adalah  bahwa  diagram aktivitas  menggambarkan  aktivitas  sistem  bukan  apa yang  dilakukan  aktor,  jadi  aktivitas  yang  dapat dilakukan oleh sistem.

## H. Teknik Pengujian Sistem
Pengujian untuk validasi memiliki beberapa pendekatan, sebagai berikut : Rosa A.S, 2014[8].
1) Black-Box  Testing (Pengujian  Kotak  Hitam)  :  yaitu menguji  perangkat  lunak  dari  segi  spesifikasi fungsional  tanpa  menguji  desain  dan  kode  program. Pengujian  dimaksudkan  untuk  mengetahui  apakah fungsi-fungsi,  masukan,  dan    keluaran  dari  perangkat lunak sesuai dengan spesifikasi yang dibutuhkan. Pengujian  kotak  hitam  dilakukan  dengan  membuat kasus uji yang bersifat mencoba semua fungsi dengan memakai  perangkat  lunak  apakah  sesuai  dengan spesifikasi  yang  dibutuhkan.  Kasus  uji  yang  dibuat untuk  melakukan  pengujian  kotak  hitam  harus  dibuat dengan  kasus  benar  dan  kasus  salah,  misalkan  untuk kasus  uji  yang  dibuat  adalahJika user memasukkan nama pemakai ( Username ) dan kata sandi ( Password ) yang  benar.  Jika user memasukkan  nama  pemakai ( Username )  dan  kata  sandi  ( Password )  yang  salah, misalnya  nama  pemakai  benar  tapi  kata  sandi  salah, atau sebaliknya, atau keduanya salah.
2) White-Box  Testing (Pengujian  Kotak  Putih)  :  yaitu menguji  perangkat  lunak  dari  segi  desain  dan  kode program  apakah  mampu  menghasilkan  fungsi-fungsi, masukan, dan keluaran yang sesuai dengan spesifikasi kebutuhan.  Pengujian  kotak  putih  dilakukan  dengan memeriksa lojik  dari kode program.  Pembuatan kasus uji  bisa  mengikuti  standar  pengujian  dari  standar pemograman yang seharusnya. Contoh  dari  pengujian kotak putih misalkan menguji alur (dengan menelusuri) pengulangan ( looping ) pada logika pemrograman.

## I. Penelitian Sejenis
Penelitian  sejenis  ini  merupakan  sumber/bahan
referensi  yang  digunakan  penulis  dalam  penelitian  ini. Adapun  penelitian  yang  sejenis  dengan  penelitian  penulis dalam dilhat pada tabel berikut :
T ABEL I
P ENELITIAN S EJENIS No. Peneliti Ringkasan Studi Hasil 1. Ayu Meida, Jaidan JauhariJurusan Sistem Informasi, (Universitas SriwijayaJl. Srijaya
Negara Bukit Besar Palembang)
Judul : Aplikasi M-Commerce Untuk Penjualan Buku Pada Suatu Toko Buku BerbasisWAP
(Wireless Application Protocol) Service Dengan Media Handphone [9] Dalam melakukan pengembangan sistem, penulis menggunakan metode FAST (Framework for the Application of Systems Techniques) dengan pendekatan prototyping . Aplikasi Mobile Commerce ini tidak hanya mempermudah pelanggan untuk melakukan pembelian buku secara online tapi juga mempermudah pelanggan untuk mendapatkan informasi-informasi mengenai profil perusahaan, informasi terkini dan informasi mengenai.

## 2. Benny Bunandar
Teknik Informatika STMIK ATMA LUHUR
PANGKALPINANG Jl. Jend. Sudirman Selindung Lama Pangkalpinang Kepulauan Babel
Judul : Aplikasi M-Commerce Berbasis Android pada Toko “FANI BAGS” [10]
Pengembangan perangkat lunak ini menggunakan metode OOAD (Object
Oriented Analysis and Design). Sedangkan metodologi ataupun cara sistematis untuk mengerjakan analisys
dan design yang digunakan adalah OOSE (Object Oriented Software Engineering)
Aplikasi Mobile commerce yang dibuat ini
juga dapat mempermudah para pelanggan/konsumen untuk melakukan pemesanan barang via mobile di Toko Fani Bags.
3. Dessyanto Boedi , Budi Santosa,
Fajar Kurnia
(Jurusan Teknik Informatika UPN “Veteran” Yogyakarta)
Judul : Aplikasi Mobile Commerce Penjualan Buku (Studi kasus pada penerbit  Pro- U media Yogyakarta)[11] Metode pengembangan perangakat lunak dengan model waterfall merupakan metode pengembangan perangkat lunak yang sistematis.
Dimulai dari level sistem kemudian analisa,desain, coding,testing, dan maintenance mobile-commerce ini telah berhasil dikembangkan dan dapat digunakan untuk melakukan pemesanan buku melalui media perangkat bergerak.
4. Deva Rizky (Fakultas Komputer
Universitas Dian Nuswantoro)
Judul : Pengembangan M-
Commerce Berbasis Android dengan Menggunakan pendekatan Web Engineering [12] Metode yang digunakan penulis dalam membangun web e-commerce adalah metode Web Engineering, kemudian dikonfigurasikan pada mobile commerceuntuk memudahkan konsumen dalam mengakses website tersebut.
dengan adanya Website e-commerce dan Aplikasi Mobile Commerce berbasis Android ini dapat memberi kemudahan tidak hanya disisi pengguna user front end atau pembeli tetapi juga memberikan kemudahan disisi user back end atau administrator. 5. Novri Asyara Mahyudanil
(Program Studi Sistem Informasi
Fakultas Sains dan Teknologi
Universitasw Islam Negeri Syarif Hidayatullah Jakarta) Judul : Rancang Bangun M- Commerce Berbasis Android Smartphone dengan Extreme Programming (Studi Kasus PT.GBI) [13]
Metode Pengembangan sistem yang digunakan adalah Extreme Programming
(XP) dengan menggunakan tools UML untuk menggambarkan diagram use case , class diagram, dan lain-lain.
Aplikasi M-Commerce yang dirancang pada Smartphone memberikan kemudahan bagi customer PT.GBI dalam mengakses informasi yang berkaitan dengan jual-beli

## III. M ETODOLOGI P ENELITIAN

## A. Metode Pengumpulan Data
Berikut adalah beberapa cara yang digunakan penulis dalam mengumpulkan data yaitu :
1) Observasi : Dilakukan pengamatan secara langsung ke objek yang diteliti untuk  melihat dari  dekat  kegiatan yang  dilakukan  di  toko  warung  kaos  guna mengumpulkan data. Ini dimaksudkan sebagai bahan dalam membuat sistem m-commerce pada fashion pria.
2) Wawancara :  Metode  pengumpulan  data  yang digunakan  adalah  wawancara  tidak  terstruktur. Dengan cara komunikasi langsung, seperti mengajukan  beberapa  pertanyaan  langsung  dengan pemilik  toko fashion yang  secara  khusus  menangani pemasaran  produknya.  Ini  dimaksudkan  sebagai kajian  dalam  pembuatan  sistem m-commerce pada fashion pria,  yang  kemudian  akan  diajukan  sebagai sistem yang baru.
3) Studi  Pustaka  : Metode    ini    digunakan    untuk mendapatkan    data-data,  informasi  serta  teori-teori yang  mendukung  dalam  perancangan  sistem m- commerce pada fashion pria.  Untuk  mendapatkan informasi  penulis  menggunakan  buku,  jurnal,  karya ilmiah  ataupun  artikel-artikel  yang  berhubungan dengan m-commerce . Penulis juga melakukan tinjauan studi  dari  peneliti  sebelumnya  yang  relevan  dengan penelitian  penulis  dan  bahan-bahan  lainnya  yang berhubungan dengan pembuatan aplikasi M- Commerce ini.

## B. Model Pengembangan Sistem
Model  pengembangan  sistem  yang  penulis  gunakan dalam penelitian ini yaitu model waterfall . Adapun tahapan- tahapan  penelitian  yang  sesuai  model waterfall adalah sebagai berikut :
1) Analisis :  pada  tahap  ini  penulis  membuat  analisa proses  sistem  berjalan,  analisa  proses  sistem  usulan, analisa  kebutuhan  fungsional  dan  analisa  kebutuhan non fungsional.
2) Desain :  pada  tahap  ini  penulis  membuat Usecase Diagram,  Activity  Diagram,  Class  Diagram, dan Sequence  Diagram .  Perancangan  tabel  database menggunakan  MySQL,  serta  perancangan  tampilan antarmuka menggunakan mockup.
3) Pengkodean :  pada  tahap  ini  penulis  membuat program  aplikasi M-Commerce menggunakan  bahasa pemrograman  seperti  HTML,CSS,  PHP, Javascript dan Boostrap .
4) Pengujian :  pada  tahap  ini  penulis  melakukan pengujian dengan metode black-box yang didasarkan pada spesifikasi perangkat lunak. Pengujian black-box
difokuskan pada pengujian fungsional yang disesuaikan dengan desain pemodelan yang digunakan  dan  semua  fungsi  dapat  dipergunakan dengan baik tanpa ada kesalahan.

## IV. H ASIL DAN P EMBAHASAN

## A. Analisa Proses Sistem Berjalan
Analisa  proses  ini  bertujuan  untuk  mengetahui bagaimana  cara  kerja  sistem  yang  sudah  ada  yang  masih dilakukan  secara  manual.  Untuk  mendapatkan  gambaran, mengenai analisisnya akan diuraikan sistem penjualan yang ada di toko warung kaos, antara lain :
1) Konsumen  datang  ketoko  dan  menanyakan  barang yang akan dibeli.
2) Pihak toko mengecek ketersediaan barang..
3) Pihak toko memberikan informasi mengenai ketersediaan barang beserta harganya
4) Jika konsumen menyetejui, maka konsumen melakukan pembayaran.
5) Pihak toko membuat 2 (dua) buah nota penjualan yang satu diberikan kepada pembeli, yang satu lagi sebagai arsip toko.
6) Pihak toko membuat laporan penjualan, dan disimpan sebagai arsip penjualan.

## B. Analisa Proses Sistem Usulan
Analisa  sistem  usulan  ini  bertujuan  mengubah  dan memperbaiki  sistem  yang  masih  manual  ke  dalam  sistem yang terkomputerisasi. Sistem yang akan diusulkan antara lain  yaitu  proses  untuk  pemesanan  produk  oleh customer yang  terdiri  dari  beberapa  tahap  mulai  dari login sampai transaksi  selesai  dan  produk  diterima  oleh customer . Berikut akan dijelaskan tahapan prosesnya, yaitu :
1) Pengunjung  mulai  masuk  ke  website  Warungkaos, dengan  langsung  melihat  menu  utama  lalu  melihat kategori produk-produk dan menu-menu yang tersedia.
2) Setelah itu pengunjung dapat memilih kategori produk dan mencari produk yang diinginkan untuk dibeli.
3) Pengunjung  yang  telah  memilih  produk  yang  ingin dibeli, secara langsung pengunjung akan diperintahkan untuk daftar menjadi member.
4) Bila  pengunjung  telah  selesai  daftar,  secara  langsung pengunjung akan ditunjukan pada login .
5) Pengunjung  yang  telah  menjadi member ,kemudian dapat login dengan  memasukkan username dan password . Sistem akan memvalidasi masukan, jika data yang dimasukkan valid maka member dapat melakukan pemesanan, jika tidak valid maka member harus login kembali.
6) Selanjutnya member dapat melakukan pemesanan pada kategori  produkyang  tersedia.  Dengan  mengklik
tombol  beli,  produk  yang  dibeli  satu  persatu  akan dimasukkan pada keranjang belanja.
7) Kemudian member melakukan  lanjut  transaksisetelah selesai belanja dan melakukan konfirmasi belanja.
8) Setelah  iu member dapat  melihat  total  keseluruan belanjanya  pada  tampilan  transaksi  yang  tersedia, melakukan cetak transaksi dan Logout .
9) Selanjutnya member akan  menerima  informasi konfirmasi melalui sms dan dapat langsung mentransfer  sejumlah  uang  ke  rekening  Bank  yang telah ditetapkan sesuai dengan total pemesanan produk. 10) Kemudian member akan  melakukan  konfirmasi pembayaran melalui sms atau website.
11) Selanjutnya admin akan  menenerima  data  pemesanan barang,  menerima  konfirmasi  pembayaran  tersebut, mengecek  rekening  bank,memproses  pemesanan, mengirimkan konfirmasi pengiriman dan menyerahkan produk  yang  dibeli member tersebut  ke  agen  jasa pengiriman.
12) Agen jasa pengiriman mengirim produk ke alamat yang diberikan oleh pemilik usaha warungkaosdan sekaligus memberikan nomor resi.
13) Dan  akhirnya member menerima  produk  yang  dibeli tersebut  dan dengan diterimanya produk tersebut oleh member ,  maka  proses  pembelian  secara  keseluruhan selesai.

## C. Analisa Kebutuhan Fungsional
Analisis  kebutuhan  fungsional  bertujuan  untuk menganalisis proses yang akan diterapkan dalam sistem m- commerce . Ini disesuaikan dengan kebutuhan proses bisnis pada toko warungkaos.
Analisa  kebutuhan  fungsional  dilihat  dari  sisi pengguna  pada  sistem m-commerce yang  memiliki  fungsi berbeda-beda. Fungsi sistem tersebut, yaitu sebagai berikut :
1) Pengguna : Admin
T ABEL II F UNGSIONAL U NTUK A DMIN
Nama Fungsi Deskripsi Login Proses  dimana  menentukan  hak  akses siapa yang berhak mengelola sistem atau meng-akses  proses  data  order,  data produk,  data customer dan  Sistem  akan melakuan validasi user untuk memastikan proses  apa  saja  yang  bisa  di  akses  oleh user tersebut
Kelola Produk
Proses yang dilakukan pihak admin untuk menambah produk, mengedit produk, dan menghapus produk
Kelola Kategori  Proses yang dilakukan pihak admin untuk menambah,  menghapus,  dan  mengedit kategori produk
Kelola Ongkir
Proses  yang  dilakukan  admin  untuk menambah ongkos kirim ke setiap daerah yang dikirim .
Kelola Order Proses  yang  dilakukan  admin  untuk mengecek data order yang sudah diinput oleh member. Laporan Berisi laporan produk pelanggan,
pemesanan, dan pelunasan pembayaran Logout admin
Proses dimana pihak admin sudah selesai melakukan main-tenance/mengelolanya.
2) Pengguna : Member
T ABEL III F UNGSIONAL U NTUK M EMBER Nama Fungsi Deskripsi Melihat Produk Proses  yang  dilakukan member untuk memilih berbelanja sesuai keinginannya Login Proses  dimana  menentukan  hak  akses siapa  yang  berhak  mengelola  sistem atau meng-akses proses data order, data produk, data member dan Sistem akan melakuan validasi user untuk memastikan  proses  apa  saja  yang  bisa di akses oleh user tersebut Order Produk Proses  dimana member membeli produk sesuai keinginan Lihat data transaksi Proses dimana member melihat produk apa saja yang sudah di order Cari produk Proses dimana member mencari produk yang ingin dibeli Konfirmasi Pembayaran Proses  dimana member melakukan konfirmasi pembayaran produk
Logout member Proses  dimana  pihak member  s udah melakukan  kunjungan  dan  sudah melakukan transaksi
3) Pengguna :Pengunjung
T ABEL IV F UNGSIONAL U NTUK P ENGUNJUNG
Nama Fungsi

## DESKRIPSI
Daftar Digunakan untuk melakukan pendaftaran sebagai member Melihat Produk Digunakan untuk melihat produk- produk yang ada pada catalog Cari Produk Digunakan untuk mencari produk

## C. Analisa Kebutuhan Non Fungsional
Berikut ini adalah spesifikasi hardware dan software untuk perancangan aplikasi m-commerce :
1) Perangkat Keras ( Hardware )
Perangkat  keras  yang  digunakan  untuk  tahap perancangan sistem m-commerce ini adalah  komputer yang memiliki spesifikasi sebagai berikut : 1. Processor , Kecepatan 2.10 GHz 2. Harddisk , 256 GB 3. Memory , 2048 MB 2) Perangkat Lunak ( Software )
Perangkat  lunak  yang  digunakan  untuk  perancangan sistem m-commerce ini yaitu : 1. Sistem  Operasi  menggunakan Windows 8.1 Pro 32- bits.
2. Web  Browser menggunakan MozillaFirefox versi 48.0.1 .
3. Aplikasi Server menggunakan XAMPP v3.2.1.
4. Perancangan Antarmuka
menggunakan
AdobeDreamweaver CS5.
5. Pembuatan Desain Gambar dan Logo
menggunakan Adobe Photoshop CS4. 6. Pembuatan  Diagram  menggunakan Microsoft Office Visio 2007.
7. Perancangan  Desain  Tampilan  menggunakan Balsamiq Mockups 3

## D. Perancangan
Perancangan  sistem  dilakukan  setelah  tahap  analisis sistem  selesai  mendapatkan  gambaran  dengan  jelas  apa yang  harus  dikerjakan.  Berdasarkan  hasil  analisis  sistem pada bab sebelumnya, maka diusulkan perancangan sistem baru  untuk  mengatasi  beberapa  permasalahan  yang  ada  di sistem sebelumnya.
Pada  tahap  ini  adalah  dimana  peneliti  merancang sistem yang akan diterapkan.
1) Usecase Diagram
Gambar 2. UsecaseDiagram 2) Definisi Aktor T ABEL V D ESKRIPSI A KTOR No Aktor Deskripsi 1 Member Pihak  yang  melakukan  proses order  atau  pembelian  produk secara online 2 Admin Pihak  yang  mengelola  proses order  dari member ,  menjual semua  produk  yang  dibeli pihak member dan  mengatur informasi produk. 3 Pengunjung  Pihak  yang  hanya  melihat produk
3) Perancangan Antarmuka (Interface)
Untuk  mempermudah  dalam  pengembangan sistem m-commerce pada fashion pria  (studi  kasus  : warungkaos),  maka  dilakukan  perancangan interface untuk  tampilan  sistem  tersebut.  Berikut  ini  adalah beberapa  perancangan interface sistem m-commerce menggunakan aplikasi Balsamiq Mockup .
Gambar 9. Interface halaman awal

## E. Pengkodean
Ini  merupakan  tahap  untuk  proses  implementasi sistem m-commerce yang  sudah  di  siapkan,    dengan bantuan sistem operasi dan perangkat lunak yang tersedia. Implementasi  dilakukan  dengan  menggunakan  perangkat lunak Adobe  Dreamweaver  CS5 sebagai  editor  program yang telah disertai dengan tools pengkompilasian program.
Bahasa  pemograman yang digunakan dalam perancangan ini yaitu HTML, CSS, PHP, Javascript dan untuk database menggunakan MySQL dengan web server XAMPP.
Pada tahap implementasi rancangan desain alur sistem, rancangan database dan rancangan antarmuka diimplementasikan sehingga menghasilkan sebuah aplikasi  yang  sesuai  dengan  tujuan  awal.  Pada  sistem m- commerce terdapat  2  (dua)  menu  yaitu  halaman  untuk menu pengunjung atau member dan halaman untuk menu admin. Berikut adalah tampilan sistem m-commerce yang telah dibangun berbasis dekstop dan mobile .
8. Pengolah an ongkos kirim 1. Tambah data 2. Edit data 3. Hapus data 1. Sistem menampilkan form tambah ongkos kirim dan berhasil disimpan dalam database . 2.Dapat mengisi field data yang akan diubah dengan benar dan data ongkos kirim dapat diubah dan disimpan dalam database . 3. Akan ada pilihan data ongkos kirim yang ingin dihapus, setelah memilih hapus maka tampil pesan peringatan apakah data akan dihapus 9. Laporan Lihat laporan penjualan dan pembayara n Menampilkan form laporan penjualan dan pembayaran sesuai dengan periode Berhasil
10. Logout Admin yang sudah login memilih menu logout Sistem akan kembali pada menu loginadmin Berhasil

## F. Implementasi Tampilan Mobile Commerce
Implementasi  merupakan  tahap  dimana  sistem informasi  dapat  siap  dioperasikan.  Pada  tahap  ini,  akan diketahui apakah sistem informasi yang dibuat benar-benar dapat menghasilkan tujuan yang diinginkan sesuai dengan analisa dan perancangan yang telah dilakukan.
Setelah login, maka pengunjung berstatus pelanggan atau member dapat memesan produk.
1) Halaman awal versi mobile
Gambar 22. Halaman awal Mobile Commerce
2) Halaman daftar versi mobile
Gambar 23. Halaman daftar versi mobile

## K ESIMPULAN
Dengan  adanya  sistem m-commerce ini,  pemilik  dapat memasarkan  produknya  secara  online  dan  dapat  melakukan transaksi  jual  beli  dengan  mudah  dengan  pelanggannya  baik menggunakan  komputer  desktop  maupun  menggunakan  versi mobile.
Dengan  adanya  aplikasi m-commerce ini  diharapkan pemilik  dapat  mengatasi  semua  masalah  yang  ada  terutama dalam  pembuatan  laporan  transaksi  penjualan  pada  toko warungkaos.

## U CAPAN T ERIMA K ASIH
Segala  puji  bagi  Allah  SWT  yang  telah  memberikan rahmat-Nya  sehingga  penulis  dapat  menyelesaikan  paper  ini tepat waktu. Sholawat dan salam selalu tercurah untuk baginda Nabi Muhammad SAW beserta keluarga dan para sahabatnya.
Paper  ini  tidak  akan  selesai  tanpa  adanya  kesempatan yang  diberikan  kepada  penulis.  Oleh  sebab  itu  ucapan  terima kasih  yang  sebesar-besar  saya  berikan  kepada  Pak  Nanang selaku  Kaprodi  Jurusan  Sistem  Informasi,  terima  kasih  juga untuk  Aditio  selaku  penulis  kedua  dan  terutama  untuk  suami tersayang  yang  selalu  mendukung  dalam  segala  hal  sehingga paper ini dapat selesai.

## R EFERENSI
[1] Supriyanto,  Aji.  (2007). Pengantar  Teknologi  Informasi .  Jakarta  : Salemba Infotek.
[2] Budi  Mochamad  Noviandi,  Dini  Destiani,  Partono.  (2012). Perancangan  Sistem  Informasi  Inventori  Barang  Di  Bank  Sampah Garut , Garut: Sekolah Tinggi Teknologi Garut (STT-Garut).
[3] I Putu Agus Eka Pratama. (2015). E-Commerce, E-Business, dan Mobile Commerce . Bandung : Informatika Bandung.
[4] Abdulloh,  Rohi.  (2015). Web  Programming  is  Easy .  Jakarta  :  Media
Komputindo.
[5] Madcoms.  (2011). Dreamweaver  CS5  PHP-MYSQL  Untuk  Pemula .
Yogyakarta : Andi.
[6] Guritno,  Suryo,  Sudaryono  dan  Untung  Rahardja.  (2011). Theory  and
Application of IT Research . Yogyakarta : Andi Offset.
[7] Sugiyono.  (2004). Metode  Penelitian  Adminitrasi .  Bandung  :Alfabeta Bandung.
[8] Rosa,  A.S  dan  M.Shalahuddin.  (2014). Rekayasa  Perangkat  Lunak Terstruktur Dan Berorientasi Objek . Bandung : Informatika Bandung.
[9] Ayu  Meida,  Jaidan  Jauhari.  (2011). Aplikasi  M-Commerce  Untuk Penjualan  Buku  Pada  Suatu  Toko  Buku  BerbasisWAP  (Wireless Application  Protocol)  Service  Dengan  Media  Handphone .  Jurusan Sistem Informasi, Universitas Sriwijaya.
[10] Bunandar, Benny. Aplikasi M-Commerce Berbasis Android Pada Toko “Fani Bags” . Teknik Informatika STMIK Atma Luhur Pangkal Pinang.
[11] Dessyanto Boedi P, Budi Santosa, Fajar Kurnia. (2010). Aplikasi Mobile Commerce Penjualan Buku  (Studi Kasus Pada Penerbit Pro-U Media Yogyakarta) .Jurusan Teknik Informatika UPN “Veteran” Yogyakarta.
[12] Rizky,  Deva.  (2009). Pengembangan  Mobile  Commerce  Berbasis Android Dengan Menggunakan Pendekatan Web Engineering. Fakultas
Komputer Universitas Dian Nuswantoro.
[13] Novri, Asyara Mahyudanil (2014). Rancang Bangun Mobile Commerce berbasis  Android  Smartphone  dengan  Extreme  Programming  (Studi Kasus : PT. GBI) . Fakultas Sains dan Teknologi Program Studi Sistem Informasi UIN Syarif Hidayatullah Jakarta .