RANCANG BANGUN WEBSITE E-COMMERCE BATIK TRADJUMAS

RANCANG BANGUN WEBSITE E-COMMERCE BATIK

TRADJUMAS

Naya Viandita1, Reza Chandra2

Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi Universitas

Gunadarma, Jl. Margonda Raya No. 100, Depok 16424, Jawa Barat

[email protected], [email protected]

Abstrak

Kegiatan pemasaran dan penjualan Batik Tradjumas masih dilakukan secara konvensional.

Kegiatan promosi Batik Tradjumas masih dilakukan dari mulut ke mulut ataupun melalui

penyebaran brosur. Hal ini menyebabkan pasar konsumen dari Batik Tradjumas belum besar dan konsumen masih mengalami kesulitan untuk membeli produk batik. Kebanyakan konsumen

datang ke toko untuk membeli batik secara langsung. Tujuan dari penulisan karya ilmiah ini

adalah untuk membangun website Batik Tradjumas supaya konsumen dapat memesan produk batik secara online. Website ini dibuat menggunakan Framework CodeIgniter dan MariaDB

sebagai basis datanya. Konsumen dapat mengakses website di mana saja selama ada koneksi

internet dan tidak perlu datang ke toko untuk melakukan pemesanan atau pembelian produk. Selain itu, admin dapat menyimpan data pembelian dan mengelola seluruh informasi dengan

lengkap dan baik pada halaman admin. Website untuk Batik Tradjumas dapat diakses melalui

internet dengan url https://tradjumas.web.id/.

Kata Kunci: website, batik, tradjumas, codeigniter

Abstract

Marketing and sales of Batik Tradjumas are still carried out conventionally. Batik Tradjumas

promotional activities are also still being carried out by word of mouth or through distributing brochures. This causes the consumer market of Batik Tradjumas not yet big and consumers still

have difficulty buying batik products. Most consumers come to the shop to buy batik directly. The

purpose of writing this scientific paper is to build a Batik Tradjumas website so that consumers

can order batik products online. This website is created using the CodeIgniter Framework and MariaDB as its database. Consumers can access the website anywhere as long as there is an

internet connection and do not need to come to the store to place orders or purchase products. In

addition, admins can store purchase data and manage all information completely and properly on the admin page. The website for Batik Tradjumas can be accessed via the internet with url

https://tradjumas.web.id/.

Key Words: website, batik, tradjumas, codeigniter

1. PENDAHULUAN

Batik Tradjumas merupakan usaha

kecil menengah (UKM) yang didirikan pada

bulan Oktober 2016 yang bergerak di bidang

proses pembuatan batik tulis, batik cap, batik

printing sampai dengan penjualan kain batik

dan pakaian batik siap pakai. Batik

Tradjumas berlokasi di Perumahan Bumi

Sawangan Indah Blok C3 No. 89 Kelurahan

Pengasinan, Kecamatan Sawangan, Kota

Depok, Provinsi Jawa Barat. Selama ini

kegiatan pemasaran dan proses penjualan

batik masih dilakukan secara konvensional.

Kegiatan promosinya dilakukan dari mulut

ke mulut ataupun melalui penyebaran

brosur, sehingga jangkauan promosi dan

penjualan masih terbatas belum menyebar

ke daerah-daerah dan kota-kota besar

lainnya di Indonesia.

Proses promosi yang masih

konvensional menjadi masalah tersendiri

bagi calon konsumen yang akan membeli

produk dari Batik Tradjumas. Bila calon

konsumen tidak dapat menemukan letak

Batik Tradjumas, maka akan mengurungkan

niatnya untuk membeli produk dari Batik

Tradjumas tersebut. Secara tidak langsung

hal ini menjadi kerugian tersendiri bagi

Batik Tradjumas karena kehilangan calon

pembelinya. Pelanggan harus datang ke

tempat penjualan untuk mengetahui ada

tidaknya produk baru. Tentu cara seperti ini

menjadi kurang efisien karena dibutuhkan

waktu yang lama untuk seorang calon

konsumen mengetahui informasi suatu

produk.

Sekarang ini internet tidak hanya

digunakan untuk memperoleh informasi

saja, melainkan dapat digunakan sebagai

media untuk melakukan bisnis dengan

membangun sebuah website. Teknologi

website sudah banyak dilakukan untuk

menunjang kegiatan promosi maupun

penjualan produk dari sebuah perusahaan.

Menggunakan teknologi website akan

menghasilkan lebih banyak keuntungan

dibandingkan dengan penjualan produk

secara konvensional.

Berdasarkan uraian di atas, maka

diusulkan untuk membangun aplikasi

penjualan batik pada Batik Tradjumas

berbasis website menggunakan Framework

Codeigniter. Sistem ini berisi tentang

pengolahan data, transaksi penjualan, dan

transaksi pembelian sehingga dapat

memudahkan proses transaksi jual beli bagi

pembeli maupun penjual.

Penulis merumuskan masalah yang

akan dibahas pada pengembangan website

Batik Tradjumas yang menyediakan

informasi kain dan pakaian batik serta

menyediakan fitur-fitur yaitu melakukan

checkout, mengkonfirmasi pembayaran,

mengubah data pelanggan, melihat data

transaksi penjualan, mengelola data produk,

mengelola kategori produk, mengelola data

rekening, mengelola data admin, dan

mengelola konfigurasi website Batik

Tradjumas. Website ini dibangun dengan

Framework CodeIgniter versi 3.1.9

menggunakan HTML versi 5, PHP versi

7.4.3 dan MariaDB versi 10.4.11.

Tujuan penelitian ini adalah

membuat website untuk mempermudah

konsumen membeli kain dan pakaian batik

tanpa harus datang ke tokonya langsung.

Kemudian, membantu untuk memperluas

pasar penjualan Batik Tradjumas dan

mengenalkan jenis motif batik secara umum

motif nasional dan secara khusus motif khas

Depok.

2. METODE PENELITIAN

Dalam penulisan ilmiah ini, metode

yang digunakan adalah studi lapangan

dengan mewawancarai pemilik dan pegawai

Batik Tradjumas. Tahapan metode

penelitian adalah sebagai berikut:

1. Tahap Perencanaan

Pada tahap perencanaan dalam

membuat aplikasi berbasis web dengan

melakukan wawancara guna mengumpulkan

data dan informasi, serta menentukan jangka

waktu pengembangan dalam pembuatan

aplikasi.

2. Tahap Analisis

Setelah tahap perencanaan,

menganalisis kebutuhan yang dianalisis

yaitu kebutuhan fungsional dan non

fungsional yang dibutuhkan dalam

merancang sistem pada website penjualan

batik pada Batik Tradjumas.

3. Tahap Perancangan

Setelah diketahui kebutuhan

fungsional dan non fungsional yang

dibutuhkan, baru dilakukan perancangan

sistem serta kegiatan-kegiatan yang terjadi

dalam sistem dan alur data yang terbentuk

selama proses sistem berjalan. Setelah tahap

perancangan sistem dan perancangan

database selesai dibuat, maka tahapan

selanjutnya adalah merancang aplikasi

website yaitu dengan membuat tampilan

aplikasi website yang diinginkan.

4. Tahap Pengembangan

Pada tahap pengembangan

menjelaskan tampilan website Batik

Tradjumas beserta menu-menu yang ada di

website tersebut sesuai dengan rancangan

tampilan yang telah dibuat sebelumnya.

5. Tahap Uji Coba

Pada tahap pengujian ini dilakukan

dengan menggunakan metode black box dan

user acceptance test.

6. Tahap Implementasi

Tahap terakhir dalam

pengembangan website adalah melakukan

implementasi website ke hosting yang

merupakan tahapan dimana aplikasi siap

digunakan.

3. HASIL DAN PEMBAHASAN

3.1 Gambaran Umum Website

Batik Tradjumas merupakan usaha

kecil menengah (UKM) yang didirikan pada

bulan Oktober 2016 yang bergerak di bidang

proses pembuatan batik tulis, batik cap, batik

printing sampai dengan penjualan kain batik

dan pakaian batik siap pakai. Pembuatan

website Batik Tradjumas ditunjukkan untuk

mempermudah masyarakat dalam membeli

produk-produk yang ditawarkan oleh Batik

Tradjumas. Website ini mempunyai Front

End dan Back End, yaitu menu admin dan

menu user. Tampilan Back End terdapat

login admin yang berisikan Beranda,

Transaksi Pembelian, Data Produk, Data

Rekening, Data Pengguna Admin, dan

Konfigurasi Website. Sedangkan tampilan

Front End terdapat Beranda, Produk,

Tentang Kami, Keranjang Belanja,

Registrasi Pelanggan, Login Pelanggan, dan

Menu Pelanggan. Proses pembuatan aplikasi

menggunakan Sublime Text 3 sebagai kode

editor yang berfungsi untuk menulis kode

program HTML dan phpMyAdmin untuk

mengelola database MariaDB.

3.2 Pemodelan Sistem

Pemodelan sistem menggunakan Use Case

diagram. Use Case diagram ini menjelaskan

kegunaan sistem yang akan dibangun.

Gambar 1. Use Case Pelanggan

Pada Gambar 1 pelanggan dapat melihat

produk yang ditawarkan Batik Tradjumas,

memasukkan produk yang dipilih ke

keranjang belanja, menambahkan jumlah

belanja, dan menghapus belanja. Jika sudah

login pelanggan dapat melakukan checkout,

melakukan konrmasi pembayarn, dan

mengubah data pelanggan.

Gambar 2. Use Case Admin

Pada Gambar 2 admin dapat melihat data





Tradjumas jika sudah melakukan login.

Penggambaran alur kerja dari sistem

menggunakan Activity diagram. Activity

diagram menggambarkan alur kerja

(aktivitas) pada use case (proses) dan

menunjukkan aliran keseluruhan kontrol.

Gambar 3. Activity Pelanggan

Pada Gambar 3 ketika pelanggan membuka

website akan masuk ke beranda website, lalu

pelanggan dapat melihat produk-produk

yang ditawarkan oleh Batik Tradjumas.

Pelanggan dapat melakukan registrasi dan

login. Setelah melakukan login, pelanggan

akan melihat dashboard pelanggan. Ketika

pelanggan memilih produk akan ditampilkan

halaman produk yang dipilih. Ketika

checkout produk, pelanggan dapat melihat

data pemesanan. Setelah checkout produk,

pelanggan diharuskan segera membayar

produk yang dipesan dan melakukan

konfirmasi pembayaran. Jika pelanggan

tidak melakukan login, maka pelanggan

hanya dapat melihat produk-produk yang

ditawarkan Batik Tradjumas.

Gambar 4. Activity Admin

Pada Gambar 4 setelah admin melakukan

login, akan menampilkan halaman utama

admin. Kemudian admin dapat melihat data





Tradjumas.

Website ini terdiri dari beberapa halaman

yang memiliki fungsi masing-masing.

Struktur navigasi diperlukan untuk

menggambarkan alur secara garis besar dari

tiap halaman yang ada pada website tersebut.

Gambar 5. Struktur Navigasi User

Gambar 6. Struktur Navigasi Pelanggan

Struktur navigasi user terdapat 2 halaman

yaitu halaman user dan halaman pelanggan.

Pelanggan harus login terlebih dulu untuk

melakukan pembelian produk. Pada

halaman produk yang dipilih, pelanggan

dapat melihat detail produk dan

menambahkan jumlah produk yang akan

dibeli. Produk beserta jumlah yang dibeli

akan masuk ke halaman keranjang belanja.

Untuk user, pada halaman produk yang

dipilih user dapat melihat detail produk serta

dapat menambahkan jumlah produk yang

akan dibeli dan masuk ke keranjang belanja,

tetapi user tidak bisa melanjutkan

pembayaran karena harus masuk akun

terlebih dahulu.

Gambar 7. Struktur Navigasi Admin

Struktur navigasi admin terdapat halaman

login untuk admin. Admin dapat melihat

menu jika login. Setelah login akan masuk

ke beranda admin. Terdapat menu data

transaksi, data produk, data kategori produk,

data rekening, data admin, dan konfigurasi

website. Pada halaman data transaksi admin

dapat melakukan action print out laporan

dan unduh laporan. Pada halaman data

produk, data kategori produk, data rekening,

dan data admin dapat melakukan action edit

data, hapus data, dan tambah data. Pada

halaman konfigurasi website admin dapat

melakukan edit data.

3.3 Implementasi

Pada tahap ini mengimplementasikan hasil

rancangan perangkat lunak yang telah di

ubah menjadi sebuah output yaitu berupa

aplikasi sistem e-commerce berbasis website

pada toko Batik Tradjumas.

1. Tampilan Halaman Beranda Pelanggan

Gambar 8. Tampilan Beranda Pelanggan

Halaman ini menampilkan produk-produk

terbaru dari Batik Tradjumas.

2. Tampilan Halaman Produk

Gambar 9. Tampilan Produk

Halaman ini menampilkan beberapa produk

yang dijual beserta nama produk dan harga.

Halaman produk memiliki kategori dan

menampilkan produk setiap kategorinya.

Jika ingin melihat detail produk dapat

mengklik nama produknya.

3. Tampilan Halaman Detail Produk

Gambar 10. Tampilan Detail Produk

Halaman ini menampilkan detail produk

yang dipilih.

4. Tampilan Halaman Tentang Kami

Gambar 11. Tampilan Tentang Kami

Halaman ini menampilkan profil singkat

dari Batik Tradjumas.

5. Tampilan Halaman Registrasi

Pelanggan

Gambar 12. Tampilan Registrasi

Berisi halaman untuk registrasi sebelum

pelanggan melakukan login. Pelanggan

harus mengisi data pribadi di halaman

registrasi.

6. Tampilan Halaman Login Pelanggan

Gambar 13. Tampilan Login Pelanggan

Berisi halaman untuk login pelanggan

sebelum melakukan transaksi. Pelanggan

harus memasukkan username dan password

untuk login.

7. Tampilan Halaman Keranjang Belanja

Gambar 14. Tampilan Keranjang Belanja

Halaman ini menampilkan data yang

dipesan oleh pelanggan. Data yang

ditampilkan adalah gambar produk, nama

produk, harga produk, jumlah produk, dan

sub total. Terdapat action update untuk

mengupdate jumlah produk yang ingin

dibeli, action hapus untuk menghapus

produk dan tombol checkout.

8. Tampilan Halaman Dashboard

Pelanggan

Gambar 15. Tampilan Dashboard

Pelanggan

Halaman ini menampilkan halaman

dashboard pelanggan yang terdapat produk-

produk yang sudah dibeli.

9. Tampilan Halaman Login Admin

Gambar 16. Tampilan Login Admin

Berisi halaman untuk login admin sebelum

masuk mengelola website.

10. Tampilan Halaman Ddashboard

Admin

Gambar 17. Tampilan Dashboard Admin

Halaman ini meupakan halaman utama pada

halaman admin.

11. Tampilan Halaman Data Transaksi

Gambar 18. Tampilan Data Transaksi

Halaman ini menampilkan transaksi-

transaksi dari pelanggan.

12. Tampilan Halaman Data Produk

Gambar 19. Tampilan Data Produk

Halaman ini menampilkan daftar data

produk yang telah di input oleh admin dan

terdapat action gambar, edit, hapus dan

tambah baru. Gambar untuk menambahkan

gambar produk, edit untuk mengedit data

produk, hapus untuk menghapus data

produk, dan tambah baru untuk

menambahkan data produk.

13. Tampilan Halaman Data Rekening

Gambar 20. Tampilan Data Rekening

Halaman ini menampilkan daftar

rekening bank yang telah di input oleh

admin. Terdapat action edit, hapus, dan

tambah baru. Edit untuk mengedit data

rekening, hapus untuk menghapus data

rekening, dan tambah baru untuk

menambahkan data rekening.

14. Tampilan Halaman Data Admin

Gambar 21. Tampilan Data Admin

Halaman ini menampilkan daftar admin

yang mengelola website Batik Tradjumas.

Terdapat action edit, hapus, dan tambah

baru. Edit untuk mengedit data admin, hapus

untuk menghapus data admin, dan tambah

baru untuk menambahkan data admin.

15. Tampilan Halaman Konfigurasi Umum

Gambar 22. Tampilan Konfigurasi Umum

Halaman ini menampilkan data-data yang

berkaitan dengan Batik Tradjumas yang

sudah di input oleh admin. Data tersebut

akan ditampilkan pada website Batik

Tradjumas.

4. KESIMPULAN DAN SARAN

4.1 Kesimpulan

Website penjualan batik telah

berhasil dibuat dan dapat diakses di situs

https://tradjumas.web.id/ melalui personal

komputer maupun ponsel pengguna.

Berdasarkan hasil pengujian Black Box pada

website halaman pelanggan dan halaman

admin dinyatakan berhasil sesuai dengan

yang diharapkan dan hasil kuesioner yang

disebar pada 14 responden website ini dapat

membantu pelanggan dalam mengetahui

informasi produk maupun toko dan dapat

memesan atau membeli produk secara

online tanpa harus datang langsung ke toko.

Selain itu, mempermudah admin dalam

mengelola data.

4.2 Saran

Saran yang perlu dikembangkan

untuk website ini yaitu website ini masih

terbilang cukup sederhana. Penulis

menyadari bahwa website ini masih

memerlukan beberapa pengembangan

dengan menambahkan fitur baru agar

semakin memudahkan pelanggan dalam

proses pembelian dan membuat desain

website lebih menarik untuk dikunjungi.

DAFTAR PUSTAKA

[1] Aditya (2013). Mariadb (download).

https://www.stmikplk.ac.id/mariadb-

download/ (diakses tanggal 14 Juli

2020).

[2] Ahmadi, C. and Hermawan, D. (2013).

E-business dan e-commerce.

Yogyakarta: Andi Offset.

[3] Alatas, H. (2015). Proyek Membangun

Responsive Web Design dengan

Bootstrap 3 dan 4. Yogyakarta:

Lokomedia.

[4] Arief, M. R. (2011). Pemrograman

Web Dinamis Menggunakan PHP dan

MySQL. Yogyakarta: Andi Offset.

[5] Basuki, A. P. (2010). Membangun

Web berbasis PHP dengan Framework

Codeigniter. Yogyakarta: Lokomedia.

[6] Binanto, I. (2010). Multimedia digital-

dasar teori dan pengembangannya.


[7] Bos, W. (2014). Sublime Text Power

User. Hamilton: O Reilly.

[8] Fathansyah (2012). Basis Data.

Bandung: Informatika Bandung.

[9] Firdaus (2007). 7 Jam Belajar

Interaktif PHP dan MySQL dengan

Dreamweaver. Palembang: Maxikom.

[10] Gunawan, W. S. (2010). Kebut

Sehari Jadi Web Master. Yogyakarta:

Genius Publisher.

[11] Henderson, H. (2009).

Encyclopedia of Computer Science and

Technology. New York: Facts on File,

Inc.

[12] Hendini, A. (2016). Pemodelan uml

sistem informasi monitoring penjualan

dan stok barang (sudi kasus: Distro

zhezha pontianak). Jurnal Khatulistiwa

Informatika. 4(2). 107-116.

[13] Hidayat, R. (2010). Cara Praktis

Membangun Website Gratis. Jakarta:

Elex Media Komputindo.

[14] Kusrini (2007). Strategi

Perancangan dan Pengelolaan Basis

Data. Yogyakarta: Andi Offset.

[15] Lisbijanto, H. (2013). Batik.

Yogyakarta: Graha Ilmu.

[16] Madcoms (2011). Sukses

Membangun Toko Online dengan E-

Commerce. Yogyakarta: Andi Offset.

[17] Madcoms (2016). Pemrograman

PHP dan MySQL Untuk Pemula.


[18] Musman, A. and Arini, A. B.

(2011). Batik Warisan Adiluhung

Nusantara. Yogyakarta: G-Media.

[19] Pressman, R. S. (2002). Rekayasa

Perangkat Lunak Pendekatan Praktisi

(Buku. Satu). Yogyakarta: Andi Offset.

[20] Pressman, R. S. (2010). Rekayasa

Perangkat Lunak Pendekatan Praktisi.


[21] Raharjo, B. (2015). Belajar

Otodidak Framework CodeIgniter.

Bandung: Informatika.

[22] Setiadi, W. G. (2010). Kebut Sehari

Jadi Webmaster. Yogyakarta: Genius

Publisher.

[23] Sibero, A. F. K. (2011). Kitab Suci

Web Programming. Yogyakarta:

MediaKom.

[24] Sidik, B. (2012). Pemrograman

Web dengan PHP. Bandung :

Informatika.

[25] Sidik, B. and Pohan, H. I. (2013).

Pemrograman Web Dengan HTML.

Bandung: Informatika Bandung.

[26] Spurlock, J. (2013). Bootstrap:

Responsive Web Development.

Sebastopol: O'Reilly Media, Inc.

[27] Sulianta, F. (2017). Teknik

Perancangan Arsitektur Sistem

Informasi. Yogyakarta: Andi.

[28] Sutisna, D. (2007). Langkah Mudah

Menjadi Webmaster. Jakarta Selatan:

Mediakita.

[29] Sutopo, A. H. (2007). Pemrograman

Flash dengan PHP dan MySQL.

Yogyakarta: Graha Ilmu.

[30] Yuhefizar (2008). 10 Jam

Menguasai Internet Teknologi dan

Aplikasi. Jakarta: PT Elex Media

Komputindo.

[31] Zaki, A. (2008). Kursus Kilat

Internet. Yogyakarta: CV. Andi Offset.

RANCANG BANGUN WEBSITE E-COMMERCE BATIK TRADJUMAS

Documents

Transcript of RANCANG BANGUN WEBSITE E-COMMERCE BATIK TRADJUMAS