PERANCANGAN WEBSITE E-COMMERCE PADA TOKO DISTENA SHOP
NASKAH PUBLIKASI
diajukan oleh
Doni Satrio Nugroho 12.11.6714
kepada
FAKULTAS ILMU KOMPUTER UNIVERSITAS AMIKOM YOGYAKARTA
YOGYAKARTA
2019
1
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO DISTENA SHOP
Doni Satrio Nugroho1), Rizqi Sukma Kharisma2)
1),2)
Informatika Universitas AMIKOM Yogyakarta
Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283 Email : [email protected]1), [email protected]2)
Abstract - Distena Shop is an online store that sells drybags. Since its establishment, Distena Shop only uses Facebook Fan Page as a medium for promotion and sales. Traffic and sales transactions remains low.
In order to build trust, the presence of a website integrated with Facebook page that uses the name of our business is very important. Social media such as Facebook, Twitter, Google, and others, is a promotion tool for reaching network of social media users. If only create a Facebook page or Facebook account without linking to a website, a business seems lack credibility.
Based on these problems, the author conducted this research that aims to create an e-commerce website design for Distena Shop as a medium for branding, increasing visitor traffic, and expanding the reach of promotion and marketing. Website created by using the programming language PHP, MySQL database, XAMPP local server, jQuery, DataTables, Notepad ++, API of RajaOngkir and Bootstrap framework to facilitate the design of the website layout.
The method used is SDLC Waterfall model.
This research has resulted in Distena Shop website design which has features which are displaying a product catalog, show product details, adding a product to a shopping cart, customer registration process, process customer orders, process the payment confirmation, featuring a customer order, add the product catalog.
Keywords - Website, E-commerce, Branding, Credibility, Distena Shop.
1. Pendahuluan
1.1 Latar Belakang Masalah
Distena Shop adalah sebuah toko online yang menggunakan Facebook Fan Page sebagai media promosi dan penjualan. Produk yang dijual oleh Distena Shop adalah tas Drybag. Semenjak berdirinya toko Distena Shop hingga kini belum memiliki website e- commerce untuk media branding dan memperluas jangkauan promosi dan penjualan. Dalam promosinya Distena Shop menggunakan Facebook Ads, namun iklan masih diarahkan ke halaman Facebook Distena Shop.
Dalam rangka membangun kepercayaan, sekarang ini kehadiran website yang terintegrasi dengan halaman Facebook yang menggunakan nama bisnis kita menjadi sangat penting. Media sosial seperti Facebook, Twitter, Google, dan lain-lain, merupakan alat promosi website untuk menjangkau jaringan pengguna media sosial itu.
Hanya membuat Facebook page atau akun Facebook tanpa mengaitkan dengan website, bisnis kita dianggap kurang memiliki kredibilitas. Dengan menggunaka website, kita memiliki lebih banyak fasilitas daripada akun gratis dari Facebook. Di website kita bisa merancang toko dengan transaksi jual-beli secara cepat, langsung, dan otomatis sehingga customer dapat melakukan pembelian 1x24jam. Mereka tidak perlu menunggu respon dari kita dulu [1].
Dari uraian diatas, Distena Shop merasa perlu untuk memiliki website ecommerce untuk meningkatkan brand perusahaan, memperluas jangkauan promosi dan membantu pembeli dalam pemesanan dan pembelian produk. Oleh sebab itu, penulis berniat mengambil permasalahan ini sebagai bahan skripsi dengan judul
“Perancangan Website E-Commerce pada Toko Distena Shop”. Dengan hadirnya rancangan website e-commerce ini diharapkan dapat segera diimplementasikan agar bermanfaat bagi penjual, dapat membantu dalam melakukan branding, promosi, dan penjualan, dan bermanfaat bagi pembeli dalam melakukan pemesanan.
1.2 Rumusan Masalah
Berdasarkan uraian diatas dapat dirumuskan masalah dalam penelitian adalah sebagai berikut: Bagaimana membuat rancangan website e-commerce untuk toko Distena Shop?
1.3 Batasan Masalah
Agar dalam penelitian ini lebih fokus dan terarah maka ditentukan batasan masalah sebagai berikut:
a. Penelitian dilakukan pada Toko Distena Shop.
b. Dapat diimplementasikan dengan PHP.
c. Dapat diimplementasikan dengan MySQL.
d. Dapat terintegrasi dengan hosting dan domain.
1.4 Tujuan Penelitian
Tujuan yang ingin di dicapai dalam penelitian ini adalah membuat rancangan website e-commerce untuk media promosi dan penjualan toko Distena Shop.
1.5 Manfaat Penelitian
Manfaat yang diperoleh dari penelitian ini adalah:
a. Terciptanya rancangan website yang dapat membantu dalam branding, promosi, dan penjualan.
b. Terciptanya rancangan website yang dapat membantu pembeli dalam pemesanan dan pembelian produk.
2 1.6 Tinjauan Pustaka
Ardian, D.T, Satiabudhi, G dan Rostianingsih, S (2016), jurnal penelitian tentang “Pembuatan Website E- Commerce Penjualan Barang Untuk Perusahaan PT. X, Dengan Fitur Data Mining Generalize Sequential Pattern”. PT. X ingin membuat website e-commerce yang diharapkan dapat memperluas daerah pemasaran untuk menghadapi pesaingan dengan perusahaan sejenis.
Web dikembangkan dan dibuat dengan menggunakan bahasa pemrograman PHP, Ajax, dan JavaScript untuk fungsi-fungsi dan tampilan dari website, sedangkan database menggunakan MySQL. Pembuatan coding program menggunakan sarana software notepad++.
Website memiliki fitur pemesanan secara online untuk memudahkan user dalam melakukan pembelian dan user juga dapat melacak transaksi apa saja yang telah dilakukan, user dari website terbagi menjadi dua macam, yaitu admin dan user[2].
Zahra, F.S dan Mardhiyah, I (2017), jurnal penelitian tentang “Perancangan Website E-Commerce Pada Toko Tawazun Outdoor Dengan Metode Market Basket Analysis”. Penelitan ini membahas tentang website e- commerce yang dirancang menggunakan DreamWeaver CS6, XAMPP, bahasa pemrograman PHP, basis data MySQL, dan PhpMyAdmin untuk manajemen basis data. Website E-commerce Tawazun Outdoor Online bertujuan mempermudah pengunjung untuk berbelanja di toko Tawazun Outdoor. Pemilik toko Tawazun Outdoor dapat menentukan barang restock (barang yang akan disediakan selanjutnya) dengan melakukan Market Basket Analysis agar lebih efisien. Website E-commerce Tawazun Outdoor Online terdiri dari halaman member dan halaman admin [3].
Ramdhani, M.F, Hafidudin, S.T., M.T., dan Ir Herman (2015), jurnal penelitian tentang “Perancangan dan Implementasi Aplikasi Website T-Shirt Ewako Screen Printing Berbasis E-Commerce”. Aplikasi ini dibangun dengan menggunakan XAMPP, Dreamweaver CS 5, bahasa pemrograman HTML, PHP, serta MySQL, dan JavaScript. Website dibagi menjadi tiga hak akses yaitu hak akses untuk Admin, Member, dan Pengunjung.
Penerapkan teknologi aplikasi website yang berbasis e- commerce diharapkan akan memudahkan perusahaan dalam pengelolaan penjualan produk barang secara online. Di sisi lain, kemudahan akan dirasakan oleh user sebagai pelanggan. Pelanggan dapat melihat detail produk yang ditawarkan perusahaan secara online, tanpa perlu datang langsung ke tempat serta diberikan kemudahan dalam bertransaksi[4].
1.7 Landasan Teori
1.7.1 Definisi dan Konsep Dasar E-Commerce
E-Comrnerce dapat didefinisikan sebagai arena terjadinya transaksi atau pertukaran informasi antara penjual dan pembeli di dunia maya. E-Commerce memungkinkan suatu perusahaan menjangkau seluruh dunia untuk memasarkan produk atau jasanya tanpa harus dibatasi oleh batas-batas geografis. E-Commerce
merupakan salah satu pemicu terbentuknya prinsip ekonomi baru yang kini dikenal dengan ekonomi digital.
E-commerce hadir dalam menjawab tuntutan gaya hidup modern manusia yang menuntut kemudahan dan kecepatan dalam segala bidang. E-Commerce sering juga dikatakan Market-Making karena keberadaanya yang secara langsung telah membentuk pasar di dunia maya yang dapat mempertemukan penjual dan pembeli dari berbagai belahan dunia hanya dengan bermodalkan akses internet.
Setidaknya ada 5 (lima) konsep dasar yang dimiliki e- commerce yakni:
a. Automation, Otomasi bisnis proses sebagai pengganti proses manual (konsep "enterprise resource planning").
b. Streamlining/Integration, Proses yang terintegrasi untuk mencapai hasil yang efisien dan efektif (konsep
"just in time").
c. Publishing, Kemudahan berkomunikasi dan berpromosi untuk produk dan jasa yang diperdagangkan (konsep "electronic cataloging").
d. lnteraction, Pertukaran informasi/data antar pelaku bisnis dengan meminimalisasikan human error (konsep "electronic data interchange").
e. Transaction, Kesepakatan dua pelaku bisnis untuk bertransaksi dengan melibatkan institusi lain sebagai fungsi pembayar (konsep "electronic payment”)[5].
1.7.2 PHP
PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web, mulai dari halaman web yang sederhana sampai aplikasi komplek yang membutuhkan koneksi ke database. PHP merupakan script yang menyatu dengan HTML dan berada pada server (server side HTML embedded scripting)[6].
PHP (Hypertext Preprocessing) merupakan bahasa pernrograman yang biasa digunakan untuk membuat halaman HTML. Dengan PHP, halaman website yang dibuat akan menjadi dinamis, yakni dapat selalu berubah tanpa harus mengubah isi website secara manual.
Informasi akan diproses ulang oleh web server sehingga didapatkan isi paling mutakhir dari halaman web [7].
Salah satu kelebihan dari PHP adalah mampu berkomunikasi dengan berbagai database yang terkenal.
Dengan demikian, menampilkan data yang bersifat dinamis, yang diambil dari database, merupakan hal yang mudah untuk diimplementasikan[6].
1.7.3 MySql
MySQL adalah salah satu aplikasi RDBMS (Relational Database Management System). Pengertian sederhana RDBMS adalah: aplikasi database yang menggunakan prinsip relasional[6].
MySQL dapat didukung oleh hampir semua program aplikasi, baik yang open source seperti PHP maupun
3 yang tidak, yang ada pada platform Windows seperti Visual Basic, Visual FoxPro, Delphi, dan lainnya.
Kelebihan yang dimiliki MySQL adalah ia menggunakan bahasa query standar yang dimiliki SQL (Structure Query Language). SQL adalah suatu bahasa permintaan yang terstruktur yang telah distandarkan untuk semua program pengakses database[8].
1.7.4 ERD
Pemodelan awal basis data yang paling banyak digunakan adalah mengggunakan Entity Relationship Diagram (ERD). ERD digunakan untuk pemodelan basis data relasional[9].
Komponen-komponen ERD:
a. Entitas dan atribut. Seperti telah dijelaskan di atas, entitas adalah tempat penyimpan data, maka entitas yang digambarkan dalam ERD ini merupakan data store yang ada di DFD dan akan menjadi file data di komputer. Entitas adalah suatu objek dan memiliki nama. Secara sederhana dapat dikatakan bahwa jika objek ini tidak ada di suatu enterprise (lingkungan tertentu), maka enterprise tersebut tidak dapat berjalan normal.
b. Relasi. Relasi adalah penghubung antara satu entitas (master file) dengan entitas lain di dalam sebuah sistem komputer. Pada akhirnya, relasi akan menjadi file transaksi (transaction file) di computer.
c. Derajat Kardinalitas (Cardinality Degree). Hubungan antarentitas ditandai pula oleh derajat kardinalitas.
Fungsi dari derajat kardinalitas ini adalah untuk menentukan entitas kuat dan entitas lemah[9].
1.7.5 DFD
Data Flow Diagram (DFD) atau dalam bahasa Indonesia menjadi Diagram Alir Data (DAD) adalah representasi grafik yang digambarkan aliran informasi dan transformasi informasi yang diaplikasikan sebagai data yang mengalir dari masukan (input) dam keluaran (output). DFD dapat digunakan untuk merepresentasikan sebuah sistem atau perangkat lunak pada beberapa level abstraksi. DFD dapat dibagi menjadi beberapa level yang lebih detail untuk merepresentasikan aliran informasi atau fungsi yang lebih detail. DFD meyediakan mekanisme untuk pemodelan fungsional ataupun pemodelan aliran informasi. Oleh karena itu, DFD lebih sesuai digunakan untuk memodelkan fungsi-fungsi perangkat lunak yang akan diimplementasikan menggunakan pemrograman terstruktur karena pemrograman terstruktur membagi-bagi bagiannya dengan fungsi-fungsi dari prosedur-prosedur[9].
Berikut tingkatan level pada DFD dan penjelasannya:
a. DFD Level 0 atau sering juga disebut Context Diagram. DFD Level 0 menggambarkan sistem yang akan dibuat sebagai suatu entitas tunggal yang akan berinteraksi dengan orang atau sistem lain. DFD level 0 digunakan untuk menggambarkan interaksi antara sistem yang akan dikembangkan dengan entitas luar.
b. DFD Level 1. DFD Level 1 digunakan untuk menggambarkan modul-modul yang ada dalam sistem yang akan dikembangkan. DFD Level 1 merupakan hasil breakdown DFD L 0 yang sebelumnya sudah dibuat.
c. DFD Level 2. Modul-modul pada DFD Level 1 dapat di-breakdown menjadi DFD Level 2, Modul mana saja yang harus di-breakdown lebih detail tergantung pada tingkat kedetailan modul tersebut. Apabila modul tersebut sudah cukup detail dan rinci maka modul tersebut sudah tidak perlu untuk di-breakdown lagi.
DFD Level 3,4,5, dan seterusnya merupakan breakdown dari modul pada DFD Level di-atasnya[9].
2. Pembahasan
2.1 Analisis Kebutuhan Fungsional
Kebutuhan Fungsional adalah jenis kebutuhan yang berisi proses-proses apa saja yang nantinya dilakukan oleh sistem. Berikut kebutuhan fungsional dari sistem:
a. Mempu menambahkan atau menyunting produk.
b. Mampu menampilkan data produk.
c. Mampu melakukan registrasi data pengguna.
d. Mampu menyimpan data pengguna.
e. Mampu menampilkan data pengguna.
f. Mampu melakukan transaksi pemesanan produk g. Mampu menyimpan data transaksi pemesanan produk h. Mampu menampilkan data produk yang dipesan.
2.2 Analisis Kebutuhan Perangkat Keras
Perangkat keras yang digunakan dalam pembuatan sistem baru ditampilkan dalam Tabel 1 dibawah ini.
Tabel 1. Kebutuhan Perangkat Keras No Perangkat Keras Spesifikasi
1 Processor Intel Core™2Duo P7570 2,26GHz
2 RAM 2,00 GB
3 Hardisk 500
2.3 Analisis Kebutuhan Perangkat Lunak
Perangkat lunak yang digunakan dalam pembuatan sistem baru ditampilkan dalam Tabel 2 dibawah ini.
Tabel 2. Kebutuhan Perangkat Lunak
No Nama Kebutuhan
1 Sistem Operasi Windows 7 32-bit
2 Software
MySQL, XAMPP , PHP, Notepad++ , Adobe Photoshop
(desain gambar), ClickCharts (desain grafik), Browser
(Google Chrome)
4 2.4 Perancangan Diagram Konteks (DFD Level 0) Diagram konteks digunakan untuk menggambarkan alur data yang terjadi saat proses bisnis pada level yang paling dasar. Gambar 1 adalah gambar diagram konteks sistem yang baru.
Gambar 1. Diagram Konteks 2.5 Perancangan ERD
Setelah membuat alur bisnis sistem baru, selanjutnya adalah mendesain basis data yang sesuai dengan alur bisnis yang telah dibuat. Rancangan ERD ditampilkan pada Gambar 2 dibawah ini.
Gambar 2. ERD
Dari rancangan ERD yang telah dibuat dapat disimpulkan struktur tabel dan relasi antar tabel basis data adalah seperti pada Gambar 3 berikut ini.
Gambar 3. Struktur dan Relasi Antar Tabel
2.6 Perancangan Arsitektur Website
Arsitektur website menggambarkan halaman apa saja yang akan dibuat beserta konten yang terdapat pada halaman tersebut. Gambar 4 dibawah ini menampilkan rancangan arsitektur website.
Gambar 4. Arsitektur Website 2.7 Perancangan Interface Website
Berikut adalah beberapa rancangan halaman pada website Distena Shop, yaitu rancangan interface keranjang belanja, rancangan interface profile konsumen dan rancangan interface tambah/edit produk admin.
Gambar 5 adalah rancangan interface keranjang belanja.
Gambar 5. Rancangan Interface Keranjang Belanja Pada interface keranjang belanja ini menggunakan API Raja Ongkir untuk pengecekan perkiraan biaya pengiriman.
5 Rancangan interface profile konsumen ditunjukan pada Gambar 6 dibawah ini.
Gambar 6. Rancangan Interface Profile Konsumen Interface profile konsumen menampilkan data profile konsumen ke dalam form edit profile konsumen.
Rancangan interface tambah/edit produk admin ditunjukan pada Gambar 7 dibawah ini.
Gambar 7. Rancangan Interface Tambah/Edit Produk Interface tambah/edit produk digunakan untuk
menambah atau menyunting produk oleh admin.
3. Kesimpulan
Berdasarkan hasil analisis dan perancangan sistem yang dilakukan, maka diambil kesimpulan sebagai berikut:
Penelitian ini telah menghasilkan rancangan website Distena Shop yang memiliki fitur diantaranya adalah menampilkan katalog produk, menampilkan detail produk, menambahkan produk ke keranjang belanja, memproses pendaftaran konsumen, memproses pesanan konsumen, memproses konfirmasi pembayaran, menampilkan pesanan konsumen, dan menambah katalog produk.
Daftar Pustaka
[1] S. Masiang, Segera Resign & Mulai Bisnis!, Grasindo, 2016.
[2] Davin Ardian Tansil, Gregorius Satiabudhi, Silvia Rostianingsih, "Pembuatan Website E-Commerce Penjualan Barang Untuk Perusahaan PT. X, Dengan Fitur Data Mining Generalize Sequential Pattern,"
Jurnal Infra, Vols. 4, No. 1, pp. 21-27, 2016.
[3] Fidelia S. Zahra, Iffatul Mardhiyah, "Perancangan Website E-Commerce Pada Toko Tawazun Outdoor Dengan Metode Market Basket Analysis," Jurnal Ilmiah Informatika, Vols. 22, No. 3, pp. 216-234, 2017.
[4] Muhammad Fauzy Ramdhani, Hafidudin, ST.,MT, Ir Herman, "Perancangan dan Implementasi Aplikasi Website T-Shirt Ewako Screen Printing Berbasis E- Commerce," eProceedings of Applied Science, vol. 1 No. 1, pp. 781-788, 2015.
[5] R. R. Rerung, E-Commerce, Menciptakan Daya Saing Melalui Teknologi Informasi, Yogyakarta:
Deepublish, 2018.
[6] R. R. Rerung, Pemrograman Web Dasar, Yogyakarta: Deepublish, 2018.
[7] Ichsan Risnandar P., Petrus Fajar Subekti, Teguh Nugraha, Hafni S.S, Website Development Fundamental: Fitur, Layout, & Operasional Lebih Maju, Bandung: Nuansa Cendekia, 2015.
[8] Wardana, Aplikasi Website Profesional dengan PHP dan jQuery, Jakarta: PT Elex Media Komputindo, 2016.
[9] Rosa. A.S and M. Shalahuddin, Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek, Bandung:
Informatika Bandung, 2018.
Biodata Penulis
Doni Satrio Nugroho, memperoleh gelar Sarjana Komputer (S.Kom), Jurusan Informatika Universitas AMIKOM Yogyakarta, lulus tahun 2019.
Rizqi Sukma Kharisma, memperoleh gelar Sarjana Komputer (S.Kom), Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta, lulus tahun 2009.
Memperoleh gelar Magister Ilmu Komputer (M.Kom) di STMIK AMIKOM Yogyakarta, lulus tahun 2012. Saat ini menjadi Dosen di Universitas AMIKOM Yogyakarta.
