Perancangan dan Pembuatan Aplikasi Website E-commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Sholiq1, Cahya Yunita2, Hanim Maria Astuti3, Tony Dwi Susanto4, Anisah Herdiyanti5, Khakim Ghozali6 1-6- Institut Teknologi Sepuluh Nopember (ITS) Surabaya 1sholiq@is.its.ac.id ABSTRAK Usaha Mikro-Kecil dan Menengah (UMKM) Nena Namo adalah UMKM yang berfokus pada produksi kerajinan tangan yang menggunakan karung goni dan kain belacu sebagai bahan dasar untuk membuat produknya. UMKM Nena Namo juga memiliki keunikan lain yang membuat produknya memiliki karakteristik yaitu desain motif yang dilukis secara manual menggunakan tangan. Produk kerajinan yang dipasarkan beragam, seperti tas, dompet, kotak tisu, sapu tangan, sampul makanan, kotak pensil, taplak meja, dan sebagainya. Mekanisme penjualan untuk UMKM Nena Namo saat ini terbatas pada pelanggan memesan melalui SMS, telepon, atau datang langsung ke rumah produksi Nena Namo. Untuk memperluas pasar dan memanfaatkan internet sebagai sarana penjualan produknya, maka pada penelitian ini UMKM Nena Namo membuat aplikasi website e-commerce. Mempertimbangkan keunikan atau karakteristik produk kerajinan UMKM ini yang ada pada desain aksesorisnya, situs web e-commerce akan dilengkapi dengan fitur untuk membuat desain kustomisasi produk oleh pelanggan. Pada penelitian ini telah dihasilkan sebuah aplikasi website e-commerce untuk UMKM Nena Nemo yang telah diuji dengan test case berbasis use case. Kelebihan artikel ini terletak kerunutan perancangan dan pembuatan aplikasi yang dimulai dari wawancara, analisis kebutuhan pengguna, perancangan, pengkodean, dan pengujian yang dapat dirunut tahap per tahap. Kata Kunci: website, e-commerce, UMKM, kerajinan tangan ABSTRACT Small and Medium Enterprises (SMEs) of Nena Namo was a SMEs that focused to produce handicrafts that used jute sacks and calico cloth as the basic material for making its products. SMEs of Nena Namo also had another uniqueness that made its products had a characteristic that was a motif design that was manually painted using hands. Handicraft products that were marketed were diverse, such as bags, wallets, tissue boxes, handkerchiefs, food covers, pencil boxes, tablecloths and so on. The sales mechanism for SMEs of Nena Namo was currently limited to customers ordering via SMS, telephone, or coming directly to the Nena Namo production house. To expand the market and to use the internet as a means of selling its products, then in this study SMEs Nena Namo made an e-commerce website application. Considering the uniqueness or characteristics of UMKM handicraft products lying in the design of the accessories, the websites of e-commerce would be equipped with features to make product design customization by customers. In this study, application of e-commerce website for the SMEs was tested using the test case which based use case. The advantages of this article lied in the orderliness of the design and construction of applications that begin with interviews, analysis of user needs, design, coding, and testing that can be traced to stages per stage. Keywords: website, e-commerce, SMEs, handicrafts 1. PENDAHULUAN Usaha Mikro, Kecil, dan Menengah Nena Namo merupakan UMKM yang bergerak dalam bidang penjualan produk kerajinan tangan berupa tas, dompet, tudung saji, kotak pensil, kotak tisu, hiasan meja dan produk pesanan lainnya. Harga yang dibandrol bervariasi sesuai dengan tingkat kerumitan pembuatan produk, yakni sekitar Rp. 10.000 sampai Rp. 250.000. UMKM Nena Namo terletak di daerah Wonorejo Kedungsari Surabaya tepatnya di Jalan Kedungsari nomor 21 C. Mekanisme penjualan yang diterapkan oleh UMKM Nena Namo masih sebatas pembeli datang langsung ke lokasi rumah produksi atau menghubungi dan mengirimkan pesan kepada pemilik UMKM Nena Namo. Persaingan bisnis penjualan kerajinan tangan sekarang itu, dibutuhkan suatu media yang dapat meningkatkan penjualan. ini sangat ketat. Oleh karena Sementara itu, pengguna teknologi informasi semakin hari semakin bertambah, berdasarkan hasil dari data Internet World Stat bahwa populasi pengguna internet Indonesia mencapai sekitar 143.260.000 orang pada tahun 2018 [1]. Pencapaian angka tersebut membuat Indonesia menduduki peringkat ke-5 terbesar di dunia dalam hal jumlah pengguna internet [1]. Jika, pada tahun 2018 jumlah pengguna internet Indonesia sudah mencapai sekitar 143,26 juta orang, kemungkinan besar jumlah ini bertambah. Menurut Asosiasi akan terus Page | 80, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Penyelenggara Jasa Internet Indonesia (APJII), secara umum pertumbuhan internet di negeri kita ini selaras dengan pertumbuhan internet di dunia [2]. informasi yang Penyebab pengguna semakin bertambah diduga karena gaya hidup masyarakat semakin familiar dengan dunia maya dengan bertambahnya pengguna media sosial seperti Instagram, Snapchat, Line, Facebook, Twitter, YouTube, Instagram dan lain sebagainya [3]. Tidak hanya itu, semakin menjamurnya bisnis jual beli online ataupun e-commerce juga menyebabkan pengguna teknologi informasi semakin bertambah [3]. teknologi singkatan dari electronic commerce yaitu pembelian, penjualan, dan pemasaran barang serta jasa melalui sistem jaringan komputer televisi, elektronik, seperti ataupun internet [4]. Perdagangan elektronik ini sudah masuk dalam kategori industri teknologi informasi, karena semua jenis usahanaya melibatkan aplikasi dan penerapan sistem TI [5]. Menurut David Baum definisi e-commerce yang sudah distandarkan dan disepakati menyatakan bahwa e-commerce merupakan suatu set dinamis teknologi, aplikasi dan proses bisnis yang menghubungkan perusahaan, pelanggan, dan komunitas tertentu melalui transaksi elektronik dan perdagangan barang, pelayanan, dan informasi yang dilakukan secara elektronik [6]. Sehingga dapat disimpulkan bahwa e-commerce merupakan proses pembelian dan penjualan jasa atau produk antara dua belah pihak melalui jaringan internet. e- commerce diprediksi mencapai Rp 144 triliun pada 2018, naik dari Rp 69,8 triliun di 2016 menjadi Rp 25 triliun di 2014 [7]. Memperhatikan data-data terakhir tentang pertumbuhan e-commerce di Indonesia, maka hal ini adalah peluang bagi pelaku bisnis untuk turut menjadi pemain di bisnis online. E-commerce merupakan Sedangkan Nilai transaksi pembelian pelanggan meliputi fitur menampilkan informasi deskripsi dan harga produk, fitur memberikan ulasan dan rating, fitur pemesanan dan fitur konfirmasi pembayaran, dan lain-lain. Alhasil fitur tambahan pada website e-commerce ini adalah fitur kustomisasi. Fitur kustomisasi adalah fitur yang memungkinkan pembeli/pelanggan dapat membuat desain produk sesuai keinginan mereka langsung pada website. Fasilitas fitur kustomisasi akan ditampilkan pada satu halaman khusus, juga disediakan template atau kanvas berbagai macam produk seperti tas, dompet, kotak pensil, kotak tisu, taplak meja dan sebagainya. Keuntungan adanya fitur kustomisasi, membuat penjual akan lebih mudah memahami desain detail produk yang diinginkan kecil pembeli, kemungkinan kesalahan yang dibuat oleh penjual dalam proses pembuatan produk pemesanan. oleh sehingga Implementasi e-commerce untuk UMKM sudah pernah dilakukan sebelumnya di Indonesia, antara situs sentra dan situs Indonesianproduct.biz [9], website produk UMKM berbasis CMS dan teroptimisasi dengan model internal dan eksternal [10], e-commerce untuk produk kaos dan souvenir [11], dan lainnya. lain situs link Bagaimananapun juga, produk penelitian ini selain memiliki fitur-fitur e-commerce pada umumnya, website e-commerce di penelitian ini memiliki perbedaan dengan penelitian sebelumnya yaitu pada aspek kustomisasi produk yang belum tampak sebelumnya. Fitur kustomisasi produk memungkinkan pelanggan melakukan kustomisasi produk yang diinginkan sebelum order dilakukan. Jadi dengan fitur ini diharapkan pelanggan dapat merancang sendiri produk yang sesuai dengan akan dipesan keinginannya. Tujuan di e-commerce Strategi untuk menghadapi perkembangan ini, UMKM Nena Namo teknologi menginginkan untuk e-commerce memasarkan produknya. Harapannya dengan adanaya website e-commerce, UMKM Nena Namo dapat memiliki media promosi produk, sehingga dapat meningkatkan jangkauan pemasaran dan peningkatan pendapatan. Manfaat penerapan e- commerce akan memberikan gambaran tentang bagaimana teknik sistem penjualan yang dibutuhkan untuk menghadapi persaingan di era globalisasi saat ini [8]. saat website untuk merancang dan membangun website e-commerce untuk UMKM Nena Nemo yang memiliki fitur kustomisasi produk yang mana kustomisasi dilakukan sendiri oleh pelanggan. Kelebihan paper ini adalah membahas pembuatan aplikasi website e- commerce secara runtun dari analisis kebutuhan pengguna, rancangan dengan Unified Modeling Language (UML), pengkodean dengan struktur kode yang diturunkan dari diagram kelas di UML, dan pengujian aplikasi berbasis use case. penelitian ini adalah Berdasarkan penjelasan di atas, penulis berupaya membantu memecahkan permasalahan tersebut, yaitu dengan merancang dan membuat aplikasi kustomisasi pemesanan produk handicraft yang diterapkan di UMKM Nena Namo Surabaya. Website e-commerce yang dibuat selain memiliki fitur yang sama pada umumnya website e-commerce, yaitu melayani website e-commerce 2. METODOLOGI PENELITIAN Metode pembuatan sistem perangkat lunak dilaksanakan dalam tahapan-tahapan, yaitu: analisis kebutuhan, desain, pengkodean, pengujian, dan implementasi. Masing-masing tahapan dijelaskan secara singkat di bawah ini. SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 81
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Tahap Analisis Kebutuhan Tahap Desain Tahapan analisis merupakan tahapan yang dilalui oleh penulis untuk membuat website e- produk commerce handicraft UMKM Nena Namo, setelah mencari dan mempelajari literatur terkait penelitian. Tahap analisis dilakukan dengan aktivitas antara lain: - Melakukan wawancara kustomisasi pemesanan Wawancara dilakukan kepada pemilik UMKM Nena Namo dengan teknik semi terstruktur. Tujuan wawancara adalah untuk mendapatkan kebutuhan aplikasi perangkat lunak yang diperlukan oleh UMKM Nena Namo. Analisis hasil wawancara Pada tahapan ini, penulis melakukan translasi wawancara ke dalam cerita pengguna, membuat daftar kebutuhan sistem berdasarkan hasil translasi wawancara ke dalam cerita pengguna, membuat daftar kebutuhan fungsional sistem, dan mendeskripsikan sistem yang akan dibuat. Membuat Deskripsi Pengguna Tujuan tahap ini adalah mengetahui siapa saja pengguna yang terlibat untuk lebih memahami peran apa saja yang dapat dikerjakan oleh setiap pengguna. untuk memudahkan memetakan setiap aktivitas dan memudahkan untuk membuat diagram use case. Hal dimaksudkan Menurunkan Diagram Use Case Diagram use case merupakan pemodelan untuk menggambarkan kelakuan (behavior) sistem yang case mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat. Diagram use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang berhak menggunakan fungsi- fungsi tersebut. akan dibuat. Setiap use Membuat Deskripsi Use Case Deskripsi use case menjelaskan bagaimana skenario sistem berjalan dari masing-masing use case yang telah dirancang. Memperbandingkan alur proses bisnis sebelum dan sesudah menggunakan aplikasi Bagian ini untuk mengetahui perbandingan alur proses bisnis yang lama atau yang masih belum menggunakan sistem dan alur proses bisnis yang baru yang sudah menggunakan sistem. Tahap desain digunakan untuk mengubah kebutuhan-kebutuhan yang sudah dijabarkan pada tahap analisis menjadi representasi ke dalam bentuk "blueprint " sistem yakni diagram sequence, diagram kelas, desain basis data, dan desain dapat antarmuka. mengimplementasikan telah kebutuhan disebutkan pada tahap sebelumnya. Desain harus yang Tahap Pengkodean Pengkodean digunakan untuk mentransfer rancangan dalam bentuk diagram kelas ke kode bahasa pemrograman dengan paradigma berorientasi obyek. Bahasa pemrograman yang digunakan adalah Hypertext Prepocessor (PHP). Pembuatan kode sumber atau script dilakukan pada tiga komponen utama yakni Model, View dan Controller ketiga komponen tersebut dikenal dengan sebutan MVC. Pembuatan kode atau script pada view untuk tampilan pengguna. Kemudian controller untuk penghubung antara view dan model. Model digunakan untuk memanggil data dari basis data yang berisi query. Tahap Pengujian Tahapan ini digunakan untuk menemukan eror pada sistem yang telah dibuat. Pengujian dilakukan dengan cara menguji setiap fitur-fitur pada website e-commerce UMKM Nena Namo. Pengujian fitur menggunakan test case berbasis use case. 3. HASIL DAN PEMBAHASAN Hasil Analisis Kebutuhan Pengguna Pada tahapan ini, penulis melakukan translasi hasil wawancara ke dalam cerita pengguna, membuat daftar kebutuhan sistem berdasarkan hasil translasi wawancara ke dalam cerita pengguna, membuat daftar kebutuhan fungsional sistem, dan mendeskripsikan sistem yang akan dibuat. Tabel 1 menunjukkan hasil translasi hasil wawancara pengguna ke dalam bentuk cerita pengguna. Tampak bahwa kolom 3 menunjukkan hasil kesimpulan dari cerita pengguna ke dalam kebutuhan pengguna. Tabel 1. Translasi Kebutuhan ke Dalam Bentuk Cerita Pengguna Kode Cerita Pengguna Kebutuhan US-01-01 Sistem mudah diakses dimanapun 1) Sistem berbasis web Deskripsi cerita:: Sistem yang akan dibuat harus mudah diakses oleh pengguna dimanapun dan kapanpun. US-01-02 Pengguna dapat mendesain produk langsung pada website 2) Fitur Buat Desain Deskripsi cerita:: Sistem dilengkapi dengan satu halaman khusus yang akan digunakan pelanggan untuk membuat desain produk yang diiginkan langsung pada website. Tujuan adanya halaman khusus untuk mendesain produk adalah penjual dapat lebih memahami detail gambar atau desain yang diinginkannya. Page | 82, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Kode Cerita Pengguna Kebutuhan US-01-03 Sistem berbasis web atau e-commerce kustomisasi hanya bisa digunakan oleh pengguna tertentu Deskripsi cerita:: Sistem e-commerce untuk fitur desain hanya bisa digunakan oleh pengguna yang telah daftar dan melakukan login. Kemudian untuk halaman admin, hanya admin yang dapat mengakses halaman tersebut. 3) Fitur Sign in/Sign up 4) Fitur untuk pelanggan yaitu berupa front end 5) Fitur untuk admin US-01-04 Sistem menyediakan informasi produk 6) Fitur Produk Deskripsi cerita: Sistem ini akan dilengkapi dengan halaman untuk menampilkan informasi produk-produk UMKM. US-01-05 Sistem menyediakan informasi tentang UMKM Nena Namo 7) Fitur Tentang Kami Deskripsi cerita Sistem akan memiliki halaman untuk memberikan informasi seputar UMKM Nena Namo baik dari profil UMKM dan personil di UMKM Nena Namo. US-01-06 Sistem menyediakan informasi mengenai produk baru 8) Fitur Beranda Deskripsi cerita: Sistem akan memiliki halaman untuk memberikan informasi produk baru UMKM Nena Namo. US-01-07 Sistem menyediakan fitur bagi pengguna yang ingin menyimpan produk tanpa harus membeli 9) Fitur Checkout Deskripsi cerita: Sistem akan memiliki halaman untuk menyimpan produk yang disenangi oleh pelanggan. Produk yang disimpan oleh pelanggan nantinya dapat dihapus atau dilanjutkan ke proses pembelian. US-01-08 Sistem menyediakan fitur untuk memberikan detail produk 10) Fitur Detail Deskripsi cerita: Sistem akan memiliki halaman untuk memberikan informasi, deskripsi, spesifikasi produk maupun ulasan yang berupa komentar dan rating. US-01-09 Sistem menyediakan fitur untuk memberikan informasi status dari pemesanan ataupun 11) Fitur Belanjaanku pembayaran Deskripsi cerita: Sistem akan memiliki halaman untuk memberikan informasi status pemesanan yang belum dibayar dan pesanan yang sudah dibayar sampai status yang sudah melebihi batas waktu pembayaran yang telah ditentukan. Pada halaman ini juga disediakan informasi nomor resi, untuk melacak pengiriman produk ke alamat pelanggan. US-01-10 Sistem menyediakan fitur untuk pelanggan yang ingin mengkonfirmasi pembayaran setelah transfer Deskripsi cerita: Sistem akan memiliki halaman yang berisi formulir konfirmasi pembayaran, dengan data yang harus diisi adalah nomor rekening, nama, dan nominal transfer. Tujuannya memudahkan pengelola UMKM Nena Namo untuk mengecek uang yang masuk dalam rekening pemilik UMKM Nena Namo. 12) Fitur Konfirmasi Pembayaran US-01-11 Sistem memiliki halaman khusus untuk admin dalam memasukkan data produk kedalam website Deskripsi cerita: Sistem memiliki halaman khusus untuk admin untuk memasukkan produk baru dan menghapus produk. US-01-12 Sistem memiliki halaman khusus untuk admin dalam melihat invoice yang masuk 13) Fitur View All Data Product 13) Fitur View All Data Product 14) Fitur Add New Data Product 15) Fitur Edit Data 16) Product 17) Fitur View All Invoices 18) Fitur Detail Invoices 19) Fitur Detail Status 20) Fitur Input Resi US-01-13 Sistem memiliki halaman khusus untuk admin dalam melihat data total penjualan bulanan Deskripsi cerita: Sistem memiliki halaman khusus untuk admin untuk melihat semua rekapitulasi penjualan bulanan produk UMKM Nena Namo dalam bentuk grafik yang mana bentuk grafik akan lebih memudahkan untuk melihat data. 21) Fitur Rekapitulsi Penjualan Daftar kebutuhan sistem dibuat berdasarkan hasil analisis terhadap cerita pengguna. Tabel 2 menampilkan daftar kebutuhan yang ada pada sistem proses e-commerce yang didapatkan dari sebelumnya dengan cara mengekstrak daftar kebutuhan di Tabel 1 menjadi fitur-fitur. SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 83
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Tabel 2. Daftar Kebutuhan Sistem E-Commerce UMKM Nena Namo Kode Nama Fitur Penjelasan KF-01 KF-02 Fitur Beranda Fitur Produk Pada fitur halaman utama terdapat banner, informasi produk baru, dan informasi produk dari beberapa sub-kategori. Pada fitur produk memiliki menu dropdown untuk memilih kategori dan sub-kategori produk. KF-03 Fitur Buat Desain Fitur ini merupakan fitur yang menyediakan template untuk mendesain produk sesuai keinginan pelanggan KF-04 KF-05 KF-06 KF-07 KF-08 Fitur Tentang Kami Fitur Checkout Fitur Detail Fitur Belanjaanku Fitur Konfirmasi Pembayaran Fitur ini memberikan informasi seputar profil atau sejarah berdirinya UMKM Nena Namo dan personil yang tergabung dalam UMKM Nena Namo kepada pengunjung website Fitur checkout merupakan fitur untuk keranjang belanja, tujuannya adalah untuk menyimpan produk yang diginkan tanpa haru membeli, namum pelanggan juga dapat menghapus produk dari keranjang belanja dan dapat melakukan pembelian dengan hanya menekan button PAY. Fitur detail merupakan fitur yang berisi informasi produk, deskripsi produk, spesifikasi produk maupun ulasan yang berupa komentar dan rating. Fitur belanjaanku merupakan fitur yang berisi informasi status dari pemesanan yang belum dibayar, pesanan yang sudah dibayar, dan status pesanan yang sudah due date. Pada halaman ini juga disediakan informasi nomor resi, untuk melacak pengiriman produk ke alamat pelanggan. Fitur konfirmasi pembayaran merupakan fitur yang berisi formulir konfirmasi pembayaran dengan data yang harus diisi meliputi: nomor rekening, nama, dan nominal transfer. Tujuannya untuk memudahkan pengelola UMKM Nena Namo dalam mengecek uang yang masuk ke rekening pemilik UMKM Nena Namo KF-09 KF-10 Fitur Sign in Fitur Sign up Fitur Sign in digunakan untuk pelanggan yang ingin melakukan pembelian produk dan desain produk. Tentunya pengguna yang dapat log in adalah pengguna yang teregistrasi. Fitur sign in digunakan untuk pelanggan yang ingin membuat akun sebelum menggunakan website e-commerce. KF-11 KF-12 KF-13 KF-14 KF-15 Fitur admin View All Data Product Fitur admin Add New Data Product Fitur admin Edit Data Product Fitur admin View All Invoices Fitur admin Detail Invoice Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat produk- produk yang sudah dimasukkan ke website. Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat menambah produk baru dengan memasukkan nama produk, harga, kategori dan subkategori, deskripsi produk, gambar produk, dan tanggal pemasukan. Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat mengubah semua data yang berhubungan dengan produk yang telah disimpan sebelumnya. Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat semua invoice yang masuk dengan status sudah terbayar atau belum. Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat detail invoice produk-produk yang dipesan oleh pelanggan. KF-16 Fitur admin Detail Status Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat detail status dan status konfirmasi pembayaran. Jika pelanggan telah melakukan konfirmasi pembayaran, maka status yang semula unpaid (belum membayar) menjadi paid (sudah membayar). KF-17 Fitur admin input Resi Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat memasukkan atau memberi nomor resi kepada pemesanan yang sudah dikirim kepada pelanggan. KF-18 Fitur admin Rekapitulasi Penjualan Fitur ini hanya dapat diakses oleh admin. Pada halaman ini admin dapat melihat rekapitulasi penjualan bulanan produk UMKM Nena Namo dalam bentuk grafik. Akhirnya, daftar kebutuhan pengguna yang disarikan dari Tabel 2 ditampilkan di Tabel 3 yang sudah dikelompokan ke masing-masing pengguna, yaitu pelanggan, pelanggan dan admin, dan admin. Tabel 3. Daftar Kebutuhan Fungsional Sistem Pengguna Pelanggan dan Admin Admin Daftar Kebutuhan Fungsional Sign in, sign up, dan Register View All Data Product, Add New Product, Edit Product, View All Invoices, Detail Invoice, Detail Status, Input Resi, dan Rekapitulasi Penjualan Pengguna Pelanggan Daftar Kebutuhan Fungsional Beranda, produk, Buat Desain, Tentang Kami, Checkout, Detail, Belanjaku, dan Konfirmasi Pembayaran Page | 84, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Diagram Use Case Sistem Aktor Use Case Use case diagram atau diagram use case merupakan pemodelan untuk menggambarkan fungsionalitas yang disediakan oleh sistem [5]. Use case mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem perangkat lunak. Dengan pengertian yang cepat, diagram use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang berhak menggunakan fungsi-fungsi tersebut. Secara garis besar, pada sistem ini ada dua bagian sistem yaitu: bagian depan (front-end) dan (back-end). Bagian depan bagian belakang merupakan bagian yang ditujukan untuk aktor Pelanggan, belakang diperuntukan aktor Administrator. Gambar 1. Diagram Use Case Untuk E-Commerce Produk Kerajinan Tangan UMKM Nena Namo menunjukkan dua aktor yaitu Pelanggan dan Administrator, sedangkan aktor User adalah aktor generalisasi dari aktor Pelanggan dan aktor Administrator untuk menjalankan use case generik yang mana use case tipe ini dapat dilakukan oleh aktor Pelanggan atau aktor Administrator yaitu Register, Logout, dan Login. sedangkan bagian Tabel 4. Daftar Aktor dan Use Case Sistem Aktor Use Case Pelanggan Display home, Search product, Display myshopping, Display details of shopping User status, Confirm payment, Create order, Display product in cart, Display product, Display a detail product, Add product to cart, Create design a product, Add comment and rate to product Login, Logout, dan Register Administrator Add a new product, Update a product, Delete a product, Change order status, Display order, Display a detailed order, Add shipping number, Display sales recapitulation Beberapa fungsi yang bisa dilakukan aktor User, Pelanggan, dan Administrator terhadap sistem perangkat lunak disajikan di Tabel 4. Yang menarik di sistem perangkat lunak ini adalah use case 'Create a product design' yang mana dengan fungsi ini seorang pelanggan dapat mendesain produk yang akan dipesan menggunakan aplikasi e- commerce ini. Deskripsi Use Case Deskripsi use case (Use Case Description) berisikan tentang prilaku yang ada pada use case. Deskripsi use case menjelaskan bagaimana skenario sebuah fungsi berjalan dari sebuah use case yang telah dirancang. Tabel 5 menunjukkan deskripsi use case untuk use case 'Create a product design', karena terbatasan tempat, pada paper ini penulis hanya menampilkan satu deskripsi use case saja. Gambar 1. Diagram Use Case Untuk E-Commerce Produk Kerajinan Tangan UMKM Nena Namo SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 85
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Tabel 5. Deskripsi Use Case 'Create A Product Design' Nama Use case Aktor Deskripsi Create a product design atau membuat sebuah desain produk Pelanggan Use case ini mendeskripsikan pelanggan ingin membuat desain produk sesuai keinginannya masing-masing. Precondition Pelanggan telah berada di semua halaman, kecuali halaman checkout dan halaman belanjaanku. Pemicu Urutan Kejadian
No Aktor Sistem 1. 2. 3 4. 5. Pelanggan menekan menu desain. Pelanggan memilih dan menekan nama kanvas. Pelanggan memilih gambar dasar Pelanggan memilih komponen gambar dengan cara drag and drop ke dalam kanvas sebagai template. Memilih selesai. Sistem menampilkan halaman pilhan kanvas yang akan digunakan sebagai dasar membuat desain produk. Sistem menampilkan halaman membuat desain. Sistem menampilkan gambar yang telah dipilih. Sistem menampilkan kanvas dengan hasil komponen yang telah diletakkan pada kanvas tersebut. Sistem menyimpan hasil membuat desain produk pelanggan. Langkah alternatif Kesimpulan Kondisi Setelah Aturan Proses Asumsi Use case berhasil jika kanvas telah terisi dengan komponen yang dimasukkan oleh pelanggan. Pelanggan dapat menambahkan produk ke dalam keranjang. Pelanggan berada pada halaman membuat desain dan telah memilih kanvas yang akan digunakan mendesain produk. Pelanggan ingin mendesain produk sesuai keinginannya dan melakukan pemesanan produk hasil desain Proses Bisnis di UMKM Nena Namo Sebelum dan Setelah ada Aplikasi Proses bisnis sebelum adanya website e- implementasi untuk commerce dan rencana sesudah website e-commerce menunjukkan perubahan yang terjadi. diidentifikasi Gambar 2 menunjukkan proses bisnis penangganan order di UMKM Nena Nemo sebelum e-commerce, menggunakan aplikasi website sedangkan proses penanganan order dengan menggunakan aplikasi website e-commerce. gambar 3 menunjukkan Gambar 2. Alur Proses Penanganan Pemesanan di UMKM Nena Namo yang Belum Menggunakan Aplikasi Perangkat Lunak Page | 86, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Gambar 3. Alur Proses Penanganan Pemesanan di Umkm Nena Namo Menggunakan Aplikasi Perangkat Lunak Diagram Sequence Desain diagram sequence dibuat berdasarkan dari desain diagram use case dan deskripsi dari masing-masing use case yang ada pada aplikasi. Gambar 4 adalah diagram sequence 'Create a product design'. Diagram Kelas Diagram untuk menampilkan kelas-kelas di dalam sistem dan hubungan relasi yang memberikan gambaran sistem secara statis. Gambar 5 menunjukkan diagram kelas pada sistem ini. kelas digunakan SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 87
Gambar 4. Diagram Sequence 'Create a Product Design' Gambar 5. Diagram Kelas Sistem E-Commerce UMKM Nena Namo Basis Data Aplikasi Website E-commerce UMKM Nena Nemo Basis data dibuat berdasarkan desain model data fisik. Desain data model fisik yang sudah dibuat dibangkitkan ke bentuk basis data spesifik. Teknologi basis data yang digunakan adalah basis data MySQL. Gambar 6 menampilkan desain basis data sistem e-commerce UMKM Nena Nemo. Page | 88, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Gambar 6. Desain Basis Data Sistem E-commerce UMKM Nena Namo Pengkodeaan Aplikasi Website E-commerce UMKM Nena Nemo Proses setelah rancangan diselesaikan. Bahasa pemrograman yang digunakan adalah Hypertext Prepocessor (PHP). Pembuatan kode sumber atau script dilakukan pada tiga komponen utama yakni Model, View, dan pengkodean dilakukan Controller yang biasa dikenal dengan sebutan pola MVC. Untuk memudahkan penyajian kode sumber (source code) untuk website e-commerce UMKM Nena Namo, diperlukan diagram sequence yang telah dibuat sebelumnya sebagai panduan untuk memudahkan penyajian View, Controller, dan Model. Diagram sequen yang dibuat panduan adalah "Display Produk UMKM Nena Namo" (Gambar 7). Gambar 7. Diagram Sequence "Display produk" sebagai Panduan untuk Pengkodean Aplikasi Dari diagram sequence di Gambar 7 yang diberi judul "Display produk", kita mendapatkan empat obyek yaitu Homepage, Controlweb, Mymodel, dan Productpage. Pada pengkodean ini, penulis menggunakan format MVC, maka keempat obyek tersebut dipetakan ke dalam model (entity), view (boundary), atau controller. Untuk perangkat lunak berbasis web, obyek-obyek kontrol dan model pada diagram sequence dapat menjadi kelas di kode sumber menggunakan bahasa pemrograman PHP, sedangkan obyek-obyek boundary atau view menjadi file bertipe html yang dijadikan sebagai GUI terhadap aktor pengguna. Hasil pengkategorian ini disajikan di Tabel 6 yang mana tabel ini menampilkan tipe komponen yang dapat berupa kelas atau halaman html dari tipe model, view dan controller yang diekstrak dari diagram sequen "Display produk" (Gambar 7). Pada tabel ini juga SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 89
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo disajikan beberapa metode dalam sebuah kelas yang diekstrak dari diagram sequence di Gambar 7 tersebut. Tabel 6. Tipe Komponen MVC dapat Berupa Kelas atau Halaman Html yang Diekstrak dari Diagram Sequence "Display Product" Tipe Komponen MVC Nama Komponen Tipe Nama metode dalam kelas tidak menampilkan kode sumber secara utuh karena keterbatasan Penulis tempat findProduct di kelas menampilkan metode Controlweb, getProduct dan getSubProduct di kelas Controlweb. Kode untuk metode findProduct disajikan di Gambar 7. Tampak bahwa kelas ini memanggil metode getProduct dan getSubproduct di kelas Mymodel, juga memanggil view ProductPage (lihat kembali Gambar 7). Pada kesempatan ini, penulis penyajian. sumber Model Mymodel Kelas getProduct dan getSubproduct Controller Controlweb Kelas findFunctionPro duct View ProductPage dan Homepage Halaman html
Gambar 8. Kode Sumber untuk Metode Findproduct di Kelas Controlweb Dimana Metode Ini Berisi Pemangilan Metode Getsubproduct dan Getproduct di Kelas Mymodel Dan Pemanggilan View Productpage Gambar 9. Kode Sumber untuk Metode Getproduct di Kelas Mymodel untuk Mendapatkan Produk-Produk Berdasarkan Kategori Tertentu Page | 90, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Gambar 10. Kode Sumber untuk Metode Getsubproduct di Kelas Mymodel untuk Mendapatkan Produk-Produk Berdasarkan Subkategori Sedangkan kode sumber getProduct diberikan di Gambar 9 dan getSubproduct di Gambar 10. Kedua metode tersebut berisi query terhadap tabel Products berdasarkan kategori atau berdasarkan subkategori dari sebuah produk UMKM Nena Namo. tertentu disimpan dalam bentuk larik. Hasil query ini oleh halaman metode ProductPage sebagai view untuk menampilkan produk script ProductPage.php yang berisi script html untuk menampilkan produk diberikan di Gambar 11. findProduct ke diberikan query. hasil Penggalan Selanjutnya, hasil query dari kedua metode tadi berupa nilai produk-produk UMKM yang Gambar 11. Penggalan Kode Sumber dari ProductPage.Php untuk Menampilkan Informasi Tentang Produk UMKM Aplikasi Website E-commerce UMKM Nena Namo Setelah menyelesaikan pengkodean untuk semua fitur-fitur yang sudah dirancang, maka dihasilkan sebuah aplikasi e-commerce untuk UMKM Nena Namo. Gambar 12-14 menampilkan beberapa contoh halaman pada sistem e-commerce UMKM Nena Namo. Gambar 13 dan Gambar 14 adalah halaman yang digunakan oleh pelanggan untuk mendesain produk yang akan dipesan. SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 91
Gambar 12. Halaman Produk yang Menampilkan Produk-Produk UMKM Gambar 13. Halaman Memilih Kanvas untuk Mendesain Produk Kustom oleh Pelanggan Gambar 14. Halaman untuk Mendesain Produk Kustom oleh Pelanggan Pengujian Aplikasi Website E-commerce UMKM Nena Namo Pengujian dilakukan setelah pengkodean selesai yang mana pengujian dilakukan berdasarkan kebutuhan non- fungsional. Pada penelitian ini, penulis fokus pada Pengujian pengujian dengan kebutuhan menggunakan pengujian use case. Pengujian menggunakan metode ini dilakukan dengan menguji skenario utama dan skenario alternatif pada masing- fungsional kebutuhan dan fungsional. kebutuhan fungsional dilakukan masing use case. Pada bagian ini, penulis tidak menampilkan pengujian terhadap semua use case. Sebagai akan menyajikan pengujian untuk use case "Create a product design", sementara untuk pengujian use case lainnya menggunakan prosedur serupa. ilustrasi, penulis Page | 92, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo Tabel 7. Pengujian untuk Use Case "Create a Product Design" 1 2 3 4 No Aksi aktor Pelanggan menekan menu buat desain. Pelanggan menekan nama kanvas. Pelanggan mengunggah gambar. Pelanggan menarik dan melepaskan komponen pada kanvas. Espektasi Sistem menampilkan halaman option product atau pilihan kanvas untuk desain produk. Sistem menampilkan halaman create design yang berisi komponen berupa gambar dan tulisan. Sistem menampilkan kanvas atau template sesuai dengan kanvas yang telah dipilih sebelumnya. Sistem menampilkan gambar yang telah diunggah Sistem menampilkan kanvas yang telah terisi dengan komponen . Hasil Sistem berhasil menampilkan halaman option product atau pilihan kanvas untuk desain produk. Sistem berhasil menampilkan halaman create design yang berisi komponen berupa gambar dan tulisan. Sistem berhasil menampilkan kanvas atau template sesuai dengan kanvas yang telah dipilih sebelumnya. Sistem menampilkan gambar yang telah diunggah Sistem berhasil menampilkan kanvas yang telah terisi dengan komponen. Simpulan Berhasil dan sesuai dengan espektasi. Berhasil dan sesuai dengan espektasi. Berhasil dan sesuai dengan espektasi Berhasil dan sesuai dengan espektasi. Hasil website e-commerce untuk halaman membuat desain produk Setelah pelanggan menekan menu buat desain, maka sistem akan menampilkan pilihan kanvas atau template yang digunakan untuk dasar membuat desain seperti gambar di bawah ini. Maka sistem akan menampilkan halaman desain sesuai dengan kanvas atau template yang telah dipilih. Komponen untuk mendesain produk terdiri dari teks dan gambar. Pelanggan dapat mengunggah gambar, sehingga dapat mendesain sesuai dengan keinginannya. Untuk mendeain produk lakukan cara drag and drop gambar ke dalam kanvas SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 93
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo 4. KESIMPULAN DAN SARAN Perancangan dan pembuatan website e- commerce produk handicraft UMKM Nena Namo memerlukan beberapa tahapan aktivitas. Tahapan pertama adalah tahap analisis kebutuhan, pada tahapan ini dilakukan dilakukan penggalian data kepada narasumber yaitu pemilik UMKM Nena Namo dengan teknik wawancara, hasil wawancara kemudian dianalisis untuk mendapatkan cerita pengguna, daftar kebutuhan fungsional sistem, dan deskripsi sistem dan pengguna. Analisis kebutuhan diakhiri dengan didapatkannya diagram use case dan deskripsinya. Pada aplikasi website e-commerce UMKM Nena Namo ini terdapat dua aktor pengguna yaitu pelanggan dan administror yang terdiri dari 23 use case. aplikasi ini. Desain yang bisa dilakukan oleh pelanggan menggunakan template dasar yang sudah disediakan oleh aplikasi, kemudian pelanggan dapat memilih beberapa aksesoris yang disediakan aplikasi dalam bentuk teks atau gambar. Keterbatasan utama penelitian ini terletak pada lingkup penelitian sampai pada ruang perancangan dan pembuatan website e-commerce untuk UMKM Nena Namo tidak membahas aspek implementasi, pemantauan dan evaluasi, penerimaan pengguna, pengukuran kinerja, analisis hasil implementasi, dan aspek pasca pembuatan aplikasi lainnya. Oleh sebab itu, penulis menyarankan untuk melakukan penelitian lanjutan dengan aspek-aspek yang disebutkan di atas disamping melanjutkan pengembangan aplikasi website e-commerce dengan fitur-fitur layanan baru untuk meningkatkan kualitas aplikasi. alternatif tahap desain yang digunakan untuk mengubah kebutuhan-kebutuhan yang sudah dijabarkan pada tahap analisis menjadi representasi ke dalam bentuk "blueprint" sistem yakni diagram sequence, diagram kelas, dan desain basis data. Tahap ketiga adalah pengkodean aplikasi website e-commerce yang mentransfer rancangan dalam bentuk diagram kelas ke dalam kode bahasa pemrograman dengan paradigma berorientasi obyek. Pengkodean menggunakan skema model, view, dan controller atau dikenal dengan skema MVC. Sedangkan tahap terakhir adalah pengujian aplikasi website e-commerce yang sudah dihasilkan dengan menggunakan pengujian berbasis use case. Setelah mengerjakan tahapan diatas, dihasilkan suatu sistem berbasis website e-commerce kustomisasi produk handicraft UMKM Nena Namo. Tahap kedua yaitu Kami mengucapkan terima kasih kepada Lembaga Penelitian dan Pengabdian Masyarakat (LPPM) Institut Teknologi Sepuluh Nopember (ITS) Surabaya atas dukungan pendanaan kepada kegiatan pengabdian masyarakat ini. 5. REFERENSI [1] I. W. Stat, "Top 20 Countries with The Highest Number of Internet Users," 2017. [2] APJII, "Penggunaan Internet Sektor Bisnis," Jakarta, 2013. [3] M. Mulawarman and A. D. Nurfitri, "Perilaku Pengguna Media Sosial beserta Implikasinya Ditinjau dari Perspektif Psikologi Sosial Terapan," Buletin Psikologi, vol. 25, no. 1, p. 36, Oct. 2017. Di antara fitur-fitur yang dimiliki aplikasi website e-commerce ini, yang paling menarik adalah fitur mendesain kustomisasi produk handicraft yang bisa dilakukan sendiri oleh pelanggan menggunakan [4] S. . Mourya and S. Gupta, E-commerce. Alpha Science International Limited, 2015. Page | 94, SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939
Perancangan dan Pembuatan Aplikasi Website E-Commerce untuk Produk Kerajinan Tangan UMKM Nena Namo [5] J. Wong, Internet Marketing For Beginners. Jakarta: Elex Media Komputindo, 2013. [6] K.-P. Mehdi, Encyclopedia of E-Commerce, E- Government, and Mobile Commerce. IGI Global, 2006. [7] M. S. Abdurrahman, "2018, Transaksi e- Commerce Indonesia Akan Capai Rp 144 Triliun," Bandung. [8] M. Suyanto, Strategi periklanan pada e-commerce perusahaan top dunia. Yogyakarta: ANDI, 2003. [9] J. Jauhari, "Upaya Pengembangan Usaha Kecil dan Menengah (UKM) Dengan Memanfaatkan E- Commerce," Jurnal Sistem Informasi, vol. 2, no. 1, p. 10, 2010. [10] D. A. Diartono, Y. Suhari, and A. Supriyanto, "Pengembangan Model Cyber Cluster E- Commerce Berbasis CMS dan SEO Produk UMKM," of Computing and Cybernetics Systems), vol. 9, no. 2, p. 145, Jul. 2015. IJCCS (Indonesian Journal [11] S. Adhy, "Implementasi E-Commerce B2C Bahasa Jawa untuk UMKM Jolali KaoSemarang," Jurnal Masyarakat Informatika, vol. 6, no. 12, Oct. 2015. [12] Sholiq, Analisis dan Perancangan Berorientasi Obyek. Bandung: Mutiara Indah, 2010. SMATIKA Jurnal Volume 08 Nomor 02, Oktober Tahun 2018 ISSN: 2087-0256, e-ISSN: 2580-6939, Page | 95